@inversestudio/design-tokens 1.0.4 → 1.0.6

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 (22) hide show
  1. package/dist/css/tokens.css +7 -5
  2. package/dist/css/tokens.dark.css +22 -19
  3. package/dist/css/tokens.light.css +7 -5
  4. package/dist/esm/tokens.dark.js +29 -26
  5. package/dist/esm/tokens.js +31 -29
  6. package/dist/esm/tokens.light.js +31 -29
  7. package/dist/js/tokens.dark.js +29 -26
  8. package/dist/js/tokens.js +31 -29
  9. package/dist/js/tokens.light.js +31 -29
  10. package/dist/json/tokens.dark.json +28 -25
  11. package/dist/json/tokens.dark.nested.json +47 -40
  12. package/dist/json/tokens.json +29 -27
  13. package/dist/json/tokens.light.json +29 -27
  14. package/dist/json/tokens.light.nested.json +50 -44
  15. package/dist/json/tokens.nested.json +50 -44
  16. package/dist/scss/_tokens.dark.scss +34 -28
  17. package/dist/scss/_tokens.light.scss +52 -48
  18. package/dist/scss/_tokens.scss +52 -48
  19. package/dist/types/tokens.d.ts +103 -89
  20. package/dist/types/tokens.dark.d.ts +81 -64
  21. package/dist/types/tokens.light.d.ts +103 -89
  22. package/package.json +1 -1
package/dist/css/tokens.css CHANGED
@@ -92,11 +92,12 @@
92
92
  --ids-dimension-icon-1-5x: 24px;
93
93
  --ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
94
94
  --ids-borderradius-0-25x: 4px;
95
+ --ids-borderradius-0-5x: 8px;
95
96
  --ids-borderradius-full: 1600px;
97
+ --ids-border-element-primary: 2px solid #00000000;
98
+ --ids-border-element-secondary: 2px solid #2d2f35;
99
+ --ids-border-element-disabled: 2px solid #adaeb3;
96
100
  --ids-border-focused: 2px solid #7eaaff;
97
- --ids-border-primary: 2px solid #2d2f35;
98
- --ids-border-disabled: 2px solid #adaeb3;
99
- --ids-border-transparent: 2px solid #00000000;
100
101
  --ids-color-element-primary-default: #2d2f35;
101
102
  --ids-color-element-primary-hover: #4d5057;
102
103
  --ids-color-element-primary-pressed: #101114;
@@ -108,8 +109,9 @@
108
109
  --ids-color-element-disabled: #adaeb3;
109
110
  --ids-color-element-disabledmuted: #00000000;
110
111
  --ids-color-element-ondisabled: #707784;
111
- --ids-color-border-primary: #2d2f35;
112
- --ids-color-border-disabled: #adaeb3;
112
+ --ids-color-border-element-secondary: #2d2f35;
113
+ --ids-color-border-element-primary: #00000000;
114
+ --ids-color-border-element-disabled: #adaeb3;
113
115
  --ids-color-border-muted: #e0e1e4;
114
116
  --ids-color-border-subtle: #f5f5f8;
115
117
  --ids-color-border-focus: #7eaaff;
package/dist/css/tokens.dark.css CHANGED
@@ -90,27 +90,30 @@
90
90
  --ids-dimension-icon-1x: 16px;
91
91
  --ids-dimension-icon-1-25x: 20px;
92
92
  --ids-dimension-icon-1-5x: 24px;
93
- --ids-color-element-primary-default: #2d2f35;
94
- --ids-color-element-primary-hover: #4d5057;
95
- --ids-color-element-primary-pressed: #101114;
96
- --ids-color-element-primary-onprimary: #ffffff;
97
- --ids-color-element-secondary-default: #00000000;
98
- --ids-color-element-secondary-hover: #e6edfb;
99
- --ids-color-element-secondary-pressed: #d1def8;
100
- --ids-color-element-secondary-onsecondary: #2d2f35;
101
- --ids-color-element-disabled: #adaeb3;
102
- --ids-color-element-disabledmuted: #00000000;
103
- --ids-color-element-ondisabled: #707784;
104
- --ids-color-border-primary: #2d2f35;
105
- --ids-color-border-disabled: #adaeb3;
106
- --ids-color-border-muted: #e0e1e4;
107
- --ids-color-border-subtle: #f5f5f8;
108
- --ids-color-border-focus: #7eaaff;
109
93
  --ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
