@gitlab/ui 128.0.0 → 128.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 (40) hide show
  1. package/dist/components/base/form/form_checkbox/form_checkbox.js +0 -3
  2. package/dist/components/base/form/form_checkbox/form_checkbox_group.js +132 -3
  3. package/dist/index.css +1 -1
  4. package/dist/index.css.map +1 -1
  5. package/dist/tailwind.css +1 -1
  6. package/dist/tailwind.css.map +1 -1
  7. package/dist/tokens/build/js/tokens.dark.js +127 -127
  8. package/dist/tokens/build/js/tokens.js +110 -110
  9. package/dist/vendor/bootstrap-vue/src/constants/components.js +1 -3
  10. package/dist/vendor/bootstrap-vue/src/mixins/form-radio-check-group.js +1 -2
  11. package/package.json +1 -1
  12. package/src/tokens/build/css/tokens.css +24 -24
  13. package/src/tokens/build/css/tokens.dark.css +26 -26
  14. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +82 -82
  15. package/src/tokens/build/docs/tokens-tailwind-docs.json +81 -81
  16. package/src/tokens/build/figma/constants.tokens.json +2245 -226
  17. package/src/tokens/build/figma/contextual.tokens.json +753 -77
  18. package/src/tokens/build/figma/deprecated.tokens.json +4151 -420
  19. package/src/tokens/build/figma/semantic.tokens.json +171 -19
  20. package/src/tokens/build/js/tokens.dark.js +130 -127
  21. package/src/tokens/build/js/tokens.js +113 -110
  22. package/src/tokens/build/json/tokens.dark.json +161 -161
  23. package/src/tokens/build/json/tokens.json +142 -142
  24. package/src/tokens/build/scss/_tokens.dark.scss +26 -26
  25. package/src/tokens/build/scss/_tokens.scss +24 -24
  26. package/src/tokens/constant/color.alpha.tokens.json +135 -15
  27. package/src/tokens/constant/color.tokens.json +2110 -211
  28. package/src/tokens/contextual/avatar.tokens.json +54 -6
  29. package/src/tokens/contextual/button.tokens.json +90 -10
  30. package/src/tokens/contextual/chart.tokens.json +9 -1
  31. package/src/tokens/contextual/illustration.tokens.json +600 -60
  32. package/src/tokens/deprecated/deprecated.color.data_viz.tokens.json +1100 -110
  33. package/src/tokens/deprecated/deprecated.color.theme.tokens.json +1440 -144
  34. package/src/tokens/deprecated/deprecated.color.tokens.json +1490 -149
  35. package/src/tokens/deprecated/deprecated.color.transparency.tokens.json +147 -43
  36. package/src/tokens/semantic/action.tokens.json +162 -18
  37. package/src/tokens/semantic/background.tokens.json +9 -1
  38. package/dist/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox-group.js +0 -37
  39. package/dist/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox.js +0 -134
  40. package/dist/vendor/bootstrap-vue/src/components/form-checkbox/index.js +0 -2
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -2,14 +2,14 @@
2
2
  // Do not edit directly, this file was auto-generated.
3
3
 
4
4
  $gl-border-radius-full: 9999px;
5
- $gl-color-alpha-0: transparent;
6
- $gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
7
- $gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
8
- $gl-color-alpha-dark-6: rgba(05, 05, 06, 0.06);
9
- $gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
10
- $gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
11
- $gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
12
- $gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
5
+ $gl-color-alpha-0: rgba(0, 0, 0, 0);
6
+ $gl-color-alpha-dark-2: rgba(5, 5, 6, 0.02);
7
+ $gl-color-alpha-dark-4: rgba(5, 5, 6, 0.04);
8
+ $gl-color-alpha-dark-6: rgba(5, 5, 6, 0.06);
9
+ $gl-color-alpha-dark-8: rgba(5, 5, 6, 0.08);
10
+ $gl-color-alpha-dark-16: rgba(5, 5, 6, 0.16);
11
+ $gl-color-alpha-dark-24: rgba(5, 5, 6, 0.24);
12
+ $gl-color-alpha-dark-40: rgba(5, 5, 6, 0.4);
13
13
  $gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
14
14
  $gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
15
15
  $gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
@@ -314,23 +314,23 @@ $gl-zindex-3: 3;
314
314
  $gl-zindex-4: 4;
315
315
  $gl-zindex-200: 200;
