@gitlab/ui 88.2.0 → 88.3.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 (18) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/charts/sparkline/sparkline.js +0 -1
  3. package/dist/index.css +1 -1
  4. package/dist/index.css.map +1 -1
  5. package/dist/tokens/build/js/tokens.dark.js +6 -6
  6. package/dist/tokens/css/tokens.dark.css +6 -6
  7. package/dist/tokens/js/tokens.dark.js +6 -6
  8. package/dist/tokens/json/tokens.dark.json +18 -12
  9. package/dist/tokens/json/tokens.json +12 -6
  10. package/dist/tokens/scss/_tokens.dark.scss +6 -6
  11. package/package.json +1 -1
  12. package/src/components/charts/sparkline/sparkline.vue +0 -1
  13. package/src/tokens/build/css/tokens.dark.css +6 -6
  14. package/src/tokens/build/js/tokens.dark.js +6 -6
  15. package/src/tokens/build/json/tokens.dark.json +18 -12
  16. package/src/tokens/build/json/tokens.json +12 -6
  17. package/src/tokens/build/scss/_tokens.dark.scss +6 -6
  18. package/src/tokens/contextual/avatar.tokens.json +12 -6
package/dist/tokens/build/js/tokens.dark.js CHANGED
@@ -276,13 +276,13 @@ const DATA_VIZ_ORANGE_700 = '#e99b60';
276
276
  const DATA_VIZ_ORANGE_800 = '#eebd8c';
277
277
  const DATA_VIZ_ORANGE_900 = '#f5d6b3';
278
278
  const DATA_VIZ_ORANGE_950 = '#fae8d1';