110
94
  --ids-borderradius-0-25x: 4px;
95
+ --ids-borderradius-0-5x: 8px;
111
96
  --ids-borderradius-full: 1600px;
97
+ --ids-border-element-primary: 2px solid #00000000;
98
+ --ids-border-element-secondary: 2px solid #ffffff;
99
+ --ids-border-element-disabled: 2px solid #707784;
112
100
  --ids-border-focused: 2px solid #7eaaff;
113
- --ids-border-primary: 2px solid #2d2f35;
114
- --ids-border-disabled: 2px solid #adaeb3;
115
- --ids-border-transparent: 2px solid #00000000;
101
+ --ids-color-element-primary-default: #ffffff;
102
+ --ids-color-element-primary-hover: #fafafb;
103
+ --ids-color-element-primary-pressed: #f5f5f8;
104
+ --ids-color-element-primary-onprimary: #101114;
105
+ --ids-color-element-secondary-default: #00000000;
106
+ --ids-color-element-secondary-hover: #142442;
107
+ --ids-color-element-secondary-pressed: #1e3560;
108
+ --ids-color-element-secondary-onsecondary: #ffffff;
109
+ --ids-color-element-disabled: #707784;
110
+ --ids-color-element-disabledmuted: #707784;
111
+ --ids-color-element-ondisabled: #adaeb3;
112
+ --ids-color-border-element-secondary: #ffffff;
113
+ --ids-color-border-element-primary: #00000000;
114
+ --ids-color-border-element-disabled: #707784;
115
+ --ids-color-border-primary: #e0e1e4;
116
+ --ids-color-border-muted: #8e9099;
117
+ --ids-color-border-subtle: #707784;
118
+ --ids-color-border-focus: #7eaaff;
116
119
  }
package/dist/css/tokens.light.css CHANGED
@@ -92,11 +92,12 @@
92
92
  --ids-dimension-icon-1-5x: 24px;
93
93
  --ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
94
94
  --ids-borderradius-0-25x: 4px;
95
+ --ids-borderradius-0-5x: 8px;
95
96
  --ids-borderradius-full: 1600px;
97
+ --ids-border-element-primary: 2px solid #00000000;
98
+ --ids-border-element-secondary: 2px solid #2d2f35;
99
+ --ids-border-element-disabled: 2px solid #adaeb3;
96
100
  --ids-border-focused: 2px solid #7eaaff;
97
- --ids-border-primary: 2px solid #2d2f35;
98
- --ids-border-disabled: 2px solid #adaeb3;
99
- --ids-border-transparent: 2px solid #00000000;
100
101
  --ids-color-element-primary-default: #2d2f35;
101
102
  --ids-color-element-primary-hover: #4d5057;
102
103
  --ids-color-element-primary-pressed: #101114;
@@ -108,8 +109,9 @@
108
109
  --ids-color-element-disabled: #adaeb3;
109
110
  --ids-color-element-disabledmuted: #00000000;
110
111
  --ids-color-element-ondisabled: #707784;
111
- --ids-color-border-primary: #2d2f35;
112
- --ids-color-border-disabled: #adaeb3;
112
+ --ids-color-border-element-secondary: #2d2f35;
113
+ --ids-color-border-element-primary: #00000000;
114
+ --ids-color-border-element-disabled: #adaeb3;
113
115
  --ids-color-border-muted: #e0e1e4;
114
116
  --ids-color-border-subtle: #f5f5f8;
115
117
  --ids-color-border-focus: #7eaaff;
package/dist/esm/tokens.dark.js CHANGED
@@ -78,22 +78,6 @@ export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72p
78
78
  export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
79
79
  export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
80
80
  export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