316
316
  $gl-zindex-9999: 9999;
317
- $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
318
- $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
319
- $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.
320
- $gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
321
- $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
322
- $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
317
+ $gl-avatar-fallback-background-color-red: rgba(252, 181, 170, 0.23921568627450981); // Red background for avatar fallback with no particular meaning.
318
+ $gl-avatar-fallback-background-color-purple: rgba(203, 187, 242, 0.23921568627450981); // Purple background for avatar fallback with no particular meaning.
319
+ $gl-avatar-fallback-background-color-blue: rgba(157, 199, 241, 0.23921568627450981); // Blue background for avatar fallback with no particular meaning.
320
+ $gl-avatar-fallback-background-color-green: rgba(145, 212, 168, 0.23921568627450981); // Green background for avatar fallback with no particular meaning.
321
+ $gl-avatar-fallback-background-color-orange: rgba(233, 190, 116, 0.23921568627450981); // Orange background for avatar fallback with no particular meaning.
322
+ $gl-avatar-fallback-background-color-neutral: rgba(191, 191, 195, 0.23921568627450981); // Neutral background for avatar fallback with no particular meaning.
323
323
  $gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); // Used for the background of an default primary button in the default state.
324
324
  $gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); // Used for the background of an default primary button in the hover state.
325
325
  $gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); // Used for the background of an default primary button in the active state.
326
326
  $gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); // Used for the background of an outlined confirm (positive) button in the default state.
327
327
  $gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); // Used for the background of an outlined confirm (positive) button in the hover state.
328
328
  $gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); // Used for the background of an outlined confirm (positive) button in the active state.
329
- $gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.40); // Used for the background of an outlined danger (destructive) button in the default state.
329
+ $gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.4); // Used for the background of an outlined danger (destructive) button in the default state.
330
330
  $gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); // Used for the background of an outlined danger (destructive) button in the hover state.
331
331
  $gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); // Used for the background of an outlined danger (destructive) button in the active state.
332
332
  $gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); // Used for the background of a disabled button.
333
- $gl-chart-threshold-area-color: rgba(221,43,14,0.1); // Used in charts to delineate a threshold area in a chart.
333
+ $gl-chart-threshold-area-color: rgba(221, 43, 14, 0.1); // Used in charts to delineate a threshold area in a chart.
334
334
  $gl-illustration-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail.
335
335
  $gl-illustration-stroke-width-default: 1.5; // Default stroke width to define shape and provide essential detail.
336
336
  $gl-illustration-fill-color-default: #423f4f; // Default fill color for an element where specific meaning or emphasis is not required.
@@ -570,12 +570,12 @@ $brand-gray-02: #a2a1a6 !default; // Use color.brand-gray.02 instead.
570
570
  $brand-gray-03: #74717a !default; // Use color.brand-gray.03 instead.
571
571
  $brand-gray-04: #45424d !default; // Use color.brand-gray.04 instead.
572
572
  $brand-gray-05: #2b2838 !default; // Use color.brand-gray.05 instead.
573
- $t-gray-a-16: rgba(05, 05, 06, 0.16) !default; // Use color.alpha.dark.16 instead.
574
- $t-gray-a-24: rgba(05, 05, 06, 0.24) !default; // Use color.alpha.dark.24 instead.
575
- $t-gray-a-02: rgba(05, 05, 06, 0.02) !default; // Use color.alpha.dark.2 instead.
576
- $t-gray-a-04: rgba(05, 05, 06, 0.04) !default; // Use color.alpha.dark.4 instead.
577
- $t-gray-a-06: rgba(05, 05, 06, 0.06) !default; // Use color.alpha.dark.6 instead.
578
- $t-gray-a-08: rgba(05, 05, 06, 0.08) !default; // Use color.alpha.dark.8 instead.
573
+ $t-gray-a-16: rgba(5, 5, 6, 0.16) !default; // Use color.alpha.dark.16 instead.
574
+ $t-gray-a-24: rgba(5, 5, 6, 0.24) !default; // Use color.alpha.dark.24 instead.
575
+ $t-gray-a-02: rgba(5, 5, 6, 0.02) !default; // Use color.alpha.dark.2 instead.
576
+ $t-gray-a-04: rgba(5, 5, 6, 0.04) !default; // Use color.alpha.dark.4 instead.
577
+ $t-gray-a-06: rgba(5, 5, 6, 0.06) !default; // Use color.alpha.dark.6 instead.
578
+ $t-gray-a-08: rgba(5, 5, 6, 0.08) !default; // Use color.alpha.dark.8 instead.
579
579
  $t-white-a-16: rgba(255, 255, 255, 0.16) !default; // Use color.alpha.light.16 instead.
