@inversestudio/design-tokens 1.0.1 → 1.0.3

package/dist/css/tokens.css

@@ -106,6 +106,7 @@
   --ids-color-element-secondary-pressed: #d1def8;
   --ids-color-element-secondary-onsecondary: #2d2f35;
   --ids-color-element-disabled: #adaeb3;
+  --ids-color-element-disabledmuted: #00000000;
   --ids-color-element-ondisabled: #707784;
   --ids-color-border-primary: #2d2f35;
   --ids-color-border-disabled: #adaeb3;

package/dist/css/tokens.dark.css

@@ -58,11 +58,11 @@
   --ids-core-color-green-950: #043b2c;
   --ids-core-color-green-1000: #022419;
   --ids-core-color-transparent: #00000000;
+  --ids-core-sizing-rem: 16px;
+  --ids-core-sizing-base: 16px;
   --ids-core-font-size-base: 16px;
   --ids-core-font: Tomato Grotesk;
   --ids-core-lineheight-base: 16px;
-  --ids-core-sizing-rem: 16px;
-  --ids-core-sizing-base: 16px;
   --ids-core-borderradius-base: 16px;
   --ids-core-borderwidth-slim: 1px;
   --ids-core-borderwidth-thick: 2px;
@@ -90,34 +90,27 @@
   --ids-dimension-icon-1x: 16px;
   --ids-dimension-icon-1-25x: 20px;
   --ids-dimension-icon-1-5x: 24px;
+  --ids-color-element-primary-default: #2d2f35;
+  --ids-color-element-primary-hover: #4d5057;
+  --ids-color-element-primary-pressed: #101114;
+  --ids-color-element-primary-onprimary: #ffffff;
+  --ids-color-element-secondary-default: #00000000;
+  --ids-color-element-secondary-hover: #e6edfb;
+  --ids-color-element-secondary-pressed: #d1def8;
+  --ids-color-element-secondary-onsecondary: #2d2f35;
+  --ids-color-element-disabled: #adaeb3;
+  --ids-color-element-disabledmuted: #00000000;
+  --ids-color-element-ondisabled: #707784;
+  --ids-color-border-primary: #2d2f35;
+  --ids-color-border-disabled: #adaeb3;
+  --ids-color-border-muted: #e0e1e4;
+  --ids-color-border-subtle: #f5f5f8;
+  --ids-color-border-focus: #7eaaff;
   --ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
   --ids-borderradius-0-25x: 4px;
   --ids-borderradius-full: 1600px;
   --ids-border-focused: 2px solid #7eaaff;
-  --ids-border-primary: 2px solid #e0e1e4;
-  --ids-border-disabled: 2px solid #707784;
+  --ids-border-primary: 2px solid #2d2f35;
+  --ids-border-disabled: 2px solid #adaeb3;
   --ids-border-transparent: 2px solid #00000000;
-  --ids-color-element-primary-default: #ffffff;
-  --ids-color-element-primary-hover: #fafafb;
-  --ids-color-element-primary-active: #f5f5f8;
-  --ids-color-element-primary-onprimary: #101114;
-  --ids-color-element-secondary-default: #00000000;
-  --ids-color-element-secondary-hover: #142442;
-  --ids-color-element-secondary-active: #1e3560;
-  --ids-color-element-secondary-onsecondary: #ffffff;
-  --ids-color-element-primaryinverted-default: #101114;
-  --ids-color-element-primaryinverted-hover: #2d2f35;
-  --ids-color-element-primaryinverted-active: #4d5057;
-  --ids-color-element-primaryinverted-onprimaryaccent: #ffffff;
-  --ids-color-element-primaryaccentinverted-default: #ffffff;
-  --ids-color-element-primaryaccentinverted-hover: #fafafb;
-  --ids-color-element-primaryaccentinverted-active: #f5f5f8;
-  --ids-color-element-primaryaccentinverted-onprimaryaccentinverted: #101114;
-  --ids-color-element-disabled: #707784;
-  --ids-color-element-ondisabled: #adaeb3;
-  --ids-color-border-primary: #e0e1e4;
-  --ids-color-border-disabled: #707784;
-  --ids-color-border-muted: #8e9099;
-  --ids-color-border-subtle: #707784;
-  --ids-color-border-focus: #7eaaff;
 }

