feat(components): create badge web component

Teradata · Mar 15, 2024 · 3e4eb8d · 3e4eb8d
1 parent 9b7cb50
commit 3e4eb8d
Show file tree

Hide file tree

Showing 60 changed files with 17,761 additions and 17,347 deletions.
diff --git a/apps/knapsack/data/blocks/block.0pGlu50vut.json b/apps/knapsack/data/blocks/block.0pGlu50vut.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.palettes"],
+    "groupIds": ["cv.theme.dark.palettes"],
     "include": "positive",
     "exclude": ""
   }

diff --git a/apps/knapsack/data/blocks/block.17Ux-cmwk6.json b/apps/knapsack/data/blocks/block.17Ux-cmwk6.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.colors"],
+    "groupIds": ["cv.theme.dark.colors"],
     "include": "emphasis",
     "exclude": "on"
   }

diff --git a/apps/knapsack/data/blocks/block.1wLEYXilwB.json b/apps/knapsack/data/blocks/block.1wLEYXilwB.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.palettes"],
+    "groupIds": ["cv.theme.light.palettes"],
     "include": "secondary"
   }
 }
diff --git a/apps/knapsack/data/blocks/block.3aOfl99XQO.json b/apps/knapsack/data/blocks/block.3aOfl99XQO.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.palettes"],
+    "groupIds": ["cv.theme.light.palettes"],
     "include": "positive",
     "exclude": ""
   }

diff --git a/apps/knapsack/data/blocks/block.8gL6YNJqep.json b/apps/knapsack/data/blocks/block.8gL6YNJqep.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.palettes"],
+    "groupIds": ["cv.theme.dark.palettes"],
     "include": "neutral",
     "exclude": ""
   }

diff --git a/apps/knapsack/data/blocks/block.CO3zQ-CEfX.json b/apps/knapsack/data/blocks/block.CO3zQ-CEfX.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.colors"],
+    "groupIds": ["cv.theme.light.colors"],
     "include": "emphasis",
     "exclude": "on-"
   }

diff --git a/apps/knapsack/data/blocks/block.CzmzktONAJ.json b/apps/knapsack/data/blocks/block.CzmzktONAJ.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.palettes"],
+    "groupIds": ["cv.theme.light.palettes"],
     "include": "negative",
     "exclude": ""
   }

diff --git a/apps/knapsack/data/blocks/block.FONQaoI-jL.json b/apps/knapsack/data/blocks/block.FONQaoI-jL.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.palettes"],
+    "groupIds": ["cv.theme.dark.palettes"],
     "include": "secondary"
   }
 }
diff --git a/apps/knapsack/data/blocks/block.ImMuua8L-z.json b/apps/knapsack/data/blocks/block.ImMuua8L-z.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.palettes"],
+    "groupIds": ["cv.theme.light.palettes"],
     "include": "neutral",
     "exclude": ""
   }

diff --git a/apps/knapsack/data/blocks/block.KCxPtt27ce.json b/apps/knapsack/data/blocks/block.KCxPtt27ce.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.colors"],
+    "groupIds": ["cv.theme.dark.colors"],
     "include": "positive",
     "exclude": "on"
   }

diff --git a/apps/knapsack/data/blocks/block.Ms2uqYBV6U.json b/apps/knapsack/data/blocks/block.Ms2uqYBV6U.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.palettes"],
+    "groupIds": ["cv.theme.dark.palettes"],
     "include": "emphasis"
   }
 }
diff --git a/apps/knapsack/data/blocks/block.NiGVnAPPLN.json b/apps/knapsack/data/blocks/block.NiGVnAPPLN.json
@@ -4,6 +4,6 @@
   "data": {
     "demoId": "table-list",
     "tokenType": "",
-    "groupIds": ["typography"]
+    "groupIds": ["cv.typography"]
   }
 }
diff --git a/apps/knapsack/data/blocks/block.QUFPRgafCA.json b/apps/knapsack/data/blocks/block.QUFPRgafCA.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.palettes"],
+    "groupIds": ["cv.theme.dark.palettes"],
     "include": "caution",
     "exclude": ""
   }

