@inversestudio/design-tokens 1.0.5 → 1.0.7

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 +6 -0
  2. package/dist/css/tokens.dark.css +22 -19
  3. package/dist/css/tokens.light.css +6 -0
  4. package/dist/esm/tokens.dark.js +28 -21
  5. package/dist/esm/tokens.js +31 -21
  6. package/dist/esm/tokens.light.js +31 -21
  7. package/dist/js/tokens.dark.js +28 -21
  8. package/dist/js/tokens.js +31 -21
  9. package/dist/js/tokens.light.js +31 -21
  10. package/dist/json/tokens.dark.json +27 -20
  11. package/dist/json/tokens.dark.nested.json +38 -31
  12. package/dist/json/tokens.json +29 -19
  13. package/dist/json/tokens.light.json +29 -19
  14. package/dist/json/tokens.light.nested.json +39 -27
  15. package/dist/json/tokens.nested.json +39 -27
  16. package/dist/scss/_tokens.dark.scss +33 -27
  17. package/dist/scss/_tokens.light.scss +50 -38
  18. package/dist/scss/_tokens.scss +50 -38
  19. package/dist/types/tokens.d.ts +96 -74
  20. package/dist/types/tokens.dark.d.ts +73 -64
  21. package/dist/types/tokens.light.d.ts +96 -74
  22. package/package.json +1 -1
package/dist/css/tokens.css CHANGED
@@ -92,10 +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;
96
97
  --ids-border-element-primary: 2px solid #00000000;
97
98
  --ids-border-element-secondary: 2px solid #2d2f35;
98
99
  --ids-border-element-disabled: 2px solid #adaeb3;
100
+ --ids-border-element-tertiary: 2px solid #00000000;
99
101
  --ids-border-focused: 2px solid #7eaaff;
100
102
  --ids-color-element-primary-default: #2d2f35;
101
103
  --ids-color-element-primary-hover: #4d5057;
@@ -105,6 +107,10 @@
105
107
  --ids-color-element-secondary-hover: #e6edfb;
106
108
  --ids-color-element-secondary-pressed: #d1def8;
107
109
  --ids-color-element-secondary-onsecondary: #2d2f35;
110
+ --ids-color-element-tertiary-default: #00000000;
111
+ --ids-color-element-tertiary-hover: #e6edfb;
112
+ --ids-color-element-tertiary-pressed: #d1def8;
113
+ --ids-color-element-tertiary-ontertiary: #2d2f35;
108
114
  --ids-color-element-disabled: #adaeb3;
109
115
  --ids-color-element-disabledmuted: #00000000;
110
116
  --ids-color-element-ondisabled: #707784;
package/dist/css/tokens.dark.css CHANGED
@@ -90,28 +90,31 @@
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;
100
+ --ids-border-element-tertiary: 2px solid #00000000;
116
101
  --ids-border-focused: 2px solid #7eaaff;
102
+ --ids-color-element-primary-default: #ffffff;
103
+ --ids-color-element-primary-hover: #fafafb;
104
+ --ids-color-element-primary-pressed: #f5f5f8;
105
+ --ids-color-element-primary-onprimary: #101114;
106
+ --ids-color-element-secondary-default: #00000000;
107
+ --ids-color-element-secondary-hover: #142442;
108
+ --ids-color-element-secondary-pressed: #1e3560;
109
+ --ids-color-element-secondary-onsecondary: #ffffff;
110
+ --ids-color-element-disabled: #707784;
111
+ --ids-color-element-disabledmuted: #707784;
112
+ --ids-color-element-ondisabled: #adaeb3;
113
+ --ids-color-border-element-secondary: #ffffff;
114
+ --ids-color-border-element-primary: #00000000;
115
+ --ids-color-border-element-disabled: #707784;
116
+ --ids-color-border-primary: #e0e1e4;
117
+ --ids-color-border-muted: #8e9099;
118
+ --ids-color-border-subtle: #707784;
119
+ --ids-color-border-focus: #7eaaff;
117
120
  }
package/dist/css/tokens.light.css CHANGED
@@ -92,10 +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;
96
97
  --ids-border-element-primary: 2px solid #00000000;
97
98
  --ids-border-element-secondary: 2px solid #2d2f35;
98
99
  --ids-border-element-disabled: 2px solid #adaeb3;
100
+ --ids-border-element-tertiary: 2px solid #00000000;
99
101
  --ids-border-focused: 2px solid #7eaaff;
100
102
  --ids-color-element-primary-default: #2d2f35;
101
103
  --ids-color-element-primary-hover: #4d5057;
@@ -105,6 +107,10 @@
105
107
  --ids-color-element-secondary-hover: #e6edfb;
106
108
  --ids-color-element-secondary-pressed: #d1def8;
107
109
  --ids-color-element-secondary-onsecondary: #2d2f35;
