@inversestudio/design-tokens 1.0.3 → 1.0.5

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 -5
  2. package/dist/css/tokens.dark.css +6 -5
  3. package/dist/css/tokens.light.css +6 -5
  4. package/dist/esm/tokens.dark.js +11 -10
  5. package/dist/esm/tokens.js +11 -10
  6. package/dist/esm/tokens.light.js +11 -10
  7. package/dist/js/tokens.dark.js +11 -10
  8. package/dist/js/tokens.js +11 -10
  9. package/dist/js/tokens.light.js +11 -10
  10. package/dist/json/tokens.dark.json +9 -8
  11. package/dist/json/tokens.dark.nested.json +22 -17
  12. package/dist/json/tokens.json +9 -8
  13. package/dist/json/tokens.light.json +9 -8
  14. package/dist/json/tokens.light.nested.json +22 -17
  15. package/dist/json/tokens.nested.json +22 -17
  16. package/dist/scss/_tokens.dark.scss +13 -11
  17. package/dist/scss/_tokens.light.scss +12 -10
  18. package/dist/scss/_tokens.scss +12 -10
  19. package/dist/types/tokens.d.ts +27 -16
  20. package/dist/types/tokens.dark.d.ts +27 -16
  21. package/dist/types/tokens.light.d.ts +27 -16
  22. package/package.json +2 -2
package/dist/css/tokens.css CHANGED
@@ -93,10 +93,10 @@
93
93
  --ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
94
94
  --ids-borderradius-0-25x: 4px;
95
95
  --ids-borderradius-full: 1600px;
96
+ --ids-border-element-primary: 2px solid #00000000;
97
+ --ids-border-element-secondary: 2px solid #2d2f35;
98
+ --ids-border-element-disabled: 2px solid #adaeb3;
96
99
  --ids-border-focused: 2px solid #7eaaff;
97
- --ids-border-primary: 2px solid #2d2f35;
98
- --ids-border-disabled: 2px solid #adaeb3;
99
- --ids-border-transparent: 2px solid #00000000;
100
100
  --ids-color-element-primary-default: #2d2f35;
101
101
  --ids-color-element-primary-hover: #4d5057;
102
102
  --ids-color-element-primary-pressed: #101114;
@@ -108,8 +108,9 @@
108
108
  --ids-color-element-disabled: #adaeb3;
109
109
  --ids-color-element-disabledmuted: #00000000;
110
110
  --ids-color-element-ondisabled: #707784;
111
- --ids-color-border-primary: #2d2f35;
112
- --ids-color-border-disabled: #adaeb3;
111
+ --ids-color-border-element-secondary: #2d2f35;
112
+ --ids-color-border-element-primary: #00000000;
113
+ --ids-color-border-element-disabled: #adaeb3;
113
114
  --ids-color-border-muted: #e0e1e4;
114
115
  --ids-color-border-subtle: #f5f5f8;
115
116
  --ids-color-border-focus: #7eaaff;
package/dist/css/tokens.dark.css CHANGED
@@ -101,16 +101,17 @@
101
101
  --ids-color-element-disabled: #adaeb3;
102
102
  --ids-color-element-disabledmuted: #00000000;
103
103
  --ids-color-element-ondisabled: #707784;
104
- --ids-color-border-primary: #2d2f35;
105
- --ids-color-border-disabled: #adaeb3;
104
+ --ids-color-border-element-secondary: #2d2f35;
105
+ --ids-color-border-element-primary: #00000000;
106
+ --ids-color-border-element-disabled: #adaeb3;
106
107
  --ids-color-border-muted: #e0e1e4;
107
108
  --ids-color-border-subtle: #f5f5f8;
108
109
  --ids-color-border-focus: #7eaaff;
109
110
  --ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
110
111
  --ids-borderradius-0-25x: 4px;
111
112
  --ids-borderradius-full: 1600px;
113
+ --ids-border-element-primary: 2px solid #00000000;
114
+ --ids-border-element-secondary: 2px solid #2d2f35;
115
+ --ids-border-element-disabled: 2px solid #adaeb3;
112
116
  --ids-border-focused: 2px solid #7eaaff;
113
- --ids-border-primary: 2px solid #2d2f35;
114
- --ids-border-disabled: 2px solid #adaeb3;
115
- --ids-border-transparent: 2px solid #00000000;
116
117
  }
package/dist/css/tokens.light.css CHANGED
@@ -93,10 +93,10 @@
93
93
  --ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
94
94
  --ids-borderradius-0-25x: 4px;
95
95
  --ids-borderradius-full: 1600px;
96
+ --ids-border-element-primary: 2px solid #00000000;
97
+ --ids-border-element-secondary: 2px solid #2d2f35;
98
+ --ids-border-element-disabled: 2px solid #adaeb3;
96
99
  --ids-border-focused: 2px solid #7eaaff;
97
- --ids-border-primary: 2px solid #2d2f35;
98
- --ids-border-disabled: 2px solid #adaeb3;
99
- --ids-border-transparent: 2px solid #00000000;
100
100
  --ids-color-element-primary-default: #2d2f35;
101
101
  --ids-color-element-primary-hover: #4d5057;
102
102
  --ids-color-element-primary-pressed: #101114;
@@ -108,8 +108,9 @@
108
108
  --ids-color-element-disabled: #adaeb3;
109
109
  --ids-color-element-disabledmuted: #00000000;
110
110
  --ids-color-element-ondisabled: #707784;
111
- --ids-color-border-primary: #2d2f35;
112
- --ids-color-border-disabled: #adaeb3;
111
+ --ids-color-border-element-secondary: #2d2f35;
112
+ --ids-color-border-element-primary: #00000000;
113
+ --ids-color-border-element-disabled: #adaeb3;
113
114
  --ids-color-border-muted: #e0e1e4;
114
115
  --ids-color-border-subtle: #f5f5f8;