diff --git a/apps/knapsack/data/blocks/block.ReqAiACI1c.json b/apps/knapsack/data/blocks/block.ReqAiACI1c.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.colors"],
+    "groupIds": ["cv.theme.dark.colors"],
     "include": "secondary",
     "exclude": "on-"
   }

diff --git a/apps/knapsack/data/blocks/block.RpNVeUD4VR.json b/apps/knapsack/data/blocks/block.RpNVeUD4VR.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.colors"],
+    "groupIds": ["cv.theme.light.colors"],
     "include": "caution-",
     "exclude": "-on-"
   }

diff --git a/apps/knapsack/data/blocks/block.W6iMYkJl1b.json b/apps/knapsack/data/blocks/block.W6iMYkJl1b.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.colors"],
+    "groupIds": ["cv.theme.light.colors"],
     "include": "negative",
     "exclude": "on-"
   }

diff --git a/apps/knapsack/data/blocks/block.bd-hnZIj95.json b/apps/knapsack/data/blocks/block.bd-hnZIj95.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.colors"],
+    "groupIds": ["cv.theme.dark.colors"],
     "include": "primary",
     "exclude": "on-"
   }

diff --git a/apps/knapsack/data/blocks/block.kqAjNU6PeQ.json b/apps/knapsack/data/blocks/block.kqAjNU6PeQ.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.palettes"],
+    "groupIds": ["cv.theme.dark.palettes"],
     "include": "digital"
   }
 }
diff --git a/apps/knapsack/data/blocks/block.l2Nw3SC3h6.json b/apps/knapsack/data/blocks/block.l2Nw3SC3h6.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.colors"],
+    "groupIds": ["cv.theme.dark.colors"],
     "include": "negative",
     "exclude": "on"
   }

diff --git a/apps/knapsack/data/blocks/block.m2C6mk53nZ.json b/apps/knapsack/data/blocks/block.m2C6mk53nZ.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.palettes"],
+    "groupIds": ["cv.theme.light.palettes"],
     "include": "digital"
   },
   "header": {

diff --git a/apps/knapsack/data/blocks/block.o8eAW6QEC.json b/apps/knapsack/data/blocks/block.o8eAW6QEC.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.palettes"],
+    "groupIds": ["cv.theme.light.palettes"],
     "include": "caution",
     "exclude": ""
   }

diff --git a/apps/knapsack/data/blocks/block.pJqoUX-4B.json b/apps/knapsack/data/blocks/block.pJqoUX-4B.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.colors"],
+    "groupIds": ["cv.theme.light.colors"],
     "include": "positive",
     "exclude": "on-"
   }

diff --git a/apps/knapsack/data/blocks/block.s8qcpKF1wh.json b/apps/knapsack/data/blocks/block.s8qcpKF1wh.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.palettes"],
+    "groupIds": ["cv.theme.light.palettes"],
     "include": "emphasis"
   }
 }
diff --git a/apps/knapsack/data/blocks/block.sRbX9aFbhm.json b/apps/knapsack/data/blocks/block.sRbX9aFbhm.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.colors"],
+    "groupIds": ["cv.theme.dark.colors"],
     "include": "caution",
     "exclude": ""
   }

diff --git a/apps/knapsack/data/blocks/block.tTiJjlCSwd.json b/apps/knapsack/data/blocks/block.tTiJjlCSwd.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.colors"],
+    "groupIds": ["cv.theme.light.colors"],
     "include": "primary",
     "exclude": "on-"
   }

diff --git a/apps/knapsack/data/blocks/block.vhRGifjBi.json b/apps/knapsack/data/blocks/block.vhRGifjBi.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.dark.palettes"],
+    "groupIds": ["cv.theme.dark.palettes"],
     "include": "negative",
     "exclude": ""
   }

