@gitlab/ui 87.7.0 → 87.8.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.
- package/CHANGELOG.md +7 -0
- package/bin/migrate_custom_utils_to_tw.bundled.mjs +51 -46
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +96 -78
- package/dist/tokens/build/js/tokens.js +96 -78
- package/dist/tokens/css/tokens.css +95 -77
- package/dist/tokens/css/tokens.dark.css +95 -77
- package/dist/tokens/js/tokens.dark.js +95 -77
- package/dist/tokens/js/tokens.js +95 -77
- package/dist/tokens/json/tokens.dark.json +6046 -5624
- package/dist/tokens/json/tokens.json +6046 -5624
- package/dist/tokens/scss/_tokens.dark.scss +95 -77
- package/dist/tokens/scss/_tokens.scss +95 -77
- package/dist/tokens/scss/_tokens_custom_properties.scss +95 -77
- package/package.json +4 -4
- package/src/components/base/avatars_inline/avatars_inline.scss +2 -2
- package/src/components/base/badge/badge.scss +63 -63
- package/src/tokens/build/css/tokens.css +95 -77
- package/src/tokens/build/css/tokens.dark.css +95 -77
- package/src/tokens/build/js/tokens.dark.js +95 -77
- package/src/tokens/build/js/tokens.js +95 -77
- package/src/tokens/build/json/tokens.dark.json +6046 -5624
- package/src/tokens/build/json/tokens.json +6046 -5624
- package/src/tokens/build/scss/_tokens.dark.scss +95 -77
- package/src/tokens/build/scss/_tokens.scss +95 -77
- package/src/tokens/build/scss/_tokens_custom_properties.scss +95 -77
- package/src/tokens/contextual/badge.tokens.json +704 -0
- package/src/tokens/status.tokens.json +90 -640
|
@@ -422,83 +422,24 @@ $gl-text-color-heading: $gl-color-neutral-0; // Used for headings level 1-6.
|
|
|
422
422
|
$gl-text-color-strong: $gl-color-neutral-0; // Used for text with the highest contrast.
|
|
423
423
|
$gl-text-color-subtle: $gl-color-neutral-200; // Used for supplemental text that doesn't need to be as prominent as other text.
|
|
424
424
|
$gl-text-color-default: $gl-color-neutral-50; // Used for the default text color.
|
|
425
|
-
$gl-status-brand-icon-color
|
|
426
|
-
$gl-status-brand-
|
|
427
|
-
$gl-status-brand-
|
|
428
|
-
$gl-status-
|
|
429
|
-
$gl-status-
|
|
430
|
-
$gl-status-
|
|
431
|
-
$gl-status-
|
|
432
|
-
$gl-status-
|
|
433
|
-
$gl-status-
|
|
434
|
-
$gl-status-
|
|
435
|
-
$gl-status-
|
|
436
|
-
$gl-status-
|
|
437
|
-
$gl-status-
|
|
438
|
-
$gl-status-
|
|
439
|
-
$gl-status-
|
|
440
|
-
$gl-status-
|
|
441
|
-
$gl-status-
|
|
442
|
-
$gl-status-
|
|
443
|
-
$gl-status-danger-text-color-default: $gl-color-red-200; // Used for the text of a danger (critical) status item when static or the default state when linked.
|
|
444
|
-
$gl-status-danger-border-color-hover: $gl-color-red-700; // Used for the border of a danger (critical) status item in the hover state.
|
|
445
|
-
$gl-status-danger-background-color-active: $gl-color-red-700; // Used for the background of a danger (critical) status item in the active state.
|
|
446
|
-
$gl-status-danger-background-color-default: $gl-color-red-800; // Used for the background of a danger (critical) status item when static or the default state when linked.
|
|
447
|
-
$gl-status-warning-icon-color-active: $gl-color-orange-200; // Used for the icon of a warning status or confidential item in the active state.
|
|
448
|
-
$gl-status-warning-icon-color-focus: $gl-color-orange-300; // Used for the icon of a warning status or confidential item in the focus state.
|
|
449
|
-
$gl-status-warning-icon-color-hover: $gl-color-orange-300; // Used for the icon of a warning status or confidential item in the hover state.
|
|
450
|
-
$gl-status-warning-icon-color-default: $gl-color-orange-400; // Used for the icon of a warning status or confidential item when static or the default state when linked.
|
|
451
|
-
$gl-status-warning-text-color-active: $gl-color-orange-50; // Used for the text of a warning status or confidential item in the active state.N
|
|
452
|
-
$gl-status-warning-text-color-focus: $gl-color-orange-100; // Used for the text of a warning status or confidential item in the focus state.
|
|
453
|
-
$gl-status-warning-text-color-hover: $gl-color-orange-100; // Used for the text of a warning status or confidential item in the hover state.
|
|
454
|
-
$gl-status-warning-text-color-default: $gl-color-orange-200; // Used for the text of a warning status or confidential item when static or the default state when linked.
|
|
455
|
-
$gl-status-warning-border-color-hover: $gl-color-orange-700; // Used for the border of a warning status or confidential item in the hover state.
|
|
456
|
-
$gl-status-warning-background-color-active: $gl-color-orange-700; // Used for the background of a warning status or confidential item in the active state.
|
|
457
|
-
$gl-status-warning-background-color-default: $gl-color-orange-800; // Used for the background of a warning status or confidential item when static or the default state when linked.
|
|
458
|
-
$gl-status-success-icon-color-active: $gl-color-green-200; // Used for the icon of a success status item in the active state.
|
|
459
|
-
$gl-status-success-icon-color-focus: $gl-color-green-300; // Used for the icon of a success status item in the focus state.
|
|
460
|
-
$gl-status-success-icon-color-hover: $gl-color-green-300; // Used for the icon of a success status item in the hover state.
|
|
461
|
-
$gl-status-success-icon-color-default: $gl-color-green-400; // Used for the icon of a success status item when static or the default state when linked.
|
|
462
|
-
$gl-status-success-text-color-active: $gl-color-green-50; // Used for the text of a success status item in the active state.
|
|
463
|
-
$gl-status-success-text-color-focus: $gl-color-green-100; // Used for the text of a success status item in the focus state.
|
|
464
|
-
$gl-status-success-text-color-hover: $gl-color-green-100; // Used for the text of a success status item in the hover state.
|
|
465
|
-
$gl-status-success-text-color-default: $gl-color-green-200; // Used for the text of a success status item when static or the default state when linked.
|
|
466
|
-
$gl-status-success-border-color-hover: $gl-color-green-700; // Used for the border of a success status item in the hover state.
|
|
467
|
-
$gl-status-success-background-color-active: $gl-color-green-700; // Used for the background of a success status item in the active state.
|
|
468
|
-
$gl-status-success-background-color-default: $gl-color-green-800; // Used for the background of a success status item when static or the default state when linked.
|
|
469
|
-
$gl-status-info-icon-color-active: $gl-color-blue-200; // Used for the icon of an informational status item in the active state.
|
|
470
|
-
$gl-status-info-icon-color-focus: $gl-color-blue-300; // Used for the icon of an informational status item in the focus state.
|
|
471
|
-
$gl-status-info-icon-color-hover: $gl-color-blue-300; // Used for the icon of an informational status item in the hover state.
|
|
472
|
-
$gl-status-info-icon-color-default: $gl-color-blue-400; // Used for the icon of an informational status item when static or the default state when linked.
|
|
473
|
-
$gl-status-info-text-color-active: $gl-color-blue-50; // Used for the text of an informational status item in the active state.
|
|
474
|
-
$gl-status-info-text-color-focus: $gl-color-blue-100; // Used for the text of an informational status item in the focus state.
|
|
475
|
-
$gl-status-info-text-color-hover: $gl-color-blue-100; // Used for the text of an informational status item in the hover state.
|
|
476
|
-
$gl-status-info-text-color-default: $gl-color-blue-200; // Used for the text of an informational status item when static or the default state when linked.
|
|
477
|
-
$gl-status-info-border-color-hover: $gl-color-blue-700; // Used for the border of an informational status item in the hover state.
|
|
478
|
-
$gl-status-info-background-color-active: $gl-color-blue-700; // Used for the background of an informational status item in the active state.
|
|
479
|
-
$gl-status-info-background-color-default: $gl-color-blue-800; // Used for the background of an informational status item when static or the default state when linked.
|
|
480
|
-
$gl-status-neutral-icon-color-active: $gl-color-neutral-200; // Used for the icon of a neutral status item in the active state.
|
|
481
|
-
$gl-status-neutral-icon-color-focus: $gl-color-neutral-300; // Used for the icon of a neutral status item in the focus state.
|
|
482
|
-
$gl-status-neutral-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a neutral status item in the hover state.
|
|
483
|
-
$gl-status-neutral-icon-color-default: $gl-color-neutral-400; // Used for the icon of a neutral status item when static or the default state when linked.
|
|
484
|
-
$gl-status-neutral-text-color-active: $gl-color-neutral-50; // Used for the text of a neutral status item in the active state.
|
|
485
|
-
$gl-status-neutral-text-color-focus: $gl-color-neutral-100; // Used for the text of a neutral status item in the focus state.
|
|
486
|
-
$gl-status-neutral-text-color-hover: $gl-color-neutral-100; // Used for the text of a neutral status item in the hover state.
|
|
487
|
-
$gl-status-neutral-text-color-default: $gl-color-neutral-200; // Used for the text of a neutral status item when static or the default state when linked.
|
|
488
|
-
$gl-status-neutral-border-color-hover: $gl-color-neutral-700; // Used for the border of a neutral status item in the hover state.
|
|
489
|
-
$gl-status-neutral-background-color-active: $gl-color-neutral-700; // Used for the background of a neutral status item in the active state.
|
|
490
|
-
$gl-status-neutral-background-color-default: $gl-color-neutral-800; // Used for the background of a neutral status item when static or the default state when linked.
|
|
491
|
-
$gl-status-muted-icon-color-active: $gl-color-neutral-200; // Used for the icon of a subtle neutral status item in the active state.
|
|
492
|
-
$gl-status-muted-icon-color-focus: $gl-color-neutral-300; // Used for the icon of a subtle neutral status item in the focus state.
|
|
493
|
-
$gl-status-muted-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a subtle neutral status item in the hover state.
|
|
494
|
-
$gl-status-muted-icon-color-default: $gl-color-neutral-400; // Used for the icon of a subtle neutral status item when static or the default state when linked.
|
|
495
|
-
$gl-status-muted-text-color-active: $gl-color-neutral-100; // Used for the text of a subtle neutral status item in the active state.
|
|
496
|
-
$gl-status-muted-text-color-focus: $gl-color-neutral-200; // Used for the text of a subtle neutral status item in the focus state.
|
|
497
|
-
$gl-status-muted-text-color-hover: $gl-color-neutral-200; // Used for the text of a subtle neutral status item in the hover state.
|
|
498
|
-
$gl-status-muted-text-color-default: $gl-color-neutral-300; // Used for the text of a subtle neutral status item when static or the default state when linked.
|
|
499
|
-
$gl-status-muted-border-color-hover: $gl-color-neutral-700; // Used for the border of a subtle neutral status item in the hover state.
|
|
500
|
-
$gl-status-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a subtle neutral status item in the active state.
|
|
501
|
-
$gl-status-muted-background-color-default: $gl-color-neutral-900; // Used for the background of a subtle neutral status item when static or the default state when linked.
|
|
425
|
+
$gl-status-brand-icon-color: $gl-color-purple-500; // Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
|
|
426
|
+
$gl-status-brand-text-color: $gl-color-purple-300; // Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
|
|
427
|
+
$gl-status-brand-background-color: $gl-color-purple-900; // Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
|
|
428
|
+
$gl-status-danger-icon-color: $gl-color-red-400; // Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
|
|
429
|
+
$gl-status-danger-text-color: $gl-color-red-200; // Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
|
|
430
|
+
$gl-status-danger-background-color: $gl-color-red-800; // Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
|
|
431
|
+
$gl-status-warning-icon-color: $gl-color-orange-400; // Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
|
|
432
|
+
$gl-status-warning-text-color: $gl-color-orange-200; // Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
|
|
433
|
+
$gl-status-warning-background-color: $gl-color-orange-800; // Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
|
|
434
|
+
$gl-status-success-icon-color: $gl-color-green-400; // Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
|
|
435
|
+
$gl-status-success-text-color: $gl-color-green-200; // Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
|
|
436
|
+
$gl-status-success-background-color: $gl-color-green-800; // Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
|
|
437
|
+
$gl-status-info-icon-color: $gl-color-blue-400; // Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
|
|
438
|
+
$gl-status-info-text-color: $gl-color-blue-200; // Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
|
|
439
|
+
$gl-status-info-background-color: $gl-color-blue-800; // Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
|
|
440
|
+
$gl-status-neutral-icon-color: $gl-color-neutral-400; // Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
|
|
441
|
+
$gl-status-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
|
|
442
|
+
$gl-status-neutral-background-color: $gl-color-neutral-800; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
|
|
502
443
|
$gl-shadow-color-default: $gl-color-alpha-dark-24; // Used for the default shadow color.
|
|
503
444
|
$gl-icon-color-success: $gl-color-green-300; // Used for an icon associated with success or validity.
|
|
504
445
|
$gl-icon-color-danger: $gl-color-red-300; // Used for an icon associated with an error or danger.
|
|
@@ -569,6 +510,69 @@ $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text co
|
|
|
569
510
|
$gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
|
|
570
511
|
$gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
|
|
571
512
|
$gl-banner-intro-border-color: $gl-color-blue-600; // Used to compliment the info banner.
|
|
513
|
+
$gl-badge-tier-icon-color-active: $gl-color-purple-300; // Used for the icon of a tier related badge in the active state.
|
|
514
|
+
$gl-badge-tier-icon-color-hover: $gl-color-purple-400; // Used for the icon of a tier related badge in the hover state.
|
|
515
|
+
$gl-badge-tier-icon-color-default: $gl-color-purple-500; // Used for the icon of a tier related badge when static or the default state when linked.
|
|
516
|
+
$gl-badge-tier-text-color-active: $gl-color-purple-100; // Used for the text of a tier related badge in the active state.
|
|
517
|
+
$gl-badge-tier-text-color-hover: $gl-color-purple-200; // Used for the text of a tier related badge in the hover state.
|
|
518
|
+
$gl-badge-tier-text-color-default: $gl-color-purple-300; // Used for the text of a tier related badge when static or the default state when linked.
|
|
519
|
+
$gl-badge-tier-border-color-hover: $gl-color-purple-800; // Used for the border of a tier related badge in the hover state.
|
|
520
|
+
$gl-badge-tier-background-color-active: $gl-color-purple-800; // Used for the background of a tier related badge in the active state.
|
|
521
|
+
$gl-badge-tier-background-color-default: $gl-color-purple-900; // Used for the background of a tier related badge when static or the default state when linked.
|
|
522
|
+
$gl-badge-danger-icon-color-active: $gl-color-red-200; // Used for the icon of a danger (critical) badge in the active state.
|
|
523
|
+
$gl-badge-danger-icon-color-hover: $gl-color-red-300; // Used for the icon of a danger (critical) badge in the hover state.
|
|
524
|
+
$gl-badge-danger-icon-color-default: $gl-color-red-400; // Used for the icon of a danger (critical) badge when static or the default state when linked.
|
|
525
|
+
$gl-badge-danger-text-color-active: $gl-color-red-50; // Used for the text of a danger (critical) badge in the active state.
|
|
526
|
+
$gl-badge-danger-text-color-hover: $gl-color-red-100; // Used for the text of a danger (critical) badge in the hover state.
|
|
527
|
+
$gl-badge-danger-text-color-default: $gl-color-red-200; // Used for the text of a danger (critical) badge when static or the default state when linked.
|
|
528
|
+
$gl-badge-danger-border-color-hover: $gl-color-red-700; // Used for the border of a danger (critical) badge in the hover state.
|
|
529
|
+
$gl-badge-danger-background-color-active: $gl-color-red-700; // Used for the background of a danger (critical) badge in the active state.
|
|
530
|
+
$gl-badge-danger-background-color-default: $gl-color-red-800; // Used for the background of a danger (critical) badge when static or the default state when linked.
|
|
531
|
+
$gl-badge-warning-icon-color-active: $gl-color-orange-200; // Used for the icon of a warning status or confidential item in the active state.
|
|
532
|
+
$gl-badge-warning-icon-color-hover: $gl-color-orange-300; // Used for the icon of a warning status or confidential item in the hover state.
|
|
533
|
+
$gl-badge-warning-icon-color-default: $gl-color-orange-400; // Used for the icon of a warning status or confidential item when static or the default state when linked.
|
|
534
|
+
$gl-badge-warning-text-color-active: $gl-color-orange-50; // Used for the text of a warning status or confidential item in the active state.N
|
|
535
|
+
$gl-badge-warning-text-color-hover: $gl-color-orange-100; // Used for the text of a warning status or confidential item in the hover state.
|
|
536
|
+
$gl-badge-warning-text-color-default: $gl-color-orange-200; // Used for the text of a warning status or confidential item when static or the default state when linked.
|
|
537
|
+
$gl-badge-warning-border-color-hover: $gl-color-orange-700; // Used for the border of a warning status or confidential item in the hover state.
|
|
538
|
+
$gl-badge-warning-background-color-active: $gl-color-orange-700; // Used for the background of a warning status or confidential item in the active state.
|
|
539
|
+
$gl-badge-warning-background-color-default: $gl-color-orange-800; // Used for the background of a warning status or confidential item when static or the default state when linked.
|
|
540
|
+
$gl-badge-success-icon-color-active: $gl-color-green-200; // Used for the icon of a success badge in the active state.
|
|
541
|
+
$gl-badge-success-icon-color-hover: $gl-color-green-300; // Used for the icon of a success badge in the hover state.
|
|
542
|
+
$gl-badge-success-icon-color-default: $gl-color-green-400; // Used for the icon of a success badge when static or the default state when linked.
|
|
543
|
+
$gl-badge-success-text-color-active: $gl-color-green-50; // Used for the text of a success badge in the active state.
|
|
544
|
+
$gl-badge-success-text-color-hover: $gl-color-green-100; // Used for the text of a success badge in the hover state.
|
|
545
|
+
$gl-badge-success-text-color-default: $gl-color-green-200; // Used for the text of a success badge when static or the default state when linked.
|
|
546
|
+
$gl-badge-success-border-color-hover: $gl-color-green-700; // Used for the border of a success badge in the hover state.
|
|
547
|
+
$gl-badge-success-background-color-active: $gl-color-green-700; // Used for the background of a success badge in the active state.
|
|
548
|
+
$gl-badge-success-background-color-default: $gl-color-green-800; // Used for the background of a success badge when static or the default state when linked.
|
|
549
|
+
$gl-badge-info-icon-color-active: $gl-color-blue-200; // Used for the icon of an informational badge in the active state.
|
|
550
|
+
$gl-badge-info-icon-color-hover: $gl-color-blue-300; // Used for the icon of an informational badge in the hover state.
|
|
551
|
+
$gl-badge-info-icon-color-default: $gl-color-blue-400; // Used for the icon of an informational badge when static or the default state when linked.
|
|
552
|
+
$gl-badge-info-text-color-active: $gl-color-blue-50; // Used for the text of an informational badge in the active state.
|
|
553
|
+
$gl-badge-info-text-color-hover: $gl-color-blue-100; // Used for the text of an informational badge in the hover state.
|
|
554
|
+
$gl-badge-info-text-color-default: $gl-color-blue-200; // Used for the text of an informational badge when static or the default state when linked.
|
|
555
|
+
$gl-badge-info-border-color-hover: $gl-color-blue-700; // Used for the border of an informational badge in the hover state.
|
|
556
|
+
$gl-badge-info-background-color-active: $gl-color-blue-700; // Used for the background of an informational badge in the active state.
|
|
557
|
+
$gl-badge-info-background-color-default: $gl-color-blue-800; // Used for the background of an informational badge when static or the default state when linked.
|
|
558
|
+
$gl-badge-neutral-icon-color-active: $gl-color-neutral-200; // Used for the icon of a neutral badge in the active state.
|
|
559
|
+
$gl-badge-neutral-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a neutral badge in the hover state.
|
|
560
|
+
$gl-badge-neutral-icon-color-default: $gl-color-neutral-400; // Used for the icon of a neutral badge when static or the default state when linked.
|
|
561
|
+
$gl-badge-neutral-text-color-active: $gl-color-neutral-50; // Used for the text of a neutral badge in the active state.
|
|
562
|
+
$gl-badge-neutral-text-color-hover: $gl-color-neutral-100; // Used for the text of a neutral badge in the hover state.
|
|
563
|
+
$gl-badge-neutral-text-color-default: $gl-color-neutral-200; // Used for the text of a neutral badge when static or the default state when linked.
|
|
564
|
+
$gl-badge-neutral-border-color-hover: $gl-color-neutral-700; // Used for the border of a neutral badge in the hover state.
|
|
565
|
+
$gl-badge-neutral-background-color-active: $gl-color-neutral-700; // Used for the background of a neutral badge in the active state.
|
|
566
|
+
$gl-badge-neutral-background-color-default: $gl-color-neutral-800; // Used for the background of a neutral badge when static or the default state when linked.
|
|
567
|
+
$gl-badge-muted-icon-color-active: $gl-color-neutral-200; // Used for the icon of a subtle neutral badge in the active state.
|
|
568
|
+
$gl-badge-muted-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a subtle neutral badge in the hover state.
|
|
569
|
+
$gl-badge-muted-icon-color-default: $gl-color-neutral-400; // Used for the icon of a subtle neutral badge when static or the default state when linked.
|
|
570
|
+
$gl-badge-muted-text-color-active: $gl-color-neutral-100; // Used for the text of a subtle neutral badge in the active state.
|
|
571
|
+
$gl-badge-muted-text-color-hover: $gl-color-neutral-200; // Used for the text of a subtle neutral badge in the hover state.
|
|
572
|
+
$gl-badge-muted-text-color-default: $gl-color-neutral-300; // Used for the text of a subtle neutral badge when static or the default state when linked.
|
|
573
|
+
$gl-badge-muted-border-color-hover: $gl-color-neutral-700; // Used for the border of a subtle neutral badge in the hover state.
|
|
574
|
+
$gl-badge-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a subtle neutral badge in the active state.
|
|
575
|
+
$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.
|
|
572
576
|
$gl-avatar-fallback-background-color-neutral: $gl-color-neutral-900; // Neutral background for avatar fallback with no particular meaning.
|
|
573
577
|
$gl-avatar-fallback-background-color-orange: $gl-color-orange-900; // Orange background for avatar fallback with no particular meaning.
|
|
574
578
|
$gl-avatar-fallback-background-color-green: $gl-color-green-900; // Green background for avatar fallback with no particular meaning.
|
|
@@ -605,6 +609,20 @@ $gl-action-disabled-foreground-color: $gl-color-neutral-500; // Used for the for
|
|
|
605
609
|
$gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
|
|
606
610
|
$gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
|
|
607
611
|
$gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
|
|
612
|
+
$gl-badge-tier-icon-color-focus: $gl-badge-tier-icon-color-hover; // Used for the icon of a tier related badge in the focus state.
|
|
613
|
+
$gl-badge-tier-text-color-focus: $gl-badge-tier-text-color-hover; // Used for the text of a tier related badge in the focus state.
|
|
614
|
+
$gl-badge-danger-icon-color-focus: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger (critical) badge in the focus state.
|
|
615
|
+
$gl-badge-danger-text-color-focus: $gl-badge-danger-text-color-hover; // Used for the text of a danger (critical) badge in the focus state.
|
|
616
|
+
$gl-badge-warning-icon-color-focus: $gl-badge-warning-icon-color-hover; // Used for the icon of a warning status or confidential item in the focus state.
|
|
617
|
+
$gl-badge-warning-text-color-focus: $gl-badge-warning-text-color-hover; // Used for the text of a warning status or confidential item in the focus state.
|
|
618
|
+
$gl-badge-success-icon-color-focus: $gl-badge-success-icon-color-hover; // Used for the icon of a success badge in the focus state.
|
|
619
|
+
$gl-badge-success-text-color-focus: $gl-badge-success-text-color-hover; // Used for the text of a success badge in the focus state.
|
|
620
|
+
$gl-badge-info-icon-color-focus: $gl-badge-info-icon-color-hover; // Used for the icon of an informational badge in the focus state.
|
|
621
|
+
$gl-badge-info-text-color-focus: $gl-badge-info-text-color-hover; // Used for the text of an informational badge in the focus state.
|
|
622
|
+
$gl-badge-neutral-icon-color-focus: $gl-badge-neutral-icon-color-hover; // Used for the icon of a neutral badge in the focus state.
|
|
623
|
+
$gl-badge-neutral-text-color-focus: $gl-badge-neutral-text-color-hover; // Used for the text of a neutral badge in the focus state.
|
|
624
|
+
$gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a subtle neutral badge in the focus state.
|
|
625
|
+
$gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a subtle neutral badge in the focus state.
|
|
608
626
|
$gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
|
|
609
627
|
$gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
|
|
610
628
|
$gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
|
|
@@ -422,83 +422,24 @@ $gl-text-color-heading: $gl-color-neutral-950; // Used for headings level 1-6.
|
|
|
422
422
|
$gl-text-color-strong: $gl-color-neutral-950; // Used for text with the highest contrast.
|
|
423
423
|
$gl-text-color-subtle: $gl-color-neutral-600; // Used for supplemental text that doesn't need to be as prominent as other text.
|
|
424
424
|
$gl-text-color-default: $gl-color-neutral-800; // Used for the default text color.
|
|
425
|
-
$gl-status-brand-icon-color
|
|
426
|
-
$gl-status-brand-
|
|
427
|
-
$gl-status-brand-
|
|
428
|
-
$gl-status-
|
|
429
|
-
$gl-status-
|
|
430
|
-
$gl-status-
|
|
431
|
-
$gl-status-
|
|
432
|
-
$gl-status-
|
|
433
|
-
$gl-status-
|
|
434
|
-
$gl-status-
|
|
435
|
-
$gl-status-
|
|
436
|
-
$gl-status-
|
|
437
|
-
$gl-status-
|
|
438
|
-
$gl-status-
|
|
439
|
-
$gl-status-
|
|
440
|
-
$gl-status-
|
|
441
|
-
$gl-status-
|
|
442
|
-
$gl-status-
|
|
443
|
-
$gl-status-danger-text-color-default: $gl-color-red-700; // Used for the text of a danger (critical) status item when static or the default state when linked.
|
|
444
|
-
$gl-status-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger (critical) status item in the hover state.
|
|
445
|
-
$gl-status-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger (critical) status item in the active state.
|
|
446
|
-
$gl-status-danger-background-color-default: $gl-color-red-100; // Used for the background of a danger (critical) status item when static or the default state when linked.
|
|
447
|
-
$gl-status-warning-icon-color-active: $gl-color-orange-700; // Used for the icon of a warning status or confidential item in the active state.
|
|
448
|
-
$gl-status-warning-icon-color-focus: $gl-color-orange-600; // Used for the icon of a warning status or confidential item in the focus state.
|
|
449
|
-
$gl-status-warning-icon-color-hover: $gl-color-orange-600; // Used for the icon of a warning status or confidential item in the hover state.
|
|
450
|
-
$gl-status-warning-icon-color-default: $gl-color-orange-500; // Used for the icon of a warning status or confidential item when static or the default state when linked.
|
|
451
|
-
$gl-status-warning-text-color-active: $gl-color-orange-900; // Used for the text of a warning status or confidential item in the active state.N
|
|
452
|
-
$gl-status-warning-text-color-focus: $gl-color-orange-800; // Used for the text of a warning status or confidential item in the focus state.
|
|
453
|
-
$gl-status-warning-text-color-hover: $gl-color-orange-800; // Used for the text of a warning status or confidential item in the hover state.
|
|
454
|
-
$gl-status-warning-text-color-default: $gl-color-orange-700; // Used for the text of a warning status or confidential item when static or the default state when linked.
|
|
455
|
-
$gl-status-warning-border-color-hover: $gl-color-orange-200; // Used for the border of a warning status or confidential item in the hover state.
|
|
456
|
-
$gl-status-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning status or confidential item in the active state.
|
|
457
|
-
$gl-status-warning-background-color-default: $gl-color-orange-100; // Used for the background of a warning status or confidential item when static or the default state when linked.
|
|
458
|
-
$gl-status-success-icon-color-active: $gl-color-green-700; // Used for the icon of a success status item in the active state.
|
|
459
|
-
$gl-status-success-icon-color-focus: $gl-color-green-600; // Used for the icon of a success status item in the focus state.
|
|
460
|
-
$gl-status-success-icon-color-hover: $gl-color-green-600; // Used for the icon of a success status item in the hover state.
|
|
461
|
-
$gl-status-success-icon-color-default: $gl-color-green-500; // Used for the icon of a success status item when static or the default state when linked.
|
|
462
|
-
$gl-status-success-text-color-active: $gl-color-green-900; // Used for the text of a success status item in the active state.
|
|
463
|
-
$gl-status-success-text-color-focus: $gl-color-green-800; // Used for the text of a success status item in the focus state.
|
|
464
|
-
$gl-status-success-text-color-hover: $gl-color-green-800; // Used for the text of a success status item in the hover state.
|
|
465
|
-
$gl-status-success-text-color-default: $gl-color-green-700; // Used for the text of a success status item when static or the default state when linked.
|
|
466
|
-
$gl-status-success-border-color-hover: $gl-color-green-200; // Used for the border of a success status item in the hover state.
|
|
467
|
-
$gl-status-success-background-color-active: $gl-color-green-200; // Used for the background of a success status item in the active state.
|
|
468
|
-
$gl-status-success-background-color-default: $gl-color-green-100; // Used for the background of a success status item when static or the default state when linked.
|
|
469
|
-
$gl-status-info-icon-color-active: $gl-color-blue-700; // Used for the icon of an informational status item in the active state.
|
|
470
|
-
$gl-status-info-icon-color-focus: $gl-color-blue-600; // Used for the icon of an informational status item in the focus state.
|
|
471
|
-
$gl-status-info-icon-color-hover: $gl-color-blue-600; // Used for the icon of an informational status item in the hover state.
|
|
472
|
-
$gl-status-info-icon-color-default: $gl-color-blue-500; // Used for the icon of an informational status item when static or the default state when linked.
|
|
473
|
-
$gl-status-info-text-color-active: $gl-color-blue-900; // Used for the text of an informational status item in the active state.
|
|
474
|
-
$gl-status-info-text-color-focus: $gl-color-blue-800; // Used for the text of an informational status item in the focus state.
|
|
475
|
-
$gl-status-info-text-color-hover: $gl-color-blue-800; // Used for the text of an informational status item in the hover state.
|
|
476
|
-
$gl-status-info-text-color-default: $gl-color-blue-700; // Used for the text of an informational status item when static or the default state when linked.
|
|
477
|
-
$gl-status-info-border-color-hover: $gl-color-blue-200; // Used for the border of an informational status item in the hover state.
|
|
478
|
-
$gl-status-info-background-color-active: $gl-color-blue-200; // Used for the background of an informational status item in the active state.
|
|
479
|
-
$gl-status-info-background-color-default: $gl-color-blue-100; // Used for the background of an informational status item when static or the default state when linked.
|
|
480
|
-
$gl-status-neutral-icon-color-active: $gl-color-neutral-700; // Used for the icon of a neutral status item in the active state.
|
|
481
|
-
$gl-status-neutral-icon-color-focus: $gl-color-neutral-600; // Used for the icon of a neutral status item in the focus state.
|
|
482
|
-
$gl-status-neutral-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a neutral status item in the hover state.
|
|
483
|
-
$gl-status-neutral-icon-color-default: $gl-color-neutral-500; // Used for the icon of a neutral status item when static or the default state when linked.
|
|
484
|
-
$gl-status-neutral-text-color-active: $gl-color-neutral-900; // Used for the text of a neutral status item in the active state.
|
|
485
|
-
$gl-status-neutral-text-color-focus: $gl-color-neutral-800; // Used for the text of a neutral status item in the focus state.
|
|
486
|
-
$gl-status-neutral-text-color-hover: $gl-color-neutral-800; // Used for the text of a neutral status item in the hover state.
|
|
487
|
-
$gl-status-neutral-text-color-default: $gl-color-neutral-700; // Used for the text of a neutral status item when static or the default state when linked.
|
|
488
|
-
$gl-status-neutral-border-color-hover: $gl-color-neutral-200; // Used for the border of a neutral status item in the hover state.
|
|
489
|
-
$gl-status-neutral-background-color-active: $gl-color-neutral-200; // Used for the background of a neutral status item in the active state.
|
|
490
|
-
$gl-status-neutral-background-color-default: $gl-color-neutral-100; // Used for the background of a neutral status item when static or the default state when linked.
|
|
491
|
-
$gl-status-muted-icon-color-active: $gl-color-neutral-700; // Used for the icon of a subtle neutral status item in the active state.
|
|
492
|
-
$gl-status-muted-icon-color-focus: $gl-color-neutral-600; // Used for the icon of a subtle neutral status item in the focus state.
|
|
493
|
-
$gl-status-muted-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a subtle neutral status item in the hover state.
|
|
494
|
-
$gl-status-muted-icon-color-default: $gl-color-neutral-500; // Used for the icon of a subtle neutral status item when static or the default state when linked.
|
|
495
|
-
$gl-status-muted-text-color-active: $gl-color-neutral-800; // Used for the text of a subtle neutral status item in the active state.
|
|
496
|
-
$gl-status-muted-text-color-focus: $gl-color-neutral-700; // Used for the text of a subtle neutral status item in the focus state.
|
|
497
|
-
$gl-status-muted-text-color-hover: $gl-color-neutral-700; // Used for the text of a subtle neutral status item in the hover state.
|
|
498
|
-
$gl-status-muted-text-color-default: $gl-color-neutral-600; // Used for the text of a subtle neutral status item when static or the default state when linked.
|
|
499
|
-
$gl-status-muted-border-color-hover: $gl-color-neutral-200; // Used for the border of a subtle neutral status item in the hover state.
|
|
500
|
-
$gl-status-muted-background-color-active: $gl-color-neutral-100; // Used for the background of a subtle neutral status item in the active state.
|
|
501
|
-
$gl-status-muted-background-color-default: $gl-color-neutral-50; // Used for the background of a subtle neutral status item when static or the default state when linked.
|
|
425
|
+
$gl-status-brand-icon-color: $gl-color-purple-500; // Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
|
|
426
|
+
$gl-status-brand-text-color: $gl-color-purple-700; // Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
|
|
427
|
+
$gl-status-brand-background-color: $gl-color-purple-100; // Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
|
|
428
|
+
$gl-status-danger-icon-color: $gl-color-red-500; // Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
|
|
429
|
+
$gl-status-danger-text-color: $gl-color-red-700; // Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
|
|
430
|
+
$gl-status-danger-background-color: $gl-color-red-100; // Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
|
|
431
|
+
$gl-status-warning-icon-color: $gl-color-orange-500; // Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
|
|
432
|
+
$gl-status-warning-text-color: $gl-color-orange-700; // Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
|
|
433
|
+
$gl-status-warning-background-color: $gl-color-orange-100; // Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
|
|
434
|
+
$gl-status-success-icon-color: $gl-color-green-500; // Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
|
|
435
|
+
$gl-status-success-text-color: $gl-color-green-700; // Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
|
|
436
|
+
$gl-status-success-background-color: $gl-color-green-100; // Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
|
|
437
|
+
$gl-status-info-icon-color: $gl-color-blue-500; // Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
|
|
438
|
+
$gl-status-info-text-color: $gl-color-blue-700; // Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
|
|
439
|
+
$gl-status-info-background-color: $gl-color-blue-100; // Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
|
|
440
|
+
$gl-status-neutral-icon-color: $gl-color-neutral-500; // Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
|
|
441
|
+
$gl-status-neutral-text-color: $gl-color-neutral-700; // Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
|
|
442
|
+
$gl-status-neutral-background-color: $gl-color-neutral-100; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
|
|
502
443
|
$gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color.
|
|
503
444
|
$gl-icon-color-success: $gl-color-green-600; // Used for an icon associated with success or validity.
|
|
504
445
|
$gl-icon-color-danger: $gl-color-red-600; // Used for an icon associated with an error or danger.
|
|
@@ -569,6 +510,69 @@ $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text co
|
|
|
569
510
|
$gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
|
|
570
511
|
$gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
|
|
571
512
|
$gl-banner-intro-border-color: $gl-color-blue-300; // Used to compliment the info banner.
|
|
513
|
+
$gl-badge-tier-icon-color-active: $gl-color-purple-700; // Used for the icon of a tier related badge in the active state.
|
|
514
|
+
$gl-badge-tier-icon-color-hover: $gl-color-purple-600; // Used for the icon of a tier related badge in the hover state.
|
|
515
|
+
$gl-badge-tier-icon-color-default: $gl-color-purple-500; // Used for the icon of a tier related badge when static or the default state when linked.
|
|
516
|
+
$gl-badge-tier-text-color-active: $gl-color-purple-900; // Used for the text of a tier related badge in the active state.
|
|
517
|
+
$gl-badge-tier-text-color-hover: $gl-color-purple-800; // Used for the text of a tier related badge in the hover state.
|
|
518
|
+
$gl-badge-tier-text-color-default: $gl-color-purple-700; // Used for the text of a tier related badge when static or the default state when linked.
|
|
519
|
+
$gl-badge-tier-border-color-hover: $gl-color-purple-200; // Used for the border of a tier related badge in the hover state.
|
|
520
|
+
$gl-badge-tier-background-color-active: $gl-color-purple-200; // Used for the background of a tier related badge in the active state.
|
|
521
|
+
$gl-badge-tier-background-color-default: $gl-color-purple-100; // Used for the background of a tier related badge when static or the default state when linked.
|
|
522
|
+
$gl-badge-danger-icon-color-active: $gl-color-red-700; // Used for the icon of a danger (critical) badge in the active state.
|
|
523
|
+
$gl-badge-danger-icon-color-hover: $gl-color-red-600; // Used for the icon of a danger (critical) badge in the hover state.
|
|
524
|
+
$gl-badge-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger (critical) badge when static or the default state when linked.
|
|
525
|
+
$gl-badge-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger (critical) badge in the active state.
|
|
526
|
+
$gl-badge-danger-text-color-hover: $gl-color-red-800; // Used for the text of a danger (critical) badge in the hover state.
|
|
527
|
+
$gl-badge-danger-text-color-default: $gl-color-red-700; // Used for the text of a danger (critical) badge when static or the default state when linked.
|
|
528
|
+
$gl-badge-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger (critical) badge in the hover state.
|
|
529
|
+
$gl-badge-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger (critical) badge in the active state.
|
|
530
|
+
$gl-badge-danger-background-color-default: $gl-color-red-100; // Used for the background of a danger (critical) badge when static or the default state when linked.
|
|
531
|
+
$gl-badge-warning-icon-color-active: $gl-color-orange-700; // Used for the icon of a warning status or confidential item in the active state.
|
|
532
|
+
$gl-badge-warning-icon-color-hover: $gl-color-orange-600; // Used for the icon of a warning status or confidential item in the hover state.
|
|
533
|
+
$gl-badge-warning-icon-color-default: $gl-color-orange-500; // Used for the icon of a warning status or confidential item when static or the default state when linked.
|
|
534
|
+
$gl-badge-warning-text-color-active: $gl-color-orange-900; // Used for the text of a warning status or confidential item in the active state.N
|
|
535
|
+
$gl-badge-warning-text-color-hover: $gl-color-orange-800; // Used for the text of a warning status or confidential item in the hover state.
|
|
536
|
+
$gl-badge-warning-text-color-default: $gl-color-orange-700; // Used for the text of a warning status or confidential item when static or the default state when linked.
|
|
537
|
+
$gl-badge-warning-border-color-hover: $gl-color-orange-200; // Used for the border of a warning status or confidential item in the hover state.
|
|
538
|
+
$gl-badge-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning status or confidential item in the active state.
|
|
539
|
+
$gl-badge-warning-background-color-default: $gl-color-orange-100; // Used for the background of a warning status or confidential item when static or the default state when linked.
|
|
540
|
+
$gl-badge-success-icon-color-active: $gl-color-green-700; // Used for the icon of a success badge in the active state.
|
|
541
|
+
$gl-badge-success-icon-color-hover: $gl-color-green-600; // Used for the icon of a success badge in the hover state.
|
|
542
|
+
$gl-badge-success-icon-color-default: $gl-color-green-500; // Used for the icon of a success badge when static or the default state when linked.
|
|
543
|
+
$gl-badge-success-text-color-active: $gl-color-green-900; // Used for the text of a success badge in the active state.
|
|
544
|
+
$gl-badge-success-text-color-hover: $gl-color-green-800; // Used for the text of a success badge in the hover state.
|
|
545
|
+
$gl-badge-success-text-color-default: $gl-color-green-700; // Used for the text of a success badge when static or the default state when linked.
|
|
546
|
+
$gl-badge-success-border-color-hover: $gl-color-green-200; // Used for the border of a success badge in the hover state.
|
|
547
|
+
$gl-badge-success-background-color-active: $gl-color-green-200; // Used for the background of a success badge in the active state.
|
|
548
|
+
$gl-badge-success-background-color-default: $gl-color-green-100; // Used for the background of a success badge when static or the default state when linked.
|
|
549
|
+
$gl-badge-info-icon-color-active: $gl-color-blue-700; // Used for the icon of an informational badge in the active state.
|
|
550
|
+
$gl-badge-info-icon-color-hover: $gl-color-blue-600; // Used for the icon of an informational badge in the hover state.
|
|
551
|
+
$gl-badge-info-icon-color-default: $gl-color-blue-500; // Used for the icon of an informational badge when static or the default state when linked.
|
|
552
|
+
$gl-badge-info-text-color-active: $gl-color-blue-900; // Used for the text of an informational badge in the active state.
|
|
553
|
+
$gl-badge-info-text-color-hover: $gl-color-blue-800; // Used for the text of an informational badge in the hover state.
|
|
554
|
+
$gl-badge-info-text-color-default: $gl-color-blue-700; // Used for the text of an informational badge when static or the default state when linked.
|
|
555
|
+
$gl-badge-info-border-color-hover: $gl-color-blue-200; // Used for the border of an informational badge in the hover state.
|
|
556
|
+
$gl-badge-info-background-color-active: $gl-color-blue-200; // Used for the background of an informational badge in the active state.
|
|
557
|
+
$gl-badge-info-background-color-default: $gl-color-blue-100; // Used for the background of an informational badge when static or the default state when linked.
|
|
558
|
+
$gl-badge-neutral-icon-color-active: $gl-color-neutral-700; // Used for the icon of a neutral badge in the active state.
|
|
559
|
+
$gl-badge-neutral-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a neutral badge in the hover state.
|
|
560
|
+
$gl-badge-neutral-icon-color-default: $gl-color-neutral-500; // Used for the icon of a neutral badge when static or the default state when linked.
|
|
561
|
+
$gl-badge-neutral-text-color-active: $gl-color-neutral-900; // Used for the text of a neutral badge in the active state.
|
|
562
|
+
$gl-badge-neutral-text-color-hover: $gl-color-neutral-800; // Used for the text of a neutral badge in the hover state.
|
|
563
|
+
$gl-badge-neutral-text-color-default: $gl-color-neutral-700; // Used for the text of a neutral badge when static or the default state when linked.
|
|
564
|
+
$gl-badge-neutral-border-color-hover: $gl-color-neutral-200; // Used for the border of a neutral badge in the hover state.
|
|
565
|
+
$gl-badge-neutral-background-color-active: $gl-color-neutral-200; // Used for the background of a neutral badge in the active state.
|
|
566
|
+
$gl-badge-neutral-background-color-default: $gl-color-neutral-100; // Used for the background of a neutral badge when static or the default state when linked.
|
|
567
|
+
$gl-badge-muted-icon-color-active: $gl-color-neutral-700; // Used for the icon of a subtle neutral badge in the active state.
|
|
568
|
+
$gl-badge-muted-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a subtle neutral badge in the hover state.
|
|
569
|
+
$gl-badge-muted-icon-color-default: $gl-color-neutral-500; // Used for the icon of a subtle neutral badge when static or the default state when linked.
|
|
570
|
+
$gl-badge-muted-text-color-active: $gl-color-neutral-800; // Used for the text of a subtle neutral badge in the active state.
|
|
571
|
+
$gl-badge-muted-text-color-hover: $gl-color-neutral-700; // Used for the text of a subtle neutral badge in the hover state.
|
|
572
|
+
$gl-badge-muted-text-color-default: $gl-color-neutral-600; // Used for the text of a subtle neutral badge when static or the default state when linked.
|
|
573
|
+
$gl-badge-muted-border-color-hover: $gl-color-neutral-200; // Used for the border of a subtle neutral badge in the hover state.
|
|
574
|
+
$gl-badge-muted-background-color-active: $gl-color-neutral-100; // Used for the background of a subtle neutral badge in the active state.
|
|
575
|
+
$gl-badge-muted-background-color-default: $gl-color-neutral-50; // Used for the background of a subtle neutral badge when static or the default state when linked.
|
|
572
576
|
$gl-avatar-fallback-background-color-neutral: $gl-color-neutral-50; // Neutral background for avatar fallback with no particular meaning.
|
|
573
577
|
$gl-avatar-fallback-background-color-orange: $gl-color-orange-50; // Orange background for avatar fallback with no particular meaning.
|
|
574
578
|
$gl-avatar-fallback-background-color-green: $gl-color-green-50; // Green background for avatar fallback with no particular meaning.
|
|
@@ -605,6 +609,20 @@ $gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the for
|
|
|
605
609
|
$gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
|
|
606
610
|
$gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
|
|
607
611
|
$gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
|
|
612
|
+
$gl-badge-tier-icon-color-focus: $gl-badge-tier-icon-color-hover; // Used for the icon of a tier related badge in the focus state.
|
|
613
|
+
$gl-badge-tier-text-color-focus: $gl-badge-tier-text-color-hover; // Used for the text of a tier related badge in the focus state.
|
|
614
|
+
$gl-badge-danger-icon-color-focus: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger (critical) badge in the focus state.
|
|
615
|
+
$gl-badge-danger-text-color-focus: $gl-badge-danger-text-color-hover; // Used for the text of a danger (critical) badge in the focus state.
|
|
616
|
+
$gl-badge-warning-icon-color-focus: $gl-badge-warning-icon-color-hover; // Used for the icon of a warning status or confidential item in the focus state.
|
|
617
|
+
$gl-badge-warning-text-color-focus: $gl-badge-warning-text-color-hover; // Used for the text of a warning status or confidential item in the focus state.
|
|
618
|
+
$gl-badge-success-icon-color-focus: $gl-badge-success-icon-color-hover; // Used for the icon of a success badge in the focus state.
|
|
619
|
+
$gl-badge-success-text-color-focus: $gl-badge-success-text-color-hover; // Used for the text of a success badge in the focus state.
|
|
620
|
+
$gl-badge-info-icon-color-focus: $gl-badge-info-icon-color-hover; // Used for the icon of an informational badge in the focus state.
|
|
621
|
+
$gl-badge-info-text-color-focus: $gl-badge-info-text-color-hover; // Used for the text of an informational badge in the focus state.
|
|
622
|
+
$gl-badge-neutral-icon-color-focus: $gl-badge-neutral-icon-color-hover; // Used for the icon of a neutral badge in the focus state.
|
|
623
|
+
$gl-badge-neutral-text-color-focus: $gl-badge-neutral-text-color-hover; // Used for the text of a neutral badge in the focus state.
|
|
624
|
+
$gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a subtle neutral badge in the focus state.
|
|
625
|
+
$gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a subtle neutral badge in the focus state.
|
|
608
626
|
$gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
|
|
609
627
|
$gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
|
|
610
628
|
$gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
|