115
116
  --ids-color-border-focus: #7eaaff;
package/dist/esm/tokens.dark.js CHANGED
@@ -89,8 +89,9 @@ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Fore
89
89
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
90
90
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
91
91
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
92
- export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
93
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
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.
94
95
  export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
95
96
  export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
96
97
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
@@ -102,23 +103,23 @@ export const idsTypographyLabel1x = {
102
103
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
103
104
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
104
105
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
105
- export const idsBorderFocused = {
106
- color: "#7eaaff",
106
+ export const idsBorderElementPrimary = {
107
+ color: "#00000000",
107
108
  width: "2px",
108
109
  style: "solid",
109
- }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
110
- export const idsBorderPrimary = {
110
+ };
111
+ export const idsBorderElementSecondary = {
111
112
  color: "#2d2f35",
112
113
  width: "2px",
113
114
  style: "solid",
114
115
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
115
- export const idsBorderDisabled = {
116
+ export const idsBorderElementDisabled = {
116
117
  color: "#adaeb3",
117
118
  width: "2px",
118
119
  style: "solid",
119
120
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
120
- export const idsBorderTransparent = {
121
- color: "#00000000",
121
+ export const idsBorderFocused = {
122
+ color: "#7eaaff",
122
123
  width: "2px",
123
124
  style: "solid",
124
- };
125
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
package/dist/esm/tokens.js CHANGED
@@ -86,26 +86,26 @@ export const idsTypographyLabel1x = {
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
88
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
89
- export const idsBorderFocused = {
90
- color: "#7eaaff",
89
+ export const idsBorderElementPrimary = {
90
+ color: "#00000000",
91
91
  width: "2px",
92
92
  style: "solid",
93
- }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
94
- export const idsBorderPrimary = {
93
+ };
94
+ export const idsBorderElementSecondary = {
95
95
  color: "#2d2f35",
96
96
  width: "2px",
97
97
  style: "solid",
98
98
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
- export const idsBorderDisabled = {
99
+ export const idsBorderElementDisabled = {
100
100
  color: "#adaeb3",
101
101
  width: "2px",
102
102
  style: "solid",
103
103
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
104
- export const idsBorderTransparent = {
105
- color: "#00000000",
104
+ export const idsBorderFocused = {
105
+ color: "#7eaaff",
106
106
  width: "2px",
107
107
  style: "solid",
108
- };
108
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
109
109
  export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
110
110
  export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
111
111
  export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
@@ -117,8 +117,9 @@ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Fore
117
117
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
118
118
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
119
119
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
120
- export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
121
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
120
+ export const idsColorBorderElementSecondary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
121
+ export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
122
+ export const idsColorBorderElementDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
122
123
  export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
123
124
  export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
124
125
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
package/dist/esm/tokens.light.js CHANGED
@@ -86,26 +86,26 @@ export const idsTypographyLabel1x = {
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
88
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
89
- export const idsBorderFocused = {
90
- color: "#7eaaff",
89
+ export const idsBorderElementPrimary = {
90
+ color: "#00000000",
91
91
  width: "2px",
92
92
  style: "solid",
93
- }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
94
- export const idsBorderPrimary = {
93
+ };
94
+ export const idsBorderElementSecondary = {
95
95
  color: "#2d2f35",
96
96
  width: "2px",
97
97
  style: "solid",
98
98
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
- export const idsBorderDisabled = {
99
+ export const idsBorderElementDisabled = {
100
100
  color: "#adaeb3",
101
101
  width: "2px",
102
102
  style: "solid",
103
103
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
104
- export const idsBorderTransparent = {
105
- color: "#00000000",
104
+ export const idsBorderFocused = {
105
+ color: "#7eaaff",
106
106
  width: "2px",
107
107
  style: "solid",
108
- };
108
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
109
109
  export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
110
110
  export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
111
111
  export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
@@ -117,8 +117,9 @@ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Fore
117
117
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
118
118
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
119
119
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
120
- export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
121
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
120
+ export const idsColorBorderElementSecondary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
121
+ export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
122
+ export const idsColorBorderElementDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
122
123
  export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
123
124
  export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
124
125
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
package/dist/js/tokens.dark.js CHANGED
@@ -89,8 +89,9 @@ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Fore
89
89
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
90
90
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
91
91
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
92
- export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
93
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
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.
94
95
  export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
95
96
  export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
96
97
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
@@ -102,23 +103,23 @@ export const idsTypographyLabel1x = {
102
103
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
103
104
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
104
105
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
105
- export const idsBorderFocused = {
106
- color: "#7eaaff",
106
+ export const idsBorderElementPrimary = {
107
+ color: "#00000000",
107
108
  width: "2px",
108
109
  style: "solid",
109
- }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
110
- export const idsBorderPrimary = {
110
+ };
111
+ export const idsBorderElementSecondary = {
111
112
  color: "#2d2f35",
112
113
  width: "2px",
113
114
  style: "solid",
114
115
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
115
- export const idsBorderDisabled = {
116
+ export const idsBorderElementDisabled = {
116
117
  color: "#adaeb3",
117
118
  width: "2px",
118
119
  style: "solid",
119
120
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
120
- export const idsBorderTransparent = {
121
- color: "#00000000",
121
+ export const idsBorderFocused = {
122
+ color: "#7eaaff",
122
123
  width: "2px",
123
124
  style: "solid",
124
- };
125
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
package/dist/js/tokens.js CHANGED
@@ -86,26 +86,26 @@ export const idsTypographyLabel1x = {
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
88
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
89
- export const idsBorderFocused = {
90
- color: "#7eaaff",
89
+ export const idsBorderElementPrimary = {
90
+ color: "#00000000",
91
91
  width: "2px",
92
92
  style: "solid",
93
- }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
94
- export const idsBorderPrimary = {
93
+ };
94
+ export const idsBorderElementSecondary = {
95
95
  color: "#2d2f35",
96
96
  width: "2px",
97
97
  style: "solid",
98
98
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
- export const idsBorderDisabled = {
99
+ export const idsBorderElementDisabled = {
100
100
  color: "#adaeb3",
101
101
  width: "2px",
102
102
  style: "solid",
103
103
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
104
- export const idsBorderTransparent = {
105
- color: "#00000000",
104
+ export const idsBorderFocused = {
105
+ color: "#7eaaff",
106
106
  width: "2px",
107
107
  style: "solid",
108
- };
108
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
109
109
  export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
110
110
  export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
111
111
  export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
@@ -117,8 +117,9 @@ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Fore
117
117
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
118
118
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
119
119
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
120
- export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
121
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
120
+ export const idsColorBorderElementSecondary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
121
+ export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
122
+ export const idsColorBorderElementDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
122
123
  export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
123
124
  export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
124
125
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
package/dist/js/tokens.light.js CHANGED
@@ -86,26 +86,26 @@ export const idsTypographyLabel1x = {
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
88
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
89
- export const idsBorderFocused = {
90
- color: "#7eaaff",
89
+ export const idsBorderElementPrimary = {
90
+ color: "#00000000",
91
91
  width: "2px",
92
92
  style: "solid",
93
- }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
94
- export const idsBorderPrimary = {
93
+ };
94
+ export const idsBorderElementSecondary = {
95
95
  color: "#2d2f35",
96
96
  width: "2px",
97
97
  style: "solid",
98
98
  }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
- export const idsBorderDisabled = {
99
+ export const idsBorderElementDisabled = {
100
100
  color: "#adaeb3",
101
101
  width: "2px",
102
102
  style: "solid",
103
103
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
104
- export const idsBorderTransparent = {
105
- color: "#00000000",
104
+ export const idsBorderFocused = {
105
+ color: "#7eaaff",
106
106
  width: "2px",
107
107
  style: "solid",
108
- };
108
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
109
109
  export const idsColorElementPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
110
110
  export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
111
111
  export const idsColorElementPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
@@ -117,8 +117,9 @@ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Fore
117
117
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
118
118
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
119
119
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
120
- export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
121
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
120
+ export const idsColorBorderElementSecondary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
121
+ export const idsColorBorderElementPrimary = "#00000000"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
122
+ export const idsColorBorderElementDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
122
123
  export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
123
124
  export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
124
125
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
package/dist/json/tokens.dark.json CHANGED
@@ -86,8 +86,9 @@
86
86
  "idsColorElementDisabled": "#adaeb3",
87
87
  "idsColorElementDisabledmuted": "#00000000",
88
88
  "idsColorElementOndisabled": "#707784",
89
- "idsColorBorderPrimary": "#2d2f35",
90
- "idsColorBorderDisabled": "#adaeb3",
89
+ "idsColorBorderElementSecondary": "#2d2f35",
90
+ "idsColorBorderElementPrimary": "#00000000",
91
+ "idsColorBorderElementDisabled": "#adaeb3",
91
92
  "idsColorBorderMuted": "#e0e1e4",
92
93
  "idsColorBorderSubtle": "#f5f5f8",
93
94
  "idsColorBorderFocus": "#7eaaff",
@@ -99,23 +100,23 @@
99
100
  },
100
101
  "idsBorderradius025x": "4px",
101
102
  "idsBorderradiusFull": "1600px",
102
- "idsBorderFocused": {
103
- "color": "#7eaaff",
103
+ "idsBorderElementPrimary": {
104
+ "color": "#00000000",
104
105
  "width": "2px",
105
106
  "style": "solid"
106
107
  },
107
- "idsBorderPrimary": {
108
+ "idsBorderElementSecondary": {
108
109
  "color": "#2d2f35",
109
110
  "width": "2px",
110
111
  "style": "solid"
111
112
  },
112
- "idsBorderDisabled": {
113
+ "idsBorderElementDisabled": {
113
114
  "color": "#adaeb3",
114
115
  "width": "2px",
115
116
  "style": "solid"
116
117
  },
117
- "idsBorderTransparent": {
118
- "color": "#00000000",
118
+ "idsBorderFocused": {
119
+ "color": "#7eaaff",
119
120
  "width": "2px",
120
121
  "style": "solid"
121
122
  }
package/dist/json/tokens.dark.nested.json CHANGED
@@ -125,8 +125,11 @@
125
125
  "onDisabled": "#707784"
126
126
  },
127
127
  "border": {
128
- "primary": "#2d2f35",
129
- "disabled": "#adaeb3",
128
+ "element": {
129
+ "secondary": "#2d2f35",
130
+ "primary": "#00000000",
131
+ "disabled": "#adaeb3"
132
+ },
130
133
  "muted": "#e0e1e4",
131
134
  "subtle": "#f5f5f8",
132
135
  "focus": "#7eaaff"
@@ -147,25 +150,27 @@
147
150
  "full": "1600px"
148
151
  },
149
152
  "border": {
153
+ "element": {
154
+ "primary": {
155
+ "color": "#00000000",
156
+ "width": "2px",
157
+ "style": "solid"
158
+ },
159
+ "secondary": {
160
+ "color": "#2d2f35",
161
+ "width": "2px",
162
+ "style": "solid"
163
+ },
164
+ "disabled": {
165
+ "color": "#adaeb3",
166
+ "width": "2px",
167
+ "style": "solid"
168
+ }
169
+ },
150
170
  "focused": {
151
171
  "color": "#7eaaff",
152
172
  "width": "2px",
153
173
  "style": "solid"
154
- },
155
- "primary": {
156
- "color": "#2d2f35",
157
- "width": "2px",
158
- "style": "solid"
159
- },
160
- "disabled": {
161
- "color": "#adaeb3",
162
- "width": "2px",
163
- "style": "solid"
164
- },
165
- "transparent": {
166
- "color": "#00000000",
167
- "width": "2px",
168
- "style": "solid"
169
174
  }
170
175
  }
171
176
  }
package/dist/json/tokens.json CHANGED
@@ -83,23 +83,23 @@
83
83
  },
84
84
  "idsBorderradius025x": "4px",
85
85
  "idsBorderradiusFull": "1600px",
86
- "idsBorderFocused": {
87
- "color": "#7eaaff",
86
+ "idsBorderElementPrimary": {
87
+ "color": "#00000000",
88
88
  "width": "2px",
89
89
  "style": "solid"
90
90
  },
91
- "idsBorderPrimary": {
91
+ "idsBorderElementSecondary": {
92
92
  "color": "#2d2f35",
93
93
  "width": "2px",
94
94
  "style": "solid"
95
95
  },
96
- "idsBorderDisabled": {
96
+ "idsBorderElementDisabled": {
97
97
  "color": "#adaeb3",
98
98
  "width": "2px",
99
99
  "style": "solid"
100
100
  },
101
- "idsBorderTransparent": {
102
- "color": "#00000000",
101
+ "idsBorderFocused": {
102
+ "color": "#7eaaff",
103
103
  "width": "2px",
104
104
  "style": "solid"
105
105
  },
@@ -114,8 +114,9 @@
114
114
  "idsColorElementDisabled": "#adaeb3",
115
115
  "idsColorElementDisabledmuted": "#00000000",
116
116
  "idsColorElementOndisabled": "#707784",
117
- "idsColorBorderPrimary": "#2d2f35",
118
- "idsColorBorderDisabled": "#adaeb3",
117
+ "idsColorBorderElementSecondary": "#2d2f35",
118
+ "idsColorBorderElementPrimary": "#00000000",
119
+ "idsColorBorderElementDisabled": "#adaeb3",
119
120
  "idsColorBorderMuted": "#e0e1e4",
120
121
  "idsColorBorderSubtle": "#f5f5f8",
121
122
  "idsColorBorderFocus": "#7eaaff"
package/dist/json/tokens.light.json CHANGED
@@ -83,23 +83,23 @@
83
83
  },
84
84
  "idsBorderradius025x": "4px",
85
85
  "idsBorderradiusFull": "1600px",
86
- "idsBorderFocused": {
87
- "color": "#7eaaff",
86
+ "idsBorderElementPrimary": {
87
+ "color": "#00000000",
88
88
  "width": "2px",
89
89
  "style": "solid"
90
90
  },
91
- "idsBorderPrimary": {
91
+ "idsBorderElementSecondary": {
92
92
  "color": "#2d2f35",
93
93
  "width": "2px",
94
94
  "style": "solid"
95
95
  },
96
- "idsBorderDisabled": {
96
+ "idsBorderElementDisabled": {
97
97
  "color": "#adaeb3",
98
98
  "width": "2px",
99
99
  "style": "solid"
100
100
  },
101
- "idsBorderTransparent": {
102
- "color": "#00000000",
101
+ "idsBorderFocused": {
102
+ "color": "#7eaaff",
103
103
  "width": "2px",
104
104
  "style": "solid"
105
105
  },
@@ -114,8 +114,9 @@
114
114
  "idsColorElementDisabled": "#adaeb3",
115
115
  "idsColorElementDisabledmuted": "#00000000",
116
116
  "idsColorElementOndisabled": "#707784",
117
- "idsColorBorderPrimary": "#2d2f35",
118
- "idsColorBorderDisabled": "#adaeb3",
117
+ "idsColorBorderElementSecondary": "#2d2f35",
118
+ "idsColorBorderElementPrimary": "#00000000",
119
+ "idsColorBorderElementDisabled": "#adaeb3",
119
120
  "idsColorBorderMuted": "#e0e1e4",
120
121
  "idsColorBorderSubtle": "#f5f5f8",
121
122
  "idsColorBorderFocus": "#7eaaff"
package/dist/json/tokens.light.nested.json CHANGED
@@ -121,25 +121,27 @@
121
121
  "full": "1600px"
122
122
  },
123
123
  "border": {
124
+ "element": {
125
+ "primary": {
126
+ "color": "#00000000",
127
+ "width": "2px",
128
+ "style": "solid"
129
+ },
130
+ "secondary": {
131
+ "color": "#2d2f35",
132
+ "width": "2px",
133
+ "style": "solid"
134
+ },
135
+ "disabled": {
136
+ "color": "#adaeb3",
137
+ "width": "2px",
138
+ "style": "solid"
139
+ }
140
+ },
124
141
  "focused": {
125
142
  "color": "#7eaaff",
126
143
  "width": "2px",
127
144
  "style": "solid"
128
- },
129
- "primary": {
130
- "color": "#2d2f35",
131
- "width": "2px",
132
- "style": "solid"
133
- },
134
- "disabled": {
135
- "color": "#adaeb3",
136
- "width": "2px",
137
- "style": "solid"
138
- },
139
- "transparent": {
140
- "color": "#00000000",
141
- "width": "2px",
142
- "style": "solid"
143
145
  }
144
146
  },
145
147
  "color": {
@@ -161,8 +163,11 @@
161
163
  "onDisabled": "#707784"
162
164
  },
163
165
  "border": {
164
- "primary": "#2d2f35",
165
- "disabled": "#adaeb3",
166
+ "element": {
167
+ "secondary": "#2d2f35",
168
+ "primary": "#00000000",
169
+ "disabled": "#adaeb3"
170
+ },
166
171
  "muted": "#e0e1e4",
167
172
  "subtle": "#f5f5f8",
168
173
  "focus": "#7eaaff"
package/dist/json/tokens.nested.json CHANGED
@@ -121,25 +121,27 @@
121
121
  "full": "1600px"
122
122
  },
123
123
  "border": {
124
+ "element": {
125
+ "primary": {
126
+ "color": "#00000000",
127
+ "width": "2px",
128
+ "style": "solid"
129
+ },
130
+ "secondary": {
131
+ "color": "#2d2f35",
132
+ "width": "2px",
133
+ "style": "solid"
134
+ },
135
+ "disabled": {
136
+ "color": "#adaeb3",
137
+ "width": "2px",
138
+ "style": "solid"
139
+ }
140
+ },
124
141
  "focused": {
125
142
  "color": "#7eaaff",
126
143
  "width": "2px",
127
144
  "style": "solid"
128
- },
129
- "primary": {
130
- "color": "#2d2f35",
131
- "width": "2px",
132
- "style": "solid"
133
- },
134
- "disabled": {
135
- "color": "#adaeb3",
136
- "width": "2px",
137
- "style": "solid"
138
- },
139
- "transparent": {
140
- "color": "#00000000",
141
- "width": "2px",
142
- "style": "solid"
143
145
  }
144
146
  },
145
147
  "color": {
@@ -161,8 +163,11 @@
161
163
  "onDisabled": "#707784"
162
164
  },
163
165
  "border": {
164
- "primary": "#2d2f35",
165
- "disabled": "#adaeb3",
166
+ "element": {
167
+ "secondary": "#2d2f35",
168
+ "primary": "#00000000",
169
+ "disabled": "#adaeb3"
170
+ },
166
171
  "muted": "#e0e1e4",
167
172
  "subtle": "#f5f5f8",
168
173
  "focus": "#7eaaff"
package/dist/scss/_tokens.dark.scss CHANGED
@@ -91,18 +91,19 @@ $ids-color-element-secondary-onsecondary: #2d2f35;
91
91
  $ids-color-element-disabled: #adaeb3;
92
92
  $ids-color-element-disabledmuted: #00000000;
93
93
  $ids-color-element-ondisabled: #707784;
94
- $ids-color-border-primary: #2d2f35;
95
- $ids-color-border-disabled: #adaeb3;
94
+ $ids-color-border-element-secondary: #2d2f35;
95
+ $ids-color-border-element-primary: #00000000;
96
+ $ids-color-border-element-disabled: #adaeb3;
96
97
  $ids-color-border-muted: #e0e1e4;
97
98
  $ids-color-border-subtle: #f5f5f8;
98
99
  $ids-color-border-focus: #7eaaff;
99
100
  $ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
100
101
  $ids-borderradius-0-25x: 4px;
101
102
  $ids-borderradius-full: 1600px;
103
+ $ids-border-element-primary: 2px solid #00000000;
104
+ $ids-border-element-secondary: 2px solid #2d2f35;
105
+ $ids-border-element-disabled: 2px solid #adaeb3;
102
106
  $ids-border-focused: 2px solid #7eaaff;
103
- $ids-border-primary: 2px solid #2d2f35;
104
- $ids-border-disabled: 2px solid #adaeb3;
105
- $ids-border-transparent: 2px solid #00000000;
106
107
 
107
108
  // Token map for programmatic access
108
109
  $ids-tokens: (
@@ -193,18 +194,19 @@ $ids-tokens: (
193
194
  'ids-color-element-disabled': $ids-color-element-disabled,
194
195
  'ids-color-element-disabledmuted': $ids-color-element-disabledmuted,
195
196
  'ids-color-element-ondisabled': $ids-color-element-ondisabled,
196
- 'ids-color-border-primary': $ids-color-border-primary,
197
- 'ids-color-border-disabled': $ids-color-border-disabled,
197
+ 'ids-color-border-element-secondary': $ids-color-border-element-secondary,
198
+ 'ids-color-border-element-primary': $ids-color-border-element-primary,
199
+ 'ids-color-border-element-disabled': $ids-color-border-element-disabled,
198
200
  'ids-color-border-muted': $ids-color-border-muted,
199
201
  'ids-color-border-subtle': $ids-color-border-subtle,
200
202
  'ids-color-border-focus': $ids-color-border-focus,
201
203
  'ids-typography-label-1x': $ids-typography-label-1x,
202
204
  'ids-borderradius-0-25x': $ids-borderradius-0-25x,
203
205
  'ids-borderradius-full': $ids-borderradius-full,
204
- 'ids-border-focused': $ids-border-focused,
205
- 'ids-border-primary': $ids-border-primary,
206
- 'ids-border-disabled': $ids-border-disabled,
207
- 'ids-border-transparent': $ids-border-transparent
206
+ 'ids-border-element-primary': $ids-border-element-primary,
207
+ 'ids-border-element-secondary': $ids-border-element-secondary,
208
+ 'ids-border-element-disabled': $ids-border-element-disabled,
209
+ 'ids-border-focused': $ids-border-focused
208
210
  );
209
211
 
210
212
  // Utility function to get token value
package/dist/scss/_tokens.light.scss CHANGED
@@ -83,10 +83,10 @@ $ids-core-borderwidth-thick: 2px;
83
83
  $ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
84
84
  $ids-borderradius-0-25x: 4px;
85
85
  $ids-borderradius-full: 1600px;
86
+ $ids-border-element-primary: 2px solid #00000000;
87
+ $ids-border-element-secondary: 2px solid #2d2f35;
88
+ $ids-border-element-disabled: 2px solid #adaeb3;
86
89
  $ids-border-focused: 2px solid #7eaaff;
87
- $ids-border-primary: 2px solid #2d2f35;
88
- $ids-border-disabled: 2px solid #adaeb3;
89
- $ids-border-transparent: 2px solid #00000000;
90
90
  $ids-color-element-primary-default: #2d2f35;
91
91
  $ids-color-element-primary-hover: #4d5057;
92
92
  $ids-color-element-primary-pressed: #101114;
@@ -98,8 +98,9 @@ $ids-color-element-secondary-onsecondary: #2d2f35;
98
98
  $ids-color-element-disabled: #adaeb3;
99
99
  $ids-color-element-disabledmuted: #00000000;
100
100
  $ids-color-element-ondisabled: #707784;
101
- $ids-color-border-primary: #2d2f35;
102
- $ids-color-border-disabled: #adaeb3;
101
+ $ids-color-border-element-secondary: #2d2f35;
102
+ $ids-color-border-element-primary: #00000000;
103
+ $ids-color-border-element-disabled: #adaeb3;
103
104
  $ids-color-border-muted: #e0e1e4;
104
105
  $ids-color-border-subtle: #f5f5f8;
105
106
  $ids-color-border-focus: #7eaaff;
@@ -185,10 +186,10 @@ $ids-tokens: (
185
186
  'ids-typography-label-1x': $ids-typography-label-1x,
186
187
  'ids-borderradius-0-25x': $ids-borderradius-0-25x,
187
188
  'ids-borderradius-full': $ids-borderradius-full,
189
+ 'ids-border-element-primary': $ids-border-element-primary,
190
+ 'ids-border-element-secondary': $ids-border-element-secondary,
191
+ 'ids-border-element-disabled': $ids-border-element-disabled,
188
192
  'ids-border-focused': $ids-border-focused,
189
- 'ids-border-primary': $ids-border-primary,
190
- 'ids-border-disabled': $ids-border-disabled,
191
- 'ids-border-transparent': $ids-border-transparent,
192
193
  'ids-color-element-primary-default': $ids-color-element-primary-default,
193
194
  'ids-color-element-primary-hover': $ids-color-element-primary-hover,
194
195
  'ids-color-element-primary-pressed': $ids-color-element-primary-pressed,
@@ -200,8 +201,9 @@ $ids-tokens: (
200
201
  'ids-color-element-disabled': $ids-color-element-disabled,
201
202
  'ids-color-element-disabledmuted': $ids-color-element-disabledmuted,
202
203
  'ids-color-element-ondisabled': $ids-color-element-ondisabled,
203
- 'ids-color-border-primary': $ids-color-border-primary,
204
- 'ids-color-border-disabled': $ids-color-border-disabled,
204
+ 'ids-color-border-element-secondary': $ids-color-border-element-secondary,
205
+ 'ids-color-border-element-primary': $ids-color-border-element-primary,
206
+ 'ids-color-border-element-disabled': $ids-color-border-element-disabled,
205
207
  'ids-color-border-muted': $ids-color-border-muted,
206
208
  'ids-color-border-subtle': $ids-color-border-subtle,
207
209
  'ids-color-border-focus': $ids-color-border-focus
package/dist/scss/_tokens.scss CHANGED
@@ -83,10 +83,10 @@ $ids-core-borderwidth-thick: 2px;
83
83
  $ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
84
84
  $ids-borderradius-0-25x: 4px;
85
85
  $ids-borderradius-full: 1600px;
86
+ $ids-border-element-primary: 2px solid #00000000;
87
+ $ids-border-element-secondary: 2px solid #2d2f35;
88
+ $ids-border-element-disabled: 2px solid #adaeb3;
86
89
  $ids-border-focused: 2px solid #7eaaff;
87
- $ids-border-primary: 2px solid #2d2f35;
88
- $ids-border-disabled: 2px solid #adaeb3;
89
- $ids-border-transparent: 2px solid #00000000;
90
90
  $ids-color-element-primary-default: #2d2f35;
91
91
  $ids-color-element-primary-hover: #4d5057;
92
92
  $ids-color-element-primary-pressed: #101114;
@@ -98,8 +98,9 @@ $ids-color-element-secondary-onsecondary: #2d2f35;
98
98
  $ids-color-element-disabled: #adaeb3;
99
99
  $ids-color-element-disabledmuted: #00000000;
100
100
  $ids-color-element-ondisabled: #707784;
101
- $ids-color-border-primary: #2d2f35;
102
- $ids-color-border-disabled: #adaeb3;
101
+ $ids-color-border-element-secondary: #2d2f35;
102
+ $ids-color-border-element-primary: #00000000;
103
+ $ids-color-border-element-disabled: #adaeb3;
103
104
  $ids-color-border-muted: #e0e1e4;
104
105
  $ids-color-border-subtle: #f5f5f8;
105
106
  $ids-color-border-focus: #7eaaff;
@@ -185,10 +186,10 @@ $ids-tokens: (
185
186
  'ids-typography-label-1x': $ids-typography-label-1x,
186
187
  'ids-borderradius-0-25x': $ids-borderradius-0-25x,
187
188
  'ids-borderradius-full': $ids-borderradius-full,
189
+ 'ids-border-element-primary': $ids-border-element-primary,
190
+ 'ids-border-element-secondary': $ids-border-element-secondary,
191
+ 'ids-border-element-disabled': $ids-border-element-disabled,
188
192
  'ids-border-focused': $ids-border-focused,
189
- 'ids-border-primary': $ids-border-primary,
190
- 'ids-border-disabled': $ids-border-disabled,
191
- 'ids-border-transparent': $ids-border-transparent,
192
193
  'ids-color-element-primary-default': $ids-color-element-primary-default,
193
194
  'ids-color-element-primary-hover': $ids-color-element-primary-hover,
194
195
  'ids-color-element-primary-pressed': $ids-color-element-primary-pressed,
@@ -200,8 +201,9 @@ $ids-tokens: (
200
201
  'ids-color-element-disabled': $ids-color-element-disabled,
201
202
  'ids-color-element-disabledmuted': $ids-color-element-disabledmuted,
202
203
  'ids-color-element-ondisabled': $ids-color-element-ondisabled,
203
- 'ids-color-border-primary': $ids-color-border-primary,
204
- 'ids-color-border-disabled': $ids-color-border-disabled,
204
+ 'ids-color-border-element-secondary': $ids-color-border-element-secondary,
205
+ 'ids-color-border-element-primary': $ids-color-border-element-primary,
206
+ 'ids-color-border-element-disabled': $ids-color-border-element-disabled,
205
207
  'ids-color-border-muted': $ids-color-border-muted,
206
208
  'ids-color-border-subtle': $ids-color-border-subtle,
207
209
  'ids-color-border-focus': $ids-color-border-focus
package/dist/types/tokens.d.ts CHANGED
@@ -122,10 +122,12 @@ export interface IDSTokens {
122
122
  full: string;
123
123
  };
124
124
  border: {
125
+ element: {
126
+ primary: string;
127
+ secondary: string;
128
+ disabled: string;
129
+ };
125
130
  focused: string;
126
- primary: string;
127
- disabled: string;
128
- transparent: string;
129
131
  };
130
132
  color: {
131
133
  element: {
@@ -146,8 +148,11 @@ export interface IDSTokens {
146
148
  onDisabled: string;
147
149
  };
148
150
  border: {
149
- primary: string;
150
- disabled: string;
151
+ element: {
152
+ secondary: string;
153
+ primary: string;
154
+ disabled: string;
155
+ };
151
156
  muted: string;
152
157
  subtle: string;
153
158
  focus: string;
@@ -274,10 +279,12 @@ export const tokens: IDSTokens = {
274
279
  full: '1600px'
275
280
  },
276
281
  border: {
277
- focused: '[object Object]',
278
- primary: '[object Object]',
279
- disabled: '[object Object]',
280
- transparent: '[object Object]'
282
+ element: {
283
+ primary: '[object Object]',
284
+ secondary: '[object Object]',
285
+ disabled: '[object Object]'
286
+ },
287
+ focused: '[object Object]'
281
288
  },
282
289
  color: {
283
290
  element: {
@@ -298,8 +305,11 @@ export const tokens: IDSTokens = {
298
305
  onDisabled: '#707784'
299
306
  },
300
307
  border: {
301
- primary: '#2d2f35',
302
- disabled: '#adaeb3',
308
+ element: {
309
+ secondary: '#2d2f35',
310
+ primary: '#00000000',
311
+ disabled: '#adaeb3'
312
+ },
303
313
  muted: '#e0e1e4',
304
314
  subtle: '#f5f5f8',
305
315
  focus: '#7eaaff'
@@ -388,10 +398,10 @@ export const idsCoreBorderwidthThick = '2px';
388
398
  export const idsTypographyLabel1x = '[object Object]';
389
399
  export const idsBorderradius025x = '4px';
390
400
  export const idsBorderradiusFull = '1600px';
401
+ export const idsBorderElementPrimary = '[object Object]';
402
+ export const idsBorderElementSecondary = '[object Object]';
403
+ export const idsBorderElementDisabled = '[object Object]';
391
404
  export const idsBorderFocused = '[object Object]';
392
- export const idsBorderPrimary = '[object Object]';
393
- export const idsBorderDisabled = '[object Object]';
394
- export const idsBorderTransparent = '[object Object]';
395
405
  export const idsColorElementPrimaryDefault = '#2d2f35';
396
406
  export const idsColorElementPrimaryHover = '#4d5057';
397
407
  export const idsColorElementPrimaryPressed = '#101114';
@@ -403,8 +413,9 @@ export const idsColorElementSecondaryOnsecondary = '#2d2f35';
403
413
  export const idsColorElementDisabled = '#adaeb3';
404
414
  export const idsColorElementDisabledmuted = '#00000000';
405
415
  export const idsColorElementOndisabled = '#707784';
406
- export const idsColorBorderPrimary = '#2d2f35';
407
- export const idsColorBorderDisabled = '#adaeb3';
416
+ export const idsColorBorderElementSecondary = '#2d2f35';
417
+ export const idsColorBorderElementPrimary = '#00000000';
418
+ export const idsColorBorderElementDisabled = '#adaeb3';
408
419
  export const idsColorBorderMuted = '#e0e1e4';
409
420
  export const idsColorBorderSubtle = '#f5f5f8';
410
421
  export const idsColorBorderFocus = '#7eaaff';
package/dist/types/tokens.dark.d.ts CHANGED
@@ -131,8 +131,11 @@ export interface IDSTokens {
131
131
  onDisabled: string;
132
132
  };
133
133
  border: {
134
- primary: string;
135
- disabled: string;
134
+ element: {
135
+ secondary: string;
136
+ primary: string;
137
+ disabled: string;
138
+ };
136
139
  muted: string;
137
140
  subtle: string;
138
141
  focus: string;
@@ -148,10 +151,12 @@ export interface IDSTokens {
148
151
  full: string;
149
152
  };
150
153
  border: {
154
+ element: {
155
+ primary: string;
156
+ secondary: string;
157
+ disabled: string;
158
+ };
151
159
  focused: string;
152
- primary: string;
153
- disabled: string;
154
- transparent: string;
155
160
  };
156
161
  };
157
162
  }
@@ -283,8 +288,11 @@ export const tokens: IDSTokens = {
283
288
  onDisabled: '#707784'
284
289
  },
285
290
  border: {
286
- primary: '#2d2f35',
287
- disabled: '#adaeb3',
291
+ element: {
292
+ secondary: '#2d2f35',
293
+ primary: '#00000000',
294
+ disabled: '#adaeb3'
295
+ },
288
296
  muted: '#e0e1e4',
289
297
  subtle: '#f5f5f8',
290
298
  focus: '#7eaaff'
@@ -300,10 +308,12 @@ export const tokens: IDSTokens = {
300
308
  full: '1600px'
301
309
  },
302
310
  border: {
303
- focused: '[object Object]',
304
- primary: '[object Object]',
305
- disabled: '[object Object]',
306
- transparent: '[object Object]'
311
+ element: {
312
+ primary: '[object Object]',
313
+ secondary: '[object Object]',
314
+ disabled: '[object Object]'
315
+ },
316
+ focused: '[object Object]'
307
317
  }
308
318
  }
309
319
  };
@@ -396,17 +406,18 @@ export const idsColorElementSecondaryOnsecondary = '#2d2f35';
396
406
  export const idsColorElementDisabled = '#adaeb3';
397
407
  export const idsColorElementDisabledmuted = '#00000000';
398
408
  export const idsColorElementOndisabled = '#707784';
399
- export const idsColorBorderPrimary = '#2d2f35';
400
- export const idsColorBorderDisabled = '#adaeb3';
409
+ export const idsColorBorderElementSecondary = '#2d2f35';
410
+ export const idsColorBorderElementPrimary = '#00000000';
411
+ export const idsColorBorderElementDisabled = '#adaeb3';
401
412
  export const idsColorBorderMuted = '#e0e1e4';
402
413
  export const idsColorBorderSubtle = '#f5f5f8';
403
414
  export const idsColorBorderFocus = '#7eaaff';
404
415
  export const idsTypographyLabel1x = '[object Object]';
405
416
  export const idsBorderradius025x = '4px';
406
417
  export const idsBorderradiusFull = '1600px';
418
+ export const idsBorderElementPrimary = '[object Object]';
419
+ export const idsBorderElementSecondary = '[object Object]';
420
+ export const idsBorderElementDisabled = '[object Object]';
407
421
  export const idsBorderFocused = '[object Object]';
408
- export const idsBorderPrimary = '[object Object]';
409
- export const idsBorderDisabled = '[object Object]';
410
- export const idsBorderTransparent = '[object Object]';
411
422
 
412
423
  export default tokens;
package/dist/types/tokens.light.d.ts CHANGED
@@ -122,10 +122,12 @@ export interface IDSTokens {
122
122
  full: string;
123
123
  };
124
124
  border: {
125
+ element: {
126
+ primary: string;
127
+ secondary: string;
128
+ disabled: string;
129
+ };
125
130
  focused: string;
126
- primary: string;
127
- disabled: string;
128
- transparent: string;
129
131
  };
130
132
  color: {
131
133
  element: {
@@ -146,8 +148,11 @@ export interface IDSTokens {
146
148
  onDisabled: string;
147
149
  };
148
150
  border: {
149
- primary: string;
150
- disabled: string;
151
+ element: {
152
+ secondary: string;
153
+ primary: string;
154
+ disabled: string;
155
+ };
151
156
  muted: string;
152
157
  subtle: string;
153
158
  focus: string;
@@ -274,10 +279,12 @@ export const tokens: IDSTokens = {
274
279
  full: '1600px'
275
280
  },
276
281
  border: {
277
- focused: '[object Object]',
278
- primary: '[object Object]',
279
- disabled: '[object Object]',
280
- transparent: '[object Object]'
282
+ element: {
283
+ primary: '[object Object]',
284
+ secondary: '[object Object]',
285
+ disabled: '[object Object]'
286
+ },
287
+ focused: '[object Object]'
281
288
  },
282
289
  color: {
283
290
  element: {
@@ -298,8 +305,11 @@ export const tokens: IDSTokens = {
298
305
  onDisabled: '#707784'
299
306
  },
300
307
  border: {
301
- primary: '#2d2f35',
302
- disabled: '#adaeb3',
308
+ element: {
309
+ secondary: '#2d2f35',
310
+ primary: '#00000000',
311
+ disabled: '#adaeb3'
312
+ },
303
313
  muted: '#e0e1e4',
304
314
  subtle: '#f5f5f8',
305
315
  focus: '#7eaaff'
@@ -388,10 +398,10 @@ export const idsCoreBorderwidthThick = '2px';
388
398
  export const idsTypographyLabel1x = '[object Object]';
389
399
  export const idsBorderradius025x = '4px';
390
400
  export const idsBorderradiusFull = '1600px';
401
+ export const idsBorderElementPrimary = '[object Object]';
402
+ export const idsBorderElementSecondary = '[object Object]';
403
+ export const idsBorderElementDisabled = '[object Object]';
391
404
  export const idsBorderFocused = '[object Object]';
392
- export const idsBorderPrimary = '[object Object]';
393
- export const idsBorderDisabled = '[object Object]';
394
- export const idsBorderTransparent = '[object Object]';
395
405
  export const idsColorElementPrimaryDefault = '#2d2f35';
396
406
  export const idsColorElementPrimaryHover = '#4d5057';
397
407
  export const idsColorElementPrimaryPressed = '#101114';
@@ -403,8 +413,9 @@ export const idsColorElementSecondaryOnsecondary = '#2d2f35';
403
413
  export const idsColorElementDisabled = '#adaeb3';
404
414
  export const idsColorElementDisabledmuted = '#00000000';
405
415
  export const idsColorElementOndisabled = '#707784';
406
- export const idsColorBorderPrimary = '#2d2f35';
407
- export const idsColorBorderDisabled = '#adaeb3';
416
+ export const idsColorBorderElementSecondary = '#2d2f35';
417
+ export const idsColorBorderElementPrimary = '#00000000';
418
+ export const idsColorBorderElementDisabled = '#adaeb3';
408
419
  export const idsColorBorderMuted = '#e0e1e4';
409
420
  export const idsColorBorderSubtle = '#f5f5f8';
410
421
  export const idsColorBorderFocus = '#7eaaff';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inversestudio/design-tokens",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "IDS Design System tokens - compiled from Tokens Studio format",
5
5
  "type": "module",
6
6
  "main": "dist/js/tokens.js",
@@ -12,7 +12,7 @@
12
12
  "require": "./dist/js/tokens.js",
13
13
  "types": "./dist/types/tokens.d.ts"
14
14
  },
15
- "./css": "./dist/css/tokens.css",
15
+ "./css": "./dist/css/index.css",
16
16
  "./css/*": "./dist/css/*",
17
17
  "./scss": "./dist/scss/index.scss",
18
18
  "./scss/*": "./dist/scss/*",