/* * Cloudscape Design System design tokens: visual refresh, LIGHT mode. * GENERATED by scripts/vendor_cloudscape.py - do not edit by hand. * Sources: @cloudscape-design/design-tokens 3.0.114 * (index-visual-refresh.json), * @cloudscape-design/components 3.0.1400 * (internal/base-theme). * Names are the token names (--); Cloudscape's hashed suffixes are dropped. * Colours use the light value, spacing the comfortable density, motion the normal * value. Chart tokens are left out. Internal variables are resolved to plain values. * Licence: see LICENSE / NOTICE. */ /* 1. Public tokens */ :root { --color-background-notification-severity-critical: #870303; --color-background-notification-severity-high: #ce3311; --color-background-notification-severity-medium: #f89256; --color-background-notification-severity-low: #f2cd54; --color-background-notification-severity-neutral: #656871; --color-text-notification-severity-critical: #f9f9fa; --color-text-notification-severity-high: #f9f9fa; --color-text-notification-severity-medium: #0f141a; --color-text-notification-severity-low: #0f141a; --color-text-notification-severity-neutral: #f9f9fa; --color-border-badge-severity-critical: transparent; --color-border-badge-severity-high: transparent; --color-border-badge-severity-medium: transparent; --color-border-badge-severity-low: transparent; --color-border-badge-severity-neutral: transparent; --color-text-badge-severity-critical: #f9f9fa; --color-text-badge-severity-high: #f9f9fa; --color-text-badge-severity-medium: #0f141a; --color-text-badge-severity-low: #0f141a; --color-text-badge-severity-neutral: #f9f9fa; --color-background-badge-icon: #db0000; --color-background-button-link-active: #d1f1ff; --color-background-button-link-default: transparent; --color-background-button-link-disabled: transparent; --color-background-button-link-hover: #f0fbff; --color-background-button-normal-active: #d1f1ff; --color-background-button-normal-default: #ffffff; --color-background-button-normal-disabled: #ffffff; --color-background-button-normal-hover: #f0fbff; --color-background-toggle-button-normal-pressed: #d1f1ff; --color-background-toggle-button-normal-default: #ffffff; --color-background-toggle-button-normal-hover: #f0fbff; --color-background-button-primary-active: #002b66; --color-background-button-primary-default: #006ce0; --color-background-button-primary-disabled: #ebebf0; --color-background-button-primary-hover: #002b66; --color-background-cell-shaded: #f6f6f9; --color-background-card: #ffffff; --color-background-container-content: #ffffff; --color-background-container-header: #ffffff; --color-background-control-checked: #006ce0; --color-background-control-default: #ffffff; --color-background-control-disabled: #dedee3; --color-background-dropdown-item-default: #ffffff; --color-background-dropdown-item-filter-match: #f0fbff; --color-background-dropdown-item-hover: #f3f3f7; --color-background-dropdown-item-selected: #f0fbff; --color-background-home-header: #0f141a; --color-background-input-default: #ffffff; --color-background-input-disabled: #ebebf0; --color-background-item-selected: #f0fbff; --color-background-side-navigation-item-active: transparent; --color-background-layout-main: #ffffff; --color-background-backdrop: rgba(35, 43, 55, 0.7); --color-background-layout-panel: #ffffff; --color-background-layout-panel-content: #ffffff; --color-background-layout-toolbar: #ffffff; --color-background-layout-toggle-active: #424650; --color-background-layout-toggle-default: #424650; --color-background-layout-toggle-hover: #656871; --color-background-layout-toggle-selected-active: #006ce0; --color-background-layout-toggle-selected-default: #006ce0; --color-background-layout-toggle-selected-hover: #004a9e; --color-background-notification-blue: #006ce0; --color-background-notification-green: #00802f; --color-background-notification-grey: #424650; --color-background-notification-red: #db0000; --color-background-notification-yellow: #ffe347; --color-background-flashbar-success: #00802f; --color-background-flashbar-error: #db0000; --color-background-flashbar-info: #006ce0; --color-background-flashbar-warning: #ffe347; --color-background-popover: #ffffff; --color-background-progress-bar-value-default: #006ce0; --color-background-progress-bar-default: #ebebf0; --color-background-segment-active: #006ce0; --color-background-segment-default: #ffffff; --color-background-segment-disabled: #ffffff; --color-background-segment-hover: #f0fbff; --color-background-segment-wrapper: #ffffff; --color-background-slider-range-default: #006ce0; --color-background-slider-range-active: #004a9e; --color-background-slider-handle-default: #006ce0; --color-background-slider-handle-active: #004a9e; --color-background-slider-track-default: #8c8c94; --color-background-status-error: #fff5f5; --color-background-status-info: #f0fbff; --color-background-dialog: #f0fbff; --color-background-status-success: #effff1; --color-background-status-warning: #fffef0; --color-background-tiles-disabled: #ebebf0; --color-background-toggle-checked-disabled: #b8e7ff; --color-background-toggle-default: #424650; --color-background-avatar-gen-ai: radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%); --color-background-avatar-default: #424650; --color-text-avatar: #ffffff; --color-background-loading-bar-gen-ai: linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%); --color-background-chat-bubble-outgoing: transparent; --color-background-chat-bubble-incoming: #f6f6f9; --color-text-chat-bubble-outgoing: #0f141a; --color-text-chat-bubble-incoming: #0f141a; --color-border-button-link-disabled: transparent; --color-border-button-normal-active: #002b66; --color-border-button-normal-default: #006ce0; --color-border-toggle-button-normal-pressed: #006ce0; --color-border-toggle-button-normal-default: #006ce0; --color-border-toggle-button-normal-hover: #002b66; --color-border-button-normal-disabled: #b4b4bb; --color-text-button-normal-disabled: #8c8c94; --color-border-button-normal-hover: #002b66; --color-text-button-icon-disabled: #8c8c94; --color-border-button-primary-active: #002b66; --color-border-button-primary-default: #006ce0; --color-border-button-primary-disabled: #ebebf0; --color-border-button-primary-hover: #002b66; --color-text-button-primary-disabled: #8c8c94; --color-item-selected: #006ce0; --color-text-side-navigation-item-active: #006ce0; --color-border-card: #c6c6cd; --color-border-container-top: transparent; --color-border-control-default: #8c8c94; --color-border-divider-default: #c6c6cd; --color-border-divider-secondary: #ebebf0; --color-border-dropdown-container: #b4b4bb; --color-border-dropdown-item-hover: #8c8c94; --color-border-input-default: #8c8c94; --color-border-input-focused: #006ce0; --color-border-item-focused: #006ce0; --color-border-dropdown-item-focused: #424650; --color-border-item-selected: #006ce0; --color-border-layout-side-navigation: #c6c6cd; --color-border-popover: #b4b4bb; --color-border-segment-active: #424650; --color-border-segment-default: #424650; --color-border-segment-disabled: #424650; --color-border-segment-divider: #8c8c94; --color-border-segment-hover: #424650; --color-border-segment-wrapper: #8c8c94; --color-border-status-error: #db0000; --color-border-status-info: #006ce0; --color-border-status-success: #00802f; --color-border-status-warning: #855900; --color-border-dialog: #006ce0; --color-foreground-control-default: #ffffff; --color-foreground-control-disabled: #ffffff; --color-foreground-control-read-only: #656871; --color-shadow-toggle-handle: rgba(0, 0, 0, 0.25); --color-text-accent: #006ce0; --color-text-body-default: #0f141a; --color-text-body-secondary: #424650; --color-text-breadcrumb-current: #656871; --color-text-breadcrumb-icon: #8c8c94; --color-text-button-inline-icon-default: #006ce0; --color-text-button-inline-icon-disabled: #b4b4bb; --color-text-button-inline-icon-hover: #002b66; --color-text-button-normal-active: #002b66; --color-text-toggle-button-normal-pressed: #002b66; --color-text-button-normal-default: #006ce0; --color-text-button-normal-hover: #002b66; --color-text-button-link-active: #002b66; --color-text-button-link-default: #006ce0; --color-text-button-link-disabled: #b4b4bb; --color-text-button-link-hover: #002b66; --color-text-button-primary-active: #ffffff; --color-text-button-primary-default: #ffffff; --color-text-button-primary-hover: #ffffff; --color-text-calendar-date-selected: #ffffff; --color-text-counter: #656871; --color-text-dropdown-item-default: #0f141a; --color-text-dropdown-item-disabled: #b4b4bb; --color-text-dropdown-item-filter-match: #006ce0; --color-text-dropdown-item-highlighted: #0f141a; --color-text-dropdown-item-secondary: #656871; --color-text-empty: #656871; --color-text-expandable-section-default: #0f141a; --color-text-expandable-section-hover: #006ce0; --color-text-expandable-section-navigation-icon-default: #424650; --color-text-form-default: #0f141a; --color-text-form-secondary: #656871; --color-text-group-label: #424650; --color-text-label-gen-ai: #7300e5; --color-text-heading-default: #0f141a; --color-text-heading-secondary: #424650; --color-text-home-header-default: #ebebf0; --color-text-home-header-secondary: #c6c6cd; --color-text-icon-subtle: #656871; --color-text-input-disabled: #b4b4bb; --color-text-input-placeholder: #656871; --color-text-interactive-active: #0f141a; --color-text-interactive-default: #424650; --color-text-interactive-disabled: #b4b4bb; --color-text-interactive-hover: #0f141a; --color-text-toggle-button-icon-pressed: #0f141a; --color-text-interactive-inverted-default: #dedee3; --color-text-interactive-inverted-hover: #f9f9fa; --color-text-label: #0f141a; --color-text-layout-toggle: #ffffff; --color-text-layout-toggle-active: #ffffff; --color-text-layout-toggle-hover: #006ce0; --color-text-layout-toggle-selected: #ffffff; --color-text-link-default: #006ce0; --color-text-link-hover: #002b66; --color-text-link-decoration-default: currentColor; --color-text-link-decoration-hover: currentColor; --color-text-link-secondary-default: #006ce0; --color-text-link-secondary-hover: #002b66; --color-text-link-info-default: #006ce0; --color-text-link-info-hover: #002b66; --color-text-notification-default: #f9f9fa; --color-text-notification-yellow: #0f141a; --color-text-segment-active: #ffffff; --color-text-segment-default: #424650; --color-text-segment-hover: #002b66; --color-text-status-error: #db0000; --color-text-status-inactive: #656871; --color-text-status-info: #006ce0; --color-text-status-success: #00802f; --color-text-status-warning: #855900; --color-text-top-navigation-title: #0f141a; --color-board-placeholder-active: #ebebf0; --color-board-placeholder-hover: #d1f1ff; --color-drag-placeholder-active: #ebebf0; --color-drag-placeholder-hover: #d1f1ff; --color-dropzone-background-default: #ffffff; --color-dropzone-background-hover: #f0fbff; --color-dropzone-text-default: #424650; --color-dropzone-text-hover: #424650; --color-dropzone-border-default: #8c8c94; --color-dropzone-border-hover: #002b66; --color-tree-view-connector-line: #8c8c94; --color-background-action-card-default: #ffffff; --color-background-action-card-hover: #f0fbff; --color-background-action-card-active: #d1f1ff; --color-border-action-card-default: #006ce0; --color-border-action-card-hover: #002b66; --color-border-action-card-active: #002b66; --color-border-action-card-disabled: #b4b4bb; --color-background-action-card-disabled: #ffffff; --color-text-action-card-disabled: #8c8c94; --color-text-action-card-icon-default: #006ce0; --color-text-action-card-icon-hover: #002b66; --color-text-action-card-icon-active: #002b66; --color-text-action-card-icon-disabled: #b4b4bb; --color-background-badge-green: #00802f; --color-background-badge-blue: #006ce0; --color-background-badge-red: #db0000; --color-background-badge-yellow: #ffe347; --color-background-badge-grey: #424650; --color-border-badge: transparent; --color-border-badge-grey: transparent; --color-border-badge-green: transparent; --color-border-badge-blue: transparent; --color-border-badge-red: transparent; --color-text-badge-grey: #f9f9fa; --color-text-badge-green: #f9f9fa; --color-text-badge-blue: #f9f9fa; --color-text-badge-red: #f9f9fa; --color-background-code-view: #f8f8f8; --font-family-base: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif; --font-family-display: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif; --font-family-heading: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif; --font-family-monospace: Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace; --font-size-body-m: 14px; --font-size-body-s: 12px; --font-size-display-l: 42px; --font-size-display-xl: 64px; --font-size-heading-l: 20px; --font-size-heading-m: 18px; --font-size-heading-s: 16px; --font-size-heading-xl: 24px; --font-size-heading-xs: 14px; --font-size-tabs: 16px; --font-weight-alert-header: 700; --font-weight-bold: 700; --font-weight-button: 700; --font-weight-display-l: 700; --font-weight-display-xl: 400; --font-weight-flashbar-header: 700; --font-weight-heading-l: 700; --font-weight-heading-m: 700; --font-weight-heading-s: 700; --font-weight-heading-xl: 700; --font-weight-heading-xs: 700; --font-weight-heavy: 700; --font-weight-lighter: 300; --font-weight-normal: 400; --font-weight-tabs: 700; --font-weight-tabs-disabled: 700; --letter-spacing-display-l: -0.03em; --letter-spacing-display-xl: -0.03em; --letter-spacing-heading-l: -0.015em; --letter-spacing-heading-m: -0.010em; --letter-spacing-heading-s: -0.005em; --letter-spacing-heading-xl: -0.02em; --letter-spacing-heading-xs: normal; --line-height-body-m: 20px; --line-height-body-s: 16px; --line-height-display-l: 48px; --line-height-display-xl: 72px; --line-height-heading-l: 24px; --line-height-heading-m: 22px; --line-height-heading-s: 20px; --line-height-heading-xl: 30px; --line-height-heading-xs: 18px; --line-height-tabs: 20px; --border-radius-action-card-default: 16px; --border-radius-action-card-embedded: 8px; --border-radius-alert: 12px; --border-radius-badge: 4px; --border-radius-button: 20px; --border-radius-calendar-day-focus-ring: 3px; --border-radius-card-default: 16px; --border-radius-card-embedded: 8px; --border-radius-chat-bubble: 8px; --border-radius-support-prompt: 8px; --border-radius-container: 16px; --border-radius-control-circular-focus-ring: 4px; --border-radius-control-default-focus-ring: 4px; --border-radius-dropdown: 8px; --border-radius-dropzone: 12px; --border-radius-flashbar: 12px; --border-radius-input: 8px; --border-radius-item: 8px; --border-radius-popover: 8px; --border-radius-tabs-focus-ring: 20px; --border-radius-tiles: 8px; --border-radius-token: 8px; --border-radius-token-inline: 4px; --border-radius-tutorial-panel-item: 8px; --border-width-action-card-active: 1px; --border-width-action-card-default: 1px; --border-width-action-card-disabled: 1px; --border-width-action-card-hover: 1px; --border-width-alert: 2px; --border-width-alert-block-end: 2px; --border-width-alert-block-start: 2px; --border-width-alert-inline-end: 2px; --border-width-alert-inline-start: 2px; --border-width-flashbar-inline-start: 0px; --border-width-button: 2px; --border-width-card: 1px; --border-width-card-selected: 2px; --border-width-dropdown: 2px; --border-width-field: 1px; --border-width-icon-big: 3px; --border-width-icon-large: 4px; --border-width-icon-medium: 2px; --border-width-icon-normal: 2px; --border-width-icon-small: 2px; --border-width-icon-x-small: 1.5px; --border-width-item-selected: 2px; --border-width-layout-side-navigation: 1px; --border-width-badge: 0px; --border-width-popover: 2px; --border-width-token: 2px; --motion-duration-avatar-gen-ai-gradient: 3600ms; --motion-duration-avatar-loading-dots: 1200ms; --motion-easing-avatar-gen-ai-gradient: cubic-bezier(0.7, 0, 0.3, 1); --motion-easing-responsive: cubic-bezier(0, 0, 0, 1); --motion-easing-sticky: cubic-bezier(1, 0, 0.83, 1); --motion-easing-expressive: cubic-bezier(0.84, 0, 0.16, 1); --motion-duration-responsive: 115ms; --motion-duration-expressive: 165ms; --motion-duration-complex: 250ms; --motion-duration-tooltip-enter: 115ms; --motion-easing-tooltip-enter: cubic-bezier(0, 0, 0, 1); --motion-keyframes-fade-in: cs-fade-in; --motion-keyframes-fade-out: cs-fade-out; --motion-keyframes-status-icon-error: cs-status-icon-error; --motion-keyframes-scale-popup: cs-scale-popup; --size-vertical-input: 32px; --size-side-navigation-item-height: 28px; --size-side-navigation-item-collapsed: 30px; --size-side-navigation-collapsed-width: 52px; --space-alert-vertical: 8px; --space-button-horizontal: 20px; --space-button-vertical: 4px; --space-token-vertical: 4px; --space-field-vertical: 5px; --space-card-horizontal-default: 20px; --space-card-horizontal-embedded: 12px; --space-card-vertical-default: 16px; --space-card-vertical-embedded: 10px; --space-container-horizontal: 20px; --space-field-horizontal: 12px; --space-tabs-vertical: 4px; --space-tree-view-indentation: 24px; --space-side-navigation-item-default-gap: 0px; --space-side-navigation-item-icon-gap: 4px; --space-action-card-horizontal-default: 20px; --space-action-card-horizontal-embedded: 12px; --space-action-card-vertical-default: 16px; --space-action-card-vertical-embedded: 10px; --space-option-padding-vertical: 4px; --space-option-padding-horizontal: 20px; --space-scaled-xxxs: 2px; --space-scaled-xxs: 4px; --space-scaled-xs: 8px; --space-scaled-s: 12px; --space-scaled-m: 16px; --space-scaled-l: 20px; --space-scaled-xl: 24px; --space-scaled-xxl: 32px; --space-scaled-xxxl: 40px; --space-static-xxxs: 2px; --space-static-xxs: 4px; --space-static-xs: 8px; --space-static-s: 12px; --space-static-m: 16px; --space-static-l: 20px; --space-static-xl: 24px; --space-static-xxl: 32px; --space-static-xxxl: 40px; --shadow-card: none; --shadow-container-active: 0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a; } /* 2. Internal Cloudscape variables used by the component CSS (resolved) */ :root { --color-primary-50: #f0fbff; --color-primary-100: #d1f1ff; --color-primary-200: #b8e7ff; --color-primary-300: #75cfff; --color-primary-400: #42b4ff; --color-primary-500: #0099ff; --color-primary-600: #006ce0; --color-primary-700: #004a9e; --color-primary-800: #003b8f; --color-primary-900: #002b66; --color-primary-950: #00204d; --color-primary-1000: #001129; --color-neutral-50: #fcfcfd; --color-neutral-100: #f9f9fa; --color-neutral-150: #f6f6f9; --color-neutral-200: #f3f3f7; --color-neutral-250: #ebebf0; --color-neutral-300: #dedee3; --color-neutral-350: #c6c6cd; --color-neutral-400: #b4b4bb; --color-neutral-450: #a4a4ad; --color-neutral-500: #8c8c94; --color-neutral-550: #72747e; --color-neutral-600: #656871; --color-neutral-650: #424650; --color-neutral-700: #333843; --color-neutral-750: #232b37; --color-neutral-800: #1b232d; --color-neutral-850: #161d26; --color-neutral-900: #131920; --color-neutral-950: #0f141a; --color-neutral-1000: #06080a; --color-error-50: #fff5f5; --color-error-100: #ffe0e0; --color-error-400: #ff7a7a; --color-error-600: #db0000; --color-error-700: #c20000; --color-error-800: #990000; --color-error-900: #700000; --color-error-950: #520000; --color-error-1000: #1f0000; --color-success-50: #effff1; --color-success-100: #d9ffd6; --color-success-200: #aeffa8; --color-success-400: #00e500; --color-success-500: #2bb534; --color-success-600: #00802f; --color-success-800: #005c26; --color-success-950: #003311; --color-success-1000: #001401; --color-warning-50: #fffef0; --color-warning-100: #fffbbd; --color-warning-200: #fef571; --color-warning-400: #ffe347; --color-warning-500: #fbd332; --color-warning-600: #f2b100; --color-warning-800: #9e6900; --color-warning-900: #855900; --color-warning-950: #573a00; --color-warning-1000: #191100; --color-info-50: #f0fbff; --color-info-100: #d1f1ff; --color-info-300: #75cfff; --color-info-400: #42b4ff; --color-info-600: #006ce0; --color-info-700: #004a9e; --color-info-800: #003b8f; --color-info-950: #00204d; --color-info-1000: #001129; --color-purple-400: #bf80ff; --color-purple-700: #7300e5; --color-lime-100: #ebffcc; --color-transparent: transparent; --color-black: #000000; --color-white: #ffffff; --color-severity-dark-red: #870303; --color-severity-red: #ce3311; --color-severity-orange: #f89256; --color-severity-yellow: #f2cd54; --color-severity-grey: #656871; --color-grey-opaque-10: rgba(0, 0, 0, 0.1); --color-grey-opaque-25: rgba(255, 255, 255, 0.25); --color-grey-opaque-70: rgba(35, 43, 55, 0.7); --color-grey-transparent: rgba(15, 20, 26, 0.12); --color-grey-transparent-heavy: rgba(15, 20, 26, 0.12); --color-background-direction-button-active: #232b37; --color-background-direction-button-default: #424650; --color-background-direction-button-disabled: #ebebf0; --color-background-direction-button-hover: #333843; --color-text-direction-button-default: #ffffff; --color-text-direction-button-disabled: #b4b4bb; --color-background-calendar-current-date: #f3f3f7; --color-background-code-editor-gutter-active-line-default: #656871; --color-background-code-editor-gutter-active-line-error: #db0000; --color-background-code-editor-gutter-default: #f3f3f7; --color-background-code-editor-loading: #f9f9fa; --color-background-code-editor-pane-item-hover: #ebebf0; --color-background-code-editor-status-bar: #f3f3f7; --color-background-item-card: #ffffff; --color-background-dropdown-item-dimmed: transparent; --color-background-inline-code: rgba(0, 0, 0, 0.1); --color-background-side-navigation-item-active-collapsed: #006ce0; --color-background-side-navigation-item-icon-hover: #f0fbff; --color-background-layout-ai-drawer: #161d26; --color-background-drawer: #ffffff; --color-background-drawer-backdrop: rgba(35, 43, 55, 0.7); --color-background-layout-mobile-panel: #0f141a; --color-background-layout-panel-hover: #ebebf0; --color-background-modal-overlay: rgba(35, 43, 55, 0.7); --color-background-notification-stack-bar: #232b37; --color-background-notification-stack-bar-active: #232b37; --color-background-notification-stack-bar-hover: #424650; --color-background-progress-bar-value-flash: #006ce0; --color-background-progress-bar-flash: #ebebf0; --color-background-slider-handle-ring: #ffffff; --color-background-slider-handle-error-default: #db0000; --color-background-slider-handle-error-active: #db0000; --color-background-slider-handle-warning-default: #855900; --color-background-slider-handle-warning-active: #855900; --color-background-slider-range-error-default: #db0000; --color-background-slider-range-error-active: #db0000; --color-background-slider-range-warning-default: #855900; --color-background-slider-range-warning-active: #855900; --color-background-alert-error: #fff5f5; --color-background-alert-info: #f0fbff; --color-background-alert-success: #effff1; --color-background-alert-warning: #fffef0; --color-background-dialog-default: #ffffff; --color-background-table-header: #ffffff; --color-background-status-indicator-error: transparent; --color-background-status-indicator-warning: transparent; --color-background-status-indicator-success: transparent; --color-background-status-indicator-info: transparent; --color-background-status-indicator-neutral: transparent; --color-text-side-navigation-item-active-collapsed: #ffffff; --color-text-side-navigation-item-default: #424650; --color-border-calendar-grid: transparent; --color-border-calendar-grid-selected-focus-ring: #f9f9fa; --color-border-cell-shaded: #dedee3; --color-border-code-editor-ace-active-line-light-theme: #dedee3; --color-border-code-editor-ace-active-line-dark-theme: #656871; --color-border-code-editor-default: #dedee3; --color-border-code-editor-pane-item-hover: #8c8c94; --color-border-card-highlighted: #006ce0; --color-border-item-card: #c6c6cd; --color-border-item-card-highlighted: #006ce0; --color-border-container-divider: transparent; --color-border-control-checked: #006ce0; --color-border-control-disabled: #dedee3; --color-border-divider-active: #0f141a; --color-border-divider-panel-bottom: #c6c6cd; --color-border-divider-panel-side: #c6c6cd; --color-border-divider-table-group: #8c8c94; --color-border-dropdown-group: #c6c6cd; --color-border-dropdown-item-default: #c6c6cd; --color-border-dropdown-item-dimmed-hover: #8c8c94; --color-border-dropdown-item-selected: #006ce0; --color-border-dropdown-item-top: transparent; --color-border-editable-cell-hover: #8c8c94; --color-border-input-disabled: #ebebf0; --color-border-item-placeholder: #006ce0; --color-border-layout: #c6c6cd; --color-border-notification-stack-bar: #232b37; --color-border-notification-stack-bar-hover: #424650; --color-border-notification-stack-bar-active: #232b37; --color-border-notification-stack-bar-focused: #f9f9fa; --color-border-panel-header: #c6c6cd; --color-border-dialog-default: #c6c6cd; --color-border-divider-interactive-default: #8c8c94; --color-border-tabs-divider: #c6c6cd; --color-border-tabs-shadow: rgba(15, 20, 26, 0.12); --color-border-tabs-underline: #006ce0; --color-border-tiles-disabled: #ebebf0; --color-border-tutorial: #dedee3; --color-shadow-default: rgba(15, 20, 26, 0.12); --color-stroke-chart-line: #8c8c94; --color-text-button-inline-link-hover: #002b66; --color-text-button-icon-hover: #0f141a; --color-text-link-button-normal-default: #006ce0; --color-text-link-button-normal-hover: #002b66; --color-text-link-button-normal-active: #002b66; --color-text-calendar-date-hover: #0f141a; --color-text-calendar-month: #656871; --color-text-code-editor-gutter-active-line: #ffffff; --color-text-code-editor-gutter-default: #0f141a; --color-text-code-editor-status-bar-disabled: #8c8c94; --color-text-code-editor-tab-button-error: #ffffff; --color-text-column-header: #424650; --color-text-column-sorting-icon: #424650; --color-text-control-disabled: #b4b4bb; --color-text-disabled: #b4b4bb; --color-text-disabled-inline-edit: #424650; --color-text-dropdown-footer: #656871; --color-text-dropdown-group-label: #424650; --color-text-dropdown-item-dimmed: #b4b4bb; --color-text-dropdown-item-secondary-hover: #656871; --color-border-expandable-section-default: #c6c6cd; --color-text-form-label: #0f141a; --color-text-input-placeholder-disabled: #b4b4bb; --color-text-inverted: #ffffff; --color-text-key-value-pairs-value: #0f141a; --color-text-link-secondary-decoration-default: transparent; --color-text-link-inverted-default: #f9f9fa; --color-text-link-inverted-hover: #ffffff; --color-text-link-button-underline: transparent; --color-text-link-button-underline-hover: transparent; --color-text-alert-default: #0f141a; --color-text-notification-stack-bar: #ffffff; --color-text-pagination-page-number-active-disabled: #b4b4bb; --color-text-pagination-page-number-default: #424650; --color-text-small: #656871; --color-text-flashbar-icon-error: #db0000; --color-text-flashbar-icon-info: #006ce0; --color-text-flashbar-icon-success: #00802f; --color-text-flashbar-icon-warning: #855900; --color-text-alert-icon-error: #db0000; --color-text-alert-icon-info: #006ce0; --color-text-alert-icon-success: #00802f; --color-text-alert-icon-warning: #855900; --color-text-tutorial-hotspot-default: #006ce0; --color-text-tutorial-hotspot-hover: #002b66; --color-gap-global-drawer: #ebebf0; --color-background-skeleton: #8c8c94; --color-background-skeleton-wave: #f6f6f9; --color-background-visual-accent-red: #ffe0e0; --color-background-visual-accent-yellow: #fffbbd; --color-background-visual-accent-indigo: #dbe4ff; --color-background-visual-accent-green: #d9ffd6; --color-background-visual-accent-orange: rgba(255, 224, 214, 0.6); --color-background-visual-accent-purple: rgba(242, 229, 255, 0.6); --color-background-visual-accent-lime: #ebffcc; --color-background-visual-accent-grey: #ebebf0; --color-background-visual-accent-teal: rgba(204, 255, 252, 0.7); --color-background-visual-accent-blue: rgba(209, 241, 255, 0.6); --color-background-visual-accent-violet: rgba(232, 229, 255, 0.6); --color-background-visual-accent-magenta: rgba(255, 224, 251, 0.6); --color-background-visual-accent-pink: rgba(255, 224, 240, 0.7); --color-background-visual-accent-amber: rgba(255, 232, 189, 0.7); --color-text-visual-accent-red: #c20000; --color-text-visual-accent-yellow: #855900; --color-text-visual-accent-indigo: #003b8f; --color-text-visual-accent-green: #00802f; --color-text-visual-accent-orange: #a82700; --color-text-visual-accent-purple: #962eff; --color-text-visual-accent-lime: #007000; --color-text-visual-accent-grey: #161d26; --color-text-visual-accent-teal: #008077; --color-text-visual-accent-blue: #006ce0; --color-text-visual-accent-violet: #6842ff; --color-text-visual-accent-magenta: #b2008f; --color-text-visual-accent-pink: #bb005d; --color-text-visual-accent-amber: #9e3700; --font-button-letter-spacing: 0.005em; --font-chart-detail-size: 12px; --font-decoration-style-link: solid; --font-decoration-line-link-secondary: none; --font-decoration-thickness-link: 1px; --font-decoration-thickness-link-display-l: 2px; --font-display-label-weight: 700; --font-size-expandable-heading: 16px; --font-header-h2-description-line-height: 20px; --font-header-h2-description-size: 14px; --font-link-button-letter-spacing: 0.005em; --font-link-button-weight: 700; --font-panel-header-line-height: 22px; --font-panel-header-size: 18px; --font-side-navigation-section-header-size: inherit; --font-side-navigation-section-header-weight: inherit; --font-size-form-label: 14px; --font-size-key-value-pairs-label: 14px; --font-smoothing-moz-osx: grayscale; --font-smoothing-webkit: antialiased; --font-wayfinding-link-active-weight: 700; --font-weight-breadcrumb-current: 700; --font-weight-form-label: 700; --font-weight-key-value-pairs-label: 700; --font-weight-link-secondary: inherit; --letter-spacing-body-s: 0.005em; --line-height-form-label: 20px; --line-height-key-value-pairs-label: 20px; --border-active-width: 4px; --border-code-editor-status-divider-width: 1px; --border-container-sticky-width: 0px; --border-container-top-width: 0px; --border-control-focus-ring-shadow-spread: 1px; --border-control-invalid-focus-ring-shadow-spread: 2px; --border-divider-list-width: 1px; --border-divider-section-width: 1px; --border-dropdown-virtual-offset-width: 2px; --border-invalid-width: 8px; --border-item-width: 2px; --border-line-chart-dash-array: 3 5; --border-line-chart-line-join: round; --border-line-chart-width: 2px; --border-link-focus-ring-outline: 0; --border-link-focus-ring-shadow-spread: 2px; --border-panel-header-width: 1px; --border-panel-top-width: 1px; --border-radius-code-editor: 8px; --border-radius-side-navigation-item: 8px; --border-radius-side-navigation-item-collapsed: 50%; --border-radius-item-card-default: 16px; --border-radius-item-card-embedded: 8px; --border-radius-dialog: 8px; --border-radius-skeleton: 8px; --border-radius-status-indicator: 4px; --border-table-sticky-width: 1px; --border-width-item-card: 1px; --border-width-dialog: 1px; --border-width-notification-stack-bar: 2px; --motion-duration-extra-slow: 270ms; --motion-duration-fast: 90ms; --motion-duration-moderate: 135ms; --motion-duration-refresh-only-fast: 115ms; --motion-duration-refresh-only-medium: 165ms; --motion-duration-refresh-only-slow: 250ms; --motion-duration-rotate-180: 135ms; --motion-duration-rotate-90: 135ms; --motion-duration-show-paced: 180ms; --motion-duration-show-quick: 135ms; --motion-duration-slow: 180ms; --motion-duration-transition-quick: 90ms; --motion-duration-transition-show-paced: 180ms; --motion-duration-transition-show-quick: 90ms; --motion-easing-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --motion-easing-refresh-only-a: cubic-bezier(0, 0, 0, 1); --motion-easing-refresh-only-b: cubic-bezier(1, 0, 0.83, 1); --motion-easing-refresh-only-c: cubic-bezier(0.84, 0, 0.16, 1); --motion-easing-rotate-180: cubic-bezier(0.165, 0.84, 0.44, 1); --motion-easing-rotate-90: cubic-bezier(0.165, 0.84, 0.44, 1); --motion-easing-show-paced: ease-out; --motion-easing-show-quick: ease-out; --motion-easing-transition-quick: linear; --motion-easing-transition-show-paced: ease-out; --motion-duration-expandable-content-enter: 180ms; --motion-easing-expandable-content-enter: ease-out; --motion-duration-side-navigation-content-enter-fade: 0ms; --motion-duration-side-navigation-content-exit: 0ms; --motion-duration-side-navigation-content-exit-fade: 0ms; --motion-easing-side-navigation-content-exit: ease-out; --size-calendar-grid-width: 238px; --size-control: 16px; --size-icon-big: 32px; --size-icon-large: 48px; --size-icon-medium: 20px; --size-icon-normal: 16px; --size-table-selection-horizontal: 40px; --size-vertical-panel-icon-offset: 15px; --space-alert-action-left: 12px; --space-alert-horizontal: 16px; --space-alert-message-right: 4px; --space-button-focus-outline-gutter: 4px; --space-button-icon-focus-outline-gutter-vertical: 0px; --space-button-icon-only-horizontal: 6px; --space-button-inline-icon-focus-outline-gutter: 0px; --space-button-modal-dismiss-vertical: 2px; --space-calendar-grid-focus-outline-gutter: -5px; --space-calendar-grid-selected-focus-outline-gutter: -5px; --space-calendar-grid-gutter: 6px; --space-item-card-horizontal-default: 20px; --space-item-card-horizontal-embedded: 12px; --space-item-card-vertical-default: 16px; --space-item-card-vertical-embedded: 10px; --space-dialog-horizontal: 12px; --space-dialog-vertical: 10px; --space-dialog-action-block: 4px; --space-dialog-action-inline: 4px; --space-dialog-header-gap: 8px; --space-dialog-section-gap: 4px; --space-code-editor-status-focus-outline-gutter: -7px; --space-container-content-top: 4px; --space-container-header-top: 12px; --space-container-header-bottom: 8px; --space-content-header-padding-bottom: 16px; --space-dark-header-overlap-distance: 36px; --space-expandable-section-icon-offset-top: 4px; --space-field-icon-offset: 36px; --space-filtering-token-dismiss-button-focus-outline-gutter: -5px; --space-filtering-token-operation-select-focus-outline-gutter: -5px; --space-flashbar-action-left: 12px; --space-flashbar-dismiss-right: 0px; --space-flashbar-horizontal: 16px; --space-flashbar-vertical: 8px; --space-grid-gutter: 20px; --space-key-value-gap: 0px; --space-layout-content-bottom: 40px; --space-layout-content-horizontal: 24px; --space-layout-toggle-diameter: 36px; --space-layout-toggle-padding: 12px; --space-modal-content-bottom: 16px; --space-modal-horizontal: 20px; --space-panel-content-bottom: 40px; --space-panel-content-top: 20px; --space-panel-divider-margin-horizontal: 8px; --space-panel-header-vertical: 20px; --space-panel-nav-left: 28px; --space-panel-side-left: 28px; --space-panel-side-right: 24px; --space-panel-split-top: 20px; --space-panel-split-bottom: 20px; --space-segmented-control-focus-outline-gutter: 6px; --space-tabs-content-top: 12px; --space-tabs-focus-outline-gutter: -8px; --space-table-content-bottom: 4px; --space-table-embedded-header-top: 0px; --space-table-footer-horizontal: 0px; --space-table-header-focus-outline-gutter: 0px; --space-table-header-horizontal: 0px; --space-table-header-tools-bottom: 0px; --space-table-header-tools-full-page-bottom: 4px; --space-table-horizontal: 20px; --space-tile-gutter: 24px; --space-action-card-description-padding-top: 4px; --space-status-indicator-padding-horizontal: 0px; --space-scaled-2x-xxs: 4px; --space-scaled-2x-m: 16px; --space-scaled-2x-l: 20px; --space-scaled-2x-xl: 24px; --space-scaled-2x-xxxl: 40px; --space-scaled-none: 0px; --space-none: 0px; --space-xxxs: 2px; --space-xxs: 4px; --space-xs: 8px; --space-s: 12px; --space-m: 16px; --space-l: 20px; --space-xl: 24px; --space-xxl: 32px; --space-xxxl: 40px; --shadow-item-card: none; --shadow-dialog: none; --shadow-container: 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12); --shadow-dropdown: 0px 4px 20px 1px rgba(0, 7, 22, 0.10); --shadow-dropup: 0px 4px 20px 1px rgba(0, 7, 22, 0.10); --shadow-flash-collapsed: 0px 4px 4px rgba(0, 0, 0, 0.25); --shadow-flash-sticky: 0px 4px 8px rgba(0, 7, 22, 0.10); --shadow-modal: 0px 4px 20px 1px rgba(0, 7, 22, 0.10); --shadow-panel: 0px 0px 0px 1px #b6bec9; --shadow-panel-toggle: 0px 6px 12px 1px rgba(0, 7, 22, 0.12); --shadow-popover: 0px 4px 20px 1px rgba(0, 7, 22, 0.10); --shadow-split-bottom: 0px -36px 36px -36px rgba(0, 7, 22, 0.10); --shadow-split-side: -1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.10); --shadow-sticky: 0px 4px 8px 1px rgba(0, 7, 22, 0.10); --shadow-sticky-embedded: 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.10); --shadow-sticky-column-first: 4px 0px 8px 1px rgba(0, 7, 22, 0.1); --shadow-sticky-column-last: -4px 0 8px 1px rgba(0, 28, 36, 0.1); } /* Context: dark top navigation bar (Cloudscape .awsui-context-top-navigation) */ .cs-context-top-navigation { --color-background-badge-icon: #ff7a7a; --color-background-button-link-active: #333843; --color-background-button-link-hover: #1b232d; --color-background-button-normal-active: #333843; --color-background-button-normal-default: #161d26; --color-background-button-normal-disabled: #161d26; --color-background-button-normal-hover: #1b232d; --color-background-toggle-button-normal-pressed: #333843; --color-background-toggle-button-normal-default: #161d26; --color-background-toggle-button-normal-hover: #1b232d; --color-background-button-primary-active: #42b4ff; --color-background-button-primary-default: #42b4ff; --color-background-button-primary-disabled: #232b37; --color-background-button-primary-hover: #75cfff; --color-background-cell-shaded: #1b232d; --color-background-card: #161d26; --color-background-container-content: #161d26; --color-background-container-header: #161d26; --color-background-control-checked: #42b4ff; --color-background-control-default: #161d26; --color-background-control-disabled: #333843; --color-background-dropdown-item-default: #161d26; --color-background-dropdown-item-filter-match: #333843; --color-background-dropdown-item-hover: #131920; --color-background-dropdown-item-selected: #001129; --color-background-input-default: #161d26; --color-background-input-disabled: #1b232d; --color-background-item-selected: #001129; --color-background-layout-main: #161d26; --color-background-backdrop: rgba(15, 20, 26, 0.7); --color-background-layout-panel: #161d26; --color-background-layout-panel-content: #161d26; --color-background-layout-toolbar: #161d26; --color-background-layout-toggle-selected-active: #42b4ff; --color-background-layout-toggle-selected-default: #42b4ff; --color-background-layout-toggle-selected-hover: #75cfff; --color-background-notification-grey: #656871; --color-background-popover: #1b232d; --color-background-progress-bar-value-default: #42b4ff; --color-background-progress-bar-default: #333843; --color-background-segment-active: #42b4ff; --color-background-segment-default: #161d26; --color-background-segment-disabled: #161d26; --color-background-segment-hover: #1b232d; --color-background-segment-wrapper: #161d26; --color-background-slider-range-default: #42b4ff; --color-background-slider-range-active: #75cfff; --color-background-slider-handle-default: #42b4ff; --color-background-slider-handle-active: #75cfff; --color-background-slider-track-default: #656871; --color-background-status-error: #1f0000; --color-background-status-info: #001129; --color-background-dialog: #001129; --color-background-status-success: #001401; --color-background-status-warning: #191100; --color-background-tiles-disabled: #1b232d; --color-background-toggle-checked-disabled: #002b66; --color-background-toggle-default: #8c8c94; --color-background-chat-bubble-incoming: #0f141a; --color-text-chat-bubble-outgoing: #c6c6cd; --color-text-chat-bubble-incoming: #c6c6cd; --color-border-button-normal-active: #75cfff; --color-border-button-normal-default: #42b4ff; --color-border-toggle-button-normal-pressed: #42b4ff; --color-border-toggle-button-normal-default: #42b4ff; --color-border-toggle-button-normal-hover: #75cfff; --color-border-button-normal-disabled: #656871; --color-border-button-normal-hover: #75cfff; --color-border-button-primary-active: #42b4ff; --color-border-button-primary-default: #42b4ff; --color-border-button-primary-disabled: #232b37; --color-border-button-primary-hover: #75cfff; --color-item-selected: #42b4ff; --color-text-side-navigation-item-active: #42b4ff; --color-border-card: #424650; --color-border-divider-default: #424650; --color-border-divider-secondary: #232b37; --color-border-dropdown-container: #656871; --color-border-dropdown-item-hover: #656871; --color-border-input-default: #656871; --color-border-input-focused: #42b4ff; --color-border-item-focused: #42b4ff; --color-border-dropdown-item-focused: #dedee3; --color-border-item-selected: #42b4ff; --color-border-layout-side-navigation: #424650; --color-border-popover: #656871; --color-border-segment-active: #dedee3; --color-border-segment-default: #dedee3; --color-border-segment-disabled: #dedee3; --color-border-segment-divider: #656871; --color-border-segment-hover: #dedee3; --color-border-segment-wrapper: #656871; --color-border-status-error: #ff7a7a; --color-border-status-info: #42b4ff; --color-border-status-success: #2bb534; --color-border-status-warning: #fbd332; --color-border-dialog: #42b4ff; --color-foreground-control-default: #0f141a; --color-foreground-control-disabled: #161d26; --color-foreground-control-read-only: #a4a4ad; --color-text-accent: #42b4ff; --color-text-body-default: #c6c6cd; --color-text-body-secondary: #c6c6cd; --color-text-breadcrumb-current: #8c8c94; --color-text-breadcrumb-icon: #656871; --color-text-button-inline-icon-default: #42b4ff; --color-text-button-inline-icon-disabled: #656871; --color-text-button-inline-icon-hover: #75cfff; --color-text-button-normal-active: #75cfff; --color-text-toggle-button-normal-pressed: #75cfff; --color-text-button-normal-default: #42b4ff; --color-text-button-normal-hover: #75cfff; --color-text-button-link-active: #75cfff; --color-text-button-link-default: #42b4ff; --color-text-button-link-disabled: #656871; --color-text-button-link-hover: #75cfff; --color-text-button-primary-active: #0f141a; --color-text-button-primary-default: #0f141a; --color-text-button-primary-hover: #0f141a; --color-text-calendar-date-selected: #161d26; --color-text-counter: #a4a4ad; --color-text-dropdown-item-default: #dedee3; --color-text-dropdown-item-disabled: #656871; --color-text-dropdown-item-filter-match: #75cfff; --color-text-dropdown-item-highlighted: #ebebf0; --color-text-dropdown-item-secondary: #a4a4ad; --color-text-empty: #dedee3; --color-text-expandable-section-default: #dedee3; --color-text-expandable-section-hover: #42b4ff; --color-text-expandable-section-navigation-icon-default: #dedee3; --color-text-form-default: #dedee3; --color-text-form-secondary: #a4a4ad; --color-text-group-label: #c6c6cd; --color-text-label-gen-ai: #bf80ff; --color-text-heading-default: #ebebf0; --color-text-heading-secondary: #a4a4ad; --color-text-icon-subtle: #b4b4bb; --color-text-input-disabled: #656871; --color-text-input-placeholder: #a4a4ad; --color-text-interactive-active: #f9f9fa; --color-text-interactive-default: #dedee3; --color-text-interactive-disabled: #656871; --color-text-interactive-hover: #f9f9fa; --color-text-toggle-button-icon-pressed: #f9f9fa; --color-text-label: #dedee3; --color-text-layout-toggle-active: #161d26; --color-text-layout-toggle-hover: #42b4ff; --color-text-layout-toggle-selected: #0f141a; --color-text-link-default: #42b4ff; --color-text-link-hover: #75cfff; --color-text-link-secondary-default: #42b4ff; --color-text-link-secondary-hover: #75cfff; --color-text-link-info-default: #42b4ff; --color-text-link-info-hover: #75cfff; --color-text-segment-active: #0f141a; --color-text-segment-default: #dedee3; --color-text-segment-hover: #75cfff; --color-text-status-error: #ff7a7a; --color-text-status-inactive: #a4a4ad; --color-text-status-info: #42b4ff; --color-text-status-success: #2bb534; --color-text-status-warning: #fbd332; --color-text-top-navigation-title: #f9f9fa; --color-board-placeholder-active: #656871; --color-board-placeholder-hover: #006ce0; --color-drag-placeholder-active: #656871; --color-drag-placeholder-hover: #006ce0; --color-dropzone-background-default: #161d26; --color-dropzone-background-hover: #001129; --color-dropzone-text-default: #c6c6cd; --color-dropzone-text-hover: #c6c6cd; --color-dropzone-border-default: #656871; --color-dropzone-border-hover: #75cfff; --color-tree-view-connector-line: #dedee3; --color-background-action-card-default: #161d26; --color-background-action-card-hover: #1b232d; --color-background-action-card-active: #333843; --color-border-action-card-default: #42b4ff; --color-border-action-card-hover: #75cfff; --color-border-action-card-active: #75cfff; --color-border-action-card-disabled: #656871; --color-background-action-card-disabled: #161d26; --color-text-action-card-icon-default: #42b4ff; --color-text-action-card-icon-hover: #75cfff; --color-text-action-card-icon-active: #75cfff; --color-text-action-card-icon-disabled: #656871; --color-background-badge-grey: #656871; --color-background-code-view: #282c34; --color-grey-opaque-70: rgba(15, 20, 26, 0.7); --color-grey-transparent: rgba(15, 20, 26, 1); --color-grey-transparent-heavy: rgba(15, 20, 26, 1); --color-background-direction-button-disabled: #232b37; --color-background-calendar-current-date: #333843; --color-background-code-editor-gutter-active-line-default: #8c8c94; --color-background-code-editor-gutter-default: #1b232d; --color-background-code-editor-loading: #1b232d; --color-background-code-editor-pane-item-hover: #333843; --color-background-code-editor-status-bar: #1b232d; --color-background-inline-code: rgba(255, 255, 255, 0.1); --color-background-layout-panel-hover: #333843; --color-background-slider-handle-ring: #161d26; --color-border-calendar-grid-selected-focus-ring: #161d26; --color-border-cell-shaded: #333843; --color-border-code-editor-default: #656871; --color-border-divider-active: #f9f9fa; --color-border-divider-table-group: #656871; --color-border-layout: #424650; --color-border-divider-interactive-default: #dedee3; --color-border-tabs-divider: #424650; --color-border-tutorial: #424650; --color-text-calendar-month: #a4a4ad; --color-text-code-editor-gutter-active-line: #0f141a; --color-text-code-editor-gutter-default: #dedee3; --color-text-code-editor-status-bar-disabled: #656871; --color-text-code-editor-tab-button-error: #0f141a; --color-text-column-header: #b4b4bb; --color-text-disabled: #656871; --color-text-disabled-inline-edit: #b4b4bb; --color-text-dropdown-item-secondary-hover: #dedee3; --color-text-inverted: #0f141a; --color-text-pagination-page-number-default: #b4b4bb; --color-text-small: #a4a4ad; --color-gap-global-drawer: #0f141a; --color-background-skeleton: #656871; --color-background-skeleton-wave: #333843; --color-background-visual-accent-red: rgba(255, 61, 61, 0.2); --color-background-visual-accent-yellow: rgba(251, 211, 50, 0.2); --color-background-visual-accent-indigo: rgba(92, 127, 255, 0.2); --color-background-visual-accent-green: rgba(43, 181, 52, 0.2); --color-background-visual-accent-orange: rgba(255, 75, 20, 0.2); --color-background-visual-accent-purple: rgba(173, 92, 255, 0.2); --color-background-visual-accent-lime: rgba(49, 184, 0, 0.2); --color-background-visual-accent-grey: #333843; --color-background-visual-accent-teal: rgba(0, 173, 162, 0.2); --color-background-visual-accent-blue: rgba(0, 153, 255, 0.2); --color-background-visual-accent-violet: rgba(133, 117, 255, 0.2); --color-background-visual-accent-magenta: rgba(255, 26, 224, 0.2); --color-background-visual-accent-pink: rgba(255, 51, 153, 0.2); --color-background-visual-accent-amber: rgba(250, 111, 0, 0.2); --color-text-visual-accent-red: #ff7a7a; --color-text-visual-accent-yellow: #fef571; --color-text-visual-accent-indigo: #75cfff; --color-text-visual-accent-green: #aeffa8; --color-text-visual-accent-orange: #ff997a; --color-text-visual-accent-purple: #d4a8ff; --color-text-visual-accent-lime: #acff2e; --color-text-visual-accent-grey: #dedee3; --color-text-visual-accent-teal: #00f5e4; --color-text-visual-accent-blue: #75cfff; --color-text-visual-accent-violet: #b2a8ff; --color-text-visual-accent-magenta: #ff57e9; --color-text-visual-accent-pink: #ff99cc; --color-text-visual-accent-amber: #ffbb45; --color-text-direction-button-disabled: #656871; --color-background-code-editor-gutter-active-line-error: #ff7a7a; --color-background-item-card: #161d26; --color-background-side-navigation-item-active-collapsed: #42b4ff; --color-background-side-navigation-item-icon-hover: #001129; --color-background-drawer: #161d26; --color-background-drawer-backdrop: rgba(15, 20, 26, 0.7); --color-background-modal-overlay: rgba(15, 20, 26, 0.7); --color-background-progress-bar-value-flash: #42b4ff; --color-background-progress-bar-flash: #333843; --color-background-slider-handle-error-default: #ff7a7a; --color-background-slider-handle-error-active: #ff7a7a; --color-background-slider-handle-warning-default: #fbd332; --color-background-slider-handle-warning-active: #fbd332; --color-background-slider-range-error-default: #ff7a7a; --color-background-slider-range-error-active: #ff7a7a; --color-background-slider-range-warning-default: #fbd332; --color-background-slider-range-warning-active: #fbd332; --color-background-alert-error: #1f0000; --color-background-alert-info: #001129; --color-background-alert-success: #001401; --color-background-alert-warning: #191100; --color-background-dialog-default: #161d26; --color-background-table-header: #161d26; --color-text-side-navigation-item-active-collapsed: #0f141a; --color-text-side-navigation-item-default: #c6c6cd; --color-border-code-editor-pane-item-hover: #656871; --color-border-card-highlighted: #42b4ff; --color-border-item-card: #424650; --color-border-item-card-highlighted: #42b4ff; --color-border-control-checked: #42b4ff; --color-border-control-disabled: #333843; --color-border-divider-panel-bottom: #424650; --color-border-divider-panel-side: #424650; --color-border-dropdown-group: #424650; --color-border-dropdown-item-default: #424650; --color-border-dropdown-item-selected: #42b4ff; --color-border-editable-cell-hover: #656871; --color-border-input-disabled: #1b232d; --color-border-item-placeholder: #42b4ff; --color-border-panel-header: #424650; --color-border-dialog-default: #424650; --color-border-tabs-shadow: rgba(15, 20, 26, 1); --color-border-tabs-underline: #42b4ff; --color-border-tiles-disabled: #1b232d; --color-shadow-default: rgba(15, 20, 26, 1); --color-text-button-inline-link-hover: #75cfff; --color-text-button-icon-hover: #f9f9fa; --color-text-link-button-normal-default: #42b4ff; --color-text-link-button-normal-hover: #75cfff; --color-text-link-button-normal-active: #75cfff; --color-text-calendar-date-hover: #dedee3; --color-text-column-sorting-icon: #b4b4bb; --color-text-control-disabled: #656871; --color-text-dropdown-footer: #a4a4ad; --color-text-dropdown-group-label: #c6c6cd; --color-text-dropdown-item-dimmed: #656871; --color-border-expandable-section-default: #424650; --color-text-form-label: #dedee3; --color-text-input-placeholder-disabled: #656871; --color-text-key-value-pairs-value: #c6c6cd; --color-text-alert-default: #c6c6cd; --color-text-pagination-page-number-active-disabled: #656871; --color-text-flashbar-icon-error: #ff7a7a; --color-text-flashbar-icon-info: #42b4ff; --color-text-flashbar-icon-success: #2bb534; --color-text-flashbar-icon-warning: #fbd332; --color-text-alert-icon-error: #ff7a7a; --color-text-alert-icon-info: #42b4ff; --color-text-alert-icon-success: #2bb534; --color-text-alert-icon-warning: #fbd332; --color-text-tutorial-hotspot-default: #42b4ff; --color-text-tutorial-hotspot-hover: #75cfff; } /* Context: toolbar-style app layout (page background) (Cloudscape .awsui-context-app-layout-toolbar) */ .cs-context-app-layout-toolbar { --color-background-layout-main: #fcfcfd; } /* Context: compact density for tables (Cloudscape .awsui-context-compact-table) */ .cs-context-compact-table { --size-vertical-input: 28px; --space-alert-vertical: 4px; --space-button-horizontal: 16px; --space-button-vertical: 2px; --space-token-vertical: 2px; --space-card-vertical-default: 12px; --space-tabs-vertical: 2px; --space-action-card-vertical-default: 12px; --space-scaled-xxxs: 0px; --space-scaled-xxs: 2px; --space-scaled-xs: 4px; --space-scaled-s: 8px; --space-scaled-m: 12px; --space-scaled-l: 16px; --space-scaled-xl: 20px; --space-scaled-xxl: 24px; --space-scaled-xxxl: 32px; --space-button-modal-dismiss-vertical: 0px; --space-item-card-vertical-default: 12px; --space-dialog-action-block: 2px; --space-container-header-bottom: 4px; --space-content-header-padding-bottom: 12px; --space-flashbar-vertical: 4px; --space-panel-content-bottom: 32px; --space-panel-content-top: 16px; --space-panel-header-vertical: 16px; --space-panel-side-right: 20px; --space-panel-split-top: 16px; --space-panel-split-bottom: 16px; --space-tabs-content-top: 8px; --space-action-card-description-padding-top: 2px; } /* Context: success/error/info/in-progress flash items (light text on colour) (Cloudscape .awsui-context-flashbar) */ .cs-context-flashbar { --color-background-button-normal-active: rgba(0, 7, 22, 0.2); --color-background-button-normal-default: transparent; --color-background-button-normal-hover: rgba(0, 7, 22, 0.15); --color-background-toggle-button-normal-default: transparent; --color-background-toggle-button-normal-hover: rgba(0, 7, 22, 0.15); --color-background-button-primary-default: #f9f9fa; --color-background-button-primary-hover: #ffffff; --color-background-progress-bar-value-default: #ffffff; --color-background-progress-bar-default: rgba(255, 255, 255, 0.25); --color-background-segment-default: transparent; --color-background-segment-hover: rgba(0, 7, 22, 0.15); --color-text-chat-bubble-outgoing: #f9f9fa; --color-text-chat-bubble-incoming: #f9f9fa; --color-border-button-normal-active: #ffffff; --color-border-button-normal-default: #f9f9fa; --color-border-toggle-button-normal-default: #f9f9fa; --color-border-toggle-button-normal-hover: #ffffff; --color-border-button-normal-hover: #ffffff; --color-border-button-primary-default: #f9f9fa; --color-border-button-primary-hover: #ffffff; --color-border-card: #f9f9fa; --color-border-divider-default: #f9f9fa; --color-border-item-focused: #f9f9fa; --color-text-body-default: #f9f9fa; --color-text-body-secondary: #f9f9fa; --color-text-button-inline-icon-default: #f9f9fa; --color-text-button-inline-icon-hover: #ffffff; --color-text-button-normal-active: #ffffff; --color-text-button-normal-default: #f9f9fa; --color-text-button-normal-hover: #ffffff; --color-text-button-link-active: #ffffff; --color-text-button-link-default: #f9f9fa; --color-text-button-link-hover: #ffffff; --color-text-expandable-section-default: #f9f9fa; --color-text-expandable-section-hover: #ffffff; --color-text-heading-secondary: #f9f9fa; --color-text-label: #f9f9fa; --color-text-link-default: #f9f9fa; --color-text-link-hover: #ffffff; --color-text-link-secondary-default: #f9f9fa; --color-text-link-secondary-hover: #ffffff; --color-text-link-info-default: #f9f9fa; --color-text-link-info-hover: #ffffff; --color-text-segment-hover: #ffffff; --color-text-status-error: #f9f9fa; --color-text-status-info: #f9f9fa; --color-text-status-success: #f9f9fa; --color-background-inline-code: rgba(0, 0, 0, 0.2); --color-text-tutorial-hotspot-default: #dedee3; --color-text-tutorial-hotspot-hover: #f9f9fa; --color-background-code-editor-gutter-active-line-error: #f9f9fa; --color-background-progress-bar-value-flash: #ffffff; --color-background-progress-bar-flash: rgba(255, 255, 255, 0.25); --color-background-slider-handle-error-default: #f9f9fa; --color-background-slider-handle-error-active: #f9f9fa; --color-background-slider-range-error-default: #f9f9fa; --color-background-slider-range-error-active: #f9f9fa; --color-text-side-navigation-item-default: #f9f9fa; --color-border-item-card: #f9f9fa; --color-border-divider-panel-bottom: #f9f9fa; --color-border-divider-panel-side: #f9f9fa; --color-border-dropdown-group: #f9f9fa; --color-border-dropdown-item-default: #f9f9fa; --color-border-panel-header: #f9f9fa; --color-border-dialog-default: #f9f9fa; --color-text-button-inline-link-hover: #ffffff; --color-text-link-button-normal-default: #f9f9fa; --color-text-link-button-normal-hover: #ffffff; --color-text-link-button-normal-active: #ffffff; --color-border-expandable-section-default: #f9f9fa; --color-text-key-value-pairs-value: #f9f9fa; --color-text-alert-default: #f9f9fa; --color-text-flashbar-icon-error: #f9f9fa; --color-text-flashbar-icon-info: #f9f9fa; --color-text-flashbar-icon-success: #f9f9fa; --color-text-alert-icon-error: #f9f9fa; --color-text-alert-icon-info: #f9f9fa; --color-text-alert-icon-success: #f9f9fa; } /* Context: warning flash items (dark text on yellow) (Cloudscape .awsui-context-flashbar-warning) */ .cs-context-flashbar-warning { --color-background-button-normal-active: rgba(0, 7, 22, 0.1); --color-background-button-normal-default: transparent; --color-background-button-normal-hover: rgba(0, 7, 22, 0.05); --color-background-toggle-button-normal-default: transparent; --color-background-toggle-button-normal-hover: rgba(0, 7, 22, 0.05); --color-background-button-primary-default: #424650; --color-background-button-primary-hover: #0f141a; --color-background-progress-bar-value-default: #0f141a; --color-background-progress-bar-default: rgba(0, 0, 0, 0.1); --color-background-segment-default: transparent; --color-background-segment-hover: rgba(0, 7, 22, 0.05); --color-border-button-normal-active: #0f141a; --color-border-button-normal-default: #424650; --color-border-toggle-button-normal-default: #424650; --color-border-toggle-button-normal-hover: #0f141a; --color-border-button-normal-hover: #0f141a; --color-border-button-primary-default: #424650; --color-border-button-primary-hover: #0f141a; --color-border-card: #0f141a; --color-border-divider-default: #0f141a; --color-border-item-focused: #0f141a; --color-text-body-secondary: #0f141a; --color-text-button-inline-icon-default: #0f141a; --color-text-button-inline-icon-hover: #0f141a; --color-text-button-normal-active: #0f141a; --color-text-button-normal-default: #424650; --color-text-button-normal-hover: #0f141a; --color-text-button-link-active: #0f141a; --color-text-button-link-default: #424650; --color-text-button-link-hover: #0f141a; --color-text-expandable-section-hover: #0f141a; --color-text-heading-secondary: #0f141a; --color-text-interactive-inverted-default: #424650; --color-text-interactive-inverted-hover: #0f141a; --color-text-link-default: #0f141a; --color-text-link-hover: #0f141a; --color-text-link-secondary-default: #0f141a; --color-text-link-secondary-hover: #0f141a; --color-text-link-info-default: #0f141a; --color-text-link-info-hover: #0f141a; --color-text-notification-default: #0f141a; --color-text-segment-hover: #0f141a; --color-text-status-warning: #0f141a; --color-text-badge-grey: #0f141a; --color-text-badge-green: #0f141a; --color-text-badge-blue: #0f141a; --color-text-badge-red: #0f141a; --color-text-link-button-normal-default: #0f141a; --color-text-link-button-normal-hover: #0f141a; --color-text-link-inverted-hover: #0f141a; --color-text-tutorial-hotspot-default: #656871; --color-text-tutorial-hotspot-hover: #131920; --color-background-progress-bar-value-flash: #0f141a; --color-background-progress-bar-flash: rgba(0, 0, 0, 0.1); --color-background-slider-handle-warning-default: #0f141a; --color-background-slider-handle-warning-active: #0f141a; --color-background-slider-range-warning-default: #0f141a; --color-background-slider-range-warning-active: #0f141a; --color-text-side-navigation-item-default: #0f141a; --color-border-item-card: #0f141a; --color-border-divider-panel-bottom: #0f141a; --color-border-divider-panel-side: #0f141a; --color-border-dropdown-group: #0f141a; --color-border-dropdown-item-default: #0f141a; --color-border-panel-header: #0f141a; --color-border-dialog-default: #0f141a; --color-text-button-inline-link-hover: #0f141a; --color-text-link-button-normal-active: #0f141a; --color-border-expandable-section-default: #0f141a; --color-text-link-inverted-default: #0f141a; --color-text-flashbar-icon-warning: #0f141a; --color-text-alert-icon-warning: #0f141a; } /* Context: buttons and dividers inside an Alert (neutral grey) (Cloudscape .awsui-context-alert) */ .cs-context-alert { --color-background-button-normal-active: rgba(0, 7, 22, 0.1); --color-background-button-normal-default: transparent; --color-background-button-normal-hover: rgba(0, 7, 22, 0.05); --color-background-toggle-button-normal-default: transparent; --color-background-toggle-button-normal-hover: rgba(0, 7, 22, 0.05); --color-background-button-primary-default: #424650; --color-background-button-primary-hover: #0f141a; --color-background-segment-default: transparent; --color-background-segment-hover: rgba(0, 7, 22, 0.05); --color-border-button-normal-active: #0f141a; --color-border-button-normal-default: #424650; --color-border-toggle-button-normal-default: #424650; --color-border-toggle-button-normal-hover: #0f141a; --color-border-button-normal-hover: #0f141a; --color-border-button-primary-default: #424650; --color-border-button-primary-hover: #0f141a; --color-border-card: #424650; --color-border-divider-default: #424650; --color-text-button-normal-active: #0f141a; --color-text-button-normal-default: #424650; --color-text-button-normal-hover: #0f141a; --color-text-button-link-active: #0f141a; --color-text-button-link-default: #424650; --color-text-button-link-hover: #0f141a; --color-text-expandable-section-default: #424650; --color-text-expandable-section-hover: #0f141a; --color-text-segment-hover: #0f141a; --font-size-expandable-heading: 14px; --color-border-item-card: #424650; --color-border-divider-panel-bottom: #424650; --color-border-divider-panel-side: #424650; --color-border-dropdown-group: #424650; --color-border-dropdown-item-default: #424650; --color-border-panel-header: #424650; --color-border-dialog-default: #424650; --color-text-button-inline-link-hover: #0f141a; --color-text-link-button-normal-active: #0f141a; --color-border-expandable-section-default: #424650; } /* Reduced motion: the motion tokens' 'disabled' values */ @media (prefers-reduced-motion: reduce) { :root { --motion-duration-avatar-gen-ai-gradient: 0ms; --motion-duration-avatar-loading-dots: 0ms; --motion-duration-responsive: 0ms; --motion-duration-expressive: 0ms; --motion-duration-complex: 0ms; --motion-duration-tooltip-enter: 0ms; --motion-duration-extra-slow: 0ms; --motion-duration-fast: 0ms; --motion-duration-moderate: 0ms; --motion-duration-refresh-only-fast: 0ms; --motion-duration-refresh-only-medium: 0ms; --motion-duration-refresh-only-slow: 0ms; --motion-duration-slow: 0ms; --motion-duration-rotate-180: 0ms; --motion-duration-rotate-90: 0ms; --motion-duration-show-paced: 0ms; --motion-duration-show-quick: 0ms; --motion-duration-transition-quick: 0ms; --motion-duration-transition-show-paced: 0ms; --motion-duration-transition-show-quick: 0ms; --motion-duration-expandable-content-enter: 0ms; } }