@planningcenter/tapestry 2.6.1-rc.2 → 2.7.1-qa-513.0

package/dist/utilities/Icon.js

@@ -1,29 +1,22 @@
-import classNames from 'classnames';
+import general from '@planningcenter/icons/sprites/general.svg';
+import { Symbol } from '@planningcenter/icons/symbol';
 import React from 'react';
 
-const icons = {
-    general: {
-        "check-circle": "M8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824zM12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z",
-        "down-caret": "M13,6l-5,5l-5,-5z",
-        "exclamation-triangle": "M15.7713,14.0548c0.0002,0.133 -0.0347,0.2638 -0.1011,0.3791c-0.0664,0.1153 -0.162,0.211 -0.2772,0.2776c-0.1152,0.0665 -0.246,0.1015 -0.379,0.1015h-14.02801c-0.13305,0 -0.26377,-0.035 -0.37898,-0.1015c-0.11521,-0.0666 -0.21084,-0.1623 -0.27725,-0.2776c-0.06642,-0.1153 -0.10127,-0.2461 -0.10106,-0.3791c0.00022,-0.1331 0.0355,-0.2637 0.10229,-0.3788l7.014,-12.11501c0.06631,-0.11506 0.16176,-0.21062 0.27675,-0.27707c0.11498,-0.06644 0.24544,-0.10142 0.37825,-0.10142c0.1328,0 0.26326,0.03498 0.37824,0.10142c0.11499,0.06645 0.21044,0.16201 0.27676,0.27707l7.01401,12.11501c0.0668,0.1151 0.1021,0.2457 0.1023,0.3788zM8.75699,11.028h-1.514v1.514h1.514zM8.75699,6.48499h-1.514v3.029h1.514z",
-        "info-circle": "M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824z",
-    },
+// Registry of valid sprite sheet collections
+// We will add the other collections here when we / if we make this more publicly available
+const validCollections = {
+    general,
 };
-// ATTENTION: This is a temporary solution to load the icons.
-// This should use the Symbol component from @planningcenter/icons/symbol
-// once we have a way to load the SVGs in a way that doesn't break in
-// other projects.
+function isValidCollection(collection) {
+    return collection in validCollections;
+}
 function Icon({ symbol: s, className, ...props }) {
     const [collection, symbol] = s.split("#");
     if (!isValidCollection(collection)) {
-        throw new Error(`Unknown icon collection: ${collection}`);
+        throw new Error(`Unknown icon collection: ${collection}. Available collections: ${Object.keys(validCollections).join(", ")}`);
     }
-    const fullPath = icons[collection][symbol];
-    return (React.createElement("svg", { role: "img", className: classNames("symbol", className), ...props },
-        React.createElement("path", { d: fullPath })));
-}
-function isValidCollection(collection) {
-    return collection in icons;
+    const spriteSheet = validCollections[collection];
+    return (React.createElement(Symbol, { symbol: `${spriteSheet}#${symbol}`, className: className, ...props }));
 }
 
 export { Icon as default };

package/dist/utilities/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../src/utilities/Icon.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { HTMLAttributes } from \"react\"\n\nconst icons = {\n  general: {\n    \"check-circle\":\n      \"M8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824zM12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z\",\n    \"down-caret\": \"M13,6l-5,5l-5,-5z\",\n    \"exclamation-triangle\":\n      \"M15.7713,14.0548c0.0002,0.133 -0.0347,0.2638 -0.1011,0.3791c-0.0664,0.1153 -0.162,0.211 -0.2772,0.2776c-0.1152,0.0665 -0.246,0.1015 -0.379,0.1015h-14.02801c-0.13305,0 -0.26377,-0.035 -0.37898,-0.1015c-0.11521,-0.0666 -0.21084,-0.1623 -0.27725,-0.2776c-0.06642,-0.1153 -0.10127,-0.2461 -0.10106,-0.3791c0.00022,-0.1331 0.0355,-0.2637 0.10229,-0.3788l7.014,-12.11501c0.06631,-0.11506 0.16176,-0.21062 0.27675,-0.27707c0.11498,-0.06644 0.24544,-0.10142 0.37825,-0.10142c0.1328,0 0.26326,0.03498 0.37824,0.10142c0.11499,0.06645 0.21044,0.16201 0.27676,0.27707l7.01401,12.11501c0.0668,0.1151 0.1021,0.2457 0.1023,0.3788zM8.75699,11.028h-1.514v1.514h1.514zM8.75699,6.48499h-1.514v3.029h1.514z\",\n    \"info-circle\":\n      \"M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824z\",\n  },\n}\n\n// ATTENTION: This is a temporary solution to load the icons.\n// This should use the Symbol component from @planningcenter/icons/symbol\n// once we have a way to load the SVGs in a way that doesn't break in\n// other projects.\n\nfunction Icon({\n  symbol: s,\n  className,\n  ...props\n}: { symbol: string } & HTMLAttributes<SVGSVGElement>) {\n  const [collection, symbol] = s.split(\"#\") as [\n    keyof typeof icons,\n    keyof typeof icons.general,\n  ]\n  if (!isValidCollection(collection)) {\n    throw new Error(`Unknown icon collection: ${collection}`)\n  }\n\n  const fullPath = icons[collection][symbol]\n\n  return (\n    <svg role=\"img\" className={classNames(\"symbol\", className)} {...props}>\n      <path d={fullPath} />\n    </svg>\n  )\n}\n\nexport default Icon\n\nfunction isValidCollection(\n  collection: string\n): collection is keyof typeof icons {\n  return collection in icons\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,KAAK,GAAG;AACZ,IAAA,OAAO,EAAE;AACP,QAAA,cAAc,EACZ,miBAAmiB;AACriB,QAAA,YAAY,EAAE,mBAAmB;AACjC,QAAA,sBAAsB,EACpB,grBAAgrB;AAClrB,QAAA,aAAa,EACX,ygBAAygB;AAC5gB,KAAA;CACF;AAED;AACA;AACA;AACA;AAEA,SAAS,IAAI,CAAC,EACZ,MAAM,EAAE,CAAC,EACT,SAAS,EACT,GAAG,KAAK,EAC2C,EAAA;AACnD,IAAA,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAGvC;AACD,IAAA,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE;AAClC,QAAA,MAAM,IAAI,KAAK,CAAC,4BAA4B,UAAU,CAAA,CAAE,CAAC;IAC3D;IAEA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC;AAE1C,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA;AACnE,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAE,QAAQ,EAAA,CAAI,CACjB;AAEV;AAIA,SAAS,iBAAiB,CACxB,UAAkB,EAAA;IAElB,OAAO,UAAU,IAAI,KAAK;AAC5B;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../src/utilities/Icon.tsx"],"sourcesContent":["import general from \"@planningcenter/icons/sprites/general.svg\"\nimport { Symbol } from \"@planningcenter/icons/symbol\"\nimport React, { HTMLAttributes } from \"react\"\n\n// Registry of valid sprite sheet collections\n// We will add the other collections here when we / if we make this more publicly available\nconst validCollections = {\n  general,\n} as const\n\ntype CollectionName = keyof typeof validCollections\n\nfunction isValidCollection(collection: string): collection is CollectionName {\n  return collection in validCollections\n}\n\nfunction Icon({\n  symbol: s,\n  className,\n  ...props\n}: { symbol: string } & HTMLAttributes<SVGSVGElement>) {\n  const [collection, symbol] = s.split(\"#\") as [CollectionName, string]\n\n  if (!isValidCollection(collection)) {\n    throw new Error(\n      `Unknown icon collection: ${collection}. Available collections: ${Object.keys(validCollections).join(\", \")}`\n    )\n  }\n\n  const spriteSheet = validCollections[collection]\n  return (\n    <Symbol\n      symbol={`${spriteSheet}#${symbol}`}\n      className={className}\n      {...props}\n    />\n  )\n}\n\nexport default Icon\n"],"names":[],"mappings":";;;;AAIA;AACA;AACA,MAAM,gBAAgB,GAAG;IACvB,OAAO;CACC;AAIV,SAAS,iBAAiB,CAAC,UAAkB,EAAA;IAC3C,OAAO,UAAU,IAAI,gBAAgB;AACvC;AAEA,SAAS,IAAI,CAAC,EACZ,MAAM,EAAE,CAAC,EACT,SAAS,EACT,GAAG,KAAK,EAC2C,EAAA;AACnD,IAAA,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAA6B;AAErE,IAAA,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE;AAClC,QAAA,MAAM,IAAI,KAAK,CACb,4BAA4B,UAAU,CAAA,yBAAA,EAA4B,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,CAAE,CAC7G;IACH;AAEA,IAAA,MAAM,WAAW,GAAG,gBAAgB,CAAC,UAAU,CAAC;AAChD,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,MAAM,IACL,MAAM,EAAE,GAAG,WAAW,CAAA,CAAA,EAAI,MAAM,CAAA,CAAE,EAClC,SAAS,EAAE,SAAS,KAChB,KAAK,EAAA,CACT;AAEN;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry",
-  "version": "2.6.1-rc.2",
+  "version": "2.7.1-qa-513.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -8,11 +8,10 @@
     "directory": "packages/tapestry"
   },
   "scripts": {
-    "prepare": "yarn build:tokens && yarn build",
+    "prepare": "[ -d dist ] || yarn build",
     "prebuild": "rimraf dist",
-    "build": "yarn build:tokens && rollup -c",
+    "build": "rollup -c",
     "build:storybook": "storybook build",
-    "build:tokens": "node ./src/tokens/style-dictionary.build.js",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run",
     "test:visual": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\"  \"yarn storybook --quiet\"  \"npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook\"",
@@ -40,24 +39,25 @@
     "./tokens.css": "./dist/tokens.css",
     "./tokens-dark.css": "./dist/tokens-dark.css",
     "./deprecated.css": "./dist/deprecated.css",
+    "./tokens-deprecated.json": "./dist/tokens/tokens-deprecated.json",
     "./product-tokens/*": "./dist/product-tokens/*",
     "./print.css": "./dist/print.css",
     "./print-no-media-queries.css": "./dist/print-no-media-queries.css"
   },
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@planningcenter/tapestry-render": "^2.6.0",
+    "@planningcenter/tapestry-render": "^2.7.1-qa-513.0",
     "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-a11y": "^9.1.10",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-links": "^9.1.10",