diff --git a/apps/knapsack/data/blocks/block.wGl4BkBfgf.json b/apps/knapsack/data/blocks/block.wGl4BkBfgf.json
@@ -4,7 +4,7 @@
   "data": {
     "demoId": "color-swatch",
     "tokenType": "color",
-    "groupIds": ["theme.light.colors"],
+    "groupIds": ["cv.theme.light.colors"],
     "include": "secondary",
     "exclude": "on-"
   }

diff --git a/apps/knapsack/data/db.yml b/apps/knapsack/data/db.yml
@@ -2,13 +2,13 @@ blocks:
   settings:
     guidelines:
       colorCaution:
-        tokenName: theme.light.colors.caution
+        tokenName: cv.theme.light.colors.caution
         type: design-token
       colorDo:
-        tokenName: theme.light.colors.positive
+        tokenName: cv.theme.light.colors.positive
         type: design-token
       colorDont:
-        tokenName: theme.light.colors.negative
+        tokenName: cv.theme.light.colors.negative
         type: design-token
     tokens:
       nameDisplayFormat: cssVar
@@ -32,30 +32,36 @@ settings:
       navigation:
         primaryNav:
           accentColor:
-            tokenName: theme.light.colors.primary
+            tokenName: cv.theme.light.colors.primary
+            type: design-token
+          backgroundColor:
+            tokenName: cv.theme.light.colors.background
             type: design-token
           fontFamily: Inter
           hoverColor:
-            tokenName: theme.light.colors.primary-24%
+            tokenName: cv.theme.light.colors.primary-24%
             type: design-token
           textColor:
-            tokenName: theme.light.colors.primary
+            tokenName: cv.theme.light.colors.primary
             type: design-token
           textTransform: inherit
         secondaryNav:
           accentColor:
-            tokenName: theme.light.colors.primary
+            tokenName: cv.theme.light.colors.primary
             type: design-token
           fontFamily: Inter
           textColor:
-            tokenName: theme.light.colors.on-surface
+            tokenName: cv.theme.light.colors.on-surface
             type: design-token
           textTransform: inherit
         tabs:
           accentColor:
-            tokenName: theme.light.colors.primary
+            tokenName: cv.theme.light.colors.primary
             type: design-token
           fontFamily: Inter
+          textColor:
+            tokenName: cv.theme.light.colors.on-surface
+            type: design-token
           textTransform: inherit
       pageElements:
         bodyText:

