@inversestudio/design-tokens 1.0.6 → 1.0.8

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 +26 -6
  2. package/dist/css/tokens.dark.css +38 -19
  3. package/dist/css/tokens.light.css +26 -6
  4. package/dist/esm/tokens.dark.js +55 -23
  5. package/dist/esm/tokens.js +42 -9
  6. package/dist/esm/tokens.light.js +42 -9
  7. package/dist/js/tokens.dark.js +55 -23
  8. package/dist/js/tokens.js +42 -9
  9. package/dist/js/tokens.light.js +42 -9
  10. package/dist/json/tokens.dark.json +52 -20
  11. package/dist/json/tokens.dark.nested.json +61 -21
  12. package/dist/json/tokens.json +40 -7
  13. package/dist/json/tokens.light.json +40 -7
  14. package/dist/json/tokens.light.nested.json +49 -8
  15. package/dist/json/tokens.nested.json +49 -8
  16. package/dist/scss/_tokens.dark.scss +62 -24
  17. package/dist/scss/_tokens.light.scss +50 -10
  18. package/dist/scss/_tokens.scss +50 -10
  19. package/dist/types/tokens.d.ts +96 -20
  20. package/dist/types/tokens.dark.d.ts +116 -43
  21. package/dist/types/tokens.light.d.ts +96 -20
  22. package/package.json +1 -1
package/dist/css/tokens.css CHANGED
@@ -11,7 +11,7 @@
11
11
  :root {
12
12
  --ids-core-color-neutral-50: #ffffff;
13
13
  --ids-core-color-neutral-100: #fafafb;
14
- --ids-core-color-neutral-200: #f5f5f8;
14
+ --ids-core-color-neutral-200: #F8F8FA;
15
15
  --ids-core-color-neutral-300: #ebebef;
16
16
  --ids-core-color-neutral-400: #e0e1e4;
17
17
  --ids-core-color-neutral-500: #c5c6cb;
@@ -90,6 +90,7 @@
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-typography-label-0-75x: 600 12px/16px Tomato Grotesk;
93
94
  --ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
94
95
  --ids-borderradius-0-25x: 4px;
95
96
  --ids-borderradius-0-5x: 8px;
@@ -97,7 +98,12 @@
97
98
  --ids-border-element-primary: 2px solid #00000000;
98
99
  --ids-border-element-secondary: 2px solid #2d2f35;
99
100
  --ids-border-element-disabled: 2px solid #adaeb3;
101
+ --ids-border-element-tertiary: 2px solid #00000000;
102
+ --ids-border-default: 1px solid #8e9099;
100
103
  --ids-border-focused: 2px solid #7eaaff;
104
+ --ids-color-background-default: #fafafb;
105
+ --ids-color-surface-bright: #ffffff;
106
+ --ids-color-surface-muted: #F8F8FA;
101
107
  --ids-color-element-primary-default: #2d2f35;
102
108
  --ids-color-element-primary-hover: #4d5057;
103
109
  --ids-color-element-primary-pressed: #101114;
@@ -106,13 +112,27 @@
106
112
  --ids-color-element-secondary-hover: #e6edfb;
107
113
  --ids-color-element-secondary-pressed: #d1def8;
108
114
  --ids-color-element-secondary-onsecondary: #2d2f35;
115
+ --ids-color-element-tertiary-default: #00000000;
116
+ --ids-color-element-tertiary-hover: #e6edfb;
117
+ --ids-color-element-tertiary-pressed: #d1def8;
118
+ --ids-color-element-tertiary-ontertiary: #2d2f35;
109
119
  --ids-color-element-disabled: #adaeb3;
110
120
  --ids-color-element-disabledmuted: #00000000;
111
121
  --ids-color-element-ondisabled: #707784;
112
- --ids-color-border-element-secondary: #2d2f35;
113
- --ids-color-border-element-primary: #00000000;
114
- --ids-color-border-element-disabled: #adaeb3;
115
- --ids-color-border-muted: #e0e1e4;
116
- --ids-color-border-subtle: #f5f5f8;
122
+ --ids-color-border-transparent: #00000000;
123
+ --ids-color-border-strong: #2d2f35;
124
+ --ids-color-border-default: #8e9099;
125
+ --ids-color-border-muted: #c5c6cb;
126
+ --ids-color-border-subtle: #F8F8FA;
127
+ --ids-color-border-disabled: #adaeb3;
117
128
  --ids-color-border-focus: #7eaaff;
129
+ --ids-color-input-default: #F8F8FA;
130
+ --ids-color-input-hover: #e6edfb;
131
+ --ids-color-input-pressed: #d1def8;
132
+ --ids-color-input-oninput: #2d2f35;
133
+ --ids-color-input-oninputinverted: #ffffff;
134
+ --ids-color-input-oninputmuted: #2d2f35;
135
+ --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
136
+ --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);
137
+ --ids-color-boxshadow-alpha48: lch(5.0543 1.8805 272.92 / 0.48);
118
138
  }