580
580
  $t-white-a-24: rgba(255, 255, 255, 0.24) !default; // Use color.alpha.light.24 instead.
581
581
  $t-white-a-36: rgba(255, 255, 255, 0.36) !default; // Use color.alpha.light.36 instead.
@@ -583,16 +583,16 @@ $t-white-a-02: rgba(255, 255, 255, 0.02) !default; // Use color.alpha.light.2 in
583
583
  $t-white-a-04: rgba(255, 255, 255, 0.04) !default; // Use color.alpha.light.4 instead.
584
584
  $t-white-a-06: rgba(255, 255, 255, 0.06) !default; // Use color.alpha.light.6 instead.
585
585
  $t-white-a-08: rgba(255, 255, 255, 0.08) !default; // Use color.alpha.light.8 instead.
586
- $gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); // Used for the background of a neutral action in the default state.
586
+ $gl-action-neutral-background-color-default: rgba(137, 136, 141, 0); // Used for the background of a neutral action in the default state.
587
587
  $gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); // Used for the background of a neutral action in the hover state.
588
588
  $gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); // Used for the background of a neutral action in the active state.
589
- $gl-action-confirm-background-color-default: rgba(66, 143, 220, 0.0); // Used for the background of a confirm (positive) action in the default state.
589
+ $gl-action-confirm-background-color-default: rgba(66, 143, 220, 0); // Used for the background of a confirm (positive) action in the default state.
590
590
  $gl-action-confirm-background-color-hover: rgba(66, 143, 220, 0.4); // Used for the background of a confirm (positive) action in the hover state.
591
591
  $gl-action-confirm-background-color-active: rgba(66, 143, 220, 0.16); // Used for the background of a confirm (positive) action in the active state.
592
- $gl-action-danger-background-color-default: rgba(236, 89, 65, 0.0); // Used for the background of a danger (destructive) action in the default state.
592
+ $gl-action-danger-background-color-default: rgba(236, 89, 65, 0); // Used for the background of a danger (destructive) action in the default state.
593
593
  $gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); // Used for the background of a danger (destructive) action in the hover state.
594
594
  $gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); // Used for the background of a danger (destructive) action in the active state.
595
- $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
595
+ $gl-background-color-overlay: rgba(0, 0, 0, 0.64); // Used for an overlay that covers other content.
596
596
  $gl-letter-spacing-heading: -0.01em;
597
597
  $gl-heading-3-letter-spacing: inherit;
598
598
  $gl-heading-4-letter-spacing: inherit;
package/src/tokens/build/scss/_tokens.scss CHANGED
@@ -2,14 +2,14 @@
2
2
  // Do not edit directly, this file was auto-generated.
3
3
 
4
4
  $gl-border-radius-full: 9999px;
5
- $gl-color-alpha-0: transparent;
6
- $gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
7
- $gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
8
- $gl-color-alpha-dark-6: rgba(05, 05, 06, 0.06);
9
- $gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
10
- $gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
11
- $gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
12
- $gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
5
+ $gl-color-alpha-0: rgba(0, 0, 0, 0);
6
+ $gl-color-alpha-dark-2: rgba(5, 5, 6, 0.02);
7
+ $gl-color-alpha-dark-4: rgba(5, 5, 6, 0.04);
8
+ $gl-color-alpha-dark-6: rgba(5, 5, 6, 0.06);
9
+ $gl-color-alpha-dark-8: rgba(5, 5, 6, 0.08);
10
+ $gl-color-alpha-dark-16: rgba(5, 5, 6, 0.16);
11
+ $gl-color-alpha-dark-24: rgba(5, 5, 6, 0.24);
12
+ $gl-color-alpha-dark-40: rgba(5, 5, 6, 0.4);
13
13
  $gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
14
14
  $gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
15
15
  $gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
@@ -314,13 +314,13 @@ $gl-zindex-3: 3;
314
314
  $gl-zindex-4: 4;
315
315
  $gl-zindex-200: 200;
316
316
  $gl-zindex-9999: 9999;
