@inversestudio/design-tokens 1.0.6 → 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 +5 -0
  2. package/dist/css/tokens.dark.css +1 -0
  3. package/dist/css/tokens.light.css +5 -0
  4. package/dist/esm/tokens.dark.js +7 -2
  5. package/dist/esm/tokens.js +11 -2
  6. package/dist/esm/tokens.light.js +11 -2
  7. package/dist/js/tokens.dark.js +7 -2
  8. package/dist/js/tokens.js +11 -2
  9. package/dist/js/tokens.light.js +11 -2
  10. package/dist/json/tokens.dark.json +5 -0
  11. package/dist/json/tokens.dark.nested.json +5 -0
  12. package/dist/json/tokens.json +9 -0
  13. package/dist/json/tokens.light.json +9 -0
  14. package/dist/json/tokens.light.nested.json +11 -0
  15. package/dist/json/tokens.nested.json +11 -0
  16. package/dist/scss/_tokens.dark.scss +2 -0
  17. package/dist/scss/_tokens.light.scss +10 -0
  18. package/dist/scss/_tokens.scss +10 -0
  19. package/dist/types/tokens.d.ts +20 -1
  20. package/dist/types/tokens.dark.d.ts +4 -1
  21. package/dist/types/tokens.light.d.ts +20 -1
  22. package/package.json +1 -1
package/dist/css/tokens.css CHANGED
@@ -97,6 +97,7 @@
97
97
  --ids-border-element-primary: 2px solid #00000000;
98
98
  --ids-border-element-secondary: 2px solid #2d2f35;
99
99
  --ids-border-element-disabled: 2px solid #adaeb3;
100
+ --ids-border-element-tertiary: 2px solid #00000000;
100
101
  --ids-border-focused: 2px solid #7eaaff;
101
102
  --ids-color-element-primary-default: #2d2f35;
102
103
  --ids-color-element-primary-hover: #4d5057;
@@ -106,6 +107,10 @@
106
107
  --ids-color-element-secondary-hover: #e6edfb;
107
108
  --ids-color-element-secondary-pressed: #d1def8;
108
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;
109
114
  --ids-color-element-disabled: #adaeb3;
110
115
  --ids-color-element-disabledmuted: #00000000;
111
116
  --ids-color-element-ondisabled: #707784;
package/dist/css/tokens.dark.css CHANGED
@@ -97,6 +97,7 @@
97
97
  --ids-border-element-primary: 2px solid #00000000;
98
98
  --ids-border-element-secondary: 2px solid #ffffff;
99
99
  --ids-border-element-disabled: 2px solid #707784;
100
+ --ids-border-element-tertiary: 2px solid #00000000;
100
101
  --ids-border-focused: 2px solid #7eaaff;
101
102
  --ids-color-element-primary-default: #ffffff;
102
103
  --ids-color-element-primary-hover: #fafafb;
package/dist/css/tokens.light.css CHANGED
@@ -97,6 +97,7 @@
97
97
  --ids-border-element-primary: 2px solid #00000000;
98
98
  --ids-border-element-secondary: 2px solid #2d2f35;
99
99
  --ids-border-element-disabled: 2px solid #adaeb3;
100
+ --ids-border-element-tertiary: 2px solid #00000000;
100
101
  --ids-border-focused: 2px solid #7eaaff;
101
102
  --ids-color-element-primary-default: #2d2f35;
102
103
  --ids-color-element-primary-hover: #4d5057;
@@ -106,6 +107,10 @@
106
107
  --ids-color-element-secondary-hover: #e6edfb;
107
108
  --ids-color-element-secondary-pressed: #d1def8;
108
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;
109
114
  --ids-color-element-disabled: #adaeb3;
110
115
  --ids-color-element-disabledmuted: #00000000;
111
116
  --ids-color-element-ondisabled: #707784;