package/dist/css/tokens.light.css

@@ -106,6 +106,7 @@
   --ids-color-element-secondary-pressed: #d1def8;
   --ids-color-element-secondary-onsecondary: #2d2f35;
   --ids-color-element-disabled: #adaeb3;
+  --ids-color-element-disabledmuted: #00000000;
   --ids-color-element-ondisabled: #707784;
   --ids-color-border-primary: #2d2f35;
   --ids-color-border-disabled: #adaeb3;

package/dist/esm/tokens.dark.js

@@ -2,25 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
-export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
-export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
-export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
-export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
-export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
-export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
-export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
-export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
-export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
-export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
-export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
-export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
-export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
-export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
-export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
-export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
-export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
-export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
 export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
 export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
 export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
@@ -70,14 +51,49 @@ export const idsCoreColorGreen900 = "#064e3b"; // PRIMITIVE - Darker green. Do N
 export const idsCoreColorGreen950 = "#043b2c"; // PRIMITIVE - Near-black green. Do NOT use directly on components.
 export const idsCoreColorGreen1000 = "#022419"; // PRIMITIVE - Darkest green. Do NOT use directly on components.
 export const idsCoreColorTransparent = "#00000000"; // PRIMITIVE - Fully transparent. Do NOT use directly on components.
+export const idsCoreSizingRem = "16px"; // PRIMITIVE - Base scale unit (16px). All size tokens derive from this. Changing this scales the entire system. Do NOT use directly on components.
+export const idsCoreSizingBase = "16px";
 export const idsCoreFontSizeBase = "16px"; // PRIMITIVE - Base font size (1x REM = 16px). Do NOT use directly on components.
 export const idsCoreFont = "Tomato Grotesk"; // PRIMITIVE - Primary font family. Do NOT use directly on components.
 export const idsCoreLineheightBase = "16px"; // PRIMITIVE - Base line height (1x REM = 16px). Do NOT use directly on components.
-export const idsCoreSizingRem = "16px"; // PRIMITIVE - Base scale unit (16px). All size tokens derive from this. Changing this scales the entire system. Do NOT use directly on components.
-export const idsCoreSizingBase = "16px";
 export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
 export const idsCoreBorderwidthSlim = "1px";
 export const idsCoreBorderwidthThick = "2px";