279
- const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.08)'; // Used to define the edge of an avatar.
280
- const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(05, 05, 06, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
281
- const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#660e00'; // Red background for avatar fallback with no particular meaning.
279
+ const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(255, 255, 255, 0.08)'; // Used to define the edge of an avatar.
280
+ const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(255, 255, 255, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
281
+ const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#4d0a00'; // Red background for avatar fallback with no particular meaning.
282
282
  const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#232150'; // Purple background for avatar fallback with no particular meaning.
283
- const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#033464'; // Blue background for avatar fallback with no particular meaning.
284
- const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#0a4020'; // Green background for avatar fallback with no particular meaning.
285
- const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#5c2900'; // Orange background for avatar fallback with no particular meaning.
283
+ const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#002850'; // Blue background for avatar fallback with no particular meaning.
284
+ const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#072b15'; // Green background for avatar fallback with no particular meaning.
285
+ const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#421f00'; // Orange background for avatar fallback with no particular meaning.
286
286
  const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
287
287
  const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a subtle neutral badge when static or the default state when linked.
288
288
  const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a subtle neutral badge in the active state.
package/dist/tokens/css/tokens.dark.css CHANGED
@@ -631,13 +631,13 @@
631
631
  --gl-badge-muted-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a subtle neutral badge in the active state. */
632
632
  --gl-badge-muted-background-color-default: var(--gl-color-neutral-900); /* Used for the background of a subtle neutral badge when static or the default state when linked. */
633
633
  --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-900); /* Neutral background for avatar fallback with no particular meaning. */
634
- --gl-avatar-fallback-background-color-orange: var(--gl-color-orange-900); /* Orange background for avatar fallback with no particular meaning. */
635
- --gl-avatar-fallback-background-color-green: var(--gl-color-green-900); /* Green background for avatar fallback with no particular meaning. */
636
- --gl-avatar-fallback-background-color-blue: var(--gl-color-blue-900); /* Blue background for avatar fallback with no particular meaning. */
634
+ --gl-avatar-fallback-background-color-orange: var(--gl-color-orange-950); /* Orange background for avatar fallback with no particular meaning. */
635
+ --gl-avatar-fallback-background-color-green: var(--gl-color-green-950); /* Green background for avatar fallback with no particular meaning. */
636
+ --gl-avatar-fallback-background-color-blue: var(--gl-color-blue-950); /* Blue background for avatar fallback with no particular meaning. */
637
637
  --gl-avatar-fallback-background-color-purple: var(--gl-color-purple-950); /* Purple background for avatar fallback with no particular meaning. */
638
- --gl-avatar-fallback-background-color-red: var(--gl-color-red-900); /* Red background for avatar fallback with no particular meaning. */
639
- --gl-avatar-border-color-hover: var(--gl-color-alpha-dark-24); /* Used to increase the edge definition of an avatar in the hover state. */
640
- --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /* Used to define the edge of an avatar. */
638
+ --gl-avatar-fallback-background-color-red: var(--gl-color-red-950); /* Red background for avatar fallback with no particular meaning. */
639
+ --gl-avatar-border-color-hover: var(--gl-color-alpha-light-24); /* Used to increase the edge definition of an avatar in the hover state. */
640
+ --gl-avatar-border-color-default: var(--gl-color-alpha-light-8); /* Used to define the edge of an avatar. */
641
641
  --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
642
642
  --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
643
643
  --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */
package/dist/tokens/js/tokens.dark.js CHANGED
@@ -276,13 +276,13 @@ export const DATA_VIZ_ORANGE_700 = '#e99b60';
276
276
  export const DATA_VIZ_ORANGE_800 = '#eebd8c';
277
277
  export const DATA_VIZ_ORANGE_900 = '#f5d6b3';
278
278
  export const DATA_VIZ_ORANGE_950 = '#fae8d1';
279
- export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.08)'; // Used to define the edge of an avatar.
280
- export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(05, 05, 06, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
281
- export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#660e00'; // Red background for avatar fallback with no particular meaning.
279
+ export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(255, 255, 255, 0.08)'; // Used to define the edge of an avatar.
280
+ export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(255, 255, 255, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
281
+ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#4d0a00'; // Red background for avatar fallback with no particular meaning.
282
282
  export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#232150'; // Purple background for avatar fallback with no particular meaning.
283
- export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#033464'; // Blue background for avatar fallback with no particular meaning.
284
- export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#0a4020'; // Green background for avatar fallback with no particular meaning.
285
- export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#5c2900'; // Orange background for avatar fallback with no particular meaning.
283
+ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#002850'; // Blue background for avatar fallback with no particular meaning.
284
+ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#072b15'; // Green background for avatar fallback with no particular meaning.
285
+ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#421f00'; // Orange background for avatar fallback with no particular meaning.
286
286
  export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
287
287
  export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a subtle neutral badge when static or the default state when linked.
288
288
  export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a subtle neutral badge in the active state.
package/dist/tokens/json/tokens.dark.json CHANGED
@@ -5404,13 +5404,16 @@
5404
5404
  "border": {
5405
5405
  "color": {
5406
5406
  "default": {
5407
- "value": "rgba(05, 05, 06, 0.08)",
5407
+ "value": "rgba(255, 255, 255, 0.08)",
5408
5408
  "$type": "color",
5409
5409
  "comment": "Used to define the edge of an avatar.",
5410
5410
  "filePath": "src/tokens/contextual/avatar.tokens.json",
5411
5411
  "isSource": true,
5412
5412
  "original": {
5413
- "value": "{color.alpha.dark.8}",
5413
+ "value": {
5414
+ "default": "{color.alpha.dark.8}",
5415
+ "dark": "{color.alpha.light.8}"
5416
+ },
5414
5417
  "$type": "color",
5415
5418
  "comment": "Used to define the edge of an avatar."
5416
5419
  },
@@ -5424,13 +5427,16 @@
5424
5427
  ]
5425
5428
  },
5426
5429
  "hover": {
5427
- "value": "rgba(05, 05, 06, 0.24)",
5430
+ "value": "rgba(255, 255, 255, 0.24)",
5428
5431
  "$type": "color",
5429
5432
  "comment": "Used to increase the edge definition of an avatar in the hover state.",
5430
5433
  "filePath": "src/tokens/contextual/avatar.tokens.json",
5431
5434
  "isSource": true,
5432
5435
  "original": {
5433
- "value": "{color.alpha.dark.24}",
5436
+ "value": {
5437
+ "default": "{color.alpha.dark.24}",
5438
+ "dark": "{color.alpha.light.24}"
5439
+ },
5434
5440
  "$type": "color",
5435
5441
  "comment": "Used to increase the edge definition of an avatar in the hover state."
5436
5442
  },
@@ -5449,7 +5455,7 @@
5449
5455
  "background": {
5450
5456
  "color": {
5451
5457
  "red": {
5452
- "value": "#660e00",
5458
+ "value": "#4d0a00",
5453
5459
  "$type": "color",
5454
5460
  "comment": "Red background for avatar fallback with no particular meaning.",
5455
5461
  "filePath": "src/tokens/contextual/avatar.tokens.json",
@@ -5457,7 +5463,7 @@
5457
5463
  "original": {
5458
5464
  "value": {
5459
5465
  "default": "{color.red.50}",
5460
- "dark": "{color.red.900}"
5466
+ "dark": "{color.red.950}"
5461
5467
  },
5462
5468
  "$type": "color",
5463
5469
  "comment": "Red background for avatar fallback with no particular meaning."
@@ -5497,7 +5503,7 @@
5497
5503
  ]
5498
5504
  },
5499
5505
  "blue": {
5500
- "value": "#033464",
5506
+ "value": "#002850",
5501
5507
  "$type": "color",
5502
5508
  "comment": "Blue background for avatar fallback with no particular meaning.",
5503
5509
  "filePath": "src/tokens/contextual/avatar.tokens.json",
@@ -5505,7 +5511,7 @@
5505
5511
  "original": {
5506
5512
  "value": {
5507
5513
  "default": "{color.blue.50}",
5508
- "dark": "{color.blue.900}"
5514
+ "dark": "{color.blue.950}"
5509
5515
  },
5510
5516
  "$type": "color",
5511
5517
  "comment": "Blue background for avatar fallback with no particular meaning."
@@ -5521,7 +5527,7 @@
5521
5527
  ]
5522
5528
  },
5523
5529
  "green": {
5524
- "value": "#0a4020",
5530
+ "value": "#072b15",
5525
5531
  "$type": "color",
5526
5532
  "comment": "Green background for avatar fallback with no particular meaning.",
5527
5533
  "filePath": "src/tokens/contextual/avatar.tokens.json",
@@ -5529,7 +5535,7 @@
5529
5535
  "original": {
5530
5536
  "value": {
5531
5537
  "default": "{color.green.50}",
5532
- "dark": "{color.green.900}"
5538
+ "dark": "{color.green.950}"
5533
5539
  },
5534
5540
  "$type": "color",
5535
5541
  "comment": "Green background for avatar fallback with no particular meaning."
@@ -5545,7 +5551,7 @@
5545
5551
  ]
5546
5552
  },
5547
5553
  "orange": {
5548
- "value": "#5c2900",
5554
+ "value": "#421f00",
5549
5555
  "$type": "color",
5550
5556
  "comment": "Orange background for avatar fallback with no particular meaning.",
5551
5557
  "filePath": "src/tokens/contextual/avatar.tokens.json",
@@ -5553,7 +5559,7 @@
5553
5559
  "original": {
5554
5560
  "value": {
5555
5561
  "default": "{color.orange.50}",
5556
- "dark": "{color.orange.900}"
5562
+ "dark": "{color.orange.950}"
5557
5563
  },
5558
5564
  "$type": "color",
5559
5565
  "comment": "Orange background for avatar fallback with no particular meaning."
package/dist/tokens/json/tokens.json CHANGED
@@ -5410,7 +5410,10 @@
5410
5410
  "filePath": "src/tokens/contextual/avatar.tokens.json",
5411
5411
  "isSource": true,
5412
5412
  "original": {
5413
- "value": "{color.alpha.dark.8}",
5413
+ "value": {
5414
+ "default": "{color.alpha.dark.8}",
5415
+ "dark": "{color.alpha.light.8}"
5416
+ },
5414
5417
  "$type": "color",
5415
5418
  "comment": "Used to define the edge of an avatar."
5416
5419
  },
@@ -5430,7 +5433,10 @@
5430
5433
  "filePath": "src/tokens/contextual/avatar.tokens.json",
5431
5434
  "isSource": true,
5432
5435
  "original": {
5433
- "value": "{color.alpha.dark.24}",
5436
+ "value": {
5437
+ "default": "{color.alpha.dark.24}",
5438
+ "dark": "{color.alpha.light.24}"
5439
+ },
5434
5440
  "$type": "color",
5435
5441
  "comment": "Used to increase the edge definition of an avatar in the hover state."
5436
5442
  },
@@ -5457,7 +5463,7 @@
5457
5463
  "original": {
5458
5464
  "value": {
5459
5465
  "default": "{color.red.50}",
5460
- "dark": "{color.red.900}"
5466
+ "dark": "{color.red.950}"
5461
5467
  },
5462
5468
  "$type": "color",
5463
5469
  "comment": "Red background for avatar fallback with no particular meaning."
@@ -5505,7 +5511,7 @@
5505
5511
  "original": {
5506
5512
  "value": {
5507
5513
  "default": "{color.blue.50}",
5508
- "dark": "{color.blue.900}"
5514
+ "dark": "{color.blue.950}"
5509
5515
  },
5510
5516
  "$type": "color",
5511
5517
  "comment": "Blue background for avatar fallback with no particular meaning."
@@ -5529,7 +5535,7 @@
5529
5535
  "original": {
5530
5536
  "value": {
5531
5537
  "default": "{color.green.50}",
5532
- "dark": "{color.green.900}"
5538
+ "dark": "{color.green.950}"
5533
5539
  },
5534
5540
  "$type": "color",
5535
5541
  "comment": "Green background for avatar fallback with no particular meaning."
@@ -5553,7 +5559,7 @@
5553
5559
  "original": {
5554
5560
  "value": {
5555
5561
  "default": "{color.orange.50}",
5556
- "dark": "{color.orange.900}"
5562
+ "dark": "{color.orange.950}"
5557
5563
  },
5558
5564
  "$type": "color",
5559
5565
  "comment": "Orange background for avatar fallback with no particular meaning."
package/dist/tokens/scss/_tokens.dark.scss CHANGED
@@ -629,13 +629,13 @@ $gl-badge-muted-border-color-hover: $gl-color-neutral-700; // Used for the borde
629
629
  $gl-badge-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a subtle neutral badge in the active state.
630
630
  $gl-badge-muted-background-color-default: $gl-color-neutral-900; // Used for the background of a subtle neutral badge when static or the default state when linked.
631
631
  $gl-avatar-fallback-background-color-neutral: $gl-color-neutral-900; // Neutral background for avatar fallback with no particular meaning.
632
- $gl-avatar-fallback-background-color-orange: $gl-color-orange-900; // Orange background for avatar fallback with no particular meaning.
633
- $gl-avatar-fallback-background-color-green: $gl-color-green-900; // Green background for avatar fallback with no particular meaning.
634
- $gl-avatar-fallback-background-color-blue: $gl-color-blue-900; // Blue background for avatar fallback with no particular meaning.
632
+ $gl-avatar-fallback-background-color-orange: $gl-color-orange-950; // Orange background for avatar fallback with no particular meaning.
633
+ $gl-avatar-fallback-background-color-green: $gl-color-green-950; // Green background for avatar fallback with no particular meaning.
634
+ $gl-avatar-fallback-background-color-blue: $gl-color-blue-950; // Blue background for avatar fallback with no particular meaning.
635
635
  $gl-avatar-fallback-background-color-purple: $gl-color-purple-950; // Purple background for avatar fallback with no particular meaning.
636
- $gl-avatar-fallback-background-color-red: $gl-color-red-900; // Red background for avatar fallback with no particular meaning.
637
- $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the edge definition of an avatar in the hover state.
638
- $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
636
+ $gl-avatar-fallback-background-color-red: $gl-color-red-950; // Red background for avatar fallback with no particular meaning.
637
+ $gl-avatar-border-color-hover: $gl-color-alpha-light-24; // Used to increase the edge definition of an avatar in the hover state.
638
+ $gl-avatar-border-color-default: $gl-color-alpha-light-8; // Used to define the edge of an avatar.
639
639
  $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
640
640
  $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
641
641
  $gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "88.2.0",
3
+ "version": "88.3.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
package/src/components/charts/sparkline/sparkline.vue CHANGED
@@ -161,7 +161,6 @@ export default {
161
161
  return {
162
162
  type: 'line',
163
163
  symbol: 'circle',
164
- hoverAnimation: false,
165
164
  animation: true,
166
165
  cursor: 'auto',
167
166
  symbolSize,
package/src/tokens/build/css/tokens.dark.css CHANGED
@@ -631,13 +631,13 @@
631
631
  --gl-badge-muted-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a subtle neutral badge in the active state. */
632
632
  --gl-badge-muted-background-color-default: var(--gl-color-neutral-900); /* Used for the background of a subtle neutral badge when static or the default state when linked. */
633
633
  --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-900); /* Neutral background for avatar fallback with no particular meaning. */
634
- --gl-avatar-fallback-background-color-orange: var(--gl-color-orange-900); /* Orange background for avatar fallback with no particular meaning. */
635
- --gl-avatar-fallback-background-color-green: var(--gl-color-green-900); /* Green background for avatar fallback with no particular meaning. */
636
- --gl-avatar-fallback-background-color-blue: var(--gl-color-blue-900); /* Blue background for avatar fallback with no particular meaning. */
634
+ --gl-avatar-fallback-background-color-orange: var(--gl-color-orange-950); /* Orange background for avatar fallback with no particular meaning. */
635
+ --gl-avatar-fallback-background-color-green: var(--gl-color-green-950); /* Green background for avatar fallback with no particular meaning. */
636
+ --gl-avatar-fallback-background-color-blue: var(--gl-color-blue-950); /* Blue background for avatar fallback with no particular meaning. */
637
637
  --gl-avatar-fallback-background-color-purple: var(--gl-color-purple-950); /* Purple background for avatar fallback with no particular meaning. */
638
- --gl-avatar-fallback-background-color-red: var(--gl-color-red-900); /* Red background for avatar fallback with no particular meaning. */
639
- --gl-avatar-border-color-hover: var(--gl-color-alpha-dark-24); /* Used to increase the edge definition of an avatar in the hover state. */
640
- --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /* Used to define the edge of an avatar. */
638
+ --gl-avatar-fallback-background-color-red: var(--gl-color-red-950); /* Red background for avatar fallback with no particular meaning. */
639
+ --gl-avatar-border-color-hover: var(--gl-color-alpha-light-24); /* Used to increase the edge definition of an avatar in the hover state. */
640
+ --gl-avatar-border-color-default: var(--gl-color-alpha-light-8); /* Used to define the edge of an avatar. */
641
641
  --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
642
642
  --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
643
643
  --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */
package/src/tokens/build/js/tokens.dark.js CHANGED
@@ -276,13 +276,13 @@ export const DATA_VIZ_ORANGE_700 = '#e99b60';
276
276
  export const DATA_VIZ_ORANGE_800 = '#eebd8c';
277
277
  export const DATA_VIZ_ORANGE_900 = '#f5d6b3';
278
278
  export const DATA_VIZ_ORANGE_950 = '#fae8d1';
279
- export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.08)'; // Used to define the edge of an avatar.
280
- export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(05, 05, 06, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
281
- export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#660e00'; // Red background for avatar fallback with no particular meaning.
279
+ export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(255, 255, 255, 0.08)'; // Used to define the edge of an avatar.
280
+ export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(255, 255, 255, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
281
+ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#4d0a00'; // Red background for avatar fallback with no particular meaning.
282
282
  export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#232150'; // Purple background for avatar fallback with no particular meaning.
283
- export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#033464'; // Blue background for avatar fallback with no particular meaning.
284
- export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#0a4020'; // Green background for avatar fallback with no particular meaning.
285
- export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#5c2900'; // Orange background for avatar fallback with no particular meaning.
283
+ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#002850'; // Blue background for avatar fallback with no particular meaning.
284
+ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#072b15'; // Green background for avatar fallback with no particular meaning.
285
+ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#421f00'; // Orange background for avatar fallback with no particular meaning.
286
286
  export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
287
287
  export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a subtle neutral badge when static or the default state when linked.
288
288
  export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a subtle neutral badge in the active state.
package/src/tokens/build/json/tokens.dark.json CHANGED
@@ -5404,13 +5404,16 @@
5404
5404
  "border": {
5405
5405
  "color": {
5406
5406
  "default": {
5407
- "value": "rgba(05, 05, 06, 0.08)",
5407
+ "value": "rgba(255, 255, 255, 0.08)",
5408
5408
  "$type": "color",
5409
5409
  "comment": "Used to define the edge of an avatar.",
5410
5410
  "filePath": "src/tokens/contextual/avatar.tokens.json",
5411
5411
  "isSource": true,
5412
5412
  "original": {
5413
- "value": "{color.alpha.dark.8}",
5413
+ "value": {
5414
+ "default": "{color.alpha.dark.8}",
5415
+ "dark": "{color.alpha.light.8}"
5416
+ },
5414
5417
  "$type": "color",
5415
5418
  "comment": "Used to define the edge of an avatar."
5416
5419
  },
@@ -5424,13 +5427,16 @@
5424
5427
  ]
5425
5428
  },
5426
5429
  "hover": {
5427
- "value": "rgba(05, 05, 06, 0.24)",
5430
+ "value": "rgba(255, 255, 255, 0.24)",
5428
5431
  "$type": "color",
5429
5432
  "comment": "Used to increase the edge definition of an avatar in the hover state.",
5430
5433
  "filePath": "src/tokens/contextual/avatar.tokens.json",
5431
5434
  "isSource": true,
5432
5435
  "original": {
5433
- "value": "{color.alpha.dark.24}",
5436
+ "value": {
5437
+ "default": "{color.alpha.dark.24}",
5438
+ "dark": "{color.alpha.light.24}"
5439
+ },
5434
5440
  "$type": "color",
5435
5441
  "comment": "Used to increase the edge definition of an avatar in the hover state."
5436
5442
  },
@@ -5449,7 +5455,7 @@
5449
5455
  "background": {
5450
5456
  "color": {
5451
5457
  "red": {
5452
- "value": "#660e00",
5458
+ "value": "#4d0a00",
5453
5459
  "$type": "color",
5454
5460
  "comment": "Red background for avatar fallback with no particular meaning.",
5455
5461
  "filePath": "src/tokens/contextual/avatar.tokens.json",
@@ -5457,7 +5463,7 @@
5457
5463
  "original": {
5458
5464
  "value": {
5459
5465
  "default": "{color.red.50}",
5460
- "dark": "{color.red.900}"
5466
+ "dark": "{color.red.950}"
5461
5467
  },
5462
5468
  "$type": "color",
5463
5469
  "comment": "Red background for avatar fallback with no particular meaning."
@@ -5497,7 +5503,7 @@
5497
5503
  ]
5498
5504
  },
5499
5505
  "blue": {
5500
- "value": "#033464",
5506
+ "value": "#002850",
5501
5507
  "$type": "color",
5502
5508
  "comment": "Blue background for avatar fallback with no particular meaning.",
5503
5509
  "filePath": "src/tokens/contextual/avatar.tokens.json",
@@ -5505,7 +5511,7 @@
5505
5511
  "original": {
5506
5512
  "value": {
5507
5513
  "default": "{color.blue.50}",
5508
- "dark": "{color.blue.900}"
5514
+ "dark": "{color.blue.950}"
5509
5515
  },
5510
5516
  "$type": "color",
5511
5517
  "comment": "Blue background for avatar fallback with no particular meaning."
@@ -5521,7 +5527,7 @@
5521
5527
  ]
5522
5528
  },
5523
5529
  "green": {
5524
- "value": "#0a4020",
5530
+ "value": "#072b15",
5525
5531
  "$type": "color",
5526
5532
  "comment": "Green background for avatar fallback with no particular meaning.",
5527
5533
  "filePath": "src/tokens/contextual/avatar.tokens.json",
@@ -5529,7 +5535,7 @@
5529
5535
  "original": {
5530
5536
  "value": {
5531
5537
  "default": "{color.green.50}",
5532
- "dark": "{color.green.900}"
5538
+ "dark": "{color.green.950}"
5533
5539
  },
5534
5540
  "$type": "color",
5535
5541
  "comment": "Green background for avatar fallback with no particular meaning."
@@ -5545,7 +5551,7 @@
5545
5551
  ]
5546
5552
  },
5547
5553
  "orange": {
5548
- "value": "#5c2900",
5554
+ "value": "#421f00",
5549
5555
  "$type": "color",
5550
5556
  "comment": "Orange background for avatar fallback with no particular meaning.",
5551
5557
  "filePath": "src/tokens/contextual/avatar.tokens.json",
@@ -5553,7 +5559,7 @@
5553
5559
  "original": {
5554
5560
  "value": {
5555
5561
  "default": "{color.orange.50}",
5556
- "dark": "{color.orange.900}"
5562
+ "dark": "{color.orange.950}"
5557
5563
  },
5558
5564
  "$type": "color",
5559
5565
  "comment": "Orange background for avatar fallback with no particular meaning."
package/src/tokens/build/json/tokens.json CHANGED
@@ -5410,7 +5410,10 @@
5410
5410
  "filePath": "src/tokens/contextual/avatar.tokens.json",
5411
5411
  "isSource": true,
5412
5412
  "original": {
5413
- "value": "{color.alpha.dark.8}",
5413
+ "value": {
5414
+ "default": "{color.alpha.dark.8}",
5415
+ "dark": "{color.alpha.light.8}"
5416
+ },
5414
5417
  "$type": "color",
5415
5418
  "comment": "Used to define the edge of an avatar."
5416
5419
  },
@@ -5430,7 +5433,10 @@
5430
5433
  "filePath": "src/tokens/contextual/avatar.tokens.json",
5431
5434
  "isSource": true,
5432
5435
  "original": {
5433
- "value": "{color.alpha.dark.24}",
5436
+ "value": {
5437
+ "default": "{color.alpha.dark.24}",
5438
+ "dark": "{color.alpha.light.24}"
5439
+ },
5434
5440
  "$type": "color",
5435
5441
  "comment": "Used to increase the edge definition of an avatar in the hover state."
5436
5442
  },
@@ -5457,7 +5463,7 @@
5457
5463
  "original": {
5458
5464
  "value": {
5459
5465
  "default": "{color.red.50}",
5460
- "dark": "{color.red.900}"
5466
+ "dark": "{color.red.950}"
5461
5467
  },
5462
5468
  "$type": "color",
5463
5469
  "comment": "Red background for avatar fallback with no particular meaning."
@@ -5505,7 +5511,7 @@
5505
5511
  "original": {
5506
5512
  "value": {
5507
5513
  "default": "{color.blue.50}",
5508
- "dark": "{color.blue.900}"
5514
+ "dark": "{color.blue.950}"
5509
5515
  },
5510
5516
  "$type": "color",
5511
5517
  "comment": "Blue background for avatar fallback with no particular meaning."
@@ -5529,7 +5535,7 @@
5529
5535
  "original": {
5530
5536
  "value": {
5531
5537
  "default": "{color.green.50}",
5532
- "dark": "{color.green.900}"
5538
+ "dark": "{color.green.950}"
5533
5539
  },
5534
5540
  "$type": "color",
5535
5541
  "comment": "Green background for avatar fallback with no particular meaning."
@@ -5553,7 +5559,7 @@
5553
5559
  "original": {
5554
5560
  "value": {
5555
5561
  "default": "{color.orange.50}",
5556
- "dark": "{color.orange.900}"
5562
+ "dark": "{color.orange.950}"
5557
5563
  },
5558
5564
  "$type": "color",
5559
5565
  "comment": "Orange background for avatar fallback with no particular meaning."
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -629,13 +629,13 @@ $gl-badge-muted-border-color-hover: $gl-color-neutral-700; // Used for the borde
629
629
  $gl-badge-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a subtle neutral badge in the active state.
630
630
  $gl-badge-muted-background-color-default: $gl-color-neutral-900; // Used for the background of a subtle neutral badge when static or the default state when linked.
631
631
  $gl-avatar-fallback-background-color-neutral: $gl-color-neutral-900; // Neutral background for avatar fallback with no particular meaning.
632
- $gl-avatar-fallback-background-color-orange: $gl-color-orange-900; // Orange background for avatar fallback with no particular meaning.
633
- $gl-avatar-fallback-background-color-green: $gl-color-green-900; // Green background for avatar fallback with no particular meaning.
634
- $gl-avatar-fallback-background-color-blue: $gl-color-blue-900; // Blue background for avatar fallback with no particular meaning.
632
+ $gl-avatar-fallback-background-color-orange: $gl-color-orange-950; // Orange background for avatar fallback with no particular meaning.
633
+ $gl-avatar-fallback-background-color-green: $gl-color-green-950; // Green background for avatar fallback with no particular meaning.
634
+ $gl-avatar-fallback-background-color-blue: $gl-color-blue-950; // Blue background for avatar fallback with no particular meaning.
635
635
  $gl-avatar-fallback-background-color-purple: $gl-color-purple-950; // Purple background for avatar fallback with no particular meaning.
636
- $gl-avatar-fallback-background-color-red: $gl-color-red-900; // Red background for avatar fallback with no particular meaning.
637
- $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the edge definition of an avatar in the hover state.
638
- $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
636
+ $gl-avatar-fallback-background-color-red: $gl-color-red-950; // Red background for avatar fallback with no particular meaning.
637
+ $gl-avatar-border-color-hover: $gl-color-alpha-light-24; // Used to increase the edge definition of an avatar in the hover state.
638
+ $gl-avatar-border-color-default: $gl-color-alpha-light-8; // Used to define the edge of an avatar.
639
639
  $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
640
640
  $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
641
641
  $gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
package/src/tokens/contextual/avatar.tokens.json CHANGED
@@ -3,12 +3,18 @@
3
3
  "border": {
4
4
  "color": {
5
5
  "default": {
6
- "$value": "{color.alpha.dark.8}",
6
+ "$value": {
7
+ "default": "{color.alpha.dark.8}",
8
+ "dark": "{color.alpha.light.8}"
9
+ },
7
10
  "$type": "color",
8
11
  "$description": "Used to define the edge of an avatar."
9
12
  },
10
13
  "hover": {
11
- "$value": "{color.alpha.dark.24}",
14
+ "$value": {
15
+ "default": "{color.alpha.dark.24}",
16
+ "dark": "{color.alpha.light.24}"
17
+ },
12
18
  "$type": "color",
13
19
  "$description": "Used to increase the edge definition of an avatar in the hover state."
14
20
  }
@@ -20,7 +26,7 @@
20
26
  "red": {
21
27
  "$value": {
22
28
  "default": "{color.red.50}",
23
- "dark": "{color.red.900}"
29
+ "dark": "{color.red.950}"
24
30
  },
25
31
  "$type": "color",
26
32
  "$description": "Red background for avatar fallback with no particular meaning."
@@ -36,7 +42,7 @@
36
42
  "blue": {
37
43
  "$value": {
38
44
  "default": "{color.blue.50}",
39
- "dark": "{color.blue.900}"
45
+ "dark": "{color.blue.950}"
40
46
  },
41
47
  "$type": "color",
42
48
  "$description": "Blue background for avatar fallback with no particular meaning."
@@ -44,7 +50,7 @@
44
50
  "green": {
45
51
  "$value": {
46
52
  "default": "{color.green.50}",
47
- "dark": "{color.green.900}"
53
+ "dark": "{color.green.950}"
48
54
  },
49
55
  "$type": "color",
50
56
  "$description": "Green background for avatar fallback with no particular meaning."
@@ -52,7 +58,7 @@
52
58
  "orange": {
53
59
  "$value": {
54
60
  "default": "{color.orange.50}",
55
- "dark": "{color.orange.900}"
61
+ "dark": "{color.orange.950}"
56
62
  },
57
63
  "$type": "color",
58
64
  "$description": "Orange background for avatar fallback with no particular meaning."