package/dist/css/tokens.dark.css CHANGED
@@ -11,7 +11,7 @@
11
11
  [data-theme="dark"] {
12
12
  --ids-core-color-neutral-50: #ffffff;
13
13
  --ids-core-color-neutral-100: #fafafb;
14
- --ids-core-color-neutral-200: #f5f5f8;
14
+ --ids-core-color-neutral-200: #F8F8FA;
15
15
  --ids-core-color-neutral-300: #ebebef;
16
16
  --ids-core-color-neutral-400: #e0e1e4;
17
17
  --ids-core-color-neutral-500: #c5c6cb;
@@ -90,30 +90,49 @@
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-typography-label-0-75x: 600 12px/16px Tomato Grotesk;
93
94
  --ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
94
95
  --ids-borderradius-0-25x: 4px;
95
96
  --ids-borderradius-0-5x: 8px;
96
97
  --ids-borderradius-full: 1600px;
97
98
  --ids-border-element-primary: 2px solid #00000000;
98
- --ids-border-element-secondary: 2px solid #ffffff;
99
- --ids-border-element-disabled: 2px solid #707784;
99
+ --ids-border-element-secondary: 2px solid #2d2f35;
100
+ --ids-border-element-disabled: 2px solid #adaeb3;
101
+ --ids-border-element-tertiary: 2px solid #00000000;
102
+ --ids-border-default: 1px solid #8e9099;
100
103
  --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;
104
+ --ids-color-background-default: #fafafb;
105
+ --ids-color-surface-bright: #ffffff;
106
+ --ids-color-surface-muted: #F8F8FA;
107
+ --ids-color-element-primary-default: #2d2f35;
108
+ --ids-color-element-primary-hover: #4d5057;
109
+ --ids-color-element-primary-pressed: #101114;
110
+ --ids-color-element-primary-onprimary: #ffffff;
105
111
  --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;
112
+ --ids-color-element-secondary-hover: #e6edfb;
113
+ --ids-color-element-secondary-pressed: #d1def8;
114
+ --ids-color-element-secondary-onsecondary: #2d2f35;
115
+ --ids-color-element-tertiary-default: #00000000;
116
+ --ids-color-element-tertiary-hover: #e6edfb;
117
+ --ids-color-element-tertiary-pressed: #d1def8;
118
+ --ids-color-element-tertiary-ontertiary: #2d2f35;
119
+ --ids-color-element-disabled: #adaeb3;
120
+ --ids-color-element-disabledmuted: #00000000;
121
+ --ids-color-element-ondisabled: #707784;
122
+ --ids-color-border-transparent: #00000000;
123
+ --ids-color-border-strong: #2d2f35;
124
+ --ids-color-border-default: #8e9099;
125
+ --ids-color-border-muted: #c5c6cb;
126
+ --ids-color-border-subtle: #F8F8FA;
127
+ --ids-color-border-disabled: #adaeb3;
118
128
  --ids-color-border-focus: #7eaaff;
129
+ --ids-color-input-default: #F8F8FA;
130
+ --ids-color-input-hover: #e6edfb;
131
+ --ids-color-input-pressed: #d1def8;
132
+ --ids-color-input-oninput: #2d2f35;
133
+ --ids-color-input-oninputinverted: #ffffff;
134
+ --ids-color-input-oninputmuted: #2d2f35;
135
+ --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
136
+ --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);
137
+ --ids-color-boxshadow-alpha48: lch(5.0543 1.8805 272.92 / 0.48);
119
138
  }
