npm - @trackunit/css-component-tokens - Versions diffs - 1.11.30 → 1.11.32 - Mend

@trackunit/css-component-tokens 1.11.30 → 1.11.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/index.cjs.js +34 -96
package/index.d.ts +0 -1
package/index.esm.js +34 -93
package/package.json +2 -4
package/src/component-tokens/ComponentTokens.d.ts +30 -30
package/src/component-tokens/components/BaseInput.tokens.d.ts +3 -3
package/src/component-tokens/components/Button.tokens.d.ts +5 -5
package/src/component-tokens/components/Card.tokens.d.ts +4 -4
package/src/component-tokens/components/Popover/Popover.tokens.d.ts +1 -1
package/src/component-tokens/components/Popover/PopoverListItem.tokens.d.ts +1 -1
package/src/component-tokens/components/Search.tokens.d.ts +16 -16
package/src/index.d.ts +7 -3
package/src/component-tokens/ComponentTokenVariablesByThemeName.d.ts +0 -4
package/src/component-tokens/MockComponent.d.ts +0 -26
package/src/component-tokens/pluginUtilityFunctions.d.ts +0 -28
package/src/plugin.d.ts +0 -4

package/index.cjs.js CHANGED Viewed

@@ -1,19 +1,5 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-var cssTailwindCustomPropertiesPlugin = require('@trackunit/css-tailwind-custom-properties-plugin');
-var plugin = require('tailwindcss/plugin');
-/** Returns object structure for Tailwind variable config for specified theme for ALL ComponentTokenDefinitions. */
-const getComponentTokenVariablesByThemeName = (theme, componentTokenDefinitions) => {
-    const themeTokenObject = Object.fromEntries(Object.entries(componentTokenDefinitions).map(([componentName, componentThemes]) => [
-        componentName,
-        componentThemes[theme],
-    ]));
-    return themeTokenObject;
-};
 /**
  * Returns the designTokens passed, but ensures it satisfies DesignTokens type while keeping it literal
  */
@@ -25,15 +11,15 @@ const AsComponentTokenDefinition = (designTokens) => designTokens;
  */
 const BaseInputTokenDefinition = AsComponentTokenDefinition({
     DEFAULT: {
-        border: { borderRadius: "var(--border-radius-lg)", borderWidth: "1px" },
-        shadow: { boxShadow: "var(--box-shadow-sm)" },
+        border: { borderRadius: "var(--radius-lg)", borderWidth: "1px" },
+        shadow: { boxShadow: "var(--shadow-sm)" },
         background: { backgroundColor: "white" },
         prefix: { borderRightWidth: "1px" },
     },
     "theme-marketing": {
         border: { borderRadius: "8px", borderWidth: "1px" },
         shadow: { boxShadow: "none" },
-        background: { backgroundColor: "rgb(var(--color-stone-50))" },
+        background: { backgroundColor: "var(--color-stone-50)" },
         prefix: { borderRightWidth: "0px" },
     },
 });