317
- $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
318
- $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
319
- $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.
320
- $gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
321
- $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
322
- $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
323
- $gl-chart-threshold-area-color: rgba(221,43,14,0.1); // Used in charts to delineate a threshold area in a chart.
317
+ $gl-avatar-fallback-background-color-red: rgba(252, 181, 170, 0.23921568627450981); // Red background for avatar fallback with no particular meaning.
318
+ $gl-avatar-fallback-background-color-purple: rgba(203, 187, 242, 0.23921568627450981); // Purple background for avatar fallback with no particular meaning.
319
+ $gl-avatar-fallback-background-color-blue: rgba(157, 199, 241, 0.23921568627450981); // Blue background for avatar fallback with no particular meaning.
320
+ $gl-avatar-fallback-background-color-green: rgba(145, 212, 168, 0.23921568627450981); // Green background for avatar fallback with no particular meaning.
321
+ $gl-avatar-fallback-background-color-orange: rgba(233, 190, 116, 0.23921568627450981); // Orange background for avatar fallback with no particular meaning.
322
+ $gl-avatar-fallback-background-color-neutral: rgba(191, 191, 195, 0.23921568627450981); // Neutral background for avatar fallback with no particular meaning.
323
+ $gl-chart-threshold-area-color: rgba(221, 43, 14, 0.1); // Used in charts to delineate a threshold area in a chart.
324
324
  $gl-illustration-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail.
325
325
  $gl-illustration-stroke-width-default: 2; // Default stroke width to define shape and provide essential detail.
326
326
  $gl-illustration-fill-color-default: #fff; // Default fill color for an element where specific meaning or emphasis is not required.
@@ -560,12 +560,12 @@ $brand-gray-02: #a2a1a6 !default; // Use color.brand-gray.02 instead.
560
560
  $brand-gray-03: #74717a !default; // Use color.brand-gray.03 instead.
561
561
  $brand-gray-04: #45424d !default; // Use color.brand-gray.04 instead.
562
562
  $brand-gray-05: #2b2838 !default; // Use color.brand-gray.05 instead.
563
- $t-gray-a-16: rgba(05, 05, 06, 0.16) !default; // Use color.alpha.dark.16 instead.
564
- $t-gray-a-24: rgba(05, 05, 06, 0.24) !default; // Use color.alpha.dark.24 instead.
565
- $t-gray-a-02: rgba(05, 05, 06, 0.02) !default; // Use color.alpha.dark.2 instead.
566
- $t-gray-a-04: rgba(05, 05, 06, 0.04) !default; // Use color.alpha.dark.4 instead.
567
- $t-gray-a-06: rgba(05, 05, 06, 0.06) !default; // Use color.alpha.dark.6 instead.
568
- $t-gray-a-08: rgba(05, 05, 06, 0.08) !default; // Use color.alpha.dark.8 instead.
563
+ $t-gray-a-16: rgba(5, 5, 6, 0.16) !default; // Use color.alpha.dark.16 instead.
564
+ $t-gray-a-24: rgba(5, 5, 6, 0.24) !default; // Use color.alpha.dark.24 instead.
565
+ $t-gray-a-02: rgba(5, 5, 6, 0.02) !default; // Use color.alpha.dark.2 instead.
566
+ $t-gray-a-04: rgba(5, 5, 6, 0.04) !default; // Use color.alpha.dark.4 instead.
567
+ $t-gray-a-06: rgba(5, 5, 6, 0.06) !default; // Use color.alpha.dark.6 instead.
568
+ $t-gray-a-08: rgba(5, 5, 6, 0.08) !default; // Use color.alpha.dark.8 instead.
569
569
  $t-white-a-16: rgba(255, 255, 255, 0.16) !default; // Use color.alpha.light.16 instead.
570
570
  $t-white-a-24: rgba(255, 255, 255, 0.24) !default; // Use color.alpha.light.24 instead.
571
571
  $t-white-a-36: rgba(255, 255, 255, 0.36) !default; // Use color.alpha.light.36 instead.
@@ -573,13 +573,13 @@ $t-white-a-02: rgba(255, 255, 255, 0.02) !default; // Use color.alpha.light.2 in
573
573
  $t-white-a-04: rgba(255, 255, 255, 0.04) !default; // Use color.alpha.light.4 instead.
574
574
  $t-white-a-06: rgba(255, 255, 255, 0.06) !default; // Use color.alpha.light.6 instead.
575
575
  $t-white-a-08: rgba(255, 255, 255, 0.08) !default; // Use color.alpha.light.8 instead.
