@gitlab/ui 103.5.1 → 103.6.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 (4) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/tokens/tailwind/tokens.cjs +29 -0
  3. package/package.json +1 -1
  4. package/src/tokens/build/tailwind/tokens.cjs +29 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [103.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.5.1...v103.6.0) (2024-11-26)
2
+
3
+
4
+ ### Features
5
+
6
+ * **Tailwind:** add status design tokens to Tailwind classes ([b57449f](https://gitlab.com/gitlab-org/gitlab-ui/commit/b57449f522dd4c38c58830cc84735658c12a09be))
7
+
1
8
  ## [103.5.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.5.0...v103.5.1) (2024-11-26)
2
9
 
3
10
 
package/dist/tokens/tailwind/tokens.cjs CHANGED
@@ -282,6 +282,32 @@ const brandColors = {
282
282
  },
283
283
  'brand-pink': { '01g': 'var(--gl-color-brand-pink-01g, #ffb9c9)' },
284
284
  };
285
+ const statusBackgroundColors = {
286
+ 'status-neutral':
287
+ 'var(--gl-status-neutral-background-color, var(--gl-color-neutral-100, #dcdcde))',
288
+ 'status-info': 'var(--gl-status-info-background-color, var(--gl-color-blue-100, #cbe2f9))',
289
+ 'status-success': 'var(--gl-status-success-background-color, var(--gl-color-green-100, #c3e6cd))',
290
+ 'status-warning':
291
+ 'var(--gl-status-warning-background-color, var(--gl-color-orange-100, #f5d9a8))',
292
+ 'status-danger': 'var(--gl-status-danger-background-color, var(--gl-color-red-100, #fdd4cd))',
293
+ 'status-brand': 'var(--gl-status-brand-background-color, var(--gl-color-purple-100, #e1d8f9))',
294
+ };
295
+ const statusTextColors = {
296
+ 'status-neutral': 'var(--gl-status-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))',
297
+ 'status-info': 'var(--gl-status-info-text-color, var(--gl-color-blue-700, #0b5cad))',
298
+ 'status-success': 'var(--gl-status-success-text-color, var(--gl-color-green-700, #24663b))',
299
+ 'status-warning': 'var(--gl-status-warning-text-color, var(--gl-color-orange-700, #8f4700))',
300
+ 'status-danger': 'var(--gl-status-danger-text-color, var(--gl-color-red-700, #ae1800))',
301
+ 'status-brand': 'var(--gl-status-brand-text-color, var(--gl-color-purple-700, #5943b6))',
302
+ };
303
+ const statusIconColors = {
304
+ 'status-neutral': 'var(--gl-status-neutral-icon-color, var(--gl-color-neutral-500, #737278))',
305
+ 'status-info': 'var(--gl-status-info-icon-color, var(--gl-color-blue-500, #1f75cb))',
306
+ 'status-success': 'var(--gl-status-success-icon-color, var(--gl-color-green-500, #108548))',
307
+ 'status-warning': 'var(--gl-status-warning-icon-color, var(--gl-color-orange-500, #ab6100))',
308
+ 'status-danger': 'var(--gl-status-danger-icon-color, var(--gl-color-red-500, #dd2b0e))',
309
+ 'status-brand': 'var(--gl-status-brand-icon-color, var(--gl-color-purple-500, #7b58cf))',
310
+ };
285
311
 
286
312
  const colors = {
287
313
  inherit: 'inherit',
@@ -302,6 +328,7 @@ const colors = {
302
328
  const backgroundColor = {
303
329
  ...colors,
304
330
  ...backgroundColors,
331
+ ...statusBackgroundColors,
305
332
  dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
306
333
  };
307
334
 
@@ -317,6 +344,7 @@ const outlineColor = {
317
344
 
318
345
  const fill = {
319
346
  ...colors,
347
+ ...statusIconColors,
320
348
  icon: {
321
349
  ...iconColors,
322
350
  },
@@ -325,6 +353,7 @@ const fill = {
325
353
  const textColor = {
326
354
  ...colors,
327
355
  ...textColors,
356
+ ...statusTextColors,
328
357
  primary: 'var(--gl-text-primary, #28272d)',
329
358
  secondary: 'var(--gl-text-secondary, #737278)',
330
359
  tertiary: 'var(--gl-text-tertiary, #89888d)',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "103.5.1",
3
+ "version": "103.6.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
package/src/tokens/build/tailwind/tokens.cjs CHANGED
@@ -282,6 +282,32 @@ const brandColors = {
282
282
  },
283
283
  'brand-pink': { '01g': 'var(--gl-color-brand-pink-01g, #ffb9c9)' },
284
284
  };
285
+ const statusBackgroundColors = {
286
+ 'status-neutral':
287
+ 'var(--gl-status-neutral-background-color, var(--gl-color-neutral-100, #dcdcde))',
288
+ 'status-info': 'var(--gl-status-info-background-color, var(--gl-color-blue-100, #cbe2f9))',
289
+ 'status-success': 'var(--gl-status-success-background-color, var(--gl-color-green-100, #c3e6cd))',
290
+ 'status-warning':
291
+ 'var(--gl-status-warning-background-color, var(--gl-color-orange-100, #f5d9a8))',
292
+ 'status-danger': 'var(--gl-status-danger-background-color, var(--gl-color-red-100, #fdd4cd))',
293
+ 'status-brand': 'var(--gl-status-brand-background-color, var(--gl-color-purple-100, #e1d8f9))',
294
+ };
295
+ const statusTextColors = {
296
+ 'status-neutral': 'var(--gl-status-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))',
297
+ 'status-info': 'var(--gl-status-info-text-color, var(--gl-color-blue-700, #0b5cad))',
298
+ 'status-success': 'var(--gl-status-success-text-color, var(--gl-color-green-700, #24663b))',
299
+ 'status-warning': 'var(--gl-status-warning-text-color, var(--gl-color-orange-700, #8f4700))',
300
+ 'status-danger': 'var(--gl-status-danger-text-color, var(--gl-color-red-700, #ae1800))',
301
+ 'status-brand': 'var(--gl-status-brand-text-color, var(--gl-color-purple-700, #5943b6))',
302
+ };
303
+ const statusIconColors = {
304
+ 'status-neutral': 'var(--gl-status-neutral-icon-color, var(--gl-color-neutral-500, #737278))',
305
+ 'status-info': 'var(--gl-status-info-icon-color, var(--gl-color-blue-500, #1f75cb))',
306
+ 'status-success': 'var(--gl-status-success-icon-color, var(--gl-color-green-500, #108548))',
307
+ 'status-warning': 'var(--gl-status-warning-icon-color, var(--gl-color-orange-500, #ab6100))',
308
+ 'status-danger': 'var(--gl-status-danger-icon-color, var(--gl-color-red-500, #dd2b0e))',
309
+ 'status-brand': 'var(--gl-status-brand-icon-color, var(--gl-color-purple-500, #7b58cf))',
310
+ };
285
311
 
286
312
  const colors = {
287
313
  inherit: 'inherit',
@@ -302,6 +328,7 @@ const colors = {
302
328
  const backgroundColor = {
303
329
  ...colors,
304
330
  ...backgroundColors,
331
+ ...statusBackgroundColors,
305
332
  dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
306
333
  };
307
334
 
@@ -317,6 +344,7 @@ const outlineColor = {
317
344
 
318
345
  const fill = {
319
346
  ...colors,
347
+ ...statusIconColors,
320
348
  icon: {
321
349
  ...iconColors,
322
350
  },
@@ -325,6 +353,7 @@ const fill = {
325
353
  const textColor = {
326
354
  ...colors,
327
355
  ...textColors,
356
+ ...statusTextColors,
328
357
  primary: 'var(--gl-text-primary, #28272d)',
329
358
  secondary: 'var(--gl-text-secondary, #737278)',
330
359
  tertiary: 'var(--gl-text-tertiary, #89888d)',