-    "@storybook/addon-onboarding": "^9.1.10",
-    "@storybook/cli": "^9.1.10",
-    "@storybook/react-vite": "^9.1.10",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-a11y": "9.1.17",
+    "@storybook/addon-docs": "9.1.17",
+    "@storybook/addon-links": "9.1.17",
+    "@storybook/addon-onboarding": "9.1.17",
+    "@storybook/cli": "9.1.17",
+    "@storybook/react-vite": "9.1.17",
     "@storybook/test-runner": "^0.23.0",
-    "@storybook/web-components-vite": "^9.1.10",
+    "@storybook/web-components-vite": "9.1.17",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
@@ -90,17 +90,18 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-rename-node-modules": "^1.3.1",
     "shadow-dom-testing-library": "^1.11.3",
-    "storybook": "^9.1.10",
+    "storybook": "9.1.17",
     "style-dictionary": "^4.2.0",
-    "tapestry-wc": "^2.4.0",
+    "tapestry-wc": "^2.7.1-qa-513.0",
     "typescript": "^5.5.3",
     "vite": "^6.4.1",
     "vitest": "^3.0.0"
   },
   "dependencies": {
-    "@planningcenter/icons": "^15.24.1",
+    "@planningcenter/icons": "15.27.3",
+    "@planningcenter/tapestry-tokens": "^2.7.1-qa-513.0",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21"
   },