576
- $gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); // Used for the background of a neutral action in the default state.
576
+ $gl-action-neutral-background-color-default: rgba(164, 163, 168, 0); // Used for the background of a neutral action in the default state.
577
577
  $gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); // Used for the background of a neutral action in the hover state.
578
578
  $gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); // Used for the background of a neutral action in the active state.
579
- $gl-action-confirm-background-color-default: rgba(99, 166, 233, 0.0); // Used for the background of a confirm (positive) action in the default state.
579
+ $gl-action-confirm-background-color-default: rgba(99, 166, 233, 0); // Used for the background of a confirm (positive) action in the default state.
580
580
  $gl-action-confirm-background-color-hover: rgba(99, 166, 233, 0.16); // Used for the background of a confirm (positive) action in the hover state.
581
581
  $gl-action-confirm-background-color-active: rgba(11, 92, 173, 0.24); // Used for the background of a confirm (positive) action in the active state.
582
- $gl-action-danger-background-color-default: rgba(245, 127, 108, 0.0); // Used for the background of a danger (destructive) action in the default state.
582
+ $gl-action-danger-background-color-default: rgba(245, 127, 108, 0); // Used for the background of a danger (destructive) action in the default state.
583
583
  $gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); // Used for the background of a danger (destructive) action in the hover state.
584
584
  $gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); // Used for the background of a danger (destructive) action in the active state.
585
585
  $gl-letter-spacing-heading: -0.01em;
