@inversestudio/design-tokens 1.0.5 → 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 +1 -0
  2. package/dist/css/tokens.dark.css +21 -19
  3. package/dist/css/tokens.light.css +1 -0
  4. package/dist/esm/tokens.dark.js +21 -19
  5. package/dist/esm/tokens.js +20 -19
  6. package/dist/esm/tokens.light.js +20 -19
  7. package/dist/js/tokens.dark.js +21 -19
  8. package/dist/js/tokens.js +20 -19
  9. package/dist/js/tokens.light.js +20 -19
  10. package/dist/json/tokens.dark.json +22 -20
  11. package/dist/json/tokens.dark.nested.json +33 -31
  12. package/dist/json/tokens.json +20 -19
  13. package/dist/json/tokens.light.json +20 -19
  14. package/dist/json/tokens.light.nested.json +28 -27
  15. package/dist/json/tokens.nested.json +28 -27
  16. package/dist/scss/_tokens.dark.scss +31 -27
  17. package/dist/scss/_tokens.light.scss +40 -38
  18. package/dist/scss/_tokens.scss +40 -38
  19. package/dist/types/tokens.d.ts +76 -73
  20. package/dist/types/tokens.dark.d.ts +69 -63
  21. package/dist/types/tokens.light.d.ts +76 -73
  22. package/package.json +1 -1
package/dist/css/tokens.css CHANGED
@@ -92,6 +92,7 @@
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;
96
97
  --ids-border-element-primary: 2px solid #00000000;
97
98
  --ids-border-element-secondary: 2px solid #2d2f35;
package/dist/css/tokens.dark.css CHANGED
@@ -90,28 +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-element-secondary: #2d2f35;
105
- --ids-color-border-element-primary: #00000000;
106
- --ids-color-border-element-disabled: #adaeb3;
107
- --ids-color-border-muted: #e0e1e4;
108
- --ids-color-border-subtle: #f5f5f8;
109
- --ids-color-border-focus: #7eaaff;
110
93
  --ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
111
94
  --ids-borderradius-0-25x: 4px;
95
+ --ids-borderradius-0-5x: 8px;
112
96
  --ids-borderradius-full: 1600px;
113
97
  --ids-border-element-primary: 2px solid #00000000;
114
- --ids-border-element-secondary: 2px solid #2d2f35;
115
- --ids-border-element-disabled: 2px solid #adaeb3;
98
+ --ids-border-element-secondary: 2px solid #ffffff;
99
+ --ids-border-element-disabled: 2px solid #707784;
116
100
  --ids-border-focused: 2px solid #7eaaff;
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;
117
119
  }
package/dist/css/tokens.light.css CHANGED
@@ -92,6 +92,7 @@
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;
96
97
  --ids-border-element-primary: 2px solid #00000000;
97
98
  --ids-border-element-secondary: 2px solid #2d2f35;