@@ -44,13 +30,19 @@ const BaseInputTokenDefinition = AsComponentTokenDefinition({
  */
 const ButtonTokenDefinition = AsComponentTokenDefinition({
     DEFAULT: {
-        "secondary-color": { backgroundColor: "rgb(var(--color-neutral-200))", color: "rgb(var(--color-neutral-600))" },
-        border: { borderRadius: "var(--border-radius-lg)" },
+        "secondary-color": {
+            backgroundColor: "var(--color-neutral-200)",
+            color: "var(--color-neutral-600)",
+        },
+        border: { borderRadius: "var(--radius-lg)" },
         height: { height: "auto" },
         padding: { paddingLeft: "var(--spacing-2-5)", paddingRight: "var(--spacing-2-5)" },
     },
     "theme-marketing": {
-        "secondary-color": { backgroundColor: "rgb(var(--color-neutral-600))", color: "rgb(var(--color-neutral-50))" },
+        "secondary-color": {
+            backgroundColor: "var(--color-neutral-600)",
+            color: "var(--color-neutral-50)",
+        },
         border: { borderRadius: "50px" },
         height: { height: "55px" },
         padding: { paddingLeft: "var(--spacing-12)", paddingRight: "var(--spacing-12)" },
@@ -63,9 +55,9 @@ const ButtonTokenDefinition = AsComponentTokenDefinition({
  */
 const CardTokenDefinition = AsComponentTokenDefinition({
     DEFAULT: {
-        border: { borderColor: "rgb(var(--color-neutral-200))", borderRadius: "var(--border-radius-lg)" },
-        "popover-border": { borderRadius: "var(--border-radius-lg)" },
-        shadow: { boxShadow: "var(--box-shadow-none)" },
+        border: { borderColor: "var(--color-neutral-200)", borderRadius: "var(--radius-lg)" },
+        "popover-border": { borderRadius: "var(--radius-lg)" },
+        shadow: { boxShadow: "var(--shadow-none)" },
         spacing: { gap: "var(--spacing-3)", padding: "var(--spacing-3)" },
         "spacing-sm": { gap: "var(--spacing-4)", padding: "var(--spacing-4)" },
         "spacing-md": { gap: "var(--spacing-4)", padding: "var(--spacing-4)" },
@@ -101,7 +93,7 @@ const FormGroupTokenDefinition = AsComponentTokenDefinition({
  */
 const PopoverTokenDefinition = AsComponentTokenDefinition({
     DEFAULT: {
-        border: { borderRadius: "var(--border-radius-DEFAULT)" },
+        border: { borderRadius: "var(--radius-DEFAULT)" },
     },
     "theme-marketing": {
         border: { borderRadius: "1rem" },
@@ -114,7 +106,7 @@ const PopoverTokenDefinition = AsComponentTokenDefinition({
  */
 const PopoverListItemTokenDefinition = AsComponentTokenDefinition({
     DEFAULT: {
-        border: { borderRadius: "var(--border-radius-DEFAULT)" },
+        border: { borderRadius: "var(--radius-DEFAULT)" },
     },
     "theme-marketing": {
         border: { borderRadius: "1rem" },
@@ -133,26 +125,26 @@ const SearchTokenDefinition = AsComponentTokenDefinition({
         "focus-hover": {
             borderWidth: "1px",
             borderBottomWidth: "1px",
-            borderColor: "rgb(var(--color-neutral-400))",
-            borderBottomColor: "rgb(var(--color-neutral-400))",
-            backgroundColor: "rgb(var(--color-neutral-50))",
+            borderColor: "var(--color-neutral-400)",
+            borderBottomColor: "var(--color-neutral-400)",
+            backgroundColor: "var(--color-neutral-50)",
         },
         border: {
             borderStyle: "solid",
             borderWidth: "1px",
             borderBottomWidth: "1px",
-            borderColor: "rgb(var(--color-neutral-200))",
-            borderBottomColor: "rgb(var(--color-neutral-200))",
+            borderColor: "var(--color-neutral-200)",
+            borderBottomColor: "var(--color-neutral-200)",
             borderRadius: "0.5rem",
         },
         "focus-within": {
-            borderColor: "rgb(var(--color-neutral-400))",
+            borderColor: "var(--color-neutral-400)",
             boxShadow: "var(--tw-ring-inset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
         },
-        widen: { borderBottomColor: "rgb(var(--color-neutral-400))" },
-        "widen-focus": { borderBottomColor: "rgb(var(--color-neutral-400))" },
+        widen: { borderBottomColor: "var(--color-neutral-400)" },
+        "widen-focus": { borderBottomColor: "var(--color-neutral-400)" },
         prefix: {
-            color: "rgb(var(--color-neutral-400))",
+            color: "var(--color-neutral-400)",
             cursor: "default",
         },
     },
@@ -165,16 +157,16 @@ const SearchTokenDefinition = AsComponentTokenDefinition({
         "focus-hover": {
             borderWidth: "1px",
             borderBottomWidth: "1px",
-            borderColor: "rgb(var(--color-black-DEFAULT))",
-            borderBottomColor: "rgb(var(--color-black-DEFAULT))",
+            borderColor: "var(--color-black)",
+            borderBottomColor: "var(--color-black)",
             backgroundColor: "transparent",
         },
         border: {
             borderStyle: "solid",
             borderWidth: "1px",
             borderBottomWidth: "1px",
-            borderColor: "rgb(var(--color-neutral-300))",
-            borderBottomColor: "rgb(var(--color-neutral-300))",
+            borderColor: "var(--color-neutral-300)",
+            borderBottomColor: "var(--color-neutral-300)",
             borderRadius: "0px",
         },
         "focus-within": {
@@ -182,13 +174,13 @@ const SearchTokenDefinition = AsComponentTokenDefinition({
             boxShadow: "none",
         },
         widen: {
-            borderBottomColor: "rgb(var(--color-white-DEFAULT))",
+            borderBottomColor: "var(--color-white)",
         },
         "widen-focus": {
-            borderBottomColor: "rgb(var(--color-black-DEFAULT))",
+            borderBottomColor: "var(--color-black)",
         },
         prefix: {
-            color: "rgb(var(--color-neutral-600))",
+            color: "var(--color-neutral-600)",
             cursor: "pointer",
         },
     },
@@ -204,58 +196,4 @@ const componentTokenDefinitions = {
     formGroup: FormGroupTokenDefinition,
 };
-/** The prefix for css variables and tailwind component classes */
-const PREFIX = "component";
-/**
- * Get the css variable value for the component tokens specific property.
- *
- * @param component The name of the component to get the variable for.
- * @param token The component-level token name
- * @param cssProperty The css property on the component-level Token
- * @returns {string} `var(--${PREFIX}-${component}-${token}-${cssProperty})`
- */
-const componentTokenAsCssVariableString = (component, token, cssProperty) => `var(--${PREFIX}-${component}-${token}-${cssProperty})`;
-/**
- * Get the full CSSProperties for a component token.
- * Replaces the css values from the ComponentTokenDefinition with the corresponding css variable.
- *
- * @param {ComponentNames} component The name of the component
- * @param {ComponentTokenNames} token The name of the token
- * @param {CSSProperties} tokenObject The CSSProperties for the component token
- * @returns {*}  {CSSProperties} CSSProperties converted to use the css variable for the correstonding token
- */
-const componentTokenToCSSProperties = (component, token, tokenObject) => {
-    return Object.fromEntries(Object.keys(tokenObject).map(key => [
-        key,
-        componentTokenAsCssVariableString(component, token, key),
-    ]));
-};
-/**
- * Generate the full object og componentToken rules for the Tailwind plugin.
- */
-const getAllComponentTokenRules = (componentDefinitions) => {
-    const components = {};
-    Object.entries(componentDefinitions).forEach(([componentName, themes]) => Object.entries(themes.DEFAULT).forEach(([tokenName, value]) => {
-        const typedComponentName = componentName; // TS does not do literals from Object keys so we do it manually
-        const typedTokenName = tokenName; // TS does not do literals from Object keys so we do it manually
-        const selector = `.${PREFIX}-${typedComponentName}-${typedTokenName}`;
-        components[selector] = componentTokenToCSSProperties(typedComponentName, typedTokenName, value);
-    }));
-    return components;
-};
-const cssVariablesDefinition = cssTailwindCustomPropertiesPlugin.variablesToCSSRules({
-    DEFAULT: {
-        component: getComponentTokenVariablesByThemeName("DEFAULT", componentTokenDefinitions),
-    },
-    "theme-marketing": {
-        component: getComponentTokenVariablesByThemeName("theme-marketing", componentTokenDefinitions),
-    },
-});
-const ComponentTokensPlugin = plugin(function ({ addComponents }) {
-    addComponents(cssVariablesDefinition);
-    addComponents(getAllComponentTokenRules(componentTokenDefinitions));
-});
-exports.ComponentTokensPlugin = ComponentTokensPlugin;
-exports.default = ComponentTokensPlugin;
+exports.componentTokenDefinitions = componentTokenDefinitions;

package/index.d.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export * from "./src/index";
2	- export { default } from "./src/index";

package/index.esm.js CHANGED Viewed

@@ -1,15 +1,3 @@
-import { variablesToCSSRules } from '@trackunit/css-tailwind-custom-properties-plugin';
-import plugin from 'tailwindcss/plugin';
-/** Returns object structure for Tailwind variable config for specified theme for ALL ComponentTokenDefinitions. */
-const getComponentTokenVariablesByThemeName = (theme, componentTokenDefinitions) => {
-    const themeTokenObject = Object.fromEntries(Object.entries(componentTokenDefinitions).map(([componentName, componentThemes]) => [
-        componentName,
-        componentThemes[theme],
-    ]));
-    return themeTokenObject;
-};
 /**
  * Returns the designTokens passed, but ensures it satisfies DesignTokens type while keeping it literal
  */
@@ -21,15 +9,15 @@ const AsComponentTokenDefinition = (designTokens) => designTokens;
  */
 const BaseInputTokenDefinition = AsComponentTokenDefinition({
     DEFAULT: {
-        border: { borderRadius: "var(--border-radius-lg)", borderWidth: "1px" },
-        shadow: { boxShadow: "var(--box-shadow-sm)" },
+        border: { borderRadius: "var(--radius-lg)", borderWidth: "1px" },
+        shadow: { boxShadow: "var(--shadow-sm)" },
         background: { backgroundColor: "white" },
         prefix: { borderRightWidth: "1px" },
     },
     "theme-marketing": {
         border: { borderRadius: "8px", borderWidth: "1px" },
         shadow: { boxShadow: "none" },
-        background: { backgroundColor: "rgb(var(--color-stone-50))" },
+        background: { backgroundColor: "var(--color-stone-50)" },
         prefix: { borderRightWidth: "0px" },
     },
 });
@@ -40,13 +28,19 @@ const BaseInputTokenDefinition = AsComponentTokenDefinition({
  */
 const ButtonTokenDefinition = AsComponentTokenDefinition({
     DEFAULT: {
-        "secondary-color": { backgroundColor: "rgb(var(--color-neutral-200))", color: "rgb(var(--color-neutral-600))" },
-        border: { borderRadius: "var(--border-radius-lg)" },
+        "secondary-color": {
+            backgroundColor: "var(--color-neutral-200)",
+            color: "var(--color-neutral-600)",
+        },
+        border: { borderRadius: "var(--radius-lg)" },
         height: { height: "auto" },
         padding: { paddingLeft: "var(--spacing-2-5)", paddingRight: "var(--spacing-2-5)" },
     },
     "theme-marketing": {
-        "secondary-color": { backgroundColor: "rgb(var(--color-neutral-600))", color: "rgb(var(--color-neutral-50))" },
+        "secondary-color": {
+            backgroundColor: "var(--color-neutral-600)",
+            color: "var(--color-neutral-50)",
+        },
         border: { borderRadius: "50px" },
         height: { height: "55px" },
         padding: { paddingLeft: "var(--spacing-12)", paddingRight: "var(--spacing-12)" },
@@ -59,9 +53,9 @@ const ButtonTokenDefinition = AsComponentTokenDefinition({
  */
 const CardTokenDefinition = AsComponentTokenDefinition({
     DEFAULT: {
-        border: { borderColor: "rgb(var(--color-neutral-200))", borderRadius: "var(--border-radius-lg)" },
-        "popover-border": { borderRadius: "var(--border-radius-lg)" },
-        shadow: { boxShadow: "var(--box-shadow-none)" },
+        border: { borderColor: "var(--color-neutral-200)", borderRadius: "var(--radius-lg)" },
+        "popover-border": { borderRadius: "var(--radius-lg)" },
+        shadow: { boxShadow: "var(--shadow-none)" },
         spacing: { gap: "var(--spacing-3)", padding: "var(--spacing-3)" },
         "spacing-sm": { gap: "var(--spacing-4)", padding: "var(--spacing-4)" },
         "spacing-md": { gap: "var(--spacing-4)", padding: "var(--spacing-4)" },
@@ -97,7 +91,7 @@ const FormGroupTokenDefinition = AsComponentTokenDefinition({
  */
 const PopoverTokenDefinition = AsComponentTokenDefinition({
     DEFAULT: {
-        border: { borderRadius: "var(--border-radius-DEFAULT)" },
+        border: { borderRadius: "var(--radius-DEFAULT)" },
     },
     "theme-marketing": {
         border: { borderRadius: "1rem" },
@@ -110,7 +104,7 @@ const PopoverTokenDefinition = AsComponentTokenDefinition({
  */
 const PopoverListItemTokenDefinition = AsComponentTokenDefinition({
     DEFAULT: {
-        border: { borderRadius: "var(--border-radius-DEFAULT)" },
+        border: { borderRadius: "var(--radius-DEFAULT)" },
     },
     "theme-marketing": {
         border: { borderRadius: "1rem" },
@@ -129,26 +123,26 @@ const SearchTokenDefinition = AsComponentTokenDefinition({
         "focus-hover": {
             borderWidth: "1px",
             borderBottomWidth: "1px",
-            borderColor: "rgb(var(--color-neutral-400))",
-            borderBottomColor: "rgb(var(--color-neutral-400))",
-            backgroundColor: "rgb(var(--color-neutral-50))",
+            borderColor: "var(--color-neutral-400)",
+            borderBottomColor: "var(--color-neutral-400)",
+            backgroundColor: "var(--color-neutral-50)",
         },
         border: {
             borderStyle: "solid",
             borderWidth: "1px",
             borderBottomWidth: "1px",
-            borderColor: "rgb(var(--color-neutral-200))",
-            borderBottomColor: "rgb(var(--color-neutral-200))",
+            borderColor: "var(--color-neutral-200)",
+            borderBottomColor: "var(--color-neutral-200)",
             borderRadius: "0.5rem",
         },
         "focus-within": {
-            borderColor: "rgb(var(--color-neutral-400))",
+            borderColor: "var(--color-neutral-400)",
             boxShadow: "var(--tw-ring-inset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
         },
-        widen: { borderBottomColor: "rgb(var(--color-neutral-400))" },
-        "widen-focus": { borderBottomColor: "rgb(var(--color-neutral-400))" },
+        widen: { borderBottomColor: "var(--color-neutral-400)" },
+        "widen-focus": { borderBottomColor: "var(--color-neutral-400)" },
         prefix: {
-            color: "rgb(var(--color-neutral-400))",
+            color: "var(--color-neutral-400)",
             cursor: "default",
         },
     },
@@ -161,16 +155,16 @@ const SearchTokenDefinition = AsComponentTokenDefinition({
         "focus-hover": {
             borderWidth: "1px",
             borderBottomWidth: "1px",
-            borderColor: "rgb(var(--color-black-DEFAULT))",
-            borderBottomColor: "rgb(var(--color-black-DEFAULT))",
+            borderColor: "var(--color-black)",
+            borderBottomColor: "var(--color-black)",
             backgroundColor: "transparent",
         },
         border: {
             borderStyle: "solid",
             borderWidth: "1px",
             borderBottomWidth: "1px",
-            borderColor: "rgb(var(--color-neutral-300))",
-            borderBottomColor: "rgb(var(--color-neutral-300))",
+            borderColor: "var(--color-neutral-300)",
+            borderBottomColor: "var(--color-neutral-300)",
             borderRadius: "0px",
         },
         "focus-within": {
@@ -178,13 +172,13 @@ const SearchTokenDefinition = AsComponentTokenDefinition({
             boxShadow: "none",
         },
         widen: {
-            borderBottomColor: "rgb(var(--color-white-DEFAULT))",
+            borderBottomColor: "var(--color-white)",
         },
         "widen-focus": {
-            borderBottomColor: "rgb(var(--color-black-DEFAULT))",
+            borderBottomColor: "var(--color-black)",
         },
         prefix: {
-            color: "rgb(var(--color-neutral-600))",
+            color: "var(--color-neutral-600)",
             cursor: "pointer",
         },
     },
@@ -200,57 +194,4 @@ const componentTokenDefinitions = {
     formGroup: FormGroupTokenDefinition,
 };
-/** The prefix for css variables and tailwind component classes */
-const PREFIX = "component";
-/**
- * Get the css variable value for the component tokens specific property.
- *
- * @param component The name of the component to get the variable for.
- * @param token The component-level token name
- * @param cssProperty The css property on the component-level Token
- * @returns {string} `var(--${PREFIX}-${component}-${token}-${cssProperty})`
- */
-const componentTokenAsCssVariableString = (component, token, cssProperty) => `var(--${PREFIX}-${component}-${token}-${cssProperty})`;
-/**
- * Get the full CSSProperties for a component token.
- * Replaces the css values from the ComponentTokenDefinition with the corresponding css variable.
- *
- * @param {ComponentNames} component The name of the component
- * @param {ComponentTokenNames} token The name of the token
- * @param {CSSProperties} tokenObject The CSSProperties for the component token
- * @returns {*}  {CSSProperties} CSSProperties converted to use the css variable for the correstonding token
- */
-const componentTokenToCSSProperties = (component, token, tokenObject) => {
-    return Object.fromEntries(Object.keys(tokenObject).map(key => [
-        key,
-        componentTokenAsCssVariableString(component, token, key),
-    ]));
-};
-/**
- * Generate the full object og componentToken rules for the Tailwind plugin.
- */
-const getAllComponentTokenRules = (componentDefinitions) => {
-    const components = {};
-    Object.entries(componentDefinitions).forEach(([componentName, themes]) => Object.entries(themes.DEFAULT).forEach(([tokenName, value]) => {
-        const typedComponentName = componentName; // TS does not do literals from Object keys so we do it manually
-        const typedTokenName = tokenName; // TS does not do literals from Object keys so we do it manually
-        const selector = `.${PREFIX}-${typedComponentName}-${typedTokenName}`;
-        components[selector] = componentTokenToCSSProperties(typedComponentName, typedTokenName, value);
-    }));
-    return components;
-};
-const cssVariablesDefinition = variablesToCSSRules({
-    DEFAULT: {
-        component: getComponentTokenVariablesByThemeName("DEFAULT", componentTokenDefinitions),
-    },
-    "theme-marketing": {
-        component: getComponentTokenVariablesByThemeName("theme-marketing", componentTokenDefinitions),
-    },
-});
-const ComponentTokensPlugin = plugin(function ({ addComponents }) {
-    addComponents(cssVariablesDefinition);
-    addComponents(getAllComponentTokenRules(componentTokenDefinitions));
-});
-export { ComponentTokensPlugin, ComponentTokensPlugin as default };
+export { componentTokenDefinitions };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/css-component-tokens",
-  "version": "1.11.30",
+  "version": "1.11.32",
   "main": "./index.cjs.js",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
@@ -8,9 +8,7 @@
     "node": ">=24.x"
   },
   "dependencies": {
-    "csstype": "3.1.2",
-    "tailwindcss": "3.4.3",
-    "@trackunit/css-tailwind-custom-properties-plugin": "1.11.30"
+    "csstype": "3.1.2"
   },
   "module": "./index.esm.js",
   "types": "./index.d.ts"

package/src/component-tokens/ComponentTokens.d.ts CHANGED Viewed

@@ -3,14 +3,14 @@ export declare const componentTokenDefinitions: {
     card: {
         readonly DEFAULT: {
             readonly border: {
-                readonly borderColor: "rgb(var(--color-neutral-200))";
-                readonly borderRadius: "var(--border-radius-lg)";
+                readonly borderColor: "var(--color-neutral-200)";
+                readonly borderRadius: "var(--radius-lg)";
             };
             readonly "popover-border": {
-                readonly borderRadius: "var(--border-radius-lg)";
+                readonly borderRadius: "var(--radius-lg)";
             };
             readonly shadow: {
-                readonly boxShadow: "var(--box-shadow-none)";
+                readonly boxShadow: "var(--shadow-none)";
             };
             readonly spacing: {
                 readonly gap: "var(--spacing-3)";
@@ -53,11 +53,11 @@ export declare const componentTokenDefinitions: {
     button: {
         readonly DEFAULT: {
             readonly "secondary-color": {
-                readonly backgroundColor: "rgb(var(--color-neutral-200))";
-                readonly color: "rgb(var(--color-neutral-600))";
+                readonly backgroundColor: "var(--color-neutral-200)";
+                readonly color: "var(--color-neutral-600)";
             };
             readonly border: {
-                readonly borderRadius: "var(--border-radius-lg)";
+                readonly borderRadius: "var(--radius-lg)";
             };
             readonly height: {
                 readonly height: "auto";
@@ -69,8 +69,8 @@ export declare const componentTokenDefinitions: {
         };
         readonly "theme-marketing": {
             readonly "secondary-color": {
-                readonly backgroundColor: "rgb(var(--color-neutral-600))";
-                readonly color: "rgb(var(--color-neutral-50))";
+                readonly backgroundColor: "var(--color-neutral-600)";
+                readonly color: "var(--color-neutral-50)";
             };
             readonly border: {
                 readonly borderRadius: "50px";
@@ -98,30 +98,30 @@ export declare const componentTokenDefinitions: {
             readonly "focus-hover": {
                 readonly borderWidth: "1px";
                 readonly borderBottomWidth: "1px";
-                readonly borderColor: "rgb(var(--color-neutral-400))";
-                readonly borderBottomColor: "rgb(var(--color-neutral-400))";
-                readonly backgroundColor: "rgb(var(--color-neutral-50))";
+                readonly borderColor: "var(--color-neutral-400)";
+                readonly borderBottomColor: "var(--color-neutral-400)";
+                readonly backgroundColor: "var(--color-neutral-50)";
             };
             readonly border: {
                 readonly borderStyle: "solid";
                 readonly borderWidth: "1px";
                 readonly borderBottomWidth: "1px";
-                readonly borderColor: "rgb(var(--color-neutral-200))";
-                readonly borderBottomColor: "rgb(var(--color-neutral-200))";
+                readonly borderColor: "var(--color-neutral-200)";
+                readonly borderBottomColor: "var(--color-neutral-200)";
                 readonly borderRadius: "0.5rem";
             };
             readonly "focus-within": {
-                readonly borderColor: "rgb(var(--color-neutral-400))";
+                readonly borderColor: "var(--color-neutral-400)";
                 readonly boxShadow: "var(--tw-ring-inset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)";
             };
             readonly widen: {
-                readonly borderBottomColor: "rgb(var(--color-neutral-400))";
+                readonly borderBottomColor: "var(--color-neutral-400)";
             };
             readonly "widen-focus": {
-                readonly borderBottomColor: "rgb(var(--color-neutral-400))";
+                readonly borderBottomColor: "var(--color-neutral-400)";
             };
             readonly prefix: {
-                readonly color: "rgb(var(--color-neutral-400))";
+                readonly color: "var(--color-neutral-400)";
                 readonly cursor: "default";
             };
         };
@@ -138,16 +138,16 @@ export declare const componentTokenDefinitions: {
             readonly "focus-hover": {
                 readonly borderWidth: "1px";
                 readonly borderBottomWidth: "1px";
-                readonly borderColor: "rgb(var(--color-black-DEFAULT))";
-                readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
+                readonly borderColor: "var(--color-black)";
+                readonly borderBottomColor: "var(--color-black)";
                 readonly backgroundColor: "transparent";
             };
             readonly border: {
                 readonly borderStyle: "solid";
                 readonly borderWidth: "1px";
                 readonly borderBottomWidth: "1px";
-                readonly borderColor: "rgb(var(--color-neutral-300))";
-                readonly borderBottomColor: "rgb(var(--color-neutral-300))";
+                readonly borderColor: "var(--color-neutral-300)";
+                readonly borderBottomColor: "var(--color-neutral-300)";
                 readonly borderRadius: "0px";
             };
             readonly "focus-within": {
@@ -155,13 +155,13 @@ export declare const componentTokenDefinitions: {
                 readonly boxShadow: "none";
             };
             readonly widen: {
-                readonly borderBottomColor: "rgb(var(--color-white-DEFAULT))";
+                readonly borderBottomColor: "var(--color-white)";
             };
             readonly "widen-focus": {
-                readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
+                readonly borderBottomColor: "var(--color-black)";
             };
             readonly prefix: {
-                readonly color: "rgb(var(--color-neutral-600))";
+                readonly color: "var(--color-neutral-600)";
                 readonly cursor: "pointer";
             };
         };
@@ -169,7 +169,7 @@ export declare const componentTokenDefinitions: {
     popover: {
         readonly DEFAULT: {
             readonly border: {
-                readonly borderRadius: "var(--border-radius-DEFAULT)";
+                readonly borderRadius: "var(--radius-DEFAULT)";
             };
         };
         readonly "theme-marketing": {
@@ -181,7 +181,7 @@ export declare const componentTokenDefinitions: {
     popoverListItem: {
         readonly DEFAULT: {
             readonly border: {
-                readonly borderRadius: "var(--border-radius-DEFAULT)";
+                readonly borderRadius: "var(--radius-DEFAULT)";
             };
         };
         readonly "theme-marketing": {
@@ -193,11 +193,11 @@ export declare const componentTokenDefinitions: {
     baseInput: {
         readonly DEFAULT: {
             readonly border: {
-                readonly borderRadius: "var(--border-radius-lg)";
+                readonly borderRadius: "var(--radius-lg)";
                 readonly borderWidth: "1px";
             };
             readonly shadow: {
-                readonly boxShadow: "var(--box-shadow-sm)";
+                readonly boxShadow: "var(--shadow-sm)";
             };
             readonly background: {
                 readonly backgroundColor: "white";
@@ -215,7 +215,7 @@ export declare const componentTokenDefinitions: {
                 readonly boxShadow: "none";
             };
             readonly background: {
-                readonly backgroundColor: "rgb(var(--color-stone-50))";
+                readonly backgroundColor: "var(--color-stone-50)";
             };
             readonly prefix: {
                 readonly borderRightWidth: "0px";

package/src/component-tokens/components/BaseInput.tokens.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 export declare const BaseInputTokenDefinition: {
     readonly DEFAULT: {
         readonly border: {
-            readonly borderRadius: "var(--border-radius-lg)";
+            readonly borderRadius: "var(--radius-lg)";
             readonly borderWidth: "1px";
         };
         readonly shadow: {
-            readonly boxShadow: "var(--box-shadow-sm)";
+            readonly boxShadow: "var(--shadow-sm)";
         };
         readonly background: {
             readonly backgroundColor: "white";
@@ -23,7 +23,7 @@ export declare const BaseInputTokenDefinition: {
             readonly boxShadow: "none";
         };
         readonly background: {
-            readonly backgroundColor: "rgb(var(--color-stone-50))";
+            readonly backgroundColor: "var(--color-stone-50)";
         };
         readonly prefix: {
             readonly borderRightWidth: "0px";

package/src/component-tokens/components/Button.tokens.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 export declare const ButtonTokenDefinition: {
     readonly DEFAULT: {
         readonly "secondary-color": {
-            readonly backgroundColor: "rgb(var(--color-neutral-200))";
-            readonly color: "rgb(var(--color-neutral-600))";
+            readonly backgroundColor: "var(--color-neutral-200)";
+            readonly color: "var(--color-neutral-600)";
         };
         readonly border: {
-            readonly borderRadius: "var(--border-radius-lg)";
+            readonly borderRadius: "var(--radius-lg)";
         };
         readonly height: {
             readonly height: "auto";
@@ -17,8 +17,8 @@ export declare const ButtonTokenDefinition: {
     };
     readonly "theme-marketing": {
         readonly "secondary-color": {
-            readonly backgroundColor: "rgb(var(--color-neutral-600))";
-            readonly color: "rgb(var(--color-neutral-50))";
+            readonly backgroundColor: "var(--color-neutral-600)";
+            readonly color: "var(--color-neutral-50)";
         };
         readonly border: {
             readonly borderRadius: "50px";

package/src/component-tokens/components/Card.tokens.d.ts CHANGED Viewed

@@ -1,14 +1,14 @@
 export declare const CardTokenDefinition: {
     readonly DEFAULT: {
         readonly border: {
-            readonly borderColor: "rgb(var(--color-neutral-200))";
-            readonly borderRadius: "var(--border-radius-lg)";
+            readonly borderColor: "var(--color-neutral-200)";
+            readonly borderRadius: "var(--radius-lg)";
         };
         readonly "popover-border": {
-            readonly borderRadius: "var(--border-radius-lg)";
+            readonly borderRadius: "var(--radius-lg)";
         };
         readonly shadow: {
-            readonly boxShadow: "var(--box-shadow-none)";
+            readonly boxShadow: "var(--shadow-none)";
         };
         readonly spacing: {
             readonly gap: "var(--spacing-3)";

package/src/component-tokens/components/Popover/Popover.tokens.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 export declare const PopoverTokenDefinition: {
     readonly DEFAULT: {
         readonly border: {
-            readonly borderRadius: "var(--border-radius-DEFAULT)";
+            readonly borderRadius: "var(--radius-DEFAULT)";
         };
     };
     readonly "theme-marketing": {

package/src/component-tokens/components/Popover/PopoverListItem.tokens.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 export declare const PopoverListItemTokenDefinition: {
     readonly DEFAULT: {
         readonly border: {
-            readonly borderRadius: "var(--border-radius-DEFAULT)";
+            readonly borderRadius: "var(--radius-DEFAULT)";
         };
     };
     readonly "theme-marketing": {

package/src/component-tokens/components/Search.tokens.d.ts CHANGED Viewed

@@ -12,30 +12,30 @@ export declare const SearchTokenDefinition: {
         readonly "focus-hover": {
             readonly borderWidth: "1px";
             readonly borderBottomWidth: "1px";
-            readonly borderColor: "rgb(var(--color-neutral-400))";
-            readonly borderBottomColor: "rgb(var(--color-neutral-400))";
-            readonly backgroundColor: "rgb(var(--color-neutral-50))";
+            readonly borderColor: "var(--color-neutral-400)";
+            readonly borderBottomColor: "var(--color-neutral-400)";
+            readonly backgroundColor: "var(--color-neutral-50)";
         };
         readonly border: {
             readonly borderStyle: "solid";
             readonly borderWidth: "1px";
             readonly borderBottomWidth: "1px";
-            readonly borderColor: "rgb(var(--color-neutral-200))";
-            readonly borderBottomColor: "rgb(var(--color-neutral-200))";
+            readonly borderColor: "var(--color-neutral-200)";
+            readonly borderBottomColor: "var(--color-neutral-200)";
             readonly borderRadius: "0.5rem";
         };
         readonly "focus-within": {
-            readonly borderColor: "rgb(var(--color-neutral-400))";
+            readonly borderColor: "var(--color-neutral-400)";
             readonly boxShadow: "var(--tw-ring-inset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)";
         };
         readonly widen: {
-            readonly borderBottomColor: "rgb(var(--color-neutral-400))";
+            readonly borderBottomColor: "var(--color-neutral-400)";
         };
         readonly "widen-focus": {
-            readonly borderBottomColor: "rgb(var(--color-neutral-400))";
+            readonly borderBottomColor: "var(--color-neutral-400)";
         };
         readonly prefix: {
-            readonly color: "rgb(var(--color-neutral-400))";
+            readonly color: "var(--color-neutral-400)";
             readonly cursor: "default";
         };
     };
@@ -52,16 +52,16 @@ export declare const SearchTokenDefinition: {
         readonly "focus-hover": {
             readonly borderWidth: "1px";
             readonly borderBottomWidth: "1px";
-            readonly borderColor: "rgb(var(--color-black-DEFAULT))";
-            readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
+            readonly borderColor: "var(--color-black)";
+            readonly borderBottomColor: "var(--color-black)";
             readonly backgroundColor: "transparent";
         };
         readonly border: {
             readonly borderStyle: "solid";
             readonly borderWidth: "1px";
             readonly borderBottomWidth: "1px";
-            readonly borderColor: "rgb(var(--color-neutral-300))";
-            readonly borderBottomColor: "rgb(var(--color-neutral-300))";
+            readonly borderColor: "var(--color-neutral-300)";
+            readonly borderBottomColor: "var(--color-neutral-300)";
             readonly borderRadius: "0px";
         };
         readonly "focus-within": {
@@ -69,13 +69,13 @@ export declare const SearchTokenDefinition: {
             readonly boxShadow: "none";
         };
         readonly widen: {
-            readonly borderBottomColor: "rgb(var(--color-white-DEFAULT))";
+            readonly borderBottomColor: "var(--color-white)";
         };
         readonly "widen-focus": {
-            readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
+            readonly borderBottomColor: "var(--color-black)";
         };
         readonly prefix: {
-            readonly color: "rgb(var(--color-neutral-600))";
+            readonly color: "var(--color-neutral-600)";
             readonly cursor: "pointer";
         };
     };

package/src/index.d.ts CHANGED Viewed

@@ -1,3 +1,7 @@
-import { ComponentTokensPlugin } from "./plugin";
-export * from "./plugin";
-export default ComponentTokensPlugin;
+/**
+ * Component tokens definition exports.
+ * The Tailwind plugin has been deprecated in favor of CSS-first approach.
+ * Use core.css from @trackunit/css-core instead.
+ */
+export { componentTokenDefinitions } from "./component-tokens/ComponentTokens";
+export type { ComponentNames, ComponentTokenNames } from "./component-tokens/ComponentTokens";

package/src/component-tokens/ComponentTokenVariablesByThemeName.d.ts DELETED Viewed

@@ -1,4 +0,0 @@
-import { ComponentTokenDefinition, ThemeNames } from "./ComponentTokenDefinition";
-import { ComponentTokenDefinitions } from "./ComponentTokens";
-/** Returns object structure for Tailwind variable config for specified theme for ALL ComponentTokenDefinitions. */
-export declare const getComponentTokenVariablesByThemeName: (theme: ThemeNames, componentTokenDefinitions: ComponentTokenDefinitions) => Record<string, ComponentTokenDefinition[ThemeNames]>;

package/src/component-tokens/MockComponent.d.ts DELETED Viewed

@@ -1,26 +0,0 @@
-export declare const MockComponentTokenDefinitionAlternative: {
-    readonly DEFAULT: {
-        readonly border: {
-            readonly borderRadius: "var(--border-radius-DEFAULT)";
-            readonly borderWidth: "var(--border-width-DEFAULT)";
-        };
-    };
-    readonly "theme-marketing": {
-        readonly border: {
-            readonly borderRadius: "var(--border-radius-md)";
-            readonly borderWidth: "var(--border-width-thin)";
-        };
-    };
-};
-export declare const MockComponentTokenDefinition: {
-    readonly DEFAULT: {
-        readonly border: {
-            readonly borderRadius: "var(--border-radius-DEFAULT)";
-        };
-    };
-    readonly "theme-marketing": {
-        readonly border: {
-            readonly borderRadius: "var(--border-radius-2xl)";
-        };
-    };
-};

package/src/component-tokens/pluginUtilityFunctions.d.ts DELETED Viewed

@@ -1,28 +0,0 @@
-import { Properties as CSSProperties } from "csstype";
-import { CSSRuleObject } from "tailwindcss/types/config";
-import { ComponentNames, ComponentTokenDefinitions, ComponentTokenNames } from "./ComponentTokens";
-/** The prefix for css variables and tailwind component classes */
-export declare const PREFIX = "component";
-/**
- * Get the css variable value for the component tokens specific property.
- *
- * @param component The name of the component to get the variable for.
- * @param token The component-level token name
- * @param cssProperty The css property on the component-level Token
- * @returns {string} `var(--${PREFIX}-${component}-${token}-${cssProperty})`
- */
-export declare const componentTokenAsCssVariableString: <TComponent extends ComponentNames, TToken extends ComponentTokenNames<TComponent>>(component: TComponent, token: TToken, cssProperty: keyof CSSProperties) => `var(--component-${TComponent}-${TToken}-border)` | `var(--component-${TComponent}-${TToken}-height)` | `var(--component-${TComponent}-${TToken}-padding)` | `var(--component-${TComponent}-${TToken}-width)` | `var(--component-${TComponent}-${TToken}-background)` | `var(--component-${TComponent}-${TToken}-inset)` | `var(--component-${TComponent}-${TToken}-gap)` | `var(--component-${TComponent}-${TToken}-flex)` | `var(--component-${TComponent}-${TToken}-grid)` | `var(--component-${TComponent}-${TToken}-font)` | `var(--component-${TComponent}-${TToken}-accentColor)` | `var(--component-${TComponent}-${TToken}-alignContent)` | `var(--component-${TComponent}-${TToken}-alignItems)` | `var(--component-${TComponent}-${TToken}-alignSelf)` | `var(--component-${TComponent}-${TToken}-alignTracks)` | `var(--component-${TComponent}-${TToken}-animationComposition)` | `var(--component-${TComponent}-${TToken}-animationDelay)` | `var(--component-${TComponent}-${TToken}-animationDirection)` | `var(--component-${TComponent}-${TToken}-animationDuration)` | `var(--component-${TComponent}-${TToken}-animationFillMode)` | `var(--component-${TComponent}-${TToken}-animationIterationCount)` | `var(--component-${TComponent}-${TToken}-animationName)` | `var(--component-${TComponent}-${TToken}-animationPlayState)` | `var(--component-${TComponent}-${TToken}-animationTimeline)` | `var(--component-${TComponent}-${TToken}-animationTimingFunction)` | `var(--component-${TComponent}-${TToken}-appearance)` | `var(--component-${TComponent}-${TToken}-aspectRatio)` | `var(--component-${TComponent}-${TToken}-backdropFilter)` | `var(--component-${TComponent}-${TToken}-backfaceVisibility)` | `var(--component-${TComponent}-${TToken}-backgroundAttachment)` | `var(--component-${TComponent}-${TToken}-backgroundBlendMode)` | `var(--component-${TComponent}-${TToken}-backgroundClip)` | `var(--component-${TComponent}-${TToken}-backgroundColor)` | `var(--component-${TComponent}-${TToken}-backgroundImage)` | `var(--component-${TComponent}-${TToken}-backgroundOrigin)` | `var(--component-${TComponent}-${TToken}-backgroundPositionX)` | `var(--component-${TComponent}-${TToken}-backgroundPositionY)` | `var(--component-${TComponent}-${TToken}-backgroundRepeat)` | `var(--component-${TComponent}-${TToken}-backgroundSize)` | `var(--component-${TComponent}-${TToken}-blockOverflow)` | `var(--component-${TComponent}-${TToken}-blockSize)` | `var(--component-${TComponent}-${TToken}-borderBlockColor)` | `var(--component-${TComponent}-${TToken}-borderBlockEndColor)` | `var(--component-${TComponent}-${TToken}-borderBlockEndStyle)` | `var(--component-${TComponent}-${TToken}-borderBlockEndWidth)` | `var(--component-${TComponent}-${TToken}-borderBlockStartColor)` | `var(--component-${TComponent}-${TToken}-borderBlockStartStyle)` | `var(--component-${TComponent}-${TToken}-borderBlockStartWidth)` | `var(--component-${TComponent}-${TToken}-borderBlockStyle)` | `var(--component-${TComponent}-${TToken}-borderBlockWidth)` | `var(--component-${TComponent}-${TToken}-borderBottomColor)` | `var(--component-${TComponent}-${TToken}-borderBottomLeftRadius)` | `var(--component-${TComponent}-${TToken}-borderBottomRightRadius)` | `var(--component-${TComponent}-${TToken}-borderBottomStyle)` | `var(--component-${TComponent}-${TToken}-borderBottomWidth)` | `var(--component-${TComponent}-${TToken}-borderCollapse)` | `var(--component-${TComponent}-${TToken}-borderEndEndRadius)` | `var(--component-${TComponent}-${TToken}-borderEndStartRadius)` | `var(--component-${TComponent}-${TToken}-borderImageOutset)` | `var(--component-${TComponent}-${TToken}-borderImageRepeat)` | `var(--component-${TComponent}-${TToken}-borderImageSlice)` | `var(--component-${TComponent}-${TToken}-borderImageSource)` | `var(--component-${TComponent}-${TToken}-borderImageWidth)` | `var(--component-${TComponent}-${TToken}-borderInlineColor)` | `var(--component-${TComponent}-${TToken}-borderInlineEndColor)` | `var(--component-${TComponent}-${TToken}-borderInlineEndStyle)` | `var(--component-${TComponent}-${TToken}-borderInlineEndWidth)` | `var(--component-${TComponent}-${TToken}-borderInlineStartColor)` | `var(--component-${TComponent}-${TToken}-borderInlineStartStyle)` | `var(--component-${TComponent}-${TToken}-borderInlineStartWidth)` | `var(--component-${TComponent}-${TToken}-borderInlineStyle)` | `var(--component-${TComponent}-${TToken}-borderInlineWidth)` | `var(--component-${TComponent}-${TToken}-borderLeftColor)` | `var(--component-${TComponent}-${TToken}-borderLeftStyle)` | `var(--component-${TComponent}-${TToken}-borderLeftWidth)` | `var(--component-${TComponent}-${TToken}-borderRightColor)` | `var(--component-${TComponent}-${TToken}-borderRightStyle)` | `var(--component-${TComponent}-${TToken}-borderRightWidth)` | `var(--component-${TComponent}-${TToken}-borderSpacing)` | `var(--component-${TComponent}-${TToken}-borderStartEndRadius)` | `var(--component-${TComponent}-${TToken}-borderStartStartRadius)` | `var(--component-${TComponent}-${TToken}-borderTopColor)` | `var(--component-${TComponent}-${TToken}-borderTopLeftRadius)` | `var(--component-${TComponent}-${TToken}-borderTopRightRadius)` | `var(--component-${TComponent}-${TToken}-borderTopStyle)` | `var(--component-${TComponent}-${TToken}-borderTopWidth)` | `var(--component-${TComponent}-${TToken}-bottom)` | `var(--component-${TComponent}-${TToken}-boxDecorationBreak)` | `var(--component-${TComponent}-${TToken}-boxShadow)` | `var(--component-${TComponent}-${TToken}-boxSizing)` | `var(--component-${TComponent}-${TToken}-breakAfter)` | `var(--component-${TComponent}-${TToken}-breakBefore)` | `var(--component-${TComponent}-${TToken}-breakInside)` | `var(--component-${TComponent}-${TToken}-captionSide)` | `var(--component-${TComponent}-${TToken}-caretColor)` | `var(--component-${TComponent}-${TToken}-caretShape)` | `var(--component-${TComponent}-${TToken}-clear)` | `var(--component-${TComponent}-${TToken}-clipPath)` | `var(--component-${TComponent}-${TToken}-color)` | `var(--component-${TComponent}-${TToken}-colorAdjust)` | `var(--component-${TComponent}-${TToken}-colorScheme)` | `var(--component-${TComponent}-${TToken}-columnCount)` | `var(--component-${TComponent}-${TToken}-columnFill)` | `var(--component-${TComponent}-${TToken}-columnGap)` | `var(--component-${TComponent}-${TToken}-columnRuleColor)` | `var(--component-${TComponent}-${TToken}-columnRuleStyle)` | `var(--component-${TComponent}-${TToken}-columnRuleWidth)` | `var(--component-${TComponent}-${TToken}-columnSpan)` | `var(--component-${TComponent}-${TToken}-columnWidth)` | `var(--component-${TComponent}-${TToken}-contain)` | `var(--component-${TComponent}-${TToken}-containIntrinsicBlockSize)` | `var(--component-${TComponent}-${TToken}-containIntrinsicHeight)` | `var(--component-${TComponent}-${TToken}-containIntrinsicInlineSize)` | `var(--component-${TComponent}-${TToken}-containIntrinsicWidth)` | `var(--component-${TComponent}-${TToken}-containerName)` | `var(--component-${TComponent}-${TToken}-containerType)` | `var(--component-${TComponent}-${TToken}-content)` | `var(--component-${TComponent}-${TToken}-contentVisibility)` | `var(--component-${TComponent}-${TToken}-counterIncrement)` | `var(--component-${TComponent}-${TToken}-counterReset)` | `var(--component-${TComponent}-${TToken}-counterSet)` | `var(--component-${TComponent}-${TToken}-cursor)` | `var(--component-${TComponent}-${TToken}-direction)` | `var(--component-${TComponent}-${TToken}-display)` | `var(--component-${TComponent}-${TToken}-emptyCells)` | `var(--component-${TComponent}-${TToken}-filter)` | `var(--component-${TComponent}-${TToken}-flexBasis)` | `var(--component-${TComponent}-${TToken}-flexDirection)` | `var(--component-${TComponent}-${TToken}-flexGrow)` | `var(--component-${TComponent}-${TToken}-flexShrink)` | `var(--component-${TComponent}-${TToken}-flexWrap)` | `var(--component-${TComponent}-${TToken}-float)` | `var(--component-${TComponent}-${TToken}-fontFamily)` | `var(--component-${TComponent}-${TToken}-fontFeatureSettings)` | `var(--component-${TComponent}-${TToken}-fontKerning)` | `var(--component-${TComponent}-${TToken}-fontLanguageOverride)` | `var(--component-${TComponent}-${TToken}-fontOpticalSizing)` | `var(--component-${TComponent}-${TToken}-fontPalette)` | `var(--component-${TComponent}-${TToken}-fontSize)` | `var(--component-${TComponent}-${TToken}-fontSizeAdjust)` | `var(--component-${TComponent}-${TToken}-fontSmooth)` | `var(--component-${TComponent}-${TToken}-fontStretch)` | `var(--component-${TComponent}-${TToken}-fontStyle)` | `var(--component-${TComponent}-${TToken}-fontSynthesis)` | `var(--component-${TComponent}-${TToken}-fontVariant)` | `var(--component-${TComponent}-${TToken}-fontVariantAlternates)` | `var(--component-${TComponent}-${TToken}-fontVariantCaps)` | `var(--component-${TComponent}-${TToken}-fontVariantEastAsian)` | `var(--component-${TComponent}-${TToken}-fontVariantEmoji)` | `var(--component-${TComponent}-${TToken}-fontVariantLigatures)` | `var(--component-${TComponent}-${TToken}-fontVariantNumeric)` | `var(--component-${TComponent}-${TToken}-fontVariantPosition)` | `var(--component-${TComponent}-${TToken}-fontVariationSettings)` | `var(--component-${TComponent}-${TToken}-fontWeight)` | `var(--component-${TComponent}-${TToken}-forcedColorAdjust)` | `var(--component-${TComponent}-${TToken}-gridAutoColumns)` | `var(--component-${TComponent}-${TToken}-gridAutoFlow)` | `var(--component-${TComponent}-${TToken}-gridAutoRows)` | `var(--component-${TComponent}-${TToken}-gridColumnEnd)` | `var(--component-${TComponent}-${TToken}-gridColumnStart)` | `var(--component-${TComponent}-${TToken}-gridRowEnd)` | `var(--component-${TComponent}-${TToken}-gridRowStart)` | `var(--component-${TComponent}-${TToken}-gridTemplateAreas)` | `var(--component-${TComponent}-${TToken}-gridTemplateColumns)` | `var(--component-${TComponent}-${TToken}-gridTemplateRows)` | `var(--component-${TComponent}-${TToken}-hangingPunctuation)` | `var(--component-${TComponent}-${TToken}-hyphenateCharacter)` | `var(--component-${TComponent}-${TToken}-hyphenateLimitChars)` | `var(--component-${TComponent}-${TToken}-hyphens)` | `var(--component-${TComponent}-${TToken}-imageOrientation)` | `var(--component-${TComponent}-${TToken}-imageRendering)` | `var(--component-${TComponent}-${TToken}-imageResolution)` | `var(--component-${TComponent}-${TToken}-initialLetter)` | `var(--component-${TComponent}-${TToken}-inlineSize)` | `var(--component-${TComponent}-${TToken}-inputSecurity)` | `var(--component-${TComponent}-${TToken}-insetBlockEnd)` | `var(--component-${TComponent}-${TToken}-insetBlockStart)` | `var(--component-${TComponent}-${TToken}-insetInlineEnd)` | `var(--component-${TComponent}-${TToken}-insetInlineStart)` | `var(--component-${TComponent}-${TToken}-isolation)` | `var(--component-${TComponent}-${TToken}-justifyContent)` | `var(--component-${TComponent}-${TToken}-justifyItems)` | `var(--component-${TComponent}-${TToken}-justifySelf)` | `var(--component-${TComponent}-${TToken}-justifyTracks)` | `var(--component-${TComponent}-${TToken}-left)` | `var(--component-${TComponent}-${TToken}-letterSpacing)` | `var(--component-${TComponent}-${TToken}-lineBreak)` | `var(--component-${TComponent}-${TToken}-lineHeight)` | `var(--component-${TComponent}-${TToken}-lineHeightStep)` | `var(--component-${TComponent}-${TToken}-listStyleImage)` | `var(--component-${TComponent}-${TToken}-listStylePosition)` | `var(--component-${TComponent}-${TToken}-listStyleType)` | `var(--component-${TComponent}-${TToken}-marginBlockEnd)` | `var(--component-${TComponent}-${TToken}-marginBlockStart)` | `var(--component-${TComponent}-${TToken}-marginBottom)` | `var(--component-${TComponent}-${TToken}-marginInlineEnd)` | `var(--component-${TComponent}-${TToken}-marginInlineStart)` | `var(--component-${TComponent}-${TToken}-marginLeft)` | `var(--component-${TComponent}-${TToken}-marginRight)` | `var(--component-${TComponent}-${TToken}-marginTop)` | `var(--component-${TComponent}-${TToken}-marginTrim)` | `var(--component-${TComponent}-${TToken}-maskBorderMode)` | `var(--component-${TComponent}-${TToken}-maskBorderOutset)` | `var(--component-${TComponent}-${TToken}-maskBorderRepeat)` | `var(--component-${TComponent}-${TToken}-maskBorderSlice)` | `var(--component-${TComponent}-${TToken}-maskBorderSource)` | `var(--component-${TComponent}-${TToken}-maskBorderWidth)` | `var(--component-${TComponent}-${TToken}-maskClip)` | `var(--component-${TComponent}-${TToken}-maskComposite)` | `var(--component-${TComponent}-${TToken}-maskImage)` | `var(--component-${TComponent}-${TToken}-maskMode)` | `var(--component-${TComponent}-${TToken}-maskOrigin)` | `var(--component-${TComponent}-${TToken}-maskPosition)` | `var(--component-${TComponent}-${TToken}-maskRepeat)` | `var(--component-${TComponent}-${TToken}-maskSize)` | `var(--component-${TComponent}-${TToken}-maskType)` | `var(--component-${TComponent}-${TToken}-mathDepth)` | `var(--component-${TComponent}-${TToken}-mathShift)` | `var(--component-${TComponent}-${TToken}-mathStyle)` | `var(--component-${TComponent}-${TToken}-maxBlockSize)` | `var(--component-${TComponent}-${TToken}-maxHeight)` | `var(--component-${TComponent}-${TToken}-maxInlineSize)` | `var(--component-${TComponent}-${TToken}-maxLines)` | `var(--component-${TComponent}-${TToken}-maxWidth)` | `var(--component-${TComponent}-${TToken}-minBlockSize)` | `var(--component-${TComponent}-${TToken}-minHeight)` | `var(--component-${TComponent}-${TToken}-minInlineSize)` | `var(--component-${TComponent}-${TToken}-minWidth)` | `var(--component-${TComponent}-${TToken}-mixBlendMode)` | `var(--component-${TComponent}-${TToken}-motionDistance)` | `var(--component-${TComponent}-${TToken}-motionPath)` | `var(--component-${TComponent}-${TToken}-motionRotation)` | `var(--component-${TComponent}-${TToken}-objectFit)` | `var(--component-${TComponent}-${TToken}-objectPosition)` | `var(--component-${TComponent}-${TToken}-offsetAnchor)` | `var(--component-${TComponent}-${TToken}-offsetDistance)` | `var(--component-${TComponent}-${TToken}-offsetPath)` | `var(--component-${TComponent}-${TToken}-offsetPosition)` | `var(--component-${TComponent}-${TToken}-offsetRotate)` | `var(--component-${TComponent}-${TToken}-offsetRotation)` | `var(--component-${TComponent}-${TToken}-opacity)` | `var(--component-${TComponent}-${TToken}-order)` | `var(--component-${TComponent}-${TToken}-orphans)` | `var(--component-${TComponent}-${TToken}-outlineColor)` | `var(--component-${TComponent}-${TToken}-outlineOffset)` | `var(--component-${TComponent}-${TToken}-outlineStyle)` | `var(--component-${TComponent}-${TToken}-outlineWidth)` | `var(--component-${TComponent}-${TToken}-overflowAnchor)` | `var(--component-${TComponent}-${TToken}-overflowBlock)` | `var(--component-${TComponent}-${TToken}-overflowClipBox)` | `var(--component-${TComponent}-${TToken}-overflowClipMargin)` | `var(--component-${TComponent}-${TToken}-overflowInline)` | `var(--component-${TComponent}-${TToken}-overflowWrap)` | `var(--component-${TComponent}-${TToken}-overflowX)` | `var(--component-${TComponent}-${TToken}-overflowY)` | `var(--component-${TComponent}-${TToken}-overscrollBehaviorBlock)` | `var(--component-${TComponent}-${TToken}-overscrollBehaviorInline)` | `var(--component-${TComponent}-${TToken}-overscrollBehaviorX)` | `var(--component-${TComponent}-${TToken}-overscrollBehaviorY)` | `var(--component-${TComponent}-${TToken}-paddingBlockEnd)` | `var(--component-${TComponent}-${TToken}-paddingBlockStart)` | `var(--component-${TComponent}-${TToken}-paddingBottom)` | `var(--component-${TComponent}-${TToken}-paddingInlineEnd)` | `var(--component-${TComponent}-${TToken}-paddingInlineStart)` | `var(--component-${TComponent}-${TToken}-paddingLeft)` | `var(--component-${TComponent}-${TToken}-paddingRight)` | `var(--component-${TComponent}-${TToken}-paddingTop)` | `var(--component-${TComponent}-${TToken}-page)` | `var(--component-${TComponent}-${TToken}-pageBreakAfter)` | `var(--component-${TComponent}-${TToken}-pageBreakBefore)` | `var(--component-${TComponent}-${TToken}-pageBreakInside)` | `var(--component-${TComponent}-${TToken}-paintOrder)` | `var(--component-${TComponent}-${TToken}-perspective)` | `var(--component-${TComponent}-${TToken}-perspectiveOrigin)` | `var(--component-${TComponent}-${TToken}-pointerEvents)` | `var(--component-${TComponent}-${TToken}-position)` | `var(--component-${TComponent}-${TToken}-printColorAdjust)` | `var(--component-${TComponent}-${TToken}-quotes)` | `var(--component-${TComponent}-${TToken}-resize)` | `var(--component-${TComponent}-${TToken}-right)` | `var(--component-${TComponent}-${TToken}-rotate)` | `var(--component-${TComponent}-${TToken}-rowGap)` | `var(--component-${TComponent}-${TToken}-rubyAlign)` | `var(--component-${TComponent}-${TToken}-rubyMerge)` | `var(--component-${TComponent}-${TToken}-rubyPosition)` | `var(--component-${TComponent}-${TToken}-scale)` | `var(--component-${TComponent}-${TToken}-scrollBehavior)` | `var(--component-${TComponent}-${TToken}-scrollMarginBlockEnd)` | `var(--component-${TComponent}-${TToken}-scrollMarginBlockStart)` | `var(--component-${TComponent}-${TToken}-scrollMarginBottom)` | `var(--component-${TComponent}-${TToken}-scrollMarginInlineEnd)` | `var(--component-${TComponent}-${TToken}-scrollMarginInlineStart)` | `var(--component-${TComponent}-${TToken}-scrollMarginLeft)` | `var(--component-${TComponent}-${TToken}-scrollMarginRight)` | `var(--component-${TComponent}-${TToken}-scrollMarginTop)` | `var(--component-${TComponent}-${TToken}-scrollPaddingBlockEnd)` | `var(--component-${TComponent}-${TToken}-scrollPaddingBlockStart)` | `var(--component-${TComponent}-${TToken}-scrollPaddingBottom)` | `var(--component-${TComponent}-${TToken}-scrollPaddingInlineEnd)` | `var(--component-${TComponent}-${TToken}-scrollPaddingInlineStart)` | `var(--component-${TComponent}-${TToken}-scrollPaddingLeft)` | `var(--component-${TComponent}-${TToken}-scrollPaddingRight)` | `var(--component-${TComponent}-${TToken}-scrollPaddingTop)` | `var(--component-${TComponent}-${TToken}-scrollSnapAlign)` | `var(--component-${TComponent}-${TToken}-scrollSnapMarginBottom)` | `var(--component-${TComponent}-${TToken}-scrollSnapMarginLeft)` | `var(--component-${TComponent}-${TToken}-scrollSnapMarginRight)` | `var(--component-${TComponent}-${TToken}-scrollSnapMarginTop)` | `var(--component-${TComponent}-${TToken}-scrollSnapStop)` | `var(--component-${TComponent}-${TToken}-scrollSnapType)` | `var(--component-${TComponent}-${TToken}-scrollTimelineAxis)` | `var(--component-${TComponent}-${TToken}-scrollTimelineName)` | `var(--component-${TComponent}-${TToken}-scrollbarColor)` | `var(--component-${TComponent}-${TToken}-scrollbarGutter)` | `var(--component-${TComponent}-${TToken}-scrollbarWidth)` | `var(--component-${TComponent}-${TToken}-shapeImageThreshold)` | `var(--component-${TComponent}-${TToken}-shapeMargin)` | `var(--component-${TComponent}-${TToken}-shapeOutside)` | `var(--component-${TComponent}-${TToken}-tabSize)` | `var(--component-${TComponent}-${TToken}-tableLayout)` | `var(--component-${TComponent}-${TToken}-textAlign)` | `var(--component-${TComponent}-${TToken}-textAlignLast)` | `var(--component-${TComponent}-${TToken}-textCombineUpright)` | `var(--component-${TComponent}-${TToken}-textDecorationColor)` | `var(--component-${TComponent}-${TToken}-textDecorationLine)` | `var(--component-${TComponent}-${TToken}-textDecorationSkip)` | `var(--component-${TComponent}-${TToken}-textDecorationSkipInk)` | `var(--component-${TComponent}-${TToken}-textDecorationStyle)` | `var(--component-${TComponent}-${TToken}-textDecorationThickness)` | `var(--component-${TComponent}-${TToken}-textEmphasisColor)` | `var(--component-${TComponent}-${TToken}-textEmphasisPosition)` | `var(--component-${TComponent}-${TToken}-textEmphasisStyle)` | `var(--component-${TComponent}-${TToken}-textIndent)` | `var(--component-${TComponent}-${TToken}-textJustify)` | `var(--component-${TComponent}-${TToken}-textOrientation)` | `var(--component-${TComponent}-${TToken}-textOverflow)` | `var(--component-${TComponent}-${TToken}-textRendering)` | `var(--component-${TComponent}-${TToken}-textShadow)` | `var(--component-${TComponent}-${TToken}-textSizeAdjust)` | `var(--component-${TComponent}-${TToken}-textTransform)` | `var(--component-${TComponent}-${TToken}-textUnderlineOffset)` | `var(--component-${TComponent}-${TToken}-textUnderlinePosition)` | `var(--component-${TComponent}-${TToken}-top)` | `var(--component-${TComponent}-${TToken}-touchAction)` | `var(--component-${TComponent}-${TToken}-transform)` | `var(--component-${TComponent}-${TToken}-transformBox)` | `var(--component-${TComponent}-${TToken}-transformOrigin)` | `var(--component-${TComponent}-${TToken}-transformStyle)` | `var(--component-${TComponent}-${TToken}-transitionDelay)` | `var(--component-${TComponent}-${TToken}-transitionDuration)` | `var(--component-${TComponent}-${TToken}-transitionProperty)` | `var(--component-${TComponent}-${TToken}-transitionTimingFunction)` | `var(--component-${TComponent}-${TToken}-translate)` | `var(--component-${TComponent}-${TToken}-unicodeBidi)` | `var(--component-${TComponent}-${TToken}-userSelect)` | `var(--component-${TComponent}-${TToken}-verticalAlign)` | `var(--component-${TComponent}-${TToken}-viewTransitionName)` | `var(--component-${TComponent}-${TToken}-visibility)` | `var(--component-${TComponent}-${TToken}-whiteSpace)` | `var(--component-${TComponent}-${TToken}-widows)` | `var(--component-${TComponent}-${TToken}-willChange)` | `var(--component-${TComponent}-${TToken}-wordBreak)` | `var(--component-${TComponent}-${TToken}-wordSpacing)` | `var(--component-${TComponent}-${TToken}-wordWrap)` | `var(--component-${TComponent}-${TToken}-writingMode)` | `var(--component-${TComponent}-${TToken}-zIndex)` | `var(--component-${TComponent}-${TToken}-zoom)` | `var(--component-${TComponent}-${TToken}-all)` | `var(--component-${TComponent}-${TToken}-animation)` | `var(--component-${TComponent}-${TToken}-backgroundPosition)` | `var(--component-${TComponent}-${TToken}-borderBlock)` | `var(--component-${TComponent}-${TToken}-borderBlockEnd)` | `var(--component-${TComponent}-${TToken}-borderBlockStart)` | `var(--component-${TComponent}-${TToken}-borderBottom)` | `var(--component-${TComponent}-${TToken}-borderColor)` | `var(--component-${TComponent}-${TToken}-borderImage)` | `var(--component-${TComponent}-${TToken}-borderInline)` | `var(--component-${TComponent}-${TToken}-borderInlineEnd)` | `var(--component-${TComponent}-${TToken}-borderInlineStart)` | `var(--component-${TComponent}-${TToken}-borderLeft)` | `var(--component-${TComponent}-${TToken}-borderRadius)` | `var(--component-${TComponent}-${TToken}-borderRight)` | `var(--component-${TComponent}-${TToken}-borderStyle)` | `var(--component-${TComponent}-${TToken}-borderTop)` | `var(--component-${TComponent}-${TToken}-borderWidth)` | `var(--component-${TComponent}-${TToken}-caret)` | `var(--component-${TComponent}-${TToken}-columnRule)` | `var(--component-${TComponent}-${TToken}-columns)` | `var(--component-${TComponent}-${TToken}-containIntrinsicSize)` | `var(--component-${TComponent}-${TToken}-container)` | `var(--component-${TComponent}-${TToken}-flexFlow)` | `var(--component-${TComponent}-${TToken}-gridArea)` | `var(--component-${TComponent}-${TToken}-gridColumn)` | `var(--component-${TComponent}-${TToken}-gridRow)` | `var(--component-${TComponent}-${TToken}-gridTemplate)` | `var(--component-${TComponent}-${TToken}-insetBlock)` | `var(--component-${TComponent}-${TToken}-insetInline)` | `var(--component-${TComponent}-${TToken}-lineClamp)` | `var(--component-${TComponent}-${TToken}-listStyle)` | `var(--component-${TComponent}-${TToken}-margin)` | `var(--component-${TComponent}-${TToken}-marginBlock)` | `var(--component-${TComponent}-${TToken}-marginInline)` | `var(--component-${TComponent}-${TToken}-mask)` | `var(--component-${TComponent}-${TToken}-maskBorder)` | `var(--component-${TComponent}-${TToken}-motion)` | `var(--component-${TComponent}-${TToken}-offset)` | `var(--component-${TComponent}-${TToken}-outline)` | `var(--component-${TComponent}-${TToken}-overflow)` | `var(--component-${TComponent}-${TToken}-overscrollBehavior)` | `var(--component-${TComponent}-${TToken}-paddingBlock)` | `var(--component-${TComponent}-${TToken}-paddingInline)` | `var(--component-${TComponent}-${TToken}-placeContent)` | `var(--component-${TComponent}-${TToken}-placeItems)` | `var(--component-${TComponent}-${TToken}-placeSelf)` | `var(--component-${TComponent}-${TToken}-scrollMargin)` | `var(--component-${TComponent}-${TToken}-scrollMarginBlock)` | `var(--component-${TComponent}-${TToken}-scrollMarginInline)` | `var(--component-${TComponent}-${TToken}-scrollPadding)` | `var(--component-${TComponent}-${TToken}-scrollPaddingBlock)` | `var(--component-${TComponent}-${TToken}-scrollPaddingInline)` | `var(--component-${TComponent}-${TToken}-scrollSnapMargin)` | `var(--component-${TComponent}-${TToken}-scrollTimeline)` | `var(--component-${TComponent}-${TToken}-textDecoration)` | `var(--component-${TComponent}-${TToken}-textEmphasis)` | `var(--component-${TComponent}-${TToken}-transition)` | `var(--component-${TComponent}-${TToken}-MozAnimationDelay)` | `var(--component-${TComponent}-${TToken}-MozAnimationDirection)` | `var(--component-${TComponent}-${TToken}-MozAnimationDuration)` | `var(--component-${TComponent}-${TToken}-MozAnimationFillMode)` | `var(--component-${TComponent}-${TToken}-MozAnimationIterationCount)` | `var(--component-${TComponent}-${TToken}-MozAnimationName)` | `var(--component-${TComponent}-${TToken}-MozAnimationPlayState)` | `var(--component-${TComponent}-${TToken}-MozAnimationTimingFunction)` | `var(--component-${TComponent}-${TToken}-MozAppearance)` | `var(--component-${TComponent}-${TToken}-MozBackfaceVisibility)` | `var(--component-${TComponent}-${TToken}-MozBinding)` | `var(--component-${TComponent}-${TToken}-MozBorderBottomColors)` | `var(--component-${TComponent}-${TToken}-MozBorderEndColor)` | `var(--component-${TComponent}-${TToken}-MozBorderEndStyle)` | `var(--component-${TComponent}-${TToken}-MozBorderEndWidth)` | `var(--component-${TComponent}-${TToken}-MozBorderLeftColors)` | `var(--component-${TComponent}-${TToken}-MozBorderRightColors)` | `var(--component-${TComponent}-${TToken}-MozBorderStartColor)` | `var(--component-${TComponent}-${TToken}-MozBorderStartStyle)` | `var(--component-${TComponent}-${TToken}-MozBorderTopColors)` | `var(--component-${TComponent}-${TToken}-MozBoxSizing)` | `var(--component-${TComponent}-${TToken}-MozColumnCount)` | `var(--component-${TComponent}-${TToken}-MozColumnFill)` | `var(--component-${TComponent}-${TToken}-MozColumnRuleColor)` | `var(--component-${TComponent}-${TToken}-MozColumnRuleStyle)` | `var(--component-${TComponent}-${TToken}-MozColumnRuleWidth)` | `var(--component-${TComponent}-${TToken}-MozColumnWidth)` | `var(--component-${TComponent}-${TToken}-MozContextProperties)` | `var(--component-${TComponent}-${TToken}-MozFontFeatureSettings)` | `var(--component-${TComponent}-${TToken}-MozFontLanguageOverride)` | `var(--component-${TComponent}-${TToken}-MozHyphens)` | `var(--component-${TComponent}-${TToken}-MozImageRegion)` | `var(--component-${TComponent}-${TToken}-MozMarginEnd)` | `var(--component-${TComponent}-${TToken}-MozMarginStart)` | `var(--component-${TComponent}-${TToken}-MozOrient)` | `var(--component-${TComponent}-${TToken}-MozOsxFontSmoothing)` | `var(--component-${TComponent}-${TToken}-MozPaddingEnd)` | `var(--component-${TComponent}-${TToken}-MozPaddingStart)` | `var(--component-${TComponent}-${TToken}-MozPerspective)` | `var(--component-${TComponent}-${TToken}-MozPerspectiveOrigin)` | `var(--component-${TComponent}-${TToken}-MozStackSizing)` | `var(--component-${TComponent}-${TToken}-MozTabSize)` | `var(--component-${TComponent}-${TToken}-MozTextBlink)` | `var(--component-${TComponent}-${TToken}-MozTextSizeAdjust)` | `var(--component-${TComponent}-${TToken}-MozTransformOrigin)` | `var(--component-${TComponent}-${TToken}-MozTransformStyle)` | `var(--component-${TComponent}-${TToken}-MozTransitionDelay)` | `var(--component-${TComponent}-${TToken}-MozTransitionDuration)` | `var(--component-${TComponent}-${TToken}-MozTransitionProperty)` | `var(--component-${TComponent}-${TToken}-MozTransitionTimingFunction)` | `var(--component-${TComponent}-${TToken}-MozUserFocus)` | `var(--component-${TComponent}-${TToken}-MozUserModify)` | `var(--component-${TComponent}-${TToken}-MozUserSelect)` | `var(--component-${TComponent}-${TToken}-MozWindowDragging)` | `var(--component-${TComponent}-${TToken}-MozWindowShadow)` | `var(--component-${TComponent}-${TToken}-msAccelerator)` | `var(--component-${TComponent}-${TToken}-msBlockProgression)` | `var(--component-${TComponent}-${TToken}-msContentZoomChaining)` | `var(--component-${TComponent}-${TToken}-msContentZoomLimitMax)` | `var(--component-${TComponent}-${TToken}-msContentZoomLimitMin)` | `var(--component-${TComponent}-${TToken}-msContentZoomSnapPoints)` | `var(--component-${TComponent}-${TToken}-msContentZoomSnapType)` | `var(--component-${TComponent}-${TToken}-msContentZooming)` | `var(--component-${TComponent}-${TToken}-msFilter)` | `var(--component-${TComponent}-${TToken}-msFlexDirection)` | `var(--component-${TComponent}-${TToken}-msFlexPositive)` | `var(--component-${TComponent}-${TToken}-msFlowFrom)` | `var(--component-${TComponent}-${TToken}-msFlowInto)` | `var(--component-${TComponent}-${TToken}-msGridColumns)` | `var(--component-${TComponent}-${TToken}-msGridRows)` | `var(--component-${TComponent}-${TToken}-msHighContrastAdjust)` | `var(--component-${TComponent}-${TToken}-msHyphenateLimitChars)` | `var(--component-${TComponent}-${TToken}-msHyphenateLimitLines)` | `var(--component-${TComponent}-${TToken}-msHyphenateLimitZone)` | `var(--component-${TComponent}-${TToken}-msHyphens)` | `var(--component-${TComponent}-${TToken}-msImeAlign)` | `var(--component-${TComponent}-${TToken}-msLineBreak)` | `var(--component-${TComponent}-${TToken}-msOrder)` | `var(--component-${TComponent}-${TToken}-msOverflowStyle)` | `var(--component-${TComponent}-${TToken}-msOverflowX)` | `var(--component-${TComponent}-${TToken}-msOverflowY)` | `var(--component-${TComponent}-${TToken}-msScrollChaining)` | `var(--component-${TComponent}-${TToken}-msScrollLimitXMax)` | `var(--component-${TComponent}-${TToken}-msScrollLimitXMin)` | `var(--component-${TComponent}-${TToken}-msScrollLimitYMax)` | `var(--component-${TComponent}-${TToken}-msScrollLimitYMin)` | `var(--component-${TComponent}-${TToken}-msScrollRails)` | `var(--component-${TComponent}-${TToken}-msScrollSnapPointsX)` | `var(--component-${TComponent}-${TToken}-msScrollSnapPointsY)` | `var(--component-${TComponent}-${TToken}-msScrollSnapType)` | `var(--component-${TComponent}-${TToken}-msScrollTranslation)` | `var(--component-${TComponent}-${TToken}-msScrollbar3dlightColor)` | `var(--component-${TComponent}-${TToken}-msScrollbarArrowColor)` | `var(--component-${TComponent}-${TToken}-msScrollbarBaseColor)` | `var(--component-${TComponent}-${TToken}-msScrollbarDarkshadowColor)` | `var(--component-${TComponent}-${TToken}-msScrollbarFaceColor)` | `var(--component-${TComponent}-${TToken}-msScrollbarHighlightColor)` | `var(--component-${TComponent}-${TToken}-msScrollbarShadowColor)` | `var(--component-${TComponent}-${TToken}-msScrollbarTrackColor)` | `var(--component-${TComponent}-${TToken}-msTextAutospace)` | `var(--component-${TComponent}-${TToken}-msTextCombineHorizontal)` | `var(--component-${TComponent}-${TToken}-msTextOverflow)` | `var(--component-${TComponent}-${TToken}-msTouchAction)` | `var(--component-${TComponent}-${TToken}-msTouchSelect)` | `var(--component-${TComponent}-${TToken}-msTransform)` | `var(--component-${TComponent}-${TToken}-msTransformOrigin)` | `var(--component-${TComponent}-${TToken}-msTransitionDelay)` | `var(--component-${TComponent}-${TToken}-msTransitionDuration)` | `var(--component-${TComponent}-${TToken}-msTransitionProperty)` | `var(--component-${TComponent}-${TToken}-msTransitionTimingFunction)` | `var(--component-${TComponent}-${TToken}-msUserSelect)` | `var(--component-${TComponent}-${TToken}-msWordBreak)` | `var(--component-${TComponent}-${TToken}-msWrapFlow)` | `var(--component-${TComponent}-${TToken}-msWrapMargin)` | `var(--component-${TComponent}-${TToken}-msWrapThrough)` | `var(--component-${TComponent}-${TToken}-msWritingMode)` | `var(--component-${TComponent}-${TToken}-WebkitAlignContent)` | `var(--component-${TComponent}-${TToken}-WebkitAlignItems)` | `var(--component-${TComponent}-${TToken}-WebkitAlignSelf)` | `var(--component-${TComponent}-${TToken}-WebkitAnimationDelay)` | `var(--component-${TComponent}-${TToken}-WebkitAnimationDirection)` | `var(--component-${TComponent}-${TToken}-WebkitAnimationDuration)` | `var(--component-${TComponent}-${TToken}-WebkitAnimationFillMode)` | `var(--component-${TComponent}-${TToken}-WebkitAnimationIterationCount)` | `var(--component-${TComponent}-${TToken}-WebkitAnimationName)` | `var(--component-${TComponent}-${TToken}-WebkitAnimationPlayState)` | `var(--component-${TComponent}-${TToken}-WebkitAnimationTimingFunction)` | `var(--component-${TComponent}-${TToken}-WebkitAppearance)` | `var(--component-${TComponent}-${TToken}-WebkitBackdropFilter)` | `var(--component-${TComponent}-${TToken}-WebkitBackfaceVisibility)` | `var(--component-${TComponent}-${TToken}-WebkitBackgroundClip)` | `var(--component-${TComponent}-${TToken}-WebkitBackgroundOrigin)` | `var(--component-${TComponent}-${TToken}-WebkitBackgroundSize)` | `var(--component-${TComponent}-${TToken}-WebkitBorderBeforeColor)` | `var(--component-${TComponent}-${TToken}-WebkitBorderBeforeStyle)` | `var(--component-${TComponent}-${TToken}-WebkitBorderBeforeWidth)` | `var(--component-${TComponent}-${TToken}-WebkitBorderBottomLeftRadius)` | `var(--component-${TComponent}-${TToken}-WebkitBorderBottomRightRadius)` | `var(--component-${TComponent}-${TToken}-WebkitBorderImageSlice)` | `var(--component-${TComponent}-${TToken}-WebkitBorderTopLeftRadius)` | `var(--component-${TComponent}-${TToken}-WebkitBorderTopRightRadius)` | `var(--component-${TComponent}-${TToken}-WebkitBoxDecorationBreak)` | `var(--component-${TComponent}-${TToken}-WebkitBoxReflect)` | `var(--component-${TComponent}-${TToken}-WebkitBoxShadow)` | `var(--component-${TComponent}-${TToken}-WebkitBoxSizing)` | `var(--component-${TComponent}-${TToken}-WebkitClipPath)` | `var(--component-${TComponent}-${TToken}-WebkitColumnCount)` | `var(--component-${TComponent}-${TToken}-WebkitColumnFill)` | `var(--component-${TComponent}-${TToken}-WebkitColumnRuleColor)` | `var(--component-${TComponent}-${TToken}-WebkitColumnRuleStyle)` | `var(--component-${TComponent}-${TToken}-WebkitColumnRuleWidth)` | `var(--component-${TComponent}-${TToken}-WebkitColumnSpan)` | `var(--component-${TComponent}-${TToken}-WebkitColumnWidth)` | `var(--component-${TComponent}-${TToken}-WebkitFilter)` | `var(--component-${TComponent}-${TToken}-WebkitFlexBasis)` | `var(--component-${TComponent}-${TToken}-WebkitFlexDirection)` | `var(--component-${TComponent}-${TToken}-WebkitFlexGrow)` | `var(--component-${TComponent}-${TToken}-WebkitFlexShrink)` | `var(--component-${TComponent}-${TToken}-WebkitFlexWrap)` | `var(--component-${TComponent}-${TToken}-WebkitFontFeatureSettings)` | `var(--component-${TComponent}-${TToken}-WebkitFontKerning)` | `var(--component-${TComponent}-${TToken}-WebkitFontSmoothing)` | `var(--component-${TComponent}-${TToken}-WebkitFontVariantLigatures)` | `var(--component-${TComponent}-${TToken}-WebkitHyphenateCharacter)` | `var(--component-${TComponent}-${TToken}-WebkitHyphens)` | `var(--component-${TComponent}-${TToken}-WebkitInitialLetter)` | `var(--component-${TComponent}-${TToken}-WebkitJustifyContent)` | `var(--component-${TComponent}-${TToken}-WebkitLineBreak)` | `var(--component-${TComponent}-${TToken}-WebkitLineClamp)` | `var(--component-${TComponent}-${TToken}-WebkitMarginEnd)` | `var(--component-${TComponent}-${TToken}-WebkitMarginStart)` | `var(--component-${TComponent}-${TToken}-WebkitMaskAttachment)` | `var(--component-${TComponent}-${TToken}-WebkitMaskBoxImageOutset)` | `var(--component-${TComponent}-${TToken}-WebkitMaskBoxImageRepeat)` | `var(--component-${TComponent}-${TToken}-WebkitMaskBoxImageSlice)` | `var(--component-${TComponent}-${TToken}-WebkitMaskBoxImageSource)` | `var(--component-${TComponent}-${TToken}-WebkitMaskBoxImageWidth)` | `var(--component-${TComponent}-${TToken}-WebkitMaskClip)` | `var(--component-${TComponent}-${TToken}-WebkitMaskComposite)` | `var(--component-${TComponent}-${TToken}-WebkitMaskImage)` | `var(--component-${TComponent}-${TToken}-WebkitMaskOrigin)` | `var(--component-${TComponent}-${TToken}-WebkitMaskPosition)` | `var(--component-${TComponent}-${TToken}-WebkitMaskPositionX)` | `var(--component-${TComponent}-${TToken}-WebkitMaskPositionY)` | `var(--component-${TComponent}-${TToken}-WebkitMaskRepeat)` | `var(--component-${TComponent}-${TToken}-WebkitMaskRepeatX)` | `var(--component-${TComponent}-${TToken}-WebkitMaskRepeatY)` | `var(--component-${TComponent}-${TToken}-WebkitMaskSize)` | `var(--component-${TComponent}-${TToken}-WebkitMaxInlineSize)` | `var(--component-${TComponent}-${TToken}-WebkitOrder)` | `var(--component-${TComponent}-${TToken}-WebkitOverflowScrolling)` | `var(--component-${TComponent}-${TToken}-WebkitPaddingEnd)` | `var(--component-${TComponent}-${TToken}-WebkitPaddingStart)` | `var(--component-${TComponent}-${TToken}-WebkitPerspective)` | `var(--component-${TComponent}-${TToken}-WebkitPerspectiveOrigin)` | `var(--component-${TComponent}-${TToken}-WebkitPrintColorAdjust)` | `var(--component-${TComponent}-${TToken}-WebkitRubyPosition)` | `var(--component-${TComponent}-${TToken}-WebkitScrollSnapType)` | `var(--component-${TComponent}-${TToken}-WebkitShapeMargin)` | `var(--component-${TComponent}-${TToken}-WebkitTapHighlightColor)` | `var(--component-${TComponent}-${TToken}-WebkitTextCombine)` | `var(--component-${TComponent}-${TToken}-WebkitTextDecorationColor)` | `var(--component-${TComponent}-${TToken}-WebkitTextDecorationLine)` | `var(--component-${TComponent}-${TToken}-WebkitTextDecorationSkip)` | `var(--component-${TComponent}-${TToken}-WebkitTextDecorationStyle)` | `var(--component-${TComponent}-${TToken}-WebkitTextEmphasisColor)` | `var(--component-${TComponent}-${TToken}-WebkitTextEmphasisPosition)` | `var(--component-${TComponent}-${TToken}-WebkitTextEmphasisStyle)` | `var(--component-${TComponent}-${TToken}-WebkitTextFillColor)` | `var(--component-${TComponent}-${TToken}-WebkitTextOrientation)` | `var(--component-${TComponent}-${TToken}-WebkitTextSizeAdjust)` | `var(--component-${TComponent}-${TToken}-WebkitTextStrokeColor)` | `var(--component-${TComponent}-${TToken}-WebkitTextStrokeWidth)` | `var(--component-${TComponent}-${TToken}-WebkitTextUnderlinePosition)` | `var(--component-${TComponent}-${TToken}-WebkitTouchCallout)` | `var(--component-${TComponent}-${TToken}-WebkitTransform)` | `var(--component-${TComponent}-${TToken}-WebkitTransformOrigin)` | `var(--component-${TComponent}-${TToken}-WebkitTransformStyle)` | `var(--component-${TComponent}-${TToken}-WebkitTransitionDelay)` | `var(--component-${TComponent}-${TToken}-WebkitTransitionDuration)` | `var(--component-${TComponent}-${TToken}-WebkitTransitionProperty)` | `var(--component-${TComponent}-${TToken}-WebkitTransitionTimingFunction)` | `var(--component-${TComponent}-${TToken}-WebkitUserModify)` | `var(--component-${TComponent}-${TToken}-WebkitUserSelect)` | `var(--component-${TComponent}-${TToken}-WebkitWritingMode)` | `var(--component-${TComponent}-${TToken}-MozAnimation)` | `var(--component-${TComponent}-${TToken}-MozBorderImage)` | `var(--component-${TComponent}-${TToken}-MozColumnRule)` | `var(--component-${TComponent}-${TToken}-MozColumns)` | `var(--component-${TComponent}-${TToken}-MozTransition)` | `var(--component-${TComponent}-${TToken}-msContentZoomLimit)` | `var(--component-${TComponent}-${TToken}-msContentZoomSnap)` | `var(--component-${TComponent}-${TToken}-msFlex)` | `var(--component-${TComponent}-${TToken}-msScrollLimit)` | `var(--component-${TComponent}-${TToken}-msScrollSnapX)` | `var(--component-${TComponent}-${TToken}-msScrollSnapY)` | `var(--component-${TComponent}-${TToken}-msTransition)` | `var(--component-${TComponent}-${TToken}-WebkitAnimation)` | `var(--component-${TComponent}-${TToken}-WebkitBorderBefore)` | `var(--component-${TComponent}-${TToken}-WebkitBorderImage)` | `var(--component-${TComponent}-${TToken}-WebkitBorderRadius)` | `var(--component-${TComponent}-${TToken}-WebkitColumnRule)` | `var(--component-${TComponent}-${TToken}-WebkitColumns)` | `var(--component-${TComponent}-${TToken}-WebkitFlex)` | `var(--component-${TComponent}-${TToken}-WebkitFlexFlow)` | `var(--component-${TComponent}-${TToken}-WebkitMask)` | `var(--component-${TComponent}-${TToken}-WebkitMaskBoxImage)` | `var(--component-${TComponent}-${TToken}-WebkitTextEmphasis)` | `var(--component-${TComponent}-${TToken}-WebkitTextStroke)` | `var(--component-${TComponent}-${TToken}-WebkitTransition)` | `var(--component-${TComponent}-${TToken}-azimuth)` | `var(--component-${TComponent}-${TToken}-boxAlign)` | `var(--component-${TComponent}-${TToken}-boxDirection)` | `var(--component-${TComponent}-${TToken}-boxFlex)` | `var(--component-${TComponent}-${TToken}-boxFlexGroup)` | `var(--component-${TComponent}-${TToken}-boxLines)` | `var(--component-${TComponent}-${TToken}-boxOrdinalGroup)` | `var(--component-${TComponent}-${TToken}-boxOrient)` | `var(--component-${TComponent}-${TToken}-boxPack)` | `var(--component-${TComponent}-${TToken}-clip)` | `var(--component-${TComponent}-${TToken}-gridColumnGap)` | `var(--component-${TComponent}-${TToken}-gridGap)` | `var(--component-${TComponent}-${TToken}-gridRowGap)` | `var(--component-${TComponent}-${TToken}-imeMode)` | `var(--component-${TComponent}-${TToken}-offsetBlock)` | `var(--component-${TComponent}-${TToken}-offsetBlockEnd)` | `var(--component-${TComponent}-${TToken}-offsetBlockStart)` | `var(--component-${TComponent}-${TToken}-offsetInline)` | `var(--component-${TComponent}-${TToken}-offsetInlineEnd)` | `var(--component-${TComponent}-${TToken}-offsetInlineStart)` | `var(--component-${TComponent}-${TToken}-scrollSnapCoordinate)` | `var(--component-${TComponent}-${TToken}-scrollSnapDestination)` | `var(--component-${TComponent}-${TToken}-scrollSnapPointsX)` | `var(--component-${TComponent}-${TToken}-scrollSnapPointsY)` | `var(--component-${TComponent}-${TToken}-scrollSnapTypeX)` | `var(--component-${TComponent}-${TToken}-scrollSnapTypeY)` | `var(--component-${TComponent}-${TToken}-KhtmlBoxAlign)` | `var(--component-${TComponent}-${TToken}-KhtmlBoxDirection)` | `var(--component-${TComponent}-${TToken}-KhtmlBoxFlex)` | `var(--component-${TComponent}-${TToken}-KhtmlBoxFlexGroup)` | `var(--component-${TComponent}-${TToken}-KhtmlBoxLines)` | `var(--component-${TComponent}-${TToken}-KhtmlBoxOrdinalGroup)` | `var(--component-${TComponent}-${TToken}-KhtmlBoxOrient)` | `var(--component-${TComponent}-${TToken}-KhtmlBoxPack)` | `var(--component-${TComponent}-${TToken}-KhtmlLineBreak)` | `var(--component-${TComponent}-${TToken}-KhtmlOpacity)` | `var(--component-${TComponent}-${TToken}-KhtmlUserSelect)` | `var(--component-${TComponent}-${TToken}-MozBackgroundClip)` | `var(--component-${TComponent}-${TToken}-MozBackgroundInlinePolicy)` | `var(--component-${TComponent}-${TToken}-MozBackgroundOrigin)` | `var(--component-${TComponent}-${TToken}-MozBackgroundSize)` | `var(--component-${TComponent}-${TToken}-MozBorderRadius)` | `var(--component-${TComponent}-${TToken}-MozBorderRadiusBottomleft)` | `var(--component-${TComponent}-${TToken}-MozBorderRadiusBottomright)` | `var(--component-${TComponent}-${TToken}-MozBorderRadiusTopleft)` | `var(--component-${TComponent}-${TToken}-MozBorderRadiusTopright)` | `var(--component-${TComponent}-${TToken}-MozBoxAlign)` | `var(--component-${TComponent}-${TToken}-MozBoxDirection)` | `var(--component-${TComponent}-${TToken}-MozBoxFlex)` | `var(--component-${TComponent}-${TToken}-MozBoxOrdinalGroup)` | `var(--component-${TComponent}-${TToken}-MozBoxOrient)` | `var(--component-${TComponent}-${TToken}-MozBoxPack)` | `var(--component-${TComponent}-${TToken}-MozBoxShadow)` | `var(--component-${TComponent}-${TToken}-MozFloatEdge)` | `var(--component-${TComponent}-${TToken}-MozForceBrokenImageIcon)` | `var(--component-${TComponent}-${TToken}-MozOpacity)` | `var(--component-${TComponent}-${TToken}-MozOutline)` | `var(--component-${TComponent}-${TToken}-MozOutlineColor)` | `var(--component-${TComponent}-${TToken}-MozOutlineRadius)` | `var(--component-${TComponent}-${TToken}-MozOutlineRadiusBottomleft)` | `var(--component-${TComponent}-${TToken}-MozOutlineRadiusBottomright)` | `var(--component-${TComponent}-${TToken}-MozOutlineRadiusTopleft)` | `var(--component-${TComponent}-${TToken}-MozOutlineRadiusTopright)` | `var(--component-${TComponent}-${TToken}-MozOutlineStyle)` | `var(--component-${TComponent}-${TToken}-MozOutlineWidth)` | `var(--component-${TComponent}-${TToken}-MozTextAlignLast)` | `var(--component-${TComponent}-${TToken}-MozTextDecorationColor)` | `var(--component-${TComponent}-${TToken}-MozTextDecorationLine)` | `var(--component-${TComponent}-${TToken}-MozTextDecorationStyle)` | `var(--component-${TComponent}-${TToken}-MozUserInput)` | `var(--component-${TComponent}-${TToken}-msImeMode)` | `var(--component-${TComponent}-${TToken}-OAnimation)` | `var(--component-${TComponent}-${TToken}-OAnimationDelay)` | `var(--component-${TComponent}-${TToken}-OAnimationDirection)` | `var(--component-${TComponent}-${TToken}-OAnimationDuration)` | `var(--component-${TComponent}-${TToken}-OAnimationFillMode)` | `var(--component-${TComponent}-${TToken}-OAnimationIterationCount)` | `var(--component-${TComponent}-${TToken}-OAnimationName)` | `var(--component-${TComponent}-${TToken}-OAnimationPlayState)` | `var(--component-${TComponent}-${TToken}-OAnimationTimingFunction)` | `var(--component-${TComponent}-${TToken}-OBackgroundSize)` | `var(--component-${TComponent}-${TToken}-OBorderImage)` | `var(--component-${TComponent}-${TToken}-OObjectFit)` | `var(--component-${TComponent}-${TToken}-OObjectPosition)` | `var(--component-${TComponent}-${TToken}-OTabSize)` | `var(--component-${TComponent}-${TToken}-OTextOverflow)` | `var(--component-${TComponent}-${TToken}-OTransform)` | `var(--component-${TComponent}-${TToken}-OTransformOrigin)` | `var(--component-${TComponent}-${TToken}-OTransition)` | `var(--component-${TComponent}-${TToken}-OTransitionDelay)` | `var(--component-${TComponent}-${TToken}-OTransitionDuration)` | `var(--component-${TComponent}-${TToken}-OTransitionProperty)` | `var(--component-${TComponent}-${TToken}-OTransitionTimingFunction)` | `var(--component-${TComponent}-${TToken}-WebkitBoxAlign)` | `var(--component-${TComponent}-${TToken}-WebkitBoxDirection)` | `var(--component-${TComponent}-${TToken}-WebkitBoxFlex)` | `var(--component-${TComponent}-${TToken}-WebkitBoxFlexGroup)` | `var(--component-${TComponent}-${TToken}-WebkitBoxLines)` | `var(--component-${TComponent}-${TToken}-WebkitBoxOrdinalGroup)` | `var(--component-${TComponent}-${TToken}-WebkitBoxOrient)` | `var(--component-${TComponent}-${TToken}-WebkitBoxPack)` | `var(--component-${TComponent}-${TToken}-WebkitScrollSnapPointsX)` | `var(--component-${TComponent}-${TToken}-WebkitScrollSnapPointsY)` | `var(--component-${TComponent}-${TToken}-alignmentBaseline)` | `var(--component-${TComponent}-${TToken}-baselineShift)` | `var(--component-${TComponent}-${TToken}-clipRule)` | `var(--component-${TComponent}-${TToken}-colorInterpolation)` | `var(--component-${TComponent}-${TToken}-colorRendering)` | `var(--component-${TComponent}-${TToken}-dominantBaseline)` | `var(--component-${TComponent}-${TToken}-fill)` | `var(--component-${TComponent}-${TToken}-fillOpacity)` | `var(--component-${TComponent}-${TToken}-fillRule)` | `var(--component-${TComponent}-${TToken}-floodColor)` | `var(--component-${TComponent}-${TToken}-floodOpacity)` | `var(--component-${TComponent}-${TToken}-glyphOrientationVertical)` | `var(--component-${TComponent}-${TToken}-lightingColor)` | `var(--component-${TComponent}-${TToken}-marker)` | `var(--component-${TComponent}-${TToken}-markerEnd)` | `var(--component-${TComponent}-${TToken}-markerMid)` | `var(--component-${TComponent}-${TToken}-markerStart)` | `var(--component-${TComponent}-${TToken}-shapeRendering)` | `var(--component-${TComponent}-${TToken}-stopColor)` | `var(--component-${TComponent}-${TToken}-stopOpacity)` | `var(--component-${TComponent}-${TToken}-stroke)` | `var(--component-${TComponent}-${TToken}-strokeDasharray)` | `var(--component-${TComponent}-${TToken}-strokeDashoffset)` | `var(--component-${TComponent}-${TToken}-strokeLinecap)` | `var(--component-${TComponent}-${TToken}-strokeLinejoin)` | `var(--component-${TComponent}-${TToken}-strokeMiterlimit)` | `var(--component-${TComponent}-${TToken}-strokeOpacity)` | `var(--component-${TComponent}-${TToken}-strokeWidth)` | `var(--component-${TComponent}-${TToken}-textAnchor)` | `var(--component-${TComponent}-${TToken}-vectorEffect)`;
-/**
- * Get the full CSSProperties for a component token.
- * Replaces the css values from the ComponentTokenDefinition with the corresponding css variable.
- *
- * @param {ComponentNames} component The name of the component
- * @param {ComponentTokenNames} token The name of the token
- * @param {CSSProperties} tokenObject The CSSProperties for the component token
- * @returns {*}  {CSSProperties} CSSProperties converted to use the css variable for the correstonding token
- */
-export declare const componentTokenToCSSProperties: <TComponent extends ComponentNames, TToken extends ComponentTokenNames<TComponent>>(component: TComponent, token: TToken, tokenObject: CSSProperties) => Record<string, string>;
-/**
- * Generate the full object og componentToken rules for the Tailwind plugin.
- */
-export declare const getAllComponentTokenRules: (componentDefinitions: ComponentTokenDefinitions) => CSSRuleObject;

package/src/plugin.d.ts DELETED Viewed

@@ -1,4 +0,0 @@
-export declare const ComponentTokensPlugin: {
-    handler: import("tailwindcss/types/config").PluginCreator;
-    config?: Partial<import("tailwindcss/types/config").Config>;
-};