@inversestudio/design-tokens 1.1.5 → 1.2.1
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.
- package/dist/css/tokens.css +3 -1
- package/dist/css/tokens.dark.css +3 -1
- package/dist/css/tokens.light.css +3 -1
- package/dist/esm/tokens.dark.js +8 -1
- package/dist/esm/tokens.js +8 -1
- package/dist/esm/tokens.light.js +8 -1
- package/dist/js/tokens.dark.js +8 -1
- package/dist/js/tokens.js +8 -1
- package/dist/js/tokens.light.js +8 -1
- package/dist/json/tokens.dark.json +8 -1
- package/dist/json/tokens.dark.nested.json +8 -1
- package/dist/json/tokens.json +8 -1
- package/dist/json/tokens.light.json +8 -1
- package/dist/json/tokens.light.nested.json +8 -1
- package/dist/json/tokens.nested.json +8 -1
- package/dist/scss/_tokens.dark.scss +5 -1
- package/dist/scss/_tokens.light.scss +5 -1
- package/dist/scss/_tokens.scss +5 -1
- package/dist/types/tokens.d.ts +6 -0
- package/dist/types/tokens.dark.d.ts +6 -0
- package/dist/types/tokens.light.d.ts +6 -0
- package/package.json +1 -1
package/dist/css/tokens.css
CHANGED
|
@@ -124,10 +124,12 @@
|
|
|
124
124
|
--ids-dimension-element-3-5x: 56px;
|
|
125
125
|
--ids-dimension-element-4-5x: 72px;
|
|
126
126
|
--ids-dimension-icon-1x: 16px;
|
|
127
|
+
--ids-dimension-icon-0-875x: 14px;
|
|
127
128
|
--ids-dimension-icon-1-25x: 20px;
|
|
128
129
|
--ids-dimension-icon-1-5x: 24px;
|
|
129
130
|
--ids-typography-label-0-75x: 600 12px/16px Tomato Grotesk;
|
|
130
|
-
--ids-typography-label-
|
|
131
|
+
--ids-typography-label-0-875x: 600 14px/16px Tomato Grotesk;
|
|
132
|
+
--ids-typography-label-1x: 600 16px/20px Tomato Grotesk;
|
|
131
133
|
--ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
|
|
132
134
|
--ids-borderradius-0-25x: 4px;
|
|
133
135
|
--ids-borderradius-0-5x: 8px;
|
package/dist/css/tokens.dark.css
CHANGED
|
@@ -124,10 +124,12 @@
|
|
|
124
124
|
--ids-dimension-element-3-5x: 56px;
|
|
125
125
|
--ids-dimension-element-4-5x: 72px;
|
|
126
126
|
--ids-dimension-icon-1x: 16px;
|
|
127
|
+
--ids-dimension-icon-0-875x: 14px;
|
|
127
128
|
--ids-dimension-icon-1-25x: 20px;
|
|
128
129
|
--ids-dimension-icon-1-5x: 24px;
|
|
129
130
|
--ids-typography-label-0-75x: 600 12px/16px Tomato Grotesk;
|
|
130
|
-
--ids-typography-label-
|
|
131
|
+
--ids-typography-label-0-875x: 600 14px/16px Tomato Grotesk;
|
|
132
|
+
--ids-typography-label-1x: 600 16px/20px Tomato Grotesk;
|
|
131
133
|
--ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
|
|
132
134
|
--ids-borderradius-0-25x: 4px;
|
|
133
135
|
--ids-borderradius-0-5x: 8px;
|
|
@@ -124,10 +124,12 @@
|
|
|
124
124
|
--ids-dimension-element-3-5x: 56px;
|
|
125
125
|
--ids-dimension-element-4-5x: 72px;
|
|
126
126
|
--ids-dimension-icon-1x: 16px;
|
|
127
|
+
--ids-dimension-icon-0-875x: 14px;
|
|
127
128
|
--ids-dimension-icon-1-25x: 20px;
|
|
128
129
|
--ids-dimension-icon-1-5x: 24px;
|
|
129
130
|
--ids-typography-label-0-75x: 600 12px/16px Tomato Grotesk;
|
|
130
|
-
--ids-typography-label-
|
|
131
|
+
--ids-typography-label-0-875x: 600 14px/16px Tomato Grotesk;
|
|
132
|
+
--ids-typography-label-1x: 600 16px/20px Tomato Grotesk;
|
|
131
133
|
--ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
|
|
132
134
|
--ids-borderradius-0-25x: 4px;
|
|
133
135
|
--ids-borderradius-0-5x: 8px;
|
package/dist/esm/tokens.dark.js
CHANGED
|
@@ -112,6 +112,7 @@ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px).
|
|
|
112
112
|
export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
|
|
113
113
|
export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
|
|
114
114
|
export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
|
|
115
|
+
export const idsDimensionIcon0875x = "14px"; // SEMANTIC - Very small icon (14px). Use for: inline icons.
|
|
115
116
|
export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
|
|
116
117
|
export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
|
|
117
118
|
export const idsTypographyLabel075x = {
|
|
@@ -120,10 +121,16 @@ export const idsTypographyLabel075x = {
|
|
|
120
121
|
lineHeight: "16px",
|
|
121
122
|
fontWeight: 600,
|
|
122
123
|
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
124
|
+
export const idsTypographyLabel0875x = {
|
|
125
|
+
fontFamily: "Tomato Grotesk",
|
|
126
|
+
fontSize: "14px",
|
|
127
|
+
lineHeight: "16px",
|
|
128
|
+
fontWeight: 600,
|
|
129
|
+
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
123
130
|
export const idsTypographyLabel1x = {
|
|
124
131
|
fontFamily: "Tomato Grotesk",
|
|
125
132
|
fontSize: "16px",
|
|
126
|
-
lineHeight: "
|
|
133
|
+
lineHeight: "20px",
|
|
127
134
|
fontWeight: 600,
|
|
128
135
|
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
129
136
|
export const idsTypographyTitle1125x = {
|
package/dist/esm/tokens.js
CHANGED
|
@@ -112,6 +112,7 @@ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px).
|
|
|
112
112
|
export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
|
|
113
113
|
export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
|
|
114
114
|
export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
|
|
115
|
+
export const idsDimensionIcon0875x = "14px"; // SEMANTIC - Very small icon (14px). Use for: inline icons.
|
|
115
116
|
export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
|
|
116
117
|
export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
|
|
117
118
|
export const idsTypographyLabel075x = {
|
|
@@ -120,10 +121,16 @@ export const idsTypographyLabel075x = {
|
|
|
120
121
|
lineHeight: "16px",
|
|
121
122
|
fontWeight: 600,
|
|
122
123
|
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
124
|
+
export const idsTypographyLabel0875x = {
|
|
125
|
+
fontFamily: "Tomato Grotesk",
|
|
126
|
+
fontSize: "14px",
|
|
127
|
+
lineHeight: "16px",
|
|
128
|
+
fontWeight: 600,
|
|
129
|
+
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
123
130
|
export const idsTypographyLabel1x = {
|
|
124
131
|
fontFamily: "Tomato Grotesk",
|
|
125
132
|
fontSize: "16px",
|
|
126
|
-
lineHeight: "
|
|
133
|
+
lineHeight: "20px",
|
|
127
134
|
fontWeight: 600,
|
|
128
135
|
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
129
136
|
export const idsTypographyTitle1125x = {
|
package/dist/esm/tokens.light.js
CHANGED
|
@@ -112,6 +112,7 @@ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px).
|
|
|
112
112
|
export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
|
|
113
113
|
export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
|
|
114
114
|
export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
|
|
115
|
+
export const idsDimensionIcon0875x = "14px"; // SEMANTIC - Very small icon (14px). Use for: inline icons.
|
|
115
116
|
export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
|
|
116
117
|
export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
|
|
117
118
|
export const idsTypographyLabel075x = {
|
|
@@ -120,10 +121,16 @@ export const idsTypographyLabel075x = {
|
|
|
120
121
|
lineHeight: "16px",
|
|
121
122
|
fontWeight: 600,
|
|
122
123
|
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
124
|
+
export const idsTypographyLabel0875x = {
|
|
125
|
+
fontFamily: "Tomato Grotesk",
|
|
126
|
+
fontSize: "14px",
|
|
127
|
+
lineHeight: "16px",
|
|
128
|
+
fontWeight: 600,
|
|
129
|
+
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
123
130
|
export const idsTypographyLabel1x = {
|
|
124
131
|
fontFamily: "Tomato Grotesk",
|
|
125
132
|
fontSize: "16px",
|
|
126
|
-
lineHeight: "
|
|
133
|
+
lineHeight: "20px",
|
|
127
134
|
fontWeight: 600,
|
|
128
135
|
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
129
136
|
export const idsTypographyTitle1125x = {
|
package/dist/js/tokens.dark.js
CHANGED
|
@@ -112,6 +112,7 @@ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px).
|
|
|
112
112
|
export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
|
|
113
113
|
export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
|
|
114
114
|
export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
|
|
115
|
+
export const idsDimensionIcon0875x = "14px"; // SEMANTIC - Very small icon (14px). Use for: inline icons.
|
|
115
116
|
export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
|
|
116
117
|
export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
|
|
117
118
|
export const idsTypographyLabel075x = {
|
|
@@ -120,10 +121,16 @@ export const idsTypographyLabel075x = {
|
|
|
120
121
|
lineHeight: "16px",
|
|
121
122
|
fontWeight: 600,
|
|
122
123
|
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
124
|
+
export const idsTypographyLabel0875x = {
|
|
125
|
+
fontFamily: "Tomato Grotesk",
|
|
126
|
+
fontSize: "14px",
|
|
127
|
+
lineHeight: "16px",
|
|
128
|
+
fontWeight: 600,
|
|
129
|
+
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
123
130
|
export const idsTypographyLabel1x = {
|
|
124
131
|
fontFamily: "Tomato Grotesk",
|
|
125
132
|
fontSize: "16px",
|
|
126
|
-
lineHeight: "
|
|
133
|
+
lineHeight: "20px",
|
|
127
134
|
fontWeight: 600,
|
|
128
135
|
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
129
136
|
export const idsTypographyTitle1125x = {
|
package/dist/js/tokens.js
CHANGED
|
@@ -112,6 +112,7 @@ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px).
|
|
|
112
112
|
export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
|
|
113
113
|
export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
|
|
114
114
|
export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
|
|
115
|
+
export const idsDimensionIcon0875x = "14px"; // SEMANTIC - Very small icon (14px). Use for: inline icons.
|
|
115
116
|
export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
|
|
116
117
|
export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
|
|
117
118
|
export const idsTypographyLabel075x = {
|
|
@@ -120,10 +121,16 @@ export const idsTypographyLabel075x = {
|
|
|
120
121
|
lineHeight: "16px",
|
|
121
122
|
fontWeight: 600,
|
|
122
123
|
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
124
|
+
export const idsTypographyLabel0875x = {
|
|
125
|
+
fontFamily: "Tomato Grotesk",
|
|
126
|
+
fontSize: "14px",
|
|
127
|
+
lineHeight: "16px",
|
|
128
|
+
fontWeight: 600,
|
|
129
|
+
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
123
130
|
export const idsTypographyLabel1x = {
|
|
124
131
|
fontFamily: "Tomato Grotesk",
|
|
125
132
|
fontSize: "16px",
|
|
126
|
-
lineHeight: "
|
|
133
|
+
lineHeight: "20px",
|
|
127
134
|
fontWeight: 600,
|
|
128
135
|
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
129
136
|
export const idsTypographyTitle1125x = {
|
package/dist/js/tokens.light.js
CHANGED
|
@@ -112,6 +112,7 @@ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px).
|
|
|
112
112
|
export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
|
|
113
113
|
export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
|
|
114
114
|
export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
|
|
115
|
+
export const idsDimensionIcon0875x = "14px"; // SEMANTIC - Very small icon (14px). Use for: inline icons.
|
|
115
116
|
export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
|
|
116
117
|
export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
|
|
117
118
|
export const idsTypographyLabel075x = {
|
|
@@ -120,10 +121,16 @@ export const idsTypographyLabel075x = {
|
|
|
120
121
|
lineHeight: "16px",
|
|
121
122
|
fontWeight: 600,
|
|
122
123
|
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
124
|
+
export const idsTypographyLabel0875x = {
|
|
125
|
+
fontFamily: "Tomato Grotesk",
|
|
126
|
+
fontSize: "14px",
|
|
127
|
+
lineHeight: "16px",
|
|
128
|
+
fontWeight: 600,
|
|
129
|
+
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
123
130
|
export const idsTypographyLabel1x = {
|
|
124
131
|
fontFamily: "Tomato Grotesk",
|
|
125
132
|
fontSize: "16px",
|
|
126
|
-
lineHeight: "
|
|
133
|
+
lineHeight: "20px",
|
|
127
134
|
fontWeight: 600,
|
|
128
135
|
}; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
|
|
129
136
|
export const idsTypographyTitle1125x = {
|
|
@@ -109,6 +109,7 @@
|
|
|
109
109
|
"idsDimensionElement35x": "56px",
|
|
110
110
|
"idsDimensionElement45x": "72px",
|
|
111
111
|
"idsDimensionIcon1x": "16px",
|
|
112
|
+
"idsDimensionIcon0875x": "14px",
|
|
112
113
|
"idsDimensionIcon125x": "20px",
|
|
113
114
|
"idsDimensionIcon15x": "24px",
|
|
114
115
|
"idsTypographyLabel075x": {
|
|
@@ -117,10 +118,16 @@
|
|
|
117
118
|
"lineHeight": "16px",
|
|
118
119
|
"fontWeight": 600
|
|
119
120
|
},
|
|
121
|
+
"idsTypographyLabel0875x": {
|
|
122
|
+
"fontFamily": "Tomato Grotesk",
|
|
123
|
+
"fontSize": "14px",
|
|
124
|
+
"lineHeight": "16px",
|
|
125
|
+
"fontWeight": 600
|
|
126
|
+
},
|
|
120
127
|
"idsTypographyLabel1x": {
|
|
121
128
|
"fontFamily": "Tomato Grotesk",
|
|
122
129
|
"fontSize": "16px",
|
|
123
|
-
"lineHeight": "
|
|
130
|
+
"lineHeight": "20px",
|
|
124
131
|
"fontWeight": 600
|
|
125
132
|
},
|
|
126
133
|
"idsTypographyTitle1125x": {
|
|
@@ -138,6 +138,7 @@
|
|
|
138
138
|
},
|
|
139
139
|
"icon": {
|
|
140
140
|
"1x": "16px",
|
|
141
|
+
"0_875x": "14px",
|
|
141
142
|
"1_25x": "20px",
|
|
142
143
|
"1_5x": "24px"
|
|
143
144
|
}
|
|
@@ -150,10 +151,16 @@
|
|
|
150
151
|
"lineHeight": "16px",
|
|
151
152
|
"fontWeight": 600
|
|
152
153
|
},
|
|
154
|
+
"0_875x": {
|
|
155
|
+
"fontFamily": "Tomato Grotesk",
|
|
156
|
+
"fontSize": "14px",
|
|
157
|
+
"lineHeight": "16px",
|
|
158
|
+
"fontWeight": 600
|
|
159
|
+
},
|
|
153
160
|
"1x": {
|
|
154
161
|
"fontFamily": "Tomato Grotesk",
|
|
155
162
|
"fontSize": "16px",
|
|
156
|
-
"lineHeight": "
|
|
163
|
+
"lineHeight": "20px",
|
|
157
164
|
"fontWeight": 600
|
|
158
165
|
}
|
|
159
166
|
},
|
package/dist/json/tokens.json
CHANGED
|
@@ -109,6 +109,7 @@
|
|
|
109
109
|
"idsDimensionElement35x": "56px",
|
|
110
110
|
"idsDimensionElement45x": "72px",
|
|
111
111
|
"idsDimensionIcon1x": "16px",
|
|
112
|
+
"idsDimensionIcon0875x": "14px",
|
|
112
113
|
"idsDimensionIcon125x": "20px",
|
|
113
114
|
"idsDimensionIcon15x": "24px",
|
|
114
115
|
"idsTypographyLabel075x": {
|
|
@@ -117,10 +118,16 @@
|
|
|
117
118
|
"lineHeight": "16px",
|
|
118
119
|
"fontWeight": 600
|
|
119
120
|
},
|
|
121
|
+
"idsTypographyLabel0875x": {
|
|
122
|
+
"fontFamily": "Tomato Grotesk",
|
|
123
|
+
"fontSize": "14px",
|
|
124
|
+
"lineHeight": "16px",
|
|
125
|
+
"fontWeight": 600
|
|
126
|
+
},
|
|
120
127
|
"idsTypographyLabel1x": {
|
|
121
128
|
"fontFamily": "Tomato Grotesk",
|
|
122
129
|
"fontSize": "16px",
|
|
123
|
-
"lineHeight": "
|
|
130
|
+
"lineHeight": "20px",
|
|
124
131
|
"fontWeight": 600
|
|
125
132
|
},
|
|
126
133
|
"idsTypographyTitle1125x": {
|
|
@@ -109,6 +109,7 @@
|
|
|
109
109
|
"idsDimensionElement35x": "56px",
|
|
110
110
|
"idsDimensionElement45x": "72px",
|
|
111
111
|
"idsDimensionIcon1x": "16px",
|
|
112
|
+
"idsDimensionIcon0875x": "14px",
|
|
112
113
|
"idsDimensionIcon125x": "20px",
|
|
113
114
|
"idsDimensionIcon15x": "24px",
|
|
114
115
|
"idsTypographyLabel075x": {
|
|
@@ -117,10 +118,16 @@
|
|
|
117
118
|
"lineHeight": "16px",
|
|
118
119
|
"fontWeight": 600
|
|
119
120
|
},
|
|
121
|
+
"idsTypographyLabel0875x": {
|
|
122
|
+
"fontFamily": "Tomato Grotesk",
|
|
123
|
+
"fontSize": "14px",
|
|
124
|
+
"lineHeight": "16px",
|
|
125
|
+
"fontWeight": 600
|
|
126
|
+
},
|
|
120
127
|
"idsTypographyLabel1x": {
|
|
121
128
|
"fontFamily": "Tomato Grotesk",
|
|
122
129
|
"fontSize": "16px",
|
|
123
|
-
"lineHeight": "
|
|
130
|
+
"lineHeight": "20px",
|
|
124
131
|
"fontWeight": 600
|
|
125
132
|
},
|
|
126
133
|
"idsTypographyTitle1125x": {
|
|
@@ -138,6 +138,7 @@
|
|
|
138
138
|
},
|
|
139
139
|
"icon": {
|
|
140
140
|
"1x": "16px",
|
|
141
|
+
"0_875x": "14px",
|
|
141
142
|
"1_25x": "20px",
|
|
142
143
|
"1_5x": "24px"
|
|
143
144
|
}
|
|
@@ -150,10 +151,16 @@
|
|
|
150
151
|
"lineHeight": "16px",
|
|
151
152
|
"fontWeight": 600
|
|
152
153
|
},
|
|
154
|
+
"0_875x": {
|
|
155
|
+
"fontFamily": "Tomato Grotesk",
|
|
156
|
+
"fontSize": "14px",
|
|
157
|
+
"lineHeight": "16px",
|
|
158
|
+
"fontWeight": 600
|
|
159
|
+
},
|
|
153
160
|
"1x": {
|
|
154
161
|
"fontFamily": "Tomato Grotesk",
|
|
155
162
|
"fontSize": "16px",
|
|
156
|
-
"lineHeight": "
|
|
163
|
+
"lineHeight": "20px",
|
|
157
164
|
"fontWeight": 600
|
|
158
165
|
}
|
|
159
166
|
},
|
|
@@ -138,6 +138,7 @@
|
|
|
138
138
|
},
|
|
139
139
|
"icon": {
|
|
140
140
|
"1x": "16px",
|
|
141
|
+
"0_875x": "14px",
|
|
141
142
|
"1_25x": "20px",
|
|
142
143
|
"1_5x": "24px"
|
|
143
144
|
}
|
|
@@ -150,10 +151,16 @@
|
|
|
150
151
|
"lineHeight": "16px",
|
|
151
152
|
"fontWeight": 600
|
|
152
153
|
},
|
|
154
|
+
"0_875x": {
|
|
155
|
+
"fontFamily": "Tomato Grotesk",
|
|
156
|
+
"fontSize": "14px",
|
|
157
|
+
"lineHeight": "16px",
|
|
158
|
+
"fontWeight": 600
|
|
159
|
+
},
|
|
153
160
|
"1x": {
|
|
154
161
|
"fontFamily": "Tomato Grotesk",
|
|
155
162
|
"fontSize": "16px",
|
|
156
|
-
"lineHeight": "
|
|
163
|
+
"lineHeight": "20px",
|
|
157
164
|
"fontWeight": 600
|
|
158
165
|
}
|
|
159
166
|
},
|
|
@@ -114,10 +114,12 @@ $ids-dimension-element-3x: 48px;
|
|
|
114
114
|
$ids-dimension-element-3-5x: 56px;
|
|
115
115
|
$ids-dimension-element-4-5x: 72px;
|
|
116
116
|
$ids-dimension-icon-1x: 16px;
|
|
117
|
+
$ids-dimension-icon-0-875x: 14px;
|
|
117
118
|
$ids-dimension-icon-1-25x: 20px;
|
|
118
119
|
$ids-dimension-icon-1-5x: 24px;
|
|
119
120
|
$ids-typography-label-0-75x: 600 12px/16px Tomato Grotesk;
|
|
120
|
-
$ids-typography-label-
|
|
121
|
+
$ids-typography-label-0-875x: 600 14px/16px Tomato Grotesk;
|
|
122
|
+
$ids-typography-label-1x: 600 16px/20px Tomato Grotesk;
|
|
121
123
|
$ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
|
|
122
124
|
$ids-borderradius-0-25x: 4px;
|
|
123
125
|
$ids-borderradius-0-5x: 8px;
|
|
@@ -303,9 +305,11 @@ $ids-tokens: (
|
|
|
303
305
|
'ids-dimension-element-3-5x': $ids-dimension-element-3-5x,
|
|
304
306
|
'ids-dimension-element-4-5x': $ids-dimension-element-4-5x,
|
|
305
307
|
'ids-dimension-icon-1x': $ids-dimension-icon-1x,
|
|
308
|
+
'ids-dimension-icon-0-875x': $ids-dimension-icon-0-875x,
|
|
306
309
|
'ids-dimension-icon-1-25x': $ids-dimension-icon-1-25x,
|
|
307
310
|
'ids-dimension-icon-1-5x': $ids-dimension-icon-1-5x,
|
|
308
311
|
'ids-typography-label-0-75x': $ids-typography-label-0-75x,
|
|
312
|
+
'ids-typography-label-0-875x': $ids-typography-label-0-875x,
|
|
309
313
|
'ids-typography-label-1x': $ids-typography-label-1x,
|
|
310
314
|
'ids-typography-title-1-125x': $ids-typography-title-1-125x,
|
|
311
315
|
'ids-borderradius-0-25x': $ids-borderradius-0-25x,
|
|
@@ -114,10 +114,12 @@ $ids-dimension-element-3x: 48px;
|
|
|
114
114
|
$ids-dimension-element-3-5x: 56px;
|
|
115
115
|
$ids-dimension-element-4-5x: 72px;
|
|
116
116
|
$ids-dimension-icon-1x: 16px;
|
|
117
|
+
$ids-dimension-icon-0-875x: 14px;
|
|
117
118
|
$ids-dimension-icon-1-25x: 20px;
|
|
118
119
|
$ids-dimension-icon-1-5x: 24px;
|
|
119
120
|
$ids-typography-label-0-75x: 600 12px/16px Tomato Grotesk;
|
|
120
|
-
$ids-typography-label-
|
|
121
|
+
$ids-typography-label-0-875x: 600 14px/16px Tomato Grotesk;
|
|
122
|
+
$ids-typography-label-1x: 600 16px/20px Tomato Grotesk;
|
|
121
123
|
$ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
|
|
122
124
|
$ids-borderradius-0-25x: 4px;
|
|
123
125
|
$ids-borderradius-0-5x: 8px;
|
|
@@ -303,9 +305,11 @@ $ids-tokens: (
|
|
|
303
305
|
'ids-dimension-element-3-5x': $ids-dimension-element-3-5x,
|
|
304
306
|
'ids-dimension-element-4-5x': $ids-dimension-element-4-5x,
|
|
305
307
|
'ids-dimension-icon-1x': $ids-dimension-icon-1x,
|
|
308
|
+
'ids-dimension-icon-0-875x': $ids-dimension-icon-0-875x,
|
|
306
309
|
'ids-dimension-icon-1-25x': $ids-dimension-icon-1-25x,
|
|
307
310
|
'ids-dimension-icon-1-5x': $ids-dimension-icon-1-5x,
|
|
308
311
|
'ids-typography-label-0-75x': $ids-typography-label-0-75x,
|
|
312
|
+
'ids-typography-label-0-875x': $ids-typography-label-0-875x,
|
|
309
313
|
'ids-typography-label-1x': $ids-typography-label-1x,
|
|
310
314
|
'ids-typography-title-1-125x': $ids-typography-title-1-125x,
|
|
311
315
|
'ids-borderradius-0-25x': $ids-borderradius-0-25x,
|
package/dist/scss/_tokens.scss
CHANGED
|
@@ -114,10 +114,12 @@ $ids-dimension-element-3x: 48px;
|
|
|
114
114
|
$ids-dimension-element-3-5x: 56px;
|
|
115
115
|
$ids-dimension-element-4-5x: 72px;
|
|
116
116
|
$ids-dimension-icon-1x: 16px;
|
|
117
|
+
$ids-dimension-icon-0-875x: 14px;
|
|
117
118
|
$ids-dimension-icon-1-25x: 20px;
|
|
118
119
|
$ids-dimension-icon-1-5x: 24px;
|
|
119
120
|
$ids-typography-label-0-75x: 600 12px/16px Tomato Grotesk;
|
|
120
|
-
$ids-typography-label-
|
|
121
|
+
$ids-typography-label-0-875x: 600 14px/16px Tomato Grotesk;
|
|
122
|
+
$ids-typography-label-1x: 600 16px/20px Tomato Grotesk;
|
|
121
123
|
$ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
|
|
122
124
|
$ids-borderradius-0-25x: 4px;
|
|
123
125
|
$ids-borderradius-0-5x: 8px;
|
|
@@ -303,9 +305,11 @@ $ids-tokens: (
|
|
|
303
305
|
'ids-dimension-element-3-5x': $ids-dimension-element-3-5x,
|
|
304
306
|
'ids-dimension-element-4-5x': $ids-dimension-element-4-5x,
|
|
305
307
|
'ids-dimension-icon-1x': $ids-dimension-icon-1x,
|
|
308
|
+
'ids-dimension-icon-0-875x': $ids-dimension-icon-0-875x,
|
|
306
309
|
'ids-dimension-icon-1-25x': $ids-dimension-icon-1-25x,
|
|
307
310
|
'ids-dimension-icon-1-5x': $ids-dimension-icon-1-5x,
|
|
308
311
|
'ids-typography-label-0-75x': $ids-typography-label-0-75x,
|
|
312
|
+
'ids-typography-label-0-875x': $ids-typography-label-0-875x,
|
|
309
313
|
'ids-typography-label-1x': $ids-typography-label-1x,
|
|
310
314
|
'ids-typography-title-1-125x': $ids-typography-title-1-125x,
|
|
311
315
|
'ids-borderradius-0-25x': $ids-borderradius-0-25x,
|
package/dist/types/tokens.d.ts
CHANGED
|
@@ -144,6 +144,7 @@ export interface IDSTokens {
|
|
|
144
144
|
};
|
|
145
145
|
icon: {
|
|
146
146
|
'1x': string;
|
|
147
|
+
'0_875x': string;
|
|
147
148
|
'1_25x': string;
|
|
148
149
|
'1_5x': string;
|
|
149
150
|
};
|
|
@@ -151,6 +152,7 @@ export interface IDSTokens {
|
|
|
151
152
|
typography: {
|
|
152
153
|
label: {
|
|
153
154
|
'0_75x': string;
|
|
155
|
+
'0_875x': string;
|
|
154
156
|
'1x': string;
|
|
155
157
|
};
|
|
156
158
|
title: {
|
|
@@ -419,6 +421,7 @@ export const tokens: IDSTokens = {
|
|
|
419
421
|
},
|
|
420
422
|
icon: {
|
|
421
423
|
'1x': '16px',
|
|
424
|
+
'0_875x': '14px',
|
|
422
425
|
'1_25x': '20px',
|
|
423
426
|
'1_5x': '24px'
|
|
424
427
|
}
|
|
@@ -426,6 +429,7 @@ export const tokens: IDSTokens = {
|
|
|
426
429
|
typography: {
|
|
427
430
|
label: {
|
|
428
431
|
'0_75x': '[object Object]',
|
|
432
|
+
'0_875x': '[object Object]',
|
|
429
433
|
'1x': '[object Object]'
|
|
430
434
|
},
|
|
431
435
|
title: {
|
|
@@ -665,9 +669,11 @@ export const idsDimensionElement3x = '48px';
|
|
|
665
669
|
export const idsDimensionElement35x = '56px';
|
|
666
670
|
export const idsDimensionElement45x = '72px';
|
|
667
671
|
export const idsDimensionIcon1x = '16px';
|
|
672
|
+
export const idsDimensionIcon0875x = '14px';
|
|
668
673
|
export const idsDimensionIcon125x = '20px';
|
|
669
674
|
export const idsDimensionIcon15x = '24px';
|
|
670
675
|
export const idsTypographyLabel075x = '[object Object]';
|
|
676
|
+
export const idsTypographyLabel0875x = '[object Object]';
|
|
671
677
|
export const idsTypographyLabel1x = '[object Object]';
|
|
672
678
|
export const idsTypographyTitle1125x = '[object Object]';
|
|
673
679
|
export const idsBorderradius025x = '4px';
|
|
@@ -144,6 +144,7 @@ export interface IDSTokens {
|
|
|
144
144
|
};
|
|
145
145
|
icon: {
|
|
146
146
|
'1x': string;
|
|
147
|
+
'0_875x': string;
|
|
147
148
|
'1_25x': string;
|
|
148
149
|
'1_5x': string;
|
|
149
150
|
};
|
|
@@ -151,6 +152,7 @@ export interface IDSTokens {
|
|
|
151
152
|
typography: {
|
|
152
153
|
label: {
|
|
153
154
|
'0_75x': string;
|
|
155
|
+
'0_875x': string;
|
|
154
156
|
'1x': string;
|
|
155
157
|
};
|
|
156
158
|
title: {
|
|
@@ -419,6 +421,7 @@ export const tokens: IDSTokens = {
|
|
|
419
421
|
},
|
|
420
422
|
icon: {
|
|
421
423
|
'1x': '16px',
|
|
424
|
+
'0_875x': '14px',
|
|
422
425
|
'1_25x': '20px',
|
|
423
426
|
'1_5x': '24px'
|
|
424
427
|
}
|
|
@@ -426,6 +429,7 @@ export const tokens: IDSTokens = {
|
|
|
426
429
|
typography: {
|
|
427
430
|
label: {
|
|
428
431
|
'0_75x': '[object Object]',
|
|
432
|
+
'0_875x': '[object Object]',
|
|
429
433
|
'1x': '[object Object]'
|
|
430
434
|
},
|
|
431
435
|
title: {
|
|
@@ -665,9 +669,11 @@ export const idsDimensionElement3x = '48px';
|
|
|
665
669
|
export const idsDimensionElement35x = '56px';
|
|
666
670
|
export const idsDimensionElement45x = '72px';
|
|
667
671
|
export const idsDimensionIcon1x = '16px';
|
|
672
|
+
export const idsDimensionIcon0875x = '14px';
|
|
668
673
|
export const idsDimensionIcon125x = '20px';
|
|
669
674
|
export const idsDimensionIcon15x = '24px';
|
|
670
675
|
export const idsTypographyLabel075x = '[object Object]';
|
|
676
|
+
export const idsTypographyLabel0875x = '[object Object]';
|
|
671
677
|
export const idsTypographyLabel1x = '[object Object]';
|
|
672
678
|
export const idsTypographyTitle1125x = '[object Object]';
|
|
673
679
|
export const idsBorderradius025x = '4px';
|
|
@@ -144,6 +144,7 @@ export interface IDSTokens {
|
|
|
144
144
|
};
|
|
145
145
|
icon: {
|
|
146
146
|
'1x': string;
|
|
147
|
+
'0_875x': string;
|
|
147
148
|
'1_25x': string;
|
|
148
149
|
'1_5x': string;
|
|
149
150
|
};
|
|
@@ -151,6 +152,7 @@ export interface IDSTokens {
|
|
|
151
152
|
typography: {
|
|
152
153
|
label: {
|
|
153
154
|
'0_75x': string;
|
|
155
|
+
'0_875x': string;
|
|
154
156
|
'1x': string;
|
|
155
157
|
};
|
|
156
158
|
title: {
|
|
@@ -419,6 +421,7 @@ export const tokens: IDSTokens = {
|
|
|
419
421
|
},
|
|
420
422
|
icon: {
|
|
421
423
|
'1x': '16px',
|
|
424
|
+
'0_875x': '14px',
|
|
422
425
|
'1_25x': '20px',
|
|
423
426
|
'1_5x': '24px'
|
|
424
427
|
}
|
|
@@ -426,6 +429,7 @@ export const tokens: IDSTokens = {
|
|
|
426
429
|
typography: {
|
|
427
430
|
label: {
|
|
428
431
|
'0_75x': '[object Object]',
|
|
432
|
+
'0_875x': '[object Object]',
|
|
429
433
|
'1x': '[object Object]'
|
|
430
434
|
},
|
|
431
435
|
title: {
|
|
@@ -665,9 +669,11 @@ export const idsDimensionElement3x = '48px';
|
|
|
665
669
|
export const idsDimensionElement35x = '56px';
|
|
666
670
|
export const idsDimensionElement45x = '72px';
|
|
667
671
|
export const idsDimensionIcon1x = '16px';
|
|
672
|
+
export const idsDimensionIcon0875x = '14px';
|
|
668
673
|
export const idsDimensionIcon125x = '20px';
|
|
669
674
|
export const idsDimensionIcon15x = '24px';
|
|
670
675
|
export const idsTypographyLabel075x = '[object Object]';
|
|
676
|
+
export const idsTypographyLabel0875x = '[object Object]';
|
|
671
677
|
export const idsTypographyLabel1x = '[object Object]';
|
|
672
678
|
export const idsTypographyTitle1125x = '[object Object]';
|
|
673
679
|
export const idsBorderradius025x = '4px';
|