package/dist/esm/tokens.dark.js CHANGED
@@ -78,23 +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 idsColorBorderElementSecondary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
93
- export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
94
- export const idsColorBorderElementDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
95
- export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
96
- export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
97
- export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
98
81
  export const idsTypographyLabel1x = {
99
82
  fontFamily: "Tomato Grotesk",
100
83
  fontSize: "16px",
@@ -102,6 +85,7 @@ export const idsTypographyLabel1x = {
102
85
  fontWeight: "600",
103
86
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
104
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.
105
89
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
90
  export const idsBorderElementPrimary = {
107
91
  color: "#00000000",
@@ -109,12 +93,12 @@ export const idsBorderElementPrimary = {
109
93
  style: "solid",
110
94
  };
111
95
  export const idsBorderElementSecondary = {
112
- color: "#2d2f35",
96
+ color: "#ffffff",
113
97
  width: "2px",
114
98
  style: "solid",
115
99
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
116
100
  export const idsBorderElementDisabled = {
117
- color: "#adaeb3",
101
+ color: "#707784",
118
102
  width: "2px",
119
103
  style: "solid",
120
104
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
@@ -123,3 +107,21 @@ export const idsBorderFocused = {
123
107
  width: "2px",
124
108
  style: "solid",
125
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,6 +85,7 @@ 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
90
  export const idsBorderElementPrimary = {
90
91
  color: "#00000000",
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,6 +85,7 @@ 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
90
  export const idsBorderElementPrimary = {
90
91
  color: "#00000000",
package/dist/js/tokens.dark.js CHANGED
@@ -78,23 +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 idsColorBorderElementSecondary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
93
- export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
94
- export const idsColorBorderElementDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
95
- export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
96
- export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
97
- export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
98
81
  export const idsTypographyLabel1x = {
99
82
  fontFamily: "Tomato Grotesk",
100
83
  fontSize: "16px",
@@ -102,6 +85,7 @@ export const idsTypographyLabel1x = {
102
85
  fontWeight: "600",
103
86
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
104
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.
105
89
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
90
  export const idsBorderElementPrimary = {
107
91
  color: "#00000000",
@@ -109,12 +93,12 @@ export const idsBorderElementPrimary = {
109
93
  style: "solid",
110
94
  };
111
95
  export const idsBorderElementSecondary = {
112
- color: "#2d2f35",
96
+ color: "#ffffff",
113
97
  width: "2px",
114
98
  style: "solid",
115
99
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
116
100
  export const idsBorderElementDisabled = {
117
- color: "#adaeb3",
101
+ color: "#707784",
118
102
  width: "2px",
119
103
  style: "solid",
120
104
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
@@ -123,3 +107,21 @@ export const idsBorderFocused = {
123
107
  width: "2px",
124
108
  style: "solid",
125
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,6 +85,7 @@ 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
90
  export const idsBorderElementPrimary = {
90
91
  color: "#00000000",
package/dist/js/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,6 +85,7 @@ 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
90
  export const idsBorderElementPrimary = {
90
91
  color: "#00000000",
package/dist/json/tokens.dark.json CHANGED
@@ -75,23 +75,6 @@
75
75
  "idsDimensionIcon1x": "16px",
76
76
  "idsDimensionIcon125x": "20px",
77
77
  "idsDimensionIcon15x": "24px",
78
- "idsColorElementPrimaryDefault": "#2d2f35",
79
- "idsColorElementPrimaryHover": "#4d5057",
80
- "idsColorElementPrimaryPressed": "#101114",
81
- "idsColorElementPrimaryOnprimary": "#ffffff",
82
- "idsColorElementSecondaryDefault": "#00000000",
83
- "idsColorElementSecondaryHover": "#e6edfb",
84
- "idsColorElementSecondaryPressed": "#d1def8",
85
- "idsColorElementSecondaryOnsecondary": "#2d2f35",
86
- "idsColorElementDisabled": "#adaeb3",
87
- "idsColorElementDisabledmuted": "#00000000",
88
- "idsColorElementOndisabled": "#707784",
89
- "idsColorBorderElementSecondary": "#2d2f35",
90
- "idsColorBorderElementPrimary": "#00000000",
91
- "idsColorBorderElementDisabled": "#adaeb3",
92
- "idsColorBorderMuted": "#e0e1e4",
93
- "idsColorBorderSubtle": "#f5f5f8",
94
- "idsColorBorderFocus": "#7eaaff",
95
78
  "idsTypographyLabel1x": {
96
79
  "fontFamily": "Tomato Grotesk",
97
80
  "fontSize": "16px",
@@ -99,6 +82,7 @@
99
82
  "fontWeight": "600"
100
83
  },
101
84
  "idsBorderradius025x": "4px",
85
+ "idsBorderradius05x": "8px",
102
86
  "idsBorderradiusFull": "1600px",
103
87
  "idsBorderElementPrimary": {
104
88
  "color": "#00000000",
@@ -106,12 +90,12 @@
106
90
  "style": "solid"
107
91
  },
108
92
  "idsBorderElementSecondary": {
109
- "color": "#2d2f35",
93
+ "color": "#ffffff",
110
94
  "width": "2px",
111
95
  "style": "solid"
112
96
  },
113
97
  "idsBorderElementDisabled": {
114
- "color": "#adaeb3",
98
+ "color": "#707784",
115
99
  "width": "2px",
116
100
  "style": "solid"
117
101
  },
@@ -119,5 +103,23 @@
119
103
  "color": "#7eaaff",
120
104
  "width": "2px",
121
105
  "style": "solid"
122
- }
106
+ },
107
+ "idsColorElementPrimaryDefault": "#ffffff",
108
+ "idsColorElementPrimaryHover": "#fafafb",
109
+ "idsColorElementPrimaryPressed": "#f5f5f8",
110
+ "idsColorElementPrimaryOnprimary": "#101114",
111
+ "idsColorElementSecondaryDefault": "#00000000",
112
+ "idsColorElementSecondaryHover": "#142442",
113
+ "idsColorElementSecondaryPressed": "#1e3560",
114
+ "idsColorElementSecondaryOnsecondary": "#ffffff",
115
+ "idsColorElementDisabled": "#707784",
116
+ "idsColorElementDisabledmuted": "#707784",
117
+ "idsColorElementOndisabled": "#adaeb3",
118
+ "idsColorBorderElementSecondary": "#ffffff",
119
+ "idsColorBorderElementPrimary": "#00000000",
120
+ "idsColorBorderElementDisabled": "#707784",
121
+ "idsColorBorderPrimary": "#e0e1e4",
122
+ "idsColorBorderMuted": "#8e9099",
123
+ "idsColorBorderSubtle": "#707784",
124
+ "idsColorBorderFocus": "#7eaaff"
123
125
  }
package/dist/json/tokens.dark.nested.json CHANGED
@@ -106,35 +106,6 @@
106
106
  "1_5x": "24px"
107
107
  }
108
108
  },
109
- "color": {
110
- "element": {
111
- "primary": {
112
- "default": "#2d2f35",
113
- "hover": "#4d5057",
114
- "pressed": "#101114",
115
- "onPrimary": "#ffffff"
116
- },
117
- "secondary": {
118
- "default": "#00000000",
119
- "hover": "#e6edfb",
120
- "pressed": "#d1def8",
121
- "onSecondary": "#2d2f35"
122
- },
123
- "disabled": "#adaeb3",
124
- "disabledMuted": "#00000000",
125
- "onDisabled": "#707784"
126
- },
127
- "border": {
128
- "element": {
129
- "secondary": "#2d2f35",
130
- "primary": "#00000000",
131
- "disabled": "#adaeb3"
132
- },
133
- "muted": "#e0e1e4",
134
- "subtle": "#f5f5f8",
135
- "focus": "#7eaaff"
136
- }
137
- },
138
109
  "typography": {
139
110
  "label": {
140
111
  "1x": {
@@ -147,6 +118,7 @@
147
118
  },
148
119
  "borderRadius": {
149
120
  "0_25x": "4px",
121
+ "0_5x": "8px",
150
122
  "full": "1600px"
151
123
  },
152
124
  "border": {
@@ -157,12 +129,12 @@
157
129
  "style": "solid"
158
130
  },
159
131
  "secondary": {
160
- "color": "#2d2f35",
132
+ "color": "#ffffff",
161
133
  "width": "2px",
162
134
  "style": "solid"
163
135
  },
164
136
  "disabled": {
165
- "color": "#adaeb3",
137
+ "color": "#707784",
166
138
  "width": "2px",
167
139
  "style": "solid"
168
140
  }
@@ -172,6 +144,36 @@
172
144
  "width": "2px",
173
145
  "style": "solid"
174
146
  }
147
+ },
148
+ "color": {
149
+ "element": {
150
+ "primary": {
151
+ "default": "#ffffff",
152
+ "hover": "#fafafb",
153
+ "pressed": "#f5f5f8",
154
+ "onPrimary": "#101114"
155
+ },
156
+ "secondary": {
157
+ "default": "#00000000",
158
+ "hover": "#142442",
159
+ "pressed": "#1e3560",
160
+ "onSecondary": "#ffffff"
161
+ },
162
+ "disabled": "#707784",
163
+ "disabledMuted": "#707784",
164
+ "onDisabled": "#adaeb3"
165
+ },
166
+ "border": {
167
+ "element": {
168
+ "secondary": "#ffffff",
169
+ "primary": "#00000000",
170
+ "disabled": "#707784"
171
+ },
172
+ "primary": "#e0e1e4",
173
+ "muted": "#8e9099",
174
+ "subtle": "#707784",
175
+ "focus": "#7eaaff"
176
+ }
175
177
  }
176
178
  }
177
179
  }