110
+ --ids-color-element-tertiary-default: #00000000;
111
+ --ids-color-element-tertiary-hover: #e6edfb;
112
+ --ids-color-element-tertiary-pressed: #d1def8;
113
+ --ids-color-element-tertiary-ontertiary: #2d2f35;
108
114
  --ids-color-element-disabled: #adaeb3;
109
115
  --ids-color-element-disabledmuted: #00000000;
110
116
  --ids-color-element-ondisabled: #707784;
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,24 +85,48 @@ 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",
108
92
  width: "2px",
109
93
  style: "solid",
110
- };
94
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
111
95
  export const idsBorderElementSecondary = {
112
- color: "#2d2f35",
96
+ color: "#ffffff",
113
97
  width: "2px",
114
98
  style: "solid",
115
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
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.
105
+ export const idsBorderElementTertiary = {
106
+ color: "#00000000",
107
+ width: "2px",
108
+ style: "solid",
109
+ }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
121
110
  export const idsBorderFocused = {
122
111
  color: "#7eaaff",
123
112
  width: "2px",
124
113
  style: "solid",
125
114
  }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
115
+ export const idsColorElementPrimaryDefault = "#ffffff"; // SEMANTIC - Primary element resting state (dark theme). Use for: primary button background, main CTA.
116
+ export const idsColorElementPrimaryHover = "#fafafb"; // SEMANTIC - Primary element hover state (dark theme). Use for: primary button hover.
117
+ export const idsColorElementPrimaryPressed = "#f5f5f8"; // SEMANTIC - Primary element pressed state (dark theme). Use for: primary button active.
118
+ export const idsColorElementPrimaryOnprimary = "#101114"; // SEMANTIC - Text/icon ON primary backgrounds (dark theme). Use for: primary button text.
119
+ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Secondary element resting state (dark theme). Use for: ghost button background.
120
+ export const idsColorElementSecondaryHover = "#142442"; // SEMANTIC - Secondary element hover state (dark theme). Use for: ghost button hover.
121
+ export const idsColorElementSecondaryPressed = "#1e3560"; // SEMANTIC - Secondary element pressed state (dark theme). Use for: ghost button active.
122
+ export const idsColorElementSecondaryOnsecondary = "#ffffff"; // SEMANTIC - Text/icon ON secondary backgrounds (dark theme). Use for: ghost button text.
123
+ export const idsColorElementDisabled = "#707784"; // SEMANTIC - Disabled element background (dark theme). Use for: all disabled controls.
124
+ export const idsColorElementDisabledmuted = "#707784"; // SEMANTIC - Disabled element background (dark theme). Use for: all disabled controls.
125
+ export const idsColorElementOndisabled = "#adaeb3"; // SEMANTIC - Text/icon ON disabled backgrounds (dark theme).
126
+ export const idsColorBorderElementSecondary = "#ffffff"; // SEMANTIC - Secondary element border (dark theme). Use for: secondary button borders.
127
+ export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary element border (dark theme). Use for: primary button borders.
128
+ export const idsColorBorderElementDisabled = "#707784"; // SEMANTIC - Disabled element border (dark theme). Use for: disabled button borders.
129
+ export const idsColorBorderPrimary = "#e0e1e4"; // SEMANTIC - Primary border (dark theme). Use for: input borders, card outlines.
130
+ export const idsColorBorderMuted = "#8e9099"; // SEMANTIC - Muted border (dark theme). Use for: secondary containers, tables.
131
+ export const idsColorBorderSubtle = "#707784"; // SEMANTIC - Subtle border (dark theme). Use for: hairline dividers.
132
+ 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,22 +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
90
  export const idsBorderElementPrimary = {
90
91
  color: "#00000000",
91
92
  width: "2px",
92
93
  style: "solid",
93
- };
94
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
94
95
  export const idsBorderElementSecondary = {
95
96
  color: "#2d2f35",
96
97
  width: "2px",
97
98
  style: "solid",
98
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
99
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.
105
+ export const idsBorderElementTertiary = {
106
+ color: "#00000000",
107
+ width: "2px",
108
+ style: "solid",
109
+ }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
104
110
  export const idsBorderFocused = {
105
111
  color: "#7eaaff",
106
112
  width: "2px",
@@ -114,6 +120,10 @@ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Backgr
114
120
  export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
115
121
  export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
116
122
  export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
123
+ export const idsColorElementTertiaryDefault = "#00000000"; // SEMANTIC - Background color for tertiary element resting state. Use for: transparent button background.
124
+ export const idsColorElementTertiaryHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
125
+ export const idsColorElementTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
126
+ export const idsColorElementTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
117
127
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
118
128
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
119
129
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
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,22 +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
90
  export const idsBorderElementPrimary = {
90
91
  color: "#00000000",
91
92
  width: "2px",
92
93
  style: "solid",
93
- };
94
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
94
95
  export const idsBorderElementSecondary = {
95
96
  color: "#2d2f35",
96
97
  width: "2px",
97
98
  style: "solid",
98
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
99
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.
105
+ export const idsBorderElementTertiary = {
106
+ color: "#00000000",
107
+ width: "2px",
108
+ style: "solid",
109
+ }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
104
110
  export const idsBorderFocused = {
105
111
  color: "#7eaaff",
106
112
  width: "2px",
@@ -114,6 +120,10 @@ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Backgr
114
120
  export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
115
121
  export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
116
122
  export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
123
+ export const idsColorElementTertiaryDefault = "#00000000"; // SEMANTIC - Background color for tertiary element resting state. Use for: transparent button background.
124
+ export const idsColorElementTertiaryHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
125
+ export const idsColorElementTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
126
+ export const idsColorElementTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
117
127
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
118
128
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
119
129
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
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,24 +85,48 @@ 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",
108
92
  width: "2px",
109
93
  style: "solid",
110
- };
94
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
111
95
  export const idsBorderElementSecondary = {
112
- color: "#2d2f35",
96
+ color: "#ffffff",
113
97
  width: "2px",
114
98
  style: "solid",
115
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
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.
105
+ export const idsBorderElementTertiary = {
106
+ color: "#00000000",
107
+ width: "2px",
108
+ style: "solid",
109
+ }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
121
110
  export const idsBorderFocused = {
122
111
  color: "#7eaaff",
123
112
  width: "2px",
124
113
  style: "solid",
125
114
  }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
115
+ export const idsColorElementPrimaryDefault = "#ffffff"; // SEMANTIC - Primary element resting state (dark theme). Use for: primary button background, main CTA.
116
+ export const idsColorElementPrimaryHover = "#fafafb"; // SEMANTIC - Primary element hover state (dark theme). Use for: primary button hover.
117
+ export const idsColorElementPrimaryPressed = "#f5f5f8"; // SEMANTIC - Primary element pressed state (dark theme). Use for: primary button active.
118
+ export const idsColorElementPrimaryOnprimary = "#101114"; // SEMANTIC - Text/icon ON primary backgrounds (dark theme). Use for: primary button text.
119
+ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Secondary element resting state (dark theme). Use for: ghost button background.
120
+ export const idsColorElementSecondaryHover = "#142442"; // SEMANTIC - Secondary element hover state (dark theme). Use for: ghost button hover.
121
+ export const idsColorElementSecondaryPressed = "#1e3560"; // SEMANTIC - Secondary element pressed state (dark theme). Use for: ghost button active.
122
+ export const idsColorElementSecondaryOnsecondary = "#ffffff"; // SEMANTIC - Text/icon ON secondary backgrounds (dark theme). Use for: ghost button text.
123
+ export const idsColorElementDisabled = "#707784"; // SEMANTIC - Disabled element background (dark theme). Use for: all disabled controls.
124
+ export const idsColorElementDisabledmuted = "#707784"; // SEMANTIC - Disabled element background (dark theme). Use for: all disabled controls.
125
+ export const idsColorElementOndisabled = "#adaeb3"; // SEMANTIC - Text/icon ON disabled backgrounds (dark theme).
126
+ export const idsColorBorderElementSecondary = "#ffffff"; // SEMANTIC - Secondary element border (dark theme). Use for: secondary button borders.
127
+ export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary element border (dark theme). Use for: primary button borders.
128
+ export const idsColorBorderElementDisabled = "#707784"; // SEMANTIC - Disabled element border (dark theme). Use for: disabled button borders.
129
+ export const idsColorBorderPrimary = "#e0e1e4"; // SEMANTIC - Primary border (dark theme). Use for: input borders, card outlines.
130
+ export const idsColorBorderMuted = "#8e9099"; // SEMANTIC - Muted border (dark theme). Use for: secondary containers, tables.
131
+ export const idsColorBorderSubtle = "#707784"; // SEMANTIC - Subtle border (dark theme). Use for: hairline dividers.
132
+ 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,22 +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
90
  export const idsBorderElementPrimary = {
90
91
  color: "#00000000",
91
92
  width: "2px",
92
93
  style: "solid",
93
- };
94
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
94
95
  export const idsBorderElementSecondary = {
95
96
  color: "#2d2f35",
96
97
  width: "2px",
97
98
  style: "solid",
98
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
99
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.
105
+ export const idsBorderElementTertiary = {
106
+ color: "#00000000",
107
+ width: "2px",
108
+ style: "solid",
109
+ }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
104
110
  export const idsBorderFocused = {
105
111
  color: "#7eaaff",
106
112
  width: "2px",
@@ -114,6 +120,10 @@ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Backgr
114
120
  export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
115
121
  export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
116
122
  export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
123
+ export const idsColorElementTertiaryDefault = "#00000000"; // SEMANTIC - Background color for tertiary element resting state. Use for: transparent button background.
124
+ export const idsColorElementTertiaryHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
125
+ export const idsColorElementTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
126
+ export const idsColorElementTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
117
127
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
118
128
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
119
129
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.