-  "gitHead": "bbc683728d0d8bebadf70035be301775b1f75cd1"
+  "gitHead": "99523ff01a0b24f7ecaf6a22b9da40e2594880ef"
 }

package/react-types/index.d.ts

@@ -28,24 +28,24 @@ declare global {
         * @cssprop --tds-page-header-nav-background - Background color of the navigation, gradient on mobile. Overrides are not recommended.
         * @cssprop --tds-page-header-nav-item-padding-x: {var(--t-spacing-1)} - Horizontal padding for the tab.
         * @cssprop --tds-page-header-nav-item-padding-y: {var(--t-spacing-1)} - Vertical padding for the tab.
-        * @cssprop --tds-page-header-nav-item-color: {var(--t-text-color-default-primary)} - Text color for the tab.
+        * @cssprop --tds-page-header-nav-item-color: {var(--t-text-color)} - Text color for the tab.
         * @cssprop --tds-page-header-nav-item-background-color: {var(--t-fill-color-transparency-light-060)} - Background color for the tab.
         * @cssprop --tds-page-header-nav-item-border-width: {0} - Border width for the tab.
         * @cssprop --tds-page-header-nav-item-border-color: {var(--tds-page-header-nav-item-background-color)} - Border color for the tab.
-        * @cssprop --tds-page-header-nav-item-border-bottom-color: {var(--t-border-color-default-base)} - Border bottom color for the tab.
+        * @cssprop --tds-page-header-nav-item-border-bottom-color: {var(--t-border-color)} - Border bottom color for the tab.
         * @cssprop --tds-page-header-nav-item-color-hover: {var(--tds-page-header-nav-item-color)} - Text color for the tab on hover.
         * @cssprop --tds-page-header-nav-item-background-color-hover: {var(--t-fill-color-neutral-080)} - Background color for the tab on hover.
         * @cssprop --tds-page-header-nav-item-border-color-hover: {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on hover.
         * @cssprop --tds-page-header-nav-item-background-color-active: {var(--t-fill-color-neutral-060)} - Background color for the tab on active.
         * @cssprop --tds-page-header-nav-item-border-color-active: {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on active.
-        * @cssprop --tds-page-header-nav-item-color-disabled: {var(--t-text-color-default-disabled)} - Text color for the tab on disabled.
+        * @cssprop --tds-page-header-nav-item-color-disabled: {var(--t-text-color-disabled)} - Text color for the tab on disabled.
         * @cssprop --tds-page-header-nav-item-background-color-disabled: {var(--t-fill-color-neutral-080)} - Background color for the tab on disabled.
         * @cssprop --tds-page-header-nav-item-border-color-disabled: {var(--tds-page-header-nav-item-background-color-disabled)} - Border color for the tab on disabled.
-        * @cssprop --tds-page-header-nav-item-color-selected: {var(--t-text-color-default-primary)} - Text color for the tab on selected.
-        * @cssprop --tds-page-header-nav-item-border-color-selected: {var(--t-border-color-default-base)} - Border color for the tab on selected.
+        * @cssprop --tds-page-header-nav-item-color-selected: {var(--t-text-color)} - Text color for the tab on selected.
+        * @cssprop --tds-page-header-nav-item-border-color-selected: {var(--t-border-color)} - Border color for the tab on selected.
         * @cssprop --tds-page-header-nav-item-background-color-selected: {var(--t-fill-color-neutral-100)} - Background color for the tab on selected.
         * @cssprop --tds-page-header-nav-item-border-bottom-color-selected: {var(--tds-page-header-nav-item-background-color-selected)} - Border bottom color for the tab on selected.
-        * @cssprop --tds-page-header-nav-item-indicator-color: {var(--t-icon-color-status-warning-primary)} - Color for the indicator.
+        * @cssprop --tds-page-header-nav-item-indicator-color: {var(--t-icon-color-status-warning)} - Color for the indicator.
         */
       "tds-page-header": {
         /**
@@ -101,8 +101,8 @@ Please refer to each component's documentation for more information on how to us
         * @cssprop --tds-sidenav-item-nested-border-color - Border color for nested items (default: var(--t-fill-color-neutral-050))
         * @cssprop --tds-sidenav-item-nested-border-color-hover - Border color for nested items in hover state (default: var(--t-fill-color-neutral-010))
         * @cssprop --tds-sidenav-item-nested-border-color-selected - Border color for nested items in selected state (default: var(--t-fill-color-neutral-010))
-        * @cssprop --tds-sidenav-item-icon-color - Color for item icons (default: var(--t-icon-color-default-secondary))
-        * @cssprop --tds-sidenav-item-icon-color-selected - Color for selected item icons (default: var(--t-icon-color-default-primary))
+        * @cssprop --tds-sidenav-item-icon-color - Color for item icons (default: var(--t-icon-color-secondary))
+        * @cssprop --tds-sidenav-item-icon-color-selected - Color for selected item icons (default: var(--t-icon-color))
         * @cssprop --tds-sidenav-indent - Internal: The indentation spacing for nested items (default: 12px)
         * @cssprop --tds-sidenav-item-depth - Internal: The current nesting depth of items (default: 0)
         * @cssprop --tds-sidenav-item-transition - Internal: The transition timing for item state changes (default: background-color .2s cubic-bezier(.19, .91, .38, 1))

package/dist/deprecated.css

@@ -1,84 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-  --t-border-size-default: var(--t-border-width);
-  --t-border-size-thick: var(--t-border-width-thick);
-  --t-font-weight-semi-bold: var(--t-font-weight-semibold);
-  --t-icon-color-status-neutral-dark: var(--t-icon-color-status-neutral-bold);
-  --t-icon-color-status-info-secondary: var(--t-icon-color-status-info);
-  --t-fill-color-status-neutral-solid: var(--t-fill-color-status-neutral);
-  --t-fill-color-status-info-solid: var(--t-fill-color-status-info);
-  --t-fill-color-status-success-solid: var(--t-fill-color-status-success);
-  --t-fill-color-status-warning-solid: var(--t-fill-color-status-warning);
-  --t-fill-color-status-error-solid: var(--t-fill-color-status-error);
-  --t-fill-color-alert-info: hsl(204, 94%, 49%);
-  --t-fill-color-alert-success: hsl(122, 60%, 41%);
-  --t-fill-color-alert-warning: hsl(43, 96%, 58%);
-  --t-fill-color-alert-error: hsl(4, 77%, 59%);
-  --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
-  --t-fill-color-button-neutral-outline-dim-default: var(--t-fill-color-button-neutral-outline);
-  --t-fill-color-button-neutral-outline-dim-hover: var(--t-fill-color-button-neutral-outline-hover);
-  --t-fill-color-button-neutral-outline-dim-active: var(--t-fill-color-button-neutral-outline-active);
-  --t-fill-color-button-neutral-outline-dim-disabled: var(--t-fill-color-button-neutral-outline-disabled);
-  --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
-  --t-fill-color-button-interaction-outline-dim-default: var(--t-fill-color-button-interaction-outline);
-  --t-fill-color-button-interaction-outline-dim-hover: var(--t-fill-color-button-interaction-outline-hover);
-  --t-fill-color-button-interaction-outline-dim-active: var(--t-fill-color-button-interaction-outline-active);
-  --t-fill-color-button-interaction-outline-dim-disabled: var(--t-fill-color-button-interaction-outline-disabled);
-  --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);
-  --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);
-  --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);
-  --t-fill-color-button-create-solid-disabled: hsl(0, 0%, 81%);
-  --t-fill-color-button-create-ghost-default: hsla(0, 0%, 100%, 0);
-  --t-fill-color-button-create-ghost-hover: hsl(96, 60%, 95%);
-  --t-fill-color-button-create-ghost-active: hsl(97, 57%, 90%);
-  --t-fill-color-button-create-ghost-disabled: hsla(0, 0%, 100%, 0);
-  --t-fill-color-button-delete-outline-dim-default: var(--t-fill-color-button-delete-outline);
-  --t-fill-color-button-delete-outline-dim-hover: var(--t-fill-color-button-delete-outline-hover);
-  --t-fill-color-button-delete-outline-dim-active: var(--t-fill-color-button-delete-outline-active);
-  --t-fill-color-button-delete-outline-dim-disabled: var(--t-fill-color-button-delete-outline-disabled);
-  --t-border-color-default-base: var(--t-border-color);
-  --t-border-color-default-dark: var(--t-border-color-dark);
-  --t-border-color-default-darker: var(--t-border-color-darker);
-  --t-border-color-default-darkest: var(--t-border-color-darkest);
-  --t-border-color-default-dim: var(--t-border-color-dim);
-  --t-border-color-default-disabled: var(--t-border-color-disabled);
-  --t-border-color-default-white: var(--t-border-color-white);
-  --t-border-radius-default: var(--t-border-radius);
-  --t-border-width-default: var(--t-border-width);
-  --t-fill-color-button-delete-ghost-default: var(--t-fill-color-button-delete-ghost);
-  --t-fill-color-button-delete-outline-default: var(--t-fill-color-button-delete-outline);
-  --t-fill-color-button-delete-solid-default: var(--t-fill-color-button-delete-solid);
-  --t-fill-color-button-interaction-ghost-default: var(--t-fill-color-button-interaction-ghost);
-  --t-fill-color-button-interaction-outline-default: var(--t-fill-color-button-interaction-outline);
-  --t-fill-color-button-interaction-solid-default: var(--t-fill-color-button-interaction-solid);
-  --t-fill-color-button-neutral-ghost-default: var(--t-fill-color-button-neutral-ghost);
-  --t-fill-color-button-neutral-outline-default: var(--t-fill-color-button-neutral-outline);
-  --t-fill-color-button-neutral-responsive-header-default: var(--t-fill-color-button-neutral-responsive-header);
-  --t-fill-color-button-neutral-solid-default: var(--t-fill-color-button-neutral-solid);
-  --t-fill-color-button-pill-default: var(--t-fill-color-button-pill);
-  --t-fill-color-control-primary: var(--t-fill-color-control);
-  --t-fill-color-interaction-default: var(--t-fill-color-interaction);
-  --t-fill-color-product-staff-base: var(--t-fill-color-product-staff);
-  --t-fill-color-status-error-primary: var(--t-fill-color-status-error);
-  --t-fill-color-tooltip-primary: var(--t-fill-color-tooltip);
-  --t-icon-color-default-dim: var(--t-icon-color-dim);
-  --t-icon-color-default-disabled: var(--t-icon-color-disabled);
-  --t-icon-color-default-inverted: var(--t-icon-color-inverted);
-  --t-icon-color-default-primary: var(--t-icon-color);
-  --t-icon-color-default-secondary: var(--t-icon-color-secondary);
-  --t-icon-color-status-error-primary: var(--t-icon-color-status-error);
-  --t-icon-color-status-info-primary: var(--t-icon-color-status-info);
-  --t-icon-color-status-neutral-primary: var(--t-icon-color-status-neutral);
-  --t-icon-color-status-success-primary: var(--t-icon-color-status-success);
-  --t-icon-color-status-warning-primary: var(--t-icon-color-status-warning);
-  --t-text-color-default-disabled: var(--t-text-color-disabled);
-  --t-text-color-default-headline: var(--t-text-color-headline);
-  --t-text-color-default-inverted: var(--t-text-color-inverted);
-  --t-text-color-default-placeholder: var(--t-text-color-placeholder);
-  --t-text-color-default-primary: var(--t-text-color);
-  --t-text-color-default-secondary: var(--t-text-color-secondary);
-  --t-text-color-interaction-primary: var(--t-text-color-interaction);
-}