slippers-ui 2.0.13 → 2.1.0

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 (5) hide show
  1. package/dist/slippers-core.css +1 -1
  2. package/dist/slippers-core.umd.min.js +1 -1
  3. package/dist/slippers-core.umd.min.js.map +1 -1
  4. package/package.json +8 -7
  5. package/src/styles/_variables.scss +59 -23
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "slippers-ui",
3
- "version": "2.0.13",
3
+ "version": "2.1.0",
4
4
  "private": false,
5
5
  "description": "GitLab Marketing Design System",
6
6
  "author": "GitLab",
@@ -27,11 +27,12 @@
27
27
  },
28
28
  "devDependencies": {
29
29
  "@babel/core": "^7.16.7",
30
- "@storybook/addon-actions": "^6.4.13",
31
- "@storybook/addon-docs": "^6.4.13",
32
- "@storybook/addon-essentials": "^6.4.13",
33
- "@storybook/addon-links": "^6.4.13",
34
- "@storybook/vue": "^6.4.13",
30
+ "@mdx-js/react": "^1.6.22",
31
+ "@storybook/addon-actions": "^6.5.9",
32
+ "@storybook/addon-docs": "^6.5.9",
33
+ "@storybook/addon-essentials": "^6.5.9",
34
+ "@storybook/addon-links": "^6.5.9",
35
+ "@storybook/vue": "^6.5.9",
35
36
  "@typescript-eslint/eslint-plugin": "^4.18.0",
36
37
  "@typescript-eslint/parser": "^4.18.0",
37
38
  "@vue/cli-plugin-babel": "~4.5.0",
@@ -44,7 +45,7 @@
44
45
  "css-loader": "^5.2.7",
45
46
  "eslint": "^6.7.2",
46
47
  "eslint-plugin-prettier": "^3.3.1",
47
- "eslint-plugin-storybook": "^0.5.6",
48
+ "eslint-plugin-storybook": "^0.6.1",
48
49
  "eslint-plugin-vue": "^6.2.2",
49
50
  "html-loader": "^1.0.0-alpha.0",
50
51
  "prettier": "^2.2.1",
package/src/styles/_variables.scss CHANGED
@@ -163,31 +163,38 @@ $spacing-vertical: "y" !default;
163
163
  $font-size-default: 16px !default;
164
164
 
165
165
  // Headings
166
- $text-display-1: 110px !default;
166
+ $text-display-1: 96px !default;
167
167
 
168
- $text-heading-1: 68px !default;
169
- $text-heading-2: 45px !default;
170
- $text-heading-3: 32px !default;
171
- $text-heading-4: 23px !default;
172
- $text-heading-5: 19px !default;
168
+ $text-heading-1: 80px !default;
169
+ $text-heading-2: 56px !default;
170
+ $text-heading-3: 40px !default;
171
+ $text-heading-4: 32px !default;
172
+ $text-heading-5: 24px !default;
173
173
 
174
174
  $text-display-1-mobile: 77px !default;
175
175
 
176
- $text-heading-1-mobile: 48px !default;
177
- $text-heading-2-mobile: 32px !default;
178
- $text-heading-3-mobile: 23px !default;
176
+ $text-heading-1-mobile: 68px !default;
177
+ $text-heading-2-mobile: 48px !default;
178
+ $text-heading-3-mobile: 36px !default;
179
+ $text-heading-4-mobile: 28px !default;
180
+ $text-heading-5-mobile: 20px !default;
179
181
 
180
182
  // Body
181
- $text-body-1: 16px !default;
182
- $text-body-2: 14px !default;
183
- $text-body-3: 12px !default;
183
+ $text-body-1: 20px !default;
184
+ $text-body-2: 16px !default;
185
+ $text-body-3: 14px !default;
184
186
 
185
187
  $text-body-1-bold: 20px !default;
186
- $text-body-2-bold: 18px !default;
187
- $text-body-3-bold: 16px !default;
188
+ $text-body-2-bold: 16px !default;
189
+ $text-body-3-bold: 14px !default;
190
+
191
+ $text-body-1-link: 20px !default;
192
+ $text-body-2-link: 16px !default;
193
+ $text-body-3-link: 14px !default;
188
194
 
189
195
  // Button
190
196
  $text-button-1: 18px !default;
197
+ $text-button-2: 14px !default;
191
198
 
192
199
  // ALL CAPS
193
200
  $text-caps: 10px !default;
@@ -201,19 +208,21 @@ $text-emphasis: 23px !default;
201
208
  // Line Heights
202
209
  $line-height-default: 24px !default;
203
210
 
204
- $line-height-display-1: 128px !default;
211
+ $line-height-display-1: 100px !default;
205
212
 
206
- $line-height-heading-1: 88px !default;
207
- $line-height-heading-2: 56px !default;
208
- $line-height-heading-3: 40px !default;
209
- $line-height-heading-4: 32px !default;
210
- $line-height-heading-5: 28px !default;
213
+ $line-height-heading-1: 90px !default;
214
+ $line-height-heading-2: 66px !default;
215
+ $line-height-heading-3: 48px !default;
216
+ $line-height-heading-4: 40px !default;
217
+ $line-height-heading-5: 32px !default;
211
218
 
212
219
  $line-height-display-1-mobile: 96px !default;
213
220
 
214
- $line-height-heading-1-mobile: 64px !default;
215
- $line-height-heading-2-mobile: 48px !default;
216
- $line-height-heading-3-mobile: 36px !default;
221
+ $line-height-heading-1-mobile: 68px !default;
222
+ $line-height-heading-2-mobile: 60px !default;
223
+ $line-height-heading-3-mobile: 48px !default;
224
+ $line-height-heading-4-mobile: 36px !default;
225
+ $line-height-heading-5-mobile: 28px !default;
217
226
 
218
227
  $line-height-body-1: 24px !default;
219
228
  $line-height-body-2: 20px !default;
@@ -223,11 +232,35 @@ $line-height-body-1-bold: 32px !default;
223
232
  $line-height-body-2-bold: 28px !default;
224
233
  $line-height-body-3-bold: 24px !default;
225
234
 
235
+ $line-height-body-1-link: 32px !default;
236
+ $line-height-body-2-link: 28px !default;
237
+ $line-height-body-3-link: 24px !default;
238
+
226
239
  $line-height-button-1: 20px !default;
227
240
  $line-height-caps: 20px !default;
228
241
  $line-height-quotes: 38px !default;
229
242
  $line-height-emphasis: 38px !default;
230
243
 
244
+ // Heading Letter Spacing
245
+ $letter-spacing-display-1: -3px !default;
246
+
247
+ $letter-spacing-heading-1: -3.5px !default;
248
+ $letter-spacing-heading-2: -1.5px !default;
249
+ $letter-spacing-heading-3: -2px !default;
250
+ $letter-spacing-heading-4: -1.5px !default;
251
+ $letter-spacing-heading-5: -1px !default;
252
+
253
+ $letter-spacing-heading-2-mobile: -2.5px !default;
254
+ $letter-spacing-heading-5-mobile: 0px !default;
255
+
256
+ $letter-spacing-heading-1-bold: -1.5px !default;
257
+ $letter-spacing-heading-2-bold: -2.5px !default;
258
+ $letter-spacing-heading-3-bold: -2px !default;
259
+ $letter-spacing-heading-4-bold: -1.5px !default;
260
+ $letter-spacing-heading-5-bold: -1px !default;
261
+
262
+ $letter-spacing-heading-1-bold-mobile: -1.5px !default;
263
+
231
264
  // Font Weight
232
265
  $font-weight-normal: 400 !default;
233
266
  $font-weight-bold: 600 !default;
@@ -300,3 +333,6 @@ $shadow-surface-secondary-1: $color-surface-300 0px 8px 50px -24px;
300
333
  $shadow-surface-secondary-2: $color-surface-300 0px 16px 50px -24px;
301
334
  $shadow-surface-secondary-3: $color-surface-300 0px 24px 50px -24px;
302
335
  $shadow-surface-secondary-4: $color-surface-300 0px 32px 50px -24px;
336
+
337
+ $interactive-ease: cubic-bezier(0.70, 0.00, 0.30, 1.00);
338
+ $expressive-ease: cubic-bezier(0.30, 0.80, 0.70, 1.20);