@cumulus-ui/design-tokens 0.2.0 → 0.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.
- package/index.d.ts +252 -0
- package/index.js +252 -0
- package/package.json +1 -1
- package/tokens.css +311 -1
package/index.d.ts
CHANGED
|
@@ -437,3 +437,255 @@ export declare const spaceStaticXxl: string;
|
|
|
437
437
|
export declare const spaceStaticXxxl: string;
|
|
438
438
|
export declare const shadowCard: string;
|
|
439
439
|
export declare const shadowContainerActive: string;
|
|
440
|
+
export declare const motionDurationShowPaced: string;
|
|
441
|
+
export declare const motionEasingShowPaced: string;
|
|
442
|
+
export declare const spaceAlertHorizontal: string;
|
|
443
|
+
export declare const spaceAlertActionLeft: string;
|
|
444
|
+
export declare const spaceButtonFocusOutlineGutter: string;
|
|
445
|
+
export declare const spaceXxs: string;
|
|
446
|
+
export declare const spaceAlertMessageRight: string;
|
|
447
|
+
export declare const sizeIconMedium: string;
|
|
448
|
+
export declare const spaceXs: string;
|
|
449
|
+
export declare const sizeIconBig: string;
|
|
450
|
+
export declare const sizeIconNormal: string;
|
|
451
|
+
export declare const spaceS: string;
|
|
452
|
+
export declare const motionDurationSlow: string;
|
|
453
|
+
export declare const borderLinkFocusRingOutline: string;
|
|
454
|
+
export declare const borderLinkFocusRingShadowSpread: string;
|
|
455
|
+
export declare const fontWayfindingLinkActiveWeight: string;
|
|
456
|
+
export declare const fontSmoothingWebkit: string;
|
|
457
|
+
export declare const fontSmoothingMozOsx: string;
|
|
458
|
+
export declare const letterSpacingBodyS: string;
|
|
459
|
+
export declare const spaceContentHeaderPaddingBottom: string;
|
|
460
|
+
export declare const spaceLayoutContentBottom: string;
|
|
461
|
+
export declare const spaceDarkHeaderOverlapDistance: string;
|
|
462
|
+
export declare const motionDurationTransitionShowPaced: string;
|
|
463
|
+
export declare const motionEasingTransitionShowPaced: string;
|
|
464
|
+
export declare const spaceGridGutter: string;
|
|
465
|
+
export declare const borderDividerSectionWidth: string;
|
|
466
|
+
export declare const motionDurationRefreshOnlyMedium: string;
|
|
467
|
+
export declare const colorTextSmall: string;
|
|
468
|
+
export declare const fontDisplayLabelWeight: string;
|
|
469
|
+
export declare const spaceKeyValueGap: string;
|
|
470
|
+
export declare const fontBoxValueLargeWeight: string;
|
|
471
|
+
export declare const colorBackgroundInlineCode: string;
|
|
472
|
+
export declare const fontWeightHeavy: string;
|
|
473
|
+
export declare const spaceScaledNone: string;
|
|
474
|
+
export declare const spaceNone: string;
|
|
475
|
+
export declare const spaceXxxs: string;
|
|
476
|
+
export declare const spaceM: string;
|
|
477
|
+
export declare const spaceL: string;
|
|
478
|
+
export declare const spaceXl: string;
|
|
479
|
+
export declare const spaceXxl: string;
|
|
480
|
+
export declare const spaceXxxl: string;
|
|
481
|
+
export declare const fontButtonLetterSpacing: string;
|
|
482
|
+
export declare const spaceButtonHorizontal: string;
|
|
483
|
+
export declare const colorTextButtonInlineIconDefault: string;
|
|
484
|
+
export declare const colorTextButtonInlineIconHover: string;
|
|
485
|
+
export declare const colorTextButtonInlineIconDisabled: string;
|
|
486
|
+
export declare const spaceButtonIconFocusOutlineGutterVertical: string;
|
|
487
|
+
export declare const spaceButtonInlineIconFocusOutlineGutter: string;
|
|
488
|
+
export declare const spaceButtonIconOnlyHorizontal: string;
|
|
489
|
+
export declare const spaceButtonModalDismissVertical: string;
|
|
490
|
+
export declare const motionEasingShowQuick: string;
|
|
491
|
+
export declare const colorBorderDropdownGroup: string;
|
|
492
|
+
export declare const motionDurationShowQuick: string;
|
|
493
|
+
export declare const sizeCalendarGridWidth: string;
|
|
494
|
+
export declare const spaceCalendarGridGutter: string;
|
|
495
|
+
export declare const colorTextCalendarMonth: string;
|
|
496
|
+
export declare const colorBorderCalendarGrid: string;
|
|
497
|
+
export declare const colorTextDropdownItemSecondary: string;
|
|
498
|
+
export declare const colorTextCalendarDateHover: string;
|
|
499
|
+
export declare const borderItemWidth: string;
|
|
500
|
+
export declare const colorBackgroundCalendarCurrentDate: string;
|
|
501
|
+
export declare const spaceCalendarGridFocusOutlineGutter: string;
|
|
502
|
+
export declare const colorBorderCalendarGridSelectedFocusRing: string;
|
|
503
|
+
export declare const spaceContainerHeaderBottom: string;
|
|
504
|
+
export declare const spaceTableHeaderToolsFullPageBottom: string;
|
|
505
|
+
export declare const sizeControl: string;
|
|
506
|
+
export declare const borderRadiusCodeEditor: string;
|
|
507
|
+
export declare const colorBorderCodeEditorAceActiveLineLightTheme: string;
|
|
508
|
+
export declare const colorBorderCodeEditorAceActiveLineDarkTheme: string;
|
|
509
|
+
export declare const colorBackgroundCodeEditorGutterDefault: string;
|
|
510
|
+
export declare const colorTextCodeEditorGutterDefault: string;
|
|
511
|
+
export declare const colorBackgroundCodeEditorGutterActiveLineDefault: string;
|
|
512
|
+
export declare const colorTextCodeEditorGutterActiveLine: string;
|
|
513
|
+
export declare const colorBackgroundCodeEditorGutterActiveLineError: string;
|
|
514
|
+
export declare const colorBorderCodeEditorDefault: string;
|
|
515
|
+
export declare const colorBackgroundCodeEditorStatusBar: string;
|
|
516
|
+
export declare const colorTransparent: string;
|
|
517
|
+
export declare const colorBackgroundCodeEditorPaneItemHover: string;
|
|
518
|
+
export declare const colorBorderCodeEditorPaneItemHover: string;
|
|
519
|
+
export declare const colorTextCodeEditorTabButtonError: string;
|
|
520
|
+
export declare const borderActiveWidth: string;
|
|
521
|
+
export declare const motionEasingRefreshOnlyC: string;
|
|
522
|
+
export declare const colorTextCodeEditorStatusBarDisabled: string;
|
|
523
|
+
export declare const spaceCodeEditorStatusFocusOutlineGutter: string;
|
|
524
|
+
export declare const borderCodeEditorStatusDividerWidth: string;
|
|
525
|
+
export declare const colorBorderTabsDivider: string;
|
|
526
|
+
export declare const colorBackgroundCodeEditorLoading: string;
|
|
527
|
+
export declare const colorTextFormLabel: string;
|
|
528
|
+
export declare const borderDividerListWidth: string;
|
|
529
|
+
export declare const borderContainerTopWidth: string;
|
|
530
|
+
export declare const shadowContainer: string;
|
|
531
|
+
export declare const shadowStickyEmbedded: string;
|
|
532
|
+
export declare const borderContainerStickyWidth: string;
|
|
533
|
+
export declare const colorBorderContainerDivider: string;
|
|
534
|
+
export declare const spaceContainerHeaderTop: string;
|
|
535
|
+
export declare const shadowSticky: string;
|
|
536
|
+
export declare const spaceContainerContentTop: string;
|
|
537
|
+
export declare const spaceLayoutContentHorizontal: string;
|
|
538
|
+
export declare const colorBorderDropdownItemDefault: string;
|
|
539
|
+
export declare const fontPanelHeaderSize: string;
|
|
540
|
+
export declare const fontPanelHeaderLineHeight: string;
|
|
541
|
+
export declare const spacePanelHeaderVertical: string;
|
|
542
|
+
export declare const spacePanelSideLeft: string;
|
|
543
|
+
export declare const colorBorderPanelHeader: string;
|
|
544
|
+
export declare const spacePanelContentTop: string;
|
|
545
|
+
export declare const spacePanelSideRight: string;
|
|
546
|
+
export declare const spacePanelContentBottom: string;
|
|
547
|
+
export declare const colorTextExpandableSectionDefault: string;
|
|
548
|
+
export declare const fontExpandableHeadingSize: string;
|
|
549
|
+
export declare const spaceExpandableSectionIconOffsetTop: string;
|
|
550
|
+
export declare const colorTextExpandableSectionNavigationIconDefault: string;
|
|
551
|
+
export declare const colorTextExpandableSectionHover: string;
|
|
552
|
+
export declare const borderControlFocusRingShadowSpread: string;
|
|
553
|
+
export declare const borderInvalidWidth: string;
|
|
554
|
+
export declare const colorBorderInputDisabled: string;
|
|
555
|
+
export declare const colorBorderControlDisabled: string;
|
|
556
|
+
export declare const shadowFlashCollapsed: string;
|
|
557
|
+
export declare const colorBackgroundNotificationStackBar: string;
|
|
558
|
+
export declare const colorBorderNotificationStackBar: string;
|
|
559
|
+
export declare const shadowPanelToggle: string;
|
|
560
|
+
export declare const colorTextNotificationStackBar: string;
|
|
561
|
+
export declare const colorBackgroundNotificationStackBarHover: string;
|
|
562
|
+
export declare const colorBackgroundNotificationStackBarActive: string;
|
|
563
|
+
export declare const spaceFlashbarVertical: string;
|
|
564
|
+
export declare const spaceFlashbarHorizontal: string;
|
|
565
|
+
export declare const shadowFlashSticky: string;
|
|
566
|
+
export declare const spaceFlashbarActionLeft: string;
|
|
567
|
+
export declare const spaceFlashbarDismissRight: string;
|
|
568
|
+
export declare const colorTextNotificationYellow: string;
|
|
569
|
+
export declare const motionEasingRefreshOnlyA: string;
|
|
570
|
+
export declare const spaceScaled2xXxs: string;
|
|
571
|
+
export declare const sizeVerticalInput: string;
|
|
572
|
+
export declare const fontHeaderH2DescriptionSize: string;
|
|
573
|
+
export declare const fontHeaderH2DescriptionLineHeight: string;
|
|
574
|
+
export declare const spacePanelDividerMarginHorizontal: string;
|
|
575
|
+
export declare const sizeIconLarge: string;
|
|
576
|
+
export declare const colorTextInverted: string;
|
|
577
|
+
export declare const colorTextIconSubtle: string;
|
|
578
|
+
export declare const colorBackgroundBadgeIcon: string;
|
|
579
|
+
export declare const colorTextInputPlaceholderDisabled: string;
|
|
580
|
+
export declare const borderControlInvalidFocusRingShadowSpread: string;
|
|
581
|
+
export declare const spaceFieldIconOffset: string;
|
|
582
|
+
export declare const colorBackgroundItemCard: string;
|
|
583
|
+
export declare const shadowItemCard: string;
|
|
584
|
+
export declare const borderWidthItemCard: string;
|
|
585
|
+
export declare const colorBorderItemCard: string;
|
|
586
|
+
export declare const borderWidthItemCardHighlighted: string;
|
|
587
|
+
export declare const colorBorderItemCardHighlighted: string;
|
|
588
|
+
export declare const borderRadiusItemCardEmbedded: string;
|
|
589
|
+
export declare const spaceItemCardVerticalEmbedded: string;
|
|
590
|
+
export declare const spaceItemCardHorizontalEmbedded: string;
|
|
591
|
+
export declare const borderRadiusItemCardDefault: string;
|
|
592
|
+
export declare const spaceItemCardVerticalDefault: string;
|
|
593
|
+
export declare const spaceItemCardHorizontalDefault: string;
|
|
594
|
+
export declare const colorTextLinkButtonUnderlineHover: string;
|
|
595
|
+
export declare const fontLinkButtonWeight: string;
|
|
596
|
+
export declare const fontLinkButtonLetterSpacing: string;
|
|
597
|
+
export declare const colorTextLinkButtonUnderline: string;
|
|
598
|
+
export declare const colorTextLinkButtonNormalDefault: string;
|
|
599
|
+
export declare const colorTextLinkButtonNormalHover: string;
|
|
600
|
+
export declare const colorTextLinkButtonNormalActive: string;
|
|
601
|
+
export declare const colorTextLinkInvertedHover: string;
|
|
602
|
+
export declare const motionDurationFast: string;
|
|
603
|
+
export declare const motionDurationRefreshOnlyFast: string;
|
|
604
|
+
export declare const motionDurationExtraSlow: string;
|
|
605
|
+
export declare const colorBackgroundModalOverlay: string;
|
|
606
|
+
export declare const shadowModal: string;
|
|
607
|
+
export declare const spaceModalContentBottom: string;
|
|
608
|
+
export declare const spaceModalHorizontal: string;
|
|
609
|
+
export declare const colorTextPaginationPageNumberDefault: string;
|
|
610
|
+
export declare const colorTextPaginationPageNumberActiveDisabled: string;
|
|
611
|
+
export declare const colorShadowDefault: string;
|
|
612
|
+
export declare const shadowPopover: string;
|
|
613
|
+
export declare const motionDurationModerate: string;
|
|
614
|
+
export declare const colorTextDropdownGroupLabel: string;
|
|
615
|
+
export declare const colorTextColumnHeader: string;
|
|
616
|
+
export declare const spaceSegmentedControlFocusOutlineGutter: string;
|
|
617
|
+
export declare const colorBackgroundSegmentWrapper: string;
|
|
618
|
+
export declare const spacePanelNavLeft: string;
|
|
619
|
+
export declare const spaceScaled2xL: string;
|
|
620
|
+
export declare const spaceScaled2xM: string;
|
|
621
|
+
export declare const spaceScaled2xXl: string;
|
|
622
|
+
export declare const colorBackgroundSliderRangeErrorDefault: string;
|
|
623
|
+
export declare const colorBackgroundSliderRangeWarningDefault: string;
|
|
624
|
+
export declare const colorBackgroundSliderRangeErrorActive: string;
|
|
625
|
+
export declare const colorBackgroundSliderRangeWarningActive: string;
|
|
626
|
+
export declare const colorBackgroundSliderHandleRing: string;
|
|
627
|
+
export declare const colorBackgroundSliderHandleErrorDefault: string;
|
|
628
|
+
export declare const colorBackgroundSliderHandleErrorActive: string;
|
|
629
|
+
export declare const colorBackgroundSliderHandleWarningDefault: string;
|
|
630
|
+
export declare const colorBackgroundSliderHandleWarningActive: string;
|
|
631
|
+
export declare const colorBackgroundLayoutPanelContent: string;
|
|
632
|
+
export declare const colorBackgroundLayoutPanelHover: string;
|
|
633
|
+
export declare const borderPanelTopWidth: string;
|
|
634
|
+
export declare const colorBorderDividerPanelBottom: string;
|
|
635
|
+
export declare const shadowSplitBottom: string;
|
|
636
|
+
export declare const shadowSplitSide: string;
|
|
637
|
+
export declare const borderPanelHeaderWidth: string;
|
|
638
|
+
export declare const spacePanelSplitTop: string;
|
|
639
|
+
export declare const spaceLayoutToggleDiameter: string;
|
|
640
|
+
export declare const spaceLayoutTogglePadding: string;
|
|
641
|
+
export declare const spacePanelSplitBottom: string;
|
|
642
|
+
export declare const sizeVerticalPanelIconOffset: string;
|
|
643
|
+
export declare const spaceTableHeaderToolsBottom: string;
|
|
644
|
+
export declare const spaceTableHorizontal: string;
|
|
645
|
+
export declare const spaceTableContentBottom: string;
|
|
646
|
+
export declare const sizeTableSelectionHorizontal: string;
|
|
647
|
+
export declare const colorBackgroundTableHeader: string;
|
|
648
|
+
export declare const spaceTableHeaderHorizontal: string;
|
|
649
|
+
export declare const spaceTableEmbeddedHeaderTop: string;
|
|
650
|
+
export declare const spaceTableFooterHorizontal: string;
|
|
651
|
+
export declare const colorBorderTabsShadow: string;
|
|
652
|
+
export declare const colorBorderTabsUnderline: string;
|
|
653
|
+
export declare const fontTabsSize: string;
|
|
654
|
+
export declare const fontTabsLineHeight: string;
|
|
655
|
+
export declare const spaceTabsFocusOutlineGutter: string;
|
|
656
|
+
export declare const fontTabsDisabledWeight: string;
|
|
657
|
+
export declare const spaceTabsContentTop: string;
|
|
658
|
+
export declare const motionDurationTransitionQuick: string;
|
|
659
|
+
export declare const motionEasingTransitionQuick: string;
|
|
660
|
+
export declare const colorBorderTilesDisabled: string;
|
|
661
|
+
export declare const colorBackgroundTilesDisabled: string;
|
|
662
|
+
export declare const spaceTileGutter: string;
|
|
663
|
+
export declare const colorBackgroundToggleDefault: string;
|
|
664
|
+
export declare const motionEasingEaseOutQuart: string;
|
|
665
|
+
export declare const colorTextDisabled: string;
|
|
666
|
+
export declare const colorBorderLayout: string;
|
|
667
|
+
export declare const spaceScaled2xXxxl: string;
|
|
668
|
+
export declare const colorNeutral600: string;
|
|
669
|
+
export declare const colorNeutral450: string;
|
|
670
|
+
export declare const colorNeutral200: string;
|
|
671
|
+
export declare const colorNeutral700: string;
|
|
672
|
+
export declare const colorNeutral100: string;
|
|
673
|
+
export declare const colorNeutral850: string;
|
|
674
|
+
export declare const colorNeutral300: string;
|
|
675
|
+
export declare const colorNeutral800: string;
|
|
676
|
+
export declare const colorNeutral950: string;
|
|
677
|
+
export declare const colorNeutral500: string;
|
|
678
|
+
export declare const colorWhite: string;
|
|
679
|
+
export declare const colorNeutral250: string;
|
|
680
|
+
export declare const colorNeutral350: string;
|
|
681
|
+
export declare const colorNeutral650: string;
|
|
682
|
+
export declare const colorNeutral750: string;
|
|
683
|
+
export declare const colorNeutral400: string;
|
|
684
|
+
export declare const colorError600: string;
|
|
685
|
+
export declare const colorError400: string;
|
|
686
|
+
export declare const borderWidthCardHighlighted: string;
|
|
687
|
+
export declare const colorBorderCardHighlighted: string;
|
|
688
|
+
export declare const colorGreyOpaque70: string;
|
|
689
|
+
export declare const shadowDropdown: string;
|
|
690
|
+
export declare const colorGreyTransparentHeavy: string;
|
|
691
|
+
export declare const colorGreyTransparent: string;
|
package/index.js
CHANGED
|
@@ -437,3 +437,255 @@ export const spaceStaticXxl = "var(--space-static-xxl)";
|
|
|
437
437
|
export const spaceStaticXxxl = "var(--space-static-xxxl)";
|
|
438
438
|
export const shadowCard = "var(--shadow-card)";
|
|
439
439
|
export const shadowContainerActive = "var(--shadow-container-active)";
|
|
440
|
+
export const motionDurationShowPaced = "var(--motion-duration-show-paced)";
|
|
441
|
+
export const motionEasingShowPaced = "var(--motion-easing-show-paced)";
|
|
442
|
+
export const spaceAlertHorizontal = "var(--space-alert-horizontal)";
|
|
443
|
+
export const spaceAlertActionLeft = "var(--space-alert-action-left)";
|
|
444
|
+
export const spaceButtonFocusOutlineGutter = "var(--space-button-focus-outline-gutter)";
|
|
445
|
+
export const spaceXxs = "var(--space-xxs)";
|
|
446
|
+
export const spaceAlertMessageRight = "var(--space-alert-message-right)";
|
|
447
|
+
export const sizeIconMedium = "var(--size-icon-medium)";
|
|
448
|
+
export const spaceXs = "var(--space-xs)";
|
|
449
|
+
export const sizeIconBig = "var(--size-icon-big)";
|
|
450
|
+
export const sizeIconNormal = "var(--size-icon-normal)";
|
|
451
|
+
export const spaceS = "var(--space-s)";
|
|
452
|
+
export const motionDurationSlow = "var(--motion-duration-slow)";
|
|
453
|
+
export const borderLinkFocusRingOutline = "var(--border-link-focus-ring-outline)";
|
|
454
|
+
export const borderLinkFocusRingShadowSpread = "var(--border-link-focus-ring-shadow-spread)";
|
|
455
|
+
export const fontWayfindingLinkActiveWeight = "var(--font-wayfinding-link-active-weight)";
|
|
456
|
+
export const fontSmoothingWebkit = "var(--font-smoothing-webkit)";
|
|
457
|
+
export const fontSmoothingMozOsx = "var(--font-smoothing-moz-osx)";
|
|
458
|
+
export const letterSpacingBodyS = "var(--letter-spacing-body-s)";
|
|
459
|
+
export const spaceContentHeaderPaddingBottom = "var(--space-content-header-padding-bottom)";
|
|
460
|
+
export const spaceLayoutContentBottom = "var(--space-layout-content-bottom)";
|
|
461
|
+
export const spaceDarkHeaderOverlapDistance = "var(--space-dark-header-overlap-distance)";
|
|
462
|
+
export const motionDurationTransitionShowPaced = "var(--motion-duration-transition-show-paced)";
|
|
463
|
+
export const motionEasingTransitionShowPaced = "var(--motion-easing-transition-show-paced)";
|
|
464
|
+
export const spaceGridGutter = "var(--space-grid-gutter)";
|
|
465
|
+
export const borderDividerSectionWidth = "var(--border-divider-section-width)";
|
|
466
|
+
export const motionDurationRefreshOnlyMedium = "var(--motion-duration-refresh-only-medium)";
|
|
467
|
+
export const colorTextSmall = "var(--color-text-small)";
|
|
468
|
+
export const fontDisplayLabelWeight = "var(--font-display-label-weight)";
|
|
469
|
+
export const spaceKeyValueGap = "var(--space-key-value-gap)";
|
|
470
|
+
export const fontBoxValueLargeWeight = "var(--font-box-value-large-weight)";
|
|
471
|
+
export const colorBackgroundInlineCode = "var(--color-background-inline-code)";
|
|
472
|
+
export const fontWeightHeavy = "var(--font-weight-heavy)";
|
|
473
|
+
export const spaceScaledNone = "var(--space-scaled-none)";
|
|
474
|
+
export const spaceNone = "var(--space-none)";
|
|
475
|
+
export const spaceXxxs = "var(--space-xxxs)";
|
|
476
|
+
export const spaceM = "var(--space-m)";
|
|
477
|
+
export const spaceL = "var(--space-l)";
|
|
478
|
+
export const spaceXl = "var(--space-xl)";
|
|
479
|
+
export const spaceXxl = "var(--space-xxl)";
|
|
480
|
+
export const spaceXxxl = "var(--space-xxxl)";
|
|
481
|
+
export const fontButtonLetterSpacing = "var(--font-button-letter-spacing)";
|
|
482
|
+
export const spaceButtonHorizontal = "var(--space-button-horizontal)";
|
|
483
|
+
export const colorTextButtonInlineIconDefault = "var(--color-text-button-inline-icon-default)";
|
|
484
|
+
export const colorTextButtonInlineIconHover = "var(--color-text-button-inline-icon-hover)";
|
|
485
|
+
export const colorTextButtonInlineIconDisabled = "var(--color-text-button-inline-icon-disabled)";
|
|
486
|
+
export const spaceButtonIconFocusOutlineGutterVertical = "var(--space-button-icon-focus-outline-gutter-vertical)";
|
|
487
|
+
export const spaceButtonInlineIconFocusOutlineGutter = "var(--space-button-inline-icon-focus-outline-gutter)";
|
|
488
|
+
export const spaceButtonIconOnlyHorizontal = "var(--space-button-icon-only-horizontal)";
|
|
489
|
+
export const spaceButtonModalDismissVertical = "var(--space-button-modal-dismiss-vertical)";
|
|
490
|
+
export const motionEasingShowQuick = "var(--motion-easing-show-quick)";
|
|
491
|
+
export const colorBorderDropdownGroup = "var(--color-border-dropdown-group)";
|
|
492
|
+
export const motionDurationShowQuick = "var(--motion-duration-show-quick)";
|
|
493
|
+
export const sizeCalendarGridWidth = "var(--size-calendar-grid-width)";
|
|
494
|
+
export const spaceCalendarGridGutter = "var(--space-calendar-grid-gutter)";
|
|
495
|
+
export const colorTextCalendarMonth = "var(--color-text-calendar-month)";
|
|
496
|
+
export const colorBorderCalendarGrid = "var(--color-border-calendar-grid)";
|
|
497
|
+
export const colorTextDropdownItemSecondary = "var(--color-text-dropdown-item-secondary)";
|
|
498
|
+
export const colorTextCalendarDateHover = "var(--color-text-calendar-date-hover)";
|
|
499
|
+
export const borderItemWidth = "var(--border-item-width)";
|
|
500
|
+
export const colorBackgroundCalendarCurrentDate = "var(--color-background-calendar-current-date)";
|
|
501
|
+
export const spaceCalendarGridFocusOutlineGutter = "var(--space-calendar-grid-focus-outline-gutter)";
|
|
502
|
+
export const colorBorderCalendarGridSelectedFocusRing = "var(--color-border-calendar-grid-selected-focus-ring)";
|
|
503
|
+
export const spaceContainerHeaderBottom = "var(--space-container-header-bottom)";
|
|
504
|
+
export const spaceTableHeaderToolsFullPageBottom = "var(--space-table-header-tools-full-page-bottom)";
|
|
505
|
+
export const sizeControl = "var(--size-control)";
|
|
506
|
+
export const borderRadiusCodeEditor = "var(--border-radius-code-editor)";
|
|
507
|
+
export const colorBorderCodeEditorAceActiveLineLightTheme = "var(--color-border-code-editor-ace-active-line-light-theme)";
|
|
508
|
+
export const colorBorderCodeEditorAceActiveLineDarkTheme = "var(--color-border-code-editor-ace-active-line-dark-theme)";
|
|
509
|
+
export const colorBackgroundCodeEditorGutterDefault = "var(--color-background-code-editor-gutter-default)";
|
|
510
|
+
export const colorTextCodeEditorGutterDefault = "var(--color-text-code-editor-gutter-default)";
|
|
511
|
+
export const colorBackgroundCodeEditorGutterActiveLineDefault = "var(--color-background-code-editor-gutter-active-line-default)";
|
|
512
|
+
export const colorTextCodeEditorGutterActiveLine = "var(--color-text-code-editor-gutter-active-line)";
|
|
513
|
+
export const colorBackgroundCodeEditorGutterActiveLineError = "var(--color-background-code-editor-gutter-active-line-error)";
|
|
514
|
+
export const colorBorderCodeEditorDefault = "var(--color-border-code-editor-default)";
|
|
515
|
+
export const colorBackgroundCodeEditorStatusBar = "var(--color-background-code-editor-status-bar)";
|
|
516
|
+
export const colorTransparent = "var(--color-transparent)";
|
|
517
|
+
export const colorBackgroundCodeEditorPaneItemHover = "var(--color-background-code-editor-pane-item-hover)";
|
|
518
|
+
export const colorBorderCodeEditorPaneItemHover = "var(--color-border-code-editor-pane-item-hover)";
|
|
519
|
+
export const colorTextCodeEditorTabButtonError = "var(--color-text-code-editor-tab-button-error)";
|
|
520
|
+
export const borderActiveWidth = "var(--border-active-width)";
|
|
521
|
+
export const motionEasingRefreshOnlyC = "var(--motion-easing-refresh-only-c)";
|
|
522
|
+
export const colorTextCodeEditorStatusBarDisabled = "var(--color-text-code-editor-status-bar-disabled)";
|
|
523
|
+
export const spaceCodeEditorStatusFocusOutlineGutter = "var(--space-code-editor-status-focus-outline-gutter)";
|
|
524
|
+
export const borderCodeEditorStatusDividerWidth = "var(--border-code-editor-status-divider-width)";
|
|
525
|
+
export const colorBorderTabsDivider = "var(--color-border-tabs-divider)";
|
|
526
|
+
export const colorBackgroundCodeEditorLoading = "var(--color-background-code-editor-loading)";
|
|
527
|
+
export const colorTextFormLabel = "var(--color-text-form-label)";
|
|
528
|
+
export const borderDividerListWidth = "var(--border-divider-list-width)";
|
|
529
|
+
export const borderContainerTopWidth = "var(--border-container-top-width)";
|
|
530
|
+
export const shadowContainer = "var(--shadow-container)";
|
|
531
|
+
export const shadowStickyEmbedded = "var(--shadow-sticky-embedded)";
|
|
532
|
+
export const borderContainerStickyWidth = "var(--border-container-sticky-width)";
|
|
533
|
+
export const colorBorderContainerDivider = "var(--color-border-container-divider)";
|
|
534
|
+
export const spaceContainerHeaderTop = "var(--space-container-header-top)";
|
|
535
|
+
export const shadowSticky = "var(--shadow-sticky)";
|
|
536
|
+
export const spaceContainerContentTop = "var(--space-container-content-top)";
|
|
537
|
+
export const spaceLayoutContentHorizontal = "var(--space-layout-content-horizontal)";
|
|
538
|
+
export const colorBorderDropdownItemDefault = "var(--color-border-dropdown-item-default)";
|
|
539
|
+
export const fontPanelHeaderSize = "var(--font-panel-header-size)";
|
|
540
|
+
export const fontPanelHeaderLineHeight = "var(--font-panel-header-line-height)";
|
|
541
|
+
export const spacePanelHeaderVertical = "var(--space-panel-header-vertical)";
|
|
542
|
+
export const spacePanelSideLeft = "var(--space-panel-side-left)";
|
|
543
|
+
export const colorBorderPanelHeader = "var(--color-border-panel-header)";
|
|
544
|
+
export const spacePanelContentTop = "var(--space-panel-content-top)";
|
|
545
|
+
export const spacePanelSideRight = "var(--space-panel-side-right)";
|
|
546
|
+
export const spacePanelContentBottom = "var(--space-panel-content-bottom)";
|
|
547
|
+
export const colorTextExpandableSectionDefault = "var(--color-text-expandable-section-default)";
|
|
548
|
+
export const fontExpandableHeadingSize = "var(--font-expandable-heading-size)";
|
|
549
|
+
export const spaceExpandableSectionIconOffsetTop = "var(--space-expandable-section-icon-offset-top)";
|
|
550
|
+
export const colorTextExpandableSectionNavigationIconDefault = "var(--color-text-expandable-section-navigation-icon-default)";
|
|
551
|
+
export const colorTextExpandableSectionHover = "var(--color-text-expandable-section-hover)";
|
|
552
|
+
export const borderControlFocusRingShadowSpread = "var(--border-control-focus-ring-shadow-spread)";
|
|
553
|
+
export const borderInvalidWidth = "var(--border-invalid-width)";
|
|
554
|
+
export const colorBorderInputDisabled = "var(--color-border-input-disabled)";
|
|
555
|
+
export const colorBorderControlDisabled = "var(--color-border-control-disabled)";
|
|
556
|
+
export const shadowFlashCollapsed = "var(--shadow-flash-collapsed)";
|
|
557
|
+
export const colorBackgroundNotificationStackBar = "var(--color-background-notification-stack-bar)";
|
|
558
|
+
export const colorBorderNotificationStackBar = "var(--color-border-notification-stack-bar)";
|
|
559
|
+
export const shadowPanelToggle = "var(--shadow-panel-toggle)";
|
|
560
|
+
export const colorTextNotificationStackBar = "var(--color-text-notification-stack-bar)";
|
|
561
|
+
export const colorBackgroundNotificationStackBarHover = "var(--color-background-notification-stack-bar-hover)";
|
|
562
|
+
export const colorBackgroundNotificationStackBarActive = "var(--color-background-notification-stack-bar-active)";
|
|
563
|
+
export const spaceFlashbarVertical = "var(--space-flashbar-vertical)";
|
|
564
|
+
export const spaceFlashbarHorizontal = "var(--space-flashbar-horizontal)";
|
|
565
|
+
export const shadowFlashSticky = "var(--shadow-flash-sticky)";
|
|
566
|
+
export const spaceFlashbarActionLeft = "var(--space-flashbar-action-left)";
|
|
567
|
+
export const spaceFlashbarDismissRight = "var(--space-flashbar-dismiss-right)";
|
|
568
|
+
export const colorTextNotificationYellow = "var(--color-text-notification-yellow)";
|
|
569
|
+
export const motionEasingRefreshOnlyA = "var(--motion-easing-refresh-only-a)";
|
|
570
|
+
export const spaceScaled2xXxs = "var(--space-scaled-2x-xxs)";
|
|
571
|
+
export const sizeVerticalInput = "var(--size-vertical-input)";
|
|
572
|
+
export const fontHeaderH2DescriptionSize = "var(--font-header-h2-description-size)";
|
|
573
|
+
export const fontHeaderH2DescriptionLineHeight = "var(--font-header-h2-description-line-height)";
|
|
574
|
+
export const spacePanelDividerMarginHorizontal = "var(--space-panel-divider-margin-horizontal)";
|
|
575
|
+
export const sizeIconLarge = "var(--size-icon-large)";
|
|
576
|
+
export const colorTextInverted = "var(--color-text-inverted)";
|
|
577
|
+
export const colorTextIconSubtle = "var(--color-text-icon-subtle)";
|
|
578
|
+
export const colorBackgroundBadgeIcon = "var(--color-background-badge-icon)";
|
|
579
|
+
export const colorTextInputPlaceholderDisabled = "var(--color-text-input-placeholder-disabled)";
|
|
580
|
+
export const borderControlInvalidFocusRingShadowSpread = "var(--border-control-invalid-focus-ring-shadow-spread)";
|
|
581
|
+
export const spaceFieldIconOffset = "var(--space-field-icon-offset)";
|
|
582
|
+
export const colorBackgroundItemCard = "var(--color-background-item-card)";
|
|
583
|
+
export const shadowItemCard = "var(--shadow-item-card)";
|
|
584
|
+
export const borderWidthItemCard = "var(--border-width-item-card)";
|
|
585
|
+
export const colorBorderItemCard = "var(--color-border-item-card)";
|
|
586
|
+
export const borderWidthItemCardHighlighted = "var(--border-width-item-card-highlighted)";
|
|
587
|
+
export const colorBorderItemCardHighlighted = "var(--color-border-item-card-highlighted)";
|
|
588
|
+
export const borderRadiusItemCardEmbedded = "var(--border-radius-item-card-embedded)";
|
|
589
|
+
export const spaceItemCardVerticalEmbedded = "var(--space-item-card-vertical-embedded)";
|
|
590
|
+
export const spaceItemCardHorizontalEmbedded = "var(--space-item-card-horizontal-embedded)";
|
|
591
|
+
export const borderRadiusItemCardDefault = "var(--border-radius-item-card-default)";
|
|
592
|
+
export const spaceItemCardVerticalDefault = "var(--space-item-card-vertical-default)";
|
|
593
|
+
export const spaceItemCardHorizontalDefault = "var(--space-item-card-horizontal-default)";
|
|
594
|
+
export const colorTextLinkButtonUnderlineHover = "var(--color-text-link-button-underline-hover)";
|
|
595
|
+
export const fontLinkButtonWeight = "var(--font-link-button-weight)";
|
|
596
|
+
export const fontLinkButtonLetterSpacing = "var(--font-link-button-letter-spacing)";
|
|
597
|
+
export const colorTextLinkButtonUnderline = "var(--color-text-link-button-underline)";
|
|
598
|
+
export const colorTextLinkButtonNormalDefault = "var(--color-text-link-button-normal-default)";
|
|
599
|
+
export const colorTextLinkButtonNormalHover = "var(--color-text-link-button-normal-hover)";
|
|
600
|
+
export const colorTextLinkButtonNormalActive = "var(--color-text-link-button-normal-active)";
|
|
601
|
+
export const colorTextLinkInvertedHover = "var(--color-text-link-inverted-hover)";
|
|
602
|
+
export const motionDurationFast = "var(--motion-duration-fast)";
|
|
603
|
+
export const motionDurationRefreshOnlyFast = "var(--motion-duration-refresh-only-fast)";
|
|
604
|
+
export const motionDurationExtraSlow = "var(--motion-duration-extra-slow)";
|
|
605
|
+
export const colorBackgroundModalOverlay = "var(--color-background-modal-overlay)";
|
|
606
|
+
export const shadowModal = "var(--shadow-modal)";
|
|
607
|
+
export const spaceModalContentBottom = "var(--space-modal-content-bottom)";
|
|
608
|
+
export const spaceModalHorizontal = "var(--space-modal-horizontal)";
|
|
609
|
+
export const colorTextPaginationPageNumberDefault = "var(--color-text-pagination-page-number-default)";
|
|
610
|
+
export const colorTextPaginationPageNumberActiveDisabled = "var(--color-text-pagination-page-number-active-disabled)";
|
|
611
|
+
export const colorShadowDefault = "var(--color-shadow-default)";
|
|
612
|
+
export const shadowPopover = "var(--shadow-popover)";
|
|
613
|
+
export const motionDurationModerate = "var(--motion-duration-moderate)";
|
|
614
|
+
export const colorTextDropdownGroupLabel = "var(--color-text-dropdown-group-label)";
|
|
615
|
+
export const colorTextColumnHeader = "var(--color-text-column-header)";
|
|
616
|
+
export const spaceSegmentedControlFocusOutlineGutter = "var(--space-segmented-control-focus-outline-gutter)";
|
|
617
|
+
export const colorBackgroundSegmentWrapper = "var(--color-background-segment-wrapper)";
|
|
618
|
+
export const spacePanelNavLeft = "var(--space-panel-nav-left)";
|
|
619
|
+
export const spaceScaled2xL = "var(--space-scaled-2x-l)";
|
|
620
|
+
export const spaceScaled2xM = "var(--space-scaled-2x-m)";
|
|
621
|
+
export const spaceScaled2xXl = "var(--space-scaled-2x-xl)";
|
|
622
|
+
export const colorBackgroundSliderRangeErrorDefault = "var(--color-background-slider-range-error-default)";
|
|
623
|
+
export const colorBackgroundSliderRangeWarningDefault = "var(--color-background-slider-range-warning-default)";
|
|
624
|
+
export const colorBackgroundSliderRangeErrorActive = "var(--color-background-slider-range-error-active)";
|
|
625
|
+
export const colorBackgroundSliderRangeWarningActive = "var(--color-background-slider-range-warning-active)";
|
|
626
|
+
export const colorBackgroundSliderHandleRing = "var(--color-background-slider-handle-ring)";
|
|
627
|
+
export const colorBackgroundSliderHandleErrorDefault = "var(--color-background-slider-handle-error-default)";
|
|
628
|
+
export const colorBackgroundSliderHandleErrorActive = "var(--color-background-slider-handle-error-active)";
|
|
629
|
+
export const colorBackgroundSliderHandleWarningDefault = "var(--color-background-slider-handle-warning-default)";
|
|
630
|
+
export const colorBackgroundSliderHandleWarningActive = "var(--color-background-slider-handle-warning-active)";
|
|
631
|
+
export const colorBackgroundLayoutPanelContent = "var(--color-background-layout-panel-content)";
|
|
632
|
+
export const colorBackgroundLayoutPanelHover = "var(--color-background-layout-panel-hover)";
|
|
633
|
+
export const borderPanelTopWidth = "var(--border-panel-top-width)";
|
|
634
|
+
export const colorBorderDividerPanelBottom = "var(--color-border-divider-panel-bottom)";
|
|
635
|
+
export const shadowSplitBottom = "var(--shadow-split-bottom)";
|
|
636
|
+
export const shadowSplitSide = "var(--shadow-split-side)";
|
|
637
|
+
export const borderPanelHeaderWidth = "var(--border-panel-header-width)";
|
|
638
|
+
export const spacePanelSplitTop = "var(--space-panel-split-top)";
|
|
639
|
+
export const spaceLayoutToggleDiameter = "var(--space-layout-toggle-diameter)";
|
|
640
|
+
export const spaceLayoutTogglePadding = "var(--space-layout-toggle-padding)";
|
|
641
|
+
export const spacePanelSplitBottom = "var(--space-panel-split-bottom)";
|
|
642
|
+
export const sizeVerticalPanelIconOffset = "var(--size-vertical-panel-icon-offset)";
|
|
643
|
+
export const spaceTableHeaderToolsBottom = "var(--space-table-header-tools-bottom)";
|
|
644
|
+
export const spaceTableHorizontal = "var(--space-table-horizontal)";
|
|
645
|
+
export const spaceTableContentBottom = "var(--space-table-content-bottom)";
|
|
646
|
+
export const sizeTableSelectionHorizontal = "var(--size-table-selection-horizontal)";
|
|
647
|
+
export const colorBackgroundTableHeader = "var(--color-background-table-header)";
|
|
648
|
+
export const spaceTableHeaderHorizontal = "var(--space-table-header-horizontal)";
|
|
649
|
+
export const spaceTableEmbeddedHeaderTop = "var(--space-table-embedded-header-top)";
|
|
650
|
+
export const spaceTableFooterHorizontal = "var(--space-table-footer-horizontal)";
|
|
651
|
+
export const colorBorderTabsShadow = "var(--color-border-tabs-shadow)";
|
|
652
|
+
export const colorBorderTabsUnderline = "var(--color-border-tabs-underline)";
|
|
653
|
+
export const fontTabsSize = "var(--font-tabs-size)";
|
|
654
|
+
export const fontTabsLineHeight = "var(--font-tabs-line-height)";
|
|
655
|
+
export const spaceTabsFocusOutlineGutter = "var(--space-tabs-focus-outline-gutter)";
|
|
656
|
+
export const fontTabsDisabledWeight = "var(--font-tabs-disabled-weight)";
|
|
657
|
+
export const spaceTabsContentTop = "var(--space-tabs-content-top)";
|
|
658
|
+
export const motionDurationTransitionQuick = "var(--motion-duration-transition-quick)";
|
|
659
|
+
export const motionEasingTransitionQuick = "var(--motion-easing-transition-quick)";
|
|
660
|
+
export const colorBorderTilesDisabled = "var(--color-border-tiles-disabled)";
|
|
661
|
+
export const colorBackgroundTilesDisabled = "var(--color-background-tiles-disabled)";
|
|
662
|
+
export const spaceTileGutter = "var(--space-tile-gutter)";
|
|
663
|
+
export const colorBackgroundToggleDefault = "var(--color-background-toggle-default)";
|
|
664
|
+
export const motionEasingEaseOutQuart = "var(--motion-easing-ease-out-quart)";
|
|
665
|
+
export const colorTextDisabled = "var(--color-text-disabled)";
|
|
666
|
+
export const colorBorderLayout = "var(--color-border-layout)";
|
|
667
|
+
export const spaceScaled2xXxxl = "var(--space-scaled-2x-xxxl)";
|
|
668
|
+
export const colorNeutral600 = "var(--color-neutral-600)";
|
|
669
|
+
export const colorNeutral450 = "var(--color-neutral-450)";
|
|
670
|
+
export const colorNeutral200 = "var(--color-neutral-200)";
|
|
671
|
+
export const colorNeutral700 = "var(--color-neutral-700)";
|
|
672
|
+
export const colorNeutral100 = "var(--color-neutral-100)";
|
|
673
|
+
export const colorNeutral850 = "var(--color-neutral-850)";
|
|
674
|
+
export const colorNeutral300 = "var(--color-neutral-300)";
|
|
675
|
+
export const colorNeutral800 = "var(--color-neutral-800)";
|
|
676
|
+
export const colorNeutral950 = "var(--color-neutral-950)";
|
|
677
|
+
export const colorNeutral500 = "var(--color-neutral-500)";
|
|
678
|
+
export const colorWhite = "var(--color-white)";
|
|
679
|
+
export const colorNeutral250 = "var(--color-neutral-250)";
|
|
680
|
+
export const colorNeutral350 = "var(--color-neutral-350)";
|
|
681
|
+
export const colorNeutral650 = "var(--color-neutral-650)";
|
|
682
|
+
export const colorNeutral750 = "var(--color-neutral-750)";
|
|
683
|
+
export const colorNeutral400 = "var(--color-neutral-400)";
|
|
684
|
+
export const colorError600 = "var(--color-error-600)";
|
|
685
|
+
export const colorError400 = "var(--color-error-400)";
|
|
686
|
+
export const borderWidthCardHighlighted = "var(--border-width-card-highlighted)";
|
|
687
|
+
export const colorBorderCardHighlighted = "var(--color-border-card-highlighted)";
|
|
688
|
+
export const colorGreyOpaque70 = "var(--color-grey-opaque-70)";
|
|
689
|
+
export const shadowDropdown = "var(--shadow-dropdown)";
|
|
690
|
+
export const colorGreyTransparentHeavy = "var(--color-grey-transparent-heavy)";
|
|
691
|
+
export const colorGreyTransparent = "var(--color-grey-transparent)";
|
package/package.json
CHANGED
package/tokens.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* AUTO-GENERATED from @cloudscape-design/design-tokens — DO NOT EDIT
|
|
2
2
|
* License: see /NOTICE
|
|
3
3
|
*/
|
|
4
|
-
/*
|
|
4
|
+
/* 689 tokens, 354 dark overrides */
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
7
|
--color-charts-red-300: #ea7158;
|
|
@@ -441,6 +441,258 @@
|
|
|
441
441
|
--space-static-xxxl: 40px;
|
|
442
442
|
--shadow-card: none;
|
|
443
443
|
--shadow-container-active: 0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a;
|
|
444
|
+
--motion-duration-show-paced: var(--motion-duration-slow);
|
|
445
|
+
--motion-easing-show-paced: ease-out;
|
|
446
|
+
--space-alert-horizontal: var(--space-flashbar-horizontal);
|
|
447
|
+
--space-alert-action-left: var(--space-s);
|
|
448
|
+
--space-button-focus-outline-gutter: 4px;
|
|
449
|
+
--space-xxs: 4px;
|
|
450
|
+
--space-alert-message-right: var(--space-xxs);
|
|
451
|
+
--size-icon-medium: 20px;
|
|
452
|
+
--space-xs: 8px;
|
|
453
|
+
--size-icon-big: 32px;
|
|
454
|
+
--size-icon-normal: 16px;
|
|
455
|
+
--space-s: 12px;
|
|
456
|
+
--motion-duration-slow: 180ms;
|
|
457
|
+
--border-link-focus-ring-outline: 0;
|
|
458
|
+
--border-link-focus-ring-shadow-spread: 2px;
|
|
459
|
+
--font-wayfinding-link-active-weight: 700;
|
|
460
|
+
--font-smoothing-webkit: antialiased;
|
|
461
|
+
--font-smoothing-moz-osx: grayscale;
|
|
462
|
+
--letter-spacing-body-s: 0.005em;
|
|
463
|
+
--space-content-header-padding-bottom: var(--space-scaled-m);
|
|
464
|
+
--space-layout-content-bottom: var(--space-scaled-2x-xxxl);
|
|
465
|
+
--space-dark-header-overlap-distance: 36px;
|
|
466
|
+
--motion-duration-transition-show-paced: var(--motion-duration-slow);
|
|
467
|
+
--motion-easing-transition-show-paced: ease-out;
|
|
468
|
+
--space-grid-gutter: var(--space-l);
|
|
469
|
+
--border-divider-section-width: 1px;
|
|
470
|
+
--motion-duration-refresh-only-medium: 165ms;
|
|
471
|
+
--color-text-small: var(--color-neutral-600);
|
|
472
|
+
--font-display-label-weight: 700;
|
|
473
|
+
--space-key-value-gap: 0px;
|
|
474
|
+
--font-box-value-large-weight: 700;
|
|
475
|
+
--color-background-inline-code: rgba(0, 0, 0, 0.1);
|
|
476
|
+
--font-weight-heavy: 700;
|
|
477
|
+
--space-scaled-none: var(--space-none);
|
|
478
|
+
--space-none: 0px;
|
|
479
|
+
--space-xxxs: 2px;
|
|
480
|
+
--space-m: 16px;
|
|
481
|
+
--space-l: 20px;
|
|
482
|
+
--space-xl: 24px;
|
|
483
|
+
--space-xxl: 32px;
|
|
484
|
+
--space-xxxl: 40px;
|
|
485
|
+
--font-button-letter-spacing: 0.005em;
|
|
486
|
+
--space-button-horizontal: var(--space-scaled-l);
|
|
487
|
+
--color-text-button-inline-icon-default: var(--color-text-link-default);
|
|
488
|
+
--color-text-button-inline-icon-hover: var(--color-text-link-hover);
|
|
489
|
+
--color-text-button-inline-icon-disabled: var(--color-text-interactive-disabled);
|
|
490
|
+
--space-button-icon-focus-outline-gutter-vertical: 0px;
|
|
491
|
+
--space-button-inline-icon-focus-outline-gutter: 0px;
|
|
492
|
+
--space-button-icon-only-horizontal: 6px;
|
|
493
|
+
--space-button-modal-dismiss-vertical: var(--space-scaled-xxxs);
|
|
494
|
+
--motion-easing-show-quick: ease-out;
|
|
495
|
+
--color-border-dropdown-group: var(--color-border-dropdown-item-default);
|
|
496
|
+
--motion-duration-show-quick: var(--motion-duration-moderate);
|
|
497
|
+
--size-calendar-grid-width: 238px;
|
|
498
|
+
--space-calendar-grid-gutter: 6px;
|
|
499
|
+
--color-text-calendar-month: var(--color-neutral-600);
|
|
500
|
+
--color-border-calendar-grid: transparent;
|
|
501
|
+
--color-text-dropdown-item-secondary: var(--color-text-form-secondary);
|
|
502
|
+
--color-text-calendar-date-hover: var(--color-text-dropdown-item-default);
|
|
503
|
+
--border-item-width: 2px;
|
|
504
|
+
--color-background-calendar-current-date: var(--color-neutral-200);
|
|
505
|
+
--space-calendar-grid-focus-outline-gutter: -5px;
|
|
506
|
+
--color-border-calendar-grid-selected-focus-ring: var(--color-neutral-100);
|
|
507
|
+
--space-container-header-bottom: var(--space-scaled-xs);
|
|
508
|
+
--space-table-header-tools-full-page-bottom: 4px;
|
|
509
|
+
--size-control: 16px;
|
|
510
|
+
--border-radius-code-editor: var(--border-radius-input);
|
|
511
|
+
--color-border-code-editor-ace-active-line-light-theme: var(--color-neutral-300);
|
|
512
|
+
--color-border-code-editor-ace-active-line-dark-theme: var(--color-neutral-600);
|
|
513
|
+
--color-background-code-editor-gutter-default: var(--color-neutral-200);
|
|
514
|
+
--color-text-code-editor-gutter-default: var(--color-neutral-950);
|
|
515
|
+
--color-background-code-editor-gutter-active-line-default: var(--color-neutral-600);
|
|
516
|
+
--color-text-code-editor-gutter-active-line: var(--color-white);
|
|
517
|
+
--color-background-code-editor-gutter-active-line-error: var(--color-text-status-error);
|
|
518
|
+
--color-border-code-editor-default: var(--color-neutral-300);
|
|
519
|
+
--color-background-code-editor-status-bar: var(--color-neutral-200);
|
|
520
|
+
--color-transparent: transparent;
|
|
521
|
+
--color-background-code-editor-pane-item-hover: var(--color-neutral-250);
|
|
522
|
+
--color-border-code-editor-pane-item-hover: var(--color-border-dropdown-item-hover);
|
|
523
|
+
--color-text-code-editor-tab-button-error: var(--color-white);
|
|
524
|
+
--border-active-width: 4px;
|
|
525
|
+
--motion-easing-refresh-only-c: cubic-bezier(0.84, 0, 0.16, 1);
|
|
526
|
+
--color-text-code-editor-status-bar-disabled: var(--color-neutral-500);
|
|
527
|
+
--space-code-editor-status-focus-outline-gutter: -7px;
|
|
528
|
+
--border-code-editor-status-divider-width: var(--border-divider-section-width);
|
|
529
|
+
--color-border-tabs-divider: var(--color-neutral-350);
|
|
530
|
+
--color-background-code-editor-loading: var(--color-neutral-100);
|
|
531
|
+
--color-text-form-label: var(--color-text-form-default);
|
|
532
|
+
--border-divider-list-width: 1px;
|
|
533
|
+
--border-container-top-width: 0px;
|
|
534
|
+
--shadow-container: 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12);
|
|
535
|
+
--shadow-sticky-embedded: 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.10);
|
|
536
|
+
--border-container-sticky-width: 0px;
|
|
537
|
+
--color-border-container-divider: transparent;
|
|
538
|
+
--space-container-header-top: var(--space-s);
|
|
539
|
+
--shadow-sticky: 0px 4px 8px 1px rgba(0, 7, 22, 0.10);
|
|
540
|
+
--space-container-content-top: var(--space-xxs);
|
|
541
|
+
--space-layout-content-horizontal: var(--space-scaled-2x-xl);
|
|
542
|
+
--color-border-dropdown-item-default: var(--color-border-divider-default);
|
|
543
|
+
--font-panel-header-size: var(--font-size-heading-m);
|
|
544
|
+
--font-panel-header-line-height: var(--line-height-heading-m);
|
|
545
|
+
--space-panel-header-vertical: var(--space-scaled-l);
|
|
546
|
+
--space-panel-side-left: 28px;
|
|
547
|
+
--color-border-panel-header: var(--color-border-divider-default);
|
|
548
|
+
--space-panel-content-top: var(--space-scaled-l);
|
|
549
|
+
--space-panel-side-right: var(--space-scaled-xl);
|
|
550
|
+
--space-panel-content-bottom: var(--space-scaled-xxxl);
|
|
551
|
+
--color-text-expandable-section-default: var(--color-neutral-950);
|
|
552
|
+
--font-expandable-heading-size: var(--font-size-heading-s);
|
|
553
|
+
--space-expandable-section-icon-offset-top: var(--space-scaled-2x-xxs);
|
|
554
|
+
--color-text-expandable-section-navigation-icon-default: var(--color-text-interactive-default);
|
|
555
|
+
--color-text-expandable-section-hover: var(--color-text-accent);
|
|
556
|
+
--border-control-focus-ring-shadow-spread: 1px;
|
|
557
|
+
--border-invalid-width: 8px;
|
|
558
|
+
--color-border-input-disabled: var(--color-background-input-disabled);
|
|
559
|
+
--color-border-control-disabled: var(--color-background-control-disabled);
|
|
560
|
+
--shadow-flash-collapsed: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
|
561
|
+
--color-background-notification-stack-bar: var(--color-neutral-750);
|
|
562
|
+
--color-border-notification-stack-bar: var(--color-neutral-750);
|
|
563
|
+
--shadow-panel-toggle: 0px 6px 12px 1px rgba(0, 7, 22, 0.12);
|
|
564
|
+
--color-text-notification-stack-bar: var(--color-white);
|
|
565
|
+
--color-background-notification-stack-bar-hover: var(--color-neutral-650);
|
|
566
|
+
--color-background-notification-stack-bar-active: var(--color-neutral-750);
|
|
567
|
+
--space-flashbar-vertical: var(--space-scaled-xs);
|
|
568
|
+
--space-flashbar-horizontal: var(--space-m);
|
|
569
|
+
--shadow-flash-sticky: 0px 4px 8px rgba(0, 7, 22, 0.10);
|
|
570
|
+
--space-flashbar-action-left: var(--space-s);
|
|
571
|
+
--space-flashbar-dismiss-right: 0px;
|
|
572
|
+
--color-text-notification-yellow: var(--color-neutral-950);
|
|
573
|
+
--motion-easing-refresh-only-a: cubic-bezier(0, 0, 0, 1);
|
|
574
|
+
--space-scaled-2x-xxs: var(--space-xxs);
|
|
575
|
+
--size-vertical-input: 32px;
|
|
576
|
+
--font-header-h2-description-size: var(--font-size-body-m);
|
|
577
|
+
--font-header-h2-description-line-height: var(--line-height-body-m);
|
|
578
|
+
--space-panel-divider-margin-horizontal: var(--space-xs);
|
|
579
|
+
--size-icon-large: 48px;
|
|
580
|
+
--color-text-inverted: var(--color-white);
|
|
581
|
+
--color-text-icon-subtle: var(--color-neutral-600);
|
|
582
|
+
--color-background-badge-icon: var(--color-error-600);
|
|
583
|
+
--color-text-input-placeholder-disabled: var(--color-text-input-disabled);
|
|
584
|
+
--border-control-invalid-focus-ring-shadow-spread: 2px;
|
|
585
|
+
--space-field-icon-offset: 36px;
|
|
586
|
+
--color-background-item-card: var(--color-background-card);
|
|
587
|
+
--shadow-item-card: var(--shadow-card);
|
|
588
|
+
--border-width-item-card: var(--border-width-card);
|
|
589
|
+
--color-border-item-card: var(--color-border-card);
|
|
590
|
+
--border-width-item-card-highlighted: var(--border-width-card-highlighted);
|
|
591
|
+
--color-border-item-card-highlighted: var(--color-border-card-highlighted);
|
|
592
|
+
--border-radius-item-card-embedded: var(--border-radius-card-embedded);
|
|
593
|
+
--space-item-card-vertical-embedded: var(--space-card-vertical-embedded);
|
|
594
|
+
--space-item-card-horizontal-embedded: var(--space-card-horizontal-embedded);
|
|
595
|
+
--border-radius-item-card-default: var(--border-radius-card-default);
|
|
596
|
+
--space-item-card-vertical-default: var(--space-card-vertical-default);
|
|
597
|
+
--space-item-card-horizontal-default: var(--space-card-horizontal-default);
|
|
598
|
+
--color-text-link-button-underline-hover: transparent;
|
|
599
|
+
--font-link-button-weight: var(--font-weight-button);
|
|
600
|
+
--font-link-button-letter-spacing: var(--font-button-letter-spacing);
|
|
601
|
+
--color-text-link-button-underline: transparent;
|
|
602
|
+
--color-text-link-button-normal-default: var(--color-text-button-normal-default);
|
|
603
|
+
--color-text-link-button-normal-hover: var(--color-text-button-normal-hover);
|
|
604
|
+
--color-text-link-button-normal-active: var(--color-text-button-normal-active);
|
|
605
|
+
--color-text-link-inverted-hover: var(--color-white);
|
|
606
|
+
--motion-duration-fast: 90ms;
|
|
607
|
+
--motion-duration-refresh-only-fast: 115ms;
|
|
608
|
+
--motion-duration-extra-slow: 270ms;
|
|
609
|
+
--color-background-modal-overlay: var(--color-grey-opaque-70);
|
|
610
|
+
--shadow-modal: var(--shadow-dropdown);
|
|
611
|
+
--space-modal-content-bottom: var(--space-scaled-2x-m);
|
|
612
|
+
--space-modal-horizontal: var(--space-container-horizontal);
|
|
613
|
+
--color-text-pagination-page-number-default: var(--color-text-interactive-default);
|
|
614
|
+
--color-text-pagination-page-number-active-disabled: var(--color-text-interactive-disabled);
|
|
615
|
+
--color-shadow-default: var(--color-grey-transparent-heavy);
|
|
616
|
+
--shadow-popover: var(--shadow-dropdown);
|
|
617
|
+
--motion-duration-moderate: 135ms;
|
|
618
|
+
--color-text-dropdown-group-label: var(--color-text-group-label);
|
|
619
|
+
--color-text-column-header: var(--color-neutral-650);
|
|
620
|
+
--space-segmented-control-focus-outline-gutter: 6px;
|
|
621
|
+
--color-background-segment-wrapper: var(--color-background-container-content);
|
|
622
|
+
--space-panel-nav-left: 28px;
|
|
623
|
+
--space-scaled-2x-l: var(--space-l);
|
|
624
|
+
--space-scaled-2x-m: var(--space-m);
|
|
625
|
+
--space-scaled-2x-xl: var(--space-xl);
|
|
626
|
+
--color-background-slider-range-error-default: var(--color-text-status-error);
|
|
627
|
+
--color-background-slider-range-warning-default: var(--color-text-status-warning);
|
|
628
|
+
--color-background-slider-range-error-active: var(--color-text-status-error);
|
|
629
|
+
--color-background-slider-range-warning-active: var(--color-text-status-warning);
|
|
630
|
+
--color-background-slider-handle-ring: var(--color-white);
|
|
631
|
+
--color-background-slider-handle-error-default: var(--color-text-status-error);
|
|
632
|
+
--color-background-slider-handle-error-active: var(--color-text-status-error);
|
|
633
|
+
--color-background-slider-handle-warning-default: var(--color-text-status-warning);
|
|
634
|
+
--color-background-slider-handle-warning-active: var(--color-text-status-warning);
|
|
635
|
+
--color-background-layout-panel-content: var(--color-background-container-content);
|
|
636
|
+
--color-background-layout-panel-hover: var(--color-neutral-250);
|
|
637
|
+
--border-panel-top-width: 1px;
|
|
638
|
+
--color-border-divider-panel-bottom: var(--color-border-divider-default);
|
|
639
|
+
--shadow-split-bottom: 0px -36px 36px -36px rgba(0, 7, 22, 0.10);
|
|
640
|
+
--shadow-split-side: -1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.10);
|
|
641
|
+
--border-panel-header-width: 1px;
|
|
642
|
+
--space-panel-split-top: var(--space-scaled-l);
|
|
643
|
+
--space-layout-toggle-diameter: 36px;
|
|
644
|
+
--space-layout-toggle-padding: var(--space-static-s);
|
|
645
|
+
--space-panel-split-bottom: var(--space-scaled-l);
|
|
646
|
+
--size-vertical-panel-icon-offset: 15px;
|
|
647
|
+
--space-table-header-tools-bottom: 0px;
|
|
648
|
+
--space-table-horizontal: var(--space-container-horizontal);
|
|
649
|
+
--space-table-content-bottom: var(--space-xxs);
|
|
650
|
+
--size-table-selection-horizontal: 40px;
|
|
651
|
+
--color-background-table-header: var(--color-background-container-header);
|
|
652
|
+
--space-table-header-horizontal: 0px;
|
|
653
|
+
--space-table-embedded-header-top: 0px;
|
|
654
|
+
--space-table-footer-horizontal: var(--space-table-header-horizontal);
|
|
655
|
+
--color-border-tabs-shadow: var(--color-grey-transparent);
|
|
656
|
+
--color-border-tabs-underline: var(--color-text-accent);
|
|
657
|
+
--font-tabs-size: var(--font-size-heading-s);
|
|
658
|
+
--font-tabs-line-height: var(--line-height-heading-s);
|
|
659
|
+
--space-tabs-focus-outline-gutter: -8px;
|
|
660
|
+
--font-tabs-disabled-weight: var(--font-wayfinding-link-active-weight);
|
|
661
|
+
--space-tabs-content-top: var(--space-scaled-s);
|
|
662
|
+
--motion-duration-transition-quick: var(--motion-duration-fast);
|
|
663
|
+
--motion-easing-transition-quick: linear;
|
|
664
|
+
--color-border-tiles-disabled: var(--color-background-tiles-disabled);
|
|
665
|
+
--color-background-tiles-disabled: var(--color-neutral-250);
|
|
666
|
+
--space-tile-gutter: var(--space-xl);
|
|
667
|
+
--color-background-toggle-default: var(--color-neutral-650);
|
|
668
|
+
--motion-easing-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
669
|
+
--color-text-disabled: var(--color-neutral-400);
|
|
670
|
+
--color-border-layout: var(--color-neutral-350);
|
|
671
|
+
--space-scaled-2x-xxxl: var(--space-xxxl);
|
|
672
|
+
--color-neutral-600: #656871;
|
|
673
|
+
--color-neutral-450: #a4a4ad;
|
|
674
|
+
--color-neutral-200: #f3f3f7;
|
|
675
|
+
--color-neutral-700: #333843;
|
|
676
|
+
--color-neutral-100: #f9f9fa;
|
|
677
|
+
--color-neutral-850: #161d26;
|
|
678
|
+
--color-neutral-300: #dedee3;
|
|
679
|
+
--color-neutral-800: #1b232d;
|
|
680
|
+
--color-neutral-950: #0f141a;
|
|
681
|
+
--color-neutral-500: #8c8c94;
|
|
682
|
+
--color-white: #ffffff;
|
|
683
|
+
--color-neutral-250: #ebebf0;
|
|
684
|
+
--color-neutral-350: #c6c6cd;
|
|
685
|
+
--color-neutral-650: #424650;
|
|
686
|
+
--color-neutral-750: #232b37;
|
|
687
|
+
--color-neutral-400: #b4b4bb;
|
|
688
|
+
--color-error-600: #db0000;
|
|
689
|
+
--color-error-400: #ff7a7a;
|
|
690
|
+
--border-width-card-highlighted: var(--border-item-width);
|
|
691
|
+
--color-border-card-highlighted: var(--color-border-item-selected);
|
|
692
|
+
--color-grey-opaque-70: rgba(35, 43, 55, 0.7);
|
|
693
|
+
--shadow-dropdown: 0px 4px 20px 1px rgba(0, 7, 22, 0.10);
|
|
694
|
+
--color-grey-transparent-heavy: rgba(15, 20, 26, 0.12);
|
|
695
|
+
--color-grey-transparent: rgba(15, 20, 26, 0.12);
|
|
444
696
|
}
|
|
445
697
|
|
|
446
698
|
.awsui-dark-mode {
|
|
@@ -740,4 +992,62 @@
|
|
|
740
992
|
--color-dropzone-border-hover: #75cfff;
|
|
741
993
|
--color-tree-view-connector-line: #dedee3;
|
|
742
994
|
--shadow-container-active: 0px 1px 1px 1px #192534, 0px 6px 36px #00040c;
|
|
995
|
+
--motion-duration-slow: 0ms;
|
|
996
|
+
--space-dark-header-overlap-distance: 32px;
|
|
997
|
+
--space-grid-gutter: var(--space-m);
|
|
998
|
+
--motion-duration-refresh-only-medium: 0ms;
|
|
999
|
+
--color-text-small: var(--color-neutral-450);
|
|
1000
|
+
--color-background-inline-code: rgba(255, 255, 255, 0.1);
|
|
1001
|
+
--space-button-icon-only-horizontal: var(--space-xxs);
|
|
1002
|
+
--color-text-calendar-month: var(--color-neutral-450);
|
|
1003
|
+
--color-background-calendar-current-date: var(--color-neutral-700);
|
|
1004
|
+
--color-border-calendar-grid-selected-focus-ring: var(--color-neutral-850);
|
|
1005
|
+
--color-background-code-editor-gutter-default: var(--color-neutral-800);
|
|
1006
|
+
--color-text-code-editor-gutter-default: var(--color-neutral-300);
|
|
1007
|
+
--color-background-code-editor-gutter-active-line-default: var(--color-neutral-500);
|
|
1008
|
+
--color-text-code-editor-gutter-active-line: var(--color-neutral-950);
|
|
1009
|
+
--color-border-code-editor-default: var(--color-neutral-600);
|
|
1010
|
+
--color-background-code-editor-status-bar: var(--color-neutral-800);
|
|
1011
|
+
--color-background-code-editor-pane-item-hover: var(--color-neutral-700);
|
|
1012
|
+
--color-text-code-editor-tab-button-error: var(--color-neutral-950);
|
|
1013
|
+
--color-text-code-editor-status-bar-disabled: var(--color-neutral-600);
|
|
1014
|
+
--color-border-tabs-divider: var(--color-neutral-650);
|
|
1015
|
+
--color-background-code-editor-loading: var(--color-neutral-800);
|
|
1016
|
+
--shadow-container: 0px 1px 8px 2px rgba(0, 7, 22, 0.6);
|
|
1017
|
+
--shadow-sticky-embedded: 0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
|
|
1018
|
+
--shadow-sticky: 0px 4px 8px 1px rgba(0, 7, 22, 0.5);
|
|
1019
|
+
--color-text-expandable-section-default: var(--color-neutral-300);
|
|
1020
|
+
--font-expandable-heading-size: 14px;
|
|
1021
|
+
--shadow-panel-toggle: 0px 6px 12px 1px rgba(0, 7, 22, 1);
|
|
1022
|
+
--shadow-flash-sticky: 0px 4px 8px rgba(0, 7, 22, 0.5);
|
|
1023
|
+
--space-scaled-2x-xxs: var(--space-none);
|
|
1024
|
+
--size-vertical-input: 28px;
|
|
1025
|
+
--color-text-inverted: var(--color-neutral-950);
|
|
1026
|
+
--color-text-icon-subtle: var(--color-neutral-400);
|
|
1027
|
+
--color-background-badge-icon: var(--color-error-400);
|
|
1028
|
+
--color-text-link-inverted-hover: var(--color-text-notification-yellow);
|
|
1029
|
+
--motion-duration-fast: 0ms;
|
|
1030
|
+
--motion-duration-refresh-only-fast: 0ms;
|
|
1031
|
+
--motion-duration-extra-slow: 0ms;
|
|
1032
|
+
--color-text-pagination-page-number-default: var(--color-neutral-400);
|
|
1033
|
+
--motion-duration-moderate: 0ms;
|
|
1034
|
+
--color-text-column-header: var(--color-neutral-400);
|
|
1035
|
+
--space-scaled-2x-l: var(--space-s);
|
|
1036
|
+
--space-scaled-2x-m: var(--space-xs);
|
|
1037
|
+
--space-scaled-2x-xl: var(--space-m);
|
|
1038
|
+
--color-background-slider-handle-ring: var(--color-neutral-850);
|
|
1039
|
+
--color-background-layout-panel-hover: var(--color-neutral-700);
|
|
1040
|
+
--shadow-split-bottom: 0px -36px 36px -36px rgba(0, 7, 22, 1);
|
|
1041
|
+
--shadow-split-side: -1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
|
|
1042
|
+
--size-vertical-panel-icon-offset: 13px;
|
|
1043
|
+
--color-background-tiles-disabled: var(--color-neutral-800);
|
|
1044
|
+
--space-tile-gutter: var(--space-m);
|
|
1045
|
+
--color-background-toggle-default: var(--color-neutral-500);
|
|
1046
|
+
--color-text-disabled: var(--color-neutral-600);
|
|
1047
|
+
--color-border-layout: var(--color-neutral-650);
|
|
1048
|
+
--space-scaled-2x-xxxl: var(--space-xl);
|
|
1049
|
+
--color-grey-opaque-70: rgba(15, 20, 26, 0.7);
|
|
1050
|
+
--shadow-dropdown: 0px 4px 20px 1px rgba(0, 4, 12, 1);
|
|
1051
|
+
--color-grey-transparent-heavy: rgba(15, 20, 26, 1);
|
|
1052
|
+
--color-grey-transparent: rgba(15, 20, 26, 1);
|
|
743
1053
|
}
|