package/dist/css/tokens.light.css CHANGED
@@ -11,7 +11,7 @@
11
11
  :root {
12
12
  --ids-core-color-neutral-50: #ffffff;
13
13
  --ids-core-color-neutral-100: #fafafb;
14
- --ids-core-color-neutral-200: #f5f5f8;
14
+ --ids-core-color-neutral-200: #F8F8FA;
15
15
  --ids-core-color-neutral-300: #ebebef;
16
16
  --ids-core-color-neutral-400: #e0e1e4;
17
17
  --ids-core-color-neutral-500: #c5c6cb;
@@ -90,6 +90,7 @@
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-typography-label-0-75x: 600 12px/16px Tomato Grotesk;
93
94
  --ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
94
95
  --ids-borderradius-0-25x: 4px;
95
96
  --ids-borderradius-0-5x: 8px;
@@ -97,7 +98,12 @@
97
98
  --ids-border-element-primary: 2px solid #00000000;
98
99
  --ids-border-element-secondary: 2px solid #2d2f35;
99
100
  --ids-border-element-disabled: 2px solid #adaeb3;
101
+ --ids-border-element-tertiary: 2px solid #00000000;
102
+ --ids-border-default: 1px solid #8e9099;
100
103
  --ids-border-focused: 2px solid #7eaaff;
104
+ --ids-color-background-default: #fafafb;
105
+ --ids-color-surface-bright: #ffffff;
106
+ --ids-color-surface-muted: #F8F8FA;
101
107
  --ids-color-element-primary-default: #2d2f35;
102
108
  --ids-color-element-primary-hover: #4d5057;
103
109
  --ids-color-element-primary-pressed: #101114;
@@ -106,13 +112,27 @@
106
112
  --ids-color-element-secondary-hover: #e6edfb;
107
113
  --ids-color-element-secondary-pressed: #d1def8;
108
114
  --ids-color-element-secondary-onsecondary: #2d2f35;
115
+ --ids-color-element-tertiary-default: #00000000;
116
+ --ids-color-element-tertiary-hover: #e6edfb;
117
+ --ids-color-element-tertiary-pressed: #d1def8;
118
+ --ids-color-element-tertiary-ontertiary: #2d2f35;
109
119
  --ids-color-element-disabled: #adaeb3;
110
120
  --ids-color-element-disabledmuted: #00000000;
111
121
  --ids-color-element-ondisabled: #707784;
112
- --ids-color-border-element-secondary: #2d2f35;
113
- --ids-color-border-element-primary: #00000000;
114
- --ids-color-border-element-disabled: #adaeb3;
115
- --ids-color-border-muted: #e0e1e4;
116
- --ids-color-border-subtle: #f5f5f8;
122
+ --ids-color-border-transparent: #00000000;
123
+ --ids-color-border-strong: #2d2f35;
124
+ --ids-color-border-default: #8e9099;
125
+ --ids-color-border-muted: #c5c6cb;
126
+ --ids-color-border-subtle: #F8F8FA;
127
+ --ids-color-border-disabled: #adaeb3;
117
128
  --ids-color-border-focus: #7eaaff;
129
+ --ids-color-input-default: #F8F8FA;
130
+ --ids-color-input-hover: #e6edfb;
131
+ --ids-color-input-pressed: #d1def8;
132
+ --ids-color-input-oninput: #2d2f35;
133
+ --ids-color-input-oninputinverted: #ffffff;
134
+ --ids-color-input-oninputmuted: #2d2f35;
135
+ --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
136
+ --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);
137
+ --ids-color-boxshadow-alpha48: lch(5.0543 1.8805 272.92 / 0.48);
118
138
  }
package/dist/esm/tokens.dark.js CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
6
6
  export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
7
- export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
7
+ export const idsCoreColorNeutral200 = "#F8F8FA"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
8
8
  export const idsCoreColorNeutral300 = "#ebebef"; // PRIMITIVE - Light gray. Do NOT use directly on components.
9
9
  export const idsCoreColorNeutral400 = "#e0e1e4"; // PRIMITIVE - Light-mid gray. Do NOT use directly on components.
10
10
  export const idsCoreColorNeutral500 = "#c5c6cb"; // PRIMITIVE - Mid gray. Do NOT use directly on components.