package/src/tokens/constant/color.alpha.tokens.json CHANGED
@@ -2,7 +2,15 @@
2
2
  "color": {
3
3
  "alpha": {
4
4
  "0": {
5
- "$value": "transparent",
5
+ "$value": {
6
+ "colorSpace": "srgb",
7
+ "components": [
8
+ 0,
9
+ 0,
10
+ 0
11
+ ],
12
+ "alpha": 0
13
+ },
6
14
  "$type": "color",
7
15
  "$extensions": {
8
16
  "com.figma.scopes": []
@@ -10,49 +18,105 @@
10
18
  },
11
19
  "dark": {
12
20
  "2": {
13
- "$value": "rgba(05, 05, 06, 0.02)",
21
+ "$value": {
22
+ "colorSpace": "srgb",
23
+ "components": [
24
+ 0.0196078431372549,
25
+ 0.0196078431372549,
26
+ 0.023529411764705882
27
+ ],
28
+ "alpha": 0.02
29
+ },
14
30
  "$type": "color",
15
31
  "$extensions": {
16
32
  "com.figma.scopes": []
17
33
  }
18
34
  },
19
35
  "4": {
20
- "$value": "rgba(05, 05, 06, 0.04)",
36
+ "$value": {
37
+ "colorSpace": "srgb",
38
+ "components": [
39
+ 0.0196078431372549,
40
+ 0.0196078431372549,
41
+ 0.023529411764705882
42
+ ],
43
+ "alpha": 0.04
44
+ },
21
45
  "$type": "color",
22
46
  "$extensions": {
23
47
  "com.figma.scopes": []
24
48
  }
25
49
  },
26
50
  "6": {
27
- "$value": "rgba(05, 05, 06, 0.06)",
51
+ "$value": {
52
+ "colorSpace": "srgb",
53
+ "components": [
54
+ 0.0196078431372549,
55
+ 0.0196078431372549,
56
+ 0.023529411764705882
57
+ ],
58
+ "alpha": 0.06
59
+ },
28
60
  "$type": "color",
29
61
  "$extensions": {
30
62
  "com.figma.scopes": []
31
63
  }
32
64
  },
33
65
  "8": {
34
- "$value": "rgba(05, 05, 06, 0.08)",
66
+ "$value": {
67
+ "colorSpace": "srgb",
68
+ "components": [
69
+ 0.0196078431372549,
70
+ 0.0196078431372549,
71
+ 0.023529411764705882
72
+ ],
73
+ "alpha": 0.08
74
+ },
35
75
  "$type": "color",
36
76
  "$extensions": {
37
77
  "com.figma.scopes": []
38
78
  }
39
79
  },
40
80
  "16": {
41
- "$value": "rgba(05, 05, 06, 0.16)",
81
+ "$value": {
82
+ "colorSpace": "srgb",
83
+ "components": [
84
+ 0.0196078431372549,
85
+ 0.0196078431372549,
86
+ 0.023529411764705882
87
+ ],
88
+ "alpha": 0.16
89
+ },
42
90
  "$type": "color",
43
91
  "$extensions": {
44
92
  "com.figma.scopes": []
45
93
  }
46
94
  },
47
95
  "24": {
48
- "$value": "rgba(05, 05, 06, 0.24)",
96
+ "$value": {
97
+ "colorSpace": "srgb",
98
+ "components": [
99
+ 0.0196078431372549,
100
+ 0.0196078431372549,
101
+ 0.023529411764705882
102
+ ],
103
+ "alpha": 0.24
104
+ },
49
105
  "$type": "color",
50
106
  "$extensions": {
51
107
  "com.figma.scopes": []
52
108
  }
53
109
  },
54
110
  "40": {
55
- "$value": "rgba(05, 05, 06, 0.4)",
111
+ "$value": {
112
+ "colorSpace": "srgb",
113
+ "components": [
114
+ 0.0196078431372549,
115
+ 0.0196078431372549,
116
+ 0.023529411764705882
117
+ ],
118
+ "alpha": 0.4
119
+ },
56
120
  "$type": "color",
57
121
  "$extensions": {
58
122
  "com.figma.scopes": []
@@ -61,49 +125,105 @@
61
125
  },
62
126
  "light": {
63
127
  "2": {
64
- "$value": "rgba(255, 255, 255, 0.02)",
128
+ "$value": {
129
+ "colorSpace": "srgb",
130
+ "components": [
131
+ 1,
132
+ 1,
133
+ 1
134
+ ],
135
+ "alpha": 0.02
136
+ },
65
137
  "$type": "color",
66
138
  "$extensions": {
67
139
  "com.figma.scopes": []
68
140
  }
69
141
  },
70
142
  "4": {
71
- "$value": "rgba(255, 255, 255, 0.04)",
143
+ "$value": {
144
+ "colorSpace": "srgb",
145
+ "components": [
146
+ 1,
147
+ 1,
148
+ 1
149
+ ],
150
+ "alpha": 0.04
151
+ },
72
152
  "$type": "color",
73
153
  "$extensions": {
74
154
  "com.figma.scopes": []
75
155
  }
76
156
  },
77
157
  "6": {
78
- "$value": "rgba(255, 255, 255, 0.06)",
158
+ "$value": {
159
+ "colorSpace": "srgb",
160
+ "components": [
161
+ 1,
162
+ 1,
163
+ 1
164
+ ],
165
+ "alpha": 0.06
166
+ },
79
167
  "$type": "color",
80
168
  "$extensions": {
81
169
  "com.figma.scopes": []
82
170
  }
83
171
  },
84
172
  "8": {
85
- "$value": "rgba(255, 255, 255, 0.08)",
173
+ "$value": {
174
+ "colorSpace": "srgb",
175
+ "components": [
176
+ 1,
177
+ 1,
178
+ 1
179
+ ],
180
+ "alpha": 0.08
181
+ },
86
182
  "$type": "color",
87
183
  "$extensions": {
88
184
  "com.figma.scopes": []
89
185
  }
90
186
  },
91
187
  "16": {
92
- "$value": "rgba(255, 255, 255, 0.16)",
188
+ "$value": {
189
+ "colorSpace": "srgb",
190
+ "components": [
191
+ 1,
192
+ 1,
193
+ 1
194
+ ],
195
+ "alpha": 0.16
196
+ },
93
197
  "$type": "color",
94
198
  "$extensions": {
95
199
  "com.figma.scopes": []
96
200
  }
97
201
  },
98
202
  "24": {
99
- "$value": "rgba(255, 255, 255, 0.24)",
203
+ "$value": {
204
+ "colorSpace": "srgb",
205
+ "components": [
206
+ 1,
207
+ 1,
208
+ 1
209
+ ],
210
+ "alpha": 0.24
211
+ },
100
212
  "$type": "color",
101
213
  "$extensions": {
102
214
  "com.figma.scopes": []
103
215
  }
104
216
  },
105
217
  "36": {
106
- "$value": "rgba(255, 255, 255, 0.36)",
218
+ "$value": {
219
+ "colorSpace": "srgb",
220
+ "components": [
221
+ 1,
222
+ 1,
223
+ 1
224
+ ],
225
+ "alpha": 0.36
226
+ },
107
227
  "$type": "color",
108
228
  "$extensions": {
109
229
  "com.figma.scopes": []