+export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
+export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
+export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
+export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
+export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
+export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
+export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
+export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
+export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
+export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
+export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
+export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
+export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
+export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
+export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
+export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
+export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
+export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
+export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
+export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
+export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
+export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
+export const idsColorElementPrimaryOnprimary = "#ffffff"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
+export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Background color for secondary element resting state. Use for: ghost button background.
+export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
+export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
+export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
+export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
+export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
+export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
+export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
+export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
+export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
+export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
+export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
 export const idsTypographyLabel1x = {
   fontFamily: "Tomato Grotesk",
   fontSize: "16px",
@@ -92,12 +108,12 @@ export const idsBorderFocused = {
   style: "solid",
 }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
 export const idsBorderPrimary = {
-  color: "#e0e1e4",
+  color: "#2d2f35",
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
 export const idsBorderDisabled = {
-  color: "#707784",
+  color: "#adaeb3",
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
@@ -106,27 +122,3 @@ export const idsBorderTransparent = {
   width: "2px",
   style: "solid",
 };
-export const idsColorElementPrimaryDefault = "#ffffff"; // SEMANTIC - Primary element resting state (dark theme). Use for: primary button background, main CTA.
-export const idsColorElementPrimaryHover = "#fafafb"; // SEMANTIC - Primary element hover state (dark theme). Use for: primary button hover.
-export const idsColorElementPrimaryActive = "#f5f5f8"; // SEMANTIC - Primary element pressed state (dark theme). Use for: primary button active.
-export const idsColorElementPrimaryOnprimary = "#101114"; // SEMANTIC - Text/icon ON primary backgrounds (dark theme). Use for: primary button text.
-export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Secondary element resting state (dark theme). Use for: ghost button background.
-export const idsColorElementSecondaryHover = "#142442"; // SEMANTIC - Secondary element hover state (dark theme). Use for: ghost button hover.
-export const idsColorElementSecondaryActive = "#1e3560"; // SEMANTIC - Secondary element pressed state (dark theme). Use for: ghost button active.
-export const idsColorElementSecondaryOnsecondary = "#ffffff"; // SEMANTIC - Text/icon ON secondary backgrounds (dark theme). Use for: ghost button text.
-export const idsColorElementPrimaryinvertedDefault = "#101114"; // SEMANTIC - Inverted primary resting state (dark theme). Use for: buttons on dark backgrounds.
-export const idsColorElementPrimaryinvertedHover = "#2d2f35"; // SEMANTIC - Inverted primary hover state (dark theme).
-export const idsColorElementPrimaryinvertedActive = "#4d5057"; // SEMANTIC - Inverted primary pressed state (dark theme).
-export const idsColorElementPrimaryinvertedOnprimaryaccent = "#ffffff"; // SEMANTIC - Text/icon ON inverted primary backgrounds (dark theme).
-export const idsColorElementPrimaryaccentinvertedDefault = "#ffffff"; // SEMANTIC - Accent-inverted primary resting state (dark theme).
-export const idsColorElementPrimaryaccentinvertedHover = "#fafafb"; // SEMANTIC - Accent-inverted primary hover state (dark theme).
-export const idsColorElementPrimaryaccentinvertedActive = "#f5f5f8"; // SEMANTIC - Accent-inverted primary pressed state (dark theme).
-export const idsColorElementPrimaryaccentinvertedOnprimaryaccentinverted =
-  "#101114"; // SEMANTIC - Text/icon ON accent-inverted surfaces (dark theme).
-export const idsColorElementDisabled = "#707784"; // SEMANTIC - Disabled element background (dark theme). Use for: all disabled controls.
-export const idsColorElementOndisabled = "#adaeb3"; // SEMANTIC - Text/icon ON disabled backgrounds (dark theme).
-export const idsColorBorderPrimary = "#e0e1e4"; // SEMANTIC - Primary border (dark theme). Use for: input borders, card outlines.
-export const idsColorBorderDisabled = "#707784"; // SEMANTIC - Disabled border (dark theme). Use for: disabled inputs.
-export const idsColorBorderMuted = "#8e9099"; // SEMANTIC - Muted border (dark theme). Use for: secondary containers, tables.
-export const idsColorBorderSubtle = "#707784"; // SEMANTIC - Subtle border (dark theme). Use for: hairline dividers.
-export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color (dark theme). Use for: keyboard focus on all interactive elements.

package/dist/esm/tokens.js

@@ -115,6 +115,7 @@ export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background
 export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
 export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
 export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
+export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
 export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
 export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.

package/dist/esm/tokens.light.js

@@ -115,6 +115,7 @@ export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background
 export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
 export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
 export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
+export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
 export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
 export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.

package/dist/js/tokens.dark.js

@@ -2,25 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
-export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
-export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
-export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
-export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
-export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
-export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
-export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
-export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
-export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
-export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
-export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
-export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
-export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
-export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
-export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
-export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
-export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
-export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
 export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
 export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
 export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
@@ -70,14 +51,49 @@ export const idsCoreColorGreen900 = "#064e3b"; // PRIMITIVE - Darker green. Do N
 export const idsCoreColorGreen950 = "#043b2c"; // PRIMITIVE - Near-black green. Do NOT use directly on components.
 export const idsCoreColorGreen1000 = "#022419"; // PRIMITIVE - Darkest green. Do NOT use directly on components.
 export const idsCoreColorTransparent = "#00000000"; // PRIMITIVE - Fully transparent. Do NOT use directly on components.
+export const idsCoreSizingRem = "16px"; // PRIMITIVE - Base scale unit (16px). All size tokens derive from this. Changing this scales the entire system. Do NOT use directly on components.
+export const idsCoreSizingBase = "16px";
 export const idsCoreFontSizeBase = "16px"; // PRIMITIVE - Base font size (1x REM = 16px). Do NOT use directly on components.
 export const idsCoreFont = "Tomato Grotesk"; // PRIMITIVE - Primary font family. Do NOT use directly on components.
 export const idsCoreLineheightBase = "16px"; // PRIMITIVE - Base line height (1x REM = 16px). Do NOT use directly on components.
-export const idsCoreSizingRem = "16px"; // PRIMITIVE - Base scale unit (16px). All size tokens derive from this. Changing this scales the entire system. Do NOT use directly on components.
-export const idsCoreSizingBase = "16px";
 export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
 export const idsCoreBorderwidthSlim = "1px";
 export const idsCoreBorderwidthThick = "2px";
+export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
+export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
+export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
+export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
+export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
+export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
+export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
+export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
+export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
+export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
+export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
+export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
+export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
+export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
+export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
+export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
+export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
+export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
+export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
+export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
+export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
+export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
+export const idsColorElementPrimaryOnprimary = "#ffffff"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
+export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Background color for secondary element resting state. Use for: ghost button background.
+export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
+export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
+export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
+export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
+export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
+export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
+export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
+export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
+export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
+export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
+export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
 export const idsTypographyLabel1x = {
   fontFamily: "Tomato Grotesk",
   fontSize: "16px",
@@ -92,12 +108,12 @@ export const idsBorderFocused = {
   style: "solid",
 }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
 export const idsBorderPrimary = {
-  color: "#e0e1e4",
+  color: "#2d2f35",
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
 export const idsBorderDisabled = {
-  color: "#707784",
+  color: "#adaeb3",
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
@@ -106,27 +122,3 @@ export const idsBorderTransparent = {
   width: "2px",
   style: "solid",
 };
-export const idsColorElementPrimaryDefault = "#ffffff"; // SEMANTIC - Primary element resting state (dark theme). Use for: primary button background, main CTA.
-export const idsColorElementPrimaryHover = "#fafafb"; // SEMANTIC - Primary element hover state (dark theme). Use for: primary button hover.
-export const idsColorElementPrimaryActive = "#f5f5f8"; // SEMANTIC - Primary element pressed state (dark theme). Use for: primary button active.
-export const idsColorElementPrimaryOnprimary = "#101114"; // SEMANTIC - Text/icon ON primary backgrounds (dark theme). Use for: primary button text.
-export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Secondary element resting state (dark theme). Use for: ghost button background.
-export const idsColorElementSecondaryHover = "#142442"; // SEMANTIC - Secondary element hover state (dark theme). Use for: ghost button hover.
-export const idsColorElementSecondaryActive = "#1e3560"; // SEMANTIC - Secondary element pressed state (dark theme). Use for: ghost button active.
-export const idsColorElementSecondaryOnsecondary = "#ffffff"; // SEMANTIC - Text/icon ON secondary backgrounds (dark theme). Use for: ghost button text.
-export const idsColorElementPrimaryinvertedDefault = "#101114"; // SEMANTIC - Inverted primary resting state (dark theme). Use for: buttons on dark backgrounds.
-export const idsColorElementPrimaryinvertedHover = "#2d2f35"; // SEMANTIC - Inverted primary hover state (dark theme).
-export const idsColorElementPrimaryinvertedActive = "#4d5057"; // SEMANTIC - Inverted primary pressed state (dark theme).
-export const idsColorElementPrimaryinvertedOnprimaryaccent = "#ffffff"; // SEMANTIC - Text/icon ON inverted primary backgrounds (dark theme).
-export const idsColorElementPrimaryaccentinvertedDefault = "#ffffff"; // SEMANTIC - Accent-inverted primary resting state (dark theme).
-export const idsColorElementPrimaryaccentinvertedHover = "#fafafb"; // SEMANTIC - Accent-inverted primary hover state (dark theme).
-export const idsColorElementPrimaryaccentinvertedActive = "#f5f5f8"; // SEMANTIC - Accent-inverted primary pressed state (dark theme).
-export const idsColorElementPrimaryaccentinvertedOnprimaryaccentinverted =
-  "#101114"; // SEMANTIC - Text/icon ON accent-inverted surfaces (dark theme).
-export const idsColorElementDisabled = "#707784"; // SEMANTIC - Disabled element background (dark theme). Use for: all disabled controls.
-export const idsColorElementOndisabled = "#adaeb3"; // SEMANTIC - Text/icon ON disabled backgrounds (dark theme).
-export const idsColorBorderPrimary = "#e0e1e4"; // SEMANTIC - Primary border (dark theme). Use for: input borders, card outlines.
-export const idsColorBorderDisabled = "#707784"; // SEMANTIC - Disabled border (dark theme). Use for: disabled inputs.
-export const idsColorBorderMuted = "#8e9099"; // SEMANTIC - Muted border (dark theme). Use for: secondary containers, tables.
-export const idsColorBorderSubtle = "#707784"; // SEMANTIC - Subtle border (dark theme). Use for: hairline dividers.
-export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color (dark theme). Use for: keyboard focus on all interactive elements.

package/dist/js/tokens.js

@@ -115,6 +115,7 @@ export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background
 export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
 export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
 export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
+export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
 export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
 export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.

package/dist/js/tokens.light.js

@@ -115,6 +115,7 @@ export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background
 export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
 export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
 export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
+export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
 export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
 export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.

package/dist/json/tokens.dark.json

@@ -1,23 +1,4 @@
 {
-  "idsSpacing013x": "2px",
-  "idsSpacing025x": "4px",
-  "idsSpacing038x": "6px",
-  "idsSpacing05x": "8px",
-  "idsSpacing075x": "12px",
-  "idsSpacing1x": "16px",
-  "idsSpacing125x": "20px",
-  "idsSpacing15x": "24px",
-  "idsSpacing2x": "32px",
-  "idsSpacing25x": "40px",
-  "idsDimensionElement1x": "16px",
-  "idsDimensionElement15x": "24px",
-  "idsDimensionElement2x": "32px",
-  "idsDimensionElement3x": "48px",
-  "idsDimensionElement35x": "56px",
-  "idsDimensionElement45x": "72px",
-  "idsDimensionIcon1x": "16px",
-  "idsDimensionIcon125x": "20px",
-  "idsDimensionIcon15x": "24px",
   "idsCoreColorNeutral50": "#ffffff",
   "idsCoreColorNeutral100": "#fafafb",
   "idsCoreColorNeutral200": "#f5f5f8",
@@ -67,14 +48,49 @@
   "idsCoreColorGreen950": "#043b2c",
   "idsCoreColorGreen1000": "#022419",
   "idsCoreColorTransparent": "#00000000",
+  "idsCoreSizingRem": "16px",
+  "idsCoreSizingBase": "16px",
   "idsCoreFontSizeBase": "16px",
   "idsCoreFont": "Tomato Grotesk",
   "idsCoreLineheightBase": "16px",
-  "idsCoreSizingRem": "16px",
-  "idsCoreSizingBase": "16px",
   "idsCoreBorderradiusBase": "16px",
   "idsCoreBorderwidthSlim": "1px",
   "idsCoreBorderwidthThick": "2px",
+  "idsSpacing013x": "2px",
+  "idsSpacing025x": "4px",
+  "idsSpacing038x": "6px",
+  "idsSpacing05x": "8px",
+  "idsSpacing075x": "12px",
+  "idsSpacing1x": "16px",
+  "idsSpacing125x": "20px",
+  "idsSpacing15x": "24px",
+  "idsSpacing2x": "32px",
+  "idsSpacing25x": "40px",
+  "idsDimensionElement1x": "16px",
+  "idsDimensionElement15x": "24px",
+  "idsDimensionElement2x": "32px",
+  "idsDimensionElement3x": "48px",
+  "idsDimensionElement35x": "56px",
+  "idsDimensionElement45x": "72px",
+  "idsDimensionIcon1x": "16px",
+  "idsDimensionIcon125x": "20px",
+  "idsDimensionIcon15x": "24px",
+  "idsColorElementPrimaryDefault": "#2d2f35",
+  "idsColorElementPrimaryHover": "#4d5057",
+  "idsColorElementPrimaryPressed": "#101114",
+  "idsColorElementPrimaryOnprimary": "#ffffff",
+  "idsColorElementSecondaryDefault": "#00000000",
+  "idsColorElementSecondaryHover": "#e6edfb",
+  "idsColorElementSecondaryPressed": "#d1def8",
+  "idsColorElementSecondaryOnsecondary": "#2d2f35",
+  "idsColorElementDisabled": "#adaeb3",
+  "idsColorElementDisabledmuted": "#00000000",
+  "idsColorElementOndisabled": "#707784",
+  "idsColorBorderPrimary": "#2d2f35",
+  "idsColorBorderDisabled": "#adaeb3",
+  "idsColorBorderMuted": "#e0e1e4",
+  "idsColorBorderSubtle": "#f5f5f8",
+  "idsColorBorderFocus": "#7eaaff",
   "idsTypographyLabel1x": {
     "fontFamily": "Tomato Grotesk",
     "fontSize": "16px",
@@ -89,12 +105,12 @@
     "style": "solid"
   },
   "idsBorderPrimary": {
-    "color": "#e0e1e4",
+    "color": "#2d2f35",
     "width": "2px",
     "style": "solid"
   },
   "idsBorderDisabled": {
-    "color": "#707784",
+    "color": "#adaeb3",
     "width": "2px",
     "style": "solid"
   },
@@ -102,28 +118,5 @@
     "color": "#00000000",
     "width": "2px",
     "style": "solid"
-  },
-  "idsColorElementPrimaryDefault": "#ffffff",
-  "idsColorElementPrimaryHover": "#fafafb",
-  "idsColorElementPrimaryActive": "#f5f5f8",
-  "idsColorElementPrimaryOnprimary": "#101114",
-  "idsColorElementSecondaryDefault": "#00000000",
-  "idsColorElementSecondaryHover": "#142442",
-  "idsColorElementSecondaryActive": "#1e3560",
-  "idsColorElementSecondaryOnsecondary": "#ffffff",
-  "idsColorElementPrimaryinvertedDefault": "#101114",
-  "idsColorElementPrimaryinvertedHover": "#2d2f35",
-  "idsColorElementPrimaryinvertedActive": "#4d5057",
-  "idsColorElementPrimaryinvertedOnprimaryaccent": "#ffffff",
-  "idsColorElementPrimaryaccentinvertedDefault": "#ffffff",
-  "idsColorElementPrimaryaccentinvertedHover": "#fafafb",
-  "idsColorElementPrimaryaccentinvertedActive": "#f5f5f8",
-  "idsColorElementPrimaryaccentinvertedOnprimaryaccentinverted": "#101114",
-  "idsColorElementDisabled": "#707784",
-  "idsColorElementOndisabled": "#adaeb3",
-  "idsColorBorderPrimary": "#e0e1e4",
-  "idsColorBorderDisabled": "#707784",
-  "idsColorBorderMuted": "#8e9099",
-  "idsColorBorderSubtle": "#707784",
-  "idsColorBorderFocus": "#7eaaff"
+  }
 }