@@ -78,6 +78,12 @@ 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 idsTypographyLabel075x = {
82
+ fontFamily: "Tomato Grotesk",
83
+ fontSize: "12px",
84
+ lineHeight: "16px",
85
+ fontWeight: "600",
86
+ }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
81
87
  export const idsTypographyLabel1x = {
82
88
  fontFamily: "Tomato Grotesk",
83
89
  fontSize: "16px",
@@ -91,37 +97,63 @@ export const idsBorderElementPrimary = {
91
97
  color: "#00000000",
92
98
  width: "2px",
93
99
  style: "solid",
94
- };
100
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
95
101
  export const idsBorderElementSecondary = {
96
- color: "#ffffff",
102
+ color: "#2d2f35",
97
103
  width: "2px",
98
104
  style: "solid",
99
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
105
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
100
106
  export const idsBorderElementDisabled = {
101
- color: "#707784",
107
+ color: "#adaeb3",
102
108
  width: "2px",
103
109
  style: "solid",
104
110
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
111
+ export const idsBorderElementTertiary = {
112
+ color: "#00000000",
113
+ width: "2px",
114
+ style: "solid",
115
+ }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
116
+ export const idsBorderDefault = {
117
+ color: "#8e9099",
118
+ width: "1px",
119
+ style: "solid",
120
+ };
105
121
  export const idsBorderFocused = {
106
122
  color: "#7eaaff",
107
123
  width: "2px",
108
124
  style: "solid",
109
125
  }; // 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.
126
+ export const idsColorBackgroundDefault = "#fafafb";
127
+ export const idsColorSurfaceBright = "#ffffff";
128
+ export const idsColorSurfaceMuted = "#F8F8FA";
129
+ export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
130
+ export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
131
+ export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
132
+ export const idsColorElementPrimaryOnprimary = "#ffffff"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
133
+ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Background color for secondary element resting state. Use for: ghost button background.
134
+ export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
135
+ export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
136
+ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
137
+ export const idsColorElementTertiaryDefault = "#00000000"; // SEMANTIC - Background color for tertiary element resting state. Use for: transparent button background.
138
+ export const idsColorElementTertiaryHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
139
+ export const idsColorElementTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
140
+ export const idsColorElementTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
141
+ export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
142
+ export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
143
+ export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
144
+ export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
145
+ export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
146
+ export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
147
+ export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
148
+ export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
149
+ export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
150
+ export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
151
+ export const idsColorInputDefault = "#F8F8FA"; // SEMANTIC - Background color for input fields and input controls
152
+ export const idsColorInputHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
153
+ export const idsColorInputPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
154
+ export const idsColorInputOninput = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
155
+ export const idsColorInputOninputinverted = "#ffffff"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
156
+ export const idsColorInputOninputmuted = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
157
+ export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)";
158
+ export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)";
159
+ export const idsColorBoxshadowAlpha48 = "lch(5.0543 1.8805 272.92 / 0.48)";
package/dist/esm/tokens.js CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
6
6
  export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
7
- export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
7
+ export const idsCoreColorNeutral200 = "#F8F8FA"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
8
8
  export const idsCoreColorNeutral300 = "#ebebef"; // PRIMITIVE - Light gray. Do NOT use directly on components.
9
9
  export const idsCoreColorNeutral400 = "#e0e1e4"; // PRIMITIVE - Light-mid gray. Do NOT use directly on components.
10
10
  export const idsCoreColorNeutral500 = "#c5c6cb"; // PRIMITIVE - Mid gray. Do NOT use directly on components.
@@ -78,6 +78,12 @@ 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 idsTypographyLabel075x = {
82
+ fontFamily: "Tomato Grotesk",
83
+ fontSize: "12px",
84
+ lineHeight: "16px",
85
+ fontWeight: "600",
86
+ }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
81
87
  export const idsTypographyLabel1x = {
82
88
  fontFamily: "Tomato Grotesk",
83
89
  fontSize: "16px",
@@ -91,22 +97,35 @@ export const idsBorderElementPrimary = {
91
97
  color: "#00000000",
92
98
  width: "2px",
93
99
  style: "solid",
94
- };
100
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
95
101
  export const idsBorderElementSecondary = {
96
102
  color: "#2d2f35",
97
103
  width: "2px",
98
104
  style: "solid",
99
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
105
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
100
106
  export const idsBorderElementDisabled = {
101
107
  color: "#adaeb3",
102
108
  width: "2px",
103
109
  style: "solid",
104
110
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
111
+ export const idsBorderElementTertiary = {
112
+ color: "#00000000",
113
+ width: "2px",
114
+ style: "solid",
115
+ }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
116
+ export const idsBorderDefault = {
117
+ color: "#8e9099",
118
+ width: "1px",
119
+ style: "solid",
120
+ };
105
121
  export const idsBorderFocused = {
106
122
  color: "#7eaaff",
107
123
  width: "2px",
108
124
  style: "solid",
109
125
  }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
126
+ export const idsColorBackgroundDefault = "#fafafb";
127
+ export const idsColorSurfaceBright = "#ffffff";
128
+ export const idsColorSurfaceMuted = "#F8F8FA";
110
129
  export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
111
130
  export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
112
131
  export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
@@ -115,12 +134,26 @@ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Backgr
115
134
  export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
116
135
  export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
117
136
  export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
137
+ export const idsColorElementTertiaryDefault = "#00000000"; // SEMANTIC - Background color for tertiary element resting state. Use for: transparent button background.
138
+ export const idsColorElementTertiaryHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
139
+ export const idsColorElementTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
140
+ export const idsColorElementTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
118
141
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
119
142
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
120
143
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
121
- export const idsColorBorderElementSecondary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
122
- export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
123
- export const idsColorBorderElementDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
124
- export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
125
- export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
126
- export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
144
+ export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
145
+ export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
146
+ export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
147
+ export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
148
+ export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
149
+ export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
150
+ export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
151
+ export const idsColorInputDefault = "#F8F8FA"; // SEMANTIC - Background color for input fields and input controls
152
+ export const idsColorInputHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
153
+ export const idsColorInputPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
154
+ export const idsColorInputOninput = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
155
+ export const idsColorInputOninputinverted = "#ffffff"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
156
+ export const idsColorInputOninputmuted = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
157
+ export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)";
158
+ export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)";
159
+ export const idsColorBoxshadowAlpha48 = "lch(5.0543 1.8805 272.92 / 0.48)";
package/dist/esm/tokens.light.js CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
6
6
  export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
7
- export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
7
+ export const idsCoreColorNeutral200 = "#F8F8FA"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
8
8
  export const idsCoreColorNeutral300 = "#ebebef"; // PRIMITIVE - Light gray. Do NOT use directly on components.
9
9
  export const idsCoreColorNeutral400 = "#e0e1e4"; // PRIMITIVE - Light-mid gray. Do NOT use directly on components.
10
10
  export const idsCoreColorNeutral500 = "#c5c6cb"; // PRIMITIVE - Mid gray. Do NOT use directly on components.
@@ -78,6 +78,12 @@ 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 idsTypographyLabel075x = {
82
+ fontFamily: "Tomato Grotesk",
83
+ fontSize: "12px",
84
+ lineHeight: "16px",
85
+ fontWeight: "600",
86
+ }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
81
87
  export const idsTypographyLabel1x = {
82
88
  fontFamily: "Tomato Grotesk",
83
89
  fontSize: "16px",
@@ -91,22 +97,35 @@ export const idsBorderElementPrimary = {
91
97
  color: "#00000000",
92
98
  width: "2px",
93
99
  style: "solid",
94
- };
100
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
95
101
  export const idsBorderElementSecondary = {
96
102
  color: "#2d2f35",
97
103
  width: "2px",
98
104
  style: "solid",
99
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
105
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
100
106
  export const idsBorderElementDisabled = {
101
107
  color: "#adaeb3",
102
108
  width: "2px",
103
109
  style: "solid",
104
110
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
111
+ export const idsBorderElementTertiary = {
112
+ color: "#00000000",
113
+ width: "2px",
114
+ style: "solid",
115
+ }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
116
+ export const idsBorderDefault = {
117
+ color: "#8e9099",
118
+ width: "1px",
119
+ style: "solid",
120
+ };
105
121
  export const idsBorderFocused = {
106
122
  color: "#7eaaff",
107
123
  width: "2px",
108
124
  style: "solid",
109
125
  }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
126
+ export const idsColorBackgroundDefault = "#fafafb";
127
+ export const idsColorSurfaceBright = "#ffffff";
128
+ export const idsColorSurfaceMuted = "#F8F8FA";
110
129
  export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
111
130
  export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
112
131
  export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
@@ -115,12 +134,26 @@ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Backgr
115
134
  export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
116
135
  export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
117
136
  export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
137
+ export const idsColorElementTertiaryDefault = "#00000000"; // SEMANTIC - Background color for tertiary element resting state. Use for: transparent button background.
138
+ export const idsColorElementTertiaryHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
139
+ export const idsColorElementTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
140
+ export const idsColorElementTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
118
141
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
119
142
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
120
143
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
121
- export const idsColorBorderElementSecondary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
122
- export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
123
- export const idsColorBorderElementDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
124
- export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
125
- export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
126
- export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
144
+ export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
145
+ export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
146
+ export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
147
+ export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
148
+ export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
149
+ export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
150
+ export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
151
+ export const idsColorInputDefault = "#F8F8FA"; // SEMANTIC - Background color for input fields and input controls
152
+ export const idsColorInputHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
153
+ export const idsColorInputPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
154
+ export const idsColorInputOninput = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
155
+ export const idsColorInputOninputinverted = "#ffffff"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
156
+ export const idsColorInputOninputmuted = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
157
+ export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)";
158
+ export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)";
159
+ export const idsColorBoxshadowAlpha48 = "lch(5.0543 1.8805 272.92 / 0.48)";