81
- export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
82
- export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
83
- export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
84
- export const idsColorElementPrimaryOnprimary = "#ffffff"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
85
- export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Background color for secondary element resting state. Use for: ghost button background.
86
- export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
87
- export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
88
- export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
89
- export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
90
- export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
91
- export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
92
- export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
93
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
94
- export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
95
- export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
96
- export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
97
81
  export const idsTypographyLabel1x = {
98
82
  fontFamily: "Tomato Grotesk",
99
83
  fontSize: "16px",
@@ -101,24 +85,43 @@ export const idsTypographyLabel1x = {
101
85
  fontWeight: "600",
102
86
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
103
87
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
88
+ export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
104
89
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
105
- export const idsBorderFocused = {
106
- color: "#7eaaff",
90
+ export const idsBorderElementPrimary = {
91
+ color: "#00000000",
107
92
  width: "2px",
108
93
  style: "solid",
109
- }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
110
- export const idsBorderPrimary = {
111
- color: "#2d2f35",
94
+ };
95
+ export const idsBorderElementSecondary = {
96
+ color: "#ffffff",
112
97
  width: "2px",
113
98
  style: "solid",
114
99
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
115
- export const idsBorderDisabled = {
116
- color: "#adaeb3",
100
+ export const idsBorderElementDisabled = {
101
+ color: "#707784",
117
102
  width: "2px",
118
103
  style: "solid",
119
104
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
120
- export const idsBorderTransparent = {
121
- color: "#00000000",
105
+ export const idsBorderFocused = {
106
+ color: "#7eaaff",
122
107
  width: "2px",
123
108
  style: "solid",
124
- };
109
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
110
+ export const idsColorElementPrimaryDefault = "#ffffff"; // SEMANTIC - Primary element resting state (dark theme). Use for: primary button background, main CTA.
111
+ export const idsColorElementPrimaryHover = "#fafafb"; // SEMANTIC - Primary element hover state (dark theme). Use for: primary button hover.
112
+ export const idsColorElementPrimaryPressed = "#f5f5f8"; // SEMANTIC - Primary element pressed state (dark theme). Use for: primary button active.
113
+ export const idsColorElementPrimaryOnprimary = "#101114"; // SEMANTIC - Text/icon ON primary backgrounds (dark theme). Use for: primary button text.
114
+ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Secondary element resting state (dark theme). Use for: ghost button background.
115
+ export const idsColorElementSecondaryHover = "#142442"; // SEMANTIC - Secondary element hover state (dark theme). Use for: ghost button hover.
116
+ export const idsColorElementSecondaryPressed = "#1e3560"; // SEMANTIC - Secondary element pressed state (dark theme). Use for: ghost button active.
117
+ export const idsColorElementSecondaryOnsecondary = "#ffffff"; // SEMANTIC - Text/icon ON secondary backgrounds (dark theme). Use for: ghost button text.
118
+ export const idsColorElementDisabled = "#707784"; // SEMANTIC - Disabled element background (dark theme). Use for: all disabled controls.
119
+ export const idsColorElementDisabledmuted = "#707784"; // SEMANTIC - Disabled element background (dark theme). Use for: all disabled controls.
120
+ export const idsColorElementOndisabled = "#adaeb3"; // SEMANTIC - Text/icon ON disabled backgrounds (dark theme).
121
+ export const idsColorBorderElementSecondary = "#ffffff"; // SEMANTIC - Secondary element border (dark theme). Use for: secondary button borders.
122
+ export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary element border (dark theme). Use for: primary button borders.
123
+ export const idsColorBorderElementDisabled = "#707784"; // SEMANTIC - Disabled element border (dark theme). Use for: disabled button borders.
124
+ export const idsColorBorderPrimary = "#e0e1e4"; // SEMANTIC - Primary border (dark theme). Use for: input borders, card outlines.
125
+ export const idsColorBorderMuted = "#8e9099"; // SEMANTIC - Muted border (dark theme). Use for: secondary containers, tables.
126
+ export const idsColorBorderSubtle = "#707784"; // SEMANTIC - Subtle border (dark theme). Use for: hairline dividers.
127
+ export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color (dark theme). Use for: keyboard focus on all interactive elements.
package/dist/esm/tokens.js CHANGED
@@ -2,25 +2,6 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
6
- export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
7
- export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
8
- export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
9
- export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
10
- export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
11
- export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
12
- export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
13
- export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
14
- export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
15
- export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
16
- export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
17
- export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
18
- export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
19
- export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
20
- export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
21
- export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
22
- export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
23
- export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
24
5
  export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
25
6
  export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
26
7
  export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
@@ -78,6 +59,25 @@ export const idsCoreSizingBase = "16px";
78
59
  export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
79
60
  export const idsCoreBorderwidthSlim = "1px";
80
61
  export const idsCoreBorderwidthThick = "2px";
62
+ export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
63
+ export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
64
+ export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
65
+ export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
66
+ export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
67
+ export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
68
+ export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
69
+ export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
70
+ export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
71
+ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
72
+ export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
73
+ export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
74
+ export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
75
+ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
76
+ export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
77
+ export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
78
+ export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
79
+ export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
80
+ export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
81
81
  export const idsTypographyLabel1x = {
82
82
  fontFamily: "Tomato Grotesk",
83
83
  fontSize: "16px",
@@ -85,27 +85,28 @@ export const idsTypographyLabel1x = {
85
85
  fontWeight: "600",
86
86
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
87
87
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
88
+ export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
88
89
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
89
- export const idsBorderFocused = {
90
- color: "#7eaaff",
90
+ export const idsBorderElementPrimary = {
91
+ color: "#00000000",
91
92
  width: "2px",
92
93
  style: "solid",
93
- }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
94
- export const idsBorderPrimary = {
94
+ };
95
+ export const idsBorderElementSecondary = {
95
96
  color: "#2d2f35",
96
97
  width: "2px",
97
98
  style: "solid",
98
99
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
- export const idsBorderDisabled = {
100
+ export const idsBorderElementDisabled = {
100
101
  color: "#adaeb3",
101
102
  width: "2px",
102
103
  style: "solid",
103
104
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
104
- export const idsBorderTransparent = {
105
- color: "#00000000",
105
+ export const idsBorderFocused = {
106
+ color: "#7eaaff",
106
107
  width: "2px",
107
108
  style: "solid",
108
- };
109
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
109
110
  export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
110
111
  export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
111
112
  export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
@@ -117,8 +118,9 @@ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Fore
117
118
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
118
119
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
119
120
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
120
- export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
121
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
121
+ export const idsColorBorderElementSecondary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
122
+ export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
123
+ export const idsColorBorderElementDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
122
124
  export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
123
125
  export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
124
126
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
package/dist/esm/tokens.light.js CHANGED
@@ -2,25 +2,6 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
6
- export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
7
- export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
8
- export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
9
- export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
10
- export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
11
- export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
12
- export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
13
- export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
14
- export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
15
- export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
16
- export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
17
- export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
18
- export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
19
- export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
20
- export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
21
- export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
22
- export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
23
- export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
24
5
  export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
25
6
  export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
26
7
  export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
@@ -78,6 +59,25 @@ export const idsCoreSizingBase = "16px";
78
59
  export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
79
60
  export const idsCoreBorderwidthSlim = "1px";
80
61
  export const idsCoreBorderwidthThick = "2px";
62
+ export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
63
+ export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
64
+ export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
65
+ export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
66
+ export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
67
+ export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
68
+ export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
69
+ export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
70
+ export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
71
+ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
72
+ export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
73
+ export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
74
+ export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
75
+ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
76
+ export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
77
+ export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
78
+ export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
79
+ export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
80
+ export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
81
81
  export const idsTypographyLabel1x = {
82
82
  fontFamily: "Tomato Grotesk",
83
83
  fontSize: "16px",
@@ -85,27 +85,28 @@ export const idsTypographyLabel1x = {
85
85
  fontWeight: "600",
86
86
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
87
87
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
88
+ export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
88
89
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
89
- export const idsBorderFocused = {
90
- color: "#7eaaff",
90
+ export const idsBorderElementPrimary = {
91
+ color: "#00000000",
91
92
  width: "2px",
92
93
  style: "solid",
93
- }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
94
- export const idsBorderPrimary = {
94
+ };
95
+ export const idsBorderElementSecondary = {
95
96
  color: "#2d2f35",
96
97
  width: "2px",
97
98
  style: "solid",
98
99
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
- export const idsBorderDisabled = {
100
+ export const idsBorderElementDisabled = {
100
101
  color: "#adaeb3",
101
102
  width: "2px",
102
103
  style: "solid",
103
104
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
104
- export const idsBorderTransparent = {
105
- color: "#00000000",
105
+ export const idsBorderFocused = {
106
+ color: "#7eaaff",
106
107
  width: "2px",
107
108
  style: "solid",
108
- };
109
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
109
110
  export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
110
111
  export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
111
112
  export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
@@ -117,8 +118,9 @@ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Fore
117
118
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
118
119
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
119
120
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
120
- export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
121
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
121
+ export const idsColorBorderElementSecondary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
122
+ export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
123
+ export const idsColorBorderElementDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
122
124
  export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
123
125
  export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
124
126
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
package/dist/js/tokens.dark.js CHANGED
@@ -78,22 +78,6 @@ export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72p
78
78
  export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
79
79
  export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
80
80
  export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
81
- export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
82
- export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
83
- export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
84
- export const idsColorElementPrimaryOnprimary = "#ffffff"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
85
- export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Background color for secondary element resting state. Use for: ghost button background.
86
- export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
87
- export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
88
- export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
89
- export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
90
- export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
91
- export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
92
- export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
93
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
94
- export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
95
- export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
96
- export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
97
81
  export const idsTypographyLabel1x = {
98
82
  fontFamily: "Tomato Grotesk",
99
83
  fontSize: "16px",
@@ -101,24 +85,43 @@ export const idsTypographyLabel1x = {
101
85
  fontWeight: "600",
102
86
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
103
87
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
88
+ export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
104
89
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
105
- export const idsBorderFocused = {
106
- color: "#7eaaff",
90
+ export const idsBorderElementPrimary = {
91
+ color: "#00000000",
107
92
  width: "2px",
108
93
  style: "solid",
109
- }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
110
- export const idsBorderPrimary = {
111
- color: "#2d2f35",
94
+ };
95
+ export const idsBorderElementSecondary = {
96
+ color: "#ffffff",
112
97
  width: "2px",
113
98
  style: "solid",
114
99
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
115
- export const idsBorderDisabled = {
116
- color: "#adaeb3",
100
+ export const idsBorderElementDisabled = {
101
+ color: "#707784",
117
102
  width: "2px",
118
103
  style: "solid",
119
104
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
120
- export const idsBorderTransparent = {
121
- color: "#00000000",
105
+ export const idsBorderFocused = {
106
+ color: "#7eaaff",
122
107
  width: "2px",
123
108
  style: "solid",
124
- };
109
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
110
+ export const idsColorElementPrimaryDefault = "#ffffff"; // SEMANTIC - Primary element resting state (dark theme). Use for: primary button background, main CTA.
111
+ export const idsColorElementPrimaryHover = "#fafafb"; // SEMANTIC - Primary element hover state (dark theme). Use for: primary button hover.
112
+ export const idsColorElementPrimaryPressed = "#f5f5f8"; // SEMANTIC - Primary element pressed state (dark theme). Use for: primary button active.
113
+ export const idsColorElementPrimaryOnprimary = "#101114"; // SEMANTIC - Text/icon ON primary backgrounds (dark theme). Use for: primary button text.
114
+ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Secondary element resting state (dark theme). Use for: ghost button background.
115
+ export const idsColorElementSecondaryHover = "#142442"; // SEMANTIC - Secondary element hover state (dark theme). Use for: ghost button hover.
116
+ export const idsColorElementSecondaryPressed = "#1e3560"; // SEMANTIC - Secondary element pressed state (dark theme). Use for: ghost button active.
117
+ export const idsColorElementSecondaryOnsecondary = "#ffffff"; // SEMANTIC - Text/icon ON secondary backgrounds (dark theme). Use for: ghost button text.
118
+ export const idsColorElementDisabled = "#707784"; // SEMANTIC - Disabled element background (dark theme). Use for: all disabled controls.
119
+ export const idsColorElementDisabledmuted = "#707784"; // SEMANTIC - Disabled element background (dark theme). Use for: all disabled controls.
120
+ export const idsColorElementOndisabled = "#adaeb3"; // SEMANTIC - Text/icon ON disabled backgrounds (dark theme).
121
+ export const idsColorBorderElementSecondary = "#ffffff"; // SEMANTIC - Secondary element border (dark theme). Use for: secondary button borders.
122
+ export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary element border (dark theme). Use for: primary button borders.
123
+ export const idsColorBorderElementDisabled = "#707784"; // SEMANTIC - Disabled element border (dark theme). Use for: disabled button borders.
124
+ export const idsColorBorderPrimary = "#e0e1e4"; // SEMANTIC - Primary border (dark theme). Use for: input borders, card outlines.
125
+ export const idsColorBorderMuted = "#8e9099"; // SEMANTIC - Muted border (dark theme). Use for: secondary containers, tables.
126
+ export const idsColorBorderSubtle = "#707784"; // SEMANTIC - Subtle border (dark theme). Use for: hairline dividers.
127
+ export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color (dark theme). Use for: keyboard focus on all interactive elements.
package/dist/js/tokens.js CHANGED
@@ -2,25 +2,6 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
6
- export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
7
- export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
8
- export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
9
- export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
10
- export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
11
- export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
12
- export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
13
- export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
14
- export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
15
- export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
16
- export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
17
- export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
18
- export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
19
- export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
20
- export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
21
- export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
22
- export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
23
- export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
24
5
  export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
25
6
  export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
26
7
  export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
@@ -78,6 +59,25 @@ export const idsCoreSizingBase = "16px";
78
59
  export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
79
60
  export const idsCoreBorderwidthSlim = "1px";
80
61
  export const idsCoreBorderwidthThick = "2px";
62
+ export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
63
+ export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
64
+ export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
65
+ export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
66
+ export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
67
+ export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
68
+ export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
69
+ export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
70
+ export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
71
+ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
72
+ export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
73
+ export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
74
+ export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
75
+ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
76
+ export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
77
+ export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
78
+ export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
79
+ export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
80
+ export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
81
81
  export const idsTypographyLabel1x = {
82
82
  fontFamily: "Tomato Grotesk",
83
83
  fontSize: "16px",
@@ -85,27 +85,28 @@ export const idsTypographyLabel1x = {
85
85
  fontWeight: "600",
86
86
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
87
87
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
88
+ export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
88
89
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
89
- export const idsBorderFocused = {
90
- color: "#7eaaff",
90
+ export const idsBorderElementPrimary = {
91
+ color: "#00000000",
91
92
  width: "2px",
92
93
  style: "solid",
93
- }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
94
- export const idsBorderPrimary = {
94
+ };
95
+ export const idsBorderElementSecondary = {
95
96
  color: "#2d2f35",
96
97
  width: "2px",
97
98
  style: "solid",
98
99
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
- export const idsBorderDisabled = {
100
+ export const idsBorderElementDisabled = {
100
101
  color: "#adaeb3",
101
102
  width: "2px",
102
103
  style: "solid",
103
104
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
104
- export const idsBorderTransparent = {
105
- color: "#00000000",
105
+ export const idsBorderFocused = {
106
+ color: "#7eaaff",
106
107
  width: "2px",
107
108
  style: "solid",
108
- };
109
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
109
110
  export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
110
111
  export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
111
112
  export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
@@ -117,8 +118,9 @@ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Fore
117
118
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
118
119
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
119
120
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
120
- export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
121
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
121
+ export const idsColorBorderElementSecondary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
122
+ export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
123
+ export const idsColorBorderElementDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
122
124
  export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
123
125
  export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
124
126
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.