package/dist/esm/tokens.dark.js CHANGED
@@ -91,17 +91,22 @@ export const idsBorderElementPrimary = {
91
91
  color: "#00000000",
92
92
  width: "2px",
93
93
  style: "solid",
94
- };
94
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
95
95
  export const idsBorderElementSecondary = {
96
96
  color: "#ffffff",
97
97
  width: "2px",
98
98
  style: "solid",
99
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
100
100
  export const idsBorderElementDisabled = {
101
101
  color: "#707784",
102
102
  width: "2px",
103
103
  style: "solid",
104
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.
105
110
  export const idsBorderFocused = {
106
111
  color: "#7eaaff",
107
112
  width: "2px",
package/dist/esm/tokens.js CHANGED
@@ -91,17 +91,22 @@ export const idsBorderElementPrimary = {
91
91
  color: "#00000000",
92
92
  width: "2px",
93
93
  style: "solid",
94
- };
94
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
95
95
  export const idsBorderElementSecondary = {
96
96
  color: "#2d2f35",
97
97
  width: "2px",
98
98
  style: "solid",
99
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
100
100
  export const idsBorderElementDisabled = {
101
101
  color: "#adaeb3",
102
102
  width: "2px",
103
103
  style: "solid",
104
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.
105
110
  export const idsBorderFocused = {
106
111
  color: "#7eaaff",
107
112
  width: "2px",
@@ -115,6 +120,10 @@ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Backgr
115
120
  export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
116
121
  export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
117
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.
118
127
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
119
128
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
120
129
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
package/dist/esm/tokens.light.js CHANGED
@@ -91,17 +91,22 @@ export const idsBorderElementPrimary = {
91
91
  color: "#00000000",
92
92
  width: "2px",
93
93
  style: "solid",
94
- };
94
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
95
95
  export const idsBorderElementSecondary = {
96
96
  color: "#2d2f35",
97
97
  width: "2px",
98
98
  style: "solid",
99
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
100
100
  export const idsBorderElementDisabled = {
101
101
  color: "#adaeb3",
102
102
  width: "2px",
103
103
  style: "solid",
104
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.
105
110
  export const idsBorderFocused = {
106
111
  color: "#7eaaff",
107
112
  width: "2px",
@@ -115,6 +120,10 @@ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Backgr
115
120
  export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
116
121
  export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
117
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.
118
127
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
119
128
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
120
129
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
package/dist/js/tokens.dark.js CHANGED
@@ -91,17 +91,22 @@ export const idsBorderElementPrimary = {
91
91
  color: "#00000000",
92
92
  width: "2px",
93
93
  style: "solid",
94
- };
94
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
95
95
  export const idsBorderElementSecondary = {
96
96
  color: "#ffffff",
97
97
  width: "2px",
98
98
  style: "solid",
99
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
100
100
  export const idsBorderElementDisabled = {
101
101
  color: "#707784",
102
102
  width: "2px",
103
103
  style: "solid",
104
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.
105
110
  export const idsBorderFocused = {
106
111
  color: "#7eaaff",
107
112
  width: "2px",
package/dist/js/tokens.js CHANGED
@@ -91,17 +91,22 @@ export const idsBorderElementPrimary = {
91
91
  color: "#00000000",
92
92
  width: "2px",
93
93
  style: "solid",
94
- };
94
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
95
95
  export const idsBorderElementSecondary = {
96
96
  color: "#2d2f35",
97
97
  width: "2px",
98
98
  style: "solid",
99
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
100
100
  export const idsBorderElementDisabled = {
101
101
  color: "#adaeb3",
102
102
  width: "2px",
103
103
  style: "solid",
104
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.
105
110
  export const idsBorderFocused = {
106
111
  color: "#7eaaff",
107
112
  width: "2px",
@@ -115,6 +120,10 @@ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Backgr
115
120
  export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
116
121
  export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
117
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.
118
127
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
119
128
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
120
129
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
package/dist/js/tokens.light.js CHANGED
@@ -91,17 +91,22 @@ export const idsBorderElementPrimary = {
91
91
  color: "#00000000",
92
92
  width: "2px",
93
93
  style: "solid",
94
- };
94
+ }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
95
95
  export const idsBorderElementSecondary = {
96
96
  color: "#2d2f35",
97
97
  width: "2px",
98
98
  style: "solid",
99
- }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
100
100
  export const idsBorderElementDisabled = {
101
101
  color: "#adaeb3",
102
102
  width: "2px",
103
103
  style: "solid",
104
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.
105
110
  export const idsBorderFocused = {
106
111
  color: "#7eaaff",
107
112
  width: "2px",
@@ -115,6 +120,10 @@ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Backgr
115
120
  export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
116
121
  export const idsColorElementSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
117
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.
118
127
  export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
119
128
  export const idsColorElementDisabledmuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: all disabled controls that need a transparent background.
120
129
  export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
package/dist/json/tokens.dark.json CHANGED
@@ -99,6 +99,11 @@
99
99
  "width": "2px",
100
100
  "style": "solid"
101
101
  },
102
+ "idsBorderElementTertiary": {
103
+ "color": "#00000000",
104
+ "width": "2px",
105
+ "style": "solid"
106
+ },
102
107
  "idsBorderFocused": {
103
108
  "color": "#7eaaff",
104
109
  "width": "2px",
package/dist/json/tokens.dark.nested.json CHANGED
@@ -137,6 +137,11 @@
137
137
  "color": "#707784",
138
138
  "width": "2px",
139
139
  "style": "solid"
140
+ },
141
+ "tertiary": {
142
+ "color": "#00000000",
143
+ "width": "2px",
144
+ "style": "solid"
140
145
  }
141
146
  },
142
147
  "focused": {
package/dist/json/tokens.json CHANGED
@@ -99,6 +99,11 @@
99
99
  "width": "2px",
100
100
  "style": "solid"
101
101
  },
102
+ "idsBorderElementTertiary": {
103
+ "color": "#00000000",
104
+ "width": "2px",
105
+ "style": "solid"
106
+ },
102
107
  "idsBorderFocused": {
103
108
  "color": "#7eaaff",
104
109
  "width": "2px",
@@ -112,6 +117,10 @@
112
117
  "idsColorElementSecondaryHover": "#e6edfb",
113
118
  "idsColorElementSecondaryPressed": "#d1def8",
114
119
  "idsColorElementSecondaryOnsecondary": "#2d2f35",
120
+ "idsColorElementTertiaryDefault": "#00000000",
121
+ "idsColorElementTertiaryHover": "#e6edfb",
122
+ "idsColorElementTertiaryPressed": "#d1def8",
123
+ "idsColorElementTertiaryOntertiary": "#2d2f35",
115
124
  "idsColorElementDisabled": "#adaeb3",
116
125
  "idsColorElementDisabledmuted": "#00000000",
117
126
  "idsColorElementOndisabled": "#707784",
package/dist/json/tokens.light.json CHANGED
@@ -99,6 +99,11 @@
99
99
  "width": "2px",
100
100
  "style": "solid"
101
101
  },
102
+ "idsBorderElementTertiary": {
103
+ "color": "#00000000",
104
+ "width": "2px",
105
+ "style": "solid"
106
+ },
102
107
  "idsBorderFocused": {
103
108
  "color": "#7eaaff",
104
109
  "width": "2px",
@@ -112,6 +117,10 @@
112
117
  "idsColorElementSecondaryHover": "#e6edfb",
113
118
  "idsColorElementSecondaryPressed": "#d1def8",
114
119
  "idsColorElementSecondaryOnsecondary": "#2d2f35",
120
+ "idsColorElementTertiaryDefault": "#00000000",
121
+ "idsColorElementTertiaryHover": "#e6edfb",
122
+ "idsColorElementTertiaryPressed": "#d1def8",
123
+ "idsColorElementTertiaryOntertiary": "#2d2f35",
115
124
  "idsColorElementDisabled": "#adaeb3",
116
125
  "idsColorElementDisabledmuted": "#00000000",
117
126
  "idsColorElementOndisabled": "#707784",
package/dist/json/tokens.light.nested.json CHANGED
@@ -137,6 +137,11 @@
137
137
  "color": "#adaeb3",
138
138
  "width": "2px",
139
139
  "style": "solid"
140
+ },
141
+ "tertiary": {
142
+ "color": "#00000000",
143
+ "width": "2px",
144
+ "style": "solid"
140
145
  }
141
146
  },
142
147
  "focused": {
@@ -159,6 +164,12 @@
159
164
  "pressed": "#d1def8",
160
165
  "onSecondary": "#2d2f35"
161
166
  },
167
+ "tertiary": {
168
+ "default": "#00000000",
169
+ "hover": "#e6edfb",
170
+ "pressed": "#d1def8",
171
+ "onTertiary": "#2d2f35"
172
+ },
162
173
  "disabled": "#adaeb3",
163
174
  "disabledMuted": "#00000000",
164
175
  "onDisabled": "#707784"
package/dist/json/tokens.nested.json CHANGED
@@ -137,6 +137,11 @@
137
137
  "color": "#adaeb3",
138
138
  "width": "2px",
139
139
  "style": "solid"
140
+ },
141
+ "tertiary": {
142
+ "color": "#00000000",
143
+ "width": "2px",
144
+ "style": "solid"
140
145
  }
141
146
  },
142
147
  "focused": {
@@ -159,6 +164,12 @@
159
164
  "pressed": "#d1def8",
160
165
  "onSecondary": "#2d2f35"
161
166
  },
167
+ "tertiary": {
168
+ "default": "#00000000",
169
+ "hover": "#e6edfb",
170
+ "pressed": "#d1def8",
171
+ "onTertiary": "#2d2f35"
172
+ },
162
173
  "disabled": "#adaeb3",
163
174
  "disabledMuted": "#00000000",
164
175
  "onDisabled": "#707784"
package/dist/scss/_tokens.dark.scss CHANGED
@@ -87,6 +87,7 @@ $ids-borderradius-full: 1600px;
87
87
  $ids-border-element-primary: 2px solid #00000000;
88
88
  $ids-border-element-secondary: 2px solid #ffffff;
89
89
  $ids-border-element-disabled: 2px solid #707784;
90
+ $ids-border-element-tertiary: 2px solid #00000000;
90
91
  $ids-border-focused: 2px solid #7eaaff;
91
92
  $ids-color-element-primary-default: #ffffff;
92
93
  $ids-color-element-primary-hover: #fafafb;
@@ -192,6 +193,7 @@ $ids-tokens: (
192
193
  'ids-border-element-primary': $ids-border-element-primary,
193
194
  'ids-border-element-secondary': $ids-border-element-secondary,
194
195
  'ids-border-element-disabled': $ids-border-element-disabled,
196
+ 'ids-border-element-tertiary': $ids-border-element-tertiary,
195
197
  'ids-border-focused': $ids-border-focused,
196
198
  'ids-color-element-primary-default': $ids-color-element-primary-default,
197
199
  'ids-color-element-primary-hover': $ids-color-element-primary-hover,
package/dist/scss/_tokens.light.scss CHANGED
@@ -87,6 +87,7 @@ $ids-borderradius-full: 1600px;
87
87
  $ids-border-element-primary: 2px solid #00000000;
88
88
  $ids-border-element-secondary: 2px solid #2d2f35;
89
89
  $ids-border-element-disabled: 2px solid #adaeb3;
90
+ $ids-border-element-tertiary: 2px solid #00000000;
90
91
  $ids-border-focused: 2px solid #7eaaff;
91
92
  $ids-color-element-primary-default: #2d2f35;
92
93
  $ids-color-element-primary-hover: #4d5057;
@@ -96,6 +97,10 @@ $ids-color-element-secondary-default: #00000000;
96
97
  $ids-color-element-secondary-hover: #e6edfb;
97
98
  $ids-color-element-secondary-pressed: #d1def8;
98
99
  $ids-color-element-secondary-onsecondary: #2d2f35;
100
+ $ids-color-element-tertiary-default: #00000000;
101
+ $ids-color-element-tertiary-hover: #e6edfb;
102
+ $ids-color-element-tertiary-pressed: #d1def8;
103
+ $ids-color-element-tertiary-ontertiary: #2d2f35;
99
104
  $ids-color-element-disabled: #adaeb3;
100
105
  $ids-color-element-disabledmuted: #00000000;
101
106
  $ids-color-element-ondisabled: #707784;
@@ -191,6 +196,7 @@ $ids-tokens: (
191
196
  'ids-border-element-primary': $ids-border-element-primary,
192
197
  'ids-border-element-secondary': $ids-border-element-secondary,
193
198
  'ids-border-element-disabled': $ids-border-element-disabled,
199
+ 'ids-border-element-tertiary': $ids-border-element-tertiary,
194
200
  'ids-border-focused': $ids-border-focused,
195
201
  'ids-color-element-primary-default': $ids-color-element-primary-default,
196
202
  'ids-color-element-primary-hover': $ids-color-element-primary-hover,
@@ -200,6 +206,10 @@ $ids-tokens: (
200
206
  'ids-color-element-secondary-hover': $ids-color-element-secondary-hover,
201
207
  'ids-color-element-secondary-pressed': $ids-color-element-secondary-pressed,
202
208
  'ids-color-element-secondary-onsecondary': $ids-color-element-secondary-onsecondary,
209
+ 'ids-color-element-tertiary-default': $ids-color-element-tertiary-default,
210
+ 'ids-color-element-tertiary-hover': $ids-color-element-tertiary-hover,
211
+ 'ids-color-element-tertiary-pressed': $ids-color-element-tertiary-pressed,
212
+ 'ids-color-element-tertiary-ontertiary': $ids-color-element-tertiary-ontertiary,
203
213
  'ids-color-element-disabled': $ids-color-element-disabled,
204
214
  'ids-color-element-disabledmuted': $ids-color-element-disabledmuted,
205
215
  'ids-color-element-ondisabled': $ids-color-element-ondisabled,
package/dist/scss/_tokens.scss CHANGED
@@ -87,6 +87,7 @@ $ids-borderradius-full: 1600px;
87
87
  $ids-border-element-primary: 2px solid #00000000;
88
88
  $ids-border-element-secondary: 2px solid #2d2f35;
89
89
  $ids-border-element-disabled: 2px solid #adaeb3;
90
+ $ids-border-element-tertiary: 2px solid #00000000;
90
91
  $ids-border-focused: 2px solid #7eaaff;
91
92
  $ids-color-element-primary-default: #2d2f35;
92
93
  $ids-color-element-primary-hover: #4d5057;
@@ -96,6 +97,10 @@ $ids-color-element-secondary-default: #00000000;
96
97
  $ids-color-element-secondary-hover: #e6edfb;
97
98
  $ids-color-element-secondary-pressed: #d1def8;
98
99
  $ids-color-element-secondary-onsecondary: #2d2f35;
100
+ $ids-color-element-tertiary-default: #00000000;
101
+ $ids-color-element-tertiary-hover: #e6edfb;
102
+ $ids-color-element-tertiary-pressed: #d1def8;
103
+ $ids-color-element-tertiary-ontertiary: #2d2f35;
99
104
  $ids-color-element-disabled: #adaeb3;
100
105
  $ids-color-element-disabledmuted: #00000000;
101
106
  $ids-color-element-ondisabled: #707784;
@@ -191,6 +196,7 @@ $ids-tokens: (
191
196
  'ids-border-element-primary': $ids-border-element-primary,
192
197
  'ids-border-element-secondary': $ids-border-element-secondary,
193
198
  'ids-border-element-disabled': $ids-border-element-disabled,
199
+ 'ids-border-element-tertiary': $ids-border-element-tertiary,
194
200
  'ids-border-focused': $ids-border-focused,
195
201
  'ids-color-element-primary-default': $ids-color-element-primary-default,
196
202
  'ids-color-element-primary-hover': $ids-color-element-primary-hover,
@@ -200,6 +206,10 @@ $ids-tokens: (
200
206
  'ids-color-element-secondary-hover': $ids-color-element-secondary-hover,
201
207
  'ids-color-element-secondary-pressed': $ids-color-element-secondary-pressed,
202
208
  'ids-color-element-secondary-onsecondary': $ids-color-element-secondary-onsecondary,
209
+ 'ids-color-element-tertiary-default': $ids-color-element-tertiary-default,
210
+ 'ids-color-element-tertiary-hover': $ids-color-element-tertiary-hover,
211
+ 'ids-color-element-tertiary-pressed': $ids-color-element-tertiary-pressed,
212
+ 'ids-color-element-tertiary-ontertiary': $ids-color-element-tertiary-ontertiary,
203
213
  'ids-color-element-disabled': $ids-color-element-disabled,
204
214
  'ids-color-element-disabledmuted': $ids-color-element-disabledmuted,
205
215
  'ids-color-element-ondisabled': $ids-color-element-ondisabled,
package/dist/types/tokens.d.ts CHANGED
@@ -127,6 +127,7 @@ export interface IDSTokens {
127
127
  primary: string;
128
128
  secondary: string;
129
129
  disabled: string;
130
+ tertiary: string;
130
131
  };
131
132
  focused: string;
132
133
  };
@@ -144,6 +145,12 @@ export interface IDSTokens {
144
145
  pressed: string;
145
146
  onSecondary: string;
146
147
  };
148
+ tertiary: {
149
+ default: string;
150
+ hover: string;
151
+ pressed: string;
152
+ onTertiary: string;
153
+ };
147
154
  disabled: string;
148
155
  disabledMuted: string;
149
156
  onDisabled: string;
@@ -284,7 +291,8 @@ export const tokens: IDSTokens = {
284
291
  element: {
285
292
  primary: '[object Object]',
286
293
  secondary: '[object Object]',
287
- disabled: '[object Object]'
294
+ disabled: '[object Object]',
295
+ tertiary: '[object Object]'
288
296
  },
289
297
  focused: '[object Object]'
290
298
  },
@@ -302,6 +310,12 @@ export const tokens: IDSTokens = {
302
310
  pressed: '#d1def8',
303
311
  onSecondary: '#2d2f35'
304
312
  },
313
+ tertiary: {
314
+ default: '#00000000',
315
+ hover: '#e6edfb',
316
+ pressed: '#d1def8',
317
+ onTertiary: '#2d2f35'
318
+ },
305
319
  disabled: '#adaeb3',
306
320
  disabledMuted: '#00000000',
307
321
  onDisabled: '#707784'
@@ -404,6 +418,7 @@ export const idsBorderradiusFull = '1600px';
404
418
  export const idsBorderElementPrimary = '[object Object]';
405
419
  export const idsBorderElementSecondary = '[object Object]';
406
420
  export const idsBorderElementDisabled = '[object Object]';
421
+ export const idsBorderElementTertiary = '[object Object]';
407
422
  export const idsBorderFocused = '[object Object]';
408
423
  export const idsColorElementPrimaryDefault = '#2d2f35';
409
424
  export const idsColorElementPrimaryHover = '#4d5057';
@@ -413,6 +428,10 @@ export const idsColorElementSecondaryDefault = '#00000000';
413
428
  export const idsColorElementSecondaryHover = '#e6edfb';
414
429
  export const idsColorElementSecondaryPressed = '#d1def8';
415
430
  export const idsColorElementSecondaryOnsecondary = '#2d2f35';
431
+ export const idsColorElementTertiaryDefault = '#00000000';
432
+ export const idsColorElementTertiaryHover = '#e6edfb';
433
+ export const idsColorElementTertiaryPressed = '#d1def8';
434
+ export const idsColorElementTertiaryOntertiary = '#2d2f35';
416
435
  export const idsColorElementDisabled = '#adaeb3';
417
436
  export const idsColorElementDisabledmuted = '#00000000';
418
437
  export const idsColorElementOndisabled = '#707784';
package/dist/types/tokens.dark.d.ts CHANGED
@@ -127,6 +127,7 @@ export interface IDSTokens {
127
127
  primary: string;
128
128
  secondary: string;
129
129
  disabled: string;
130
+ tertiary: string;
130
131
  };
131
132
  focused: string;
132
133
  };
@@ -285,7 +286,8 @@ export const tokens: IDSTokens = {
285
286
  element: {
286
287
  primary: '[object Object]',
287
288
  secondary: '[object Object]',
288
- disabled: '[object Object]'
289
+ disabled: '[object Object]',
290
+ tertiary: '[object Object]'
289
291
  },
290
292
  focused: '[object Object]'
291
293
  },
@@ -406,6 +408,7 @@ export const idsBorderradiusFull = '1600px';
406
408
  export const idsBorderElementPrimary = '[object Object]';
407
409
  export const idsBorderElementSecondary = '[object Object]';
408
410
  export const idsBorderElementDisabled = '[object Object]';
411
+ export const idsBorderElementTertiary = '[object Object]';
409
412
  export const idsBorderFocused = '[object Object]';
410
413
  export const idsColorElementPrimaryDefault = '#ffffff';
411
414
  export const idsColorElementPrimaryHover = '#fafafb';
package/dist/types/tokens.light.d.ts CHANGED
@@ -127,6 +127,7 @@ export interface IDSTokens {
127
127
  primary: string;
128
128
  secondary: string;
129
129
  disabled: string;
130
+ tertiary: string;
130
131
  };
131
132
  focused: string;
132
133
  };
@@ -144,6 +145,12 @@ export interface IDSTokens {
144
145
  pressed: string;
145
146
  onSecondary: string;
146
147
  };
148
+ tertiary: {
149
+ default: string;
150
+ hover: string;
151
+ pressed: string;
152
+ onTertiary: string;
153
+ };
147
154
  disabled: string;
148
155
  disabledMuted: string;
149
156
  onDisabled: string;
@@ -284,7 +291,8 @@ export const tokens: IDSTokens = {
284
291
  element: {
285
292
  primary: '[object Object]',
286
293
  secondary: '[object Object]',
287
- disabled: '[object Object]'
294
+ disabled: '[object Object]',
295
+ tertiary: '[object Object]'
288
296
  },
289
297
  focused: '[object Object]'
290
298
  },
@@ -302,6 +310,12 @@ export const tokens: IDSTokens = {
302
310
  pressed: '#d1def8',
303
311
  onSecondary: '#2d2f35'
304
312
  },
313
+ tertiary: {
314
+ default: '#00000000',
315
+ hover: '#e6edfb',
316
+ pressed: '#d1def8',
317
+ onTertiary: '#2d2f35'
318
+ },
305
319
  disabled: '#adaeb3',
306
320
  disabledMuted: '#00000000',
307
321
  onDisabled: '#707784'
@@ -404,6 +418,7 @@ export const idsBorderradiusFull = '1600px';
404
418
  export const idsBorderElementPrimary = '[object Object]';
405
419
  export const idsBorderElementSecondary = '[object Object]';
406
420
  export const idsBorderElementDisabled = '[object Object]';
421
+ export const idsBorderElementTertiary = '[object Object]';
407
422
  export const idsBorderFocused = '[object Object]';
408
423
  export const idsColorElementPrimaryDefault = '#2d2f35';
409
424
  export const idsColorElementPrimaryHover = '#4d5057';
@@ -413,6 +428,10 @@ export const idsColorElementSecondaryDefault = '#00000000';
413
428
  export const idsColorElementSecondaryHover = '#e6edfb';
414
429
  export const idsColorElementSecondaryPressed = '#d1def8';
415
430
  export const idsColorElementSecondaryOnsecondary = '#2d2f35';
431
+ export const idsColorElementTertiaryDefault = '#00000000';
432
+ export const idsColorElementTertiaryHover = '#e6edfb';
433
+ export const idsColorElementTertiaryPressed = '#d1def8';
434
+ export const idsColorElementTertiaryOntertiary = '#2d2f35';
416
435
  export const idsColorElementDisabled = '#adaeb3';
417
436
  export const idsColorElementDisabledmuted = '#00000000';
418
437
  export const idsColorElementOndisabled = '#707784';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inversestudio/design-tokens",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "IDS Design System tokens - compiled from Tokens Studio format",
5
5
  "type": "module",
6
6
  "main": "dist/js/tokens.js",