diff --git a/apps/knapsack/data/demos/demo.5lBJhPKvTj.json b/apps/knapsack/data/demos/demo.5lBJhPKvTj.json
@@ -54,7 +54,7 @@
       "logo": [
         {
           "type": "text",
-          "text": "<svg slot=\"logo\" width=\"103\" height=\"20\" viewBox=\"0 0 103 20\" style=\"fill: var(--covalent-theme-text-logo-on-background)\" fill=\"none\">\n        <path d=\"M0 2.30182H3.53561V5.6615H7.47898V8.88045H3.53561V14.5072C3.53561 15.9632 4.26909 16.4391 5.30341 16.4391H7.47898V19.658H5.30341C1.68575 19.658 0 18.0358 0 14.5072V2.30182Z\"></path>\n        <path d=\"M15.9376 19.9907C11.5865 19.9907 8.67492 17.0506 8.67492 12.6854C8.67492 8.32008 11.5318 5.32374 15.7461 5.32374C19.9605 5.32374 22.708 8.17934 22.708 12.5446C22.708 12.9643 22.6806 13.4121 22.5986 13.9443H12.3746C12.7003 15.9043 13.8714 16.828 15.9923 16.828C17.325 16.828 18.3046 16.2395 18.685 15.4565H22.33C21.5145 18.1714 19.2295 19.9907 15.9376 19.9907ZM12.4293 10.9787H19.0107C18.6577 9.21565 17.6233 8.37637 15.7461 8.37637C13.9783 8.37637 12.8371 9.27194 12.4293 10.9787Z\"></path>\n        <path d=\"M24.6672 5.65895H28.0661V7.33751C29.3167 6.05044 30.8135 5.40563 32.2282 5.65895V9.01863C30.4604 8.79601 29.3192 9.63529 28.2028 11.1168V19.6529H24.6672V5.65895Z\"></path>\n        <path d=\"M36.6316 19.8218C34.1303 19.8218 32.1437 18.3096 32.1437 15.1751C32.1437 12.6009 33.7201 10.8379 37.2557 10.8379H40.3288V10.4183C40.3288 9.13121 39.5406 8.59898 37.5814 8.59898C36.276 8.59898 35.2417 8.73972 33.827 9.15936V5.88412C34.916 5.57706 36.276 5.38004 37.8797 5.38004C41.9599 5.38004 43.8619 6.97416 43.8619 10.4183V19.6555H40.4084V18.8443L39.6202 19.1795C38.6132 19.5992 37.5814 19.8244 36.6291 19.8244L36.6316 19.8218ZM38.5635 16.5466L40.3313 15.7636V13.6935H37.6386C36.4153 13.6935 35.6793 14.282 35.6793 15.2058C35.6793 16.2984 36.4128 16.828 37.3377 16.828C37.7181 16.828 38.1532 16.7154 38.561 16.5491L38.5635 16.5466Z\"></path>\n        <path d=\"M56.3758 19.6555V18.7318L56.1868 18.8162C54.9362 19.4329 53.6035 19.7399 52.3255 19.7399C48.9267 19.7399 45.9331 17.4728 45.9331 12.6598C45.9331 7.8467 48.9242 5.55148 52.3529 5.55148C53.6035 5.55148 54.9362 5.85853 56.1868 6.4752L56.2962 6.53149V0.341797H59.8318V19.6555H56.3758ZM52.9769 16.3802C53.7378 16.3802 54.5806 16.1832 55.4509 15.7636L56.2938 15.3439V9.97049L55.4509 9.55085C54.5806 9.13121 53.7378 8.93419 52.9769 8.93419C51.0177 8.93419 49.5507 10.1931 49.5507 12.6572C49.5507 15.1213 51.0202 16.3802 52.9769 16.3802Z\"></path>\n        <path d=\"M66.2218 19.8218C63.7205 19.8218 61.7339 18.3096 61.7339 15.1751C61.7339 12.6009 63.3103 10.8379 66.8459 10.8379H69.919V10.4183C69.919 9.13121 69.1308 8.59898 67.1716 8.59898C65.8662 8.59898 64.8319 8.73972 63.4172 9.15936V5.88412C64.5062 5.57706 65.8662 5.38004 67.4699 5.38004C71.5501 5.38004 73.4521 6.97416 73.4521 10.4183V19.6555H69.9986V18.8443L69.2104 19.1795C68.2034 19.5992 67.1716 19.8244 66.2193 19.8244L66.2218 19.8218ZM68.1537 16.5466L69.9215 15.7636V13.6935H67.2288C66.0055 13.6935 65.2695 14.282 65.2695 15.2058C65.2695 16.2984 66.003 16.828 66.9279 16.828C67.3083 16.828 67.7435 16.7154 68.1512 16.5491L68.1537 16.5466Z\"></path>\n        <path d=\"M76.0653 2.30182H79.6009V5.6615H83.5443V8.88045H79.6009V14.5072C79.6009 15.9632 80.3344 16.4391 81.3687 16.4391H83.5443V19.658H81.3687C77.7511 19.658 76.0653 18.0358 76.0653 14.5072V2.30182Z\"></path>\n        <path d=\"M89.2555 19.8218C86.7542 19.8218 84.7676 18.3096 84.7676 15.1751C84.7676 12.6009 86.3439 10.8379 89.8795 10.8379H92.9527V10.4183C92.9527 9.13121 92.1645 8.59898 90.2053 8.59898C88.8999 8.59898 87.8656 8.73972 86.4509 9.15936V5.88412C87.5399 5.57706 88.8999 5.38004 90.5036 5.38004C94.5837 5.38004 96.4858 6.97416 96.4858 10.4183V19.6555H93.0323V18.8443L92.2441 19.1795C91.2371 19.5992 90.2053 19.8244 89.253 19.8244L89.2555 19.8218ZM91.1874 16.5466L92.9552 15.7636V13.6935H90.2624C89.0392 13.6935 88.3032 14.282 88.3032 15.2058C88.3032 16.2984 89.0367 16.828 89.9616 16.828C90.342 16.828 90.7771 16.7154 91.1849 16.5491L91.1874 16.5466Z\"></path>\n        <path d=\"M98.5296 18.0588C98.5296 16.9943 99.3451 16.1551 100.407 16.1551C101.468 16.1551 102.284 16.9943 102.284 18.0588C102.284 19.1233 101.441 19.9907 100.407 19.9907C99.3725 19.9907 98.5296 19.1233 98.5296 18.0588Z\"></path>\n      </svg>"
+          "text": "<svg slot=\"logo\" width=\"103\" height=\"20\" viewBox=\"0 0 103 20\" style=\"fill: var(--cv-theme-text-logo-on-background)\" fill=\"none\">\n        <path d=\"M0 2.30182H3.53561V5.6615H7.47898V8.88045H3.53561V14.5072C3.53561 15.9632 4.26909 16.4391 5.30341 16.4391H7.47898V19.658H5.30341C1.68575 19.658 0 18.0358 0 14.5072V2.30182Z\"></path>\n        <path d=\"M15.9376 19.9907C11.5865 19.9907 8.67492 17.0506 8.67492 12.6854C8.67492 8.32008 11.5318 5.32374 15.7461 5.32374C19.9605 5.32374 22.708 8.17934 22.708 12.5446C22.708 12.9643 22.6806 13.4121 22.5986 13.9443H12.3746C12.7003 15.9043 13.8714 16.828 15.9923 16.828C17.325 16.828 18.3046 16.2395 18.685 15.4565H22.33C21.5145 18.1714 19.2295 19.9907 15.9376 19.9907ZM12.4293 10.9787H19.0107C18.6577 9.21565 17.6233 8.37637 15.7461 8.37637C13.9783 8.37637 12.8371 9.27194 12.4293 10.9787Z\"></path>\n        <path d=\"M24.6672 5.65895H28.0661V7.33751C29.3167 6.05044 30.8135 5.40563 32.2282 5.65895V9.01863C30.4604 8.79601 29.3192 9.63529 28.2028 11.1168V19.6529H24.6672V5.65895Z\"></path>\n        <path d=\"M36.6316 19.8218C34.1303 19.8218 32.1437 18.3096 32.1437 15.1751C32.1437 12.6009 33.7201 10.8379 37.2557 10.8379H40.3288V10.4183C40.3288 9.13121 39.5406 8.59898 37.5814 8.59898C36.276 8.59898 35.2417 8.73972 33.827 9.15936V5.88412C34.916 5.57706 36.276 5.38004 37.8797 5.38004C41.9599 5.38004 43.8619 6.97416 43.8619 10.4183V19.6555H40.4084V18.8443L39.6202 19.1795C38.6132 19.5992 37.5814 19.8244 36.6291 19.8244L36.6316 19.8218ZM38.5635 16.5466L40.3313 15.7636V13.6935H37.6386C36.4153 13.6935 35.6793 14.282 35.6793 15.2058C35.6793 16.2984 36.4128 16.828 37.3377 16.828C37.7181 16.828 38.1532 16.7154 38.561 16.5491L38.5635 16.5466Z\"></path>\n        <path d=\"M56.3758 19.6555V18.7318L56.1868 18.8162C54.9362 19.4329 53.6035 19.7399 52.3255 19.7399C48.9267 19.7399 45.9331 17.4728 45.9331 12.6598C45.9331 7.8467 48.9242 5.55148 52.3529 5.55148C53.6035 5.55148 54.9362 5.85853 56.1868 6.4752L56.2962 6.53149V0.341797H59.8318V19.6555H56.3758ZM52.9769 16.3802C53.7378 16.3802 54.5806 16.1832 55.4509 15.7636L56.2938 15.3439V9.97049L55.4509 9.55085C54.5806 9.13121 53.7378 8.93419 52.9769 8.93419C51.0177 8.93419 49.5507 10.1931 49.5507 12.6572C49.5507 15.1213 51.0202 16.3802 52.9769 16.3802Z\"></path>\n        <path d=\"M66.2218 19.8218C63.7205 19.8218 61.7339 18.3096 61.7339 15.1751C61.7339 12.6009 63.3103 10.8379 66.8459 10.8379H69.919V10.4183C69.919 9.13121 69.1308 8.59898 67.1716 8.59898C65.8662 8.59898 64.8319 8.73972 63.4172 9.15936V5.88412C64.5062 5.57706 65.8662 5.38004 67.4699 5.38004C71.5501 5.38004 73.4521 6.97416 73.4521 10.4183V19.6555H69.9986V18.8443L69.2104 19.1795C68.2034 19.5992 67.1716 19.8244 66.2193 19.8244L66.2218 19.8218ZM68.1537 16.5466L69.9215 15.7636V13.6935H67.2288C66.0055 13.6935 65.2695 14.282 65.2695 15.2058C65.2695 16.2984 66.003 16.828 66.9279 16.828C67.3083 16.828 67.7435 16.7154 68.1512 16.5491L68.1537 16.5466Z\"></path>\n        <path d=\"M76.0653 2.30182H79.6009V5.6615H83.5443V8.88045H79.6009V14.5072C79.6009 15.9632 80.3344 16.4391 81.3687 16.4391H83.5443V19.658H81.3687C77.7511 19.658 76.0653 18.0358 76.0653 14.5072V2.30182Z\"></path>\n        <path d=\"M89.2555 19.8218C86.7542 19.8218 84.7676 18.3096 84.7676 15.1751C84.7676 12.6009 86.3439 10.8379 89.8795 10.8379H92.9527V10.4183C92.9527 9.13121 92.1645 8.59898 90.2053 8.59898C88.8999 8.59898 87.8656 8.73972 86.4509 9.15936V5.88412C87.5399 5.57706 88.8999 5.38004 90.5036 5.38004C94.5837 5.38004 96.4858 6.97416 96.4858 10.4183V19.6555H93.0323V18.8443L92.2441 19.1795C91.2371 19.5992 90.2053 19.8244 89.253 19.8244L89.2555 19.8218ZM91.1874 16.5466L92.9552 15.7636V13.6935H90.2624C89.0392 13.6935 88.3032 14.282 88.3032 15.2058C88.3032 16.2984 89.0367 16.828 89.9616 16.828C90.342 16.828 90.7771 16.7154 91.1849 16.5491L91.1874 16.5466Z\"></path>\n        <path d=\"M98.5296 18.0588C98.5296 16.9943 99.3451 16.1551 100.407 16.1551C101.468 16.1551 102.284 16.9943 102.284 18.0588C102.284 19.1233 101.441 19.9907 100.407 19.9907C99.3725 19.9907 98.5296 19.1233 98.5296 18.0588Z\"></path>\n      </svg>"
         }
       ]
     }

diff --git a/apps/knapsack/data/knapsack.custom-page.homepage.yml b/apps/knapsack/data/knapsack.custom-page.homepage.yml
@@ -6,12 +6,12 @@ settings:
   pageHeader:
     backgroundColor:
       type: design-token
-      tokenName: theme.light.colors.surface-container
+      tokenName: cv.theme.light.colors.surface-container
     textColorTitle:
       type: design-token
-      tokenName: theme.light.colors.on-surface
+      tokenName: cv.theme.light.colors.on-surface
     textColorDescription:
       type: design-token
-      tokenName: theme.light.colors.on-surface-38%
+      tokenName: cv.theme.light.colors.on-surface-38%
     size: large
 description: ''
diff --git a/apps/knapsack/data/knapsack.custom-page.tokens.yml b/apps/knapsack/data/knapsack.custom-page.tokens.yml
@@ -6,5 +6,5 @@ settings:
   pageHeader:
     backgroundColor:
       type: design-token
-      tokenName: theme.light.colors.surface
+      tokenName: cv.theme.light.colors.surface
     backgroundSize: cover