diff --git a/package.json b/package.json index 76b3f3a64d3..340a21ddc02 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "packageManager": "yarn@4.4.0", "resolutions": { "broccoli-asset-rewrite@^2.0.0": "patch:broccoli-asset-rewrite@npm%3A2.0.0#./.yarn/patches/broccoli-asset-rewrite-npm-2.0.0-c4ce42084a.patch", - "@glint/environment-ember-loose": "patch:@glint/environment-ember-loose@npm%3A1.4.0#~/.yarn/patches/@glint-environment-ember-loose-npm-1.4.0-31c2f31bcb.patch" + "@glint/environment-ember-loose": "patch:@glint/environment-ember-loose@npm%3A1.4.0#~/.yarn/patches/@glint-environment-ember-loose-npm-1.4.0-31c2f31bcb.patch", + "style-dictionary": "portal:/Users/cristianorastelli/src/github/style-dictionary-didoo" } } diff --git a/packages/components/package.json b/packages/components/package.json index e99077b6bb4..87b33c0e107 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -17,9 +17,10 @@ "license": "MPL-2.0", "author": "HashiCorp Design Systems ", "scripts": { - "build": "concurrently 'npm:build:*'", + "build": "concurrently 'npm:build:js' 'npm:build:types'", "build:js": "rollup --config", "build:types": "glint --declaration", + "build:watch": "nodemon --watch '../tokens/dist/*' --ext 'css' --exec 'yarn build'", "prepublishOnly": "yarn build && test -f 'dist/styles/@hashicorp/design-system-components.css' || (echo 'The pre-compiled CSS file was not found' && exit 1)", "start": "concurrently 'yarn:start:*'", "start:js": "rollup --config --watch --environment development", @@ -99,6 +100,7 @@ "eslint-plugin-n": "^17.7.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-qunit": "^8.1.1", + "nodemon": "^3.1.7", "postcss": "^8.4.47", "prettier": "^3.3.2", "rollup": "^4.22.4", @@ -288,6 +290,7 @@ "./components/hds/text/code.js": "./dist/_app_/components/hds/text/code.js", "./components/hds/text/display.js": "./dist/_app_/components/hds/text/display.js", "./components/hds/text/index.js": "./dist/_app_/components/hds/text/index.js", + "./components/hds/theme-switcher/index.js": "./dist/_app_/components/hds/theme-switcher/index.js", "./components/hds/time/index.js": "./dist/_app_/components/hds/time/index.js", "./components/hds/time/range.js": "./dist/_app_/components/hds/time/range.js", "./components/hds/time/single.js": "./dist/_app_/components/hds/time/single.js", @@ -303,6 +306,7 @@ "./modifiers/hds-clipboard.js": "./dist/_app_/modifiers/hds-clipboard.js", "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js", "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js", + "./services/hds-theming.js": "./dist/_app_/services/hds-theming.js", "./services/hds-time.js": "./dist/_app_/services/hds-time.js" } }, diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index eeba87b8392..7fd9a723154 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -22,6 +22,9 @@ const plugins = [ 'index.js', 'template-registry.js', 'styles/@hashicorp/design-system-components.scss', + // TODO they're added to the main CSS file, unfortunately → discuss with Alex what we can do + // 'styles/@hashicorp/design-system-components--themed-with-prefers-color-scheme.scss', + // 'styles/@hashicorp/design-system-components--themed-with-css-selectors.scss', ]), // These are the modules that should get reexported into the traditional @@ -55,6 +58,31 @@ const plugins = [ ], }), + // TODO they're added to the main CSS file, unfortunately → discuss with Alex what we can do + // scss({ + // fileName: + // 'styles/@hashicorp/design-system-components--themed-with-prefers-color-scheme.css', + // includePaths: [ + // '../../node_modules/@hashicorp/design-system-tokens/dist/products/css', + // ], + // }), + // scss({ + // fileName: + // 'styles/@hashicorp/design-system-components--themed-with-css-selectors.css', + // includePaths: [ + // '../../node_modules/@hashicorp/design-system-tokens/dist/products/css', + // ], + // }), + // TODO let's try this workaround... + scss({ + fileName: + 'styles/@hashicorp/design-system-components--themed-with-prefers-color-scheme.css', + }), + scss({ + fileName: + 'styles/@hashicorp/design-system-components--themed-with-css-selectors.css', + }), + scss({ fileName: 'styles/@hashicorp/design-system-power-select-overrides.css', }), diff --git a/packages/components/src/components/hds/theme-switcher/index.hbs b/packages/components/src/components/hds/theme-switcher/index.hbs new file mode 100644 index 00000000000..4486348faff --- /dev/null +++ b/packages/components/src/components/hds/theme-switcher/index.hbs @@ -0,0 +1,11 @@ +{{! + Copyright (c) HashiCorp, Inc. + SPDX-License-Identifier: MPL-2.0 +}} + + + + {{#each-in this._options as |key data|}} + {{data.label}} + {{/each-in}} + diff --git a/packages/components/src/components/hds/theme-switcher/index.ts b/packages/components/src/components/hds/theme-switcher/index.ts new file mode 100644 index 00000000000..4f6ec8fb882 --- /dev/null +++ b/packages/components/src/components/hds/theme-switcher/index.ts @@ -0,0 +1,63 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import { inject as service } from '@ember/service'; +import { action } from '@ember/object'; + +import type { HdsDropdownSignature } from '../dropdown/index.ts'; +import type { HdsDropdownToggleButtonSignature } from '../dropdown/toggle/button.ts'; +import type HdsThemingService from '../../../services/hds-theming.ts'; +import { type HdsThemes } from '../../../services/hds-theming.ts'; + +export const OPTIONS = { + none: { theme: undefined, icon: 'minus', label: 'None' }, + system: { theme: 'system', icon: 'monitor', label: 'System' }, + light: { theme: 'light', icon: 'sun', label: 'Light' }, + dark: { theme: 'dark', icon: 'moon', label: 'Dark' }, +} as const; + +export interface HdsThemeSwitcherSignature { + Args: { + toggleSize?: HdsDropdownToggleButtonSignature['Args']['size']; + toggleIsFullWidth?: boolean; + }; + Element: HdsDropdownSignature['Element']; +} + +export default class HdsThemeSwitcher extends Component { + @service declare readonly hdsTheming: HdsThemingService; + + _options = OPTIONS; + + get toggleSize() { + return this.args.toggleSize ?? 'small'; + } + + get toggleContent() { + switch (this.currentTheme) { + case 'system': + case 'light': + case 'dark': + return { + label: OPTIONS[this.currentTheme].label, + icon: OPTIONS[this.currentTheme].icon, + }; + case undefined: + default: + return { label: 'Theme', icon: undefined }; + } + } + + get currentTheme() { + return this.hdsTheming.currentTheme; + } + + @action + setTheme(theme: HdsThemes): void { + // we set the theme in the global service + this.hdsTheming.setTheme(theme); + } +} diff --git a/packages/components/src/services.ts b/packages/components/src/services.ts index 2650e722d57..9f61ec10978 100644 --- a/packages/components/src/services.ts +++ b/packages/components/src/services.ts @@ -4,3 +4,5 @@ */ // This file is used to expose public services + +export * from './services/hds-theming.ts'; diff --git a/packages/components/src/services/hds-theming.ts b/packages/components/src/services/hds-theming.ts new file mode 100644 index 00000000000..5a51049bd2b --- /dev/null +++ b/packages/components/src/services/hds-theming.ts @@ -0,0 +1,61 @@ +import Service from '@ember/service'; +import { tracked } from '@glimmer/tracking'; + +export const LOCALSTORAGE_KEY = 'hds-current-theme'; + +export enum HdsThemeValues { + System = 'system', + Light = 'light', + Dark = 'dark', +} + +export type HdsThemes = `${HdsThemeValues}` | undefined; + +export const THEMES: string[] = Object.values(HdsThemeValues); + +export default class HdsThemingService extends Service { + @tracked currentTheme: HdsThemes = undefined; + + constructor(owner: object | undefined) { + super(owner); + this.initializeTheme(); + } + + initializeTheme() { + const _initialTheme = localStorage.getItem(LOCALSTORAGE_KEY); + if ( + _initialTheme === 'system' || + _initialTheme === 'light' || + _initialTheme === 'dark' + ) { + this.setTheme(_initialTheme); + } + } + + getTheme(): HdsThemes { + return this.currentTheme; + } + + setTheme(theme: HdsThemes) { + // console.log('setting HDS theme', theme); + + if (theme === undefined) { + localStorage.removeItem(LOCALSTORAGE_KEY); + } else { + localStorage.setItem(LOCALSTORAGE_KEY, theme); + } + + // IMPORTANT: for this to work, it needs to be the HTML tag (it's the `:root` in CSS) + const rootElement = document.querySelector('html'); + + if (rootElement) { + if (theme === undefined) { + rootElement.removeAttribute('data-hds-theme'); + this.currentTheme = undefined; + } else { + rootElement.setAttribute('data-hds-theme', theme); + this.currentTheme = theme; + } + } + } +} diff --git a/packages/components/src/styles/@hashicorp/design-system-components--themed-with-css-selectors.css b/packages/components/src/styles/@hashicorp/design-system-components--themed-with-css-selectors.css new file mode 100644 index 00000000000..4d1676f4eb2 --- /dev/null +++ b/packages/components/src/styles/@hashicorp/design-system-components--themed-with-css-selectors.css @@ -0,0 +1,8248 @@ +@charset "UTF-8"; +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Do not edit directly, this file was auto-generated. + */ +.hds-theme-dark, +[data-hds-theme=dark] { + --token-color-palette-blue-500: #ff0000; + --token-color-palette-blue-400: #ff0000; + --token-color-palette-blue-300: #ff0000; + --token-color-palette-blue-200: #ff0000; + --token-color-palette-blue-100: #ff0000; + --token-color-palette-blue-50: #ff0000; + --token-color-palette-purple-500: #ff0000; + --token-color-palette-purple-400: #ff0000; + --token-color-palette-purple-300: #ff0000; + --token-color-palette-purple-200: #ff0000; + --token-color-palette-purple-100: #ff0000; + --token-color-palette-purple-50: #ff0000; + --token-color-palette-green-500: #ff0000; + --token-color-palette-green-400: #ff0000; + --token-color-palette-green-300: #ff0000; + --token-color-palette-green-200: #ff0000; + --token-color-palette-green-100: #ff0000; + --token-color-palette-green-50: #ff0000; + --token-color-palette-amber-500: #ff0000; + --token-color-palette-amber-400: #ff0000; + --token-color-palette-amber-300: #ff0000; + --token-color-palette-amber-200: #ff0000; + --token-color-palette-amber-100: #ff0000; + --token-color-palette-amber-50: #ff0000; + --token-color-palette-red-500: #ff0000; + --token-color-palette-red-400: #ff0000; + --token-color-palette-red-300: #ff0000; + --token-color-palette-red-200: #ff0000; + --token-color-palette-red-100: #ff0000; + --token-color-palette-red-50: #ff0000; + --token-color-palette-neutral-700: #ff0000; + --token-color-palette-neutral-600: #ff0000; + --token-color-palette-neutral-500: #ff0000; + --token-color-palette-neutral-400: #ff0000; + --token-color-palette-neutral-300: #ff0000; + --token-color-palette-neutral-200: #ff0000; + --token-color-palette-neutral-100: #ff0000; + --token-color-palette-neutral-50: #ff0000; + --token-color-palette-neutral-0: #ff0000; + --token-color-palette-alpha-300: #ff000066; + --token-color-palette-alpha-200: #ff000033; + --token-color-palette-alpha-100: #ff00001a; +} + +.hds-theme-light, +[data-hds-theme=light] { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} + +:root { + --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-boundary-gradient-faint-start: #fffafa; /* this is the 'boundary-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-start: #fff9fb; /* this is the 'consul-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-start: #f3fff9; /* this is the 'nomad-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-start: #f3fcff; /* this is the 'packer-50' value at 25% opacity on white */ + --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-gradient-faint-start: #fcfaff; /* this is the 'terraform-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vault-radar-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */ + --token-color-vault-radar-gradient-faint-start: #fffdf2; /* this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-gradient-faint-start: #fffdf2; /* this is the 'vault-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */ + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var( + --token-color-palette-neutral-200 + ); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-color-foreground-primary: var( + --token-color-foreground-primary + ); + --token-app-side-nav-color-foreground-strong: var( + --token-color-foreground-primary + ); + --token-app-side-nav-color-foreground-faint: var( + --token-color-foreground-faint + ); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-color-surface-interactive-hover: var( + --token-color-surface-interactive-hover + ); + --token-app-side-nav-color-surface-interactive-active: var( + --token-color-palette-neutral-300 + ); + --token-badge-count-padding-horizontal-small: 7px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-medium: 11px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-large: 13px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-height-small: 20px; + --token-badge-height-medium: 24px; + --token-badge-height-large: 32px; + --token-badge-padding-horizontal-small: 5px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-medium: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-large: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-small: 1px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-medium: 3px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-large: 3px; /* here we're taking into account the 1px border */ + --token-badge-icon-size-small: 12px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-large: 16px; + --token-badge-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-medium: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-large: 1rem; /* 16px/1rem */ + --token-badge-line-height-small: 1.2308; /* 16px */ + --token-badge-line-height-medium: 1.2308; /* 16px */ + --token-badge-line-height-large: 1.5; /* 24px */ + --token-badge-gap-small: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-large: 6px; + --token-badge-border-width: 1px; + --token-badge-border-radius: 5px; + --token-button-critical-box-shadow-focus: none; + --token-button-critical-box-shadow-active: none; + --token-button-disabled-box-shadow: none; + --token-button-height-small: 28px; + --token-button-height-medium: 36px; + --token-button-height-large: 48px; + --token-button-padding-horizontal-small: 11px; /* here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /* here we're taking into account the 1px border */ + --token-button-padding-horizontal-large: 19px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 9px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 11px; /* here we're taking into account the 1px border */ + --token-button-icon-size-small: 12px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-large: 24px; + --token-button-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-button-font-size-medium: 0.875rem; /* 14px/0.875rem */ + --token-button-font-size-large: 1rem; /* 16px/1rem */ + --token-button-line-height-small: 1.0769; /* 14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-button-line-height-medium: 1.1428; /* 16px */ + --token-button-line-height-large: 1.5; /* 24px */ + --token-button-gap: 6px; + --token-button-border-width: 1px; + --token-button-border-radius: 5px; + --token-button-box-shadow-focus: none; + --token-button-focus-border-width: 3px; + --token-button-focus-border-radius: 0px; + --token-button-primary-box-shadow-focus: none; + --token-button-primary-box-shadow-active: none; + --token-button-secondary-box-shadow-focus: none; + --token-button-secondary-box-shadow-active: none; + --token-button-tertiary-surface-default: rgba(0, 0, 0, 0); + --token-button-tertiary-border-color-default: rgba(0, 0, 0, 0); + --token-button-tertiary-box-shadow-default: none; + --token-button-tertiary-box-shadow-focus: none; + --token-button-tertiary-box-shadow-active: none; + --token-form-visibility-toggle-size: 24px; + --token-form-visibility-toggle-padding: 3px; /* here we're taking into account the 1px border */ + --token-form-visibility-toggle-background-color: rgba(0, 0, 0, 0); + --token-form-visibility-toggle-border-width: 1px; + --token-form-visibility-toggle-border-color: rgba(0, 0, 0, 0); + --token-form-error-icon-size: 14px; + --token-form-error-icon-margin-horizontal: 0px; + --token-form-error-icon-margin-vertical: 2px; /* This extra margin is used for vertical optical alignment. */ + --token-form-error-gap: 8px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-file-input-margin-right: 16px; + --token-form-control-focus-outline-width: 3px; + --token-form-control-focus-outline-offset: 0px; + --token-form-control-standard-height: 32px; /* Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size). */ + --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-padding-with-icon: 31px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon. */ + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-masked-input-copy-button-margin-right: 8px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-outline-offset: 1px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-group-legend-margin-bottom: 12px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-box-shadow-disabled: none; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-outline-offset: 0px; + --token-form-text-area-outline-offset: 0px; + --token-form-text-input-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */ + --token-form-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier( + 0.68, + -0.2, + 0.265, + 1.15 + ); + --token-form-toggle-thumb-border-radius: 50%px; + --token-form-toggle-outline-width: 3px; + --token-form-toggle-outline-offset: 1px; + --token-outline-offset: 0px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-divider-height: 1px; + --token-tooltip-border-radius: 5px; + --token-tooltip-color-foreground-primary: var( + --token-color-foreground-high-contrast + ); + --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700); + --token-tooltip-focus-offset: -2px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; + --token-typography-display-500-font-size: 1.875rem; /* 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /* 38px */ + --token-typography-display-400-font-size: 1.5rem; /* 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /* 32px */ + --token-typography-display-300-font-size: 1.125rem; /* 18px/1.125rem */ + --token-typography-display-300-line-height: 1.3333; /* 24px */ + --token-typography-display-300-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-200-font-size: 1rem; /* 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /* 24px */ + --token-typography-display-200-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.3846; /* 18px */ + --token-typography-body-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /* 24px */ + --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /* 20px */ + --token-typography-body-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /* 18px */ + --token-typography-code-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /* 16px */ + --token-typography-code-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /* 18px */ + --token-typography-code-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /* 20px */ + --token-color-border-action: var(--token-color-palette-blue-100); + --token-color-border-highlight: var(--token-color-palette-purple-100); + --token-color-border-success: var(--token-color-palette-green-100); + --token-color-border-warning: var(--token-color-palette-amber-100); + --token-color-border-critical: var(--token-color-palette-red-100); + --token-color-focus-action-internal: var(--token-color-palette-blue-300); + --token-color-focus-critical-internal: var(--token-color-palette-red-300); + --token-color-foreground-strong: var(--token-color-palette-neutral-700); + --token-color-foreground-primary: var(--token-color-palette-neutral-600); + --token-color-foreground-faint: var(--token-color-palette-neutral-500); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-color-foreground-disabled: var(--token-color-palette-neutral-400); + --token-color-foreground-action: var(--token-color-palette-blue-200); + --token-color-foreground-action-hover: var(--token-color-palette-blue-300); + --token-color-foreground-action-active: var(--token-color-palette-blue-400); + --token-color-foreground-highlight: var(--token-color-palette-purple-200); + --token-color-foreground-highlight-on-surface: var( + --token-color-palette-purple-300 + ); + --token-color-foreground-highlight-high-contrast: var( + --token-color-palette-purple-500 + ); + --token-color-foreground-success: var(--token-color-palette-green-200); + --token-color-foreground-success-on-surface: var( + --token-color-palette-green-300 + ); + --token-color-foreground-success-high-contrast: var( + --token-color-palette-green-500 + ); + --token-color-foreground-warning: var(--token-color-palette-amber-200); + --token-color-foreground-warning-on-surface: var( + --token-color-palette-amber-300 + ); + --token-color-foreground-warning-high-contrast: var( + --token-color-palette-amber-500 + ); + --token-color-foreground-critical: var(--token-color-palette-red-200); + --token-color-foreground-critical-on-surface: var( + --token-color-palette-red-300 + ); + --token-color-foreground-critical-high-contrast: var( + --token-color-palette-red-500 + ); + --token-color-page-primary: var(--token-color-palette-neutral-0); + --token-color-page-faint: var(--token-color-palette-neutral-50); + --token-color-surface-primary: var(--token-color-palette-neutral-0); + --token-color-surface-faint: var(--token-color-palette-neutral-50); + --token-color-surface-strong: var(--token-color-palette-neutral-100); + --token-color-surface-interactive: var(--token-color-palette-neutral-0); + --token-color-surface-interactive-hover: var( + --token-color-palette-neutral-100 + ); + --token-color-surface-interactive-active: var( + --token-color-palette-neutral-200 + ); + --token-color-surface-interactive-disabled: var( + --token-color-palette-neutral-50 + ); + --token-color-surface-action: var(--token-color-palette-blue-50); + --token-color-surface-highlight: var(--token-color-palette-purple-50); + --token-color-surface-success: var(--token-color-palette-green-50); + --token-color-surface-warning: var(--token-color-palette-amber-50); + --token-color-surface-critical: var(--token-color-palette-red-50); + --token-color-hashicorp-brand: var(--token-color-palette-hashicorp-brand); + --token-color-boundary-brand: var(--token-color-palette-boundary-brand); + --token-color-boundary-foreground: var(--token-color-palette-boundary-500); + --token-color-boundary-surface: var(--token-color-palette-boundary-50); + --token-color-boundary-border: var(--token-color-palette-boundary-100); + --token-color-boundary-gradient-primary-start: var( + --token-color-palette-boundary-300 + ); + --token-color-boundary-gradient-primary-stop: var( + --token-color-palette-boundary-400 + ); + --token-color-boundary-gradient-faint-stop: var( + --token-color-palette-boundary-50 + ); + --token-color-consul-brand: var(--token-color-palette-consul-brand); + --token-color-consul-foreground: var(--token-color-palette-consul-500); + --token-color-consul-surface: var(--token-color-palette-consul-50); + --token-color-consul-border: var(--token-color-palette-consul-100); + --token-color-consul-gradient-primary-start: var( + --token-color-palette-consul-300 + ); + --token-color-consul-gradient-primary-stop: var( + --token-color-palette-consul-400 + ); + --token-color-consul-gradient-faint-stop: var( + --token-color-palette-consul-50 + ); + --token-color-hcp-brand: var(--token-color-palette-hcp-brand); + --token-color-nomad-brand: var(--token-color-palette-nomad-brand); + --token-color-nomad-foreground: var(--token-color-palette-nomad-500); + --token-color-nomad-surface: var(--token-color-palette-nomad-50); + --token-color-nomad-border: var(--token-color-palette-nomad-100); + --token-color-nomad-gradient-primary-start: var( + --token-color-palette-nomad-100 + ); + --token-color-nomad-gradient-primary-stop: var( + --token-color-palette-nomad-200 + ); + --token-color-nomad-gradient-faint-stop: var(--token-color-palette-nomad-50); + --token-color-packer-brand: var(--token-color-palette-packer-brand); + --token-color-packer-foreground: var(--token-color-palette-packer-500); + --token-color-packer-surface: var(--token-color-palette-packer-50); + --token-color-packer-border: var(--token-color-palette-packer-100); + --token-color-packer-gradient-primary-start: var( + --token-color-palette-packer-100 + ); + --token-color-packer-gradient-primary-stop: var( + --token-color-palette-packer-200 + ); + --token-color-packer-gradient-faint-stop: var( + --token-color-palette-packer-50 + ); + --token-color-terraform-brand: var(--token-color-palette-terraform-brand); + --token-color-terraform-foreground: var(--token-color-palette-terraform-500); + --token-color-terraform-surface: var(--token-color-palette-terraform-50); + --token-color-terraform-border: var(--token-color-palette-terraform-100); + --token-color-terraform-gradient-primary-start: var( + --token-color-palette-terraform-300 + ); + --token-color-terraform-gradient-primary-stop: var( + --token-color-palette-terraform-400 + ); + --token-color-terraform-gradient-faint-stop: var( + --token-color-palette-terraform-50 + ); + --token-color-vagrant-brand: var(--token-color-palette-vagrant-brand); + --token-color-vagrant-foreground: var(--token-color-palette-vagrant-500); + --token-color-vagrant-surface: var(--token-color-palette-vagrant-50); + --token-color-vagrant-border: var(--token-color-palette-vagrant-100); + --token-color-vagrant-gradient-primary-start: var( + --token-color-palette-vagrant-300 + ); + --token-color-vagrant-gradient-primary-stop: var( + --token-color-palette-vagrant-400 + ); + --token-color-vagrant-gradient-faint-stop: var( + --token-color-palette-vagrant-50 + ); + --token-color-vault-radar-brand: var(--token-color-palette-vault-radar-brand); + --token-color-vault-radar-foreground: var( + --token-color-palette-vault-radar-500 + ); + --token-color-vault-radar-surface: var(--token-color-palette-vault-radar-50); + --token-color-vault-radar-border: var(--token-color-palette-vault-radar-100); + --token-color-vault-radar-gradient-primary-start: var( + --token-color-palette-vault-radar-100 + ); + --token-color-vault-radar-gradient-primary-stop: var( + --token-color-palette-vault-radar-200 + ); + --token-color-vault-radar-gradient-faint-stop: var( + --token-color-palette-vault-radar-50 + ); + --token-color-vault-secrets-brand: var( + --token-color-palette-vault-secrets-brand + ); + --token-color-vault-secrets-foreground: var( + --token-color-palette-vault-secrets-500 + ); + --token-color-vault-secrets-surface: var( + --token-color-palette-vault-secrets-50 + ); + --token-color-vault-secrets-border: var( + --token-color-palette-vault-secrets-100 + ); + --token-color-vault-secrets-gradient-primary-start: var( + --token-color-palette-vault-secrets-100 + ); + --token-color-vault-secrets-gradient-primary-stop: var( + --token-color-palette-vault-secrets-200 + ); + --token-color-vault-secrets-gradient-faint-stop: var( + --token-color-palette-vault-secrets-50 + ); + --token-color-vault-brand: var(--token-color-palette-vault-brand); + --token-color-vault-foreground: var(--token-color-palette-vault-500); + --token-color-vault-surface: var(--token-color-palette-vault-50); + --token-color-vault-border: var(--token-color-palette-vault-100); + --token-color-vault-gradient-primary-start: var( + --token-color-palette-vault-100 + ); + --token-color-vault-gradient-primary-stop: var( + --token-color-palette-vault-200 + ); + --token-color-vault-gradient-faint-stop: var(--token-color-palette-vault-50); + --token-color-waypoint-brand: var(--token-color-palette-waypoint-brand); + --token-color-waypoint-foreground: var(--token-color-palette-waypoint-500); + --token-color-waypoint-surface: var(--token-color-palette-waypoint-50); + --token-color-waypoint-border: var(--token-color-palette-waypoint-100); + --token-color-waypoint-gradient-primary-start: var( + --token-color-palette-waypoint-100 + ); + --token-color-waypoint-gradient-primary-stop: var( + --token-color-palette-waypoint-200 + ); + --token-color-waypoint-gradient-faint-stop: var( + --token-color-palette-waypoint-50 + ); + --token-badge-font-weight: var(--token-typography-font-weight-medium); + --token-badge-filled-neutral-dark-mode-background-color: var( + --token-color-palette-neutral-500 + ); + --token-badge-inverted-neutral-background-color: var( + --token-color-palette-neutral-500 + ); + --token-badge-inverted-highlight-background-color: var( + --token-color-palette-purple-200 + ); + --token-badge-inverted-success-background-color: var( + --token-color-palette-green-200 + ); + --token-badge-inverted-warning-background-color: var( + --token-color-palette-amber-200 + ); + --token-badge-inverted-critical-background-color: var( + --token-color-palette-red-200 + ); + --token-badge-outlined-neutral-border-color: var( + --token-color-palette-neutral-500 + ); + --token-badge-outlined-neutral-dark-mode-border-color: var( + --token-color-palette-neutral-50 + ); + --token-badge-outlined-highlight-border-color: var( + --token-color-palette-purple-200 + ); + --token-badge-outlined-success-border-color: var( + --token-color-palette-green-200 + ); + --token-badge-outlined-warning-border-color: var( + --token-color-palette-amber-200 + ); + --token-badge-outlined-critical-border-color: var( + --token-color-palette-red-200 + ); + --token-button-critical-surface-hover: var(--token-color-palette-red-300); + --token-button-critical-surface-active: var(--token-color-palette-red-400); + --token-button-critical-border-color-hover: var( + --token-color-palette-red-400 + ); + --token-button-critical-border-color-active: var( + --token-color-palette-red-400 + ); + --token-button-font-weight: var( + --token-typography-font-weight-regular + ); /* notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099 */ + --token-button-primary-surface-default: var(--token-color-palette-blue-200); + --token-button-primary-surface-hover: var(--token-color-palette-blue-400); + --token-button-primary-surface-focus: var(--token-color-palette-blue-200); + --token-button-primary-surface-active: var(--token-color-palette-blue-400); + --token-button-primary-border-color-default: var( + --token-color-palette-blue-300 + ); + --token-button-primary-border-color-hover: var( + --token-color-palette-blue-400 + ); + --token-button-primary-border-color-active: var( + --token-color-palette-blue-400 + ); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-file-input-min-height: var(--token-form-control-standard-height); + --token-form-control-base-border-color-default: var( + --token-color-palette-neutral-400 + ); + --token-form-control-base-border-color-hover: var( + --token-color-palette-neutral-500 + ); + --token-form-control-checked-surface-color-default: var( + --token-color-palette-blue-200 + ); + --token-form-control-checked-surface-color-hover: var( + --token-color-palette-blue-300 + ); + --token-form-control-checked-border-color-default: var( + --token-color-palette-blue-300 + ); + --token-form-control-checked-border-color-hover: var( + --token-color-palette-blue-400 + ); + --token-form-control-invalid-border-color-default: var( + --token-color-palette-red-300 + ); + --token-form-control-invalid-border-color-hover: var( + --token-color-palette-red-400 + ); + --token-form-control-invalid-outline-color: var( + --token-color-focus-critical-external + ); + --token-form-control-focus-outline-color: var( + --token-color-focus-action-external + ); + --token-form-masked-input-toggle-button-size: var( + --token-form-visibility-toggle-size + ); + --token-form-select-background-image-position-right-x: var( + --token-form-control-padding + ); + --token-form-text-area-min-height: var(--token-form-control-standard-height); + --token-form-text-input-background-image-position-x: var( + --token-form-control-padding + ); + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-typography-font-stack-display: var( + --token-typography-font-stack-sans-display-mac-os + ), + var(--token-typography-font-stack-sans-display-windows), + var(--token-typography-font-stack-sans-display-sans), + var(--token-typography-font-stack-sans-display-emoji); + --token-typography-font-stack-text: var( + --token-typography-font-stack-sans-text-mac-os + ), + var(--token-typography-font-stack-sans-text-windows), + var(--token-typography-font-stack-sans-display-sans), + var(--token-typography-font-stack-sans-text-emoji); + --token-typography-font-stack-code: var( + --token-typography-font-stack-monospace-code-mac-os + ), + var(--token-typography-font-stack-monospace-code-windows), monospace; + --token-color-border-primary: var(--token-color-palette-alpha-200); + --token-color-border-faint: var(--token-color-palette-alpha-100); + --token-color-border-strong: var(--token-color-palette-alpha-300); + --token-elevation-inset-box-shadow: var( + --token-elevation-inset-box-shadow-01 + ); + --token-elevation-low-box-shadow: var(--token-elevation-low-box-shadow-01), + var(--token-elevation-low-box-shadow-02); + --token-elevation-mid-box-shadow: var(--token-elevation-mid-box-shadow-01), + var(--token-elevation-mid-box-shadow-02); + --token-elevation-high-box-shadow: var(--token-elevation-high-box-shadow-01), + var(--token-elevation-high-box-shadow-02); + --token-elevation-higher-box-shadow: var( + --token-elevation-higher-box-shadow-01 + ), + var(--token-elevation-higher-box-shadow-02); + --token-elevation-overlay-box-shadow: var( + --token-elevation-overlay-box-shadow-01 + ), + var(--token-elevation-overlay-box-shadow-02); + --token-surface-inset-box-shadow: var( + --token-elevation-inset-box-shadow-border + ), + var(--token-elevation-inset-box-shadow); + --token-surface-base-box-shadow: var( + --token-elevation-base-box-shadow-border + ); + --token-surface-low-box-shadow: var(--token-elevation-low-box-shadow-border), + var(--token-elevation-low-box-shadow); + --token-surface-mid-box-shadow: var(--token-elevation-mid-box-shadow-border), + var(--token-elevation-mid-box-shadow); + --token-surface-high-box-shadow: var(--token-elevation-high-box-shadow-border), + var(--token-elevation-high-box-shadow); + --token-surface-higher-box-shadow: var( + --token-elevation-higher-box-shadow-border + ), + var(--token-elevation-higher-box-shadow); + --token-surface-overlay-box-shadow: var( + --token-elevation-overlay-box-shadow-border + ), + var(--token-elevation-overlay-box-shadow); + --token-badge-font-family: var(--token-typography-font-stack-text); + --token-badge-filled-neutral-foreground-color: var( + --token-color-foreground-primary + ); + --token-badge-filled-neutral-background-color: var( + --token-color-surface-strong + ); + --token-badge-filled-neutral-dark-mode-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-filled-highlight-foreground-color: var( + --token-color-foreground-highlight-on-surface + ); + --token-badge-filled-highlight-background-color: var( + --token-color-surface-highlight + ); + --token-badge-filled-success-foreground-color: var( + --token-color-foreground-success-on-surface + ); + --token-badge-filled-success-background-color: var( + --token-color-surface-success + ); + --token-badge-filled-warning-foreground-color: var( + --token-color-foreground-warning-on-surface + ); + --token-badge-filled-warning-background-color: var( + --token-color-surface-warning + ); + --token-badge-filled-critical-foreground-color: var( + --token-color-foreground-critical-on-surface + ); + --token-badge-filled-critical-background-color: var( + --token-color-surface-critical + ); + --token-badge-inverted-neutral-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-inverted-neutral-dark-mode-foreground-color: var( + --token-color-foreground-primary + ); + --token-badge-inverted-neutral-dark-mode-background-color: var( + --token-color-surface-faint + ); + --token-badge-inverted-highlight-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-inverted-success-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-inverted-warning-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-inverted-critical-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-outlined-neutral-foreground-color: var( + --token-color-foreground-primary + ); + --token-badge-outlined-neutral-dark-mode-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-outlined-highlight-foreground-color: var( + --token-color-foreground-highlight + ); + --token-badge-outlined-success-foreground-color: var( + --token-color-foreground-success + ); + --token-badge-outlined-warning-foreground-color: var( + --token-color-foreground-warning + ); + --token-badge-outlined-critical-foreground-color: var( + --token-color-foreground-critical + ); + --token-button-critical-foreground-default: var( + --token-color-foreground-critical-on-surface + ); + --token-button-critical-foreground-hover: var( + --token-color-foreground-high-contrast + ); + --token-button-critical-foreground-focus: var( + --token-color-foreground-critical-on-surface + ); + --token-button-critical-foreground-active: var( + --token-color-foreground-high-contrast + ); + --token-button-critical-surface-default: var(--token-color-surface-critical); + --token-button-critical-surface-focus: var(--token-color-surface-critical); + --token-button-critical-border-color-default: var( + --token-color-foreground-critical-on-surface + ); + --token-button-critical-border-color-focus: var( + --token-color-focus-critical-internal + ); + --token-button-disabled-foreground: var(--token-color-foreground-disabled); + --token-button-disabled-surface: var(--token-color-surface-faint); + --token-button-font-family: var(--token-typography-font-stack-text); + --token-button-primary-foreground-default: var( + --token-color-foreground-high-contrast + ); + --token-button-primary-foreground-hover: var( + --token-color-foreground-high-contrast + ); + --token-button-primary-foreground-focus: var( + --token-color-foreground-high-contrast + ); + --token-button-primary-foreground-active: var( + --token-color-foreground-high-contrast + ); + --token-button-primary-border-color-focus: var( + --token-color-focus-action-internal + ); + --token-button-secondary-foreground-default: var( + --token-color-foreground-primary + ); + --token-button-secondary-foreground-hover: var( + --token-color-foreground-primary + ); + --token-button-secondary-foreground-focus: var( + --token-color-foreground-primary + ); + --token-button-secondary-foreground-active: var( + --token-color-foreground-primary + ); + --token-button-secondary-surface-default: var(--token-color-surface-faint); + --token-button-secondary-surface-hover: var(--token-color-surface-primary); + --token-button-secondary-surface-focus: var(--token-color-surface-faint); + --token-button-secondary-surface-active: var( + --token-color-surface-interactive-active + ); + --token-button-secondary-border-color-focus: var( + --token-color-focus-action-internal + ); + --token-button-tertiary-foreground-default: var( + --token-color-foreground-action + ); + --token-button-tertiary-foreground-hover: var( + --token-color-foreground-action-hover + ); + --token-button-tertiary-foreground-focus: var( + --token-color-foreground-action + ); + --token-button-tertiary-foreground-active: var( + --token-color-foreground-action-active + ); + --token-button-tertiary-surface-hover: var(--token-color-surface-primary); + --token-button-tertiary-surface-focus: var(--token-color-surface-primary); + --token-button-tertiary-surface-active: var( + --token-color-surface-interactive-active + ); + --token-button-tertiary-border-color-focus: var( + --token-color-focus-action-internal + ); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-visibility-toggle-color: var(--token-color-foreground-primary); + --token-form-control-base-foreground-value-color: var( + --token-color-foreground-strong + ); + --token-form-control-base-foreground-placeholder-color: var( + --token-color-foreground-faint + ); + --token-form-control-base-surface-color-default: var( + --token-color-surface-interactive + ); + --token-form-control-base-surface-color-hover: var( + --token-color-surface-interactive-hover + ); + --token-form-control-checked-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-form-control-readonly-foreground-color: var( + --token-color-foreground-primary + ); + --token-form-control-readonly-surface-color: var( + --token-color-surface-strong + ); + --token-form-control-disabled-foreground-color: var( + --token-color-foreground-disabled + ); + --token-form-control-disabled-surface-color: var( + --token-color-surface-interactive-disabled + ); + --token-form-radiocard-box-shadow-focus: 0 0 0 3px + var(--token-form-control-focus-outline-color); /* This is a custom shadow used to add a focus ring around the card */ + --token-form-toggle-base-surface-color-default: var( + --token-color-surface-strong + ); /* the toggle has a different base surface color, compared to the other controls */ + --token-typography-display-500-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-400-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-300-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-display-200-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-100-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-300-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-200-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-100-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-code-100-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-200-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-300-font-family: var( + --token-typography-font-stack-code + ); + --token-focus-ring-action-box-shadow: var( + --token-focus-ring-action-internal-box-shadow + ), + var(--token-focus-ring-action-external-box-shadow); + --token-focus-ring-critical-box-shadow: var( + --token-focus-ring-critical-internal-box-shadow + ), + var(--token-focus-ring-critical-external-box-shadow); + --token-button-critical-box-shadow-default: var( + --token-elevation-low-box-shadow + ); + --token-button-disabled-border-color: var(--token-color-border-primary); + --token-button-primary-box-shadow-default: var( + --token-elevation-low-box-shadow + ); + --token-button-secondary-border-color-default: var( + --token-color-border-strong + ); + --token-button-secondary-border-color-hover: var(--token-color-border-strong); + --token-button-secondary-border-color-active: var( + --token-color-border-strong + ); + --token-button-secondary-box-shadow-default: var( + --token-elevation-low-box-shadow + ); + --token-button-tertiary-border-color-hover: var(--token-color-border-strong); + --token-button-tertiary-border-color-active: var(--token-color-border-strong); + --token-form-legend-color: var(--token-form-label-color); + --token-form-control-base-box-shadow-default: var( + --token-elevation-inset-box-shadow + ); + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-disabled-border-color: var(--token-color-border-primary); + --token-form-radiocard-box-shadow-default: var( + --token-elevation-mid-box-shadow + ); + --token-form-radiocard-box-shadow-hover: var( + --token-elevation-high-box-shadow + ); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Do not edit directly, this file was auto-generated. + */ +.hds-border-primary { + border: 1px solid var(--token-color-border-primary); +} + +.hds-border-faint { + border: 1px solid var(--token-color-border-faint); +} + +.hds-border-strong { + border: 1px solid var(--token-color-border-strong); +} + +.hds-border-action { + border: 1px solid var(--token-color-border-action); +} + +.hds-border-highlight { + border: 1px solid var(--token-color-border-highlight); +} + +.hds-border-success { + border: 1px solid var(--token-color-border-success); +} + +.hds-border-warning { + border: 1px solid var(--token-color-border-warning); +} + +.hds-border-critical { + border: 1px solid var(--token-color-border-critical); +} + +.hds-foreground-strong { + color: var(--token-color-foreground-strong); +} + +.hds-foreground-primary { + color: var(--token-color-foreground-primary); +} + +.hds-foreground-faint { + color: var(--token-color-foreground-faint); +} + +.hds-foreground-high-contrast { + color: var(--token-color-foreground-high-contrast); +} + +.hds-foreground-disabled { + color: var(--token-color-foreground-disabled); +} + +.hds-foreground-action { + color: var(--token-color-foreground-action); +} + +.hds-foreground-action-hover { + color: var(--token-color-foreground-action-hover); +} + +.hds-foreground-action-active { + color: var(--token-color-foreground-action-active); +} + +.hds-foreground-highlight { + color: var(--token-color-foreground-highlight); +} + +.hds-foreground-highlight-on-surface { + color: var(--token-color-foreground-highlight-on-surface); +} + +.hds-foreground-highlight-high-contrast { + color: var(--token-color-foreground-highlight-high-contrast); +} + +.hds-foreground-success { + color: var(--token-color-foreground-success); +} + +.hds-foreground-success-on-surface { + color: var(--token-color-foreground-success-on-surface); +} + +.hds-foreground-success-high-contrast { + color: var(--token-color-foreground-success-high-contrast); +} + +.hds-foreground-warning { + color: var(--token-color-foreground-warning); +} + +.hds-foreground-warning-on-surface { + color: var(--token-color-foreground-warning-on-surface); +} + +.hds-foreground-warning-high-contrast { + color: var(--token-color-foreground-warning-high-contrast); +} + +.hds-foreground-critical { + color: var(--token-color-foreground-critical); +} + +.hds-foreground-critical-on-surface { + color: var(--token-color-foreground-critical-on-surface); +} + +.hds-foreground-critical-high-contrast { + color: var(--token-color-foreground-critical-high-contrast); +} + +.hds-page-primary { + background-color: var(--token-color-page-primary); +} + +.hds-page-faint { + background-color: var(--token-color-page-faint); +} + +.hds-surface-primary { + background-color: var(--token-color-surface-primary); +} + +.hds-surface-faint { + background-color: var(--token-color-surface-faint); +} + +.hds-surface-strong { + background-color: var(--token-color-surface-strong); +} + +.hds-surface-interactive { + background-color: var(--token-color-surface-interactive); +} + +.hds-surface-interactive-hover { + background-color: var(--token-color-surface-interactive-hover); +} + +.hds-surface-interactive-active { + background-color: var(--token-color-surface-interactive-active); +} + +.hds-surface-interactive-disabled { + background-color: var(--token-color-surface-interactive-disabled); +} + +.hds-surface-action { + background-color: var(--token-color-surface-action); +} + +.hds-surface-highlight { + background-color: var(--token-color-surface-highlight); +} + +.hds-surface-success { + background-color: var(--token-color-surface-success); +} + +.hds-surface-warning { + background-color: var(--token-color-surface-warning); +} + +.hds-surface-critical { + background-color: var(--token-color-surface-critical); +} + +/** + * Do not edit directly, this file was auto-generated. + */ +.hds-elevation-inset { + box-shadow: var(--token-elevation-inset-box-shadow); +} + +.hds-elevation-low { + box-shadow: var(--token-elevation-low-box-shadow); +} + +.hds-elevation-mid { + box-shadow: var(--token-elevation-mid-box-shadow); +} + +.hds-elevation-high { + box-shadow: var(--token-elevation-high-box-shadow); +} + +.hds-elevation-higher { + box-shadow: var(--token-elevation-higher-box-shadow); +} + +.hds-elevation-overlay { + box-shadow: var(--token-elevation-overlay-box-shadow); +} + +.hds-surface-inset { + box-shadow: var(--token-surface-inset-box-shadow); +} + +.hds-surface-base { + box-shadow: var(--token-surface-base-box-shadow); +} + +.hds-surface-low { + box-shadow: var(--token-surface-low-box-shadow); +} + +.hds-surface-mid { + box-shadow: var(--token-surface-mid-box-shadow); +} + +.hds-surface-high { + box-shadow: var(--token-surface-high-box-shadow); +} + +.hds-surface-higher { + box-shadow: var(--token-surface-higher-box-shadow); +} + +.hds-surface-overlay { + box-shadow: var(--token-surface-overlay-box-shadow); +} + +/** + * Do not edit directly, this file was auto-generated. + */ +.hds-focus-ring-action-box-shadow { + box-shadow: var(--token-focus-ring-action-box-shadow); +} + +.hds-focus-ring-critical-box-shadow { + box-shadow: var(--token-focus-ring-critical-box-shadow); +} + +/** + * Do not edit directly, this file was auto-generated. + */ +.hds-font-family-sans-display { + font-family: var(--token-typography-font-stack-display); +} + +.hds-font-family-sans-text { + font-family: var(--token-typography-font-stack-text); +} + +.hds-font-family-mono-code { + font-family: var(--token-typography-font-stack-code); +} + +.hds-font-weight-regular { + font-weight: 400; +} + +.hds-font-weight-medium { + font-weight: 500; +} + +.hds-font-weight-semibold { + font-weight: 600; +} + +.hds-font-weight-bold { + font-weight: 700; +} + +.hds-typography-display-500 { + font-family: var(--token-typography-display-500-font-family); + font-size: var(--token-typography-display-500-font-size); + line-height: var(--token-typography-display-500-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-display-400 { + font-family: var(--token-typography-display-400-font-family); + font-size: var(--token-typography-display-400-font-size); + line-height: var(--token-typography-display-400-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-display-300 { + font-family: var(--token-typography-display-300-font-family); + font-size: var(--token-typography-display-300-font-size); + line-height: var(--token-typography-display-300-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-display-200 { + font-family: var(--token-typography-display-200-font-family); + font-size: var(--token-typography-display-200-font-size); + line-height: var(--token-typography-display-200-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-display-100 { + font-family: var(--token-typography-display-100-font-family); + font-size: var(--token-typography-display-100-font-size); + line-height: var(--token-typography-display-100-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-body-300 { + font-family: var(--token-typography-body-300-font-family); + font-size: var(--token-typography-body-300-font-size); + line-height: var(--token-typography-body-300-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-body-200 { + font-family: var(--token-typography-body-200-font-family); + font-size: var(--token-typography-body-200-font-size); + line-height: var(--token-typography-body-200-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-body-100 { + font-family: var(--token-typography-body-100-font-family); + font-size: var(--token-typography-body-100-font-size); + line-height: var(--token-typography-body-100-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-code-100 { + font-family: var(--token-typography-code-100-font-family); + font-size: var(--token-typography-code-100-font-size); + line-height: var(--token-typography-code-100-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-code-200 { + font-family: var(--token-typography-code-200-font-family); + font-size: var(--token-typography-code-200-font-size); + line-height: var(--token-typography-code-200-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-code-300 { + font-family: var(--token-typography-code-300-font-family); + font-size: var(--token-typography-code-300-font-size); + line-height: var(--token-typography-code-300-line-height); + margin: 0; + padding: 0; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-accordion { + display: flex; + flex-direction: column; +} + +.hds-accordion--type-card.hds-accordion--size-small { + gap: 4px; +} +.hds-accordion--type-card.hds-accordion--size-medium { + gap: 8px; +} +.hds-accordion--type-card.hds-accordion--size-large { + gap: 12px; +} + +.hds-accordion-item--size-small { + --hds-accordion-item-toggle-padding: 8px; + --hds-accordion-item-toggle-padding-left: 8px; + --hds-accordion-item-content-padding-top: 4px; + --hds-accordion-item-content-padding-right: 8px; + --hds-accordion-item-content-padding-bottom: 8px; + --hds-accordion-item-content-padding-left: 12px; + --hds-accordion-item-gap: 8px; + --hds-accordion-item-icon-size: 16px; +} + +.hds-accordion-item--size-medium { + --hds-accordion-item-toggle-padding: 12px; + --hds-accordion-item-toggle-padding-left: 8px; + --hds-accordion-item-content-padding-top: 4px; + --hds-accordion-item-content-padding-right: 12px; + --hds-accordion-item-content-padding-bottom: 12px; + --hds-accordion-item-content-padding-left: 12px; + --hds-accordion-item-gap: 12px; + --hds-accordion-item-icon-size: 20px; +} + +.hds-accordion-item--size-large { + --hds-accordion-item-toggle-padding: 16px; + --hds-accordion-item-toggle-padding-left: 12px; + --hds-accordion-item-content-padding-top: 4px; + --hds-accordion-item-content-padding-right: 16px; + --hds-accordion-item-content-padding-bottom: 16px; + --hds-accordion-item-content-padding-left: 16px; + --hds-accordion-item-gap: 12px; + --hds-accordion-item-icon-size: 24px; +} + +.hds-accordion-item--type-card { + --hds-accordion-item-focus-ring-offset: 0; + background: var(--token-color-surface-primary); + border-radius: 6px; +} +.hds-accordion-item--type-card.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) { + box-shadow: var(--token-surface-mid-box-shadow); +} +.hds-accordion-item--type-card.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static):hover, .hds-accordion-item--type-card.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static).mock-hover { + box-shadow: var(--token-surface-high-box-shadow); +} +.hds-accordion-item--type-card.hds-accordion-item--contains-interactive, .hds-accordion-item--type-card.hds-accordion-item--is-static { + box-shadow: var(--token-surface-base-box-shadow); +} + +.hds-accordion-item--type-flush { + --hds-accordion-item-focus-ring-offset: 3px; + border-bottom: 1px solid var(--token-color-border-primary); +} +.hds-accordion-item--type-flush.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle:hover .hds-accordion-item__toggle, .hds-accordion-item--type-flush.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle.mock-hover .hds-accordion-item__toggle { + background: var(--token-color-surface-interactive-hover); +} +.hds-accordion-item--type-flush.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle:active .hds-accordion-item__toggle, .hds-accordion-item--type-flush.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle.mock-active .hds-accordion-item__toggle { + background: var(--token-color-surface-interactive-active); +} + +.hds-accordion-item__toggle { + position: relative; + display: flex; + gap: var(--hds-accordion-item-gap); + align-items: center; + padding: var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding-left); +} + +.hds-accordion-item__button { + padding: 0; +} +.hds-accordion-item__button:hover { + cursor: pointer; +} +@media (prefers-reduced-motion: no-preference) { + .hds-accordion-item__button .hds-icon { + transition: transform 0.3s; + } +} +.hds-accordion-item--is-static.hds-accordion-item .hds-accordion-item__button { + visibility: hidden; +} + +.hds-accordion-item__button--parent-does-not-contain-interactive { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; + position: static; + display: flex; + align-items: center; + justify-content: center; + margin: -1px 0; + color: var(--token-color-foreground-primary); + background: transparent; + border: 0; +} +.hds-accordion-item__button--parent-does-not-contain-interactive::before { + position: absolute; + top: var(--hds-accordion-item-focus-ring-offset); + right: var(--hds-accordion-item-focus-ring-offset); + bottom: var(--hds-accordion-item-focus-ring-offset); + left: var(--hds-accordion-item-focus-ring-offset); + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-accordion-item__button--parent-does-not-contain-interactive:focus::before, .hds-accordion-item__button--parent-does-not-contain-interactive.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-accordion-item__button--parent-does-not-contain-interactive:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-accordion-item__button--parent-does-not-contain-interactive:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-accordion-item__button--parent-does-not-contain-interactive:focus:active::before, .hds-accordion-item__button--parent-does-not-contain-interactive.mock-focus.mock-active::before { + box-shadow: none; +} + +.hds-accordion-item__button--parent-contains-interactive { + position: relative; + display: flex; + gap: var(--token-button-gap); + align-items: center; + justify-content: center; + width: auto; + font-weight: var(--token-button-font-weight); + font-family: var(--token-button-font-family); + text-decoration: none; + border: var(--token-button-border-width) solid transparent; + border-radius: var(--token-button-border-radius); + outline-style: solid; + outline-color: transparent; + isolation: isolate; + color: var(--token-button-secondary-foreground-default); + background-color: var(--token-button-secondary-surface-default); + border-color: var(--token-button-secondary-border-color-default); + box-shadow: var(--token-button-secondary-box-shadow-default); +} +.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus { + box-shadow: var(--token-button-box-shadow-focus); +} +.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before { + position: absolute; + top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + z-index: -1; + border: var(--token-button-focus-border-width) solid transparent; + border-radius: var(--token-button-focus-border-radius); + content: ""; +} +.hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button--parent-contains-interactive.mock-hover { + color: var(--token-button-secondary-foreground-hover); + background-color: var(--token-button-secondary-surface-hover); + border-color: var(--token-button-secondary-border-color-hover); + cursor: pointer; +} +.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus { + color: var(--token-button-secondary-foreground-focus); + background-color: var(--token-button-secondary-surface-focus); + border-color: var(--token-button-secondary-border-color-focus); + box-shadow: var(--token-button-secondary-box-shadow-focus); +} +.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before { + border-color: var(--token-color-focus-action-external); +} +.hds-accordion-item__button--parent-contains-interactive:active, .hds-accordion-item__button--parent-contains-interactive.mock-active { + color: var(--token-button-secondary-foreground-active); + background-color: var(--token-button-secondary-surface-active); + border-color: var(--token-button-secondary-border-color-active); + box-shadow: var(--token-button-secondary-box-shadow-active); +} +.hds-accordion-item__button--parent-contains-interactive:active::before, .hds-accordion-item__button--parent-contains-interactive.mock-active::before { + border-color: transparent; +} + +.hds-accordion-item__button { + width: var(--hds-accordion-item-icon-size); + height: var(--hds-accordion-item-icon-size); +} + +.hds-accordion-item__button--is-open .hds-icon-chevron-down { + transform: rotate(-180deg); +} + +.hds-accordion-item__toggle-content { + flex: 1; +} + +.hds-accordion-item .hds-accordion-item__content { + padding: var(--hds-accordion-item-content-padding-top) var(--hds-accordion-item-content-padding-right) var(--hds-accordion-item-content-padding-bottom) var(--hds-accordion-item-content-padding-left); +} + +.hds-accordion-item--type-flush .hds-accordion-item__content:has(> .hds-accordion--type-flush) { + padding: 0 var(--hds-accordion-item-content-padding-right) 0 var(--hds-accordion-item-content-padding-left); + border-top: 1px solid var(--token-color-border-primary); +} +.hds-accordion-item--type-flush .hds-accordion-item__content:has(> .hds-accordion--type-flush) .hds-accordion-item--type-flush:last-child { + border-bottom: none; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-alert { + display: flex; + align-items: flex-start; +} + +.hds-alert__icon { + flex: none; + width: 20px; + height: 20px; + margin-right: 12px; +} +.hds-alert--type-compact .hds-alert__icon { + width: 14px; + height: 14px; +} + +.hds-alert__content { + flex: 1 1 auto; +} + +.hds-alert__text { + display: flex; + flex-direction: column; + gap: 4px; + justify-content: center; + color: var(--token-color-foreground-warning-on-surface); +} + +.hds-alert__description { + word-break: break-word; +} +.hds-alert__description strong { + font-weight: var(--token-typography-font-weight-semibold); +} +.hds-alert__description code, +.hds-alert__description pre { + display: inline; + padding: 1px 5px; + font-size: 0.9em; + font-family: var(--token-typography-code-100-font-family); + line-height: 1em; + background-color: var(--token-color-surface-primary); + border: 1px solid var(--token-color-palette-neutral-200); + border-radius: 5px; +} +.hds-alert__description a:not([class*=hds-]) { + color: var(--token-color-foreground-strong); +} +.hds-alert__description a:not([class*=hds-]):focus, .hds-alert__description a:not([class*=hds-]):focus-visible { + text-decoration: none; + outline: 2px solid var(--token-color-focus-action-internal); + outline-offset: 1px; +} +.hds-alert__description a:not([class*=hds-]):hover { + color: var(--token-color-foreground-primary); +} +.hds-alert__description a:not([class*=hds-]):active { + color: var(--token-color-foreground-faint); +} + +.hds-alert__actions { + display: flex; + gap: 16px; + align-items: center; +} +.hds-alert__actions > * { + margin-top: 16px; +} + +.hds-alert__dismiss { + margin-top: 2px; + margin-left: 16px; +} +.hds-alert--type-compact .hds-alert__dismiss { + margin-top: 1px; +} + +.hds-alert--type-page { + padding: 16px 48px; +} + +.hds-alert--type-inline { + padding: 16px; + border-style: solid; + border-width: 1px; + border-radius: 6px; +} + +.hds-alert--type-compact .hds-alert__icon { + margin-top: 2px; + margin-right: 8px; +} +.hds-alert--type-compact .hds-alert__title { + display: none; +} +.hds-alert--type-compact .hds-alert__title + .hds-alert__description { + margin-top: 0; +} + +.hds-alert--color-neutral.hds-alert--type-page { + background-color: var(--token-color-surface-faint); + box-shadow: 0 1px 0 0 var(--token-color-palette-alpha-300); +} +.hds-alert--color-neutral.hds-alert--type-inline { + background-color: var(--token-color-surface-faint); + border-color: var(--token-color-border-strong); +} +.hds-alert--color-neutral .hds-alert__icon { + color: var(--token-color-foreground-faint); +} +.hds-alert--color-neutral .hds-alert__title { + color: var(--token-color-foreground-primary); +} + +.hds-alert--color-highlight.hds-alert--type-page { + background-color: var(--token-color-surface-highlight); + box-shadow: 0 1px 0 0 var(--token-color-border-highlight); +} +.hds-alert--color-highlight.hds-alert--type-inline { + background-color: var(--token-color-surface-highlight); + border-color: var(--token-color-border-highlight); +} +.hds-alert--color-highlight .hds-alert__icon, +.hds-alert--color-highlight .hds-alert__title { + color: var(--token-color-foreground-highlight-on-surface); +} + +.hds-alert--color-success.hds-alert--type-page { + background-color: var(--token-color-surface-success); + box-shadow: 0 1px 0 0 var(--token-color-border-success); +} +.hds-alert--color-success.hds-alert--type-inline { + background-color: var(--token-color-surface-success); + border-color: var(--token-color-border-success); +} +.hds-alert--color-success .hds-alert__icon, +.hds-alert--color-success .hds-alert__title { + color: var(--token-color-foreground-success-on-surface); +} + +.hds-alert--color-warning.hds-alert--type-page { + background-color: var(--token-color-surface-warning); + box-shadow: 0 1px 0 0 var(--token-color-border-warning); +} +.hds-alert--color-warning.hds-alert--type-inline { + background-color: var(--token-color-surface-warning); + border-color: var(--token-color-border-warning); +} +.hds-alert--color-warning .hds-alert__icon, +.hds-alert--color-warning .hds-alert__title { + color: var(--token-color-foreground-warning-on-surface); +} + +.hds-alert--color-critical.hds-alert--type-page { + background-color: var(--token-color-surface-critical); + box-shadow: 0 1px 0 0 var(--token-color-border-critical); +} +.hds-alert--color-critical.hds-alert--type-inline { + background-color: var(--token-color-surface-critical); + border-color: var(--token-color-border-critical); +} +.hds-alert--color-critical .hds-alert__icon, +.hds-alert--color-critical .hds-alert__title { + color: var(--token-color-foreground-critical-on-surface); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-app-footer { + display: flex; + flex-wrap: wrap; + gap: 24px; + justify-content: center; + padding: 24px; + color: var(--app-footer-foreground-color); + border-top: 1px solid var(--app-footer-border-top-color); +} + +.hds-app-footer__list:not(:has(li)) { + display: none; +} + +.hds-app-footer__list, +.hds-app-footer__legal-links { + display: flex; + flex-wrap: wrap; + gap: 24px; + align-items: center; + justify-content: center; + width: fit-content; + min-width: 0; + margin: 0; + padding: 0; + list-style-type: none; +} + +.hds-app-footer__status-link.hds-link-inline--icon-leading > .hds-link-inline__icon { + margin-right: 6px; +} +.hds-app-footer__status-link .hds-icon { + fill: var(--hds-app-footer-status-icon-color, currentColor); +} + +.hds-app-footer__status-link--operational .hds-icon { + fill: var(--app-footer-status-link-icon-operational-color); +} + +.hds-app-footer__status-link--degraded .hds-icon { + fill: var(--app-footer-status-link-icon-degraded-color); +} + +.hds-app-footer__status-link--maintenance .hds-icon { + fill: var(--app-footer-status-link-icon-maintenance-color); +} + +.hds-app-footer__status-link--outage .hds-icon { + fill: var(--app-footer-status-link-icon-outage-color); +} + +.hds-app-footer__link.hds-link-inline--color-secondary, +.hds-app-footer__status-link { + color: var(--app-footer-link-default-color); + text-align: right; +} +.hds-app-footer__link.hds-link-inline--color-secondary:hover, .hds-app-footer__link.hds-link-inline--color-secondary.mock-hover, +.hds-app-footer__status-link:hover, +.hds-app-footer__status-link.mock-hover { + color: var(--app-footer-link-hover-color); +} +.hds-app-footer__link.hds-link-inline--color-secondary:active, .hds-app-footer__link.hds-link-inline--color-secondary.mock-active, +.hds-app-footer__status-link:active, +.hds-app-footer__status-link.mock-active { + color: var(--app-footer-link-active-color); +} +.hds-app-footer__link.hds-link-inline--color-secondary:focus, .hds-app-footer__link.hds-link-inline--color-secondary.mock-focus, .hds-app-footer__link.hds-link-inline--color-secondary:focus-visible, +.hds-app-footer__status-link:focus, +.hds-app-footer__status-link.mock-focus, +.hds-app-footer__status-link:focus-visible { + color: var(--app-footer-link-focus-color); + outline-color: var(--app-footer-link-focus-outline-color); +} + +.hds-app-footer__list-item { + display: flex; + align-items: center; +} + +.hds-app-footer__copyright { + display: flex; + gap: 6px; + align-items: center; + color: var(--app-footer-copyright-text-color); +} +.hds-app-footer__copyright .hds-icon { + fill: var(--app-footer-copyright-icon-color); +} + +.hds-app-footer--theme-light { + --app-footer-foreground-color: var(--token-color-foreground-primary); + --app-footer-border-top-color: var(--token-color-border-primary); + --app-footer-link-default-color: var(--token-color-foreground-faint); + --app-footer-link-hover-color: var(--token-color-palette-neutral-600); + --app-footer-link-active-color: var(--token-color-palette-neutral-700); + --app-footer-link-focus-color: var(--token-color-foreground-faint); + --app-footer-link-focus-outline-color: var(--token-color-focus-action-internal); + --app-footer-copyright-text-color: var(--token-color-foreground-primary); + --app-footer-copyright-icon-color: var(--token-color-hashicorp-brand); + --app-footer-status-link-icon-operational-color: var(--token-color-foreground-success); + --app-footer-status-link-icon-degraded-color: var(--token-color-foreground-warning); + --app-footer-status-link-icon-maintenance-color: var(--token-color-foreground-warning); + --app-footer-status-link-icon-outage-color: var(--token-color-foreground-critical); +} + +.hds-app-footer--theme-dark { + --app-footer-foreground-color: #b2b6bd; + --app-footer-border-top-color: #b2b6bd66; + --app-footer-link-default-color: #b2b6bd; + --app-footer-link-hover-color: #d5d7db; + --app-footer-link-active-color: #efeff1; + --app-footer-link-focus-color: #b2b6bd; + --app-footer-link-focus-outline-color: #389aff; + --app-footer-copyright-text-color: #b2b6bd; + --app-footer-copyright-icon-color: #fff; + --app-footer-status-link-icon-operational-color: #009241; + --app-footer-status-link-icon-degraded-color: #e88c03; + --app-footer-status-link-icon-maintenance-color: #e88c03; + --app-footer-status-link-icon-outage-color: #ef3016; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-app-frame { + display: grid; + grid-template-areas: "header header" "sidebar main" "sidebar footer"; + grid-template-rows: auto 1fr auto; + grid-template-columns: auto 1fr; + min-height: 100vh; +} + +.hds-app-frame__header { + z-index: 21; + grid-area: header; +} +@media (height >= 480px) { + .hds-app-frame__header { + position: sticky; + top: 0; + right: 0; + left: 0; + } +} + +.hds-app-frame__sidebar { + position: sticky; + top: 0; + z-index: 20; + grid-area: sidebar; + height: 100vh; + min-height: 100vh; +} +@media (height >= 480px) { + .hds-app-frame--has-header-with-sidebar .hds-app-frame__sidebar { + top: var(--token-app-header-height); + height: calc(100vh - var(--token-app-header-height)); + min-height: calc(100vh - var(--token-app-header-height)); + } +} + +.hds-app-frame__main { + grid-area: main; +} +.hds-app-frame--has-header-with-sidebar .hds-app-frame__main { + margin-top: calc(var(--token-app-header-height) * -1); + padding-top: var(--token-app-header-height); +} + +.hds-app-frame__footer { + grid-area: footer; +} + +.hds-app-frame__modals { + position: fixed; + top: 0; + left: 0; + z-index: 100; + width: 100vw; + height: 100vh; + pointer-events: none; +} +.hds-app-frame__modals:empty { + display: none; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-application-state { + display: flex; + flex-direction: column; + align-items: start; + width: fit-content; + margin: 0 auto; +} +.hds-application-state.hds-application-state--align-center { + align-items: center; + text-align: center; +} +.hds-application-state.hds-application-state--align-center .hds-application-state__header, +.hds-application-state.hds-application-state--align-center .hds-application-state__body, +.hds-application-state.hds-application-state--align-center .hds-application-state__footer { + width: auto; +} + +.hds-application-state__media { + margin-bottom: 32px; +} +.hds-application-state__media > * { + display: block; + max-width: 100%; +} + +.hds-application-state__header { + display: grid; + grid-template-areas: "error error" "icon title"; + grid-template-columns: min-content 1fr; + align-items: center; + width: 100%; + max-width: 480px; + color: var(--token-color-foreground-strong); +} + +.hds-application-state__error-code { + grid-area: error; + margin-bottom: 4px; +} + +.hds-application-state__icon { + grid-area: icon; + margin-right: 8px; + padding-top: 4px; +} + +.hds-application-state__title { + grid-row: 2; + font-weight: var(--token-typography-font-weight-semibold); +} +.hds-application-state__title:not(.hds-application-state__icon + .hds-application-state__title) { + grid-column: icon/title; +} + +.hds-application-state__body { + width: 100%; + max-width: 480px; + margin: 12px 0 0; + color: var(--token-color-foreground-primary); +} + +.hds-application-state__footer { + display: flex; + gap: 16px; + width: 100%; + max-width: 480px; + margin-top: 24px; +} +.hds-application-state__footer > :nth-child(3) { + margin-left: auto; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-badge { + display: inline-flex; + align-items: center; + max-width: 100%; + vertical-align: middle; + border: var(--token-badge-border-width) solid transparent; + border-radius: var(--token-badge-border-radius); +} + +.hds-badge__icon { + display: block; + flex: 0 0 auto; +} + +.hds-badge__text { + flex: 1 0 0; + font-weight: var(--token-badge-font-weight); + font-family: var(--token-badge-font-family); +} + +.hds-badge--size-small { + gap: var(--token-badge-gap-small); + min-height: var(--token-badge-height-small); + padding: var(--token-badge-padding-vertical-small) var(--token-badge-padding-horizontal-small); +} +.hds-badge--size-small .hds-badge__icon { + width: var(--token-badge-icon-size-small); + height: var(--token-badge-icon-size-small); +} +.hds-badge--size-small .hds-badge__text { + font-size: var(--token-badge-font-size-small); + line-height: var(--token-badge-line-height-small); +} + +.hds-badge--size-medium { + gap: var(--token-badge-gap-medium); + min-height: var(--token-badge-height-medium); + padding: var(--token-badge-padding-vertical-medium) var(--token-badge-padding-horizontal-medium); +} +.hds-badge--size-medium .hds-badge__icon { + width: var(--token-badge-icon-size-medium); + height: var(--token-badge-icon-size-medium); +} +.hds-badge--size-medium .hds-badge__text { + font-size: var(--token-badge-font-size-medium); + line-height: var(--token-badge-line-height-medium); +} + +.hds-badge--size-large { + gap: var(--token-badge-gap-large); + min-height: var(--token-badge-height-large); + padding: var(--token-badge-padding-vertical-large) var(--token-badge-padding-horizontal-large); +} +.hds-badge--size-large .hds-badge__icon { + width: var(--token-badge-icon-size-large); + height: var(--token-badge-icon-size-large); +} +.hds-badge--size-large .hds-badge__text { + font-size: var(--token-badge-font-size-large); + line-height: var(--token-badge-line-height-large); +} + +.hds-badge--color-neutral.hds-badge--type-filled { + color: var(--token-badge-filled-neutral-foreground-color); + background-color: var(--token-badge-filled-neutral-background-color); +} +.hds-badge--color-neutral.hds-badge--type-inverted { + color: var(--token-badge-inverted-neutral-foreground-color); + background-color: var(--token-badge-inverted-neutral-background-color); +} +.hds-badge--color-neutral.hds-badge--type-outlined { + color: var(--token-badge-outlined-neutral-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-neutral-border-color); +} + +.hds-badge--color-neutral-dark-mode.hds-badge--type-filled { + color: var(--token-badge-filled-neutral-dark-mode-foreground-color); + background-color: var(--token-badge-filled-neutral-dark-mode-background-color); +} +.hds-badge--color-neutral-dark-mode.hds-badge--type-inverted { + color: var(--token-badge-inverted-neutral-dark-mode-foreground-color); + background-color: var(--token-badge-inverted-neutral-dark-mode-background-color); +} +.hds-badge--color-neutral-dark-mode.hds-badge--type-outlined { + color: var(--token-badge-outlined-neutral-dark-mode-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-neutral-dark-mode-border-color); +} + +.hds-badge--color-highlight.hds-badge--type-filled { + color: var(--token-badge-filled-highlight-foreground-color); + background-color: var(--token-badge-filled-highlight-background-color); +} +.hds-badge--color-highlight.hds-badge--type-inverted { + color: var(--token-badge-inverted-highlight-foreground-color); + background-color: var(--token-badge-inverted-highlight-background-color); +} +.hds-badge--color-highlight.hds-badge--type-outlined { + color: var(--token-badge-outlined-highlight-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-highlight-border-color); +} + +.hds-badge--color-success.hds-badge--type-filled { + color: var(--token-badge-filled-success-foreground-color); + background-color: var(--token-badge-filled-success-background-color); +} +.hds-badge--color-success.hds-badge--type-inverted { + color: var(--token-badge-inverted-success-foreground-color); + background-color: var(--token-badge-inverted-success-background-color); +} +.hds-badge--color-success.hds-badge--type-outlined { + color: var(--token-badge-outlined-success-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-success-border-color); +} + +.hds-badge--color-warning.hds-badge--type-filled { + color: var(--token-badge-filled-warning-foreground-color); + background-color: var(--token-badge-filled-warning-background-color); +} +.hds-badge--color-warning.hds-badge--type-inverted { + color: var(--token-badge-inverted-warning-foreground-color); + background-color: var(--token-badge-inverted-warning-background-color); +} +.hds-badge--color-warning.hds-badge--type-outlined { + color: var(--token-badge-outlined-warning-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-warning-border-color); +} + +.hds-badge--color-critical.hds-badge--type-filled { + color: var(--token-badge-filled-critical-foreground-color); + background-color: var(--token-badge-filled-critical-background-color); +} +.hds-badge--color-critical.hds-badge--type-inverted { + color: var(--token-badge-inverted-critical-foreground-color); + background-color: var(--token-badge-inverted-critical-background-color); +} +.hds-badge--color-critical.hds-badge--type-outlined { + color: var(--token-badge-outlined-critical-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-critical-border-color); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-badge-count { + display: inline-flex; + align-items: center; + max-width: 100%; + font-weight: var(--token-badge-font-weight); + font-family: var(--token-badge-font-family); + border: var(--token-badge-border-width) solid transparent; +} + +.hds-badge-count--size-small { + min-height: var(--token-badge-height-small); + padding: var(--token-badge-padding-vertical-small) var(--token-badge-count-padding-horizontal-small); + font-size: var(--token-badge-font-size-small); + line-height: var(--token-badge-line-height-small); + border-radius: calc(var(--token-badge-height-small) / 2); +} + +.hds-badge-count--size-medium { + min-height: var(--token-badge-height-medium); + padding: var(--token-badge-padding-vertical-medium) var(--token-badge-count-padding-horizontal-medium); + font-size: var(--token-badge-font-size-medium); + line-height: var(--token-badge-line-height-medium); + border-radius: calc(var(--token-badge-height-medium) / 2); +} + +.hds-badge-count--size-large { + min-height: var(--token-badge-height-large); + padding: var(--token-badge-padding-vertical-large) var(--token-badge-count-padding-horizontal-large); + font-size: var(--token-badge-font-size-large); + line-height: var(--token-badge-line-height-large); + border-radius: calc(var(--token-badge-height-large) / 2); +} + +.hds-badge-count--color-neutral.hds-badge-count--type-filled { + color: var(--token-badge-filled-neutral-foreground-color); + background-color: var(--token-badge-filled-neutral-background-color); +} +.hds-badge-count--color-neutral.hds-badge-count--type-inverted { + color: var(--token-badge-inverted-neutral-foreground-color); + background-color: var(--token-badge-inverted-neutral-background-color); +} +.hds-badge-count--color-neutral.hds-badge-count--type-outlined { + color: var(--token-badge-outlined-neutral-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-neutral-border-color); +} + +.hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-filled { + color: var(--token-badge-filled-neutral-dark-mode-foreground-color); + background-color: var(--token-badge-filled-neutral-dark-mode-background-color); +} +.hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-inverted { + color: var(--token-badge-inverted-neutral-dark-mode-foreground-color); + background-color: var(--token-badge-inverted-neutral-dark-mode-background-color); +} +.hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-outlined { + color: var(--token-badge-outlined-neutral-dark-mode-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-neutral-dark-mode-border-color); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-breadcrumb { + position: relative; +} + +.hds-breadcrumb__list { + display: flex; + margin: 0; + padding: 0; + list-style: none; +} +.hds-breadcrumb--items-can-wrap .hds-breadcrumb__list { + flex-wrap: wrap; +} + +.hds-breadcrumb__sublist { + margin: 0; + padding: 0; + list-style: none; +} + +.hds-breadcrumb__item { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + min-width: 0; +} +.hds-breadcrumb__list > .hds-breadcrumb__item:not(:last-child)::after { + padding: 0 8px; + color: var(--token-color-palette-neutral-300); + content: "/"; +} +.hds-breadcrumb__sublist > .hds-breadcrumb__item + .hds-breadcrumb__item { + margin-top: 4px; +} + +.hds-breadcrumb__item--is-truncation { + flex: none; +} + +.hds-breadcrumb__link { + display: flex; + flex-direction: row; + align-items: center; + min-width: 0; + margin: 0 -4px; + padding: 0 4px; + color: var(--token-color-foreground-faint); + border-radius: 5px; + text-decoration-color: transparent; + outline-style: solid; + outline-color: transparent; +} +.hds-breadcrumb__link:hover, .hds-breadcrumb__link.mock-hover { + color: var(--token-color-palette-neutral-600); +} +.hds-breadcrumb__link:hover > .hds-breadcrumb__text, .hds-breadcrumb__link.mock-hover > .hds-breadcrumb__text { + text-decoration-color: currentColor; +} +.hds-breadcrumb__link:focus, .hds-breadcrumb__link.mock-focus { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-breadcrumb__link:focus:not(:focus-visible) { + box-shadow: none; +} +.hds-breadcrumb__link:focus-visible { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-breadcrumb__link:focus:active, .hds-breadcrumb__link.mock-focus.mock-active { + box-shadow: none; +} +.hds-breadcrumb__link:active, .hds-breadcrumb__link.mock-active { + color: var(--token-color-foreground-secondary); +} +.hds-breadcrumb__link:active > .hds-breadcrumb__text, .hds-breadcrumb__link.mock-active > .hds-breadcrumb__text { + text-decoration-color: currentColor; +} + +.hds-breadcrumb__current { + display: flex; + flex-direction: row; + align-items: center; + min-width: 0; + margin: 0 -4px; + padding: 0 4px; + color: var(--token-color-foreground-strong); +} + +.hds-breadcrumb__icon { + flex: none; + width: 13px; + height: 13px; + margin-right: 6px; +} + +.hds-breadcrumb__text { + padding: calc((28px - 1rem) / 2) 0; + overflow: hidden; + font-size: 0.8125rem; + font-family: var(--token-typography-font-stack-text); + line-height: 1rem; + white-space: nowrap; + text-decoration: underline; + text-overflow: ellipsis; + text-decoration-color: transparent; +} +.hds-breadcrumb__sublist .hds-breadcrumb__text { + white-space: normal; +} + +.hds-breadcrumb__truncation-toggle { + display: flex; + flex: none; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + margin: 0 -4px; + padding: 0; + color: var(--token-color-foreground-faint); + background-color: transparent; + border: 1px solid transparent; + border-radius: 5px; + outline: none; + cursor: pointer; + outline-style: solid; + outline-color: transparent; +} +.hds-breadcrumb__truncation-toggle:hover, .hds-breadcrumb__truncation-toggle.mock-hover { + color: var(--token-color-foreground-faint); + background-color: var(--token-color-surface-interactive); + border-color: var(--token-color-border-strong); +} +.hds-breadcrumb__truncation-toggle:focus, .hds-breadcrumb__truncation-toggle.mock-focus { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-breadcrumb__truncation-toggle:focus:not(:focus-visible) { + box-shadow: none; +} +.hds-breadcrumb__truncation-toggle:focus-visible { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-breadcrumb__truncation-toggle:focus:active, .hds-breadcrumb__truncation-toggle.mock-focus.mock-active { + box-shadow: none; +} +.hds-breadcrumb__truncation-toggle:focus, .hds-breadcrumb__truncation-toggle.mock-focus { + background-color: transparent; + border: none; +} +.hds-breadcrumb__truncation-toggle:active, .hds-breadcrumb__truncation-toggle.mock-active { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-border-strong); +} + +.hds-breadcrumb__truncation-content { + position: relative; + width: max-content; + max-width: 200px; + padding: 6px 12px; + background-color: var(--token-color-surface-primary); + border-radius: 6px; + box-shadow: var(--token-surface-high-box-shadow); +} +:where(.hds-breadcrumb__truncation-content[popover]) { + width: fit-content; + height: fit-content; + margin: 0; + padding: 0; + overflow: visible; + color: inherit; + background: none; + border: none; + inset: 0; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-button { + position: relative; + display: flex; + gap: var(--token-button-gap); + align-items: center; + justify-content: center; + width: auto; + font-weight: var(--token-button-font-weight); + font-family: var(--token-button-font-family); + text-decoration: none; + border: var(--token-button-border-width) solid transparent; + border-radius: var(--token-button-border-radius); + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +a.hds-button { + width: fit-content; +} +a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-hover, a.hds-button.mock-focus, a.hds-button.mock-active { + text-decoration: underline; +} + +.hds-button:disabled, .hds-button[disabled], .hds-button.mock-disabled, .hds-button:disabled:focus, .hds-button[disabled]:focus, .hds-button.mock-disabled:focus, .hds-button:disabled:hover, .hds-button[disabled]:hover, .hds-button.mock-disabled:hover { + color: var(--token-button-disabled-foreground); + background-color: var(--token-button-disabled-surface); + border-color: var(--token-button-disabled-border-color); + box-shadow: var(--token-button-disabled-box-shadow); + cursor: not-allowed; +} +.hds-button:disabled::before, .hds-button[disabled]::before, .hds-button.mock-disabled::before, .hds-button:disabled:focus::before, .hds-button[disabled]:focus::before, .hds-button.mock-disabled:focus::before, .hds-button:disabled:hover::before, .hds-button[disabled]:hover::before, .hds-button.mock-disabled:hover::before { + border-color: transparent; +} +.hds-button.hds-button--width-full { + width: 100%; + max-width: 100%; +} +.hds-button.hds-button--width-full .hds-button__text { + flex: 0 0 auto; +} +.hds-button:focus, .hds-button.mock-focus { + box-shadow: var(--token-button-box-shadow-focus); +} +.hds-button:focus::before, .hds-button.mock-focus::before { + position: absolute; + top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + z-index: -1; + border: var(--token-button-focus-border-width) solid transparent; + border-radius: var(--token-button-focus-border-radius); + content: ""; +} + +.hds-button__icon { + display: block; +} + +.hds-button__text { + display: block; + flex: 1 0 0; + text-align: center; +} + +.hds-button--color-primary { + color: var(--token-button-primary-foreground-default); + background-color: var(--token-button-primary-surface-default); + border-color: var(--token-token-button-primary-border-color-default); + box-shadow: var(--token-button-primary-box-shadow-default); +} +.hds-button--color-primary:hover, .hds-button--color-primary.mock-hover { + color: var(--token-button-primary-foreground-hover); + background-color: var(--token-button-primary-surface-hover); + border-color: var(--token-token-button-primary-border-color-hover); + cursor: pointer; +} +.hds-button--color-primary:focus, .hds-button--color-primary.mock-focus { + color: var(--token-button-primary-foreground-focus); + background-color: var(--token-button-primary-surface-focus); + border-color: var(--token-token-button-primary-border-color-focus); + box-shadow: var(--token-button-primary-box-shadow-focus); +} +.hds-button--color-primary:focus::before, .hds-button--color-primary.mock-focus::before { + top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + border-color: var(--token-color-focus-action-external); + border-radius: var(--token-button-border-radius); +} +.hds-button--color-primary:active, .hds-button--color-primary.mock-active { + color: var(--token-button-primary-foreground-active); + background-color: var(--token-button-primary-surface-active); + border-color: var(--token-token-button-primary-border-color-active); + box-shadow: var(--token-button-primary-box-shadow-active); +} +.hds-button--color-primary:active::before, .hds-button--color-primary.mock-active::before { + border-color: transparent; +} + +.hds-button--color-secondary { + color: var(--token-button-secondary-foreground-default); + background-color: var(--token-button-secondary-surface-default); + border-color: var(--token-button-secondary-border-color-default); + box-shadow: var(--token-button-secondary-box-shadow-default); +} +.hds-button--color-secondary:hover, .hds-button--color-secondary.mock-hover { + color: var(--token-button-secondary-foreground-hover); + background-color: var(--token-button-secondary-surface-hover); + border-color: var(--token-button-secondary-border-color-hover); + cursor: pointer; +} +.hds-button--color-secondary:focus, .hds-button--color-secondary.mock-focus { + color: var(--token-button-secondary-foreground-focus); + background-color: var(--token-button-secondary-surface-focus); + border-color: var(--token-button-secondary-border-color-focus); + box-shadow: var(--token-button-secondary-box-shadow-focus); +} +.hds-button--color-secondary:focus::before, .hds-button--color-secondary.mock-focus::before { + border-color: var(--token-color-focus-action-external); +} +.hds-button--color-secondary:active, .hds-button--color-secondary.mock-active { + color: var(--token-button-secondary-foreground-active); + background-color: var(--token-button-secondary-surface-active); + border-color: var(--token-button-secondary-border-color-active); + box-shadow: var(--token-button-secondary-box-shadow-active); +} +.hds-button--color-secondary:active::before, .hds-button--color-secondary.mock-active::before { + border-color: transparent; +} + +.hds-button--color-tertiary { + color: var(--token-button-tertiary-foreground-default); + background-color: var(--token-button-tertiary-surface-default); + border-color: var(--token-button-tertiary-border-color-default); + box-shadow: var(--token-button-tertiary-box-shadow-default); +} +.hds-button--color-tertiary:hover, .hds-button--color-tertiary.mock-hover { + color: var(--token-button-tertiary-foreground-hover); + background-color: var(--token-button-tertiary-surface-hover); + border-color: var(--token-button-tertiary-border-color-hover); + cursor: pointer; +} +.hds-button--color-tertiary:focus, .hds-button--color-tertiary.mock-focus { + color: var(--token-button-tertiary-foreground-focus); + background-color: var(--token-button-tertiary-surface-focus); + border-color: var(--token-button-tertiary-border-color-focus); + box-shadow: var(--token-button-tertiary-box-shadow-focus); +} +.hds-button--color-tertiary:focus::before, .hds-button--color-tertiary.mock-focus::before { + border-color: var(--token-color-focus-action-external); +} +.hds-button--color-tertiary:active, .hds-button--color-tertiary.mock-active { + color: var(--token-button-tertiary-foreground-active); + background-color: var(--token-button-tertiary-surface-active); + border-color: var(--token-button-tertiary-border-color-active); + box-shadow: var(--token-button-tertiary-box-shadow-active); +} +.hds-button--color-tertiary:active::before, .hds-button--color-tertiary.mock-active::before { + border-color: transparent; +} +.hds-button--color-tertiary:disabled, .hds-button--color-tertiary[disabled], .hds-button--color-tertiary.mock-disabled, .hds-button--color-tertiary:disabled:focus, .hds-button--color-tertiary[disabled]:focus, .hds-button--color-tertiary.mock-disabled:focus, .hds-button--color-tertiary:disabled:hover, .hds-button--color-tertiary[disabled]:hover, .hds-button--color-tertiary.mock-disabled:hover { + background-color: transparent; + border-color: transparent; +} +.hds-button--color-tertiary:disabled::before, .hds-button--color-tertiary[disabled]::before, .hds-button--color-tertiary.mock-disabled::before, .hds-button--color-tertiary:disabled:focus::before, .hds-button--color-tertiary[disabled]:focus::before, .hds-button--color-tertiary.mock-disabled:focus::before, .hds-button--color-tertiary:disabled:hover::before, .hds-button--color-tertiary[disabled]:hover::before, .hds-button--color-tertiary.mock-disabled:hover::before { + border-color: transparent; +} + +.hds-button--color-critical { + color: var(--token-button-critical-foreground-default); + background-color: var(--token-button-critical-surface-default); + border-color: var(--token-button-critical-border-color-default); + box-shadow: var(--token-button-critical-box-shadow-default); +} +.hds-button--color-critical:hover, .hds-button--color-critical.mock-hover { + color: var(--token-button-critical-foreground-hover); + background-color: var(--token-button-critical-surface-hover); + border-color: var(--token-button-critical-border-color-hover); + cursor: pointer; +} +.hds-button--color-critical:focus, .hds-button--color-critical.mock-focus { + color: var(--token-button-critical-foreground-focus); + background-color: var(--token-button-critical-surface-focus); + border-color: var(--token-button-critical-border-color-focus); + box-shadow: var(--token-button-critical-box-shadow-focus); +} +.hds-button--color-critical:focus::before, .hds-button--color-critical.mock-focus::before { + border-color: var(--token-color-focus-critical-external); +} +.hds-button--color-critical:active, .hds-button--color-critical.mock-active { + color: var(--token-button-critical-foreground-active); + background-color: var(--token-button-critical-surface-active); + border-color: var(--token-button-critical-border-color-active); + box-shadow: var(--token-button-critical-box-shadow-active); +} +.hds-button--color-critical:active::before, .hds-button--color-critical.mock-active::before { + border-color: transparent; +} + +.hds-button--size-small { + min-height: var(--token-button-height-small); + padding: var(--token-button-padding-vertical-small) var(--token-button-padding-horizontal-small); +} +.hds-button--size-small .hds-button__icon { + width: var(--token-button-icon-size-small); + height: var(--token-button-icon-size-small); +} +.hds-button--size-small .hds-button__text { + font-size: var(--token-button-font-size-small); + line-height: var(--token-button-line-height-small); +} +.hds-button--size-small.hds-button--is-icon-only { + min-width: var(--token-button-height-small); + padding-right: var(--token-button-padding-vertical-small); + padding-left: var(--token-button-padding-vertical-small); +} + +.hds-button--size-medium { + min-height: var(--token-button-height-medium); + padding: var(--token-button-padding-vertical-medium) var(--token-button-padding-horizontal-medium); +} +.hds-button--size-medium .hds-button__icon { + width: var(--token-button-icon-size-medium); + height: var(--token-button-icon-size-medium); +} +.hds-button--size-medium .hds-button__text { + font-size: var(--token-button-font-size-medium); + line-height: var(--token-button-line-height-medium); +} +.hds-button--size-medium.hds-button--is-icon-only { + min-width: var(--token-button-height-medium); + padding-right: var(--token-button-padding-vertical-medium); + padding-left: var(--token-button-padding-vertical-medium); +} + +.hds-button--size-large { + min-height: var(--token-button-height-large); + padding: var(--token-button-padding-vertical-large) var(--token-button-padding-horizontal-large); +} +.hds-button--size-large .hds-button__icon { + width: var(--token-button-icon-size-large); + height: var(--token-button-icon-size-large); +} +.hds-button--size-large .hds-button__text { + font-size: var(--token-button-font-size-large); + line-height: var(--token-button-line-height-large); +} +.hds-button--size-large.hds-button--is-icon-only { + min-width: var(--token-button-height-large); + padding-right: var(--token-button-padding-vertical-large); + padding-left: var(--token-button-padding-vertical-large); +} + +.hds-button--is-inline { + display: inline-flex; +} + +button.hds-button[href] { + color: white !important; + background-color: red !important; + border: none; +} +button.hds-button[href] .hds-button__text, button.hds-button[href]::before { + display: none; +} +button.hds-button[href]::after { + content: ' Attention: you’re passing a "href" attribute to the "Hds::Button" component, you should use an "@href" argument.'; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-button-set { + display: flex; + gap: 16px; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-card__container { + position: relative; + background-color: #fff; + border-radius: 6px; +} + +.hds-card__container--level-surface-base { + box-shadow: var(--token-surface-base-box-shadow); +} + +.hds-card__container--level-surface-mid { + box-shadow: var(--token-surface-mid-box-shadow); +} + +.hds-card__container--level-surface-high { + box-shadow: var(--token-surface-high-box-shadow); +} + +.hds-card__container--hover-level-surface-base:hover, +.hds-card__container--hover-level-surface-base.mock-hover { + box-shadow: var(--token-surface-base-box-shadow); +} + +.hds-card__container--hover-level-surface-mid:hover, +.hds-card__container--hover-level-surface-mid.mock-hover { + box-shadow: var(--token-surface-mid-box-shadow); +} + +.hds-card__container--hover-level-surface-high:hover, +.hds-card__container--hover-level-surface-high.mock-hover { + box-shadow: var(--token-surface-high-box-shadow); +} + +.hds-card__container--active-level-surface-base:active, +.hds-card__container--active-level-surface-base.mock-active { + box-shadow: var(--token-surface-base-box-shadow); +} + +.hds-card__container--active-level-surface-mid:active, +.hds-card__container--active-level-surface-mid.mock-active { + box-shadow: var(--token-surface-mid-box-shadow); +} + +.hds-card__container--active-level-surface-high:active, +.hds-card__container--active-level-surface-high.mock-active { + box-shadow: var(--token-surface-high-box-shadow); +} + +.hds-card__container--level-elevation-base { + box-shadow: var(--token-elevation-base-box-shadow); +} + +.hds-card__container--level-elevation-mid { + box-shadow: var(--token-elevation-mid-box-shadow); +} + +.hds-card__container--level-elevation-high { + box-shadow: var(--token-elevation-high-box-shadow); +} + +.hds-card__container--hover-level-elevation-base:hover, +.hds-card__container--hover-level-elevation-base.mock-hover { + box-shadow: var(--token-elevation-base-box-shadow); +} + +.hds-card__container--hover-level-elevation-mid:hover, +.hds-card__container--hover-level-elevation-mid.mock-hover { + box-shadow: var(--token-elevation-mid-box-shadow); +} + +.hds-card__container--hover-level-elevation-high:hover, +.hds-card__container--hover-level-elevation-high.mock-hover { + box-shadow: var(--token-elevation-high-box-shadow); +} + +.hds-card__container--active-level-elevation-base:active, +.hds-card__container--active-level-elevation-base.mock-active { + box-shadow: var(--token-elevation-base-box-shadow); +} + +.hds-card__container--active-level-elevation-mid:active, +.hds-card__container--active-level-elevation-mid.mock-active { + box-shadow: var(--token-elevation-mid-box-shadow); +} + +.hds-card__container--active-level-elevation-high:active, +.hds-card__container--active-level-elevation-high.mock-active { + box-shadow: var(--token-elevation-high-box-shadow); +} + +.hds-card__container--background-neutral-primary { + background-color: var(--token-color-surface-primary); +} + +.hds-card__container--background-neutral-secondary { + background-color: var(--token-color-surface-faint); +} + +.hds-card__container--overflow-hidden { + overflow: hidden; +} + +.hds-card__container--overflow-visible { + overflow: visible; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-code-block--theme-dark { + --hds-code-block-color-blue: #2d8eff; + --hds-code-block-color-cyan: #32fff7; + --hds-code-block-color-green: #86ff13; + --hds-code-block-color-orange: #ffa800; + --hds-code-block-color-purple: #c76cff; + --hds-code-block-color-red: #ff3b20; + --hds-code-block-color-foreground-primary: #d5d7db; + --hds-code-block-color-foreground-faint: #b2b6bd; + --hds-code-block-color-surface-primary: #0d0e12; + --hds-code-block-color-surface-faint: #15181e; + --hds-code-block-color-foreground-success: #009241; + --hds-code-block-color-foreground-critical: #ef3016; + --hds-code-block-color-foreground-interactive: #dedfe3; + --hds-code-block-color-foreground-interactive-hover: #fff; + --hds-code-block-color-foreground-interactive-active: #f1f2f3; + --hds-code-block-color-surface-interactive-active: #2b303c; + --hds-code-block-color-foreground-action: #2b89ff; + --hds-code-block-color-foreground-action-hover: #389aff; + --hds-code-block-color-foreground-action-active: #4ca1ff; + --hds-code-block-color-border-strong: rgba(178, 182, 189, 40%); + --hds-code-block-color-border-primary: rgba(178, 182, 189, 20%); + --hds-code-block-color-foreground-selection: #0d0e12; + --hds-code-block-color-surface-selection: #86ff13; + --hds-code-block-color-line-highlight: rgba(0, 74, 222, 20%); + --hds-code-block-color-line-highlight-border: #1555d4; + --hds-code-block-color-token: var(--hds-code-block-color-foreground-primary); + --hds-code-block-color-atrule: var(--hds-code-block-color-blue); + --hds-code-block-color-code-block-attr-name: var(--hds-code-block-color-blue); + --hds-code-block-color-attr-value: var(--hds-code-block-color-blue); + --hds-code-block-color-boolean: var(--hds-code-block-color-purple); + --hds-code-block-color-builtin: var(--hds-code-block-color-orange); + --hds-code-block-color-char: var(--hds-code-block-color-orange); + --hds-code-block-color-class-name: var(--hds-code-block-color-blue); + --hds-code-block-color-comment: var(--hds-code-block-color-foreground-faint); + --hds-code-block-color-control: var(--hds-code-block-color-cyan); + --hds-code-block-color-constant: var(--hds-code-block-color-purple); + --hds-code-block-color-deleted: var(--hds-code-block-color-red); + --hds-code-block-color-entity: var(--hds-code-block-color-green); + --hds-code-block-color-function: var(--hds-code-block-color-blue); + --hds-code-block-color-important: var(--hds-code-block-color-red); + --hds-code-block-color-keyword: var(--hds-code-block-color-green); + --hds-code-block-color-namespace: var(--hds-code-block-color-red); + --hds-code-block-color-number: var(--hds-code-block-color-purple); + --hds-code-block-color-operator: var(--hds-code-block-color-cyan); + --hds-code-block-color-prolog: var(--hds-code-block-color-foreground-primary); + --hds-code-block-color-property: var(--hds-code-block-color-blue); + --hds-code-block-color-punctuation: var(--hds-code-block-color-foreground-primary); + --hds-code-block-color-regex: var(--hds-code-block-color-orange); + --hds-code-block-color-script: var(--hds-code-block-color-foreground-primary); + --hds-code-block-color-selector: var(--hds-code-block-color-green); + --hds-code-block-color-string: var(--hds-code-block-color-orange); + --hds-code-block-color-symbol: var(--hds-code-block-color-orange); + --hds-code-block-color-tag: var(--hds-code-block-color-green); + --hds-code-block-color-url: var(--hds-code-block-color-cyan); + --hds-code-block-color-lang-css: var(--hds-code-block-color-purple); + --hds-code-block-color-lang-css-token: var(--hds-code-block-color-green); + --hds-code-block-color-lang-css-atrule: var(--hds-code-block-color-purple); + --hds-code-block-color-lang-css-entity: var(--hds-code-block-color-blue); + --hds-code-block-color-lang-css-function: var(--hds-code-block-color-cyan); + --hds-code-block-color-lang-css-property: var(--hds-code-block-color-cyan); + --hds-code-block-color-lang-css-punctuation: var(--hds-code-block-color-orange); + --hds-code-block-color-lang-css-not-atrule: var(--hds-code-block-color-foreground-primary); + --hds-code-block-color-lang-css-selector: var(--hds-code-block-color-blue); + --hds-code-block-color-lang-css-url: var(--hds-code-block-color-orange); + --hds-code-block-color-lang-js-constant: var(--hds-code-block-color-orange); + --hds-code-block-color-lang-markup-attr-value: var(--hds-code-block-color-yellow); + --hds-code-block-color-lang-markup-entity-named: var(--hds-code-block-color-purple); + --hds-code-block-color-lang-markup-entity-not-named: var(--hds-code-block-color-green); +} + +.hds-code-block .token { + color: var(--hds-code-block-color-token); +} +.hds-code-block .token.atrule { + color: var(--hds-code-block-color-atrule); +} +.hds-code-block .token.attr-name { + color: var(--hds-code-block-color-attr-name); +} +.hds-code-block .token.attr-value { + color: var(--hds-code-block-color-attr-value); +} +.hds-code-block .token.boolean { + color: var(--hds-code-block-color-boolean); +} +.hds-code-block .token.builtin { + color: var(--hds-code-block-color-builtin); +} +.hds-code-block .token.char { + color: var(--hds-code-block-color-char); +} +.hds-code-block .token.class-name { + color: var(--hds-code-block-color-class-name); +} +.hds-code-block .token.comment { + color: var(--hds-code-block-color-comment); +} +.hds-code-block .token.constant { + color: var(--hds-code-block-color-constant); +} +.hds-code-block .token.deleted { + color: var(--hds-code-block-color-deleted); +} +.hds-code-block .token.entity { + color: var(--hds-code-block-color-entity); +} +.hds-code-block .token.function { + color: var(--hds-code-block-color-function); +} +.hds-code-block .token.important { + color: var(--hds-code-block-color-important); +} +.hds-code-block .token.keyword { + color: var(--hds-code-block-color-keyword); +} +.hds-code-block .token.namespace { + color: var(--hds-code-block-color-namespace); +} +.hds-code-block .token.number { + color: var(--hds-code-block-color-number); +} +.hds-code-block .token.operator { + color: var(--hds-code-block-color-operator); +} +.hds-code-block .token.punctuation { + color: var(--hds-code-block-color-punctuation); +} +.hds-code-block .token.prolog { + color: var(--hds-code-block-color-prolog); +} +.hds-code-block .token.property { + color: var(--hds-code-block-color-property); +} +.hds-code-block .token.regex { + color: var(--hds-code-block-color-regex); +} +.hds-code-block .token.script { + color: var(--hds-code-block-color-script); +} +.hds-code-block .token.selector { + color: var(--hds-code-block-color-selector); +} +.hds-code-block .token.string { + color: var(--hds-code-block-color-string); +} +.hds-code-block .token.symbol { + color: var(--hds-code-block-color-symbol); +} +.hds-code-block .token.tag { + color: var(--hds-code-block-color-tag); +} +.hds-code-block .token.url { + color: var(--hds-code-block-color-url); +} +.hds-code-block .token.variable { + color: var(--hds-code-block-color-comment); +} +.hds-code-block .language-css { + color: var(--hds-code-block-color-lang-css); +} +.hds-code-block .language-css .token { + color: var(--hds-code-block-color-lang-css-token); +} +.hds-code-block .language-css .token.atrule { + color: var(--hds-code-block-color-lang-css-atrule); +} +.hds-code-block .language-css .token.rule:not(.atrule) { + color: var(--hds-code-block-color-lang-css-not-atrule); +} +.hds-code-block .language-css .token.entity { + color: var(--hds-code-block-color-lang-css-entity); +} +.hds-code-block .language-css .token.function { + color: var(--hds-code-block-color-lang-css-function); +} +.hds-code-block .language-css .token.property { + color: var(--hds-code-block-color-lang-css-property); +} +.hds-code-block .language-css .token.punctuation { + color: var(--hds-code-block-color-lang-css-punctuatione); +} +.hds-code-block .language-css .token.selector { + color: var(--hds-code-block-color-lang-css-selector); +} +.hds-code-block .language-css .token.url { + color: var(--hds-code-block-color-lang-css-url); +} +.hds-code-block .language-javascript .token.constant { + color: var(--hds-code-block-color-lang-js-constant); +} +.hds-code-block .language-markup .token.attr-value, +.hds-code-block .language-html .token.attr-value { + color: var(--hds-code-block-color-lang-markup-attr-value); +} +.hds-code-block .language-markup .token.entity.named-entity, +.hds-code-block .language-html .token.entity.named-entity { + color: var(--hds-code-block-color-lang-markup-entity-named); +} +.hds-code-block .language-markup .token.entity:not(.named-entity), +.hds-code-block .language-html .token.entity:not(.named-entity) { + color: var(--hds-code-block-color-lang-markup-entity-not-named); +} + +.hds-code-block { + position: relative; + color: var(--hds-code-block-color-foreground-primary); + background-color: var(--hds-code-block-color-surface-primary); + border: 1px solid var(--hds-code-block-color-border-strong); +} +.hds-code-block pre, +.hds-code-block code { + line-height: 1.4286; + white-space: pre; + text-align: left; + text-shadow: none; + word-wrap: normal; + word-break: normal; + word-spacing: normal; + tab-size: 4; + hyphens: none; + scrollbar-width: thin; +} +@media print { + .hds-code-block pre, + .hds-code-block code { + text-shadow: none; + } +} + +.hds-code-block--is-standalone { + border-radius: 6px; +} + +.hds-code-block--has-line-wrapping .hds-code-block__code, +.hds-code-block--has-line-wrapping .hds-code-block__code code { + white-space: pre-wrap; + overflow-wrap: break-word; +} + +.hds-code-block__title { + color: var(--hds-code-block-color-foreground-primary); +} + +.hds-code-block__description { + color: var(--hds-code-block-color-foreground-faint); +} + +.hds-code-block__header { + display: flex; + flex-direction: column; + gap: 4px; + padding: 8px 16px; + background-color: var(--hds-code-block-color-surface-faint); + border-bottom: 1px solid var(--hds-code-block-color-border-primary); + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} +.hds-code-block__header:empty { + display: none; +} +.hds-code-block__header strong { + font-weight: var(--token-typography-font-weight-semibold); +} +.hds-code-block__header code, +.hds-code-block__header pre { + display: inline; + font-size: 0.9em; + font-family: var(--token-typography-code-100-font-family); + line-height: 1em; +} +.hds-code-block__header a:not([class*=hds-]) { + color: var(--hds-code-block-color-foreground-action); +} +.hds-code-block__header a:not([class*=hds-]):focus, .hds-code-block__header a:not([class*=hds-]):focus-visible { + text-decoration: none; + outline: 2px solid var(--token-color-focus-action-internal); + outline-offset: 1px; +} +.hds-code-block__header a:not([class*=hds-]):hover { + color: var(--token-color-foreground-action-hover); +} +.hds-code-block__header a:not([class*=hds-]):active { + color: var(--token-color-foreground-action-active); +} + +.hds-code-block__body { + position: relative; + border-radius: inherit; +} + +.hds-code-block__code { + outline-style: solid; + outline-color: transparent; + display: block; + margin: 0; + padding: 16px; + overflow: auto; + font-size: 0.8125rem; + font-family: var(--token-typography-code-200-font-family); + border-radius: inherit; +} +.hds-code-block__code:focus, .hds-code-block__code.mock-focus { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-code-block__code:focus:not(:focus-visible) { + box-shadow: none; +} +.hds-code-block__code:focus-visible { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-code-block__code:focus:active, .hds-code-block__code.mock-focus.mock-active { + box-shadow: none; +} +.hds-code-block__code ::selection { + color: var(--hds-code-block-color-foreground-selection); + background-color: var(--hds-code-block-color-surface-selection); +} + +.hds-code-block__copy-button { + position: absolute; + top: 11px; + right: 12px; + color: var(--hds-code-block-color-foreground-primary); + background-color: var(--hds-code-block-color-surface-faint); + border: 1px solid var(--hds-code-block-color-border-strong); +} +.hds-code-block__copy-button:hover, .hds-code-block__copy-button.mock-hover { + background-color: var(--hds-code-block-color-surface-primary); + border-color: var(--hds-code-block-color-border-strong); +} +.hds-code-block__copy-button:active, .hds-code-block__copy-button.mock-active { + background-color: var(--hds-code-block-color-surface-interactive-active); +} +.hds-code-block__copy-button:focus, .hds-code-block__copy-button.mock-focus, .hds-code-block__copy-button:focus-visible { + background-color: var(--hds-code-block-color-surface-faint); +} +.hds-code-block__copy-button.hds-copy-button--status-success .hds-icon { + color: var(--hds-code-block-color-foreground-success); +} +.hds-code-block__copy-button.hds-copy-button--status-error .hds-icon { + color: var(--hds-code-block-color-foreground-critical); +} +.hds-code-block__copy-button .hds-icon { + color: var(--hds-code-block-color-foreground-primary); +} + +.hds-code-block.line-numbers { + counter-reset: linenumber; +} +.hds-code-block.line-numbers .hds-code-block__code { + position: relative; + padding-left: calc(49px + 16px); +} +.hds-code-block.line-numbers .line-numbers-rows { + position: absolute; + top: 0; + left: 0; + min-width: 49px; + min-height: 100%; + padding: 16px 0; + border-right: 1px solid var(--hds-code-block-color-border-primary); + user-select: none; + pointer-events: none; +} +.hds-code-block.line-numbers .line-numbers-rows > span { + display: block; + counter-increment: linenumber; +} +.hds-code-block.line-numbers .line-numbers-rows > span::before { + display: block; + padding-right: 16px; + text-align: right; + content: counter(linenumber); +} +.hds-code-block .line-highlight { + position: absolute; + right: 0; + left: 0; + margin-top: -3px; + background-color: var(--hds-code-block-color-line-highlight); + border: solid var(--hds-code-block-color-line-highlight-border); + border-width: 1px 0 1px 4px; + mix-blend-mode: screen; + pointer-events: none; +} +@media print { + .hds-code-block .line-highlight { + /* + * This will prevent browsers from replacing the background color with white. + * It's necessary because the element is layered on top of the displayed code. + */ + -webkit-print-color-adjust: exact; + color-adjust: exact; + } +} +.hds-code-block .token.bold { + font-weight: bold; +} +.hds-code-block .token.italic { + font-style: italic; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-copy-button { + cursor: pointer; +} +.hds-copy-button .hds-button__icon { + color: var(--token-color-foreground-action); +} +.hds-copy-button:hover .hds-button__icon, .hds-copy-button.mock-hover .hds-button__icon { + color: var(--token-color-foreground-action-hover); +} +.hds-copy-button:active .hds-button__icon, .hds-copy-button.mock-active .hds-button__icon { + color: var(--token-color-foreground-action-active); +} +.hds-copy-button.hds-copy-button--status-success .hds-button__icon { + color: var(--token-color-foreground-success); +} +.hds-copy-button.hds-copy-button--status-error .hds-button__icon { + color: var(--token-color-foreground-critical); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-copy-snippet { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; + display: flex; + gap: 8px; + align-items: center; + justify-content: space-between; + padding: 6px 4px; + text-align: left; + border: 1px solid transparent; + border-radius: 5px; + cursor: pointer; +} +.hds-copy-snippet::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-copy-snippet:focus::before, .hds-copy-snippet.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-copy-snippet:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-copy-snippet:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-copy-snippet:focus:active::before, .hds-copy-snippet.mock-focus.mock-active::before { + box-shadow: none; +} + +.hds-copy-snippet--color-primary { + color: var(--token-color-foreground-action); + background-color: transparent; +} +.hds-copy-snippet--color-primary:hover, .hds-copy-snippet--color-primary.mock-hover { + color: var(--token-color-foreground-action-hover); + background-color: var(--token-color-surface-interactive); + border-color: var(--token-color-border-strong); +} +.hds-copy-snippet--color-primary:active, .hds-copy-snippet--color-primary.mock-active { + color: var(--token-color-foreground-action-active); + background-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-border-strong); +} +.hds-copy-snippet--color-primary.hds-copy-snippet--status-success { + background-color: var(--token-color-surface-interactive); +} +.hds-copy-snippet--color-primary.hds-copy-snippet--status-success .hds-copy-snippet__icon { + color: var(--token-color-foreground-success); +} +.hds-copy-snippet--color-primary.hds-copy-snippet--status-error { + background-color: var(--token-color-surface-interactive); +} +.hds-copy-snippet--color-primary.hds-copy-snippet--status-error .hds-copy-snippet__icon { + color: var(--token-color-foreground-critical); +} + +.hds-copy-snippet--color-secondary { + color: var(--token-color-foreground-primary); + background-color: transparent; +} +.hds-copy-snippet--color-secondary .hds-copy-snippet__icon { + color: var(--token-color-foreground-action); +} +.hds-copy-snippet--color-secondary:hover, .hds-copy-snippet--color-secondary.mock-hover { + background-color: var(--token-color-surface-interactive); + border-color: var(--token-color-border-strong); +} +.hds-copy-snippet--color-secondary:hover .hds-copy-snippet__icon, .hds-copy-snippet--color-secondary.mock-hover .hds-copy-snippet__icon { + color: var(--token-color-foreground-action-hover); +} +.hds-copy-snippet--color-secondary:active, .hds-copy-snippet--color-secondary.mock-active { + background-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-border-strong); +} +.hds-copy-snippet--color-secondary:active .hds-copy-snippet__icon, .hds-copy-snippet--color-secondary.mock-active .hds-copy-snippet__icon { + color: var(--token-color-foreground-action-active); +} +.hds-copy-snippet--color-secondary.hds-copy-snippet--status-success { + background-color: var(--token-color-surface-interactive); +} +.hds-copy-snippet--color-secondary.hds-copy-snippet--status-success .hds-copy-snippet__icon { + color: var(--token-color-foreground-success); +} +.hds-copy-snippet--color-secondary.hds-copy-snippet--status-error { + background-color: var(--token-color-surface-interactive); +} +.hds-copy-snippet--color-secondary.hds-copy-snippet--status-error .hds-copy-snippet__icon { + color: var(--token-color-foreground-critical); +} + +.hds-copy-snippet--status-success { + background-color: var(--token-color-surface-interactive); +} +.hds-copy-snippet--status-success .hds-copy-snippet__icon { + color: var(--token-color-foreground-success); +} + +.hds-copy-snippet--status-error { + background-color: var(--token-color-surface-interactive); +} +.hds-copy-snippet--status-error .hds-copy-snippet__icon { + color: var(--token-color-foreground-critical); +} + +.hds-copy-snippet__text { + flex: 1 0 0; +} + +.hds-copy-snippet__icon { + flex: none; +} + +.hds-copy-snippet--width-full { + width: 100%; + max-width: 100%; +} + +.hds-copy-snippet--is-truncated { + width: 100%; + max-width: 100%; +} +.hds-copy-snippet--is-truncated .hds-copy-snippet__text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +:where(.hds-dialog-primitive__wrapper) { + position: initial; + inset: initial; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + background: var(--token-color-surface-primary); + border: none; +} + +.hds-dialog-primitive__wrapper-header { + flex: none; + background: var(--token-color-surface-faint); + border-bottom: 1px solid var(--token-color-border-primary); + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} +.hds-dialog-primitive__wrapper-header:not(:has(> *)) { + display: none; +} + +.hds-dialog-primitive__wrapper-body { + flex: 1 1 auto; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; +} + +.hds-dialog-primitive__wrapper-footer { + flex: none; + border-top: 1px solid var(--token-color-border-primary); + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; +} +.hds-dialog-primitive__wrapper-footer:not(:has(> *)) { + display: none; +} + +.hds-dialog-primitive__header { + display: flex; + gap: 16px; + align-items: flex-start; + padding: 16px 24px; + color: var(--token-color-foreground-strong); + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.hds-dialog-primitive__icon { + flex: none; + align-self: center; +} + +.hds-dialog-primitive__title { + flex-grow: 1; + margin: 0; +} + +.hds-dialog-primitive__tagline { + margin-bottom: 4px; + color: var(--token-color-foreground-faint); +} + +.hds-dialog-primitive__dismiss { + align-self: flex-start; +} + +.hds-dialog-primitive__description { + padding: 0 24px 16px; +} + +.hds-dialog-primitive__body { + padding: 24px; +} + +.hds-dialog-primitive__footer { + padding: 16px 24px; + background: var(--token-color-surface-faint); + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; +} +.hds-dialog-primitive__footer .hds-button-set .hds-button--color-tertiary { + margin-left: auto; +} + +.hds-dialog-primitive__overlay { + position: fixed; + inset: 0; + z-index: 49; + background: var(--token-color-palette-neutral-700); + opacity: 0.5; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-disclosure-primitive { + position: relative; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-dismiss-button { + flex: none; + padding: 0; + color: var(--token-color-foreground-faint); + background-color: transparent; + border: none; + cursor: pointer; + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-dismiss-button:hover::before, .hds-dismiss-button.mock-hover::before { + background-color: rgba(222, 223, 227, 0.4); +} +.hds-dismiss-button::before { + position: absolute; + top: -4px; + right: -4px; + bottom: -4px; + left: -4px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-dismiss-button:focus::before, .hds-dismiss-button.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-dismiss-button:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-dismiss-button:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-dismiss-button:focus:active::before, .hds-dismiss-button.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-dismiss-button:active, .hds-dismiss-button.mock-active { + color: var(--token-color-foreground-secondary); +} +.hds-dismiss-button:active::before, .hds-dismiss-button.mock-active::before { + background-color: rgba(222, 223, 227, 0.4); + border: 1px solid var(--token-color-border-strong); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-dropdown--is-inline { + display: inline-block; +} +.hds-dropdown--is-inline .hds-dropdown-toggle-icon, +.hds-dropdown--is-inline .hds-dropdown-toggle-button { + display: inline-flex; +} + +.hds-dropdown-toggle-icon { + position: relative; + display: flex; + gap: 2px; + align-items: center; + justify-content: center; + padding: 1px; + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-faint); + border: 1px solid var(--token-color-border-strong); + border-radius: 5px; + outline-style: solid; + outline-color: transparent; +} +.hds-dropdown-toggle-icon:hover, .hds-dropdown-toggle-icon.mock-hover { + background-color: var(--token-color-surface-interactive); + cursor: pointer; +} +.hds-dropdown-toggle-icon:focus, .hds-dropdown-toggle-icon.mock-focus { + box-shadow: var(--token-button-box-shadow-focus); + border-color: var(--token-color-focus-action-internal); +} +.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before { + position: absolute; + top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + z-index: -1; + border: var(--token-button-focus-border-width) solid transparent; + border-radius: var(--token-button-focus-border-radius); + content: ""; +} +.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before { + border-color: var(--token-color-focus-action-external); +} +.hds-dropdown-toggle-icon:active, .hds-dropdown-toggle-icon.mock-active { + background-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-border-strong); +} +.hds-dropdown-toggle-icon:active::before, .hds-dropdown-toggle-icon.mock-active::before { + border-color: transparent; +} +.hds-dropdown-toggle-icon:disabled, .hds-dropdown-toggle-icon.mock-disabled { + color: var(--token-button-disabled-foreground); + background-color: var(--token-button-disabled-surface); + border-color: var(--token-button-disabled-border-color); + box-shadow: var(--token-button-disabled-box-shadow); + cursor: not-allowed; +} +.hds-dropdown-toggle-icon:disabled::before, .hds-dropdown-toggle-icon.mock-disabled::before { + border-color: transparent; +} + +.hds-dropdown-toggle-icon__wrapper { + display: flex; + align-items: center; + justify-content: center; + border-radius: 3px; +} +.hds-dropdown-toggle-icon__wrapper img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: inherit; +} + +.hds-dropdown-toggle-icon--size-small .hds-dropdown-toggle-icon__wrapper { + width: 24px; + height: 24px; +} +.hds-dropdown-toggle-icon--size-small.hds-dropdown-toggle-icon--has-chevron .hds-icon { + width: 12px; + height: 12px; +} + +.hds-dropdown-toggle-icon--size-medium .hds-dropdown-toggle-icon__wrapper { + width: 32px; + height: 32px; +} + +.hds-dropdown-toggle-button { + position: relative; + display: flex; + gap: var(--token-button-gap); + align-items: center; + justify-content: center; + width: auto; + font-weight: var(--token-button-font-weight); + font-family: var(--token-button-font-family); + text-decoration: none; + border: var(--token-button-border-width) solid transparent; + border-radius: var(--token-button-border-radius); + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-dropdown-toggle-button:focus, .hds-dropdown-toggle-button.mock-focus { + box-shadow: var(--token-button-box-shadow-focus); +} +.hds-dropdown-toggle-button:focus::before, .hds-dropdown-toggle-button.mock-focus::before { + position: absolute; + top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + z-index: -1; + border: var(--token-button-focus-border-width) solid transparent; + border-radius: var(--token-button-focus-border-radius); + content: ""; +} +.hds-dropdown-toggle-button:disabled, .hds-dropdown-toggle-button.mock-disabled, .hds-dropdown-toggle-button:disabled:focus, .hds-dropdown-toggle-button.mock-disabled:focus, .hds-dropdown-toggle-button:disabled:hover, .hds-dropdown-toggle-button.mock-disabled:hover { + color: var(--token-button-disabled-foreground); + background-color: var(--token-button-disabled-surface); + border-color: var(--token-button-disabled-border-color); + box-shadow: var(--token-button-disabled-box-shadow); + cursor: not-allowed; +} +.hds-dropdown-toggle-button:disabled::before, .hds-dropdown-toggle-button.mock-disabled::before, .hds-dropdown-toggle-button:disabled:focus::before, .hds-dropdown-toggle-button.mock-disabled:focus::before, .hds-dropdown-toggle-button:disabled:hover::before, .hds-dropdown-toggle-button.mock-disabled:hover::before { + border-color: transparent; +} +.hds-dropdown-toggle-button:disabled .hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button:disabled .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button.mock-disabled .hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button.mock-disabled .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button:disabled:focus .hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button:disabled:focus .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button.mock-disabled:focus .hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button.mock-disabled:focus .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button:disabled:hover .hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button:disabled:hover .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button.mock-disabled:hover .hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button.mock-disabled:hover .hds-dropdown-toggle-button__count { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-strong); +} + +.hds-dropdown-toggle-button--size-small { + min-height: var(--token-button-height-small); + padding: var(--token-button-padding-vertical-small) var(--token-button-padding-horizontal-small); +} +.hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-button__icon { + width: var(--token-button-icon-size-small); + height: var(--token-button-icon-size-small); +} +.hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-button__text { + font-size: var(--token-button-font-size-small); + line-height: var(--token-button-line-height-small); +} +.hds-dropdown-toggle-button--size-small.hds-dropdown-toggle-button--is-icon-only { + min-width: var(--token-button-height-small); + padding-right: var(--token-button-padding-vertical-small); + padding-left: var(--token-button-padding-vertical-small); +} + +.hds-dropdown-toggle-button--size-medium { + min-height: var(--token-button-height-medium); + padding: var(--token-button-padding-vertical-medium) var(--token-button-padding-horizontal-medium); +} +.hds-dropdown-toggle-button--size-medium .hds-dropdown-toggle-button__icon { + width: var(--token-button-icon-size-medium); + height: var(--token-button-icon-size-medium); +} +.hds-dropdown-toggle-button--size-medium .hds-dropdown-toggle-button__text { + font-size: var(--token-button-font-size-medium); + line-height: var(--token-button-line-height-medium); +} +.hds-dropdown-toggle-button--size-medium.hds-dropdown-toggle-button--is-icon-only { + min-width: var(--token-button-height-medium); + padding-right: var(--token-button-padding-vertical-medium); + padding-left: var(--token-button-padding-vertical-medium); +} + +.hds-dropdown-toggle-button--size-large { + min-height: var(--token-button-height-large); + padding: var(--token-button-padding-vertical-large) var(--token-button-padding-horizontal-large); +} +.hds-dropdown-toggle-button--size-large .hds-dropdown-toggle-button__icon { + width: var(--token-button-icon-size-large); + height: var(--token-button-icon-size-large); +} +.hds-dropdown-toggle-button--size-large .hds-dropdown-toggle-button__text { + font-size: var(--token-button-font-size-large); + line-height: var(--token-button-line-height-large); +} +.hds-dropdown-toggle-button--size-large.hds-dropdown-toggle-button--is-icon-only { + min-width: var(--token-button-height-large); + padding-right: var(--token-button-padding-vertical-large); + padding-left: var(--token-button-padding-vertical-large); +} + +.hds-dropdown-toggle-button--size-small { + padding-right: 0.375rem; +} +.hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-chevron .hds-icon { + width: 12px; + height: 12px; +} + +.hds-dropdown-toggle-button--size-medium { + padding-right: 0.5625rem; +} + +.hds-dropdown-toggle-button--color-primary { + color: var(--token-button-primary-foreground-default); + background-color: var(--token-button-primary-surface-default); + border-color: var(--token-token-button-primary-border-color-default); + box-shadow: var(--token-button-primary-box-shadow-default); +} +.hds-dropdown-toggle-button--color-primary:hover, .hds-dropdown-toggle-button--color-primary.mock-hover { + color: var(--token-button-primary-foreground-hover); + background-color: var(--token-button-primary-surface-hover); + border-color: var(--token-token-button-primary-border-color-hover); + cursor: pointer; +} +.hds-dropdown-toggle-button--color-primary:focus, .hds-dropdown-toggle-button--color-primary.mock-focus { + color: var(--token-button-primary-foreground-focus); + background-color: var(--token-button-primary-surface-focus); + border-color: var(--token-token-button-primary-border-color-focus); + box-shadow: var(--token-button-primary-box-shadow-focus); +} +.hds-dropdown-toggle-button--color-primary:focus::before, .hds-dropdown-toggle-button--color-primary.mock-focus::before { + top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + border-color: var(--token-color-focus-action-external); + border-radius: var(--token-button-border-radius); +} +.hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active { + color: var(--token-button-primary-foreground-active); + background-color: var(--token-button-primary-surface-active); + border-color: var(--token-token-button-primary-border-color-active); + box-shadow: var(--token-button-primary-box-shadow-active); +} +.hds-dropdown-toggle-button--color-primary:active::before, .hds-dropdown-toggle-button--color-primary.mock-active::before { + border-color: transparent; +} + +.hds-dropdown-toggle-button--color-secondary { + color: var(--token-button-secondary-foreground-default); + background-color: var(--token-button-secondary-surface-default); + border-color: var(--token-button-secondary-border-color-default); + box-shadow: var(--token-button-secondary-box-shadow-default); +} +.hds-dropdown-toggle-button--color-secondary:hover, .hds-dropdown-toggle-button--color-secondary.mock-hover { + color: var(--token-button-secondary-foreground-hover); + background-color: var(--token-button-secondary-surface-hover); + border-color: var(--token-button-secondary-border-color-hover); + cursor: pointer; +} +.hds-dropdown-toggle-button--color-secondary:focus, .hds-dropdown-toggle-button--color-secondary.mock-focus { + color: var(--token-button-secondary-foreground-focus); + background-color: var(--token-button-secondary-surface-focus); + border-color: var(--token-button-secondary-border-color-focus); + box-shadow: var(--token-button-secondary-box-shadow-focus); +} +.hds-dropdown-toggle-button--color-secondary:focus::before, .hds-dropdown-toggle-button--color-secondary.mock-focus::before { + border-color: var(--token-color-focus-action-external); +} +.hds-dropdown-toggle-button--color-secondary:active, .hds-dropdown-toggle-button--color-secondary.mock-active { + color: var(--token-button-secondary-foreground-active); + background-color: var(--token-button-secondary-surface-active); + border-color: var(--token-button-secondary-border-color-active); + box-shadow: var(--token-button-secondary-box-shadow-active); +} +.hds-dropdown-toggle-button--color-secondary:active::before, .hds-dropdown-toggle-button--color-secondary.mock-active::before { + border-color: transparent; +} + +.hds-dropdown-toggle-button--width-full { + justify-content: space-between; + width: 100%; + max-width: 100%; +} + +.hds-dropdown-toggle-button__text { + text-align: left; +} + +.hds-dropdown-toggle-button__icon { + flex: none; +} + +.hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button__count { + margin: -3px 0 -3px 0; +} + +.hds-dropdown-toggle-chevron { + margin-left: auto; + padding-left: 2px; +} +@media (prefers-reduced-motion: no-preference) { + .hds-dropdown-toggle-chevron .hds-icon-chevron-down { + transition: transform 0.3s; + } +} +.hds-dropdown-toggle-icon--is-open .hds-dropdown-toggle-chevron .hds-icon-chevron-down, .hds-dropdown-toggle-button--is-open .hds-dropdown-toggle-chevron .hds-icon-chevron-down { + transform: rotate(-180deg); +} + +.hds-dropdown__content { + position: relative; + display: flex; + flex-direction: column; + width: max-content; + min-width: 200px; + max-width: 400px; + background-color: var(--token-color-surface-primary); + border-radius: 6px; + box-shadow: var(--token-surface-high-box-shadow); +} +:where(.hds-dropdown__content[popover]) { + width: fit-content; + height: fit-content; + margin: 0; + padding: 0; + overflow: visible; + color: inherit; + background: none; + border: none; + inset: 0; +} + +.hds-dropdown .hds-dropdown__content { + display: none; +} +.hds-dropdown .hds-dropdown__content[popover]:popover-open { + display: flex; +} + +.hds-dropdown__content--fixed-width { + min-width: initial; + max-width: initial; +} + +.hds-dropdown__list { + flex: 1 1 auto; + margin: 0; + padding: 4px 0; + overflow-y: auto; + list-style: none; + overscroll-behavior: contain; +} + +.hds-dropdown__header, +.hds-dropdown__footer { + position: relative; + flex: none; + padding: 0 8px; +} +.hds-dropdown__header > .hds-link-standalone, +.hds-dropdown__footer > .hds-link-standalone { + width: initial; + margin: 4px 0; + padding: 7px 8px; +} +.hds-dropdown__header > .hds-link-standalone::before, +.hds-dropdown__footer > .hds-link-standalone::before { + top: 0; + bottom: 0; +} +.hds-dropdown__header > .hds-button, +.hds-dropdown__header > .hds-form-text-input, +.hds-dropdown__footer > .hds-button, +.hds-dropdown__footer > .hds-form-text-input { + margin: 8px 0; +} +.hds-dropdown__header > .hds-button-set, +.hds-dropdown__footer > .hds-button-set { + gap: 8px; + margin: 8px 0; +} + +.hds-dropdown__header--with-divider { + border-bottom: 1px solid var(--token-color-border-primary); +} + +.hds-dropdown__footer--with-divider { + border-top: 1px solid var(--token-color-border-primary); +} + +.hds-dropdown-list-item__copy-item-title { + padding: 2px 0 4px; + color: var(--token-color-foreground-faint); +} + +.hds-dropdown-list-item--variant-copy-item { + width: 100%; + padding: 10px 16px 12px; +} + +.hds-dropdown-list-item--variant-description { + padding: 2px 16px 4px; + color: var(--token-color-foreground-faint); +} + +.hds-dropdown-list-item--variant-generic { + padding-right: 16px; + padding-left: 16px; +} + +.hds-dropdown-list-item--variant-interactive, +.hds-dropdown-list-item--variant-checkmark { + position: relative; + min-height: 36px; + isolation: isolate; +} +.hds-dropdown-list-item--variant-interactive button, +.hds-dropdown-list-item--variant-checkmark button { + width: 100%; + background-color: transparent; +} +.hds-dropdown-list-item--variant-interactive button:hover, +.hds-dropdown-list-item--variant-checkmark button:hover { + cursor: pointer; +} +.hds-dropdown-list-item--variant-interactive a, +.hds-dropdown-list-item--variant-interactive button, +.hds-dropdown-list-item--variant-checkmark a, +.hds-dropdown-list-item--variant-checkmark button { + display: flex; + align-items: flex-start; + padding: 7px 9px 7px 15px; + text-decoration: none; + border: 1px solid transparent; + outline-style: solid; + outline-color: transparent; +} +.hds-dropdown-list-item--variant-interactive a::before, +.hds-dropdown-list-item--variant-interactive button::before, +.hds-dropdown-list-item--variant-checkmark a::before, +.hds-dropdown-list-item--variant-checkmark button::before { + position: absolute; + top: 6px; + bottom: 6px; + left: 4px; + z-index: -1; + width: 2px; + border-radius: 1px; + content: ""; +} +.hds-dropdown-list-item--variant-interactive a::after, +.hds-dropdown-list-item--variant-interactive button::after, +.hds-dropdown-list-item--variant-checkmark a::after, +.hds-dropdown-list-item--variant-checkmark button::after { + position: absolute; + top: 0; + right: 4px; + bottom: 0; + left: 10px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-dropdown-list-item--variant-interactive a:hover, .hds-dropdown-list-item--variant-interactive a.mock-hover, +.hds-dropdown-list-item--variant-interactive button:hover, +.hds-dropdown-list-item--variant-interactive button.mock-hover, +.hds-dropdown-list-item--variant-checkmark a:hover, +.hds-dropdown-list-item--variant-checkmark a.mock-hover, +.hds-dropdown-list-item--variant-checkmark button:hover, +.hds-dropdown-list-item--variant-checkmark button.mock-hover { + color: var(--current-color-hover); +} +.hds-dropdown-list-item--variant-interactive a:hover::before, .hds-dropdown-list-item--variant-interactive a.mock-hover::before, +.hds-dropdown-list-item--variant-interactive button:hover::before, +.hds-dropdown-list-item--variant-interactive button.mock-hover::before, +.hds-dropdown-list-item--variant-checkmark a:hover::before, +.hds-dropdown-list-item--variant-checkmark a.mock-hover::before, +.hds-dropdown-list-item--variant-checkmark button:hover::before, +.hds-dropdown-list-item--variant-checkmark button.mock-hover::before { + background-color: currentColor; +} +.hds-dropdown-list-item--variant-interactive a:focus, .hds-dropdown-list-item--variant-interactive a.mock-focus, +.hds-dropdown-list-item--variant-interactive button:focus, +.hds-dropdown-list-item--variant-interactive button.mock-focus, +.hds-dropdown-list-item--variant-checkmark a:focus, +.hds-dropdown-list-item--variant-checkmark a.mock-focus, +.hds-dropdown-list-item--variant-checkmark button:focus, +.hds-dropdown-list-item--variant-checkmark button.mock-focus { + color: var(--current-color-focus); +} +.hds-dropdown-list-item--variant-interactive a:focus::after, .hds-dropdown-list-item--variant-interactive a.mock-focus::after, +.hds-dropdown-list-item--variant-interactive button:focus::after, +.hds-dropdown-list-item--variant-interactive button.mock-focus::after, +.hds-dropdown-list-item--variant-checkmark a:focus::after, +.hds-dropdown-list-item--variant-checkmark a.mock-focus::after, +.hds-dropdown-list-item--variant-checkmark button:focus::after, +.hds-dropdown-list-item--variant-checkmark button.mock-focus::after { + left: 4px; + box-shadow: var(--current-focus-ring-box-shadow); +} +.hds-dropdown-list-item--variant-interactive a:focus:not(:focus-visible)::after, +.hds-dropdown-list-item--variant-interactive button:focus:not(:focus-visible)::after, +.hds-dropdown-list-item--variant-checkmark a:focus:not(:focus-visible)::after, +.hds-dropdown-list-item--variant-checkmark button:focus:not(:focus-visible)::after { + background-color: transparent; + box-shadow: none; +} +.hds-dropdown-list-item--variant-interactive a:focus-visible, +.hds-dropdown-list-item--variant-interactive button:focus-visible, +.hds-dropdown-list-item--variant-checkmark a:focus-visible, +.hds-dropdown-list-item--variant-checkmark button:focus-visible { + color: var(--current-color-focus); +} +.hds-dropdown-list-item--variant-interactive a:focus-visible::after, +.hds-dropdown-list-item--variant-interactive button:focus-visible::after, +.hds-dropdown-list-item--variant-checkmark a:focus-visible::after, +.hds-dropdown-list-item--variant-checkmark button:focus-visible::after { + left: 4px; + box-shadow: var(--current-focus-ring-box-shadow); +} +.hds-dropdown-list-item--variant-interactive a:focus:active::after, .hds-dropdown-list-item--variant-interactive a:focus-visible:active::after, .hds-dropdown-list-item--variant-interactive a.mock-focus.mock-active::after, +.hds-dropdown-list-item--variant-interactive button:focus:active::after, +.hds-dropdown-list-item--variant-interactive button:focus-visible:active::after, +.hds-dropdown-list-item--variant-interactive button.mock-focus.mock-active::after, +.hds-dropdown-list-item--variant-checkmark a:focus:active::after, +.hds-dropdown-list-item--variant-checkmark a:focus-visible:active::after, +.hds-dropdown-list-item--variant-checkmark a.mock-focus.mock-active::after, +.hds-dropdown-list-item--variant-checkmark button:focus:active::after, +.hds-dropdown-list-item--variant-checkmark button:focus-visible:active::after, +.hds-dropdown-list-item--variant-checkmark button.mock-focus.mock-active::after { + left: 10px; + background-color: var(--current-background-color); + box-shadow: none; +} +.hds-dropdown-list-item--variant-interactive a:active, .hds-dropdown-list-item--variant-interactive a.mock-active, +.hds-dropdown-list-item--variant-interactive button:active, +.hds-dropdown-list-item--variant-interactive button.mock-active, +.hds-dropdown-list-item--variant-checkmark a:active, +.hds-dropdown-list-item--variant-checkmark a.mock-active, +.hds-dropdown-list-item--variant-checkmark button:active, +.hds-dropdown-list-item--variant-checkmark button.mock-active { + color: var(--current-color-active); +} +.hds-dropdown-list-item--variant-interactive a:active::before, .hds-dropdown-list-item--variant-interactive a.mock-active::before, +.hds-dropdown-list-item--variant-interactive button:active::before, +.hds-dropdown-list-item--variant-interactive button.mock-active::before, +.hds-dropdown-list-item--variant-checkmark a:active::before, +.hds-dropdown-list-item--variant-checkmark a.mock-active::before, +.hds-dropdown-list-item--variant-checkmark button:active::before, +.hds-dropdown-list-item--variant-checkmark button.mock-active::before { + background-color: currentColor; +} + +.hds-dropdown-list-item__interactive-icon { + display: block; + margin-top: 2px; +} + +.hds-dropdown-list-item__interactive-icon--leading { + margin-right: 8px; +} + +.hds-dropdown-list-item__interactive-icon--trailing { + margin-left: 8px; +} + +.hds-dropdown-list-item__interactive-text { + display: block; + flex: 1; + text-align: left; +} + +.hds-dropdown-list-item--color-action a, +.hds-dropdown-list-item--color-action button { + color: var(--token-color-foreground-primary); + --current-color-hover: var(--token-color-foreground-action-hover); + --current-color-focus: var(--token-color-foreground-action-active); + --current-color-active: var(--token-color-foreground-action-active); +} +.hds-dropdown-list-item--color-action a::after, +.hds-dropdown-list-item--color-action button::after { + --current-focus-ring-box-shadow: var( + --token-focus-ring-action-box-shadow + ); +} + +.hds-dropdown-list-item--color-critical a, +.hds-dropdown-list-item--color-critical button { + color: var(--token-color-foreground-critical); + --current-color-hover: var(--token-color-palette-red-300); + --current-color-focus: var(--token-color-palette-red-400); + --current-color-active: var(--token-color-palette-red-400); +} +.hds-dropdown-list-item--color-critical a::after, +.hds-dropdown-list-item--color-critical button::after { + --current-background-color: var(--token-color-surface-critical); + --current-focus-ring-box-shadow: var( + --token-focus-ring-critical-box-shadow + ); +} + +.hds-dropdown-list-item__interactive-loading-wrapper { + display: flex; + align-items: center; + padding: 8px 10px 8px 16px; +} +.hds-dropdown-list-item__interactive-loading-wrapper .hds-dropdown-list-item__interactive-text { + color: var(--token-color-foreground-faint); +} +.hds-dropdown-list-item__interactive-loading-wrapper .hds-dropdown-list-item__interactive-icon { + color: var(--token-color-foreground-primary); +} + +.hds-dropdown-list-item--variant-separator { + position: relative; + width: 100%; + height: 4px; +} +.hds-dropdown-list-item--variant-separator::before { + position: absolute; + right: 6px; + bottom: 0; + left: 6px; + border-bottom: 1px solid var(--token-color-border-primary); + content: ""; +} + +.hds-dropdown-list-item--variant-title { + padding: 10px 16px 4px; + color: var(--token-color-foreground-strong); +} + +.hds-dropdown-list-item--variant-checkmark-selected .hds-dropdown-list-item__checkmark { + color: var(--token-color-foreground-action); +} + +.hds-dropdown-list-item__checkmark { + display: flex; + width: 16px; + height: 20px; + margin-left: 8px; +} + +.hds-dropdown-list-item__checkmark-icon { + align-self: center; +} + +.hds-dropdown-list-item__interactive[disabled], +.hds-dropdown-list-item__interactive[disabled]:hover { + color: var(--token-color-foreground-disabled); + cursor: not-allowed; +} + +.hds-dropdown-list-item--variant-checkbox, +.hds-dropdown-list-item--variant-radio { + display: flex; + align-items: self-start; + padding: 8px 16px; +} +.hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__control, +.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__control { + flex-shrink: 0; + margin-top: 2px; + margin-right: 8px; +} +.hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__icon, .hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__count, .hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__text-content, +.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__icon, +.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__count, +.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__text-content { + color: var(--token-color-foreground-disabled); +} +.hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__label, +.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__label { + display: flex; + flex-grow: 1; + align-items: flex-start; + color: var(--token-color-foreground-primary); +} +.hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__icon, +.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__icon { + margin-top: 2px; + margin-right: 4px; +} + +.hds-dropdown-list-item__count { + margin-left: auto; + padding-left: 8px; + color: var(--token-color-foreground-faint); + line-height: 20px; +} + +.hds-dropdown-list-item--variant-checkmark .hds-badge, +.hds-dropdown-list-item--variant-checkbox .hds-badge, +.hds-dropdown-list-item--variant-radio .hds-badge { + vertical-align: bottom; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-flyout { + position: fixed; + z-index: 49; + inset: 0; + height: 100vh; + max-height: 100vh; + background: var(--token-color-surface-primary); + border: none; + box-shadow: 0 2px 3px 0 rgba(59, 61, 69, 0.2509803922), 0 12px 24px 0 rgba(59, 61, 69, 0.3490196078); +} +.hds-flyout:not([open]) { + display: none; +} +.hds-flyout::backdrop { + display: none; +} + +.hds-flyout--size-medium { + width: min(480px, calc(100vw - var(--hds-app-sidenav-width-minimized) / 2)); + max-width: calc(100vw - var(--hds-app-sidenav-width-minimized) / 2); +} +.hds-flyout--size-medium[open] { + margin-left: calc(100% - min(480px, calc(100vw - var(--hds-app-sidenav-width-minimized) / 2))); +} + +.hds-flyout--size-large { + width: min(720px, calc(100vw - var(--hds-app-sidenav-width-minimized) / 2)); + max-width: calc(100vw - var(--hds-app-sidenav-width-minimized) / 2); +} +.hds-flyout--size-large[open] { + margin-left: calc(100% - min(720px, calc(100vw - var(--hds-app-sidenav-width-minimized) / 2))); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-label { + display: block; + width: max-content; + max-width: 100%; + color: var(--token-form-label-color); +} +.hds-form-label .hds-badge { + vertical-align: initial; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-helper-text { + display: block; + color: var(--token-form-helper-text-color); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-character-count { + color: var(--token-form-helper-text-color); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-error { + display: flex; + gap: var(--token-form-error-gap); + align-items: flex-start; + color: var(--token-form-error-color); +} + +.hds-form-error__icon { + flex: none; + width: var(--token-form-error-icon-size); + height: var(--token-form-error-icon-size); + margin: var(--token-form-error-icon-margin-vertical) var(--token-form-error-icon-margin-horizontal); +} + +.hds-form-error__content { + flex: 1 1 auto; +} + +.hds-form-error__message { + margin: 0; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-field--layout-vertical { + display: grid; + justify-items: start; + width: 100%; +} +.hds-form-field--layout-vertical .hds-form-field__label { + width: fit-content; +} +.hds-form-field--layout-vertical .hds-form-field__helper-text:not(:first-child) { + margin-top: 4px; +} +.hds-form-field--layout-vertical .hds-form-field__helper-text + .hds-form-helper-text { + margin-top: 2px; +} +.hds-form-field--layout-vertical .hds-form-field__control { + display: flex; + justify-self: stretch; +} +.hds-form-field--layout-vertical .hds-form-field__control:not(:first-child) { + margin-top: 8px; +} +.hds-form-field--layout-vertical .hds-form-field__control:not(:last-child) { + margin-bottom: 8px; +} +.hds-form-field--layout-vertical .hds-form-field__character-count { + margin-bottom: 8px; +} + +.hds-form-field--layout-flag { + display: grid; + grid-auto-flow: row; + grid-template-areas: "control label" "control helper-text" "control error"; + grid-template-rows: auto auto auto; + grid-template-columns: auto 1fr; + justify-items: start; +} +.hds-form-field--layout-flag .hds-form-field__label { + grid-area: label; + width: fit-content; +} +.hds-form-field--layout-flag .hds-form-field__helper-text { + grid-area: helper-text; + margin-top: 4px; +} +.hds-form-field--layout-flag .hds-form-field__control { + display: flex; + grid-area: control; +} +.hds-form-field--layout-flag .hds-form-field__control:not(:only-child) { + margin-top: 2px; + margin-right: 8px; +} +.hds-form-field--layout-flag .hds-form-field__error { + grid-area: error; + margin-top: 4px; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-file-input { + margin: -4px 0 -4px -4px; + padding: 3px 0 3px 3px; + color: var(--token-color-foreground-primary); +} +.hds-form-file-input:focus, .hds-form-file-input:focus-visible { + outline: none; +} + +.hds-form-file-input::file-selector-button { + min-height: var(--token-form-file-input-min-height); + margin-right: var(--token-form-file-input-margin-right); + padding: 7px 16px 7px 37px; + color: var(--token-color-foreground-primary); + font: inherit; + background-color: var(--token-color-surface-faint); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%233b3d45'%3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: 15px 50%; + background-size: var(--token-form-text-input-background-image-size); + border: var(--token-button-border-width) solid var(--token-color-border-strong); + border-radius: var(--token-button-border-radius); + box-shadow: var(--token-elevation-low-box-shadow); + cursor: pointer; +} + +.hds-form-file-input::file-selector-button:hover, +.hds-form-file-input.mock-hover::file-selector-button { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-primary); + border-color: var(--token-color-border-strong); +} + +.hds-form-file-input:focus-within::file-selector-button, +.hds-form-file-input.mock-focus::file-selector-button { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-faint); + border-color: var(--token-color-focus-action-internal); + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); +} + +.hds-form-file-input:not(:focus, .mock-focus)::file-selector-button { + border-color: var(--token-color-border-strong); + outline: 0; +} + +.hds-form-file-input::file-selector-button:active, +.hds-form-file-input.mock-active::file-selector-button { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-border-strong); + box-shadow: none; +} + +.hds-form-file-input:disabled, .hds-form-file-input[disabled], .hds-form-file-input.mock-disabled, .hds-form-file-input:disabled:focus, .hds-form-file-input[disabled]:focus, .hds-form-file-input.mock-disabled:focus, .hds-form-file-input:disabled:hover, .hds-form-file-input[disabled]:hover, .hds-form-file-input.mock-disabled:hover { + color: var(--token-color-foreground-disabled); +} +.hds-form-file-input:disabled::file-selector-button, .hds-form-file-input[disabled]::file-selector-button, .hds-form-file-input.mock-disabled::file-selector-button, .hds-form-file-input:disabled:focus::file-selector-button, .hds-form-file-input[disabled]:focus::file-selector-button, .hds-form-file-input.mock-disabled:focus::file-selector-button, .hds-form-file-input:disabled:hover::file-selector-button, .hds-form-file-input[disabled]:hover::file-selector-button, .hds-form-file-input.mock-disabled:hover::file-selector-button { + color: var(--token-button-disabled-foreground); + background-color: var(--token-button-disabled-surface); + border-color: var(--token-button-disabled-border-color); + box-shadow: var(--token-button-disabled-box-shadow); + cursor: not-allowed; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%238c909c'%3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E"); +} +.hds-form-file-input:disabled::file-selector-button::before, .hds-form-file-input[disabled]::file-selector-button::before, .hds-form-file-input.mock-disabled::file-selector-button::before, .hds-form-file-input:disabled:focus::file-selector-button::before, .hds-form-file-input[disabled]:focus::file-selector-button::before, .hds-form-file-input.mock-disabled:focus::file-selector-button::before, .hds-form-file-input:disabled:hover::file-selector-button::before, .hds-form-file-input[disabled]:hover::file-selector-button::before, .hds-form-file-input.mock-disabled:hover::file-selector-button::before { + border-color: transparent; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-legend { + display: block; + color: var(--token-form-legend-color); +} +.hds-form-legend .hds-badge { + vertical-align: initial; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-group { + display: block; + margin: 0; + padding: 0; + border: none; +} + +.hds-form-group__legend { + margin: 0 0 8px 0; + padding: 0; +} + +.hds-form-group__control-fields-wrapper .hds-form-group__legend ~ .hds-form-label { + font-weight: var(--token-typography-font-weight-regular); +} + +.hds-form-group--layout-vertical .hds-form-group__control-fields-wrapper { + display: flex; + flex-direction: column; +} +.hds-form-group--layout-vertical .hds-form-group__control-field + .hds-form-group__control-field { + margin-top: 12px; +} + +.hds-form-group--layout-horizontal .hds-form-group__control-fields-wrapper { + display: flex; + flex-wrap: wrap; + margin-bottom: -4px; +} +.hds-form-group--layout-horizontal .hds-form-group__control-field { + margin-right: 16px; + margin-bottom: 4px; +} + +.hds-form-group__helper-text { + margin-bottom: 8px; +} + +.hds-form-group__error { + margin-top: 8px; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-indicator--optional { + color: var(--token-form-indicator-optional-color); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-checkbox { + width: var(--token-form-checkbox-size); + height: var(--token-form-checkbox-size); + margin: 0; + padding: 0; + background-position: center center; + background-size: var(--token-form-checkbox-background-image-size) var(--token-form-checkbox-background-image-size); + border-style: solid; + border-width: var(--token-form-checkbox-border-width); + border-radius: var(--token-form-checkbox-border-radius); + cursor: pointer; + appearance: none; +} +.hds-form-checkbox:not(:checked, :indeterminate) { + background-color: var(--token-form-control-base-surface-color-default); + border-color: var(--token-form-control-base-border-color-default); + box-shadow: var(--token-form-control-base-box-shadow-default); +} +.hds-form-checkbox:checked { + background-color: var(--token-form-control-checked-surface-color-default); + background-image: var(--token-form-checkbox-background-image-data-url); + border-color: var(--token-form-control-checked-border-color-default); +} +.hds-form-checkbox:indeterminate { + background-color: var(--token-form-control-checked-surface-color-default); + background-image: var(--token-form-checkbox-background-image-data-url-indeterminate); + border-color: var(--token-form-control-checked-border-color-default); +} +.hds-form-checkbox:hover:not(:checked, :indeterminate), .hds-form-checkbox.mock-hover:not(:checked, :indeterminate) { + background-color: var(--token-form-control-base-surface-color-hover); + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-checkbox:hover:checked, .hds-form-checkbox.mock-hover:checked, .hds-form-checkbox:hover:indeterminate, .hds-form-checkbox.mock-hover:indeterminate { + background-color: var(--token-form-control-checked-border-color-default); + border-color: var(--token-form-control-checked-border-color-hover); +} +.hds-form-checkbox:focus, .hds-form-checkbox.mock-focus { + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: 1px; +} +.hds-form-checkbox:disabled:not(:checked, :indeterminate) { + background-color: var(--token-form-control-disabled-surface-color); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-checkbox:disabled:checked { + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-checkbox-background-image-data-url-disabled); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-checkbox:disabled:indeterminate { + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-checkbox-background-image-data-url-indeterminate-disabled); + background-repeat: no-repeat; + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-masked-input { + position: relative; + display: grid; + grid-template-areas: "input copy-button"; + grid-template-columns: 1fr auto; + width: 100%; +} +.hds-form-masked-input .hds-form-masked-input__control { + grid-area: input; + padding-right: calc(var(--token-form-control-padding) + var(--token-form-masked-input-toggle-button-size)); + scrollbar-width: thin; +} + +.hds-form-masked-input--is-masked .hds-form-masked-input__control { + -webkit-text-security: disc; +} + +.hds-form-masked-input--is-not-masked .hds-form-masked-input__control { + -webkit-text-security: none; +} + +.hds-form-masked-input__toggle-button { + position: absolute; + top: calc(var(--token-form-control-padding) - var(--token-form-control-border-width)); + right: calc(var(--token-form-control-padding) - var(--token-form-control-border-width)); + grid-area: input; +} + +.hds-form-masked-input__copy-button { + grid-area: copy-button; + align-self: flex-start; + margin-left: var(--token-form-masked-input-copy-button-margin-right); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-radio { + width: var(--token-form-radio-size); + height: var(--token-form-radio-size); + margin: 0; + padding: 0; + background-position: center center; + background-size: var(--token-form-radio-background-image-size) var(--token-form-radio-background-image-size); + border-style: solid; + border-width: var(--token-form-radio-border-width); + border-radius: 50%; + cursor: pointer; + appearance: none; +} +.hds-form-radio:not(:checked) { + background-color: var(--token-form-control-base-surface-color-default); + border-color: var(--token-form-control-base-border-color-default); + box-shadow: var(--token-form-control-base-box-shadow-default); +} +.hds-form-radio:checked { + background-color: var(--token-form-control-checked-surface-color-default); + background-image: var(--token-form-radio-background-image-data-url); + border-color: var(--token-form-control-checked-border-color-default); +} +.hds-form-radio:hover:not(:checked), .hds-form-radio.mock-hover:not(:checked) { + background-color: var(--token-form-control-base-surface-color-hover); + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-radio:hover:checked, .hds-form-radio.mock-hover:checked { + background-color: var(--token-form-control-checked-border-color-default); + border-color: var(--token-form-control-checked-border-color-hover); +} +.hds-form-radio:focus, .hds-form-radio.mock-focus { + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: var(--token-form-radio-outline-offset); +} +.hds-form-radio:disabled:not(:checked) { + background-color: var(--token-form-control-disabled-surface-color); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-radio:disabled:checked { + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-radio-background-image-data-url-disabled); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-group--radio-cards .hds-form-group__control-fields-wrapper { + margin: calc(-1 * var(--token-form-radiocard-group-gap) / 2); +} +.hds-form-group--radio-cards .hds-form-group__legend { + margin-bottom: var(--token-form-radiocard-group-legend-margin-bottom); +} +.hds-form-group--radio-cards .hds-form-radio-card { + margin: calc(var(--token-form-radiocard-group-gap) / 2); +} +.hds-form-group--radio-cards .hds-form-radio-card--has-fluid-width { + flex: 1 0 0; +} +.hds-form-group--radio-cards .hds-form-radio-card--has-fixed-width { + flex: 1 0 100%; +} + +.hds-form-radio-card { + display: flex; + flex-direction: column; + background-color: var(--token-color-surface-primary); + border: var(--token-form-radiocard-border-width) solid var(--token-color-border-primary); + border-radius: var(--token-form-radiocard-border-radius); + box-shadow: var(--token-form-radiocard-box-shadow-default); + cursor: pointer; +} +.hds-form-radio-card .hds-form-radio-card__control { + outline-color: transparent; +} +.hds-form-radio-card:hover, .hds-form-radio-card.mock-hover { + box-shadow: var(--token-form-radiocard-box-shadow-hover); + transition: var(--token-form-radiocard-transition-duration); +} +.hds-form-radio-card:focus-within, .hds-form-radio-card.mock-focus { + border-color: var(--token-color-focus-action-internal); + box-shadow: var(--token-form-radiocard-box-shadow-focus); +} +.hds-form-radio-card--checked, .hds-form-radio-card.mock-checked { + border-color: var(--token-color-palette-blue-300); +} +.hds-form-radio-card--checked .hds-form-radio-card__control-wrapper, .hds-form-radio-card.mock-checked .hds-form-radio-card__control-wrapper { + background-color: var(--token-color-surface-action); + border-color: var(--token-color-border-action); +} +.hds-form-radio-card--checked:hover, .hds-form-radio-card--checked.mock-hover, .hds-form-radio-card.mock-checked:hover, .hds-form-radio-card.mock-checked.mock-hover { + border-color: var(--token-color-palette-blue-400); +} +.hds-form-radio-card--disabled, .hds-form-radio-card.mock-disabled { + background-color: var(--token-color-surface-interactive-disabled); + border-color: var(--token-color-border-primary); + box-shadow: var(--token-form-radiocard-box-shadow-disabled); + cursor: not-allowed; +} +.hds-form-radio-card--disabled .hds-form-radio-card__control-wrapper, .hds-form-radio-card.mock-disabled .hds-form-radio-card__control-wrapper { + background-color: var(--token-color-surface-interactive-disabled); + border-color: var(--token-color-border-primary); +} +.hds-form-radio-card--disabled .hds-form-radio-card__content, .hds-form-radio-card.mock-disabled .hds-form-radio-card__content { + opacity: 0.5; +} + +.hds-form-radio-card--align-left { + text-align: left; +} + +.hds-form-radio-card--align-center { + text-align: center; +} +.hds-form-radio-card--align-center .hds-icon { + margin: auto; +} + +.hds-form-radio-card--control-bottom .hds-form-radio-card__control-wrapper { + border-top-width: var(--token-form-radiocard-border-width); + border-top-style: solid; + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; +} + +.hds-form-radio-card--control-left { + flex-direction: row-reverse; +} +.hds-form-radio-card--control-left .hds-form-radio-card__control-wrapper { + display: flex; + align-items: center; + border-right-width: var(--token-form-radiocard-border-width); + border-right-style: solid; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; +} + +.hds-form-radio-card__content { + flex: 1; + padding: var(--token-form-radiocard-content-padding); +} +.hds-form-radio-card__content .hds-badge { + margin-bottom: 12px; +} + +.hds-form-radio-card__label { + display: block; + margin: 8px 0; + color: var(--token-form-label-color); + overflow-wrap: break-word; +} +.hds-form-radio-card__label:first-child { + margin-top: 0; +} + +.hds-form-radio-card__description { + display: block; + color: var(--token-color-foreground-primary); +} + +.hds-form-radio-card__control-wrapper { + padding: var(--token-form-radiocard-control-padding); + background-color: var(--token-color-surface-faint); + border-color: var(--token-color-border-primary); +} + +.hds-form-radio-card__control { + display: block; + margin: auto; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-select { + max-width: 100%; + padding: var(--token-form-control-padding); + padding-right: var(--token-form-control-padding-with-icon); + color: var(--token-form-control-base-foreground-value-color); + background-color: var(--token-form-control-base-surface-color-default); + background-image: var(--token-form-select-background-image-data-url); + background-repeat: no-repeat; + background-position: right var(--token-form-select-background-image-position-right-x) top var(--token-form-select-background-image-position-top-y); + background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size); + border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); + border-radius: var(--token-form-control-border-radius); + box-shadow: var(--token-elevation-low-box-shadow); + appearance: none; +} +.hds-form-select:hover, .hds-form-select.mock-hover { + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-select:focus, .hds-form-select.mock-focus { + border-color: var(--token-color-focus-action-internal); + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: var(--token-form-select-outline-offset); +} +.hds-form-select:disabled { + color: var(--token-form-control-disabled-foreground-color); + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-select-background-image-data-url-disabled); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-select.hds-form-select--is-invalid { + border-color: var(--token-form-control-invalid-border-color-default); +} +.hds-form-select.hds-form-select--is-invalid:hover, .hds-form-select.hds-form-select--is-invalid.mock-hover { + border-color: var(--token-form-control-invalid-border-color-hover); +} +.hds-form-select.hds-form-select--is-invalid:focus, .hds-form-select.hds-form-select--is-invalid.mock-focus { + border-color: var(--token-color-focus-critical-internal); + outline-color: var(--token-form-control-invalid-outline-color); +} + +.hds-form-select[multiple], .hds-form-select[size] { + background: none; +} +.hds-form-select[multiple] option, .hds-form-select[size] option { + margin: 2px auto; + border-radius: 3px; +} +.hds-form-select[multiple] option:hover, .hds-form-select[size] option:hover { + color: var(--token-color-foreground-action); +} +.hds-form-select[multiple] option:disabled, .hds-form-select[size] option:disabled { + color: var(--token-color-foreground-disabled); +} +.hds-form-select[multiple] option:checked, .hds-form-select[size] option:checked { + color: var(--token-color-foreground-high-contrast); + background: var(--token-color-palette-blue-200); +} +.hds-form-select[multiple] optgroup, .hds-form-select[size] optgroup { + color: var(--token-color-foreground-strong); + font-weight: var(--token-typography-font-weight-semibold); + font-style: normal; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-super-select { + width: 100%; +} + +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger { + display: flex; + align-items: center; + max-width: 100%; + min-height: 36px; + padding-top: 4px; + padding-right: calc(var(--token-form-control-padding) + 24px); + padding-bottom: 4px; + padding-left: 11px; + color: var(--token-form-control-base-foreground-value-color); + line-height: var(--token-typography-body-200-line-height); + background-color: var(--token-form-control-base-surface-color-default); + background-image: var(--token-form-select-background-image-data-url); + background-repeat: no-repeat; + background-position: right var(--token-form-select-background-image-position-right-x) center, top var(--token-form-select-background-image-position-top-y) left 20px; + background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size); + border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); + border-radius: var(--token-form-control-border-radius); + box-shadow: var(--token-elevation-low-box-shadow); +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger:hover, .hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger.mock-hover, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger:hover, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger.mock-hover { + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger:focus, .hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger.mock-focus, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger:focus, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger.mock-focus { + border-color: var(--token-color-focus-action-internal); + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: 0; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger[aria-expanded=true].ember-basic-dropdown-trigger--in-place, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger[aria-expanded=true].ember-basic-dropdown-trigger--in-place { + border-radius: var(--token-form-control-border-radius); +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger .ember-power-select-status-icon, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger .ember-power-select-status-icon { + display: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger .ember-power-select-placeholder, +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger .ember-power-select-selected-item, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger .ember-power-select-placeholder, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger .ember-power-select-selected-item { + flex: 1; + margin-left: 0; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger .ember-power-select-placeholder, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger .ember-power-select-placeholder { + color: var(--token-form-control-base-foreground-placeholder-color); + font-size: var(--token-typography-body-200-font-size); + font-family: var(--token-typography-body-200-font-family); + line-height: var(--token-typography-body-200-line-height); +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger[aria-disabled=true], +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger[aria-disabled=true] { + color: var(--token-form-control-disabled-foreground-color); + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-select-background-image-data-url-disabled); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; + opacity: 1; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger[aria-disabled=true] .ember-power-select-selected-item, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger[aria-disabled=true] .ember-power-select-selected-item { + opacity: inherit; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content { + max-width: var(--hds-form-super-select-dropdown-max-width, none); + margin: 0; + border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); + border-radius: var(--token-form-control-border-radius); +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content.ember-basic-dropdown-content--in-place { + box-shadow: var(--token-elevation-high-box-shadow), var(--token-elevation-high-box-shadow); +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content.ember-basic-dropdown-content--below { + margin-top: 4px; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content.ember-basic-dropdown-content--above { + top: unset !important; + bottom: 100%; + margin-bottom: 4px; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content > .ember-power-select-options > .hds-form-super-select__option-group:first-child::before { + display: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-options { + padding: 3px 0; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-options .ember-power-select-options { + padding: 0; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option { + position: relative; + min-height: 36px; + padding: 7px 7px 7px 39px; + color: var(--token-color-foreground-primary); + font-size: var(--token-typography-body-200-font-size); + font-family: var(--token-typography-body-200-font-family); + line-height: var(--token-typography-body-200-line-height); + overflow-wrap: break-word; + border: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option + .ember-power-select-option { + margin-top: 8px; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option[aria-current=true] { + color: var(--token-form-control-base-foreground-value-color); + background-color: var(--token-form-control-base-surface-color-default); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option[aria-selected=true] { + background-color: var(--token-form-control-base-surface-color-default); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option[aria-current=true], .hds-form-super-select .ember-basic-dropdown .ember-power-select-option:hover, .hds-form-super-select .ember-basic-dropdown .ember-power-select-option.mock-hover { + border: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option[aria-current=true]::after, .hds-form-super-select .ember-basic-dropdown .ember-power-select-option:hover::after, .hds-form-super-select .ember-basic-dropdown .ember-power-select-option.mock-hover::after { + position: absolute; + top: 6px; + bottom: 6px; + left: 3px; + width: 2px; + background-color: var(--token-color-foreground-action-hover); + border-radius: 500px; + content: ""; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option:active::after, .hds-form-super-select .ember-basic-dropdown .ember-power-select-option.mock-active::after { + background-color: var(--token-color-foreground-action-active); +} +.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group:first-child .hds-form-super-select__option-group-title { + margin-top: 0; +} +.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group::before { + display: block; + height: 5px; + margin: 7px 5px 9px 5px; + border-bottom: 1px solid var(--token-color-border-primary); + content: ""; +} +.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group .hds-form-super-select__option-group { + padding-left: 16px; +} +.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group .hds-form-super-select__option-group:first-child::before { + display: none; +} +.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group-title { + margin: 8px 0; + padding: 6px 7px 2px 15px; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search { + margin-bottom: 3px; + padding: 11px 11px 0 11px; + border-radius: var(--token-form-control-border-radius); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input { + width: 100%; + min-height: 36px; + padding: var(--token-form-control-padding); + color: var(--token-form-control-base-foreground-value-color); + font-size: var(--token-typography-body-200-font-size); + font-family: var(--token-typography-body-200-font-family); + line-height: 1rem; + background-color: var(--token-form-control-base-surface-color-default); + border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); + border-radius: var(--token-form-control-border-radius); + box-shadow: var(--token-elevation-inset-box-shadow); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input::placeholder { + color: var(--token-form-control-base-foreground-placeholder-color); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input:hover, .hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input.mock-hover { + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input:focus, .hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input.mock-focus { + border-color: var(--token-color-focus-action-internal); + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: 0; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input[type=search] { + padding-left: calc(var(--token-form-control-padding) + 24px); + background-image: var(--token-form-text-input-background-image-data-url-search); + background-repeat: no-repeat; + background-position: var(--token-form-text-input-background-image-position-x) 50%; + background-size: var(--token-form-text-input-background-image-size); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input[type=search]::-webkit-search-cancel-button { + width: var(--token-form-text-input-background-image-size); + height: var(--token-form-text-input-background-image-size); + background-image: var(--token-form-text-input-background-image-data-url-search-cancel); + background-position: center center; + background-size: var(--token-form-text-input-background-image-size); + appearance: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-multiple-options { + display: flex; + flex-grow: 1; + flex-wrap: wrap; + gap: 4px; + min-width: 0; + list-style: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-multiple-option { + float: none; + min-width: 0; + margin: 0; + padding: 3px 10px 5px 10px; + font-size: var(--token-typography-body-100-font-size); + font-family: var(--token-typography-body-100-font-family); + line-height: 1rem; + vertical-align: middle; + overflow-wrap: break-word; + background-color: var(--token-color-surface-interactive); + border: 1px solid var(--token-color-border-strong); + border-radius: 50px; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-multiple-remove-btn { + display: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger-multiple-input { + color: var(--token-form-control-base-foreground-value-color); + font-size: var(--token-typography-body-200-font-size); + font-family: var(--token-typography-body-200-font-family); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger-multiple-input::-webkit-search-cancel-button { + width: var(--token-form-text-input-background-image-size); + height: var(--token-form-text-input-background-image-size); + background-image: var(--token-form-text-input-background-image-data-url-search-cancel); + background-position: center center; + background-size: var(--token-form-text-input-background-image-size); + cursor: pointer; + -webkit-appearance: none; +} + +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger, +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger { + border-color: var(--token-form-control-invalid-border-color-default); +} +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger:hover, .hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger.mock-hover, +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger:hover, +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger.mock-hover { + border-color: var(--token-form-control-invalid-border-color-hover); +} +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger:focus, .hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger.mock-focus, +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger:focus, +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger.mock-focus { + border-color: var(--token-color-focus-critical-internal); + outline-color: var(--token-color-focus-critical-external); +} + +.hds-form-super-select.hds-form-super-select--show-only-selected .ember-basic-dropdown .ember-power-select-option:not([aria-selected=true]) { + display: none; +} + +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message) { + background-repeat: no-repeat; + background-position: 15px 10px; + background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size); +} +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true]) { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.78 4.28a.75.75 0 00-1.06-1.06l-7.97 7.97-3.47-3.47a.75.75 0 00-1.06 1.06l4 4a.75.75 0 001.06 0l8.5-8.5z' fill='%231060ff'/%3E%3C/svg%3E"); +} +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true]):hover, .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true]).mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true]):active, .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true]).mock-active { + color: var(--token-color-foreground-action-active); +} +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-current=true], .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message):hover, .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message).mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message):active, .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message).mock-active { + color: var(--token-color-foreground-action-active); +} +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true][aria-disabled=true] { + background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7803 4.28033C15.0732 3.98744 15.0732 3.51256 14.7803 3.21967C14.4874 2.92678 14.0126 2.92678 13.7197 3.21967L5.75 11.1893L2.28033 7.71967C1.98744 7.42678 1.51256 7.42678 1.21967 7.71967C0.926777 8.01256 0.926777 8.48744 1.21967 8.78033L5.21967 12.7803C5.51256 13.0732 5.98744 13.0732 6.28033 12.7803L14.7803 4.28033Z' fill='%238C909C'/%3E%3C/svg%3E"); +} + +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message) { + position: relative; +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)::before { + position: absolute; + top: 9px; + left: 15px; + display: block; + width: var(--token-form-checkbox-size); + height: var(--token-form-checkbox-size); + background-position: center center; + background-size: var(--token-form-checkbox-background-image-size) var(--token-form-checkbox-background-image-size); + border-style: solid; + border-width: var(--token-form-checkbox-border-width); + border-radius: var(--token-form-checkbox-border-radius); + cursor: pointer; + content: ""; +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message):not([aria-selected=true])::before { + background-color: var(--token-form-control-base-surface-color-default); + border-color: var(--token-form-control-base-border-color-default); + box-shadow: var(--token-elevation-inset-box-shadow); +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-current=true]::before, .hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message):hover:not([aria-selected=true])::before, .hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message).mock-hover:not([aria-selected=true])::before { + background-color: var(--token-form-control-base-surface-color-hover); + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-disabled=true]:not([aria-selected=true])::before { + background-color: var(--token-form-control-disabled-surface-color); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true])::before { + background-color: var(--token-form-control-checked-surface-color-default); + background-image: var(--token-form-checkbox-background-image-data-url); + border-color: var(--token-form-control-checked-border-color-default); +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true][aria-current=true]::before, .hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:hover[aria-selected=true]::before, .hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true].mock-hover[aria-selected=true]::before { + background-color: var(--token-form-control-checked-border-color-default); + border-color: var(--token-form-control-checked-border-color-hover); +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true][aria-disabled=true]::before { + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-checkbox-background-image-data-url-disabled); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} + +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option--no-matches-message { + padding-left: 12px; + cursor: inherit; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option--no-matches-message::after { + display: none; +} + +.hds-form-super-select__after-options { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + padding: 8px 12px; + background-color: var(--token-color-surface-strong); + border-top: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); +} + +.hds-form-super-select__result-count { + margin-left: auto; +} + +.hds-form-super-select__no-options-selected { + min-height: 36px; + padding: 4px 15px 10px; +} + +.hds-form-super-select--dropdown-content-auto-width .ember-power-select-dropdown.ember-basic-dropdown-content { + width: auto; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-text-input { + width: 100%; + max-width: 100%; + padding: var(--token-form-control-padding); + color: var(--token-form-control-base-foreground-value-color); + background-color: var(--token-form-control-base-surface-color-default); + border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); + border-radius: var(--token-form-control-border-radius); + box-shadow: var(--token-form-control-base-box-shadow-default); +} +.hds-form-text-input ::placeholder { + color: var(--token-form-control-base-foreground-placeholder-color); +} +.hds-form-text-input:hover, .hds-form-text-input.mock-hover { + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-text-input:focus, .hds-form-text-input.mock-focus { + border-color: var(--token-color-focus-action-internal); + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: var(--token-form-text-input-outline-offset); +} +.hds-form-text-input:read-only { + color: var(--token-form-control-readonly-foreground-color); + background-color: var(--token-form-control-readonly-surface-color); + border-color: var(--token-form-control-readonly-border-color); + box-shadow: none; +} +.hds-form-text-input:disabled { + color: var(--token-form-control-disabled-foreground-color); + background-color: var(--token-form-control-disabled-surface-color); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-text-input.hds-form-text-input--is-invalid { + border-color: var(--token-form-control-invalid-border-color-default); +} +.hds-form-text-input.hds-form-text-input--is-invalid:hover, .hds-form-text-input.hds-form-text-input--is-invalid.mock-hover { + border-color: var(--token-form-control-invalid-border-color-hover); +} +.hds-form-text-input.hds-form-text-input--is-invalid:focus, .hds-form-text-input.hds-form-text-input--is-invalid.mock-focus { + border-color: var(--token-color-focus-critical-internal); + outline-color: var(--token-form-control-focus-outline-color); +} + +.hds-form-text-input__wrapper { + position: relative; + width: 100%; +} + +.hds-form-text-input--has-visibility-toggle { + padding-right: var(--token-form-control-padding-with-icon); +} + +.hds-form-text-input__visibility-toggle { + position: absolute; + top: calc(var(--token-form-control-padding) - var(--token-form-control-border-width)); + right: calc(var(--token-form-control-padding) - var(--token-form-control-border-width)); +} + +.hds-form-text-input[type=date], .hds-form-text-input[type=time], .hds-form-text-input[type=datetime-local], .hds-form-text-input[type=month], .hds-form-text-input[type=week] { + width: initial; +} +.hds-form-text-input[type=date]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=time]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=month]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=week]:disabled::-webkit-calendar-picker-indicator { + visibility: visible; + opacity: 0.5; +} +.hds-form-text-input[type=date][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=time][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=month][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=week][readonly]::-webkit-calendar-picker-indicator { + visibility: visible; +} +.hds-form-text-input[type=date]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=month]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=week]::-webkit-calendar-picker-indicator { + background-image: var(--token-form-text-input-background-image-data-url-date); + background-position: center center; + background-size: var(--token-form-text-input-background-image-size); +} +.hds-form-text-input[type=time]::-webkit-calendar-picker-indicator { + background-image: var(--token-form-text-input-background-image-data-url-time); + background-position: center center; + background-size: var(--token-form-text-input-background-image-size); +} +.hds-form-text-input[type=search] { + padding-left: calc(var(--token-form-control-padding) + 24px); + background-image: var(--token-form-text-input-background-image-data-url-search); + background-repeat: no-repeat; + background-position: var(--token-form-text-input-background-image-position-x) 50%; + background-size: var(--token-form-text-input-background-image-size); +} +.hds-form-text-input[type=search]::-webkit-search-cancel-button { + width: var(--token-form-text-input-background-image-size); + height: var(--token-form-text-input-background-image-size); + background-image: var(--token-form-text-input-background-image-data-url-search-cancel); + background-position: center center; + background-size: var(--token-form-text-input-background-image-size); + -webkit-appearance: none; +} +.hds-form-text-input[type=search].hds-form-text-input--is-loading { + background-image: var(--token-form-text-input-background-image-data-url-search-loading); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-textarea { + width: 100%; + max-width: 100%; + min-height: var(--token-form-text-area-min-height); + padding: var(--token-form-control-padding); + color: var(--token-form-control-base-foreground-value-color); + background-color: var(--token-form-control-base-surface-color-default); + border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); + border-radius: var(--token-form-control-border-radius); + box-shadow: var(--token-form-control-base-box-shadow-default); + resize: vertical; +} +.hds-form-textarea ::placeholder { + color: var(--token-form-control-base-foreground-placeholder-color); +} +.hds-form-textarea:hover, .hds-form-textarea.mock-hover { + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-textarea:focus, .hds-form-textarea.mock-focus { + border-color: var(--token-color-focus-action-internal); + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: var(--token-form-text-area-outline-offset); +} +.hds-form-textarea:read-only { + color: var(--token-form-control-readonly-foreground-color); + background-color: var(--token-form-control-readonly-surface-color); + border-color: var(--token-form-control-readonly-border-color); + box-shadow: none; +} +.hds-form-textarea:disabled { + color: var(--token-form-control-disabled-foreground-color); + background-color: var(--token-form-control-disabled-surface-color); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-textarea.hds-form-textarea--is-invalid { + border-color: var(--token-form-control-invalid-border-color-default); +} +.hds-form-textarea.hds-form-textarea--is-invalid:hover, .hds-form-textarea.hds-form-textarea--is-invalid.mock-hover { + border-color: var(--token-form-control-invalid-border-color-hover); +} +.hds-form-textarea.hds-form-textarea--is-invalid:focus, .hds-form-textarea.hds-form-textarea--is-invalid.mock-focus { + border-color: var(--token-color-focus-critical-internal); + outline-color: var(--token-form-control-invalid-outline-color); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-toggle { + position: relative; + display: inline-block; + isolation: isolate; +} + +.hds-form-toggle__control { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + display: block; + height: 100%; + margin: 0; + padding: 0; + color: transparent; + background-color: transparent; + border: none; + outline: none; + cursor: pointer; + opacity: 0; + appearance: none; +} +.hds-form-toggle__control:disabled { + cursor: not-allowed; +} + +.hds-form-toggle__facade { + position: relative; + display: block; + width: var(--token-form-toggle-width); + height: var(--token-form-toggle-height); + background-image: var(--token-form-toggle-background-image-data-url); + background-repeat: no-repeat; + background-position: var(--token-form-toggle-background-image-position-x) 50%; + background-size: var(--token-form-toggle-background-image-size) var(--token-form-toggle-background-image-size); + border: var(--token-form-toggle-border-width) solid var(--border-color); + border-radius: calc(var(--token-form-toggle-height) / 2); +} +@media (prefers-reduced-motion: no-preference) { + .hds-form-toggle__facade { + transition-timing-function: var(--token-form-toggle-transition-timing-function); + transition-duration: var(--token-form-toggle-transition-duration); + transition-property: all; + } +} +.hds-form-toggle__facade::after { + position: absolute; + top: calc(var(--token-form-toggle-border-width) * -1); + left: calc(var(--token-form-toggle-border-width) * -1); + width: var(--token-form-toggle-thumb-size); + height: var(--token-form-toggle-thumb-size); + background-color: var(--token-form-control-base-surface-color-default); + border: var(--token-form-toggle-border-width) solid var(--border-color); + border-radius: 50%; + transform: translate3d(0, 0, 0); + content: ""; +} +@media (prefers-reduced-motion: no-preference) { + .hds-form-toggle__facade::after { + transition-timing-function: var(--token-form-toggle-transition-timing-function); + transition-duration: var(--token-form-toggle-transition-duration); + transition-property: all; + } +} +.hds-form-toggle__facade::before { + --shift: calc(-1 * (var(--token-form-toggle-outline-width) + var(--token-form-toggle-outline-offset) + var(--token-form-toggle-border-width))); + position: absolute; + top: var(--shift); + right: var(--shift); + bottom: var(--shift); + left: var(--shift); + margin: auto; + border-width: var(--token-form-toggle-outline-width); + border-radius: calc(var(--token-form-toggle-height) / 2 + var(--token-form-toggle-outline-width) + var(--token-form-toggle-outline-offset)); + content: ""; +} +:not(:checked) + .hds-form-toggle__facade { + --border-color: var(--token-form-control-base-border-color-default); + background-color: var(--token-form-toggle-base-surface-color-default); +} +:checked + .hds-form-toggle__facade { + --border-color: var(--token-form-control-checked-border-color-default); + background-color: var(--token-form-control-checked-surface-color-default); +} +:checked + .hds-form-toggle__facade::after { + transform: translate3d(calc(var(--token-form-toggle-width) - var(--token-form-toggle-thumb-size)), 0, 0); +} +:hover:not(:checked) + .hds-form-toggle__facade, .mock-hover:not(:checked) + .hds-form-toggle__facade { + --border-color: var(--token-form-control-base-border-color-hover); +} +:hover:checked + .hds-form-toggle__facade, .mock-hover:checked + .hds-form-toggle__facade { + --border-color: var(--token-form-control-checked-border-color-hover); + background-color: var(--token-form-control-checked-border-color-default); +} +:focus + .hds-form-toggle__facade::before, .mock-focus + .hds-form-toggle__facade::before { + border-color: var(--token-form-control-focus-outline-color); + border-style: solid; +} +:disabled:not(:checked) + .hds-form-toggle__facade, :disabled:checked + .hds-form-toggle__facade { + --border-color: var(--token-form-control-disabled-border-color); + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-toggle-background-image-data-url-disabled); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-visibility-toggle { + width: var(--token-form-visibility-toggle-size); + height: var(--token-form-visibility-toggle-size); + padding: var(--token-form-visibility-toggle-padding); + color: var(--token-form-visibility-toggle-color); + background-color: var(--token-form-visibility-toggle-background-color); + border: var(--token-form-visibility-toggle-border-width) solid var(--token-form-visibility-toggle-border-color); + cursor: pointer; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-icon { + display: block; +} + +.hds-icon--is-inline { + display: inline-block; +} + +@keyframes hds-icon-animation-rotation { + to { + transform: rotate(360deg); + } +} +.hds-icon--animation-loading { + animation: hds-icon-animation-rotation 9s linear infinite; +} + +.hds-icon--animation-running { + animation: hds-icon-animation-rotation 9s linear infinite; +} + +@media (prefers-reduced-motion: no-preference) { + .hds-icon--animation-loading { + animation-duration: 0.7s; + } + .hds-icon--animation-running { + animation-duration: 1s; + } +} +.flight-sprite-container { + position: absolute; + width: 0; + height: 0; + visibility: hidden; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-icon-tile { + position: relative; + display: flex; + border: 1px solid transparent; + border-radius: 4px; +} + +.hds-icon-tile__icon, +.hds-icon-tile__logo { + display: flex; + margin: auto; +} + +.hds-icon-tile__extra { + position: absolute; + right: -6px; + bottom: -6px; + display: flex; + box-sizing: content-box; + background-color: var(--token-color-surface-primary); + border: 1px solid var(--token-color-border-primary); +} + +.hds-icon-tile__extra-icon { + display: flex; + margin: auto; + color: var(--token-color-foreground-strong); +} + +.hds-icon-tile--size-small { + width: 1.75rem; + height: 1.75rem; + border-radius: 5px; +} +.hds-icon-tile--size-small .hds-icon-tile__icon { + width: 1rem; + height: 1rem; +} +.hds-icon-tile--size-small .hds-icon-tile__logo { + width: 1.125rem; + height: 1.125rem; +} +.hds-icon-tile--size-small .hds-icon-tile__extra { + width: 1.125rem; + height: 1.125rem; + border-radius: 4px; +} +.hds-icon-tile--size-small .hds-icon-tile__extra-icon { + width: 0.75rem; + height: 0.75rem; +} + +.hds-icon-tile--size-medium { + width: 2.5rem; + height: 2.5rem; + border-radius: 6px; +} +.hds-icon-tile--size-medium .hds-icon-tile__icon { + width: 1.5rem; + height: 1.5rem; +} +.hds-icon-tile--size-medium .hds-icon-tile__logo { + width: 1.75rem; + height: 1.75rem; +} +.hds-icon-tile--size-medium .hds-icon-tile__extra { + width: 1.25rem; + height: 1.25rem; + border-radius: 5px; +} +.hds-icon-tile--size-medium .hds-icon-tile__extra-icon { + width: 0.75rem; + height: 0.75rem; +} + +.hds-icon-tile--size-large { + width: 3rem; + height: 3rem; + border-radius: 6px; +} +.hds-icon-tile--size-large .hds-icon-tile__icon { + width: 1.5rem; + height: 1.5rem; +} +.hds-icon-tile--size-large .hds-icon-tile__logo { + width: 2rem; + height: 2rem; +} +.hds-icon-tile--size-large .hds-icon-tile__extra { + width: 1.5rem; + height: 1.5rem; + border-radius: 5px; +} +.hds-icon-tile--size-large .hds-icon-tile__extra-icon { + width: 1rem; + height: 1rem; +} + +.hds-icon-tile--logo { + background-color: var(--token-color-surface-primary); + border-color: var(--token-color-border-primary); +} + +.hds-icon-tile--icon.hds-icon-tile--color-neutral { + color: var(--token-color-foreground-faint); + background-color: var(--token-color-surface-strong); +} +.hds-icon-tile--icon.hds-icon-tile--color-boundary { + color: var(--token-color-boundary-foreground); + background-color: var(--token-color-boundary-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-consul { + color: var(--token-color-consul-foreground); + background-color: var(--token-color-consul-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-hcp { + color: var(--token-color-palette-hcp-brand); + background-color: var(--token-color-surface-strong); +} +.hds-icon-tile--icon.hds-icon-tile--color-nomad { + color: var(--token-color-nomad-foreground); + background-color: var(--token-color-nomad-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-packer { + color: var(--token-color-packer-foreground); + background-color: var(--token-color-packer-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-terraform { + color: var(--token-color-terraform-foreground); + background-color: var(--token-color-terraform-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-vagrant { + color: var(--token-color-vagrant-foreground); + background-color: var(--token-color-vagrant-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-vault { + color: var(--token-color-vault-foreground); + background-color: var(--token-color-vault-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-vault-secrets { + color: var(--token-color-vault-secrets-foreground); + background-color: var(--token-color-vault-secrets-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-vault-radar { + color: var(--token-color-vault-radar-foreground); + background-color: var(--token-color-vault-radar-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-waypoint { + color: var(--token-color-waypoint-foreground); + background-color: var(--token-color-waypoint-surface); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-link-inline { + border-radius: 2px; +} +.hds-link-inline:focus, .hds-link-inline.mock-focus, .hds-link-inline:focus-visible { + text-decoration: none; + outline: 2px solid var(--token-color-focus-action-internal); + outline-offset: 1px; +} + +.hds-link-inline__icon { + display: inline-block; + width: 1em; + height: 1em; + vertical-align: text-bottom; +} +.hds-link-inline--icon-leading > .hds-link-inline__icon { + margin-right: 0.25em; +} +.hds-link-inline--icon-trailing > .hds-link-inline__icon { + margin-left: 0.25em; +} + +.hds-link-inline--color-primary { + color: var(--token-color-foreground-action); +} +.hds-link-inline--color-primary:hover, .hds-link-inline--color-primary.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-link-inline--color-primary:active, .hds-link-inline--color-primary.mock-active { + color: var(--token-color-foreground-action-active); +} + +.hds-link-inline--color-secondary { + color: var(--token-color-foreground-strong); +} +.hds-link-inline--color-secondary:hover, .hds-link-inline--color-secondary.mock-hover { + color: var(--token-color-foreground-primary); +} +.hds-link-inline--color-secondary:active, .hds-link-inline--color-secondary.mock-active { + color: var(--token-color-foreground-faint); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-link-standalone { + display: flex; + gap: 0.375rem; + align-items: center; + justify-content: center; + width: fit-content; + padding-top: 4px; + padding-bottom: 4px; + font-weight: var(--token-typography-font-weight-regular); + font-family: var(--token-typography-font-stack-text); + background-color: transparent; + border: 1px solid transparent; + text-decoration-color: transparent; +} + +.hds-link-standalone__icon { + display: block; +} + +.hds-link-standalone__text { + display: block; + flex: 1 0 0; + text-decoration: underline; + text-decoration-color: transparent; + transition: text-decoration-color 0.25s ease-in; +} + +.hds-link-standalone--size-small .hds-link-standalone__icon { + width: 0.75rem; + height: 0.75rem; +} +.hds-link-standalone--size-small .hds-link-standalone__text { + font-size: 0.8125rem; + line-height: 1.231; +} + +.hds-link-standalone--size-medium .hds-link-standalone__icon { + width: 1rem; + height: 1rem; +} +.hds-link-standalone--size-medium .hds-link-standalone__text { + font-size: 0.875rem; + line-height: 1.143; +} + +.hds-link-standalone--size-large .hds-link-standalone__icon { + width: 1.5rem; + height: 1.5rem; +} +.hds-link-standalone--size-large .hds-link-standalone__text { + font-size: 1rem; + line-height: 1.5; +} + +.hds-link-standalone--color-primary { + color: var(--token-color-foreground-action); +} +.hds-link-standalone--color-primary:hover, .hds-link-standalone--color-primary.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-link-standalone--color-primary:hover .hds-link-standalone__text, .hds-link-standalone--color-primary.mock-hover .hds-link-standalone__text { + text-decoration-color: #4e81e8; +} +.hds-link-standalone--color-primary:active, .hds-link-standalone--color-primary.mock-active { + color: var(--token-color-foreground-action-active); +} +.hds-link-standalone--color-primary:active .hds-link-standalone__text, .hds-link-standalone--color-primary.mock-active .hds-link-standalone__text { + text-decoration-color: #396ed6; +} +.hds-link-standalone--color-primary:active::before, .hds-link-standalone--color-primary.mock-active::before { + background-color: var(--token-color-surface-action); +} + +.hds-link-standalone--color-secondary { + color: var(--token-color-foreground-strong); +} +.hds-link-standalone--color-secondary:hover .hds-link-standalone__text, .hds-link-standalone--color-secondary.mock-hover .hds-link-standalone__text { + text-decoration-color: #4d4d4f; +} +.hds-link-standalone--color-secondary:active, .hds-link-standalone--color-secondary.mock-active { + color: var(--token-color-foreground-primary); +} +.hds-link-standalone--color-secondary:active .hds-link-standalone__text, .hds-link-standalone--color-secondary.mock-active .hds-link-standalone__text { + text-decoration-color: #6e7075; +} +.hds-link-standalone--color-secondary:active::before, .hds-link-standalone--color-secondary.mock-active::before { + background-color: var(--token-color-surface-interactive-active); +} + +.hds-link-standalone { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-link-standalone::before { + position: absolute; + top: 0; + right: -5px; + bottom: 0; + left: -5px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-link-standalone:focus::before, .hds-link-standalone.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-link-standalone:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-link-standalone:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-link-standalone:focus:active::before, .hds-link-standalone.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-link-standalone.hds-link-standalone--icon-position-leading::before { + right: -7px; +} +.hds-link-standalone.hds-link-standalone--icon-position-trailing::before { + left: -7px; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-menu-primitive { + position: relative; + width: fit-content; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-modal { + position: fixed; + z-index: 50; + height: fit-content; + max-height: 95vh; + inset: 0; + margin: auto; + border-radius: 8px; + box-shadow: var(--token-surface-overlay-box-shadow); +} +.hds-modal:not([open]) { + display: none; +} +.hds-modal::backdrop { + display: none; +} + +.hds-modal--size-small { + width: min(400px, 95vw); +} + +.hds-modal--size-medium { + width: min(600px, 95vw); +} + +.hds-modal--size-large { + width: min(800px, 95vw); +} + +.hds-modal--color-warning .hds-dialog-primitive__wrapper-header { + background: var(--token-color-surface-warning); + border-bottom: 1px solid var(--token-color-border-warning); +} +.hds-modal--color-warning .hds-dialog-primitive__header, +.hds-modal--color-warning .hds-dialog-primitive__tagline { + color: var(--token-color-foreground-warning-on-surface); +} + +.hds-modal--color-critical .hds-dialog-primitive__wrapper-header { + background: var(--token-color-surface-critical); + border-bottom: 1px solid var(--token-color-border-critical); +} +.hds-modal--color-critical .hds-dialog-primitive__header, +.hds-modal--color-critical .hds-dialog-primitive__tagline { + color: var(--token-color-foreground-critical-on-surface); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-page-header { + position: relative; + display: flex; + flex-direction: column; + gap: 16px; + container-type: inline-size; +} + +.hds-page-header__body { + display: flex; + flex-direction: column; + gap: 8px 16px; +} +.hds-page-header__body .hds-icon-tile { + flex-shrink: 0; +} +@container (min-width: 400px) { + .hds-page-header__body { + flex-direction: row; + } +} + +.hds-page-header__main { + display: flex; + flex-direction: column; + flex-grow: 1; + gap: 16px; + align-items: start; + justify-content: start; +} +@container (min-width: 768px) { + .hds-page-header__main { + flex-direction: row; + justify-content: space-between; + min-width: 0; + } +} + +.hds-page-header__content { + display: flex; + flex-direction: column; + flex-grow: 1; + min-width: 0; + max-width: 100%; +} + +.hds-page-header__title-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 8px 16px; + align-items: center; +} + +.hds-page-header__title { + max-width: 100%; + overflow-wrap: break-word; +} + +.hds-page-header__badges-wrapper { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.hds-page-header__metadata { + display: flex; + flex-direction: column; + gap: 4px; +} +.hds-page-header__metadata > *:first-child { + margin-top: 8px; +} + +.hds-page-header__subtitle, +.hds-page-header__description { + overflow-wrap: break-word; +} + +.hds-page-header__actions { + display: flex; + flex-direction: row; + flex-shrink: 0; + flex-wrap: wrap; + gap: 16px; + align-items: center; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-pagination { + display: grid; + grid-template-areas: "info nav selector"; + grid-template-rows: auto; + grid-template-columns: 1fr auto 1fr; + align-items: center; + margin: 0 auto; +} +@media screen and (max-width: 1000px) { + .hds-pagination { + display: flex; + flex-wrap: wrap; + justify-content: center; + } +} +.hds-pagination .hds-pagination-info { + grid-area: info; + justify-self: flex-start; + margin-right: var(--token-pagination-child-spacing-horizontal); +} +@media screen and (max-width: 1000px) { + .hds-pagination .hds-pagination-info { + margin-top: var(--token-pagination-child-spacing-vertical); + margin-left: var(--token-pagination-child-spacing-horizontal); + } +} +.hds-pagination .hds-pagination-nav { + grid-area: nav; +} +@media screen and (max-width: 1000px) { + .hds-pagination .hds-pagination-nav { + justify-content: center; + order: -1; + width: 100%; + } +} +.hds-pagination .hds-pagination-size-selector { + grid-area: selector; + justify-self: flex-end; + margin-left: var(--token-pagination-child-spacing-horizontal); +} +@media screen and (max-width: 1000px) { + .hds-pagination .hds-pagination-size-selector { + margin-top: var(--token-pagination-child-spacing-vertical); + margin-right: var(--token-pagination-child-spacing-horizontal); + } +} + +.hds-pagination-info { + white-space: nowrap; +} + +.hds-pagination-nav { + display: flex; +} + +.hds-pagination-nav__page-list { + display: flex; + margin: 0; + padding: 0; +} + +.hds-pagination-nav__page-item { + list-style-type: none; +} + +.hds-pagination-nav__control { + display: flex; + align-items: center; + height: var(--token-pagination-nav-control-height); + padding: 0 calc(var(--token-pagination-nav-control-padding-horizontal) - 1px); + color: var(--token-color-foreground-primary); + text-decoration: none; + background-color: transparent; + border: 1px solid transparent; + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-pagination-nav__control::before { + position: absolute; + top: var(--token-pagination-nav-control-focus-inset); + right: var(--token-pagination-nav-control-focus-inset); + bottom: var(--token-pagination-nav-control-focus-inset); + left: var(--token-pagination-nav-control-focus-inset); + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-pagination-nav__control:focus::before, .hds-pagination-nav__control.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-pagination-nav__control:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-pagination-nav__control:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-pagination-nav__control:focus:active::before, .hds-pagination-nav__control.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-pagination-nav__control:hover, .hds-pagination-nav__control.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-pagination-nav__control:active, .hds-pagination-nav__control.mock-active { + color: var(--token-color-foreground-action-active); +} + +.hds-pagination-nav__arrow { + gap: var(--token-pagination-nav-control-icon-spacing); +} +.hds-pagination-nav__arrow:disabled, .hds-pagination-nav__arrow.mock-disabled { + color: var(--token-color-foreground-disabled); + cursor: not-allowed; +} + +.hds-pagination-nav__arrow--direction-prev { + flex-direction: row; + justify-content: flex-start; +} + +.hds-pagination-nav__arrow--direction-next { + flex-direction: row-reverse; + justify-content: flex-end; +} + +.hds-pagination-nav__number--is-selected { + position: relative; + color: var(--token-color-foreground-action); +} +.hds-pagination-nav__number--is-selected:hover { + color: var(--token-color-foreground-action-hover); +} +.hds-pagination-nav__number--is-selected:active { + color: var(--token-color-foreground-action-active); +} +.hds-pagination-nav__number--is-selected::after { + position: absolute; + right: calc(var(--token-pagination-nav-indicator-spacing) - 1px); + bottom: -1px; + left: calc(var(--token-pagination-nav-indicator-spacing) - 1px); + height: var(--token-pagination-nav-indicator-height); + margin: 0 auto; + background-color: currentColor; + border-radius: 2px; + content: ""; +} + +.hds-pagination-nav__ellipsis { + display: flex; + align-items: center; + height: var(--token-pagination-nav-control-height); + padding: 0 var(--token-pagination-nav-control-padding-horizontal); + color: var(--token-color-foreground-faint); +} + +.hds-pagination-size-selector { + display: flex; + align-items: center; +} +.hds-pagination-size-selector > label { + white-space: nowrap; +} +.hds-pagination-size-selector > select { + height: 28px; + margin-left: 12px; + padding: 0 24px 0 8px; + font-size: var(--token-typography-body-100-font-size); + font-family: var(--token-typography-body-100-font-family); + line-height: var(--token-typography-body-100-line-height); + background-position: center right 5px; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-reveal { + width: fit-content; +} + +.hds-reveal__toggle-button { + min-height: 1.75rem; + padding: 0.313rem 0.313rem 0.313rem 0.188rem; +} +@media (prefers-reduced-motion: no-preference) { + .hds-reveal__toggle-button .hds-icon-chevron-down { + transition: transform 0.3s; + } +} + +.hds-reveal__toggle-button--is-open .hds-icon-chevron-down { + transform: rotate(-180deg); +} + +.hds-reveal__content { + margin-top: 4px; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-rich-tooltip { + display: contents; +} + +:where(.hds-rich-tooltip__toggle) { + width: fit-content; + height: fit-content; + margin: 0; + padding: 0; + color: inherit; + font: inherit; + text-align: inherit; + background-color: inherit; + border: none; + cursor: pointer; +} + +.hds-rich-tooltip__toggle { + --text-color: var(--token-color-foreground-strong); + --icon-color: var(--token-color-foreground-strong); + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-rich-tooltip__toggle:hover, .hds-rich-tooltip__toggle.mock-hover { + --text-color: var(--token-color-foreground-primary); + --icon-color: var(--token-color-foreground-primary); +} +.hds-rich-tooltip__toggle:active, .hds-rich-tooltip__toggle.mock-active { + --text-color: var(--token-color-foreground-faint); + --icon-color: var(--token-color-foreground-faint); +} +.hds-rich-tooltip__toggle::before { + position: absolute; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-rich-tooltip__toggle:focus::before, .hds-rich-tooltip__toggle.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-rich-tooltip__toggle:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-rich-tooltip__toggle:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-rich-tooltip__toggle:focus:active::before, .hds-rich-tooltip__toggle.mock-focus.mock-active::before { + box-shadow: none; +} + +.hds-rich-tooltip__toggle-text { + color: var(--text-color); + text-decoration: underline dotted; +} + +.hds-rich-tooltip__toggle-icon { + flex: none; + width: 1em; + height: 1em; + color: var(--icon-color); +} +.hds-rich-tooltip__toggle-icon:first-child:not(:only-child) { + margin-right: 0.25rem; +} +.hds-rich-tooltip__toggle-icon:last-child:not(:only-child) { + margin-left: 0.25rem; +} + +:where(.hds-rich-tooltip__toggle--is-inline) { + display: inline-flex; + align-items: center; + vertical-align: bottom; +} +:where(.hds-rich-tooltip__toggle--is-inline):has(.hds-rich-tooltip__toggle-icon:only-child) { + vertical-align: middle; +} + +:where(.hds-rich-tooltip__toggle--is-block) { + display: flex; + align-items: center; +} + +.hds-rich-tooltip__toggle--size-small { + font-weight: var(--token-typography-font-weight-regular); + font-size: var(--token-typography-body-100-font-size); + font-family: var(--token-typography-body-100-font-family); + line-height: var(--token-typography-body-100-line-height); +} + +.hds-rich-tooltip__toggle--size-medium { + font-weight: var(--token-typography-font-weight-regular); + font-size: var(--token-typography-body-200-font-size); + font-family: var(--token-typography-body-200-font-family); + line-height: var(--token-typography-body-200-line-height); +} + +.hds-rich-tooltip__toggle--size-large { + font-weight: var(--token-typography-font-weight-regular); + font-size: var(--token-typography-body-300-font-size); + font-family: var(--token-typography-body-300-font-family); + line-height: var(--token-typography-body-300-line-height); +} + +.hds-rich-tooltip__bubble { + position: relative; + width: fit-content; + max-width: var(--token-tooltip-max-width); + height: fit-content; + max-height: none; + padding: 16px; + background: var(--token-color-surface-primary); + border-radius: 5px; + box-shadow: var(--token-surface-higher-box-shadow); + opacity: 0; + transition: opacity 0.3s; + will-change: opacity; +} +:where(.hds-rich-tooltip__bubble[popover]) { + width: fit-content; + height: fit-content; + margin: 0; + padding: 0; + overflow: visible; + color: inherit; + background: none; + border: none; + inset: 0; +} + +.hds-rich-tooltip__bubble-arrow { + position: absolute; + z-index: 1; + display: block; + width: 20px; + height: 20px; + background: url('data:image/svg+xml,') no-repeat 0 0/20px 20px; + pointer-events: none; +} +.hds-rich-tooltip__bubble-arrow[data-hds-anchored-arrow-placement^=top] { + bottom: -20px; + transform: rotate(180deg); +} +.hds-rich-tooltip__bubble-arrow[data-hds-anchored-arrow-placement^=right] { + left: -20px; + transform: rotate(-90deg); +} +.hds-rich-tooltip__bubble-arrow[data-hds-anchored-arrow-placement^=bottom] { + top: -20px; + transform: rotate(0deg); +} +.hds-rich-tooltip__bubble-arrow[data-hds-anchored-arrow-placement^=left] { + right: -20px; + transform: rotate(90deg); +} + +.hds-rich-tooltip__bubble-inner-content { + all: initial; + display: contents; + box-sizing: border-box; +} +.hds-rich-tooltip__bubble-inner-content *, +.hds-rich-tooltip__bubble-inner-content *::before, +.hds-rich-tooltip__bubble-inner-content *::after { + box-sizing: inherit; +} + +/* clean-css ignore:start */ +.hds-rich-tooltip__bubble[popover]:popover-open { + opacity: 1; +} +@starting-style { + .hds-rich-tooltip__bubble[popover]:popover-open { + opacity: 0; + } +} +@starting-style { + .hds-rich-tooltip__bubble[popover].\:popover-open { + opacity: 0; + } +} + +/* clean-css ignore:end */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-segmented-group { + display: inline-flex; +} +.hds-segmented-group > .hds-button:first-child:not(:only-child), +.hds-segmented-group > .hds-dropdown:first-child:not(:only-child), +.hds-segmented-group > .hds-form-select:first-child:not(:only-child), +.hds-segmented-group > .hds-form-text-input:first-child:not(:only-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.hds-segmented-group > .hds-button:first-child:not(:only-child)::before, +.hds-segmented-group > .hds-button:first-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-button:first-child:not(:only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-dropdown:first-child:not(:only-child)::before, +.hds-segmented-group > .hds-dropdown:first-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-dropdown:first-child:not(:only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-form-select:first-child:not(:only-child)::before, +.hds-segmented-group > .hds-form-select:first-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-form-select:first-child:not(:only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-form-text-input:first-child:not(:only-child)::before, +.hds-segmented-group > .hds-form-text-input:first-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-form-text-input:first-child:not(:only-child) .hds-dropdown-toggle-button::before { + border-top-right-radius: inherit; + border-bottom-right-radius: inherit; +} +.hds-segmented-group > .hds-button:last-child:not(:only-child), +.hds-segmented-group > .hds-dropdown:last-child:not(:only-child), +.hds-segmented-group > .hds-form-select:last-child:not(:only-child), +.hds-segmented-group > .hds-form-text-input:last-child:not(:only-child) { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.hds-segmented-group > .hds-button:last-child:not(:only-child)::before, +.hds-segmented-group > .hds-button:last-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-button:last-child:not(:only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-dropdown:last-child:not(:only-child)::before, +.hds-segmented-group > .hds-dropdown:last-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-dropdown:last-child:not(:only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-form-select:last-child:not(:only-child)::before, +.hds-segmented-group > .hds-form-select:last-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-form-select:last-child:not(:only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-form-text-input:last-child:not(:only-child)::before, +.hds-segmented-group > .hds-form-text-input:last-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-form-text-input:last-child:not(:only-child) .hds-dropdown-toggle-button::before { + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; +} +.hds-segmented-group > .hds-button:not(:first-child, :last-child, :only-child), +.hds-segmented-group > .hds-dropdown:not(:first-child, :last-child, :only-child), +.hds-segmented-group > .hds-form-select:not(:first-child, :last-child, :only-child), +.hds-segmented-group > .hds-form-text-input:not(:first-child, :last-child, :only-child) { + margin-left: -1px; + border-radius: 0; +} +.hds-segmented-group > .hds-button:not(:first-child, :last-child, :only-child)::before, +.hds-segmented-group > .hds-button:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-button:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-dropdown:not(:first-child, :last-child, :only-child)::before, +.hds-segmented-group > .hds-dropdown:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-dropdown:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-form-select:not(:first-child, :last-child, :only-child)::before, +.hds-segmented-group > .hds-form-select:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-form-select:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-form-text-input:not(:first-child, :last-child, :only-child)::before, +.hds-segmented-group > .hds-form-text-input:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-form-text-input:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button::before { + border-radius: inherit; +} +.hds-segmented-group > .hds-button:focus, .hds-segmented-group > .hds-button.mock-focus, +.hds-segmented-group > .hds-button .hds-dropdown-toggle-button:focus, +.hds-segmented-group > .hds-dropdown:focus, +.hds-segmented-group > .hds-dropdown.mock-focus, +.hds-segmented-group > .hds-dropdown .hds-dropdown-toggle-button:focus, +.hds-segmented-group > .hds-form-select:focus, +.hds-segmented-group > .hds-form-select.mock-focus, +.hds-segmented-group > .hds-form-select .hds-dropdown-toggle-button:focus, +.hds-segmented-group > .hds-form-text-input:focus, +.hds-segmented-group > .hds-form-text-input.mock-focus, +.hds-segmented-group > .hds-form-text-input .hds-dropdown-toggle-button:focus { + z-index: 1; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-separator { + border: none; + border-top: 1px solid var(--token-color-border-primary); +} + +.hds-separator--spacing-24 { + margin: 24px 0; +} + +.hds-separator--spacing-0 { + margin: 0; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +:root { + --hds-app-desktop-breakpoint: 1088px; + --hds-app-sidenav-width-minimized: 48px; + --hds-app-sidenav-width-expanded: 280px; + --hds-app-sidenav-width-fixed: var(--hds-app-sidenav-width-expanded); + --hds-app-sidenav-animation-duration: 200ms; + --hds-app-sidenav-animation-delay: var(--hds-app-sidenav-animation-duration); + --hds-app-sidenav-animation-easing: cubic-bezier(0.65, 0, 0.35, 1); + --hds-app-sidenav-toggle-button-width: 24px; +} + +@media (prefers-reduced-motion) { + :root { + --hds-app-sidenav-animation-duration: 0; + } +} +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-side-nav { + position: relative; + width: var(--hds-app-sidenav-width-fixed); + height: 100%; + min-height: 100%; + isolation: isolate; +} +.hds-side-nav.hds-side-nav--is-headerless { + --hds-app-sidenav-width-minimized: 16px; +} +.hds-side-nav.hds-side-nav--is-responsive { + transition: width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing); +} +.hds-side-nav.hds-side-nav--is-mobile { + width: var(--hds-app-sidenav-width-minimized); +} +.hds-side-nav.hds-side-nav--is-desktop.hds-side-nav--is-not-minimized { + width: var(--hds-app-sidenav-width-expanded); +} +.hds-side-nav.hds-side-nav--is-desktop.hds-side-nav--is-minimized { + width: var(--hds-app-sidenav-width-minimized); +} + +.hds-side-nav__overlay { + position: fixed; + z-index: -1; + inset: 0; + background-color: var(--token-color-palette-neutral-700); + opacity: 0.2; + transition: opacity var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing) var(--hds-app-sidenav-animation-delay); +} +.hds-side-nav--is-minimized .hds-side-nav__overlay { + opacity: 0; + pointer-events: none; +} +.hds-side-nav--is-desktop .hds-side-nav__overlay { + display: none; +} + +.hds-side-nav__wrapper { + display: flex; + flex-direction: column; + height: 100%; + color: var(--token-side-nav-color-foreground-primary); + background: var(--token-side-nav-color-surface-primary); + border-right: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color); +} +.hds-side-nav--is-responsive .hds-side-nav__wrapper { + transition: width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing); +} +.hds-side-nav--is-minimized .hds-side-nav__wrapper { + width: var(--hds-app-sidenav-width-minimized); +} +.hds-side-nav--is-not-minimized .hds-side-nav__wrapper { + width: var(--hds-app-sidenav-width-expanded); +} + +.hds-side-nav__wrapper-header { + padding-top: var(--token-side-nav-wrapper-padding-vertical); + padding-right: var(--token-side-nav-wrapper-padding-horizontal); + padding-bottom: 8px; + padding-left: var(--token-side-nav-wrapper-padding-horizontal); + transition: padding var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing); +} +.hds-side-nav--is-minimized .hds-side-nav__wrapper-header { + padding-top: var(--token-side-nav-wrapper-padding-vertical-minimized); + padding-right: var(--token-side-nav-wrapper-padding-horizontal-minimized); + padding-left: var(--token-side-nav-wrapper-padding-horizontal-minimized); +} +.hds-side-nav__wrapper-header:empty { + padding: 0; +} + +.hds-side-nav__wrapper-body { + flex: 1; + padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal); + overflow-x: hidden; + overflow-y: auto; +} + +.hds-side-nav__wrapper-footer { + padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal); +} +.hds-side-nav__wrapper-footer:empty { + min-height: var(--token-side-nav-wrapper-padding-horizontal); + padding: 0; +} + +.hds-side-nav--is-minimized .hds-side-nav-hide-when-minimized { + visibility: hidden !important; + opacity: 0; + pointer-events: none; +} +.hds-side-nav--is-not-minimized .hds-side-nav-hide-when-minimized { + visibility: visible; + opacity: 1; + transition: opacity var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing) var(--hds-app-sidenav-animation-delay); +} +.hds-side-nav--is-animating .hds-side-nav-hide-when-minimized { + pointer-events: none; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-side-nav-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.hds-side-nav-header__logo-container { + display: flex; + flex: none; + align-items: center; + justify-content: center; + width: var(--token-side-nav-header-home-link-logo-size); + height: var(--token-side-nav-header-home-link-logo-size); + transition: width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing), height var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing); +} +.hds-side-nav--is-minimized .hds-side-nav-header__logo-container { + width: var(--token-side-nav-header-home-link-logo-size-minimized); + height: var(--token-side-nav-header-home-link-logo-size-minimized); +} + +.hds-side-nav__home-link { + border: 1px solid transparent; + cursor: pointer; + color: var(--token-side-nav-color-foreground-strong); + background-color: transparent; + border-radius: var(--token-side-nav-body-list-item-border-radius); + display: block; + width: 100%; + height: 100%; + padding: calc(var(--token-side-nav-header-home-link-padding) - 1px); +} +.hds-side-nav__home-link:hover, .hds-side-nav__home-link.mock-hover { + color: var(--token-side-nav-color-foreground-strong); + background-color: var(--token-side-nav-color-surface-interactive-hover); +} +.hds-side-nav__home-link:focus, .hds-side-nav__home-link.mock-focus { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-700); +} +.hds-side-nav__home-link:focus::before, .hds-side-nav__home-link.mock-focus::before { + position: absolute; + top: -1px; + right: -1px; + bottom: -1px; + left: -1px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-side-nav__home-link:focus:focus::before, .hds-side-nav__home-link:focus.mock-focus::before, .hds-side-nav__home-link.mock-focus:focus::before, .hds-side-nav__home-link.mock-focus.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__home-link:focus:focus:not(:focus-visible)::before, .hds-side-nav__home-link.mock-focus:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-side-nav__home-link:focus:focus-visible::before, .hds-side-nav__home-link.mock-focus:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__home-link:focus:focus:active::before, .hds-side-nav__home-link:focus.mock-focus.mock-active::before, .hds-side-nav__home-link.mock-focus:focus:active::before, .hds-side-nav__home-link.mock-focus.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-side-nav__home-link:focus::before, .hds-side-nav__home-link.mock-focus::before { + color: var(--token-color-foreground-high-contrast); + border: none; + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__home-link:focus:focus:not(:focus-visible)::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__home-link:active, .hds-side-nav__home-link.mock-active { + color: var(--token-side-nav-color-foreground-strong); + background-color: var(--token-side-nav-color-surface-interactive-active); +} +.hds-side-nav__home-link:disabled, .hds-side-nav__home-link[disabled], .hds-side-nav__home-link.mock-disabled, .hds-side-nav__home-link:disabled:focus, .hds-side-nav__home-link[disabled]:focus, .hds-side-nav__home-link.mock-disabled:focus, .hds-side-nav__home-link:disabled:hover, .hds-side-nav__home-link[disabled]:hover, .hds-side-nav__home-link.mock-disabled:hover { + color: var(--token-color-foreground-disabled); + background-color: var(--token-color-palette-neutral-600); + border-color: var(--token-color-palette-neutral-500); +} + +.hds-side-nav-header__actions-container { + display: flex; + gap: var(--token-side-nav-header-actions-spacing); +} + +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) { + border: 1px solid transparent; + cursor: pointer; + border-color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-700); + border-radius: 5px; +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover { + border-color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-600); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-700); + border-color: var(--token-color-focus-action-internal); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before { + position: absolute; + top: -1px; + right: -1px; + bottom: -1px; + left: -1px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before { + color: var(--token-color-foreground-high-contrast); + border: none; + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active { + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-500); + border-color: var(--token-color-palette-neutral-400); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover { + color: var(--token-color-foreground-disabled); + background-color: var(--token-color-palette-neutral-600); + border-color: var(--token-color-palette-neutral-500); +} + +.hds-side-nav__icon-button { + border: 1px solid transparent; + cursor: pointer; + border-color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-700); + border-radius: 5px; + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + padding: 5px; +} +.hds-side-nav__icon-button:hover, .hds-side-nav__icon-button.mock-hover { + border-color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-600); +} +.hds-side-nav__icon-button:focus, .hds-side-nav__icon-button.mock-focus { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-700); + border-color: var(--token-color-focus-action-internal); +} +.hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before { + position: absolute; + top: -1px; + right: -1px; + bottom: -1px; + left: -1px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-side-nav__icon-button:focus:focus::before, .hds-side-nav__icon-button:focus.mock-focus::before, .hds-side-nav__icon-button.mock-focus:focus::before, .hds-side-nav__icon-button.mock-focus.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before, .hds-side-nav__icon-button.mock-focus:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-side-nav__icon-button:focus:focus-visible::before, .hds-side-nav__icon-button.mock-focus:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__icon-button:focus:focus:active::before, .hds-side-nav__icon-button:focus.mock-focus.mock-active::before, .hds-side-nav__icon-button.mock-focus:focus:active::before, .hds-side-nav__icon-button.mock-focus.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before { + color: var(--token-color-foreground-high-contrast); + border: none; + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__icon-button:active, .hds-side-nav__icon-button.mock-active { + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-500); + border-color: var(--token-color-palette-neutral-400); +} +.hds-side-nav__icon-button:disabled, .hds-side-nav__icon-button[disabled], .hds-side-nav__icon-button.mock-disabled, .hds-side-nav__icon-button:disabled:focus, .hds-side-nav__icon-button[disabled]:focus, .hds-side-nav__icon-button.mock-disabled:focus, .hds-side-nav__icon-button:disabled:hover, .hds-side-nav__icon-button[disabled]:hover, .hds-side-nav__icon-button.mock-disabled:hover { + color: var(--token-color-foreground-disabled); + background-color: var(--token-color-palette-neutral-600); + border-color: var(--token-color-palette-neutral-500); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-side-nav__content { + margin: 0 calc(var(--token-side-nav-wrapper-padding-horizontal) * -1); +} +.hds-side-nav--is-minimized .hds-side-nav__content { + height: 0; + overflow: hidden; +} + +.hds-side-nav__content-panels { + display: grid; + grid-template-columns: repeat(5, var(--hds-app-sidenav-width-expanded)); + width: 100%; +} + +.hds-side-nav__content-panel { + padding: 0 var(--token-side-nav-wrapper-padding-horizontal); + overflow: hidden; +} +.hds-side-nav__content-panel[aria-hidden=true] { + max-height: 0; +} + +.hds-side-nav__list-title { + min-height: var(--token-side-nav-body-list-item-height); + margin-top: var(--token-side-nav-body-list-margin-vertical); + padding: 9px var(--token-side-nav-body-list-item-padding-horizontal); + color: var(--token-side-nav-color-foreground-faint); + overflow-wrap: break-word; +} +.hds-side-nav__list-wrapper:first-child .hds-side-nav__list-item:first-child > .hds-side-nav__list-title { + margin-top: 0; +} + +.hds-side-nav__list-wrapper, +.hds-side-nav__list { + margin: 0; + padding: 0; +} + +.hds-side-nav__list-item { + list-style-type: none; +} +.hds-side-nav__list-item + .hds-side-nav__list-item { + margin-top: var(--token-side-nav-body-list-item-spacing-vertical); +} + +.hds-side-nav__list-item-link { + display: flex; + gap: var(--token-side-nav-body-list-item-content-spacing-horizontal); + align-items: center; + width: 100%; + min-height: var(--token-side-nav-body-list-item-height); + padding: var(--token-side-nav-body-list-item-padding-vertical) var(--token-side-nav-body-list-item-padding-horizontal); + color: var(--token-side-nav-color-foreground-primary); + text-decoration: none; + background: var(--token-side-nav-color-surface-primary); + border-color: transparent; + border-radius: var(--token-side-nav-body-list-item-border-radius); +} +.hds-side-nav__list-item-link:focus, .hds-side-nav__list-item-link.mock-focus { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-side-nav__list-item-link:focus::before, .hds-side-nav__list-item-link.mock-focus::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-side-nav__list-item-link:focus:focus::before, .hds-side-nav__list-item-link:focus.mock-focus::before, .hds-side-nav__list-item-link.mock-focus:focus::before, .hds-side-nav__list-item-link.mock-focus.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__list-item-link:focus:focus:not(:focus-visible)::before, .hds-side-nav__list-item-link.mock-focus:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-side-nav__list-item-link:focus:focus-visible::before, .hds-side-nav__list-item-link.mock-focus:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__list-item-link:focus:focus:active::before, .hds-side-nav__list-item-link:focus.mock-focus.mock-active::before, .hds-side-nav__list-item-link.mock-focus:focus:active::before, .hds-side-nav__list-item-link.mock-focus.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-side-nav__list-item-link:hover, .hds-side-nav__list-item-link.mock-hover { + background: var(--token-side-nav-color-surface-interactive-hover); + border-color: transparent; +} +.hds-side-nav__list-item-link:hover .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link:hover .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link:hover .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link.mock-hover .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link.mock-hover .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link.mock-hover .hds-side-nav__list-item-icon-trailing { + color: var(--token-side-nav-color-foreground-strong); +} +.hds-side-nav__list-item-link:hover:focus, .hds-side-nav__list-item-link.active, .hds-side-nav__list-item-link:active, .hds-side-nav__list-item-link.mock-active { + background: var(--token-side-nav-color-surface-interactive-active); +} +.hds-side-nav__list-item-link:hover:focus .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link:hover:focus .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link:hover:focus .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link.active .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link.active .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link.active .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link:active .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link:active .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link:active .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link.mock-active .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link.mock-active .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link.mock-active .hds-side-nav__list-item-icon-trailing { + color: var(--token-side-nav-color-foreground-strong); +} +.hds-side-nav__list-item-link:hover:focus .hds-badge, +.hds-side-nav__list-item-link:hover:focus .hds-badge-count, .hds-side-nav__list-item-link.active .hds-badge, +.hds-side-nav__list-item-link.active .hds-badge-count, .hds-side-nav__list-item-link:active .hds-badge, +.hds-side-nav__list-item-link:active .hds-badge-count, .hds-side-nav__list-item-link.mock-active .hds-badge, +.hds-side-nav__list-item-link.mock-active .hds-badge-count { + color: var(--token-color-foreground-primary); + background: var(--token-color-surface-strong); +} + +.hds-side-nav__list-item-link--back-link:active, .hds-side-nav__list-item-link--back-link.mock-active { + background: var(--token-side-nav-color-surface-primary); +} +.hds-side-nav__list-item-link--back-link:active .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link--back-link:active .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link--back-link:active .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link--back-link.mock-active .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link--back-link.mock-active .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link--back-link.mock-active .hds-side-nav__list-item-icon-trailing { + color: var(--token-side-nav-color-foreground-primary); +} + +.hds-side-nav__list-item-text { + min-width: 0; + max-width: 100%; + color: var(--token-side-nav-color-foreground-primary); + text-align: left; + overflow-wrap: break-word; +} + +.hds-side-nav__list-item-icon-leading { + flex: none; +} + +.hds-side-nav__list-item-icon-trailing { + flex: none; + margin-left: auto; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-side-nav__toggle-button { + position: absolute; + top: 22px; + left: calc(var(--token-side-nav-wrapper-border-width) * -1); + z-index: 1; + display: flex; + flex-direction: row-reverse; + align-items: center; + width: var(--hds-app-sidenav-toggle-button-width); + height: 36px; + padding: 0 4px; + color: var(--token-color-foreground-high-contrast); + background: none; + background-color: var(--token-side-nav-color-surface-primary); + border: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color); + border-left-color: transparent; + border-top-right-radius: var(--token-side-nav-toggle-button-border-radius); + border-bottom-right-radius: var(--token-side-nav-toggle-button-border-radius); + transform: translateX(var(--hds-app-sidenav-width-expanded)); + cursor: pointer; + transition: transform var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing), width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing); +} +.hds-side-nav__toggle-button::before { + position: absolute; + top: calc(var(--token-side-nav-toggle-button-border-radius) * -2); + left: calc(var(--token-side-nav-wrapper-border-width) * -1); + box-sizing: border-box; + width: calc(var(--token-side-nav-toggle-button-border-radius) * 2); + height: calc(var(--token-side-nav-toggle-button-border-radius) * 2); + border-bottom: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color); + border-left: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color); + border-bottom-left-radius: var(--token-side-nav-toggle-button-border-radius); + box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-primary); + content: ""; +} +.hds-side-nav__toggle-button::after { + position: absolute; + bottom: calc(var(--token-side-nav-toggle-button-border-radius) * -2); + left: calc(var(--token-side-nav-wrapper-border-width) * -1); + box-sizing: border-box; + width: calc(var(--token-side-nav-toggle-button-border-radius) * 2); + height: calc(var(--token-side-nav-toggle-button-border-radius) * 2); + border-top: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color); + border-left: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color); + border-top-left-radius: var(--token-side-nav-toggle-button-border-radius); + box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-primary); + content: ""; +} +.hds-side-nav__toggle-button:hover, .hds-side-nav__toggle-button.mock-hover { + width: 30px; + background-color: var(--token-side-nav-color-surface-interactive-hover); +} +.hds-side-nav__toggle-button:hover::before, .hds-side-nav__toggle-button.mock-hover::before { + box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-interactive-hover); +} +.hds-side-nav__toggle-button:hover::after, .hds-side-nav__toggle-button.mock-hover::after { + box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-interactive-hover); +} +.hds-side-nav__toggle-button:active, .hds-side-nav__toggle-button.mock-active { + background-color: var(--token-side-nav-color-surface-interactive-active); +} +.hds-side-nav__toggle-button:active::before, .hds-side-nav__toggle-button.mock-active::before { + box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-interactive-active); +} +.hds-side-nav__toggle-button:active::after, .hds-side-nav__toggle-button.mock-active::after { + box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-interactive-active); +} +.hds-side-nav__toggle-button:focus-visible, .hds-side-nav__toggle-button.mock-focus { + border-color: var(--token-color-focus-action-internal); + outline: 3px solid var(--token-color-focus-action-external); +} +.hds-side-nav__toggle-button:focus-visible::before, .hds-side-nav__toggle-button:focus-visible::after, .hds-side-nav__toggle-button.mock-focus::before, .hds-side-nav__toggle-button.mock-focus::after { + display: none; +} +.hds-side-nav--is-minimized .hds-side-nav__toggle-button { + transform: translateX(var(--hds-app-sidenav-width-minimized)); +} +.hds-side-nav:has(.hds-side-nav__wrapper-header:empty) .hds-side-nav__toggle-button { + top: var(--token-side-nav-wrapper-padding-vertical); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-side-nav .ember-a11y-refocus-skip-link { + top: 10px; + left: 10px; + z-index: 20; + width: max-content; + padding: 2px 10px 4px; + color: var(--token-color-foreground-action); + font-size: var(--token-typography-display-200-font-size); + font-family: var(--token-typography-display-200-font-family); + line-height: var(--token-typography-display-200-line-height); + background-color: var(--token-color-surface-faint); + border-radius: 3px; + transform: translateY(-200%); + transition: 0.6s ease-in-out; +} +.hds-side-nav .ember-a11y-refocus-skip-link:focus { + transform: translateY(0); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-stepper-indicator-step { + position: relative; + width: 24px; + height: 24px; +} + +.hds-stepper-indicator-step__svg-hexagon { + width: 100%; + height: 100%; + filter: drop-shadow(0 1px 1px rgba(101, 106, 118, 0.05)); +} + +.hds-stepper-indicator-step__status { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.hds-stepper-indicator-step__icon { + width: 12px; + height: 12px; +} + +.hds-stepper-indicator-step__text { + width: 20px; + overflow: hidden; + white-space: nowrap; + text-align: center; + user-select: none; +} + +.hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-strong); +} +.hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-surface-faint); + stroke: var(--token-color-foreground-strong); +} + +.hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-high-contrast); +} +.hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-foreground-strong); + stroke: var(--token-color-foreground-strong); +} + +.hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-high-contrast); +} +.hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-foreground-strong); + stroke: var(--token-color-foreground-strong); +} + +.hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-high-contrast); +} +.hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-foreground-strong); + stroke: var(--token-color-foreground-strong); +} + +.hds-stepper-indicator-step--is-interactive { + cursor: pointer; +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-primary); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-surface-interactive); + stroke: var(--token-color-border-strong); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete:hover .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete.mock-hover .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-surface-interactive-hover); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete:active .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete.mock-active .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-surface-interactive-active); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-high-contrast); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-200); + stroke: var(--token-color-palette-blue-300); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress:hover .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress.mock-hover .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-300); + stroke: var(--token-color-palette-blue-400); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress:active .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress.mock-active .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-400); + stroke: var(--token-color-palette-blue-400); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-high-contrast); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-200); + stroke: var(--token-color-palette-blue-300); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing:hover .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing.mock-hover .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-300); + stroke: var(--token-color-palette-blue-400); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing:active .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing.mock-active .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-400); + stroke: var(--token-color-palette-blue-400); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status { + color: var(--token-color-palette-blue-200); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-surface-action); + stroke: var(--token-color-palette-blue-300); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete:hover .hds-stepper-indicator-step__status, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete.mock-hover .hds-stepper-indicator-step__status { + color: var(--token-color-palette-blue-300); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete:hover .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete.mock-hover .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-100); + stroke: var(--token-color-palette-blue-400); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete:active .hds-stepper-indicator-step__status, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete.mock-active .hds-stepper-indicator-step__status { + color: var(--token-color-palette-blue-400); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete:active .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete.mock-active .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-100); + stroke: var(--token-color-palette-blue-400); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-stepper-indicator-task { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + color: var(--token-color-foreground-strong); +} + +.hds-stepper-indicator-task__icon { + width: 12px; + height: 12px; +} + +.hds-stepper-indicator-task--is-interactive { + cursor: pointer; +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete { + color: var(--token-color-palette-neutral-300); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete:hover, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete:active, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete.mock-active { + color: var(--token-color-foreground-action-active); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress { + color: var(--token-color-foreground-action); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress:hover, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress:active, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress.mock-active { + color: var(--token-color-foreground-action-active); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing { + color: var(--token-color-foreground-action); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing:hover, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing:active, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing.mock-active { + color: var(--token-color-foreground-action-active); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete { + color: var(--token-color-foreground-success); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete:hover, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete.mock-hover { + color: var(--token-color-palette-green-300); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete:active, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete.mock-active { + color: var(--token-color-palette-green-400); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-table { + width: 100%; + border: 1px solid var(--token-color-border-primary); + border-radius: 6px; + border-spacing: 0; +} + +.hds-table--layout-fixed { + table-layout: fixed; +} + +.hds-table__thead .hds-table__tr { + color: var(--token-color-foreground-strong); + background-color: var(--token-color-surface-strong); +} +.hds-table__thead .hds-table__tr .hds-table__th { + position: relative; + padding: 14px 16px 13px 16px; + text-align: left; + border-top: none; + border-right: none; + border-bottom: 1px solid var(--token-color-border-primary); + border-left: none; +} +.hds-table__thead .hds-table__tr .hds-table__th + .hds-table__th::before { + position: absolute; + top: 6px; + bottom: 6px; + left: -1px; + width: 1px; + background-color: var(--token-color-border-primary); + content: ""; + pointer-events: none; +} +.hds-table__thead .hds-table__tr .hds-table__th--align-center, +.hds-table__thead .hds-table__tr .hds-table__td--align-center { + text-align: center; +} +.hds-table__thead .hds-table__tr .hds-table__th--align-center .hds-table__th-content, +.hds-table__thead .hds-table__tr .hds-table__td--align-center .hds-table__th-content { + justify-content: center; +} +.hds-table__thead .hds-table__tr .hds-table__th--align-right, +.hds-table__thead .hds-table__tr .hds-table__td--align-right { + text-align: right; +} +.hds-table__thead .hds-table__tr .hds-table__th--align-right .hds-table__th-content, +.hds-table__thead .hds-table__tr .hds-table__td--align-right .hds-table__th-content { + justify-content: flex-end; +} +.hds-table__thead .hds-table__tr:first-of-type .hds-table__th:first-child { + border-top-left-radius: 5px; +} +.hds-table__thead .hds-table__tr:first-of-type .hds-table__th:last-child { + border-top-right-radius: 5px; +} + +.hds-table__th--is-selectable { + width: 48px; +} + +.hds-table__th-content { + display: flex; + gap: 8px; + align-items: center; + justify-content: flex-start; +} + +.hds-table__th-button { + display: flex; + flex: none; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + margin: -2px 0; + padding: 0; + color: var(--token-color-foreground-faint); + background-color: transparent; + border: 1px solid transparent; + border-radius: 3px; + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-table__th-button:hover, .hds-table__th-button.mock-hover { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-interactive); + border-color: var(--token-color-border-strong); + box-shadow: var(--token-elevation-low-box-shadow); + cursor: pointer; +} +.hds-table__th-button::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + border-radius: inherit; + content: ""; +} +.hds-table__th-button:focus::before, .hds-table__th-button.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-table__th-button:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-table__th-button:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-table__th-button:focus:active::before, .hds-table__th-button.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-table__th-button:active, .hds-table__th-button.mock-active { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-border-strong); + box-shadow: none; +} + +.hds-table__th-button--is-sorted { + color: var(--token-color-foreground-action); +} +.hds-table__th-button--is-sorted:hover, .hds-table__th-button--is-sorted.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-table__th-button--is-sorted:active, .hds-table__th-button--is-sorted.mock-active { + color: var(--token-color-foreground-action-active); +} + +.hds-table__th-button-aria-label-hidden-segment { + display: none; +} + +.hds-table__tbody .hds-table__tr { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-primary); +} +.hds-table--striped .hds-table__tbody .hds-table__tr:nth-child(even) { + background-color: var(--token-color-surface-faint); +} +.hds-table__tbody .hds-table__tr:last-of-type .hds-table__th, +.hds-table__tbody .hds-table__tr:last-of-type .hds-table__td { + border-bottom: none; +} +.hds-table__tbody .hds-table__tr:last-of-type .hds-table__th:first-child, +.hds-table__tbody .hds-table__tr:last-of-type .hds-table__td:first-child { + border-bottom-left-radius: 5px; +} +.hds-table__tbody .hds-table__tr:last-of-type .hds-table__td:last-child { + border-bottom-right-radius: 5px; +} +.hds-table__tbody .hds-table__th, +.hds-table__tbody .hds-table__td { + text-align: left; + border-top: none; + border-right: none; + border-bottom: 1px solid var(--token-color-border-primary); + border-left: none; +} +.hds-table--density-short .hds-table__tbody .hds-table__th, +.hds-table--density-short .hds-table__tbody .hds-table__td { + padding: 6px 16px 5px 16px; +} +.hds-table--density-medium .hds-table__tbody .hds-table__th, +.hds-table--density-medium .hds-table__tbody .hds-table__td { + padding: 14px 16px 13px 16px; +} +.hds-table--density-tall .hds-table__tbody .hds-table__th, +.hds-table--density-tall .hds-table__tbody .hds-table__td { + padding: 22px 16px 21px 16px; +} +.hds-table__tbody .hds-table__th--align-center, +.hds-table__tbody .hds-table__td--align-center { + text-align: center; +} +.hds-table__tbody .hds-table__th--align-center .hds-table__th-content, +.hds-table__tbody .hds-table__td--align-center .hds-table__th-content { + justify-content: center; +} +.hds-table__tbody .hds-table__th--align-right, +.hds-table__tbody .hds-table__td--align-right { + text-align: right; +} +.hds-table__tbody .hds-table__th--align-right .hds-table__th-content, +.hds-table__tbody .hds-table__td--align-right .hds-table__th-content { + justify-content: flex-end; +} +.hds-table--valign-top .hds-table__tbody .hds-table__th, +.hds-table--valign-top .hds-table__tbody .hds-table__td { + vertical-align: top; +} +.hds-table--valign-middle .hds-table__tbody .hds-table__th, +.hds-table--valign-middle .hds-table__tbody .hds-table__td { + vertical-align: middle; +} +.hds-table--valign-baseline .hds-table__tbody .hds-table__th, +.hds-table--valign-baseline .hds-table__tbody .hds-table__td { + vertical-align: baseline; +} + +.hds-table__checkbox { + display: block; + margin: 2px 0; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-tabs__tablist-wrapper { + position: relative; +} +.hds-tabs__tablist-wrapper::before { + position: absolute; + right: 0; + bottom: calc((var(--token-tabs-indicator-height) - var(--token-tabs-divider-height)) / 2); + left: 0; + display: block; + border-top: var(--token-tabs-divider-height) solid var(--token-color-border-primary); + content: ""; +} + +.hds-tabs__tablist { + position: relative; + display: flex; + margin: 0; + padding: 0; + overflow-x: auto; + isolation: isolate; + -webkit-overflow-scrolling: touch; +} + +.hds-tabs__tab { + position: relative; + display: flex; + align-items: center; + margin: 0; + color: var(--token-color-foreground-primary); + white-space: nowrap; + text-decoration: none; + list-style: none; +} +.hds-tabs__tab:hover, .hds-tabs__tab.mock-hover { + color: var(--token-color-foreground-action); +} +.hds-tabs__tab.hds-tabs__tab--is-selected { + color: var(--token-color-foreground-action); +} +.hds-tabs__tab.hds-tabs__tab--is-selected:hover { + color: var(--token-color-foreground-action-hover); +} +.hds-tabs__tab.hds-tabs__tab--is-selected:hover ~ .hds-tabs__tab-indicator { + background: var(--token-color-foreground-action-hover); +} + +.hds-tabs__tab-button { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; + position: static; + display: flex; + gap: var(--token-tabs-tab-gutter); + align-items: center; + padding: 0; + color: inherit; + font-weight: var(--token-typography-font-weight-medium); + font-family: var(--token-typography-body-200-font-family); + background-color: transparent; + border: none; + border-radius: var(--token-tabs-tab-border-radius); + cursor: pointer; +} +.hds-tabs__tab-button::before { + position: absolute; + top: var(--token-tabs-tab-focus-inset); + right: var(--token-tabs-tab-focus-inset); + bottom: var(--token-tabs-tab-focus-inset); + left: var(--token-tabs-tab-focus-inset); + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-tabs__tab-button:focus::before, .hds-tabs__tab-button.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-tabs__tab-button:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-tabs__tab-button:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-tabs__tab-button:focus:active::before, .hds-tabs__tab-button.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-tabs__tab-button::after { + position: absolute; + content: ""; + inset: 0; +} + +.hds-tabs__tab-indicator { + position: absolute; + right: 0; + bottom: 0; + left: var(--indicator-left-pos, 0); + z-index: 1; + display: block; + width: var(--indicator-width, 0); + height: var(--token-tabs-indicator-height); + background-color: var(--token-color-foreground-action); + border-radius: var(--token-tabs-indicator-height); +} +@media screen and (prefers-reduced-motion: no-preference) { + .hds-tabs__tab-indicator { + transition-timing-function: var(--token-tabs-indicator-transition-function); + transition-duration: var(--token-tabs-indicator-transition-duration); + transition-property: left, width; + } +} + +.hds-tabs__panel[hidden] { + display: none; +} + +.hds-tabs--size-medium .hds-tabs__tab { + height: var(--token-tabs-tab-height-medium); + padding: var(--token-tabs-tab-padding-vertical) var(--token-tabs-tab-padding-horizontal-medium); +} +.hds-tabs--size-medium .hds-tabs__tab-button { + font-size: var(--token-typography-body-200-font-size); +} + +.hds-tabs--size-large .hds-tabs__tab { + height: var(--token-tabs-tab-height-large); + padding: var(--token-tabs-tab-padding-vertical) var(--token-tabs-tab-padding-horizontal-large); +} +.hds-tabs--size-large .hds-tabs__tab-button { + font-size: var(--token-typography-body-300-font-size); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-tag { + display: inline-flex; + align-items: stretch; + line-height: 1rem; + vertical-align: middle; + background-color: var(--token-color-surface-interactive); + border: 1px solid var(--token-color-border-strong); + border-radius: 50px; +} + +.hds-tag__dismiss { + flex: 0 0 auto; + margin: 0; + padding: 6px 4px 6px 8px; + border: none; + border-radius: inherit; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.hds-tag__dismiss-icon { + width: 12px; + height: 12px; + color: var(--token-color-foreground-primary); +} + +.hds-tag__text, +.hds-tag__link { + flex: 1 0 0; + padding: 3px 10px 5px 10px; + border-radius: inherit; +} + +.hds-tag__dismiss ~ .hds-tag__text, +.hds-tag__dismiss ~ .hds-tag__link { + padding: 3px 8px 5px 6px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.hds-tag__dismiss, +.hds-tag__link { + background-color: var(--token-color-surface-interactive); + cursor: pointer; +} +.hds-tag__dismiss:hover, .hds-tag__dismiss.mock-hover, +.hds-tag__link:hover, +.hds-tag__link.mock-hover { + background-color: var(--token-color-surface-interactive-hover); +} +.hds-tag__dismiss:active, .hds-tag__dismiss.mock-active, +.hds-tag__link:active, +.hds-tag__link.mock-active { + background-color: var(--token-color-surface-interactive-active); +} +.hds-tag__dismiss:focus, .hds-tag__dismiss.mock-focus, +.hds-tag__link:focus, +.hds-tag__link.mock-focus { + outline-style: solid; + outline-color: transparent; + z-index: 1; +} +.hds-tag__dismiss:focus:focus, .hds-tag__dismiss:focus.mock-focus, .hds-tag__dismiss.mock-focus:focus, .hds-tag__dismiss.mock-focus.mock-focus, +.hds-tag__link:focus:focus, +.hds-tag__link:focus.mock-focus, +.hds-tag__link.mock-focus:focus, +.hds-tag__link.mock-focus.mock-focus { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-tag__dismiss:focus:focus:not(:focus-visible), .hds-tag__dismiss.mock-focus:focus:not(:focus-visible), +.hds-tag__link:focus:focus:not(:focus-visible), +.hds-tag__link.mock-focus:focus:not(:focus-visible) { + box-shadow: none; +} +.hds-tag__dismiss:focus:focus-visible, .hds-tag__dismiss.mock-focus:focus-visible, +.hds-tag__link:focus:focus-visible, +.hds-tag__link.mock-focus:focus-visible { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-tag__dismiss:focus:focus:active, .hds-tag__dismiss:focus.mock-focus.mock-active, .hds-tag__dismiss.mock-focus:focus:active, .hds-tag__dismiss.mock-focus.mock-focus.mock-active, +.hds-tag__link:focus:focus:active, +.hds-tag__link:focus.mock-focus.mock-active, +.hds-tag__link.mock-focus:focus:active, +.hds-tag__link.mock-focus.mock-focus.mock-active { + box-shadow: none; +} + +.hds-tag--color-primary .hds-tag__link { + color: var(--token-color-foreground-action); +} +.hds-tag--color-primary .hds-tag__link:hover, .hds-tag--color-primary .hds-tag__link.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-tag--color-primary .hds-tag__link:active, .hds-tag--color-primary .hds-tag__link.mock-active { + color: var(--token-color-foreground-action-active); +} + +.hds-tag--color-secondary .hds-tag__link { + color: var(--token-color-foreground-strong); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-text--align-left { + text-align: left; +} + +.hds-text--align-center { + text-align: center; +} + +.hds-text--align-right { + text-align: right; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-toast { + width: fit-content; + min-width: min(360px, 80vw); + max-width: min(500px, 80vw); + box-shadow: var(--token-elevation-higher-box-shadow); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-tooltip-button { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-tooltip-button::before { + position: absolute; + top: var(--token-tooltip-focus-offset); + right: var(--token-tooltip-focus-offset); + bottom: var(--token-tooltip-focus-offset); + left: var(--token-tooltip-focus-offset); + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-tooltip-button:focus::before, .hds-tooltip-button.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-tooltip-button:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-tooltip-button:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-tooltip-button:focus:active::before, .hds-tooltip-button.mock-focus.mock-active::before { + box-shadow: none; +} + +:where(.hds-tooltip-button) { + margin: 0; + padding: 0; + color: inherit; + font: inherit; + text-align: inherit; + background-color: inherit; + border: none; +} + +:where(.hds-tooltip-button--is-inline) { + display: inline-flex; +} + +:where(.hds-tooltip-button--is-block) { + display: flex; +} + +.tippy-box[data-theme~=hds] { + padding: var(--token-tooltip-padding-vertical) var(--token-tooltip-padding-horizontal); + color: var(--token-tooltip-color-foreground-primary); + font-weight: var(--token-typography-font-weight-regular); + font-size: var(--token-typography-body-200-font-size); + font-family: var(--token-typography-body-200-font-family); + line-height: var(--token-typography-body-200-line-height); + overflow-wrap: break-word; + background-color: var(--token-tooltip-color-surface-primary); + border-radius: var(--token-tooltip-border-radius); + box-shadow: var(--token-elevation-higher-box-shadow); + transition-property: transform, visibility, opacity; +} +.tippy-box[data-theme~=hds][data-animation=fade][data-state=hidden] { + opacity: 0; +} +.tippy-box[data-theme~=hds][data-inertia][data-state=visible] { + transition-timing-function: var(--token-tooltip-transition-function); +} +.tippy-box[data-theme~=hds] .tippy-content { + position: relative; + z-index: 1; + max-width: calc(var(--token-tooltip-max-width) - 2 * var(--token-tooltip-padding-horizontal)); + white-space: normal; + text-align: left; +} +.tippy-box[data-theme~=hds] .tippy-svg-arrow { + fill: var(--token-tooltip-color-surface-primary); +} + +.sr-only { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + padding: 0 !important; + overflow: hidden !important; + white-space: nowrap !important; /* 3 */ + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ + clip-path: inset(50%) !important; /* 2 */ +} \ No newline at end of file diff --git a/packages/components/src/styles/@hashicorp/design-system-components--themed-with-css-selectors.scss b/packages/components/src/styles/@hashicorp/design-system-components--themed-with-css-selectors.scss new file mode 100644 index 00000000000..b38f4e0353b --- /dev/null +++ b/packages/components/src/styles/@hashicorp/design-system-components--themed-with-css-selectors.scss @@ -0,0 +1,10 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// this CSS tokens file comes from the 'design-system-tokens' package +@use "themed-tokens-with-css-selectors/tokens.css" as *; + +// this file contains the rest of the HDS components-related code +@use "./partials/design-system-components-common" as *; diff --git a/packages/components/src/styles/@hashicorp/design-system-components--themed-with-prefers-color-scheme.css b/packages/components/src/styles/@hashicorp/design-system-components--themed-with-prefers-color-scheme.css new file mode 100644 index 00000000000..ba906bb5731 --- /dev/null +++ b/packages/components/src/styles/@hashicorp/design-system-components--themed-with-prefers-color-scheme.css @@ -0,0 +1,8248 @@ +@charset "UTF-8"; +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Do not edit directly, this file was auto-generated. + */ +@media (prefers-color-scheme: dark) { + :root { + --token-color-palette-blue-500: #ff0000; + --token-color-palette-blue-400: #ff0000; + --token-color-palette-blue-300: #ff0000; + --token-color-palette-blue-200: #ff0000; + --token-color-palette-blue-100: #ff0000; + --token-color-palette-blue-50: #ff0000; + --token-color-palette-purple-500: #ff0000; + --token-color-palette-purple-400: #ff0000; + --token-color-palette-purple-300: #ff0000; + --token-color-palette-purple-200: #ff0000; + --token-color-palette-purple-100: #ff0000; + --token-color-palette-purple-50: #ff0000; + --token-color-palette-green-500: #ff0000; + --token-color-palette-green-400: #ff0000; + --token-color-palette-green-300: #ff0000; + --token-color-palette-green-200: #ff0000; + --token-color-palette-green-100: #ff0000; + --token-color-palette-green-50: #ff0000; + --token-color-palette-amber-500: #ff0000; + --token-color-palette-amber-400: #ff0000; + --token-color-palette-amber-300: #ff0000; + --token-color-palette-amber-200: #ff0000; + --token-color-palette-amber-100: #ff0000; + --token-color-palette-amber-50: #ff0000; + --token-color-palette-red-500: #ff0000; + --token-color-palette-red-400: #ff0000; + --token-color-palette-red-300: #ff0000; + --token-color-palette-red-200: #ff0000; + --token-color-palette-red-100: #ff0000; + --token-color-palette-red-50: #ff0000; + --token-color-palette-neutral-700: #ff0000; + --token-color-palette-neutral-600: #ff0000; + --token-color-palette-neutral-500: #ff0000; + --token-color-palette-neutral-400: #ff0000; + --token-color-palette-neutral-300: #ff0000; + --token-color-palette-neutral-200: #ff0000; + --token-color-palette-neutral-100: #ff0000; + --token-color-palette-neutral-50: #ff0000; + --token-color-palette-neutral-0: #ff0000; + --token-color-palette-alpha-300: #ff000066; + --token-color-palette-alpha-200: #ff000033; + --token-color-palette-alpha-100: #ff00001a; + } +} +@media (prefers-color-scheme: light) { + :root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + } +} +:root { + --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-boundary-gradient-faint-start: #fffafa; /* this is the 'boundary-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-start: #fff9fb; /* this is the 'consul-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-start: #f3fff9; /* this is the 'nomad-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-start: #f3fcff; /* this is the 'packer-50' value at 25% opacity on white */ + --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-gradient-faint-start: #fcfaff; /* this is the 'terraform-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vault-radar-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */ + --token-color-vault-radar-gradient-faint-start: #fffdf2; /* this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-gradient-faint-start: #fffdf2; /* this is the 'vault-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */ + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var( + --token-color-palette-neutral-200 + ); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-color-foreground-primary: var( + --token-color-foreground-primary + ); + --token-app-side-nav-color-foreground-strong: var( + --token-color-foreground-primary + ); + --token-app-side-nav-color-foreground-faint: var( + --token-color-foreground-faint + ); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-color-surface-interactive-hover: var( + --token-color-surface-interactive-hover + ); + --token-app-side-nav-color-surface-interactive-active: var( + --token-color-palette-neutral-300 + ); + --token-badge-count-padding-horizontal-small: 7px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-medium: 11px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-count-padding-horizontal-large: 13px; /* this horizontal padding is specific for the `badge-count`- here we're taking into account the 1px border */ + --token-badge-height-small: 20px; + --token-badge-height-medium: 24px; + --token-badge-height-large: 32px; + --token-badge-padding-horizontal-small: 5px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-medium: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-horizontal-large: 7px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-small: 1px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-medium: 3px; /* here we're taking into account the 1px border */ + --token-badge-padding-vertical-large: 3px; /* here we're taking into account the 1px border */ + --token-badge-icon-size-small: 12px; + --token-badge-icon-size-medium: 16px; + --token-badge-icon-size-large: 16px; + --token-badge-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-medium: 0.8125rem; /* 13px/0.8125rem */ + --token-badge-font-size-large: 1rem; /* 16px/1rem */ + --token-badge-line-height-small: 1.2308; /* 16px */ + --token-badge-line-height-medium: 1.2308; /* 16px */ + --token-badge-line-height-large: 1.5; /* 24px */ + --token-badge-gap-small: 4px; + --token-badge-gap-medium: 4px; + --token-badge-gap-large: 6px; + --token-badge-border-width: 1px; + --token-badge-border-radius: 5px; + --token-button-critical-box-shadow-focus: none; + --token-button-critical-box-shadow-active: none; + --token-button-disabled-box-shadow: none; + --token-button-height-small: 28px; + --token-button-height-medium: 36px; + --token-button-height-large: 48px; + --token-button-padding-horizontal-small: 11px; /* here we're taking into account the 1px border */ + --token-button-padding-horizontal-medium: 15px; /* here we're taking into account the 1px border */ + --token-button-padding-horizontal-large: 19px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-small: 6px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-medium: 9px; /* here we're taking into account the 1px border */ + --token-button-padding-vertical-large: 11px; /* here we're taking into account the 1px border */ + --token-button-icon-size-small: 12px; + --token-button-icon-size-medium: 16px; + --token-button-icon-size-large: 24px; + --token-button-font-size-small: 0.8125rem; /* 13px/0.8125rem */ + --token-button-font-size-medium: 0.875rem; /* 14px/0.875rem */ + --token-button-font-size-large: 1rem; /* 16px/1rem */ + --token-button-line-height-small: 1.0769; /* 14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */ + --token-button-line-height-medium: 1.1428; /* 16px */ + --token-button-line-height-large: 1.5; /* 24px */ + --token-button-gap: 6px; + --token-button-border-width: 1px; + --token-button-border-radius: 5px; + --token-button-box-shadow-focus: none; + --token-button-focus-border-width: 3px; + --token-button-focus-border-radius: 0px; + --token-button-primary-box-shadow-focus: none; + --token-button-primary-box-shadow-active: none; + --token-button-secondary-box-shadow-focus: none; + --token-button-secondary-box-shadow-active: none; + --token-button-tertiary-surface-default: rgba(0, 0, 0, 0); + --token-button-tertiary-border-color-default: rgba(0, 0, 0, 0); + --token-button-tertiary-box-shadow-default: none; + --token-button-tertiary-box-shadow-focus: none; + --token-button-tertiary-box-shadow-active: none; + --token-form-visibility-toggle-size: 24px; + --token-form-visibility-toggle-padding: 3px; /* here we're taking into account the 1px border */ + --token-form-visibility-toggle-background-color: rgba(0, 0, 0, 0); + --token-form-visibility-toggle-border-width: 1px; + --token-form-visibility-toggle-border-color: rgba(0, 0, 0, 0); + --token-form-error-icon-size: 14px; + --token-form-error-icon-margin-horizontal: 0px; + --token-form-error-icon-margin-vertical: 2px; /* This extra margin is used for vertical optical alignment. */ + --token-form-error-gap: 8px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-file-input-margin-right: 16px; + --token-form-control-focus-outline-width: 3px; + --token-form-control-focus-outline-offset: 0px; + --token-form-control-standard-height: 32px; /* Notice: we use this special token for elements that need to match the 'standard' height of an input element (because that height is actually the result of: text line height + vertical padding + border size). */ + --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-padding-with-icon: 31px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. We also consider extra 24px for the icon. */ + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-masked-input-copy-button-margin-right: 8px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-outline-offset: 1px; + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-group-legend-margin-bottom: 12px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-box-shadow-disabled: none; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-outline-offset: 0px; + --token-form-text-area-outline-offset: 0px; + --token-form-text-input-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */ + --token-form-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier( + 0.68, + -0.2, + 0.265, + 1.15 + ); + --token-form-toggle-thumb-border-radius: 50%px; + --token-form-toggle-outline-width: 3px; + --token-form-toggle-outline-offset: 1px; + --token-outline-offset: 0px; + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-divider-height: 1px; + --token-tooltip-border-radius: 5px; + --token-tooltip-color-foreground-primary: var( + --token-color-foreground-high-contrast + ); + --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700); + --token-tooltip-focus-offset: -2px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; + --token-typography-display-500-font-size: 1.875rem; /* 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /* 38px */ + --token-typography-display-400-font-size: 1.5rem; /* 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /* 32px */ + --token-typography-display-300-font-size: 1.125rem; /* 18px/1.125rem */ + --token-typography-display-300-line-height: 1.3333; /* 24px */ + --token-typography-display-300-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-200-font-size: 1rem; /* 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /* 24px */ + --token-typography-display-200-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.3846; /* 18px */ + --token-typography-body-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /* 24px */ + --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /* 20px */ + --token-typography-body-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /* 18px */ + --token-typography-code-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /* 16px */ + --token-typography-code-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /* 18px */ + --token-typography-code-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /* 20px */ + --token-color-border-action: var(--token-color-palette-blue-100); + --token-color-border-highlight: var(--token-color-palette-purple-100); + --token-color-border-success: var(--token-color-palette-green-100); + --token-color-border-warning: var(--token-color-palette-amber-100); + --token-color-border-critical: var(--token-color-palette-red-100); + --token-color-focus-action-internal: var(--token-color-palette-blue-300); + --token-color-focus-critical-internal: var(--token-color-palette-red-300); + --token-color-foreground-strong: var(--token-color-palette-neutral-700); + --token-color-foreground-primary: var(--token-color-palette-neutral-600); + --token-color-foreground-faint: var(--token-color-palette-neutral-500); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-color-foreground-disabled: var(--token-color-palette-neutral-400); + --token-color-foreground-action: var(--token-color-palette-blue-200); + --token-color-foreground-action-hover: var(--token-color-palette-blue-300); + --token-color-foreground-action-active: var(--token-color-palette-blue-400); + --token-color-foreground-highlight: var(--token-color-palette-purple-200); + --token-color-foreground-highlight-on-surface: var( + --token-color-palette-purple-300 + ); + --token-color-foreground-highlight-high-contrast: var( + --token-color-palette-purple-500 + ); + --token-color-foreground-success: var(--token-color-palette-green-200); + --token-color-foreground-success-on-surface: var( + --token-color-palette-green-300 + ); + --token-color-foreground-success-high-contrast: var( + --token-color-palette-green-500 + ); + --token-color-foreground-warning: var(--token-color-palette-amber-200); + --token-color-foreground-warning-on-surface: var( + --token-color-palette-amber-300 + ); + --token-color-foreground-warning-high-contrast: var( + --token-color-palette-amber-500 + ); + --token-color-foreground-critical: var(--token-color-palette-red-200); + --token-color-foreground-critical-on-surface: var( + --token-color-palette-red-300 + ); + --token-color-foreground-critical-high-contrast: var( + --token-color-palette-red-500 + ); + --token-color-page-primary: var(--token-color-palette-neutral-0); + --token-color-page-faint: var(--token-color-palette-neutral-50); + --token-color-surface-primary: var(--token-color-palette-neutral-0); + --token-color-surface-faint: var(--token-color-palette-neutral-50); + --token-color-surface-strong: var(--token-color-palette-neutral-100); + --token-color-surface-interactive: var(--token-color-palette-neutral-0); + --token-color-surface-interactive-hover: var( + --token-color-palette-neutral-100 + ); + --token-color-surface-interactive-active: var( + --token-color-palette-neutral-200 + ); + --token-color-surface-interactive-disabled: var( + --token-color-palette-neutral-50 + ); + --token-color-surface-action: var(--token-color-palette-blue-50); + --token-color-surface-highlight: var(--token-color-palette-purple-50); + --token-color-surface-success: var(--token-color-palette-green-50); + --token-color-surface-warning: var(--token-color-palette-amber-50); + --token-color-surface-critical: var(--token-color-palette-red-50); + --token-color-hashicorp-brand: var(--token-color-palette-hashicorp-brand); + --token-color-boundary-brand: var(--token-color-palette-boundary-brand); + --token-color-boundary-foreground: var(--token-color-palette-boundary-500); + --token-color-boundary-surface: var(--token-color-palette-boundary-50); + --token-color-boundary-border: var(--token-color-palette-boundary-100); + --token-color-boundary-gradient-primary-start: var( + --token-color-palette-boundary-300 + ); + --token-color-boundary-gradient-primary-stop: var( + --token-color-palette-boundary-400 + ); + --token-color-boundary-gradient-faint-stop: var( + --token-color-palette-boundary-50 + ); + --token-color-consul-brand: var(--token-color-palette-consul-brand); + --token-color-consul-foreground: var(--token-color-palette-consul-500); + --token-color-consul-surface: var(--token-color-palette-consul-50); + --token-color-consul-border: var(--token-color-palette-consul-100); + --token-color-consul-gradient-primary-start: var( + --token-color-palette-consul-300 + ); + --token-color-consul-gradient-primary-stop: var( + --token-color-palette-consul-400 + ); + --token-color-consul-gradient-faint-stop: var( + --token-color-palette-consul-50 + ); + --token-color-hcp-brand: var(--token-color-palette-hcp-brand); + --token-color-nomad-brand: var(--token-color-palette-nomad-brand); + --token-color-nomad-foreground: var(--token-color-palette-nomad-500); + --token-color-nomad-surface: var(--token-color-palette-nomad-50); + --token-color-nomad-border: var(--token-color-palette-nomad-100); + --token-color-nomad-gradient-primary-start: var( + --token-color-palette-nomad-100 + ); + --token-color-nomad-gradient-primary-stop: var( + --token-color-palette-nomad-200 + ); + --token-color-nomad-gradient-faint-stop: var(--token-color-palette-nomad-50); + --token-color-packer-brand: var(--token-color-palette-packer-brand); + --token-color-packer-foreground: var(--token-color-palette-packer-500); + --token-color-packer-surface: var(--token-color-palette-packer-50); + --token-color-packer-border: var(--token-color-palette-packer-100); + --token-color-packer-gradient-primary-start: var( + --token-color-palette-packer-100 + ); + --token-color-packer-gradient-primary-stop: var( + --token-color-palette-packer-200 + ); + --token-color-packer-gradient-faint-stop: var( + --token-color-palette-packer-50 + ); + --token-color-terraform-brand: var(--token-color-palette-terraform-brand); + --token-color-terraform-foreground: var(--token-color-palette-terraform-500); + --token-color-terraform-surface: var(--token-color-palette-terraform-50); + --token-color-terraform-border: var(--token-color-palette-terraform-100); + --token-color-terraform-gradient-primary-start: var( + --token-color-palette-terraform-300 + ); + --token-color-terraform-gradient-primary-stop: var( + --token-color-palette-terraform-400 + ); + --token-color-terraform-gradient-faint-stop: var( + --token-color-palette-terraform-50 + ); + --token-color-vagrant-brand: var(--token-color-palette-vagrant-brand); + --token-color-vagrant-foreground: var(--token-color-palette-vagrant-500); + --token-color-vagrant-surface: var(--token-color-palette-vagrant-50); + --token-color-vagrant-border: var(--token-color-palette-vagrant-100); + --token-color-vagrant-gradient-primary-start: var( + --token-color-palette-vagrant-300 + ); + --token-color-vagrant-gradient-primary-stop: var( + --token-color-palette-vagrant-400 + ); + --token-color-vagrant-gradient-faint-stop: var( + --token-color-palette-vagrant-50 + ); + --token-color-vault-radar-brand: var(--token-color-palette-vault-radar-brand); + --token-color-vault-radar-foreground: var( + --token-color-palette-vault-radar-500 + ); + --token-color-vault-radar-surface: var(--token-color-palette-vault-radar-50); + --token-color-vault-radar-border: var(--token-color-palette-vault-radar-100); + --token-color-vault-radar-gradient-primary-start: var( + --token-color-palette-vault-radar-100 + ); + --token-color-vault-radar-gradient-primary-stop: var( + --token-color-palette-vault-radar-200 + ); + --token-color-vault-radar-gradient-faint-stop: var( + --token-color-palette-vault-radar-50 + ); + --token-color-vault-secrets-brand: var( + --token-color-palette-vault-secrets-brand + ); + --token-color-vault-secrets-foreground: var( + --token-color-palette-vault-secrets-500 + ); + --token-color-vault-secrets-surface: var( + --token-color-palette-vault-secrets-50 + ); + --token-color-vault-secrets-border: var( + --token-color-palette-vault-secrets-100 + ); + --token-color-vault-secrets-gradient-primary-start: var( + --token-color-palette-vault-secrets-100 + ); + --token-color-vault-secrets-gradient-primary-stop: var( + --token-color-palette-vault-secrets-200 + ); + --token-color-vault-secrets-gradient-faint-stop: var( + --token-color-palette-vault-secrets-50 + ); + --token-color-vault-brand: var(--token-color-palette-vault-brand); + --token-color-vault-foreground: var(--token-color-palette-vault-500); + --token-color-vault-surface: var(--token-color-palette-vault-50); + --token-color-vault-border: var(--token-color-palette-vault-100); + --token-color-vault-gradient-primary-start: var( + --token-color-palette-vault-100 + ); + --token-color-vault-gradient-primary-stop: var( + --token-color-palette-vault-200 + ); + --token-color-vault-gradient-faint-stop: var(--token-color-palette-vault-50); + --token-color-waypoint-brand: var(--token-color-palette-waypoint-brand); + --token-color-waypoint-foreground: var(--token-color-palette-waypoint-500); + --token-color-waypoint-surface: var(--token-color-palette-waypoint-50); + --token-color-waypoint-border: var(--token-color-palette-waypoint-100); + --token-color-waypoint-gradient-primary-start: var( + --token-color-palette-waypoint-100 + ); + --token-color-waypoint-gradient-primary-stop: var( + --token-color-palette-waypoint-200 + ); + --token-color-waypoint-gradient-faint-stop: var( + --token-color-palette-waypoint-50 + ); + --token-badge-font-weight: var(--token-typography-font-weight-medium); + --token-badge-filled-neutral-dark-mode-background-color: var( + --token-color-palette-neutral-500 + ); + --token-badge-inverted-neutral-background-color: var( + --token-color-palette-neutral-500 + ); + --token-badge-inverted-highlight-background-color: var( + --token-color-palette-purple-200 + ); + --token-badge-inverted-success-background-color: var( + --token-color-palette-green-200 + ); + --token-badge-inverted-warning-background-color: var( + --token-color-palette-amber-200 + ); + --token-badge-inverted-critical-background-color: var( + --token-color-palette-red-200 + ); + --token-badge-outlined-neutral-border-color: var( + --token-color-palette-neutral-500 + ); + --token-badge-outlined-neutral-dark-mode-border-color: var( + --token-color-palette-neutral-50 + ); + --token-badge-outlined-highlight-border-color: var( + --token-color-palette-purple-200 + ); + --token-badge-outlined-success-border-color: var( + --token-color-palette-green-200 + ); + --token-badge-outlined-warning-border-color: var( + --token-color-palette-amber-200 + ); + --token-badge-outlined-critical-border-color: var( + --token-color-palette-red-200 + ); + --token-button-critical-surface-hover: var(--token-color-palette-red-300); + --token-button-critical-surface-active: var(--token-color-palette-red-400); + --token-button-critical-border-color-hover: var( + --token-color-palette-red-400 + ); + --token-button-critical-border-color-active: var( + --token-color-palette-red-400 + ); + --token-button-font-weight: var( + --token-typography-font-weight-regular + ); /* notice: we set the font-weight of the button text to 'regular' (on purpose) because of the antialising of the browser that renders the text quite different from what it looks like in Figma, so we prefer to have them visually similar even if they differ in their internal implementation (in Figma the font-weight is medium/500) - for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099 */ + --token-button-primary-surface-default: var(--token-color-palette-blue-200); + --token-button-primary-surface-hover: var(--token-color-palette-blue-400); + --token-button-primary-surface-focus: var(--token-color-palette-blue-200); + --token-button-primary-surface-active: var(--token-color-palette-blue-400); + --token-button-primary-border-color-default: var( + --token-color-palette-blue-300 + ); + --token-button-primary-border-color-hover: var( + --token-color-palette-blue-400 + ); + --token-button-primary-border-color-active: var( + --token-color-palette-blue-400 + ); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-file-input-min-height: var(--token-form-control-standard-height); + --token-form-control-base-border-color-default: var( + --token-color-palette-neutral-400 + ); + --token-form-control-base-border-color-hover: var( + --token-color-palette-neutral-500 + ); + --token-form-control-checked-surface-color-default: var( + --token-color-palette-blue-200 + ); + --token-form-control-checked-surface-color-hover: var( + --token-color-palette-blue-300 + ); + --token-form-control-checked-border-color-default: var( + --token-color-palette-blue-300 + ); + --token-form-control-checked-border-color-hover: var( + --token-color-palette-blue-400 + ); + --token-form-control-invalid-border-color-default: var( + --token-color-palette-red-300 + ); + --token-form-control-invalid-border-color-hover: var( + --token-color-palette-red-400 + ); + --token-form-control-invalid-outline-color: var( + --token-color-focus-critical-external + ); + --token-form-control-focus-outline-color: var( + --token-color-focus-action-external + ); + --token-form-masked-input-toggle-button-size: var( + --token-form-visibility-toggle-size + ); + --token-form-select-background-image-position-right-x: var( + --token-form-control-padding + ); + --token-form-text-area-min-height: var(--token-form-control-standard-height); + --token-form-text-input-background-image-position-x: var( + --token-form-control-padding + ); + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-typography-font-stack-display: var( + --token-typography-font-stack-sans-display-mac-os + ), + var(--token-typography-font-stack-sans-display-windows), + var(--token-typography-font-stack-sans-display-sans), + var(--token-typography-font-stack-sans-display-emoji); + --token-typography-font-stack-text: var( + --token-typography-font-stack-sans-text-mac-os + ), + var(--token-typography-font-stack-sans-text-windows), + var(--token-typography-font-stack-sans-display-sans), + var(--token-typography-font-stack-sans-text-emoji); + --token-typography-font-stack-code: var( + --token-typography-font-stack-monospace-code-mac-os + ), + var(--token-typography-font-stack-monospace-code-windows), monospace; + --token-color-border-primary: var(--token-color-palette-alpha-200); + --token-color-border-faint: var(--token-color-palette-alpha-100); + --token-color-border-strong: var(--token-color-palette-alpha-300); + --token-elevation-inset-box-shadow: var( + --token-elevation-inset-box-shadow-01 + ); + --token-elevation-low-box-shadow: var(--token-elevation-low-box-shadow-01), + var(--token-elevation-low-box-shadow-02); + --token-elevation-mid-box-shadow: var(--token-elevation-mid-box-shadow-01), + var(--token-elevation-mid-box-shadow-02); + --token-elevation-high-box-shadow: var(--token-elevation-high-box-shadow-01), + var(--token-elevation-high-box-shadow-02); + --token-elevation-higher-box-shadow: var( + --token-elevation-higher-box-shadow-01 + ), + var(--token-elevation-higher-box-shadow-02); + --token-elevation-overlay-box-shadow: var( + --token-elevation-overlay-box-shadow-01 + ), + var(--token-elevation-overlay-box-shadow-02); + --token-surface-inset-box-shadow: var( + --token-elevation-inset-box-shadow-border + ), + var(--token-elevation-inset-box-shadow); + --token-surface-base-box-shadow: var( + --token-elevation-base-box-shadow-border + ); + --token-surface-low-box-shadow: var(--token-elevation-low-box-shadow-border), + var(--token-elevation-low-box-shadow); + --token-surface-mid-box-shadow: var(--token-elevation-mid-box-shadow-border), + var(--token-elevation-mid-box-shadow); + --token-surface-high-box-shadow: var(--token-elevation-high-box-shadow-border), + var(--token-elevation-high-box-shadow); + --token-surface-higher-box-shadow: var( + --token-elevation-higher-box-shadow-border + ), + var(--token-elevation-higher-box-shadow); + --token-surface-overlay-box-shadow: var( + --token-elevation-overlay-box-shadow-border + ), + var(--token-elevation-overlay-box-shadow); + --token-badge-font-family: var(--token-typography-font-stack-text); + --token-badge-filled-neutral-foreground-color: var( + --token-color-foreground-primary + ); + --token-badge-filled-neutral-background-color: var( + --token-color-surface-strong + ); + --token-badge-filled-neutral-dark-mode-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-filled-highlight-foreground-color: var( + --token-color-foreground-highlight-on-surface + ); + --token-badge-filled-highlight-background-color: var( + --token-color-surface-highlight + ); + --token-badge-filled-success-foreground-color: var( + --token-color-foreground-success-on-surface + ); + --token-badge-filled-success-background-color: var( + --token-color-surface-success + ); + --token-badge-filled-warning-foreground-color: var( + --token-color-foreground-warning-on-surface + ); + --token-badge-filled-warning-background-color: var( + --token-color-surface-warning + ); + --token-badge-filled-critical-foreground-color: var( + --token-color-foreground-critical-on-surface + ); + --token-badge-filled-critical-background-color: var( + --token-color-surface-critical + ); + --token-badge-inverted-neutral-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-inverted-neutral-dark-mode-foreground-color: var( + --token-color-foreground-primary + ); + --token-badge-inverted-neutral-dark-mode-background-color: var( + --token-color-surface-faint + ); + --token-badge-inverted-highlight-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-inverted-success-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-inverted-warning-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-inverted-critical-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-outlined-neutral-foreground-color: var( + --token-color-foreground-primary + ); + --token-badge-outlined-neutral-dark-mode-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-badge-outlined-highlight-foreground-color: var( + --token-color-foreground-highlight + ); + --token-badge-outlined-success-foreground-color: var( + --token-color-foreground-success + ); + --token-badge-outlined-warning-foreground-color: var( + --token-color-foreground-warning + ); + --token-badge-outlined-critical-foreground-color: var( + --token-color-foreground-critical + ); + --token-button-critical-foreground-default: var( + --token-color-foreground-critical-on-surface + ); + --token-button-critical-foreground-hover: var( + --token-color-foreground-high-contrast + ); + --token-button-critical-foreground-focus: var( + --token-color-foreground-critical-on-surface + ); + --token-button-critical-foreground-active: var( + --token-color-foreground-high-contrast + ); + --token-button-critical-surface-default: var(--token-color-surface-critical); + --token-button-critical-surface-focus: var(--token-color-surface-critical); + --token-button-critical-border-color-default: var( + --token-color-foreground-critical-on-surface + ); + --token-button-critical-border-color-focus: var( + --token-color-focus-critical-internal + ); + --token-button-disabled-foreground: var(--token-color-foreground-disabled); + --token-button-disabled-surface: var(--token-color-surface-faint); + --token-button-font-family: var(--token-typography-font-stack-text); + --token-button-primary-foreground-default: var( + --token-color-foreground-high-contrast + ); + --token-button-primary-foreground-hover: var( + --token-color-foreground-high-contrast + ); + --token-button-primary-foreground-focus: var( + --token-color-foreground-high-contrast + ); + --token-button-primary-foreground-active: var( + --token-color-foreground-high-contrast + ); + --token-button-primary-border-color-focus: var( + --token-color-focus-action-internal + ); + --token-button-secondary-foreground-default: var( + --token-color-foreground-primary + ); + --token-button-secondary-foreground-hover: var( + --token-color-foreground-primary + ); + --token-button-secondary-foreground-focus: var( + --token-color-foreground-primary + ); + --token-button-secondary-foreground-active: var( + --token-color-foreground-primary + ); + --token-button-secondary-surface-default: var(--token-color-surface-faint); + --token-button-secondary-surface-hover: var(--token-color-surface-primary); + --token-button-secondary-surface-focus: var(--token-color-surface-faint); + --token-button-secondary-surface-active: var( + --token-color-surface-interactive-active + ); + --token-button-secondary-border-color-focus: var( + --token-color-focus-action-internal + ); + --token-button-tertiary-foreground-default: var( + --token-color-foreground-action + ); + --token-button-tertiary-foreground-hover: var( + --token-color-foreground-action-hover + ); + --token-button-tertiary-foreground-focus: var( + --token-color-foreground-action + ); + --token-button-tertiary-foreground-active: var( + --token-color-foreground-action-active + ); + --token-button-tertiary-surface-hover: var(--token-color-surface-primary); + --token-button-tertiary-surface-focus: var(--token-color-surface-primary); + --token-button-tertiary-surface-active: var( + --token-color-surface-interactive-active + ); + --token-button-tertiary-border-color-focus: var( + --token-color-focus-action-internal + ); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-visibility-toggle-color: var(--token-color-foreground-primary); + --token-form-control-base-foreground-value-color: var( + --token-color-foreground-strong + ); + --token-form-control-base-foreground-placeholder-color: var( + --token-color-foreground-faint + ); + --token-form-control-base-surface-color-default: var( + --token-color-surface-interactive + ); + --token-form-control-base-surface-color-hover: var( + --token-color-surface-interactive-hover + ); + --token-form-control-checked-foreground-color: var( + --token-color-foreground-high-contrast + ); + --token-form-control-readonly-foreground-color: var( + --token-color-foreground-primary + ); + --token-form-control-readonly-surface-color: var( + --token-color-surface-strong + ); + --token-form-control-disabled-foreground-color: var( + --token-color-foreground-disabled + ); + --token-form-control-disabled-surface-color: var( + --token-color-surface-interactive-disabled + ); + --token-form-radiocard-box-shadow-focus: 0 0 0 3px + var(--token-form-control-focus-outline-color); /* This is a custom shadow used to add a focus ring around the card */ + --token-form-toggle-base-surface-color-default: var( + --token-color-surface-strong + ); /* the toggle has a different base surface color, compared to the other controls */ + --token-typography-display-500-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-400-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-300-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-display-200-font-family: var( + --token-typography-font-stack-display + ); + --token-typography-display-100-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-300-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-200-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-body-100-font-family: var( + --token-typography-font-stack-text + ); + --token-typography-code-100-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-200-font-family: var( + --token-typography-font-stack-code + ); + --token-typography-code-300-font-family: var( + --token-typography-font-stack-code + ); + --token-focus-ring-action-box-shadow: var( + --token-focus-ring-action-internal-box-shadow + ), + var(--token-focus-ring-action-external-box-shadow); + --token-focus-ring-critical-box-shadow: var( + --token-focus-ring-critical-internal-box-shadow + ), + var(--token-focus-ring-critical-external-box-shadow); + --token-button-critical-box-shadow-default: var( + --token-elevation-low-box-shadow + ); + --token-button-disabled-border-color: var(--token-color-border-primary); + --token-button-primary-box-shadow-default: var( + --token-elevation-low-box-shadow + ); + --token-button-secondary-border-color-default: var( + --token-color-border-strong + ); + --token-button-secondary-border-color-hover: var(--token-color-border-strong); + --token-button-secondary-border-color-active: var( + --token-color-border-strong + ); + --token-button-secondary-box-shadow-default: var( + --token-elevation-low-box-shadow + ); + --token-button-tertiary-border-color-hover: var(--token-color-border-strong); + --token-button-tertiary-border-color-active: var(--token-color-border-strong); + --token-form-legend-color: var(--token-form-label-color); + --token-form-control-base-box-shadow-default: var( + --token-elevation-inset-box-shadow + ); + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-disabled-border-color: var(--token-color-border-primary); + --token-form-radiocard-box-shadow-default: var( + --token-elevation-mid-box-shadow + ); + --token-form-radiocard-box-shadow-hover: var( + --token-elevation-high-box-shadow + ); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Do not edit directly, this file was auto-generated. + */ +.hds-border-primary { + border: 1px solid var(--token-color-border-primary); +} + +.hds-border-faint { + border: 1px solid var(--token-color-border-faint); +} + +.hds-border-strong { + border: 1px solid var(--token-color-border-strong); +} + +.hds-border-action { + border: 1px solid var(--token-color-border-action); +} + +.hds-border-highlight { + border: 1px solid var(--token-color-border-highlight); +} + +.hds-border-success { + border: 1px solid var(--token-color-border-success); +} + +.hds-border-warning { + border: 1px solid var(--token-color-border-warning); +} + +.hds-border-critical { + border: 1px solid var(--token-color-border-critical); +} + +.hds-foreground-strong { + color: var(--token-color-foreground-strong); +} + +.hds-foreground-primary { + color: var(--token-color-foreground-primary); +} + +.hds-foreground-faint { + color: var(--token-color-foreground-faint); +} + +.hds-foreground-high-contrast { + color: var(--token-color-foreground-high-contrast); +} + +.hds-foreground-disabled { + color: var(--token-color-foreground-disabled); +} + +.hds-foreground-action { + color: var(--token-color-foreground-action); +} + +.hds-foreground-action-hover { + color: var(--token-color-foreground-action-hover); +} + +.hds-foreground-action-active { + color: var(--token-color-foreground-action-active); +} + +.hds-foreground-highlight { + color: var(--token-color-foreground-highlight); +} + +.hds-foreground-highlight-on-surface { + color: var(--token-color-foreground-highlight-on-surface); +} + +.hds-foreground-highlight-high-contrast { + color: var(--token-color-foreground-highlight-high-contrast); +} + +.hds-foreground-success { + color: var(--token-color-foreground-success); +} + +.hds-foreground-success-on-surface { + color: var(--token-color-foreground-success-on-surface); +} + +.hds-foreground-success-high-contrast { + color: var(--token-color-foreground-success-high-contrast); +} + +.hds-foreground-warning { + color: var(--token-color-foreground-warning); +} + +.hds-foreground-warning-on-surface { + color: var(--token-color-foreground-warning-on-surface); +} + +.hds-foreground-warning-high-contrast { + color: var(--token-color-foreground-warning-high-contrast); +} + +.hds-foreground-critical { + color: var(--token-color-foreground-critical); +} + +.hds-foreground-critical-on-surface { + color: var(--token-color-foreground-critical-on-surface); +} + +.hds-foreground-critical-high-contrast { + color: var(--token-color-foreground-critical-high-contrast); +} + +.hds-page-primary { + background-color: var(--token-color-page-primary); +} + +.hds-page-faint { + background-color: var(--token-color-page-faint); +} + +.hds-surface-primary { + background-color: var(--token-color-surface-primary); +} + +.hds-surface-faint { + background-color: var(--token-color-surface-faint); +} + +.hds-surface-strong { + background-color: var(--token-color-surface-strong); +} + +.hds-surface-interactive { + background-color: var(--token-color-surface-interactive); +} + +.hds-surface-interactive-hover { + background-color: var(--token-color-surface-interactive-hover); +} + +.hds-surface-interactive-active { + background-color: var(--token-color-surface-interactive-active); +} + +.hds-surface-interactive-disabled { + background-color: var(--token-color-surface-interactive-disabled); +} + +.hds-surface-action { + background-color: var(--token-color-surface-action); +} + +.hds-surface-highlight { + background-color: var(--token-color-surface-highlight); +} + +.hds-surface-success { + background-color: var(--token-color-surface-success); +} + +.hds-surface-warning { + background-color: var(--token-color-surface-warning); +} + +.hds-surface-critical { + background-color: var(--token-color-surface-critical); +} + +/** + * Do not edit directly, this file was auto-generated. + */ +.hds-elevation-inset { + box-shadow: var(--token-elevation-inset-box-shadow); +} + +.hds-elevation-low { + box-shadow: var(--token-elevation-low-box-shadow); +} + +.hds-elevation-mid { + box-shadow: var(--token-elevation-mid-box-shadow); +} + +.hds-elevation-high { + box-shadow: var(--token-elevation-high-box-shadow); +} + +.hds-elevation-higher { + box-shadow: var(--token-elevation-higher-box-shadow); +} + +.hds-elevation-overlay { + box-shadow: var(--token-elevation-overlay-box-shadow); +} + +.hds-surface-inset { + box-shadow: var(--token-surface-inset-box-shadow); +} + +.hds-surface-base { + box-shadow: var(--token-surface-base-box-shadow); +} + +.hds-surface-low { + box-shadow: var(--token-surface-low-box-shadow); +} + +.hds-surface-mid { + box-shadow: var(--token-surface-mid-box-shadow); +} + +.hds-surface-high { + box-shadow: var(--token-surface-high-box-shadow); +} + +.hds-surface-higher { + box-shadow: var(--token-surface-higher-box-shadow); +} + +.hds-surface-overlay { + box-shadow: var(--token-surface-overlay-box-shadow); +} + +/** + * Do not edit directly, this file was auto-generated. + */ +.hds-focus-ring-action-box-shadow { + box-shadow: var(--token-focus-ring-action-box-shadow); +} + +.hds-focus-ring-critical-box-shadow { + box-shadow: var(--token-focus-ring-critical-box-shadow); +} + +/** + * Do not edit directly, this file was auto-generated. + */ +.hds-font-family-sans-display { + font-family: var(--token-typography-font-stack-display); +} + +.hds-font-family-sans-text { + font-family: var(--token-typography-font-stack-text); +} + +.hds-font-family-mono-code { + font-family: var(--token-typography-font-stack-code); +} + +.hds-font-weight-regular { + font-weight: 400; +} + +.hds-font-weight-medium { + font-weight: 500; +} + +.hds-font-weight-semibold { + font-weight: 600; +} + +.hds-font-weight-bold { + font-weight: 700; +} + +.hds-typography-display-500 { + font-family: var(--token-typography-display-500-font-family); + font-size: var(--token-typography-display-500-font-size); + line-height: var(--token-typography-display-500-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-display-400 { + font-family: var(--token-typography-display-400-font-family); + font-size: var(--token-typography-display-400-font-size); + line-height: var(--token-typography-display-400-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-display-300 { + font-family: var(--token-typography-display-300-font-family); + font-size: var(--token-typography-display-300-font-size); + line-height: var(--token-typography-display-300-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-display-200 { + font-family: var(--token-typography-display-200-font-family); + font-size: var(--token-typography-display-200-font-size); + line-height: var(--token-typography-display-200-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-display-100 { + font-family: var(--token-typography-display-100-font-family); + font-size: var(--token-typography-display-100-font-size); + line-height: var(--token-typography-display-100-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-body-300 { + font-family: var(--token-typography-body-300-font-family); + font-size: var(--token-typography-body-300-font-size); + line-height: var(--token-typography-body-300-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-body-200 { + font-family: var(--token-typography-body-200-font-family); + font-size: var(--token-typography-body-200-font-size); + line-height: var(--token-typography-body-200-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-body-100 { + font-family: var(--token-typography-body-100-font-family); + font-size: var(--token-typography-body-100-font-size); + line-height: var(--token-typography-body-100-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-code-100 { + font-family: var(--token-typography-code-100-font-family); + font-size: var(--token-typography-code-100-font-size); + line-height: var(--token-typography-code-100-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-code-200 { + font-family: var(--token-typography-code-200-font-family); + font-size: var(--token-typography-code-200-font-size); + line-height: var(--token-typography-code-200-line-height); + margin: 0; + padding: 0; +} + +.hds-typography-code-300 { + font-family: var(--token-typography-code-300-font-family); + font-size: var(--token-typography-code-300-font-size); + line-height: var(--token-typography-code-300-line-height); + margin: 0; + padding: 0; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-accordion { + display: flex; + flex-direction: column; +} + +.hds-accordion--type-card.hds-accordion--size-small { + gap: 4px; +} +.hds-accordion--type-card.hds-accordion--size-medium { + gap: 8px; +} +.hds-accordion--type-card.hds-accordion--size-large { + gap: 12px; +} + +.hds-accordion-item--size-small { + --hds-accordion-item-toggle-padding: 8px; + --hds-accordion-item-toggle-padding-left: 8px; + --hds-accordion-item-content-padding-top: 4px; + --hds-accordion-item-content-padding-right: 8px; + --hds-accordion-item-content-padding-bottom: 8px; + --hds-accordion-item-content-padding-left: 12px; + --hds-accordion-item-gap: 8px; + --hds-accordion-item-icon-size: 16px; +} + +.hds-accordion-item--size-medium { + --hds-accordion-item-toggle-padding: 12px; + --hds-accordion-item-toggle-padding-left: 8px; + --hds-accordion-item-content-padding-top: 4px; + --hds-accordion-item-content-padding-right: 12px; + --hds-accordion-item-content-padding-bottom: 12px; + --hds-accordion-item-content-padding-left: 12px; + --hds-accordion-item-gap: 12px; + --hds-accordion-item-icon-size: 20px; +} + +.hds-accordion-item--size-large { + --hds-accordion-item-toggle-padding: 16px; + --hds-accordion-item-toggle-padding-left: 12px; + --hds-accordion-item-content-padding-top: 4px; + --hds-accordion-item-content-padding-right: 16px; + --hds-accordion-item-content-padding-bottom: 16px; + --hds-accordion-item-content-padding-left: 16px; + --hds-accordion-item-gap: 12px; + --hds-accordion-item-icon-size: 24px; +} + +.hds-accordion-item--type-card { + --hds-accordion-item-focus-ring-offset: 0; + background: var(--token-color-surface-primary); + border-radius: 6px; +} +.hds-accordion-item--type-card.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) { + box-shadow: var(--token-surface-mid-box-shadow); +} +.hds-accordion-item--type-card.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static):hover, .hds-accordion-item--type-card.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static).mock-hover { + box-shadow: var(--token-surface-high-box-shadow); +} +.hds-accordion-item--type-card.hds-accordion-item--contains-interactive, .hds-accordion-item--type-card.hds-accordion-item--is-static { + box-shadow: var(--token-surface-base-box-shadow); +} + +.hds-accordion-item--type-flush { + --hds-accordion-item-focus-ring-offset: 3px; + border-bottom: 1px solid var(--token-color-border-primary); +} +.hds-accordion-item--type-flush.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle:hover .hds-accordion-item__toggle, .hds-accordion-item--type-flush.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle.mock-hover .hds-accordion-item__toggle { + background: var(--token-color-surface-interactive-hover); +} +.hds-accordion-item--type-flush.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle:active .hds-accordion-item__toggle, .hds-accordion-item--type-flush.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) > .hds-disclosure-primitive__toggle.mock-active .hds-accordion-item__toggle { + background: var(--token-color-surface-interactive-active); +} + +.hds-accordion-item__toggle { + position: relative; + display: flex; + gap: var(--hds-accordion-item-gap); + align-items: center; + padding: var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding) var(--hds-accordion-item-toggle-padding-left); +} + +.hds-accordion-item__button { + padding: 0; +} +.hds-accordion-item__button:hover { + cursor: pointer; +} +@media (prefers-reduced-motion: no-preference) { + .hds-accordion-item__button .hds-icon { + transition: transform 0.3s; + } +} +.hds-accordion-item--is-static.hds-accordion-item .hds-accordion-item__button { + visibility: hidden; +} + +.hds-accordion-item__button--parent-does-not-contain-interactive { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; + position: static; + display: flex; + align-items: center; + justify-content: center; + margin: -1px 0; + color: var(--token-color-foreground-primary); + background: transparent; + border: 0; +} +.hds-accordion-item__button--parent-does-not-contain-interactive::before { + position: absolute; + top: var(--hds-accordion-item-focus-ring-offset); + right: var(--hds-accordion-item-focus-ring-offset); + bottom: var(--hds-accordion-item-focus-ring-offset); + left: var(--hds-accordion-item-focus-ring-offset); + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-accordion-item__button--parent-does-not-contain-interactive:focus::before, .hds-accordion-item__button--parent-does-not-contain-interactive.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-accordion-item__button--parent-does-not-contain-interactive:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-accordion-item__button--parent-does-not-contain-interactive:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-accordion-item__button--parent-does-not-contain-interactive:focus:active::before, .hds-accordion-item__button--parent-does-not-contain-interactive.mock-focus.mock-active::before { + box-shadow: none; +} + +.hds-accordion-item__button--parent-contains-interactive { + position: relative; + display: flex; + gap: var(--token-button-gap); + align-items: center; + justify-content: center; + width: auto; + font-weight: var(--token-button-font-weight); + font-family: var(--token-button-font-family); + text-decoration: none; + border: var(--token-button-border-width) solid transparent; + border-radius: var(--token-button-border-radius); + outline-style: solid; + outline-color: transparent; + isolation: isolate; + color: var(--token-button-secondary-foreground-default); + background-color: var(--token-button-secondary-surface-default); + border-color: var(--token-button-secondary-border-color-default); + box-shadow: var(--token-button-secondary-box-shadow-default); +} +.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus { + box-shadow: var(--token-button-box-shadow-focus); +} +.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before { + position: absolute; + top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + z-index: -1; + border: var(--token-button-focus-border-width) solid transparent; + border-radius: var(--token-button-focus-border-radius); + content: ""; +} +.hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button--parent-contains-interactive.mock-hover { + color: var(--token-button-secondary-foreground-hover); + background-color: var(--token-button-secondary-surface-hover); + border-color: var(--token-button-secondary-border-color-hover); + cursor: pointer; +} +.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button--parent-contains-interactive.mock-focus { + color: var(--token-button-secondary-foreground-focus); + background-color: var(--token-button-secondary-surface-focus); + border-color: var(--token-button-secondary-border-color-focus); + box-shadow: var(--token-button-secondary-box-shadow-focus); +} +.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button--parent-contains-interactive.mock-focus::before { + border-color: var(--token-color-focus-action-external); +} +.hds-accordion-item__button--parent-contains-interactive:active, .hds-accordion-item__button--parent-contains-interactive.mock-active { + color: var(--token-button-secondary-foreground-active); + background-color: var(--token-button-secondary-surface-active); + border-color: var(--token-button-secondary-border-color-active); + box-shadow: var(--token-button-secondary-box-shadow-active); +} +.hds-accordion-item__button--parent-contains-interactive:active::before, .hds-accordion-item__button--parent-contains-interactive.mock-active::before { + border-color: transparent; +} + +.hds-accordion-item__button { + width: var(--hds-accordion-item-icon-size); + height: var(--hds-accordion-item-icon-size); +} + +.hds-accordion-item__button--is-open .hds-icon-chevron-down { + transform: rotate(-180deg); +} + +.hds-accordion-item__toggle-content { + flex: 1; +} + +.hds-accordion-item .hds-accordion-item__content { + padding: var(--hds-accordion-item-content-padding-top) var(--hds-accordion-item-content-padding-right) var(--hds-accordion-item-content-padding-bottom) var(--hds-accordion-item-content-padding-left); +} + +.hds-accordion-item--type-flush .hds-accordion-item__content:has(> .hds-accordion--type-flush) { + padding: 0 var(--hds-accordion-item-content-padding-right) 0 var(--hds-accordion-item-content-padding-left); + border-top: 1px solid var(--token-color-border-primary); +} +.hds-accordion-item--type-flush .hds-accordion-item__content:has(> .hds-accordion--type-flush) .hds-accordion-item--type-flush:last-child { + border-bottom: none; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-alert { + display: flex; + align-items: flex-start; +} + +.hds-alert__icon { + flex: none; + width: 20px; + height: 20px; + margin-right: 12px; +} +.hds-alert--type-compact .hds-alert__icon { + width: 14px; + height: 14px; +} + +.hds-alert__content { + flex: 1 1 auto; +} + +.hds-alert__text { + display: flex; + flex-direction: column; + gap: 4px; + justify-content: center; + color: var(--token-color-foreground-warning-on-surface); +} + +.hds-alert__description { + word-break: break-word; +} +.hds-alert__description strong { + font-weight: var(--token-typography-font-weight-semibold); +} +.hds-alert__description code, +.hds-alert__description pre { + display: inline; + padding: 1px 5px; + font-size: 0.9em; + font-family: var(--token-typography-code-100-font-family); + line-height: 1em; + background-color: var(--token-color-surface-primary); + border: 1px solid var(--token-color-palette-neutral-200); + border-radius: 5px; +} +.hds-alert__description a:not([class*=hds-]) { + color: var(--token-color-foreground-strong); +} +.hds-alert__description a:not([class*=hds-]):focus, .hds-alert__description a:not([class*=hds-]):focus-visible { + text-decoration: none; + outline: 2px solid var(--token-color-focus-action-internal); + outline-offset: 1px; +} +.hds-alert__description a:not([class*=hds-]):hover { + color: var(--token-color-foreground-primary); +} +.hds-alert__description a:not([class*=hds-]):active { + color: var(--token-color-foreground-faint); +} + +.hds-alert__actions { + display: flex; + gap: 16px; + align-items: center; +} +.hds-alert__actions > * { + margin-top: 16px; +} + +.hds-alert__dismiss { + margin-top: 2px; + margin-left: 16px; +} +.hds-alert--type-compact .hds-alert__dismiss { + margin-top: 1px; +} + +.hds-alert--type-page { + padding: 16px 48px; +} + +.hds-alert--type-inline { + padding: 16px; + border-style: solid; + border-width: 1px; + border-radius: 6px; +} + +.hds-alert--type-compact .hds-alert__icon { + margin-top: 2px; + margin-right: 8px; +} +.hds-alert--type-compact .hds-alert__title { + display: none; +} +.hds-alert--type-compact .hds-alert__title + .hds-alert__description { + margin-top: 0; +} + +.hds-alert--color-neutral.hds-alert--type-page { + background-color: var(--token-color-surface-faint); + box-shadow: 0 1px 0 0 var(--token-color-palette-alpha-300); +} +.hds-alert--color-neutral.hds-alert--type-inline { + background-color: var(--token-color-surface-faint); + border-color: var(--token-color-border-strong); +} +.hds-alert--color-neutral .hds-alert__icon { + color: var(--token-color-foreground-faint); +} +.hds-alert--color-neutral .hds-alert__title { + color: var(--token-color-foreground-primary); +} + +.hds-alert--color-highlight.hds-alert--type-page { + background-color: var(--token-color-surface-highlight); + box-shadow: 0 1px 0 0 var(--token-color-border-highlight); +} +.hds-alert--color-highlight.hds-alert--type-inline { + background-color: var(--token-color-surface-highlight); + border-color: var(--token-color-border-highlight); +} +.hds-alert--color-highlight .hds-alert__icon, +.hds-alert--color-highlight .hds-alert__title { + color: var(--token-color-foreground-highlight-on-surface); +} + +.hds-alert--color-success.hds-alert--type-page { + background-color: var(--token-color-surface-success); + box-shadow: 0 1px 0 0 var(--token-color-border-success); +} +.hds-alert--color-success.hds-alert--type-inline { + background-color: var(--token-color-surface-success); + border-color: var(--token-color-border-success); +} +.hds-alert--color-success .hds-alert__icon, +.hds-alert--color-success .hds-alert__title { + color: var(--token-color-foreground-success-on-surface); +} + +.hds-alert--color-warning.hds-alert--type-page { + background-color: var(--token-color-surface-warning); + box-shadow: 0 1px 0 0 var(--token-color-border-warning); +} +.hds-alert--color-warning.hds-alert--type-inline { + background-color: var(--token-color-surface-warning); + border-color: var(--token-color-border-warning); +} +.hds-alert--color-warning .hds-alert__icon, +.hds-alert--color-warning .hds-alert__title { + color: var(--token-color-foreground-warning-on-surface); +} + +.hds-alert--color-critical.hds-alert--type-page { + background-color: var(--token-color-surface-critical); + box-shadow: 0 1px 0 0 var(--token-color-border-critical); +} +.hds-alert--color-critical.hds-alert--type-inline { + background-color: var(--token-color-surface-critical); + border-color: var(--token-color-border-critical); +} +.hds-alert--color-critical .hds-alert__icon, +.hds-alert--color-critical .hds-alert__title { + color: var(--token-color-foreground-critical-on-surface); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-app-footer { + display: flex; + flex-wrap: wrap; + gap: 24px; + justify-content: center; + padding: 24px; + color: var(--app-footer-foreground-color); + border-top: 1px solid var(--app-footer-border-top-color); +} + +.hds-app-footer__list:not(:has(li)) { + display: none; +} + +.hds-app-footer__list, +.hds-app-footer__legal-links { + display: flex; + flex-wrap: wrap; + gap: 24px; + align-items: center; + justify-content: center; + width: fit-content; + min-width: 0; + margin: 0; + padding: 0; + list-style-type: none; +} + +.hds-app-footer__status-link.hds-link-inline--icon-leading > .hds-link-inline__icon { + margin-right: 6px; +} +.hds-app-footer__status-link .hds-icon { + fill: var(--hds-app-footer-status-icon-color, currentColor); +} + +.hds-app-footer__status-link--operational .hds-icon { + fill: var(--app-footer-status-link-icon-operational-color); +} + +.hds-app-footer__status-link--degraded .hds-icon { + fill: var(--app-footer-status-link-icon-degraded-color); +} + +.hds-app-footer__status-link--maintenance .hds-icon { + fill: var(--app-footer-status-link-icon-maintenance-color); +} + +.hds-app-footer__status-link--outage .hds-icon { + fill: var(--app-footer-status-link-icon-outage-color); +} + +.hds-app-footer__link.hds-link-inline--color-secondary, +.hds-app-footer__status-link { + color: var(--app-footer-link-default-color); + text-align: right; +} +.hds-app-footer__link.hds-link-inline--color-secondary:hover, .hds-app-footer__link.hds-link-inline--color-secondary.mock-hover, +.hds-app-footer__status-link:hover, +.hds-app-footer__status-link.mock-hover { + color: var(--app-footer-link-hover-color); +} +.hds-app-footer__link.hds-link-inline--color-secondary:active, .hds-app-footer__link.hds-link-inline--color-secondary.mock-active, +.hds-app-footer__status-link:active, +.hds-app-footer__status-link.mock-active { + color: var(--app-footer-link-active-color); +} +.hds-app-footer__link.hds-link-inline--color-secondary:focus, .hds-app-footer__link.hds-link-inline--color-secondary.mock-focus, .hds-app-footer__link.hds-link-inline--color-secondary:focus-visible, +.hds-app-footer__status-link:focus, +.hds-app-footer__status-link.mock-focus, +.hds-app-footer__status-link:focus-visible { + color: var(--app-footer-link-focus-color); + outline-color: var(--app-footer-link-focus-outline-color); +} + +.hds-app-footer__list-item { + display: flex; + align-items: center; +} + +.hds-app-footer__copyright { + display: flex; + gap: 6px; + align-items: center; + color: var(--app-footer-copyright-text-color); +} +.hds-app-footer__copyright .hds-icon { + fill: var(--app-footer-copyright-icon-color); +} + +.hds-app-footer--theme-light { + --app-footer-foreground-color: var(--token-color-foreground-primary); + --app-footer-border-top-color: var(--token-color-border-primary); + --app-footer-link-default-color: var(--token-color-foreground-faint); + --app-footer-link-hover-color: var(--token-color-palette-neutral-600); + --app-footer-link-active-color: var(--token-color-palette-neutral-700); + --app-footer-link-focus-color: var(--token-color-foreground-faint); + --app-footer-link-focus-outline-color: var(--token-color-focus-action-internal); + --app-footer-copyright-text-color: var(--token-color-foreground-primary); + --app-footer-copyright-icon-color: var(--token-color-hashicorp-brand); + --app-footer-status-link-icon-operational-color: var(--token-color-foreground-success); + --app-footer-status-link-icon-degraded-color: var(--token-color-foreground-warning); + --app-footer-status-link-icon-maintenance-color: var(--token-color-foreground-warning); + --app-footer-status-link-icon-outage-color: var(--token-color-foreground-critical); +} + +.hds-app-footer--theme-dark { + --app-footer-foreground-color: #b2b6bd; + --app-footer-border-top-color: #b2b6bd66; + --app-footer-link-default-color: #b2b6bd; + --app-footer-link-hover-color: #d5d7db; + --app-footer-link-active-color: #efeff1; + --app-footer-link-focus-color: #b2b6bd; + --app-footer-link-focus-outline-color: #389aff; + --app-footer-copyright-text-color: #b2b6bd; + --app-footer-copyright-icon-color: #fff; + --app-footer-status-link-icon-operational-color: #009241; + --app-footer-status-link-icon-degraded-color: #e88c03; + --app-footer-status-link-icon-maintenance-color: #e88c03; + --app-footer-status-link-icon-outage-color: #ef3016; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-app-frame { + display: grid; + grid-template-areas: "header header" "sidebar main" "sidebar footer"; + grid-template-rows: auto 1fr auto; + grid-template-columns: auto 1fr; + min-height: 100vh; +} + +.hds-app-frame__header { + z-index: 21; + grid-area: header; +} +@media (height >= 480px) { + .hds-app-frame__header { + position: sticky; + top: 0; + right: 0; + left: 0; + } +} + +.hds-app-frame__sidebar { + position: sticky; + top: 0; + z-index: 20; + grid-area: sidebar; + height: 100vh; + min-height: 100vh; +} +@media (height >= 480px) { + .hds-app-frame--has-header-with-sidebar .hds-app-frame__sidebar { + top: var(--token-app-header-height); + height: calc(100vh - var(--token-app-header-height)); + min-height: calc(100vh - var(--token-app-header-height)); + } +} + +.hds-app-frame__main { + grid-area: main; +} +.hds-app-frame--has-header-with-sidebar .hds-app-frame__main { + margin-top: calc(var(--token-app-header-height) * -1); + padding-top: var(--token-app-header-height); +} + +.hds-app-frame__footer { + grid-area: footer; +} + +.hds-app-frame__modals { + position: fixed; + top: 0; + left: 0; + z-index: 100; + width: 100vw; + height: 100vh; + pointer-events: none; +} +.hds-app-frame__modals:empty { + display: none; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-application-state { + display: flex; + flex-direction: column; + align-items: start; + width: fit-content; + margin: 0 auto; +} +.hds-application-state.hds-application-state--align-center { + align-items: center; + text-align: center; +} +.hds-application-state.hds-application-state--align-center .hds-application-state__header, +.hds-application-state.hds-application-state--align-center .hds-application-state__body, +.hds-application-state.hds-application-state--align-center .hds-application-state__footer { + width: auto; +} + +.hds-application-state__media { + margin-bottom: 32px; +} +.hds-application-state__media > * { + display: block; + max-width: 100%; +} + +.hds-application-state__header { + display: grid; + grid-template-areas: "error error" "icon title"; + grid-template-columns: min-content 1fr; + align-items: center; + width: 100%; + max-width: 480px; + color: var(--token-color-foreground-strong); +} + +.hds-application-state__error-code { + grid-area: error; + margin-bottom: 4px; +} + +.hds-application-state__icon { + grid-area: icon; + margin-right: 8px; + padding-top: 4px; +} + +.hds-application-state__title { + grid-row: 2; + font-weight: var(--token-typography-font-weight-semibold); +} +.hds-application-state__title:not(.hds-application-state__icon + .hds-application-state__title) { + grid-column: icon/title; +} + +.hds-application-state__body { + width: 100%; + max-width: 480px; + margin: 12px 0 0; + color: var(--token-color-foreground-primary); +} + +.hds-application-state__footer { + display: flex; + gap: 16px; + width: 100%; + max-width: 480px; + margin-top: 24px; +} +.hds-application-state__footer > :nth-child(3) { + margin-left: auto; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-badge { + display: inline-flex; + align-items: center; + max-width: 100%; + vertical-align: middle; + border: var(--token-badge-border-width) solid transparent; + border-radius: var(--token-badge-border-radius); +} + +.hds-badge__icon { + display: block; + flex: 0 0 auto; +} + +.hds-badge__text { + flex: 1 0 0; + font-weight: var(--token-badge-font-weight); + font-family: var(--token-badge-font-family); +} + +.hds-badge--size-small { + gap: var(--token-badge-gap-small); + min-height: var(--token-badge-height-small); + padding: var(--token-badge-padding-vertical-small) var(--token-badge-padding-horizontal-small); +} +.hds-badge--size-small .hds-badge__icon { + width: var(--token-badge-icon-size-small); + height: var(--token-badge-icon-size-small); +} +.hds-badge--size-small .hds-badge__text { + font-size: var(--token-badge-font-size-small); + line-height: var(--token-badge-line-height-small); +} + +.hds-badge--size-medium { + gap: var(--token-badge-gap-medium); + min-height: var(--token-badge-height-medium); + padding: var(--token-badge-padding-vertical-medium) var(--token-badge-padding-horizontal-medium); +} +.hds-badge--size-medium .hds-badge__icon { + width: var(--token-badge-icon-size-medium); + height: var(--token-badge-icon-size-medium); +} +.hds-badge--size-medium .hds-badge__text { + font-size: var(--token-badge-font-size-medium); + line-height: var(--token-badge-line-height-medium); +} + +.hds-badge--size-large { + gap: var(--token-badge-gap-large); + min-height: var(--token-badge-height-large); + padding: var(--token-badge-padding-vertical-large) var(--token-badge-padding-horizontal-large); +} +.hds-badge--size-large .hds-badge__icon { + width: var(--token-badge-icon-size-large); + height: var(--token-badge-icon-size-large); +} +.hds-badge--size-large .hds-badge__text { + font-size: var(--token-badge-font-size-large); + line-height: var(--token-badge-line-height-large); +} + +.hds-badge--color-neutral.hds-badge--type-filled { + color: var(--token-badge-filled-neutral-foreground-color); + background-color: var(--token-badge-filled-neutral-background-color); +} +.hds-badge--color-neutral.hds-badge--type-inverted { + color: var(--token-badge-inverted-neutral-foreground-color); + background-color: var(--token-badge-inverted-neutral-background-color); +} +.hds-badge--color-neutral.hds-badge--type-outlined { + color: var(--token-badge-outlined-neutral-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-neutral-border-color); +} + +.hds-badge--color-neutral-dark-mode.hds-badge--type-filled { + color: var(--token-badge-filled-neutral-dark-mode-foreground-color); + background-color: var(--token-badge-filled-neutral-dark-mode-background-color); +} +.hds-badge--color-neutral-dark-mode.hds-badge--type-inverted { + color: var(--token-badge-inverted-neutral-dark-mode-foreground-color); + background-color: var(--token-badge-inverted-neutral-dark-mode-background-color); +} +.hds-badge--color-neutral-dark-mode.hds-badge--type-outlined { + color: var(--token-badge-outlined-neutral-dark-mode-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-neutral-dark-mode-border-color); +} + +.hds-badge--color-highlight.hds-badge--type-filled { + color: var(--token-badge-filled-highlight-foreground-color); + background-color: var(--token-badge-filled-highlight-background-color); +} +.hds-badge--color-highlight.hds-badge--type-inverted { + color: var(--token-badge-inverted-highlight-foreground-color); + background-color: var(--token-badge-inverted-highlight-background-color); +} +.hds-badge--color-highlight.hds-badge--type-outlined { + color: var(--token-badge-outlined-highlight-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-highlight-border-color); +} + +.hds-badge--color-success.hds-badge--type-filled { + color: var(--token-badge-filled-success-foreground-color); + background-color: var(--token-badge-filled-success-background-color); +} +.hds-badge--color-success.hds-badge--type-inverted { + color: var(--token-badge-inverted-success-foreground-color); + background-color: var(--token-badge-inverted-success-background-color); +} +.hds-badge--color-success.hds-badge--type-outlined { + color: var(--token-badge-outlined-success-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-success-border-color); +} + +.hds-badge--color-warning.hds-badge--type-filled { + color: var(--token-badge-filled-warning-foreground-color); + background-color: var(--token-badge-filled-warning-background-color); +} +.hds-badge--color-warning.hds-badge--type-inverted { + color: var(--token-badge-inverted-warning-foreground-color); + background-color: var(--token-badge-inverted-warning-background-color); +} +.hds-badge--color-warning.hds-badge--type-outlined { + color: var(--token-badge-outlined-warning-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-warning-border-color); +} + +.hds-badge--color-critical.hds-badge--type-filled { + color: var(--token-badge-filled-critical-foreground-color); + background-color: var(--token-badge-filled-critical-background-color); +} +.hds-badge--color-critical.hds-badge--type-inverted { + color: var(--token-badge-inverted-critical-foreground-color); + background-color: var(--token-badge-inverted-critical-background-color); +} +.hds-badge--color-critical.hds-badge--type-outlined { + color: var(--token-badge-outlined-critical-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-critical-border-color); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-badge-count { + display: inline-flex; + align-items: center; + max-width: 100%; + font-weight: var(--token-badge-font-weight); + font-family: var(--token-badge-font-family); + border: var(--token-badge-border-width) solid transparent; +} + +.hds-badge-count--size-small { + min-height: var(--token-badge-height-small); + padding: var(--token-badge-padding-vertical-small) var(--token-badge-count-padding-horizontal-small); + font-size: var(--token-badge-font-size-small); + line-height: var(--token-badge-line-height-small); + border-radius: calc(var(--token-badge-height-small) / 2); +} + +.hds-badge-count--size-medium { + min-height: var(--token-badge-height-medium); + padding: var(--token-badge-padding-vertical-medium) var(--token-badge-count-padding-horizontal-medium); + font-size: var(--token-badge-font-size-medium); + line-height: var(--token-badge-line-height-medium); + border-radius: calc(var(--token-badge-height-medium) / 2); +} + +.hds-badge-count--size-large { + min-height: var(--token-badge-height-large); + padding: var(--token-badge-padding-vertical-large) var(--token-badge-count-padding-horizontal-large); + font-size: var(--token-badge-font-size-large); + line-height: var(--token-badge-line-height-large); + border-radius: calc(var(--token-badge-height-large) / 2); +} + +.hds-badge-count--color-neutral.hds-badge-count--type-filled { + color: var(--token-badge-filled-neutral-foreground-color); + background-color: var(--token-badge-filled-neutral-background-color); +} +.hds-badge-count--color-neutral.hds-badge-count--type-inverted { + color: var(--token-badge-inverted-neutral-foreground-color); + background-color: var(--token-badge-inverted-neutral-background-color); +} +.hds-badge-count--color-neutral.hds-badge-count--type-outlined { + color: var(--token-badge-outlined-neutral-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-neutral-border-color); +} + +.hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-filled { + color: var(--token-badge-filled-neutral-dark-mode-foreground-color); + background-color: var(--token-badge-filled-neutral-dark-mode-background-color); +} +.hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-inverted { + color: var(--token-badge-inverted-neutral-dark-mode-foreground-color); + background-color: var(--token-badge-inverted-neutral-dark-mode-background-color); +} +.hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-outlined { + color: var(--token-badge-outlined-neutral-dark-mode-foreground-color); + background-color: transparent; + border-color: var(--token-badge-outlined-neutral-dark-mode-border-color); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-breadcrumb { + position: relative; +} + +.hds-breadcrumb__list { + display: flex; + margin: 0; + padding: 0; + list-style: none; +} +.hds-breadcrumb--items-can-wrap .hds-breadcrumb__list { + flex-wrap: wrap; +} + +.hds-breadcrumb__sublist { + margin: 0; + padding: 0; + list-style: none; +} + +.hds-breadcrumb__item { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + min-width: 0; +} +.hds-breadcrumb__list > .hds-breadcrumb__item:not(:last-child)::after { + padding: 0 8px; + color: var(--token-color-palette-neutral-300); + content: "/"; +} +.hds-breadcrumb__sublist > .hds-breadcrumb__item + .hds-breadcrumb__item { + margin-top: 4px; +} + +.hds-breadcrumb__item--is-truncation { + flex: none; +} + +.hds-breadcrumb__link { + display: flex; + flex-direction: row; + align-items: center; + min-width: 0; + margin: 0 -4px; + padding: 0 4px; + color: var(--token-color-foreground-faint); + border-radius: 5px; + text-decoration-color: transparent; + outline-style: solid; + outline-color: transparent; +} +.hds-breadcrumb__link:hover, .hds-breadcrumb__link.mock-hover { + color: var(--token-color-palette-neutral-600); +} +.hds-breadcrumb__link:hover > .hds-breadcrumb__text, .hds-breadcrumb__link.mock-hover > .hds-breadcrumb__text { + text-decoration-color: currentColor; +} +.hds-breadcrumb__link:focus, .hds-breadcrumb__link.mock-focus { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-breadcrumb__link:focus:not(:focus-visible) { + box-shadow: none; +} +.hds-breadcrumb__link:focus-visible { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-breadcrumb__link:focus:active, .hds-breadcrumb__link.mock-focus.mock-active { + box-shadow: none; +} +.hds-breadcrumb__link:active, .hds-breadcrumb__link.mock-active { + color: var(--token-color-foreground-secondary); +} +.hds-breadcrumb__link:active > .hds-breadcrumb__text, .hds-breadcrumb__link.mock-active > .hds-breadcrumb__text { + text-decoration-color: currentColor; +} + +.hds-breadcrumb__current { + display: flex; + flex-direction: row; + align-items: center; + min-width: 0; + margin: 0 -4px; + padding: 0 4px; + color: var(--token-color-foreground-strong); +} + +.hds-breadcrumb__icon { + flex: none; + width: 13px; + height: 13px; + margin-right: 6px; +} + +.hds-breadcrumb__text { + padding: calc((28px - 1rem) / 2) 0; + overflow: hidden; + font-size: 0.8125rem; + font-family: var(--token-typography-font-stack-text); + line-height: 1rem; + white-space: nowrap; + text-decoration: underline; + text-overflow: ellipsis; + text-decoration-color: transparent; +} +.hds-breadcrumb__sublist .hds-breadcrumb__text { + white-space: normal; +} + +.hds-breadcrumb__truncation-toggle { + display: flex; + flex: none; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + margin: 0 -4px; + padding: 0; + color: var(--token-color-foreground-faint); + background-color: transparent; + border: 1px solid transparent; + border-radius: 5px; + outline: none; + cursor: pointer; + outline-style: solid; + outline-color: transparent; +} +.hds-breadcrumb__truncation-toggle:hover, .hds-breadcrumb__truncation-toggle.mock-hover { + color: var(--token-color-foreground-faint); + background-color: var(--token-color-surface-interactive); + border-color: var(--token-color-border-strong); +} +.hds-breadcrumb__truncation-toggle:focus, .hds-breadcrumb__truncation-toggle.mock-focus { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-breadcrumb__truncation-toggle:focus:not(:focus-visible) { + box-shadow: none; +} +.hds-breadcrumb__truncation-toggle:focus-visible { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-breadcrumb__truncation-toggle:focus:active, .hds-breadcrumb__truncation-toggle.mock-focus.mock-active { + box-shadow: none; +} +.hds-breadcrumb__truncation-toggle:focus, .hds-breadcrumb__truncation-toggle.mock-focus { + background-color: transparent; + border: none; +} +.hds-breadcrumb__truncation-toggle:active, .hds-breadcrumb__truncation-toggle.mock-active { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-border-strong); +} + +.hds-breadcrumb__truncation-content { + position: relative; + width: max-content; + max-width: 200px; + padding: 6px 12px; + background-color: var(--token-color-surface-primary); + border-radius: 6px; + box-shadow: var(--token-surface-high-box-shadow); +} +:where(.hds-breadcrumb__truncation-content[popover]) { + width: fit-content; + height: fit-content; + margin: 0; + padding: 0; + overflow: visible; + color: inherit; + background: none; + border: none; + inset: 0; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-button { + position: relative; + display: flex; + gap: var(--token-button-gap); + align-items: center; + justify-content: center; + width: auto; + font-weight: var(--token-button-font-weight); + font-family: var(--token-button-font-family); + text-decoration: none; + border: var(--token-button-border-width) solid transparent; + border-radius: var(--token-button-border-radius); + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +a.hds-button { + width: fit-content; +} +a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-hover, a.hds-button.mock-focus, a.hds-button.mock-active { + text-decoration: underline; +} + +.hds-button:disabled, .hds-button[disabled], .hds-button.mock-disabled, .hds-button:disabled:focus, .hds-button[disabled]:focus, .hds-button.mock-disabled:focus, .hds-button:disabled:hover, .hds-button[disabled]:hover, .hds-button.mock-disabled:hover { + color: var(--token-button-disabled-foreground); + background-color: var(--token-button-disabled-surface); + border-color: var(--token-button-disabled-border-color); + box-shadow: var(--token-button-disabled-box-shadow); + cursor: not-allowed; +} +.hds-button:disabled::before, .hds-button[disabled]::before, .hds-button.mock-disabled::before, .hds-button:disabled:focus::before, .hds-button[disabled]:focus::before, .hds-button.mock-disabled:focus::before, .hds-button:disabled:hover::before, .hds-button[disabled]:hover::before, .hds-button.mock-disabled:hover::before { + border-color: transparent; +} +.hds-button.hds-button--width-full { + width: 100%; + max-width: 100%; +} +.hds-button.hds-button--width-full .hds-button__text { + flex: 0 0 auto; +} +.hds-button:focus, .hds-button.mock-focus { + box-shadow: var(--token-button-box-shadow-focus); +} +.hds-button:focus::before, .hds-button.mock-focus::before { + position: absolute; + top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + z-index: -1; + border: var(--token-button-focus-border-width) solid transparent; + border-radius: var(--token-button-focus-border-radius); + content: ""; +} + +.hds-button__icon { + display: block; +} + +.hds-button__text { + display: block; + flex: 1 0 0; + text-align: center; +} + +.hds-button--color-primary { + color: var(--token-button-primary-foreground-default); + background-color: var(--token-button-primary-surface-default); + border-color: var(--token-token-button-primary-border-color-default); + box-shadow: var(--token-button-primary-box-shadow-default); +} +.hds-button--color-primary:hover, .hds-button--color-primary.mock-hover { + color: var(--token-button-primary-foreground-hover); + background-color: var(--token-button-primary-surface-hover); + border-color: var(--token-token-button-primary-border-color-hover); + cursor: pointer; +} +.hds-button--color-primary:focus, .hds-button--color-primary.mock-focus { + color: var(--token-button-primary-foreground-focus); + background-color: var(--token-button-primary-surface-focus); + border-color: var(--token-token-button-primary-border-color-focus); + box-shadow: var(--token-button-primary-box-shadow-focus); +} +.hds-button--color-primary:focus::before, .hds-button--color-primary.mock-focus::before { + top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + border-color: var(--token-color-focus-action-external); + border-radius: var(--token-button-border-radius); +} +.hds-button--color-primary:active, .hds-button--color-primary.mock-active { + color: var(--token-button-primary-foreground-active); + background-color: var(--token-button-primary-surface-active); + border-color: var(--token-token-button-primary-border-color-active); + box-shadow: var(--token-button-primary-box-shadow-active); +} +.hds-button--color-primary:active::before, .hds-button--color-primary.mock-active::before { + border-color: transparent; +} + +.hds-button--color-secondary { + color: var(--token-button-secondary-foreground-default); + background-color: var(--token-button-secondary-surface-default); + border-color: var(--token-button-secondary-border-color-default); + box-shadow: var(--token-button-secondary-box-shadow-default); +} +.hds-button--color-secondary:hover, .hds-button--color-secondary.mock-hover { + color: var(--token-button-secondary-foreground-hover); + background-color: var(--token-button-secondary-surface-hover); + border-color: var(--token-button-secondary-border-color-hover); + cursor: pointer; +} +.hds-button--color-secondary:focus, .hds-button--color-secondary.mock-focus { + color: var(--token-button-secondary-foreground-focus); + background-color: var(--token-button-secondary-surface-focus); + border-color: var(--token-button-secondary-border-color-focus); + box-shadow: var(--token-button-secondary-box-shadow-focus); +} +.hds-button--color-secondary:focus::before, .hds-button--color-secondary.mock-focus::before { + border-color: var(--token-color-focus-action-external); +} +.hds-button--color-secondary:active, .hds-button--color-secondary.mock-active { + color: var(--token-button-secondary-foreground-active); + background-color: var(--token-button-secondary-surface-active); + border-color: var(--token-button-secondary-border-color-active); + box-shadow: var(--token-button-secondary-box-shadow-active); +} +.hds-button--color-secondary:active::before, .hds-button--color-secondary.mock-active::before { + border-color: transparent; +} + +.hds-button--color-tertiary { + color: var(--token-button-tertiary-foreground-default); + background-color: var(--token-button-tertiary-surface-default); + border-color: var(--token-button-tertiary-border-color-default); + box-shadow: var(--token-button-tertiary-box-shadow-default); +} +.hds-button--color-tertiary:hover, .hds-button--color-tertiary.mock-hover { + color: var(--token-button-tertiary-foreground-hover); + background-color: var(--token-button-tertiary-surface-hover); + border-color: var(--token-button-tertiary-border-color-hover); + cursor: pointer; +} +.hds-button--color-tertiary:focus, .hds-button--color-tertiary.mock-focus { + color: var(--token-button-tertiary-foreground-focus); + background-color: var(--token-button-tertiary-surface-focus); + border-color: var(--token-button-tertiary-border-color-focus); + box-shadow: var(--token-button-tertiary-box-shadow-focus); +} +.hds-button--color-tertiary:focus::before, .hds-button--color-tertiary.mock-focus::before { + border-color: var(--token-color-focus-action-external); +} +.hds-button--color-tertiary:active, .hds-button--color-tertiary.mock-active { + color: var(--token-button-tertiary-foreground-active); + background-color: var(--token-button-tertiary-surface-active); + border-color: var(--token-button-tertiary-border-color-active); + box-shadow: var(--token-button-tertiary-box-shadow-active); +} +.hds-button--color-tertiary:active::before, .hds-button--color-tertiary.mock-active::before { + border-color: transparent; +} +.hds-button--color-tertiary:disabled, .hds-button--color-tertiary[disabled], .hds-button--color-tertiary.mock-disabled, .hds-button--color-tertiary:disabled:focus, .hds-button--color-tertiary[disabled]:focus, .hds-button--color-tertiary.mock-disabled:focus, .hds-button--color-tertiary:disabled:hover, .hds-button--color-tertiary[disabled]:hover, .hds-button--color-tertiary.mock-disabled:hover { + background-color: transparent; + border-color: transparent; +} +.hds-button--color-tertiary:disabled::before, .hds-button--color-tertiary[disabled]::before, .hds-button--color-tertiary.mock-disabled::before, .hds-button--color-tertiary:disabled:focus::before, .hds-button--color-tertiary[disabled]:focus::before, .hds-button--color-tertiary.mock-disabled:focus::before, .hds-button--color-tertiary:disabled:hover::before, .hds-button--color-tertiary[disabled]:hover::before, .hds-button--color-tertiary.mock-disabled:hover::before { + border-color: transparent; +} + +.hds-button--color-critical { + color: var(--token-button-critical-foreground-default); + background-color: var(--token-button-critical-surface-default); + border-color: var(--token-button-critical-border-color-default); + box-shadow: var(--token-button-critical-box-shadow-default); +} +.hds-button--color-critical:hover, .hds-button--color-critical.mock-hover { + color: var(--token-button-critical-foreground-hover); + background-color: var(--token-button-critical-surface-hover); + border-color: var(--token-button-critical-border-color-hover); + cursor: pointer; +} +.hds-button--color-critical:focus, .hds-button--color-critical.mock-focus { + color: var(--token-button-critical-foreground-focus); + background-color: var(--token-button-critical-surface-focus); + border-color: var(--token-button-critical-border-color-focus); + box-shadow: var(--token-button-critical-box-shadow-focus); +} +.hds-button--color-critical:focus::before, .hds-button--color-critical.mock-focus::before { + border-color: var(--token-color-focus-critical-external); +} +.hds-button--color-critical:active, .hds-button--color-critical.mock-active { + color: var(--token-button-critical-foreground-active); + background-color: var(--token-button-critical-surface-active); + border-color: var(--token-button-critical-border-color-active); + box-shadow: var(--token-button-critical-box-shadow-active); +} +.hds-button--color-critical:active::before, .hds-button--color-critical.mock-active::before { + border-color: transparent; +} + +.hds-button--size-small { + min-height: var(--token-button-height-small); + padding: var(--token-button-padding-vertical-small) var(--token-button-padding-horizontal-small); +} +.hds-button--size-small .hds-button__icon { + width: var(--token-button-icon-size-small); + height: var(--token-button-icon-size-small); +} +.hds-button--size-small .hds-button__text { + font-size: var(--token-button-font-size-small); + line-height: var(--token-button-line-height-small); +} +.hds-button--size-small.hds-button--is-icon-only { + min-width: var(--token-button-height-small); + padding-right: var(--token-button-padding-vertical-small); + padding-left: var(--token-button-padding-vertical-small); +} + +.hds-button--size-medium { + min-height: var(--token-button-height-medium); + padding: var(--token-button-padding-vertical-medium) var(--token-button-padding-horizontal-medium); +} +.hds-button--size-medium .hds-button__icon { + width: var(--token-button-icon-size-medium); + height: var(--token-button-icon-size-medium); +} +.hds-button--size-medium .hds-button__text { + font-size: var(--token-button-font-size-medium); + line-height: var(--token-button-line-height-medium); +} +.hds-button--size-medium.hds-button--is-icon-only { + min-width: var(--token-button-height-medium); + padding-right: var(--token-button-padding-vertical-medium); + padding-left: var(--token-button-padding-vertical-medium); +} + +.hds-button--size-large { + min-height: var(--token-button-height-large); + padding: var(--token-button-padding-vertical-large) var(--token-button-padding-horizontal-large); +} +.hds-button--size-large .hds-button__icon { + width: var(--token-button-icon-size-large); + height: var(--token-button-icon-size-large); +} +.hds-button--size-large .hds-button__text { + font-size: var(--token-button-font-size-large); + line-height: var(--token-button-line-height-large); +} +.hds-button--size-large.hds-button--is-icon-only { + min-width: var(--token-button-height-large); + padding-right: var(--token-button-padding-vertical-large); + padding-left: var(--token-button-padding-vertical-large); +} + +.hds-button--is-inline { + display: inline-flex; +} + +button.hds-button[href] { + color: white !important; + background-color: red !important; + border: none; +} +button.hds-button[href] .hds-button__text, button.hds-button[href]::before { + display: none; +} +button.hds-button[href]::after { + content: ' Attention: you’re passing a "href" attribute to the "Hds::Button" component, you should use an "@href" argument.'; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-button-set { + display: flex; + gap: 16px; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-card__container { + position: relative; + background-color: #fff; + border-radius: 6px; +} + +.hds-card__container--level-surface-base { + box-shadow: var(--token-surface-base-box-shadow); +} + +.hds-card__container--level-surface-mid { + box-shadow: var(--token-surface-mid-box-shadow); +} + +.hds-card__container--level-surface-high { + box-shadow: var(--token-surface-high-box-shadow); +} + +.hds-card__container--hover-level-surface-base:hover, +.hds-card__container--hover-level-surface-base.mock-hover { + box-shadow: var(--token-surface-base-box-shadow); +} + +.hds-card__container--hover-level-surface-mid:hover, +.hds-card__container--hover-level-surface-mid.mock-hover { + box-shadow: var(--token-surface-mid-box-shadow); +} + +.hds-card__container--hover-level-surface-high:hover, +.hds-card__container--hover-level-surface-high.mock-hover { + box-shadow: var(--token-surface-high-box-shadow); +} + +.hds-card__container--active-level-surface-base:active, +.hds-card__container--active-level-surface-base.mock-active { + box-shadow: var(--token-surface-base-box-shadow); +} + +.hds-card__container--active-level-surface-mid:active, +.hds-card__container--active-level-surface-mid.mock-active { + box-shadow: var(--token-surface-mid-box-shadow); +} + +.hds-card__container--active-level-surface-high:active, +.hds-card__container--active-level-surface-high.mock-active { + box-shadow: var(--token-surface-high-box-shadow); +} + +.hds-card__container--level-elevation-base { + box-shadow: var(--token-elevation-base-box-shadow); +} + +.hds-card__container--level-elevation-mid { + box-shadow: var(--token-elevation-mid-box-shadow); +} + +.hds-card__container--level-elevation-high { + box-shadow: var(--token-elevation-high-box-shadow); +} + +.hds-card__container--hover-level-elevation-base:hover, +.hds-card__container--hover-level-elevation-base.mock-hover { + box-shadow: var(--token-elevation-base-box-shadow); +} + +.hds-card__container--hover-level-elevation-mid:hover, +.hds-card__container--hover-level-elevation-mid.mock-hover { + box-shadow: var(--token-elevation-mid-box-shadow); +} + +.hds-card__container--hover-level-elevation-high:hover, +.hds-card__container--hover-level-elevation-high.mock-hover { + box-shadow: var(--token-elevation-high-box-shadow); +} + +.hds-card__container--active-level-elevation-base:active, +.hds-card__container--active-level-elevation-base.mock-active { + box-shadow: var(--token-elevation-base-box-shadow); +} + +.hds-card__container--active-level-elevation-mid:active, +.hds-card__container--active-level-elevation-mid.mock-active { + box-shadow: var(--token-elevation-mid-box-shadow); +} + +.hds-card__container--active-level-elevation-high:active, +.hds-card__container--active-level-elevation-high.mock-active { + box-shadow: var(--token-elevation-high-box-shadow); +} + +.hds-card__container--background-neutral-primary { + background-color: var(--token-color-surface-primary); +} + +.hds-card__container--background-neutral-secondary { + background-color: var(--token-color-surface-faint); +} + +.hds-card__container--overflow-hidden { + overflow: hidden; +} + +.hds-card__container--overflow-visible { + overflow: visible; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-code-block--theme-dark { + --hds-code-block-color-blue: #2d8eff; + --hds-code-block-color-cyan: #32fff7; + --hds-code-block-color-green: #86ff13; + --hds-code-block-color-orange: #ffa800; + --hds-code-block-color-purple: #c76cff; + --hds-code-block-color-red: #ff3b20; + --hds-code-block-color-foreground-primary: #d5d7db; + --hds-code-block-color-foreground-faint: #b2b6bd; + --hds-code-block-color-surface-primary: #0d0e12; + --hds-code-block-color-surface-faint: #15181e; + --hds-code-block-color-foreground-success: #009241; + --hds-code-block-color-foreground-critical: #ef3016; + --hds-code-block-color-foreground-interactive: #dedfe3; + --hds-code-block-color-foreground-interactive-hover: #fff; + --hds-code-block-color-foreground-interactive-active: #f1f2f3; + --hds-code-block-color-surface-interactive-active: #2b303c; + --hds-code-block-color-foreground-action: #2b89ff; + --hds-code-block-color-foreground-action-hover: #389aff; + --hds-code-block-color-foreground-action-active: #4ca1ff; + --hds-code-block-color-border-strong: rgba(178, 182, 189, 40%); + --hds-code-block-color-border-primary: rgba(178, 182, 189, 20%); + --hds-code-block-color-foreground-selection: #0d0e12; + --hds-code-block-color-surface-selection: #86ff13; + --hds-code-block-color-line-highlight: rgba(0, 74, 222, 20%); + --hds-code-block-color-line-highlight-border: #1555d4; + --hds-code-block-color-token: var(--hds-code-block-color-foreground-primary); + --hds-code-block-color-atrule: var(--hds-code-block-color-blue); + --hds-code-block-color-code-block-attr-name: var(--hds-code-block-color-blue); + --hds-code-block-color-attr-value: var(--hds-code-block-color-blue); + --hds-code-block-color-boolean: var(--hds-code-block-color-purple); + --hds-code-block-color-builtin: var(--hds-code-block-color-orange); + --hds-code-block-color-char: var(--hds-code-block-color-orange); + --hds-code-block-color-class-name: var(--hds-code-block-color-blue); + --hds-code-block-color-comment: var(--hds-code-block-color-foreground-faint); + --hds-code-block-color-control: var(--hds-code-block-color-cyan); + --hds-code-block-color-constant: var(--hds-code-block-color-purple); + --hds-code-block-color-deleted: var(--hds-code-block-color-red); + --hds-code-block-color-entity: var(--hds-code-block-color-green); + --hds-code-block-color-function: var(--hds-code-block-color-blue); + --hds-code-block-color-important: var(--hds-code-block-color-red); + --hds-code-block-color-keyword: var(--hds-code-block-color-green); + --hds-code-block-color-namespace: var(--hds-code-block-color-red); + --hds-code-block-color-number: var(--hds-code-block-color-purple); + --hds-code-block-color-operator: var(--hds-code-block-color-cyan); + --hds-code-block-color-prolog: var(--hds-code-block-color-foreground-primary); + --hds-code-block-color-property: var(--hds-code-block-color-blue); + --hds-code-block-color-punctuation: var(--hds-code-block-color-foreground-primary); + --hds-code-block-color-regex: var(--hds-code-block-color-orange); + --hds-code-block-color-script: var(--hds-code-block-color-foreground-primary); + --hds-code-block-color-selector: var(--hds-code-block-color-green); + --hds-code-block-color-string: var(--hds-code-block-color-orange); + --hds-code-block-color-symbol: var(--hds-code-block-color-orange); + --hds-code-block-color-tag: var(--hds-code-block-color-green); + --hds-code-block-color-url: var(--hds-code-block-color-cyan); + --hds-code-block-color-lang-css: var(--hds-code-block-color-purple); + --hds-code-block-color-lang-css-token: var(--hds-code-block-color-green); + --hds-code-block-color-lang-css-atrule: var(--hds-code-block-color-purple); + --hds-code-block-color-lang-css-entity: var(--hds-code-block-color-blue); + --hds-code-block-color-lang-css-function: var(--hds-code-block-color-cyan); + --hds-code-block-color-lang-css-property: var(--hds-code-block-color-cyan); + --hds-code-block-color-lang-css-punctuation: var(--hds-code-block-color-orange); + --hds-code-block-color-lang-css-not-atrule: var(--hds-code-block-color-foreground-primary); + --hds-code-block-color-lang-css-selector: var(--hds-code-block-color-blue); + --hds-code-block-color-lang-css-url: var(--hds-code-block-color-orange); + --hds-code-block-color-lang-js-constant: var(--hds-code-block-color-orange); + --hds-code-block-color-lang-markup-attr-value: var(--hds-code-block-color-yellow); + --hds-code-block-color-lang-markup-entity-named: var(--hds-code-block-color-purple); + --hds-code-block-color-lang-markup-entity-not-named: var(--hds-code-block-color-green); +} + +.hds-code-block .token { + color: var(--hds-code-block-color-token); +} +.hds-code-block .token.atrule { + color: var(--hds-code-block-color-atrule); +} +.hds-code-block .token.attr-name { + color: var(--hds-code-block-color-attr-name); +} +.hds-code-block .token.attr-value { + color: var(--hds-code-block-color-attr-value); +} +.hds-code-block .token.boolean { + color: var(--hds-code-block-color-boolean); +} +.hds-code-block .token.builtin { + color: var(--hds-code-block-color-builtin); +} +.hds-code-block .token.char { + color: var(--hds-code-block-color-char); +} +.hds-code-block .token.class-name { + color: var(--hds-code-block-color-class-name); +} +.hds-code-block .token.comment { + color: var(--hds-code-block-color-comment); +} +.hds-code-block .token.constant { + color: var(--hds-code-block-color-constant); +} +.hds-code-block .token.deleted { + color: var(--hds-code-block-color-deleted); +} +.hds-code-block .token.entity { + color: var(--hds-code-block-color-entity); +} +.hds-code-block .token.function { + color: var(--hds-code-block-color-function); +} +.hds-code-block .token.important { + color: var(--hds-code-block-color-important); +} +.hds-code-block .token.keyword { + color: var(--hds-code-block-color-keyword); +} +.hds-code-block .token.namespace { + color: var(--hds-code-block-color-namespace); +} +.hds-code-block .token.number { + color: var(--hds-code-block-color-number); +} +.hds-code-block .token.operator { + color: var(--hds-code-block-color-operator); +} +.hds-code-block .token.punctuation { + color: var(--hds-code-block-color-punctuation); +} +.hds-code-block .token.prolog { + color: var(--hds-code-block-color-prolog); +} +.hds-code-block .token.property { + color: var(--hds-code-block-color-property); +} +.hds-code-block .token.regex { + color: var(--hds-code-block-color-regex); +} +.hds-code-block .token.script { + color: var(--hds-code-block-color-script); +} +.hds-code-block .token.selector { + color: var(--hds-code-block-color-selector); +} +.hds-code-block .token.string { + color: var(--hds-code-block-color-string); +} +.hds-code-block .token.symbol { + color: var(--hds-code-block-color-symbol); +} +.hds-code-block .token.tag { + color: var(--hds-code-block-color-tag); +} +.hds-code-block .token.url { + color: var(--hds-code-block-color-url); +} +.hds-code-block .token.variable { + color: var(--hds-code-block-color-comment); +} +.hds-code-block .language-css { + color: var(--hds-code-block-color-lang-css); +} +.hds-code-block .language-css .token { + color: var(--hds-code-block-color-lang-css-token); +} +.hds-code-block .language-css .token.atrule { + color: var(--hds-code-block-color-lang-css-atrule); +} +.hds-code-block .language-css .token.rule:not(.atrule) { + color: var(--hds-code-block-color-lang-css-not-atrule); +} +.hds-code-block .language-css .token.entity { + color: var(--hds-code-block-color-lang-css-entity); +} +.hds-code-block .language-css .token.function { + color: var(--hds-code-block-color-lang-css-function); +} +.hds-code-block .language-css .token.property { + color: var(--hds-code-block-color-lang-css-property); +} +.hds-code-block .language-css .token.punctuation { + color: var(--hds-code-block-color-lang-css-punctuatione); +} +.hds-code-block .language-css .token.selector { + color: var(--hds-code-block-color-lang-css-selector); +} +.hds-code-block .language-css .token.url { + color: var(--hds-code-block-color-lang-css-url); +} +.hds-code-block .language-javascript .token.constant { + color: var(--hds-code-block-color-lang-js-constant); +} +.hds-code-block .language-markup .token.attr-value, +.hds-code-block .language-html .token.attr-value { + color: var(--hds-code-block-color-lang-markup-attr-value); +} +.hds-code-block .language-markup .token.entity.named-entity, +.hds-code-block .language-html .token.entity.named-entity { + color: var(--hds-code-block-color-lang-markup-entity-named); +} +.hds-code-block .language-markup .token.entity:not(.named-entity), +.hds-code-block .language-html .token.entity:not(.named-entity) { + color: var(--hds-code-block-color-lang-markup-entity-not-named); +} + +.hds-code-block { + position: relative; + color: var(--hds-code-block-color-foreground-primary); + background-color: var(--hds-code-block-color-surface-primary); + border: 1px solid var(--hds-code-block-color-border-strong); +} +.hds-code-block pre, +.hds-code-block code { + line-height: 1.4286; + white-space: pre; + text-align: left; + text-shadow: none; + word-wrap: normal; + word-break: normal; + word-spacing: normal; + tab-size: 4; + hyphens: none; + scrollbar-width: thin; +} +@media print { + .hds-code-block pre, + .hds-code-block code { + text-shadow: none; + } +} + +.hds-code-block--is-standalone { + border-radius: 6px; +} + +.hds-code-block--has-line-wrapping .hds-code-block__code, +.hds-code-block--has-line-wrapping .hds-code-block__code code { + white-space: pre-wrap; + overflow-wrap: break-word; +} + +.hds-code-block__title { + color: var(--hds-code-block-color-foreground-primary); +} + +.hds-code-block__description { + color: var(--hds-code-block-color-foreground-faint); +} + +.hds-code-block__header { + display: flex; + flex-direction: column; + gap: 4px; + padding: 8px 16px; + background-color: var(--hds-code-block-color-surface-faint); + border-bottom: 1px solid var(--hds-code-block-color-border-primary); + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} +.hds-code-block__header:empty { + display: none; +} +.hds-code-block__header strong { + font-weight: var(--token-typography-font-weight-semibold); +} +.hds-code-block__header code, +.hds-code-block__header pre { + display: inline; + font-size: 0.9em; + font-family: var(--token-typography-code-100-font-family); + line-height: 1em; +} +.hds-code-block__header a:not([class*=hds-]) { + color: var(--hds-code-block-color-foreground-action); +} +.hds-code-block__header a:not([class*=hds-]):focus, .hds-code-block__header a:not([class*=hds-]):focus-visible { + text-decoration: none; + outline: 2px solid var(--token-color-focus-action-internal); + outline-offset: 1px; +} +.hds-code-block__header a:not([class*=hds-]):hover { + color: var(--token-color-foreground-action-hover); +} +.hds-code-block__header a:not([class*=hds-]):active { + color: var(--token-color-foreground-action-active); +} + +.hds-code-block__body { + position: relative; + border-radius: inherit; +} + +.hds-code-block__code { + outline-style: solid; + outline-color: transparent; + display: block; + margin: 0; + padding: 16px; + overflow: auto; + font-size: 0.8125rem; + font-family: var(--token-typography-code-200-font-family); + border-radius: inherit; +} +.hds-code-block__code:focus, .hds-code-block__code.mock-focus { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-code-block__code:focus:not(:focus-visible) { + box-shadow: none; +} +.hds-code-block__code:focus-visible { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-code-block__code:focus:active, .hds-code-block__code.mock-focus.mock-active { + box-shadow: none; +} +.hds-code-block__code ::selection { + color: var(--hds-code-block-color-foreground-selection); + background-color: var(--hds-code-block-color-surface-selection); +} + +.hds-code-block__copy-button { + position: absolute; + top: 11px; + right: 12px; + color: var(--hds-code-block-color-foreground-primary); + background-color: var(--hds-code-block-color-surface-faint); + border: 1px solid var(--hds-code-block-color-border-strong); +} +.hds-code-block__copy-button:hover, .hds-code-block__copy-button.mock-hover { + background-color: var(--hds-code-block-color-surface-primary); + border-color: var(--hds-code-block-color-border-strong); +} +.hds-code-block__copy-button:active, .hds-code-block__copy-button.mock-active { + background-color: var(--hds-code-block-color-surface-interactive-active); +} +.hds-code-block__copy-button:focus, .hds-code-block__copy-button.mock-focus, .hds-code-block__copy-button:focus-visible { + background-color: var(--hds-code-block-color-surface-faint); +} +.hds-code-block__copy-button.hds-copy-button--status-success .hds-icon { + color: var(--hds-code-block-color-foreground-success); +} +.hds-code-block__copy-button.hds-copy-button--status-error .hds-icon { + color: var(--hds-code-block-color-foreground-critical); +} +.hds-code-block__copy-button .hds-icon { + color: var(--hds-code-block-color-foreground-primary); +} + +.hds-code-block.line-numbers { + counter-reset: linenumber; +} +.hds-code-block.line-numbers .hds-code-block__code { + position: relative; + padding-left: calc(49px + 16px); +} +.hds-code-block.line-numbers .line-numbers-rows { + position: absolute; + top: 0; + left: 0; + min-width: 49px; + min-height: 100%; + padding: 16px 0; + border-right: 1px solid var(--hds-code-block-color-border-primary); + user-select: none; + pointer-events: none; +} +.hds-code-block.line-numbers .line-numbers-rows > span { + display: block; + counter-increment: linenumber; +} +.hds-code-block.line-numbers .line-numbers-rows > span::before { + display: block; + padding-right: 16px; + text-align: right; + content: counter(linenumber); +} +.hds-code-block .line-highlight { + position: absolute; + right: 0; + left: 0; + margin-top: -3px; + background-color: var(--hds-code-block-color-line-highlight); + border: solid var(--hds-code-block-color-line-highlight-border); + border-width: 1px 0 1px 4px; + mix-blend-mode: screen; + pointer-events: none; +} +@media print { + .hds-code-block .line-highlight { + /* + * This will prevent browsers from replacing the background color with white. + * It's necessary because the element is layered on top of the displayed code. + */ + -webkit-print-color-adjust: exact; + color-adjust: exact; + } +} +.hds-code-block .token.bold { + font-weight: bold; +} +.hds-code-block .token.italic { + font-style: italic; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-copy-button { + cursor: pointer; +} +.hds-copy-button .hds-button__icon { + color: var(--token-color-foreground-action); +} +.hds-copy-button:hover .hds-button__icon, .hds-copy-button.mock-hover .hds-button__icon { + color: var(--token-color-foreground-action-hover); +} +.hds-copy-button:active .hds-button__icon, .hds-copy-button.mock-active .hds-button__icon { + color: var(--token-color-foreground-action-active); +} +.hds-copy-button.hds-copy-button--status-success .hds-button__icon { + color: var(--token-color-foreground-success); +} +.hds-copy-button.hds-copy-button--status-error .hds-button__icon { + color: var(--token-color-foreground-critical); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-copy-snippet { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; + display: flex; + gap: 8px; + align-items: center; + justify-content: space-between; + padding: 6px 4px; + text-align: left; + border: 1px solid transparent; + border-radius: 5px; + cursor: pointer; +} +.hds-copy-snippet::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-copy-snippet:focus::before, .hds-copy-snippet.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-copy-snippet:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-copy-snippet:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-copy-snippet:focus:active::before, .hds-copy-snippet.mock-focus.mock-active::before { + box-shadow: none; +} + +.hds-copy-snippet--color-primary { + color: var(--token-color-foreground-action); + background-color: transparent; +} +.hds-copy-snippet--color-primary:hover, .hds-copy-snippet--color-primary.mock-hover { + color: var(--token-color-foreground-action-hover); + background-color: var(--token-color-surface-interactive); + border-color: var(--token-color-border-strong); +} +.hds-copy-snippet--color-primary:active, .hds-copy-snippet--color-primary.mock-active { + color: var(--token-color-foreground-action-active); + background-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-border-strong); +} +.hds-copy-snippet--color-primary.hds-copy-snippet--status-success { + background-color: var(--token-color-surface-interactive); +} +.hds-copy-snippet--color-primary.hds-copy-snippet--status-success .hds-copy-snippet__icon { + color: var(--token-color-foreground-success); +} +.hds-copy-snippet--color-primary.hds-copy-snippet--status-error { + background-color: var(--token-color-surface-interactive); +} +.hds-copy-snippet--color-primary.hds-copy-snippet--status-error .hds-copy-snippet__icon { + color: var(--token-color-foreground-critical); +} + +.hds-copy-snippet--color-secondary { + color: var(--token-color-foreground-primary); + background-color: transparent; +} +.hds-copy-snippet--color-secondary .hds-copy-snippet__icon { + color: var(--token-color-foreground-action); +} +.hds-copy-snippet--color-secondary:hover, .hds-copy-snippet--color-secondary.mock-hover { + background-color: var(--token-color-surface-interactive); + border-color: var(--token-color-border-strong); +} +.hds-copy-snippet--color-secondary:hover .hds-copy-snippet__icon, .hds-copy-snippet--color-secondary.mock-hover .hds-copy-snippet__icon { + color: var(--token-color-foreground-action-hover); +} +.hds-copy-snippet--color-secondary:active, .hds-copy-snippet--color-secondary.mock-active { + background-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-border-strong); +} +.hds-copy-snippet--color-secondary:active .hds-copy-snippet__icon, .hds-copy-snippet--color-secondary.mock-active .hds-copy-snippet__icon { + color: var(--token-color-foreground-action-active); +} +.hds-copy-snippet--color-secondary.hds-copy-snippet--status-success { + background-color: var(--token-color-surface-interactive); +} +.hds-copy-snippet--color-secondary.hds-copy-snippet--status-success .hds-copy-snippet__icon { + color: var(--token-color-foreground-success); +} +.hds-copy-snippet--color-secondary.hds-copy-snippet--status-error { + background-color: var(--token-color-surface-interactive); +} +.hds-copy-snippet--color-secondary.hds-copy-snippet--status-error .hds-copy-snippet__icon { + color: var(--token-color-foreground-critical); +} + +.hds-copy-snippet--status-success { + background-color: var(--token-color-surface-interactive); +} +.hds-copy-snippet--status-success .hds-copy-snippet__icon { + color: var(--token-color-foreground-success); +} + +.hds-copy-snippet--status-error { + background-color: var(--token-color-surface-interactive); +} +.hds-copy-snippet--status-error .hds-copy-snippet__icon { + color: var(--token-color-foreground-critical); +} + +.hds-copy-snippet__text { + flex: 1 0 0; +} + +.hds-copy-snippet__icon { + flex: none; +} + +.hds-copy-snippet--width-full { + width: 100%; + max-width: 100%; +} + +.hds-copy-snippet--is-truncated { + width: 100%; + max-width: 100%; +} +.hds-copy-snippet--is-truncated .hds-copy-snippet__text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +:where(.hds-dialog-primitive__wrapper) { + position: initial; + inset: initial; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + background: var(--token-color-surface-primary); + border: none; +} + +.hds-dialog-primitive__wrapper-header { + flex: none; + background: var(--token-color-surface-faint); + border-bottom: 1px solid var(--token-color-border-primary); + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} +.hds-dialog-primitive__wrapper-header:not(:has(> *)) { + display: none; +} + +.hds-dialog-primitive__wrapper-body { + flex: 1 1 auto; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; +} + +.hds-dialog-primitive__wrapper-footer { + flex: none; + border-top: 1px solid var(--token-color-border-primary); + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; +} +.hds-dialog-primitive__wrapper-footer:not(:has(> *)) { + display: none; +} + +.hds-dialog-primitive__header { + display: flex; + gap: 16px; + align-items: flex-start; + padding: 16px 24px; + color: var(--token-color-foreground-strong); + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.hds-dialog-primitive__icon { + flex: none; + align-self: center; +} + +.hds-dialog-primitive__title { + flex-grow: 1; + margin: 0; +} + +.hds-dialog-primitive__tagline { + margin-bottom: 4px; + color: var(--token-color-foreground-faint); +} + +.hds-dialog-primitive__dismiss { + align-self: flex-start; +} + +.hds-dialog-primitive__description { + padding: 0 24px 16px; +} + +.hds-dialog-primitive__body { + padding: 24px; +} + +.hds-dialog-primitive__footer { + padding: 16px 24px; + background: var(--token-color-surface-faint); + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; +} +.hds-dialog-primitive__footer .hds-button-set .hds-button--color-tertiary { + margin-left: auto; +} + +.hds-dialog-primitive__overlay { + position: fixed; + inset: 0; + z-index: 49; + background: var(--token-color-palette-neutral-700); + opacity: 0.5; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-disclosure-primitive { + position: relative; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-dismiss-button { + flex: none; + padding: 0; + color: var(--token-color-foreground-faint); + background-color: transparent; + border: none; + cursor: pointer; + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-dismiss-button:hover::before, .hds-dismiss-button.mock-hover::before { + background-color: rgba(222, 223, 227, 0.4); +} +.hds-dismiss-button::before { + position: absolute; + top: -4px; + right: -4px; + bottom: -4px; + left: -4px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-dismiss-button:focus::before, .hds-dismiss-button.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-dismiss-button:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-dismiss-button:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-dismiss-button:focus:active::before, .hds-dismiss-button.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-dismiss-button:active, .hds-dismiss-button.mock-active { + color: var(--token-color-foreground-secondary); +} +.hds-dismiss-button:active::before, .hds-dismiss-button.mock-active::before { + background-color: rgba(222, 223, 227, 0.4); + border: 1px solid var(--token-color-border-strong); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-dropdown--is-inline { + display: inline-block; +} +.hds-dropdown--is-inline .hds-dropdown-toggle-icon, +.hds-dropdown--is-inline .hds-dropdown-toggle-button { + display: inline-flex; +} + +.hds-dropdown-toggle-icon { + position: relative; + display: flex; + gap: 2px; + align-items: center; + justify-content: center; + padding: 1px; + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-faint); + border: 1px solid var(--token-color-border-strong); + border-radius: 5px; + outline-style: solid; + outline-color: transparent; +} +.hds-dropdown-toggle-icon:hover, .hds-dropdown-toggle-icon.mock-hover { + background-color: var(--token-color-surface-interactive); + cursor: pointer; +} +.hds-dropdown-toggle-icon:focus, .hds-dropdown-toggle-icon.mock-focus { + box-shadow: var(--token-button-box-shadow-focus); + border-color: var(--token-color-focus-action-internal); +} +.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before { + position: absolute; + top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + z-index: -1; + border: var(--token-button-focus-border-width) solid transparent; + border-radius: var(--token-button-focus-border-radius); + content: ""; +} +.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before { + border-color: var(--token-color-focus-action-external); +} +.hds-dropdown-toggle-icon:active, .hds-dropdown-toggle-icon.mock-active { + background-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-border-strong); +} +.hds-dropdown-toggle-icon:active::before, .hds-dropdown-toggle-icon.mock-active::before { + border-color: transparent; +} +.hds-dropdown-toggle-icon:disabled, .hds-dropdown-toggle-icon.mock-disabled { + color: var(--token-button-disabled-foreground); + background-color: var(--token-button-disabled-surface); + border-color: var(--token-button-disabled-border-color); + box-shadow: var(--token-button-disabled-box-shadow); + cursor: not-allowed; +} +.hds-dropdown-toggle-icon:disabled::before, .hds-dropdown-toggle-icon.mock-disabled::before { + border-color: transparent; +} + +.hds-dropdown-toggle-icon__wrapper { + display: flex; + align-items: center; + justify-content: center; + border-radius: 3px; +} +.hds-dropdown-toggle-icon__wrapper img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: inherit; +} + +.hds-dropdown-toggle-icon--size-small .hds-dropdown-toggle-icon__wrapper { + width: 24px; + height: 24px; +} +.hds-dropdown-toggle-icon--size-small.hds-dropdown-toggle-icon--has-chevron .hds-icon { + width: 12px; + height: 12px; +} + +.hds-dropdown-toggle-icon--size-medium .hds-dropdown-toggle-icon__wrapper { + width: 32px; + height: 32px; +} + +.hds-dropdown-toggle-button { + position: relative; + display: flex; + gap: var(--token-button-gap); + align-items: center; + justify-content: center; + width: auto; + font-weight: var(--token-button-font-weight); + font-family: var(--token-button-font-family); + text-decoration: none; + border: var(--token-button-border-width) solid transparent; + border-radius: var(--token-button-border-radius); + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-dropdown-toggle-button:focus, .hds-dropdown-toggle-button.mock-focus { + box-shadow: var(--token-button-box-shadow-focus); +} +.hds-dropdown-toggle-button:focus::before, .hds-dropdown-toggle-button.mock-focus::before { + position: absolute; + top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + z-index: -1; + border: var(--token-button-focus-border-width) solid transparent; + border-radius: var(--token-button-focus-border-radius); + content: ""; +} +.hds-dropdown-toggle-button:disabled, .hds-dropdown-toggle-button.mock-disabled, .hds-dropdown-toggle-button:disabled:focus, .hds-dropdown-toggle-button.mock-disabled:focus, .hds-dropdown-toggle-button:disabled:hover, .hds-dropdown-toggle-button.mock-disabled:hover { + color: var(--token-button-disabled-foreground); + background-color: var(--token-button-disabled-surface); + border-color: var(--token-button-disabled-border-color); + box-shadow: var(--token-button-disabled-box-shadow); + cursor: not-allowed; +} +.hds-dropdown-toggle-button:disabled::before, .hds-dropdown-toggle-button.mock-disabled::before, .hds-dropdown-toggle-button:disabled:focus::before, .hds-dropdown-toggle-button.mock-disabled:focus::before, .hds-dropdown-toggle-button:disabled:hover::before, .hds-dropdown-toggle-button.mock-disabled:hover::before { + border-color: transparent; +} +.hds-dropdown-toggle-button:disabled .hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button:disabled .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button.mock-disabled .hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button.mock-disabled .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button:disabled:focus .hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button:disabled:focus .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button.mock-disabled:focus .hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button.mock-disabled:focus .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button:disabled:hover .hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button:disabled:hover .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button.mock-disabled:hover .hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button.mock-disabled:hover .hds-dropdown-toggle-button__count { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-strong); +} + +.hds-dropdown-toggle-button--size-small { + min-height: var(--token-button-height-small); + padding: var(--token-button-padding-vertical-small) var(--token-button-padding-horizontal-small); +} +.hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-button__icon { + width: var(--token-button-icon-size-small); + height: var(--token-button-icon-size-small); +} +.hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-button__text { + font-size: var(--token-button-font-size-small); + line-height: var(--token-button-line-height-small); +} +.hds-dropdown-toggle-button--size-small.hds-dropdown-toggle-button--is-icon-only { + min-width: var(--token-button-height-small); + padding-right: var(--token-button-padding-vertical-small); + padding-left: var(--token-button-padding-vertical-small); +} + +.hds-dropdown-toggle-button--size-medium { + min-height: var(--token-button-height-medium); + padding: var(--token-button-padding-vertical-medium) var(--token-button-padding-horizontal-medium); +} +.hds-dropdown-toggle-button--size-medium .hds-dropdown-toggle-button__icon { + width: var(--token-button-icon-size-medium); + height: var(--token-button-icon-size-medium); +} +.hds-dropdown-toggle-button--size-medium .hds-dropdown-toggle-button__text { + font-size: var(--token-button-font-size-medium); + line-height: var(--token-button-line-height-medium); +} +.hds-dropdown-toggle-button--size-medium.hds-dropdown-toggle-button--is-icon-only { + min-width: var(--token-button-height-medium); + padding-right: var(--token-button-padding-vertical-medium); + padding-left: var(--token-button-padding-vertical-medium); +} + +.hds-dropdown-toggle-button--size-large { + min-height: var(--token-button-height-large); + padding: var(--token-button-padding-vertical-large) var(--token-button-padding-horizontal-large); +} +.hds-dropdown-toggle-button--size-large .hds-dropdown-toggle-button__icon { + width: var(--token-button-icon-size-large); + height: var(--token-button-icon-size-large); +} +.hds-dropdown-toggle-button--size-large .hds-dropdown-toggle-button__text { + font-size: var(--token-button-font-size-large); + line-height: var(--token-button-line-height-large); +} +.hds-dropdown-toggle-button--size-large.hds-dropdown-toggle-button--is-icon-only { + min-width: var(--token-button-height-large); + padding-right: var(--token-button-padding-vertical-large); + padding-left: var(--token-button-padding-vertical-large); +} + +.hds-dropdown-toggle-button--size-small { + padding-right: 0.375rem; +} +.hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-chevron .hds-icon { + width: 12px; + height: 12px; +} + +.hds-dropdown-toggle-button--size-medium { + padding-right: 0.5625rem; +} + +.hds-dropdown-toggle-button--color-primary { + color: var(--token-button-primary-foreground-default); + background-color: var(--token-button-primary-surface-default); + border-color: var(--token-token-button-primary-border-color-default); + box-shadow: var(--token-button-primary-box-shadow-default); +} +.hds-dropdown-toggle-button--color-primary:hover, .hds-dropdown-toggle-button--color-primary.mock-hover { + color: var(--token-button-primary-foreground-hover); + background-color: var(--token-button-primary-surface-hover); + border-color: var(--token-token-button-primary-border-color-hover); + cursor: pointer; +} +.hds-dropdown-toggle-button--color-primary:focus, .hds-dropdown-toggle-button--color-primary.mock-focus { + color: var(--token-button-primary-foreground-focus); + background-color: var(--token-button-primary-surface-focus); + border-color: var(--token-token-button-primary-border-color-focus); + box-shadow: var(--token-button-primary-box-shadow-focus); +} +.hds-dropdown-toggle-button--color-primary:focus::before, .hds-dropdown-toggle-button--color-primary.mock-focus::before { + top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width))); + border-color: var(--token-color-focus-action-external); + border-radius: var(--token-button-border-radius); +} +.hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active { + color: var(--token-button-primary-foreground-active); + background-color: var(--token-button-primary-surface-active); + border-color: var(--token-token-button-primary-border-color-active); + box-shadow: var(--token-button-primary-box-shadow-active); +} +.hds-dropdown-toggle-button--color-primary:active::before, .hds-dropdown-toggle-button--color-primary.mock-active::before { + border-color: transparent; +} + +.hds-dropdown-toggle-button--color-secondary { + color: var(--token-button-secondary-foreground-default); + background-color: var(--token-button-secondary-surface-default); + border-color: var(--token-button-secondary-border-color-default); + box-shadow: var(--token-button-secondary-box-shadow-default); +} +.hds-dropdown-toggle-button--color-secondary:hover, .hds-dropdown-toggle-button--color-secondary.mock-hover { + color: var(--token-button-secondary-foreground-hover); + background-color: var(--token-button-secondary-surface-hover); + border-color: var(--token-button-secondary-border-color-hover); + cursor: pointer; +} +.hds-dropdown-toggle-button--color-secondary:focus, .hds-dropdown-toggle-button--color-secondary.mock-focus { + color: var(--token-button-secondary-foreground-focus); + background-color: var(--token-button-secondary-surface-focus); + border-color: var(--token-button-secondary-border-color-focus); + box-shadow: var(--token-button-secondary-box-shadow-focus); +} +.hds-dropdown-toggle-button--color-secondary:focus::before, .hds-dropdown-toggle-button--color-secondary.mock-focus::before { + border-color: var(--token-color-focus-action-external); +} +.hds-dropdown-toggle-button--color-secondary:active, .hds-dropdown-toggle-button--color-secondary.mock-active { + color: var(--token-button-secondary-foreground-active); + background-color: var(--token-button-secondary-surface-active); + border-color: var(--token-button-secondary-border-color-active); + box-shadow: var(--token-button-secondary-box-shadow-active); +} +.hds-dropdown-toggle-button--color-secondary:active::before, .hds-dropdown-toggle-button--color-secondary.mock-active::before { + border-color: transparent; +} + +.hds-dropdown-toggle-button--width-full { + justify-content: space-between; + width: 100%; + max-width: 100%; +} + +.hds-dropdown-toggle-button__text { + text-align: left; +} + +.hds-dropdown-toggle-button__icon { + flex: none; +} + +.hds-dropdown-toggle-button__badge, +.hds-dropdown-toggle-button__count { + margin: -3px 0 -3px 0; +} + +.hds-dropdown-toggle-chevron { + margin-left: auto; + padding-left: 2px; +} +@media (prefers-reduced-motion: no-preference) { + .hds-dropdown-toggle-chevron .hds-icon-chevron-down { + transition: transform 0.3s; + } +} +.hds-dropdown-toggle-icon--is-open .hds-dropdown-toggle-chevron .hds-icon-chevron-down, .hds-dropdown-toggle-button--is-open .hds-dropdown-toggle-chevron .hds-icon-chevron-down { + transform: rotate(-180deg); +} + +.hds-dropdown__content { + position: relative; + display: flex; + flex-direction: column; + width: max-content; + min-width: 200px; + max-width: 400px; + background-color: var(--token-color-surface-primary); + border-radius: 6px; + box-shadow: var(--token-surface-high-box-shadow); +} +:where(.hds-dropdown__content[popover]) { + width: fit-content; + height: fit-content; + margin: 0; + padding: 0; + overflow: visible; + color: inherit; + background: none; + border: none; + inset: 0; +} + +.hds-dropdown .hds-dropdown__content { + display: none; +} +.hds-dropdown .hds-dropdown__content[popover]:popover-open { + display: flex; +} + +.hds-dropdown__content--fixed-width { + min-width: initial; + max-width: initial; +} + +.hds-dropdown__list { + flex: 1 1 auto; + margin: 0; + padding: 4px 0; + overflow-y: auto; + list-style: none; + overscroll-behavior: contain; +} + +.hds-dropdown__header, +.hds-dropdown__footer { + position: relative; + flex: none; + padding: 0 8px; +} +.hds-dropdown__header > .hds-link-standalone, +.hds-dropdown__footer > .hds-link-standalone { + width: initial; + margin: 4px 0; + padding: 7px 8px; +} +.hds-dropdown__header > .hds-link-standalone::before, +.hds-dropdown__footer > .hds-link-standalone::before { + top: 0; + bottom: 0; +} +.hds-dropdown__header > .hds-button, +.hds-dropdown__header > .hds-form-text-input, +.hds-dropdown__footer > .hds-button, +.hds-dropdown__footer > .hds-form-text-input { + margin: 8px 0; +} +.hds-dropdown__header > .hds-button-set, +.hds-dropdown__footer > .hds-button-set { + gap: 8px; + margin: 8px 0; +} + +.hds-dropdown__header--with-divider { + border-bottom: 1px solid var(--token-color-border-primary); +} + +.hds-dropdown__footer--with-divider { + border-top: 1px solid var(--token-color-border-primary); +} + +.hds-dropdown-list-item__copy-item-title { + padding: 2px 0 4px; + color: var(--token-color-foreground-faint); +} + +.hds-dropdown-list-item--variant-copy-item { + width: 100%; + padding: 10px 16px 12px; +} + +.hds-dropdown-list-item--variant-description { + padding: 2px 16px 4px; + color: var(--token-color-foreground-faint); +} + +.hds-dropdown-list-item--variant-generic { + padding-right: 16px; + padding-left: 16px; +} + +.hds-dropdown-list-item--variant-interactive, +.hds-dropdown-list-item--variant-checkmark { + position: relative; + min-height: 36px; + isolation: isolate; +} +.hds-dropdown-list-item--variant-interactive button, +.hds-dropdown-list-item--variant-checkmark button { + width: 100%; + background-color: transparent; +} +.hds-dropdown-list-item--variant-interactive button:hover, +.hds-dropdown-list-item--variant-checkmark button:hover { + cursor: pointer; +} +.hds-dropdown-list-item--variant-interactive a, +.hds-dropdown-list-item--variant-interactive button, +.hds-dropdown-list-item--variant-checkmark a, +.hds-dropdown-list-item--variant-checkmark button { + display: flex; + align-items: flex-start; + padding: 7px 9px 7px 15px; + text-decoration: none; + border: 1px solid transparent; + outline-style: solid; + outline-color: transparent; +} +.hds-dropdown-list-item--variant-interactive a::before, +.hds-dropdown-list-item--variant-interactive button::before, +.hds-dropdown-list-item--variant-checkmark a::before, +.hds-dropdown-list-item--variant-checkmark button::before { + position: absolute; + top: 6px; + bottom: 6px; + left: 4px; + z-index: -1; + width: 2px; + border-radius: 1px; + content: ""; +} +.hds-dropdown-list-item--variant-interactive a::after, +.hds-dropdown-list-item--variant-interactive button::after, +.hds-dropdown-list-item--variant-checkmark a::after, +.hds-dropdown-list-item--variant-checkmark button::after { + position: absolute; + top: 0; + right: 4px; + bottom: 0; + left: 10px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-dropdown-list-item--variant-interactive a:hover, .hds-dropdown-list-item--variant-interactive a.mock-hover, +.hds-dropdown-list-item--variant-interactive button:hover, +.hds-dropdown-list-item--variant-interactive button.mock-hover, +.hds-dropdown-list-item--variant-checkmark a:hover, +.hds-dropdown-list-item--variant-checkmark a.mock-hover, +.hds-dropdown-list-item--variant-checkmark button:hover, +.hds-dropdown-list-item--variant-checkmark button.mock-hover { + color: var(--current-color-hover); +} +.hds-dropdown-list-item--variant-interactive a:hover::before, .hds-dropdown-list-item--variant-interactive a.mock-hover::before, +.hds-dropdown-list-item--variant-interactive button:hover::before, +.hds-dropdown-list-item--variant-interactive button.mock-hover::before, +.hds-dropdown-list-item--variant-checkmark a:hover::before, +.hds-dropdown-list-item--variant-checkmark a.mock-hover::before, +.hds-dropdown-list-item--variant-checkmark button:hover::before, +.hds-dropdown-list-item--variant-checkmark button.mock-hover::before { + background-color: currentColor; +} +.hds-dropdown-list-item--variant-interactive a:focus, .hds-dropdown-list-item--variant-interactive a.mock-focus, +.hds-dropdown-list-item--variant-interactive button:focus, +.hds-dropdown-list-item--variant-interactive button.mock-focus, +.hds-dropdown-list-item--variant-checkmark a:focus, +.hds-dropdown-list-item--variant-checkmark a.mock-focus, +.hds-dropdown-list-item--variant-checkmark button:focus, +.hds-dropdown-list-item--variant-checkmark button.mock-focus { + color: var(--current-color-focus); +} +.hds-dropdown-list-item--variant-interactive a:focus::after, .hds-dropdown-list-item--variant-interactive a.mock-focus::after, +.hds-dropdown-list-item--variant-interactive button:focus::after, +.hds-dropdown-list-item--variant-interactive button.mock-focus::after, +.hds-dropdown-list-item--variant-checkmark a:focus::after, +.hds-dropdown-list-item--variant-checkmark a.mock-focus::after, +.hds-dropdown-list-item--variant-checkmark button:focus::after, +.hds-dropdown-list-item--variant-checkmark button.mock-focus::after { + left: 4px; + box-shadow: var(--current-focus-ring-box-shadow); +} +.hds-dropdown-list-item--variant-interactive a:focus:not(:focus-visible)::after, +.hds-dropdown-list-item--variant-interactive button:focus:not(:focus-visible)::after, +.hds-dropdown-list-item--variant-checkmark a:focus:not(:focus-visible)::after, +.hds-dropdown-list-item--variant-checkmark button:focus:not(:focus-visible)::after { + background-color: transparent; + box-shadow: none; +} +.hds-dropdown-list-item--variant-interactive a:focus-visible, +.hds-dropdown-list-item--variant-interactive button:focus-visible, +.hds-dropdown-list-item--variant-checkmark a:focus-visible, +.hds-dropdown-list-item--variant-checkmark button:focus-visible { + color: var(--current-color-focus); +} +.hds-dropdown-list-item--variant-interactive a:focus-visible::after, +.hds-dropdown-list-item--variant-interactive button:focus-visible::after, +.hds-dropdown-list-item--variant-checkmark a:focus-visible::after, +.hds-dropdown-list-item--variant-checkmark button:focus-visible::after { + left: 4px; + box-shadow: var(--current-focus-ring-box-shadow); +} +.hds-dropdown-list-item--variant-interactive a:focus:active::after, .hds-dropdown-list-item--variant-interactive a:focus-visible:active::after, .hds-dropdown-list-item--variant-interactive a.mock-focus.mock-active::after, +.hds-dropdown-list-item--variant-interactive button:focus:active::after, +.hds-dropdown-list-item--variant-interactive button:focus-visible:active::after, +.hds-dropdown-list-item--variant-interactive button.mock-focus.mock-active::after, +.hds-dropdown-list-item--variant-checkmark a:focus:active::after, +.hds-dropdown-list-item--variant-checkmark a:focus-visible:active::after, +.hds-dropdown-list-item--variant-checkmark a.mock-focus.mock-active::after, +.hds-dropdown-list-item--variant-checkmark button:focus:active::after, +.hds-dropdown-list-item--variant-checkmark button:focus-visible:active::after, +.hds-dropdown-list-item--variant-checkmark button.mock-focus.mock-active::after { + left: 10px; + background-color: var(--current-background-color); + box-shadow: none; +} +.hds-dropdown-list-item--variant-interactive a:active, .hds-dropdown-list-item--variant-interactive a.mock-active, +.hds-dropdown-list-item--variant-interactive button:active, +.hds-dropdown-list-item--variant-interactive button.mock-active, +.hds-dropdown-list-item--variant-checkmark a:active, +.hds-dropdown-list-item--variant-checkmark a.mock-active, +.hds-dropdown-list-item--variant-checkmark button:active, +.hds-dropdown-list-item--variant-checkmark button.mock-active { + color: var(--current-color-active); +} +.hds-dropdown-list-item--variant-interactive a:active::before, .hds-dropdown-list-item--variant-interactive a.mock-active::before, +.hds-dropdown-list-item--variant-interactive button:active::before, +.hds-dropdown-list-item--variant-interactive button.mock-active::before, +.hds-dropdown-list-item--variant-checkmark a:active::before, +.hds-dropdown-list-item--variant-checkmark a.mock-active::before, +.hds-dropdown-list-item--variant-checkmark button:active::before, +.hds-dropdown-list-item--variant-checkmark button.mock-active::before { + background-color: currentColor; +} + +.hds-dropdown-list-item__interactive-icon { + display: block; + margin-top: 2px; +} + +.hds-dropdown-list-item__interactive-icon--leading { + margin-right: 8px; +} + +.hds-dropdown-list-item__interactive-icon--trailing { + margin-left: 8px; +} + +.hds-dropdown-list-item__interactive-text { + display: block; + flex: 1; + text-align: left; +} + +.hds-dropdown-list-item--color-action a, +.hds-dropdown-list-item--color-action button { + color: var(--token-color-foreground-primary); + --current-color-hover: var(--token-color-foreground-action-hover); + --current-color-focus: var(--token-color-foreground-action-active); + --current-color-active: var(--token-color-foreground-action-active); +} +.hds-dropdown-list-item--color-action a::after, +.hds-dropdown-list-item--color-action button::after { + --current-focus-ring-box-shadow: var( + --token-focus-ring-action-box-shadow + ); +} + +.hds-dropdown-list-item--color-critical a, +.hds-dropdown-list-item--color-critical button { + color: var(--token-color-foreground-critical); + --current-color-hover: var(--token-color-palette-red-300); + --current-color-focus: var(--token-color-palette-red-400); + --current-color-active: var(--token-color-palette-red-400); +} +.hds-dropdown-list-item--color-critical a::after, +.hds-dropdown-list-item--color-critical button::after { + --current-background-color: var(--token-color-surface-critical); + --current-focus-ring-box-shadow: var( + --token-focus-ring-critical-box-shadow + ); +} + +.hds-dropdown-list-item__interactive-loading-wrapper { + display: flex; + align-items: center; + padding: 8px 10px 8px 16px; +} +.hds-dropdown-list-item__interactive-loading-wrapper .hds-dropdown-list-item__interactive-text { + color: var(--token-color-foreground-faint); +} +.hds-dropdown-list-item__interactive-loading-wrapper .hds-dropdown-list-item__interactive-icon { + color: var(--token-color-foreground-primary); +} + +.hds-dropdown-list-item--variant-separator { + position: relative; + width: 100%; + height: 4px; +} +.hds-dropdown-list-item--variant-separator::before { + position: absolute; + right: 6px; + bottom: 0; + left: 6px; + border-bottom: 1px solid var(--token-color-border-primary); + content: ""; +} + +.hds-dropdown-list-item--variant-title { + padding: 10px 16px 4px; + color: var(--token-color-foreground-strong); +} + +.hds-dropdown-list-item--variant-checkmark-selected .hds-dropdown-list-item__checkmark { + color: var(--token-color-foreground-action); +} + +.hds-dropdown-list-item__checkmark { + display: flex; + width: 16px; + height: 20px; + margin-left: 8px; +} + +.hds-dropdown-list-item__checkmark-icon { + align-self: center; +} + +.hds-dropdown-list-item__interactive[disabled], +.hds-dropdown-list-item__interactive[disabled]:hover { + color: var(--token-color-foreground-disabled); + cursor: not-allowed; +} + +.hds-dropdown-list-item--variant-checkbox, +.hds-dropdown-list-item--variant-radio { + display: flex; + align-items: self-start; + padding: 8px 16px; +} +.hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__control, +.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__control { + flex-shrink: 0; + margin-top: 2px; + margin-right: 8px; +} +.hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__icon, .hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__count, .hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__text-content, +.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__icon, +.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__count, +.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__text-content { + color: var(--token-color-foreground-disabled); +} +.hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__label, +.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__label { + display: flex; + flex-grow: 1; + align-items: flex-start; + color: var(--token-color-foreground-primary); +} +.hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__icon, +.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__icon { + margin-top: 2px; + margin-right: 4px; +} + +.hds-dropdown-list-item__count { + margin-left: auto; + padding-left: 8px; + color: var(--token-color-foreground-faint); + line-height: 20px; +} + +.hds-dropdown-list-item--variant-checkmark .hds-badge, +.hds-dropdown-list-item--variant-checkbox .hds-badge, +.hds-dropdown-list-item--variant-radio .hds-badge { + vertical-align: bottom; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-flyout { + position: fixed; + z-index: 49; + inset: 0; + height: 100vh; + max-height: 100vh; + background: var(--token-color-surface-primary); + border: none; + box-shadow: 0 2px 3px 0 rgba(59, 61, 69, 0.2509803922), 0 12px 24px 0 rgba(59, 61, 69, 0.3490196078); +} +.hds-flyout:not([open]) { + display: none; +} +.hds-flyout::backdrop { + display: none; +} + +.hds-flyout--size-medium { + width: min(480px, calc(100vw - var(--hds-app-sidenav-width-minimized) / 2)); + max-width: calc(100vw - var(--hds-app-sidenav-width-minimized) / 2); +} +.hds-flyout--size-medium[open] { + margin-left: calc(100% - min(480px, calc(100vw - var(--hds-app-sidenav-width-minimized) / 2))); +} + +.hds-flyout--size-large { + width: min(720px, calc(100vw - var(--hds-app-sidenav-width-minimized) / 2)); + max-width: calc(100vw - var(--hds-app-sidenav-width-minimized) / 2); +} +.hds-flyout--size-large[open] { + margin-left: calc(100% - min(720px, calc(100vw - var(--hds-app-sidenav-width-minimized) / 2))); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-label { + display: block; + width: max-content; + max-width: 100%; + color: var(--token-form-label-color); +} +.hds-form-label .hds-badge { + vertical-align: initial; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-helper-text { + display: block; + color: var(--token-form-helper-text-color); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-character-count { + color: var(--token-form-helper-text-color); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-error { + display: flex; + gap: var(--token-form-error-gap); + align-items: flex-start; + color: var(--token-form-error-color); +} + +.hds-form-error__icon { + flex: none; + width: var(--token-form-error-icon-size); + height: var(--token-form-error-icon-size); + margin: var(--token-form-error-icon-margin-vertical) var(--token-form-error-icon-margin-horizontal); +} + +.hds-form-error__content { + flex: 1 1 auto; +} + +.hds-form-error__message { + margin: 0; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-field--layout-vertical { + display: grid; + justify-items: start; + width: 100%; +} +.hds-form-field--layout-vertical .hds-form-field__label { + width: fit-content; +} +.hds-form-field--layout-vertical .hds-form-field__helper-text:not(:first-child) { + margin-top: 4px; +} +.hds-form-field--layout-vertical .hds-form-field__helper-text + .hds-form-helper-text { + margin-top: 2px; +} +.hds-form-field--layout-vertical .hds-form-field__control { + display: flex; + justify-self: stretch; +} +.hds-form-field--layout-vertical .hds-form-field__control:not(:first-child) { + margin-top: 8px; +} +.hds-form-field--layout-vertical .hds-form-field__control:not(:last-child) { + margin-bottom: 8px; +} +.hds-form-field--layout-vertical .hds-form-field__character-count { + margin-bottom: 8px; +} + +.hds-form-field--layout-flag { + display: grid; + grid-auto-flow: row; + grid-template-areas: "control label" "control helper-text" "control error"; + grid-template-rows: auto auto auto; + grid-template-columns: auto 1fr; + justify-items: start; +} +.hds-form-field--layout-flag .hds-form-field__label { + grid-area: label; + width: fit-content; +} +.hds-form-field--layout-flag .hds-form-field__helper-text { + grid-area: helper-text; + margin-top: 4px; +} +.hds-form-field--layout-flag .hds-form-field__control { + display: flex; + grid-area: control; +} +.hds-form-field--layout-flag .hds-form-field__control:not(:only-child) { + margin-top: 2px; + margin-right: 8px; +} +.hds-form-field--layout-flag .hds-form-field__error { + grid-area: error; + margin-top: 4px; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-file-input { + margin: -4px 0 -4px -4px; + padding: 3px 0 3px 3px; + color: var(--token-color-foreground-primary); +} +.hds-form-file-input:focus, .hds-form-file-input:focus-visible { + outline: none; +} + +.hds-form-file-input::file-selector-button { + min-height: var(--token-form-file-input-min-height); + margin-right: var(--token-form-file-input-margin-right); + padding: 7px 16px 7px 37px; + color: var(--token-color-foreground-primary); + font: inherit; + background-color: var(--token-color-surface-faint); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%233b3d45'%3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: 15px 50%; + background-size: var(--token-form-text-input-background-image-size); + border: var(--token-button-border-width) solid var(--token-color-border-strong); + border-radius: var(--token-button-border-radius); + box-shadow: var(--token-elevation-low-box-shadow); + cursor: pointer; +} + +.hds-form-file-input::file-selector-button:hover, +.hds-form-file-input.mock-hover::file-selector-button { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-primary); + border-color: var(--token-color-border-strong); +} + +.hds-form-file-input:focus-within::file-selector-button, +.hds-form-file-input.mock-focus::file-selector-button { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-faint); + border-color: var(--token-color-focus-action-internal); + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); +} + +.hds-form-file-input:not(:focus, .mock-focus)::file-selector-button { + border-color: var(--token-color-border-strong); + outline: 0; +} + +.hds-form-file-input::file-selector-button:active, +.hds-form-file-input.mock-active::file-selector-button { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-border-strong); + box-shadow: none; +} + +.hds-form-file-input:disabled, .hds-form-file-input[disabled], .hds-form-file-input.mock-disabled, .hds-form-file-input:disabled:focus, .hds-form-file-input[disabled]:focus, .hds-form-file-input.mock-disabled:focus, .hds-form-file-input:disabled:hover, .hds-form-file-input[disabled]:hover, .hds-form-file-input.mock-disabled:hover { + color: var(--token-color-foreground-disabled); +} +.hds-form-file-input:disabled::file-selector-button, .hds-form-file-input[disabled]::file-selector-button, .hds-form-file-input.mock-disabled::file-selector-button, .hds-form-file-input:disabled:focus::file-selector-button, .hds-form-file-input[disabled]:focus::file-selector-button, .hds-form-file-input.mock-disabled:focus::file-selector-button, .hds-form-file-input:disabled:hover::file-selector-button, .hds-form-file-input[disabled]:hover::file-selector-button, .hds-form-file-input.mock-disabled:hover::file-selector-button { + color: var(--token-button-disabled-foreground); + background-color: var(--token-button-disabled-surface); + border-color: var(--token-button-disabled-border-color); + box-shadow: var(--token-button-disabled-box-shadow); + cursor: not-allowed; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%238c909c'%3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E"); +} +.hds-form-file-input:disabled::file-selector-button::before, .hds-form-file-input[disabled]::file-selector-button::before, .hds-form-file-input.mock-disabled::file-selector-button::before, .hds-form-file-input:disabled:focus::file-selector-button::before, .hds-form-file-input[disabled]:focus::file-selector-button::before, .hds-form-file-input.mock-disabled:focus::file-selector-button::before, .hds-form-file-input:disabled:hover::file-selector-button::before, .hds-form-file-input[disabled]:hover::file-selector-button::before, .hds-form-file-input.mock-disabled:hover::file-selector-button::before { + border-color: transparent; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-legend { + display: block; + color: var(--token-form-legend-color); +} +.hds-form-legend .hds-badge { + vertical-align: initial; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-group { + display: block; + margin: 0; + padding: 0; + border: none; +} + +.hds-form-group__legend { + margin: 0 0 8px 0; + padding: 0; +} + +.hds-form-group__control-fields-wrapper .hds-form-group__legend ~ .hds-form-label { + font-weight: var(--token-typography-font-weight-regular); +} + +.hds-form-group--layout-vertical .hds-form-group__control-fields-wrapper { + display: flex; + flex-direction: column; +} +.hds-form-group--layout-vertical .hds-form-group__control-field + .hds-form-group__control-field { + margin-top: 12px; +} + +.hds-form-group--layout-horizontal .hds-form-group__control-fields-wrapper { + display: flex; + flex-wrap: wrap; + margin-bottom: -4px; +} +.hds-form-group--layout-horizontal .hds-form-group__control-field { + margin-right: 16px; + margin-bottom: 4px; +} + +.hds-form-group__helper-text { + margin-bottom: 8px; +} + +.hds-form-group__error { + margin-top: 8px; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-indicator--optional { + color: var(--token-form-indicator-optional-color); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-checkbox { + width: var(--token-form-checkbox-size); + height: var(--token-form-checkbox-size); + margin: 0; + padding: 0; + background-position: center center; + background-size: var(--token-form-checkbox-background-image-size) var(--token-form-checkbox-background-image-size); + border-style: solid; + border-width: var(--token-form-checkbox-border-width); + border-radius: var(--token-form-checkbox-border-radius); + cursor: pointer; + appearance: none; +} +.hds-form-checkbox:not(:checked, :indeterminate) { + background-color: var(--token-form-control-base-surface-color-default); + border-color: var(--token-form-control-base-border-color-default); + box-shadow: var(--token-form-control-base-box-shadow-default); +} +.hds-form-checkbox:checked { + background-color: var(--token-form-control-checked-surface-color-default); + background-image: var(--token-form-checkbox-background-image-data-url); + border-color: var(--token-form-control-checked-border-color-default); +} +.hds-form-checkbox:indeterminate { + background-color: var(--token-form-control-checked-surface-color-default); + background-image: var(--token-form-checkbox-background-image-data-url-indeterminate); + border-color: var(--token-form-control-checked-border-color-default); +} +.hds-form-checkbox:hover:not(:checked, :indeterminate), .hds-form-checkbox.mock-hover:not(:checked, :indeterminate) { + background-color: var(--token-form-control-base-surface-color-hover); + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-checkbox:hover:checked, .hds-form-checkbox.mock-hover:checked, .hds-form-checkbox:hover:indeterminate, .hds-form-checkbox.mock-hover:indeterminate { + background-color: var(--token-form-control-checked-border-color-default); + border-color: var(--token-form-control-checked-border-color-hover); +} +.hds-form-checkbox:focus, .hds-form-checkbox.mock-focus { + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: 1px; +} +.hds-form-checkbox:disabled:not(:checked, :indeterminate) { + background-color: var(--token-form-control-disabled-surface-color); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-checkbox:disabled:checked { + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-checkbox-background-image-data-url-disabled); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-checkbox:disabled:indeterminate { + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-checkbox-background-image-data-url-indeterminate-disabled); + background-repeat: no-repeat; + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-masked-input { + position: relative; + display: grid; + grid-template-areas: "input copy-button"; + grid-template-columns: 1fr auto; + width: 100%; +} +.hds-form-masked-input .hds-form-masked-input__control { + grid-area: input; + padding-right: calc(var(--token-form-control-padding) + var(--token-form-masked-input-toggle-button-size)); + scrollbar-width: thin; +} + +.hds-form-masked-input--is-masked .hds-form-masked-input__control { + -webkit-text-security: disc; +} + +.hds-form-masked-input--is-not-masked .hds-form-masked-input__control { + -webkit-text-security: none; +} + +.hds-form-masked-input__toggle-button { + position: absolute; + top: calc(var(--token-form-control-padding) - var(--token-form-control-border-width)); + right: calc(var(--token-form-control-padding) - var(--token-form-control-border-width)); + grid-area: input; +} + +.hds-form-masked-input__copy-button { + grid-area: copy-button; + align-self: flex-start; + margin-left: var(--token-form-masked-input-copy-button-margin-right); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-radio { + width: var(--token-form-radio-size); + height: var(--token-form-radio-size); + margin: 0; + padding: 0; + background-position: center center; + background-size: var(--token-form-radio-background-image-size) var(--token-form-radio-background-image-size); + border-style: solid; + border-width: var(--token-form-radio-border-width); + border-radius: 50%; + cursor: pointer; + appearance: none; +} +.hds-form-radio:not(:checked) { + background-color: var(--token-form-control-base-surface-color-default); + border-color: var(--token-form-control-base-border-color-default); + box-shadow: var(--token-form-control-base-box-shadow-default); +} +.hds-form-radio:checked { + background-color: var(--token-form-control-checked-surface-color-default); + background-image: var(--token-form-radio-background-image-data-url); + border-color: var(--token-form-control-checked-border-color-default); +} +.hds-form-radio:hover:not(:checked), .hds-form-radio.mock-hover:not(:checked) { + background-color: var(--token-form-control-base-surface-color-hover); + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-radio:hover:checked, .hds-form-radio.mock-hover:checked { + background-color: var(--token-form-control-checked-border-color-default); + border-color: var(--token-form-control-checked-border-color-hover); +} +.hds-form-radio:focus, .hds-form-radio.mock-focus { + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: var(--token-form-radio-outline-offset); +} +.hds-form-radio:disabled:not(:checked) { + background-color: var(--token-form-control-disabled-surface-color); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-radio:disabled:checked { + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-radio-background-image-data-url-disabled); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-group--radio-cards .hds-form-group__control-fields-wrapper { + margin: calc(-1 * var(--token-form-radiocard-group-gap) / 2); +} +.hds-form-group--radio-cards .hds-form-group__legend { + margin-bottom: var(--token-form-radiocard-group-legend-margin-bottom); +} +.hds-form-group--radio-cards .hds-form-radio-card { + margin: calc(var(--token-form-radiocard-group-gap) / 2); +} +.hds-form-group--radio-cards .hds-form-radio-card--has-fluid-width { + flex: 1 0 0; +} +.hds-form-group--radio-cards .hds-form-radio-card--has-fixed-width { + flex: 1 0 100%; +} + +.hds-form-radio-card { + display: flex; + flex-direction: column; + background-color: var(--token-color-surface-primary); + border: var(--token-form-radiocard-border-width) solid var(--token-color-border-primary); + border-radius: var(--token-form-radiocard-border-radius); + box-shadow: var(--token-form-radiocard-box-shadow-default); + cursor: pointer; +} +.hds-form-radio-card .hds-form-radio-card__control { + outline-color: transparent; +} +.hds-form-radio-card:hover, .hds-form-radio-card.mock-hover { + box-shadow: var(--token-form-radiocard-box-shadow-hover); + transition: var(--token-form-radiocard-transition-duration); +} +.hds-form-radio-card:focus-within, .hds-form-radio-card.mock-focus { + border-color: var(--token-color-focus-action-internal); + box-shadow: var(--token-form-radiocard-box-shadow-focus); +} +.hds-form-radio-card--checked, .hds-form-radio-card.mock-checked { + border-color: var(--token-color-palette-blue-300); +} +.hds-form-radio-card--checked .hds-form-radio-card__control-wrapper, .hds-form-radio-card.mock-checked .hds-form-radio-card__control-wrapper { + background-color: var(--token-color-surface-action); + border-color: var(--token-color-border-action); +} +.hds-form-radio-card--checked:hover, .hds-form-radio-card--checked.mock-hover, .hds-form-radio-card.mock-checked:hover, .hds-form-radio-card.mock-checked.mock-hover { + border-color: var(--token-color-palette-blue-400); +} +.hds-form-radio-card--disabled, .hds-form-radio-card.mock-disabled { + background-color: var(--token-color-surface-interactive-disabled); + border-color: var(--token-color-border-primary); + box-shadow: var(--token-form-radiocard-box-shadow-disabled); + cursor: not-allowed; +} +.hds-form-radio-card--disabled .hds-form-radio-card__control-wrapper, .hds-form-radio-card.mock-disabled .hds-form-radio-card__control-wrapper { + background-color: var(--token-color-surface-interactive-disabled); + border-color: var(--token-color-border-primary); +} +.hds-form-radio-card--disabled .hds-form-radio-card__content, .hds-form-radio-card.mock-disabled .hds-form-radio-card__content { + opacity: 0.5; +} + +.hds-form-radio-card--align-left { + text-align: left; +} + +.hds-form-radio-card--align-center { + text-align: center; +} +.hds-form-radio-card--align-center .hds-icon { + margin: auto; +} + +.hds-form-radio-card--control-bottom .hds-form-radio-card__control-wrapper { + border-top-width: var(--token-form-radiocard-border-width); + border-top-style: solid; + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; +} + +.hds-form-radio-card--control-left { + flex-direction: row-reverse; +} +.hds-form-radio-card--control-left .hds-form-radio-card__control-wrapper { + display: flex; + align-items: center; + border-right-width: var(--token-form-radiocard-border-width); + border-right-style: solid; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; +} + +.hds-form-radio-card__content { + flex: 1; + padding: var(--token-form-radiocard-content-padding); +} +.hds-form-radio-card__content .hds-badge { + margin-bottom: 12px; +} + +.hds-form-radio-card__label { + display: block; + margin: 8px 0; + color: var(--token-form-label-color); + overflow-wrap: break-word; +} +.hds-form-radio-card__label:first-child { + margin-top: 0; +} + +.hds-form-radio-card__description { + display: block; + color: var(--token-color-foreground-primary); +} + +.hds-form-radio-card__control-wrapper { + padding: var(--token-form-radiocard-control-padding); + background-color: var(--token-color-surface-faint); + border-color: var(--token-color-border-primary); +} + +.hds-form-radio-card__control { + display: block; + margin: auto; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-select { + max-width: 100%; + padding: var(--token-form-control-padding); + padding-right: var(--token-form-control-padding-with-icon); + color: var(--token-form-control-base-foreground-value-color); + background-color: var(--token-form-control-base-surface-color-default); + background-image: var(--token-form-select-background-image-data-url); + background-repeat: no-repeat; + background-position: right var(--token-form-select-background-image-position-right-x) top var(--token-form-select-background-image-position-top-y); + background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size); + border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); + border-radius: var(--token-form-control-border-radius); + box-shadow: var(--token-elevation-low-box-shadow); + appearance: none; +} +.hds-form-select:hover, .hds-form-select.mock-hover { + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-select:focus, .hds-form-select.mock-focus { + border-color: var(--token-color-focus-action-internal); + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: var(--token-form-select-outline-offset); +} +.hds-form-select:disabled { + color: var(--token-form-control-disabled-foreground-color); + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-select-background-image-data-url-disabled); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-select.hds-form-select--is-invalid { + border-color: var(--token-form-control-invalid-border-color-default); +} +.hds-form-select.hds-form-select--is-invalid:hover, .hds-form-select.hds-form-select--is-invalid.mock-hover { + border-color: var(--token-form-control-invalid-border-color-hover); +} +.hds-form-select.hds-form-select--is-invalid:focus, .hds-form-select.hds-form-select--is-invalid.mock-focus { + border-color: var(--token-color-focus-critical-internal); + outline-color: var(--token-form-control-invalid-outline-color); +} + +.hds-form-select[multiple], .hds-form-select[size] { + background: none; +} +.hds-form-select[multiple] option, .hds-form-select[size] option { + margin: 2px auto; + border-radius: 3px; +} +.hds-form-select[multiple] option:hover, .hds-form-select[size] option:hover { + color: var(--token-color-foreground-action); +} +.hds-form-select[multiple] option:disabled, .hds-form-select[size] option:disabled { + color: var(--token-color-foreground-disabled); +} +.hds-form-select[multiple] option:checked, .hds-form-select[size] option:checked { + color: var(--token-color-foreground-high-contrast); + background: var(--token-color-palette-blue-200); +} +.hds-form-select[multiple] optgroup, .hds-form-select[size] optgroup { + color: var(--token-color-foreground-strong); + font-weight: var(--token-typography-font-weight-semibold); + font-style: normal; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-super-select { + width: 100%; +} + +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger { + display: flex; + align-items: center; + max-width: 100%; + min-height: 36px; + padding-top: 4px; + padding-right: calc(var(--token-form-control-padding) + 24px); + padding-bottom: 4px; + padding-left: 11px; + color: var(--token-form-control-base-foreground-value-color); + line-height: var(--token-typography-body-200-line-height); + background-color: var(--token-form-control-base-surface-color-default); + background-image: var(--token-form-select-background-image-data-url); + background-repeat: no-repeat; + background-position: right var(--token-form-select-background-image-position-right-x) center, top var(--token-form-select-background-image-position-top-y) left 20px; + background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size); + border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); + border-radius: var(--token-form-control-border-radius); + box-shadow: var(--token-elevation-low-box-shadow); +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger:hover, .hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger.mock-hover, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger:hover, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger.mock-hover { + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger:focus, .hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger.mock-focus, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger:focus, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger.mock-focus { + border-color: var(--token-color-focus-action-internal); + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: 0; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger[aria-expanded=true].ember-basic-dropdown-trigger--in-place, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger[aria-expanded=true].ember-basic-dropdown-trigger--in-place { + border-radius: var(--token-form-control-border-radius); +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger .ember-power-select-status-icon, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger .ember-power-select-status-icon { + display: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger .ember-power-select-placeholder, +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger .ember-power-select-selected-item, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger .ember-power-select-placeholder, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger .ember-power-select-selected-item { + flex: 1; + margin-left: 0; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger .ember-power-select-placeholder, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger .ember-power-select-placeholder { + color: var(--token-form-control-base-foreground-placeholder-color); + font-size: var(--token-typography-body-200-font-size); + font-family: var(--token-typography-body-200-font-family); + line-height: var(--token-typography-body-200-line-height); +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger[aria-disabled=true], +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger[aria-disabled=true] { + color: var(--token-form-control-disabled-foreground-color); + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-select-background-image-data-url-disabled); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; + opacity: 1; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger[aria-disabled=true] .ember-power-select-selected-item, +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger[aria-disabled=true] .ember-power-select-selected-item { + opacity: inherit; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content { + max-width: var(--hds-form-super-select-dropdown-max-width, none); + margin: 0; + border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); + border-radius: var(--token-form-control-border-radius); +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content.ember-basic-dropdown-content--in-place { + box-shadow: var(--token-elevation-high-box-shadow), var(--token-elevation-high-box-shadow); +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content.ember-basic-dropdown-content--below { + margin-top: 4px; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content.ember-basic-dropdown-content--above { + top: unset !important; + bottom: 100%; + margin-bottom: 4px; +} +.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content > .ember-power-select-options > .hds-form-super-select__option-group:first-child::before { + display: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-options { + padding: 3px 0; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-options .ember-power-select-options { + padding: 0; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option { + position: relative; + min-height: 36px; + padding: 7px 7px 7px 39px; + color: var(--token-color-foreground-primary); + font-size: var(--token-typography-body-200-font-size); + font-family: var(--token-typography-body-200-font-family); + line-height: var(--token-typography-body-200-line-height); + overflow-wrap: break-word; + border: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option + .ember-power-select-option { + margin-top: 8px; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option[aria-current=true] { + color: var(--token-form-control-base-foreground-value-color); + background-color: var(--token-form-control-base-surface-color-default); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option[aria-selected=true] { + background-color: var(--token-form-control-base-surface-color-default); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option[aria-current=true], .hds-form-super-select .ember-basic-dropdown .ember-power-select-option:hover, .hds-form-super-select .ember-basic-dropdown .ember-power-select-option.mock-hover { + border: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option[aria-current=true]::after, .hds-form-super-select .ember-basic-dropdown .ember-power-select-option:hover::after, .hds-form-super-select .ember-basic-dropdown .ember-power-select-option.mock-hover::after { + position: absolute; + top: 6px; + bottom: 6px; + left: 3px; + width: 2px; + background-color: var(--token-color-foreground-action-hover); + border-radius: 500px; + content: ""; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option:active::after, .hds-form-super-select .ember-basic-dropdown .ember-power-select-option.mock-active::after { + background-color: var(--token-color-foreground-action-active); +} +.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group:first-child .hds-form-super-select__option-group-title { + margin-top: 0; +} +.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group::before { + display: block; + height: 5px; + margin: 7px 5px 9px 5px; + border-bottom: 1px solid var(--token-color-border-primary); + content: ""; +} +.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group .hds-form-super-select__option-group { + padding-left: 16px; +} +.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group .hds-form-super-select__option-group:first-child::before { + display: none; +} +.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group-title { + margin: 8px 0; + padding: 6px 7px 2px 15px; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search { + margin-bottom: 3px; + padding: 11px 11px 0 11px; + border-radius: var(--token-form-control-border-radius); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input { + width: 100%; + min-height: 36px; + padding: var(--token-form-control-padding); + color: var(--token-form-control-base-foreground-value-color); + font-size: var(--token-typography-body-200-font-size); + font-family: var(--token-typography-body-200-font-family); + line-height: 1rem; + background-color: var(--token-form-control-base-surface-color-default); + border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); + border-radius: var(--token-form-control-border-radius); + box-shadow: var(--token-elevation-inset-box-shadow); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input::placeholder { + color: var(--token-form-control-base-foreground-placeholder-color); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input:hover, .hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input.mock-hover { + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input:focus, .hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input.mock-focus { + border-color: var(--token-color-focus-action-internal); + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: 0; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input[type=search] { + padding-left: calc(var(--token-form-control-padding) + 24px); + background-image: var(--token-form-text-input-background-image-data-url-search); + background-repeat: no-repeat; + background-position: var(--token-form-text-input-background-image-position-x) 50%; + background-size: var(--token-form-text-input-background-image-size); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input[type=search]::-webkit-search-cancel-button { + width: var(--token-form-text-input-background-image-size); + height: var(--token-form-text-input-background-image-size); + background-image: var(--token-form-text-input-background-image-data-url-search-cancel); + background-position: center center; + background-size: var(--token-form-text-input-background-image-size); + appearance: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-multiple-options { + display: flex; + flex-grow: 1; + flex-wrap: wrap; + gap: 4px; + min-width: 0; + list-style: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-multiple-option { + float: none; + min-width: 0; + margin: 0; + padding: 3px 10px 5px 10px; + font-size: var(--token-typography-body-100-font-size); + font-family: var(--token-typography-body-100-font-family); + line-height: 1rem; + vertical-align: middle; + overflow-wrap: break-word; + background-color: var(--token-color-surface-interactive); + border: 1px solid var(--token-color-border-strong); + border-radius: 50px; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-multiple-remove-btn { + display: none; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger-multiple-input { + color: var(--token-form-control-base-foreground-value-color); + font-size: var(--token-typography-body-200-font-size); + font-family: var(--token-typography-body-200-font-family); +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger-multiple-input::-webkit-search-cancel-button { + width: var(--token-form-text-input-background-image-size); + height: var(--token-form-text-input-background-image-size); + background-image: var(--token-form-text-input-background-image-data-url-search-cancel); + background-position: center center; + background-size: var(--token-form-text-input-background-image-size); + cursor: pointer; + -webkit-appearance: none; +} + +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger, +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger { + border-color: var(--token-form-control-invalid-border-color-default); +} +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger:hover, .hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger.mock-hover, +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger:hover, +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger.mock-hover { + border-color: var(--token-form-control-invalid-border-color-hover); +} +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger:focus, .hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger.mock-focus, +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger:focus, +.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger.mock-focus { + border-color: var(--token-color-focus-critical-internal); + outline-color: var(--token-color-focus-critical-external); +} + +.hds-form-super-select.hds-form-super-select--show-only-selected .ember-basic-dropdown .ember-power-select-option:not([aria-selected=true]) { + display: none; +} + +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message) { + background-repeat: no-repeat; + background-position: 15px 10px; + background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size); +} +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true]) { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.78 4.28a.75.75 0 00-1.06-1.06l-7.97 7.97-3.47-3.47a.75.75 0 00-1.06 1.06l4 4a.75.75 0 001.06 0l8.5-8.5z' fill='%231060ff'/%3E%3C/svg%3E"); +} +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true]):hover, .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true]).mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true]):active, .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true]).mock-active { + color: var(--token-color-foreground-action-active); +} +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-current=true], .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message):hover, .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message).mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message):active, .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message).mock-active { + color: var(--token-color-foreground-action-active); +} +.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true][aria-disabled=true] { + background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7803 4.28033C15.0732 3.98744 15.0732 3.51256 14.7803 3.21967C14.4874 2.92678 14.0126 2.92678 13.7197 3.21967L5.75 11.1893L2.28033 7.71967C1.98744 7.42678 1.51256 7.42678 1.21967 7.71967C0.926777 8.01256 0.926777 8.48744 1.21967 8.78033L5.21967 12.7803C5.51256 13.0732 5.98744 13.0732 6.28033 12.7803L14.7803 4.28033Z' fill='%238C909C'/%3E%3C/svg%3E"); +} + +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message) { + position: relative; +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)::before { + position: absolute; + top: 9px; + left: 15px; + display: block; + width: var(--token-form-checkbox-size); + height: var(--token-form-checkbox-size); + background-position: center center; + background-size: var(--token-form-checkbox-background-image-size) var(--token-form-checkbox-background-image-size); + border-style: solid; + border-width: var(--token-form-checkbox-border-width); + border-radius: var(--token-form-checkbox-border-radius); + cursor: pointer; + content: ""; +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message):not([aria-selected=true])::before { + background-color: var(--token-form-control-base-surface-color-default); + border-color: var(--token-form-control-base-border-color-default); + box-shadow: var(--token-elevation-inset-box-shadow); +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-current=true]::before, .hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message):hover:not([aria-selected=true])::before, .hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message).mock-hover:not([aria-selected=true])::before { + background-color: var(--token-form-control-base-surface-color-hover); + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-disabled=true]:not([aria-selected=true])::before { + background-color: var(--token-form-control-disabled-surface-color); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true])::before { + background-color: var(--token-form-control-checked-surface-color-default); + background-image: var(--token-form-checkbox-background-image-data-url); + border-color: var(--token-form-control-checked-border-color-default); +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true][aria-current=true]::before, .hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:hover[aria-selected=true]::before, .hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true].mock-hover[aria-selected=true]::before { + background-color: var(--token-form-control-checked-border-color-default); + border-color: var(--token-form-control-checked-border-color-hover); +} +.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true][aria-disabled=true]::before { + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-checkbox-background-image-data-url-disabled); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} + +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option--no-matches-message { + padding-left: 12px; + cursor: inherit; +} +.hds-form-super-select .ember-basic-dropdown .ember-power-select-option--no-matches-message::after { + display: none; +} + +.hds-form-super-select__after-options { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + padding: 8px 12px; + background-color: var(--token-color-surface-strong); + border-top: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); +} + +.hds-form-super-select__result-count { + margin-left: auto; +} + +.hds-form-super-select__no-options-selected { + min-height: 36px; + padding: 4px 15px 10px; +} + +.hds-form-super-select--dropdown-content-auto-width .ember-power-select-dropdown.ember-basic-dropdown-content { + width: auto; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-text-input { + width: 100%; + max-width: 100%; + padding: var(--token-form-control-padding); + color: var(--token-form-control-base-foreground-value-color); + background-color: var(--token-form-control-base-surface-color-default); + border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); + border-radius: var(--token-form-control-border-radius); + box-shadow: var(--token-form-control-base-box-shadow-default); +} +.hds-form-text-input ::placeholder { + color: var(--token-form-control-base-foreground-placeholder-color); +} +.hds-form-text-input:hover, .hds-form-text-input.mock-hover { + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-text-input:focus, .hds-form-text-input.mock-focus { + border-color: var(--token-color-focus-action-internal); + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: var(--token-form-text-input-outline-offset); +} +.hds-form-text-input:read-only { + color: var(--token-form-control-readonly-foreground-color); + background-color: var(--token-form-control-readonly-surface-color); + border-color: var(--token-form-control-readonly-border-color); + box-shadow: none; +} +.hds-form-text-input:disabled { + color: var(--token-form-control-disabled-foreground-color); + background-color: var(--token-form-control-disabled-surface-color); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-text-input.hds-form-text-input--is-invalid { + border-color: var(--token-form-control-invalid-border-color-default); +} +.hds-form-text-input.hds-form-text-input--is-invalid:hover, .hds-form-text-input.hds-form-text-input--is-invalid.mock-hover { + border-color: var(--token-form-control-invalid-border-color-hover); +} +.hds-form-text-input.hds-form-text-input--is-invalid:focus, .hds-form-text-input.hds-form-text-input--is-invalid.mock-focus { + border-color: var(--token-color-focus-critical-internal); + outline-color: var(--token-form-control-focus-outline-color); +} + +.hds-form-text-input__wrapper { + position: relative; + width: 100%; +} + +.hds-form-text-input--has-visibility-toggle { + padding-right: var(--token-form-control-padding-with-icon); +} + +.hds-form-text-input__visibility-toggle { + position: absolute; + top: calc(var(--token-form-control-padding) - var(--token-form-control-border-width)); + right: calc(var(--token-form-control-padding) - var(--token-form-control-border-width)); +} + +.hds-form-text-input[type=date], .hds-form-text-input[type=time], .hds-form-text-input[type=datetime-local], .hds-form-text-input[type=month], .hds-form-text-input[type=week] { + width: initial; +} +.hds-form-text-input[type=date]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=time]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=month]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=week]:disabled::-webkit-calendar-picker-indicator { + visibility: visible; + opacity: 0.5; +} +.hds-form-text-input[type=date][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=time][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=month][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=week][readonly]::-webkit-calendar-picker-indicator { + visibility: visible; +} +.hds-form-text-input[type=date]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=month]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=week]::-webkit-calendar-picker-indicator { + background-image: var(--token-form-text-input-background-image-data-url-date); + background-position: center center; + background-size: var(--token-form-text-input-background-image-size); +} +.hds-form-text-input[type=time]::-webkit-calendar-picker-indicator { + background-image: var(--token-form-text-input-background-image-data-url-time); + background-position: center center; + background-size: var(--token-form-text-input-background-image-size); +} +.hds-form-text-input[type=search] { + padding-left: calc(var(--token-form-control-padding) + 24px); + background-image: var(--token-form-text-input-background-image-data-url-search); + background-repeat: no-repeat; + background-position: var(--token-form-text-input-background-image-position-x) 50%; + background-size: var(--token-form-text-input-background-image-size); +} +.hds-form-text-input[type=search]::-webkit-search-cancel-button { + width: var(--token-form-text-input-background-image-size); + height: var(--token-form-text-input-background-image-size); + background-image: var(--token-form-text-input-background-image-data-url-search-cancel); + background-position: center center; + background-size: var(--token-form-text-input-background-image-size); + -webkit-appearance: none; +} +.hds-form-text-input[type=search].hds-form-text-input--is-loading { + background-image: var(--token-form-text-input-background-image-data-url-search-loading); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-textarea { + width: 100%; + max-width: 100%; + min-height: var(--token-form-text-area-min-height); + padding: var(--token-form-control-padding); + color: var(--token-form-control-base-foreground-value-color); + background-color: var(--token-form-control-base-surface-color-default); + border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default); + border-radius: var(--token-form-control-border-radius); + box-shadow: var(--token-form-control-base-box-shadow-default); + resize: vertical; +} +.hds-form-textarea ::placeholder { + color: var(--token-form-control-base-foreground-placeholder-color); +} +.hds-form-textarea:hover, .hds-form-textarea.mock-hover { + border-color: var(--token-form-control-base-border-color-hover); +} +.hds-form-textarea:focus, .hds-form-textarea.mock-focus { + border-color: var(--token-color-focus-action-internal); + outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color); + outline-offset: var(--token-form-text-area-outline-offset); +} +.hds-form-textarea:read-only { + color: var(--token-form-control-readonly-foreground-color); + background-color: var(--token-form-control-readonly-surface-color); + border-color: var(--token-form-control-readonly-border-color); + box-shadow: none; +} +.hds-form-textarea:disabled { + color: var(--token-form-control-disabled-foreground-color); + background-color: var(--token-form-control-disabled-surface-color); + border-color: var(--token-form-control-disabled-border-color); + box-shadow: none; + cursor: not-allowed; +} +.hds-form-textarea.hds-form-textarea--is-invalid { + border-color: var(--token-form-control-invalid-border-color-default); +} +.hds-form-textarea.hds-form-textarea--is-invalid:hover, .hds-form-textarea.hds-form-textarea--is-invalid.mock-hover { + border-color: var(--token-form-control-invalid-border-color-hover); +} +.hds-form-textarea.hds-form-textarea--is-invalid:focus, .hds-form-textarea.hds-form-textarea--is-invalid.mock-focus { + border-color: var(--token-color-focus-critical-internal); + outline-color: var(--token-form-control-invalid-outline-color); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-toggle { + position: relative; + display: inline-block; + isolation: isolate; +} + +.hds-form-toggle__control { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + display: block; + height: 100%; + margin: 0; + padding: 0; + color: transparent; + background-color: transparent; + border: none; + outline: none; + cursor: pointer; + opacity: 0; + appearance: none; +} +.hds-form-toggle__control:disabled { + cursor: not-allowed; +} + +.hds-form-toggle__facade { + position: relative; + display: block; + width: var(--token-form-toggle-width); + height: var(--token-form-toggle-height); + background-image: var(--token-form-toggle-background-image-data-url); + background-repeat: no-repeat; + background-position: var(--token-form-toggle-background-image-position-x) 50%; + background-size: var(--token-form-toggle-background-image-size) var(--token-form-toggle-background-image-size); + border: var(--token-form-toggle-border-width) solid var(--border-color); + border-radius: calc(var(--token-form-toggle-height) / 2); +} +@media (prefers-reduced-motion: no-preference) { + .hds-form-toggle__facade { + transition-timing-function: var(--token-form-toggle-transition-timing-function); + transition-duration: var(--token-form-toggle-transition-duration); + transition-property: all; + } +} +.hds-form-toggle__facade::after { + position: absolute; + top: calc(var(--token-form-toggle-border-width) * -1); + left: calc(var(--token-form-toggle-border-width) * -1); + width: var(--token-form-toggle-thumb-size); + height: var(--token-form-toggle-thumb-size); + background-color: var(--token-form-control-base-surface-color-default); + border: var(--token-form-toggle-border-width) solid var(--border-color); + border-radius: 50%; + transform: translate3d(0, 0, 0); + content: ""; +} +@media (prefers-reduced-motion: no-preference) { + .hds-form-toggle__facade::after { + transition-timing-function: var(--token-form-toggle-transition-timing-function); + transition-duration: var(--token-form-toggle-transition-duration); + transition-property: all; + } +} +.hds-form-toggle__facade::before { + --shift: calc(-1 * (var(--token-form-toggle-outline-width) + var(--token-form-toggle-outline-offset) + var(--token-form-toggle-border-width))); + position: absolute; + top: var(--shift); + right: var(--shift); + bottom: var(--shift); + left: var(--shift); + margin: auto; + border-width: var(--token-form-toggle-outline-width); + border-radius: calc(var(--token-form-toggle-height) / 2 + var(--token-form-toggle-outline-width) + var(--token-form-toggle-outline-offset)); + content: ""; +} +:not(:checked) + .hds-form-toggle__facade { + --border-color: var(--token-form-control-base-border-color-default); + background-color: var(--token-form-toggle-base-surface-color-default); +} +:checked + .hds-form-toggle__facade { + --border-color: var(--token-form-control-checked-border-color-default); + background-color: var(--token-form-control-checked-surface-color-default); +} +:checked + .hds-form-toggle__facade::after { + transform: translate3d(calc(var(--token-form-toggle-width) - var(--token-form-toggle-thumb-size)), 0, 0); +} +:hover:not(:checked) + .hds-form-toggle__facade, .mock-hover:not(:checked) + .hds-form-toggle__facade { + --border-color: var(--token-form-control-base-border-color-hover); +} +:hover:checked + .hds-form-toggle__facade, .mock-hover:checked + .hds-form-toggle__facade { + --border-color: var(--token-form-control-checked-border-color-hover); + background-color: var(--token-form-control-checked-border-color-default); +} +:focus + .hds-form-toggle__facade::before, .mock-focus + .hds-form-toggle__facade::before { + border-color: var(--token-form-control-focus-outline-color); + border-style: solid; +} +:disabled:not(:checked) + .hds-form-toggle__facade, :disabled:checked + .hds-form-toggle__facade { + --border-color: var(--token-form-control-disabled-border-color); + background-color: var(--token-form-control-disabled-surface-color); + background-image: var(--token-form-toggle-background-image-data-url-disabled); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-form-visibility-toggle { + width: var(--token-form-visibility-toggle-size); + height: var(--token-form-visibility-toggle-size); + padding: var(--token-form-visibility-toggle-padding); + color: var(--token-form-visibility-toggle-color); + background-color: var(--token-form-visibility-toggle-background-color); + border: var(--token-form-visibility-toggle-border-width) solid var(--token-form-visibility-toggle-border-color); + cursor: pointer; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-icon { + display: block; +} + +.hds-icon--is-inline { + display: inline-block; +} + +@keyframes hds-icon-animation-rotation { + to { + transform: rotate(360deg); + } +} +.hds-icon--animation-loading { + animation: hds-icon-animation-rotation 9s linear infinite; +} + +.hds-icon--animation-running { + animation: hds-icon-animation-rotation 9s linear infinite; +} + +@media (prefers-reduced-motion: no-preference) { + .hds-icon--animation-loading { + animation-duration: 0.7s; + } + .hds-icon--animation-running { + animation-duration: 1s; + } +} +.flight-sprite-container { + position: absolute; + width: 0; + height: 0; + visibility: hidden; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-icon-tile { + position: relative; + display: flex; + border: 1px solid transparent; + border-radius: 4px; +} + +.hds-icon-tile__icon, +.hds-icon-tile__logo { + display: flex; + margin: auto; +} + +.hds-icon-tile__extra { + position: absolute; + right: -6px; + bottom: -6px; + display: flex; + box-sizing: content-box; + background-color: var(--token-color-surface-primary); + border: 1px solid var(--token-color-border-primary); +} + +.hds-icon-tile__extra-icon { + display: flex; + margin: auto; + color: var(--token-color-foreground-strong); +} + +.hds-icon-tile--size-small { + width: 1.75rem; + height: 1.75rem; + border-radius: 5px; +} +.hds-icon-tile--size-small .hds-icon-tile__icon { + width: 1rem; + height: 1rem; +} +.hds-icon-tile--size-small .hds-icon-tile__logo { + width: 1.125rem; + height: 1.125rem; +} +.hds-icon-tile--size-small .hds-icon-tile__extra { + width: 1.125rem; + height: 1.125rem; + border-radius: 4px; +} +.hds-icon-tile--size-small .hds-icon-tile__extra-icon { + width: 0.75rem; + height: 0.75rem; +} + +.hds-icon-tile--size-medium { + width: 2.5rem; + height: 2.5rem; + border-radius: 6px; +} +.hds-icon-tile--size-medium .hds-icon-tile__icon { + width: 1.5rem; + height: 1.5rem; +} +.hds-icon-tile--size-medium .hds-icon-tile__logo { + width: 1.75rem; + height: 1.75rem; +} +.hds-icon-tile--size-medium .hds-icon-tile__extra { + width: 1.25rem; + height: 1.25rem; + border-radius: 5px; +} +.hds-icon-tile--size-medium .hds-icon-tile__extra-icon { + width: 0.75rem; + height: 0.75rem; +} + +.hds-icon-tile--size-large { + width: 3rem; + height: 3rem; + border-radius: 6px; +} +.hds-icon-tile--size-large .hds-icon-tile__icon { + width: 1.5rem; + height: 1.5rem; +} +.hds-icon-tile--size-large .hds-icon-tile__logo { + width: 2rem; + height: 2rem; +} +.hds-icon-tile--size-large .hds-icon-tile__extra { + width: 1.5rem; + height: 1.5rem; + border-radius: 5px; +} +.hds-icon-tile--size-large .hds-icon-tile__extra-icon { + width: 1rem; + height: 1rem; +} + +.hds-icon-tile--logo { + background-color: var(--token-color-surface-primary); + border-color: var(--token-color-border-primary); +} + +.hds-icon-tile--icon.hds-icon-tile--color-neutral { + color: var(--token-color-foreground-faint); + background-color: var(--token-color-surface-strong); +} +.hds-icon-tile--icon.hds-icon-tile--color-boundary { + color: var(--token-color-boundary-foreground); + background-color: var(--token-color-boundary-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-consul { + color: var(--token-color-consul-foreground); + background-color: var(--token-color-consul-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-hcp { + color: var(--token-color-palette-hcp-brand); + background-color: var(--token-color-surface-strong); +} +.hds-icon-tile--icon.hds-icon-tile--color-nomad { + color: var(--token-color-nomad-foreground); + background-color: var(--token-color-nomad-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-packer { + color: var(--token-color-packer-foreground); + background-color: var(--token-color-packer-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-terraform { + color: var(--token-color-terraform-foreground); + background-color: var(--token-color-terraform-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-vagrant { + color: var(--token-color-vagrant-foreground); + background-color: var(--token-color-vagrant-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-vault { + color: var(--token-color-vault-foreground); + background-color: var(--token-color-vault-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-vault-secrets { + color: var(--token-color-vault-secrets-foreground); + background-color: var(--token-color-vault-secrets-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-vault-radar { + color: var(--token-color-vault-radar-foreground); + background-color: var(--token-color-vault-radar-surface); +} +.hds-icon-tile--icon.hds-icon-tile--color-waypoint { + color: var(--token-color-waypoint-foreground); + background-color: var(--token-color-waypoint-surface); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-link-inline { + border-radius: 2px; +} +.hds-link-inline:focus, .hds-link-inline.mock-focus, .hds-link-inline:focus-visible { + text-decoration: none; + outline: 2px solid var(--token-color-focus-action-internal); + outline-offset: 1px; +} + +.hds-link-inline__icon { + display: inline-block; + width: 1em; + height: 1em; + vertical-align: text-bottom; +} +.hds-link-inline--icon-leading > .hds-link-inline__icon { + margin-right: 0.25em; +} +.hds-link-inline--icon-trailing > .hds-link-inline__icon { + margin-left: 0.25em; +} + +.hds-link-inline--color-primary { + color: var(--token-color-foreground-action); +} +.hds-link-inline--color-primary:hover, .hds-link-inline--color-primary.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-link-inline--color-primary:active, .hds-link-inline--color-primary.mock-active { + color: var(--token-color-foreground-action-active); +} + +.hds-link-inline--color-secondary { + color: var(--token-color-foreground-strong); +} +.hds-link-inline--color-secondary:hover, .hds-link-inline--color-secondary.mock-hover { + color: var(--token-color-foreground-primary); +} +.hds-link-inline--color-secondary:active, .hds-link-inline--color-secondary.mock-active { + color: var(--token-color-foreground-faint); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-link-standalone { + display: flex; + gap: 0.375rem; + align-items: center; + justify-content: center; + width: fit-content; + padding-top: 4px; + padding-bottom: 4px; + font-weight: var(--token-typography-font-weight-regular); + font-family: var(--token-typography-font-stack-text); + background-color: transparent; + border: 1px solid transparent; + text-decoration-color: transparent; +} + +.hds-link-standalone__icon { + display: block; +} + +.hds-link-standalone__text { + display: block; + flex: 1 0 0; + text-decoration: underline; + text-decoration-color: transparent; + transition: text-decoration-color 0.25s ease-in; +} + +.hds-link-standalone--size-small .hds-link-standalone__icon { + width: 0.75rem; + height: 0.75rem; +} +.hds-link-standalone--size-small .hds-link-standalone__text { + font-size: 0.8125rem; + line-height: 1.231; +} + +.hds-link-standalone--size-medium .hds-link-standalone__icon { + width: 1rem; + height: 1rem; +} +.hds-link-standalone--size-medium .hds-link-standalone__text { + font-size: 0.875rem; + line-height: 1.143; +} + +.hds-link-standalone--size-large .hds-link-standalone__icon { + width: 1.5rem; + height: 1.5rem; +} +.hds-link-standalone--size-large .hds-link-standalone__text { + font-size: 1rem; + line-height: 1.5; +} + +.hds-link-standalone--color-primary { + color: var(--token-color-foreground-action); +} +.hds-link-standalone--color-primary:hover, .hds-link-standalone--color-primary.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-link-standalone--color-primary:hover .hds-link-standalone__text, .hds-link-standalone--color-primary.mock-hover .hds-link-standalone__text { + text-decoration-color: #4e81e8; +} +.hds-link-standalone--color-primary:active, .hds-link-standalone--color-primary.mock-active { + color: var(--token-color-foreground-action-active); +} +.hds-link-standalone--color-primary:active .hds-link-standalone__text, .hds-link-standalone--color-primary.mock-active .hds-link-standalone__text { + text-decoration-color: #396ed6; +} +.hds-link-standalone--color-primary:active::before, .hds-link-standalone--color-primary.mock-active::before { + background-color: var(--token-color-surface-action); +} + +.hds-link-standalone--color-secondary { + color: var(--token-color-foreground-strong); +} +.hds-link-standalone--color-secondary:hover .hds-link-standalone__text, .hds-link-standalone--color-secondary.mock-hover .hds-link-standalone__text { + text-decoration-color: #4d4d4f; +} +.hds-link-standalone--color-secondary:active, .hds-link-standalone--color-secondary.mock-active { + color: var(--token-color-foreground-primary); +} +.hds-link-standalone--color-secondary:active .hds-link-standalone__text, .hds-link-standalone--color-secondary.mock-active .hds-link-standalone__text { + text-decoration-color: #6e7075; +} +.hds-link-standalone--color-secondary:active::before, .hds-link-standalone--color-secondary.mock-active::before { + background-color: var(--token-color-surface-interactive-active); +} + +.hds-link-standalone { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-link-standalone::before { + position: absolute; + top: 0; + right: -5px; + bottom: 0; + left: -5px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-link-standalone:focus::before, .hds-link-standalone.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-link-standalone:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-link-standalone:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-link-standalone:focus:active::before, .hds-link-standalone.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-link-standalone.hds-link-standalone--icon-position-leading::before { + right: -7px; +} +.hds-link-standalone.hds-link-standalone--icon-position-trailing::before { + left: -7px; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-menu-primitive { + position: relative; + width: fit-content; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-modal { + position: fixed; + z-index: 50; + height: fit-content; + max-height: 95vh; + inset: 0; + margin: auto; + border-radius: 8px; + box-shadow: var(--token-surface-overlay-box-shadow); +} +.hds-modal:not([open]) { + display: none; +} +.hds-modal::backdrop { + display: none; +} + +.hds-modal--size-small { + width: min(400px, 95vw); +} + +.hds-modal--size-medium { + width: min(600px, 95vw); +} + +.hds-modal--size-large { + width: min(800px, 95vw); +} + +.hds-modal--color-warning .hds-dialog-primitive__wrapper-header { + background: var(--token-color-surface-warning); + border-bottom: 1px solid var(--token-color-border-warning); +} +.hds-modal--color-warning .hds-dialog-primitive__header, +.hds-modal--color-warning .hds-dialog-primitive__tagline { + color: var(--token-color-foreground-warning-on-surface); +} + +.hds-modal--color-critical .hds-dialog-primitive__wrapper-header { + background: var(--token-color-surface-critical); + border-bottom: 1px solid var(--token-color-border-critical); +} +.hds-modal--color-critical .hds-dialog-primitive__header, +.hds-modal--color-critical .hds-dialog-primitive__tagline { + color: var(--token-color-foreground-critical-on-surface); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-page-header { + position: relative; + display: flex; + flex-direction: column; + gap: 16px; + container-type: inline-size; +} + +.hds-page-header__body { + display: flex; + flex-direction: column; + gap: 8px 16px; +} +.hds-page-header__body .hds-icon-tile { + flex-shrink: 0; +} +@container (min-width: 400px) { + .hds-page-header__body { + flex-direction: row; + } +} + +.hds-page-header__main { + display: flex; + flex-direction: column; + flex-grow: 1; + gap: 16px; + align-items: start; + justify-content: start; +} +@container (min-width: 768px) { + .hds-page-header__main { + flex-direction: row; + justify-content: space-between; + min-width: 0; + } +} + +.hds-page-header__content { + display: flex; + flex-direction: column; + flex-grow: 1; + min-width: 0; + max-width: 100%; +} + +.hds-page-header__title-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 8px 16px; + align-items: center; +} + +.hds-page-header__title { + max-width: 100%; + overflow-wrap: break-word; +} + +.hds-page-header__badges-wrapper { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.hds-page-header__metadata { + display: flex; + flex-direction: column; + gap: 4px; +} +.hds-page-header__metadata > *:first-child { + margin-top: 8px; +} + +.hds-page-header__subtitle, +.hds-page-header__description { + overflow-wrap: break-word; +} + +.hds-page-header__actions { + display: flex; + flex-direction: row; + flex-shrink: 0; + flex-wrap: wrap; + gap: 16px; + align-items: center; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-pagination { + display: grid; + grid-template-areas: "info nav selector"; + grid-template-rows: auto; + grid-template-columns: 1fr auto 1fr; + align-items: center; + margin: 0 auto; +} +@media screen and (max-width: 1000px) { + .hds-pagination { + display: flex; + flex-wrap: wrap; + justify-content: center; + } +} +.hds-pagination .hds-pagination-info { + grid-area: info; + justify-self: flex-start; + margin-right: var(--token-pagination-child-spacing-horizontal); +} +@media screen and (max-width: 1000px) { + .hds-pagination .hds-pagination-info { + margin-top: var(--token-pagination-child-spacing-vertical); + margin-left: var(--token-pagination-child-spacing-horizontal); + } +} +.hds-pagination .hds-pagination-nav { + grid-area: nav; +} +@media screen and (max-width: 1000px) { + .hds-pagination .hds-pagination-nav { + justify-content: center; + order: -1; + width: 100%; + } +} +.hds-pagination .hds-pagination-size-selector { + grid-area: selector; + justify-self: flex-end; + margin-left: var(--token-pagination-child-spacing-horizontal); +} +@media screen and (max-width: 1000px) { + .hds-pagination .hds-pagination-size-selector { + margin-top: var(--token-pagination-child-spacing-vertical); + margin-right: var(--token-pagination-child-spacing-horizontal); + } +} + +.hds-pagination-info { + white-space: nowrap; +} + +.hds-pagination-nav { + display: flex; +} + +.hds-pagination-nav__page-list { + display: flex; + margin: 0; + padding: 0; +} + +.hds-pagination-nav__page-item { + list-style-type: none; +} + +.hds-pagination-nav__control { + display: flex; + align-items: center; + height: var(--token-pagination-nav-control-height); + padding: 0 calc(var(--token-pagination-nav-control-padding-horizontal) - 1px); + color: var(--token-color-foreground-primary); + text-decoration: none; + background-color: transparent; + border: 1px solid transparent; + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-pagination-nav__control::before { + position: absolute; + top: var(--token-pagination-nav-control-focus-inset); + right: var(--token-pagination-nav-control-focus-inset); + bottom: var(--token-pagination-nav-control-focus-inset); + left: var(--token-pagination-nav-control-focus-inset); + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-pagination-nav__control:focus::before, .hds-pagination-nav__control.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-pagination-nav__control:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-pagination-nav__control:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-pagination-nav__control:focus:active::before, .hds-pagination-nav__control.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-pagination-nav__control:hover, .hds-pagination-nav__control.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-pagination-nav__control:active, .hds-pagination-nav__control.mock-active { + color: var(--token-color-foreground-action-active); +} + +.hds-pagination-nav__arrow { + gap: var(--token-pagination-nav-control-icon-spacing); +} +.hds-pagination-nav__arrow:disabled, .hds-pagination-nav__arrow.mock-disabled { + color: var(--token-color-foreground-disabled); + cursor: not-allowed; +} + +.hds-pagination-nav__arrow--direction-prev { + flex-direction: row; + justify-content: flex-start; +} + +.hds-pagination-nav__arrow--direction-next { + flex-direction: row-reverse; + justify-content: flex-end; +} + +.hds-pagination-nav__number--is-selected { + position: relative; + color: var(--token-color-foreground-action); +} +.hds-pagination-nav__number--is-selected:hover { + color: var(--token-color-foreground-action-hover); +} +.hds-pagination-nav__number--is-selected:active { + color: var(--token-color-foreground-action-active); +} +.hds-pagination-nav__number--is-selected::after { + position: absolute; + right: calc(var(--token-pagination-nav-indicator-spacing) - 1px); + bottom: -1px; + left: calc(var(--token-pagination-nav-indicator-spacing) - 1px); + height: var(--token-pagination-nav-indicator-height); + margin: 0 auto; + background-color: currentColor; + border-radius: 2px; + content: ""; +} + +.hds-pagination-nav__ellipsis { + display: flex; + align-items: center; + height: var(--token-pagination-nav-control-height); + padding: 0 var(--token-pagination-nav-control-padding-horizontal); + color: var(--token-color-foreground-faint); +} + +.hds-pagination-size-selector { + display: flex; + align-items: center; +} +.hds-pagination-size-selector > label { + white-space: nowrap; +} +.hds-pagination-size-selector > select { + height: 28px; + margin-left: 12px; + padding: 0 24px 0 8px; + font-size: var(--token-typography-body-100-font-size); + font-family: var(--token-typography-body-100-font-family); + line-height: var(--token-typography-body-100-line-height); + background-position: center right 5px; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-reveal { + width: fit-content; +} + +.hds-reveal__toggle-button { + min-height: 1.75rem; + padding: 0.313rem 0.313rem 0.313rem 0.188rem; +} +@media (prefers-reduced-motion: no-preference) { + .hds-reveal__toggle-button .hds-icon-chevron-down { + transition: transform 0.3s; + } +} + +.hds-reveal__toggle-button--is-open .hds-icon-chevron-down { + transform: rotate(-180deg); +} + +.hds-reveal__content { + margin-top: 4px; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-rich-tooltip { + display: contents; +} + +:where(.hds-rich-tooltip__toggle) { + width: fit-content; + height: fit-content; + margin: 0; + padding: 0; + color: inherit; + font: inherit; + text-align: inherit; + background-color: inherit; + border: none; + cursor: pointer; +} + +.hds-rich-tooltip__toggle { + --text-color: var(--token-color-foreground-strong); + --icon-color: var(--token-color-foreground-strong); + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-rich-tooltip__toggle:hover, .hds-rich-tooltip__toggle.mock-hover { + --text-color: var(--token-color-foreground-primary); + --icon-color: var(--token-color-foreground-primary); +} +.hds-rich-tooltip__toggle:active, .hds-rich-tooltip__toggle.mock-active { + --text-color: var(--token-color-foreground-faint); + --icon-color: var(--token-color-foreground-faint); +} +.hds-rich-tooltip__toggle::before { + position: absolute; + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-rich-tooltip__toggle:focus::before, .hds-rich-tooltip__toggle.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-rich-tooltip__toggle:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-rich-tooltip__toggle:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-rich-tooltip__toggle:focus:active::before, .hds-rich-tooltip__toggle.mock-focus.mock-active::before { + box-shadow: none; +} + +.hds-rich-tooltip__toggle-text { + color: var(--text-color); + text-decoration: underline dotted; +} + +.hds-rich-tooltip__toggle-icon { + flex: none; + width: 1em; + height: 1em; + color: var(--icon-color); +} +.hds-rich-tooltip__toggle-icon:first-child:not(:only-child) { + margin-right: 0.25rem; +} +.hds-rich-tooltip__toggle-icon:last-child:not(:only-child) { + margin-left: 0.25rem; +} + +:where(.hds-rich-tooltip__toggle--is-inline) { + display: inline-flex; + align-items: center; + vertical-align: bottom; +} +:where(.hds-rich-tooltip__toggle--is-inline):has(.hds-rich-tooltip__toggle-icon:only-child) { + vertical-align: middle; +} + +:where(.hds-rich-tooltip__toggle--is-block) { + display: flex; + align-items: center; +} + +.hds-rich-tooltip__toggle--size-small { + font-weight: var(--token-typography-font-weight-regular); + font-size: var(--token-typography-body-100-font-size); + font-family: var(--token-typography-body-100-font-family); + line-height: var(--token-typography-body-100-line-height); +} + +.hds-rich-tooltip__toggle--size-medium { + font-weight: var(--token-typography-font-weight-regular); + font-size: var(--token-typography-body-200-font-size); + font-family: var(--token-typography-body-200-font-family); + line-height: var(--token-typography-body-200-line-height); +} + +.hds-rich-tooltip__toggle--size-large { + font-weight: var(--token-typography-font-weight-regular); + font-size: var(--token-typography-body-300-font-size); + font-family: var(--token-typography-body-300-font-family); + line-height: var(--token-typography-body-300-line-height); +} + +.hds-rich-tooltip__bubble { + position: relative; + width: fit-content; + max-width: var(--token-tooltip-max-width); + height: fit-content; + max-height: none; + padding: 16px; + background: var(--token-color-surface-primary); + border-radius: 5px; + box-shadow: var(--token-surface-higher-box-shadow); + opacity: 0; + transition: opacity 0.3s; + will-change: opacity; +} +:where(.hds-rich-tooltip__bubble[popover]) { + width: fit-content; + height: fit-content; + margin: 0; + padding: 0; + overflow: visible; + color: inherit; + background: none; + border: none; + inset: 0; +} + +.hds-rich-tooltip__bubble-arrow { + position: absolute; + z-index: 1; + display: block; + width: 20px; + height: 20px; + background: url('data:image/svg+xml,') no-repeat 0 0/20px 20px; + pointer-events: none; +} +.hds-rich-tooltip__bubble-arrow[data-hds-anchored-arrow-placement^=top] { + bottom: -20px; + transform: rotate(180deg); +} +.hds-rich-tooltip__bubble-arrow[data-hds-anchored-arrow-placement^=right] { + left: -20px; + transform: rotate(-90deg); +} +.hds-rich-tooltip__bubble-arrow[data-hds-anchored-arrow-placement^=bottom] { + top: -20px; + transform: rotate(0deg); +} +.hds-rich-tooltip__bubble-arrow[data-hds-anchored-arrow-placement^=left] { + right: -20px; + transform: rotate(90deg); +} + +.hds-rich-tooltip__bubble-inner-content { + all: initial; + display: contents; + box-sizing: border-box; +} +.hds-rich-tooltip__bubble-inner-content *, +.hds-rich-tooltip__bubble-inner-content *::before, +.hds-rich-tooltip__bubble-inner-content *::after { + box-sizing: inherit; +} + +/* clean-css ignore:start */ +.hds-rich-tooltip__bubble[popover]:popover-open { + opacity: 1; +} +@starting-style { + .hds-rich-tooltip__bubble[popover]:popover-open { + opacity: 0; + } +} +@starting-style { + .hds-rich-tooltip__bubble[popover].\:popover-open { + opacity: 0; + } +} + +/* clean-css ignore:end */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-segmented-group { + display: inline-flex; +} +.hds-segmented-group > .hds-button:first-child:not(:only-child), +.hds-segmented-group > .hds-dropdown:first-child:not(:only-child), +.hds-segmented-group > .hds-form-select:first-child:not(:only-child), +.hds-segmented-group > .hds-form-text-input:first-child:not(:only-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.hds-segmented-group > .hds-button:first-child:not(:only-child)::before, +.hds-segmented-group > .hds-button:first-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-button:first-child:not(:only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-dropdown:first-child:not(:only-child)::before, +.hds-segmented-group > .hds-dropdown:first-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-dropdown:first-child:not(:only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-form-select:first-child:not(:only-child)::before, +.hds-segmented-group > .hds-form-select:first-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-form-select:first-child:not(:only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-form-text-input:first-child:not(:only-child)::before, +.hds-segmented-group > .hds-form-text-input:first-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-form-text-input:first-child:not(:only-child) .hds-dropdown-toggle-button::before { + border-top-right-radius: inherit; + border-bottom-right-radius: inherit; +} +.hds-segmented-group > .hds-button:last-child:not(:only-child), +.hds-segmented-group > .hds-dropdown:last-child:not(:only-child), +.hds-segmented-group > .hds-form-select:last-child:not(:only-child), +.hds-segmented-group > .hds-form-text-input:last-child:not(:only-child) { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.hds-segmented-group > .hds-button:last-child:not(:only-child)::before, +.hds-segmented-group > .hds-button:last-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-button:last-child:not(:only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-dropdown:last-child:not(:only-child)::before, +.hds-segmented-group > .hds-dropdown:last-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-dropdown:last-child:not(:only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-form-select:last-child:not(:only-child)::before, +.hds-segmented-group > .hds-form-select:last-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-form-select:last-child:not(:only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-form-text-input:last-child:not(:only-child)::before, +.hds-segmented-group > .hds-form-text-input:last-child:not(:only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-form-text-input:last-child:not(:only-child) .hds-dropdown-toggle-button::before { + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; +} +.hds-segmented-group > .hds-button:not(:first-child, :last-child, :only-child), +.hds-segmented-group > .hds-dropdown:not(:first-child, :last-child, :only-child), +.hds-segmented-group > .hds-form-select:not(:first-child, :last-child, :only-child), +.hds-segmented-group > .hds-form-text-input:not(:first-child, :last-child, :only-child) { + margin-left: -1px; + border-radius: 0; +} +.hds-segmented-group > .hds-button:not(:first-child, :last-child, :only-child)::before, +.hds-segmented-group > .hds-button:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-button:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-dropdown:not(:first-child, :last-child, :only-child)::before, +.hds-segmented-group > .hds-dropdown:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-dropdown:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-form-select:not(:first-child, :last-child, :only-child)::before, +.hds-segmented-group > .hds-form-select:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-form-select:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button::before, +.hds-segmented-group > .hds-form-text-input:not(:first-child, :last-child, :only-child)::before, +.hds-segmented-group > .hds-form-text-input:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button, +.hds-segmented-group > .hds-form-text-input:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button::before { + border-radius: inherit; +} +.hds-segmented-group > .hds-button:focus, .hds-segmented-group > .hds-button.mock-focus, +.hds-segmented-group > .hds-button .hds-dropdown-toggle-button:focus, +.hds-segmented-group > .hds-dropdown:focus, +.hds-segmented-group > .hds-dropdown.mock-focus, +.hds-segmented-group > .hds-dropdown .hds-dropdown-toggle-button:focus, +.hds-segmented-group > .hds-form-select:focus, +.hds-segmented-group > .hds-form-select.mock-focus, +.hds-segmented-group > .hds-form-select .hds-dropdown-toggle-button:focus, +.hds-segmented-group > .hds-form-text-input:focus, +.hds-segmented-group > .hds-form-text-input.mock-focus, +.hds-segmented-group > .hds-form-text-input .hds-dropdown-toggle-button:focus { + z-index: 1; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-separator { + border: none; + border-top: 1px solid var(--token-color-border-primary); +} + +.hds-separator--spacing-24 { + margin: 24px 0; +} + +.hds-separator--spacing-0 { + margin: 0; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +:root { + --hds-app-desktop-breakpoint: 1088px; + --hds-app-sidenav-width-minimized: 48px; + --hds-app-sidenav-width-expanded: 280px; + --hds-app-sidenav-width-fixed: var(--hds-app-sidenav-width-expanded); + --hds-app-sidenav-animation-duration: 200ms; + --hds-app-sidenav-animation-delay: var(--hds-app-sidenav-animation-duration); + --hds-app-sidenav-animation-easing: cubic-bezier(0.65, 0, 0.35, 1); + --hds-app-sidenav-toggle-button-width: 24px; +} + +@media (prefers-reduced-motion) { + :root { + --hds-app-sidenav-animation-duration: 0; + } +} +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-side-nav { + position: relative; + width: var(--hds-app-sidenav-width-fixed); + height: 100%; + min-height: 100%; + isolation: isolate; +} +.hds-side-nav.hds-side-nav--is-headerless { + --hds-app-sidenav-width-minimized: 16px; +} +.hds-side-nav.hds-side-nav--is-responsive { + transition: width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing); +} +.hds-side-nav.hds-side-nav--is-mobile { + width: var(--hds-app-sidenav-width-minimized); +} +.hds-side-nav.hds-side-nav--is-desktop.hds-side-nav--is-not-minimized { + width: var(--hds-app-sidenav-width-expanded); +} +.hds-side-nav.hds-side-nav--is-desktop.hds-side-nav--is-minimized { + width: var(--hds-app-sidenav-width-minimized); +} + +.hds-side-nav__overlay { + position: fixed; + z-index: -1; + inset: 0; + background-color: var(--token-color-palette-neutral-700); + opacity: 0.2; + transition: opacity var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing) var(--hds-app-sidenav-animation-delay); +} +.hds-side-nav--is-minimized .hds-side-nav__overlay { + opacity: 0; + pointer-events: none; +} +.hds-side-nav--is-desktop .hds-side-nav__overlay { + display: none; +} + +.hds-side-nav__wrapper { + display: flex; + flex-direction: column; + height: 100%; + color: var(--token-side-nav-color-foreground-primary); + background: var(--token-side-nav-color-surface-primary); + border-right: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color); +} +.hds-side-nav--is-responsive .hds-side-nav__wrapper { + transition: width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing); +} +.hds-side-nav--is-minimized .hds-side-nav__wrapper { + width: var(--hds-app-sidenav-width-minimized); +} +.hds-side-nav--is-not-minimized .hds-side-nav__wrapper { + width: var(--hds-app-sidenav-width-expanded); +} + +.hds-side-nav__wrapper-header { + padding-top: var(--token-side-nav-wrapper-padding-vertical); + padding-right: var(--token-side-nav-wrapper-padding-horizontal); + padding-bottom: 8px; + padding-left: var(--token-side-nav-wrapper-padding-horizontal); + transition: padding var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing); +} +.hds-side-nav--is-minimized .hds-side-nav__wrapper-header { + padding-top: var(--token-side-nav-wrapper-padding-vertical-minimized); + padding-right: var(--token-side-nav-wrapper-padding-horizontal-minimized); + padding-left: var(--token-side-nav-wrapper-padding-horizontal-minimized); +} +.hds-side-nav__wrapper-header:empty { + padding: 0; +} + +.hds-side-nav__wrapper-body { + flex: 1; + padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal); + overflow-x: hidden; + overflow-y: auto; +} + +.hds-side-nav__wrapper-footer { + padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal); +} +.hds-side-nav__wrapper-footer:empty { + min-height: var(--token-side-nav-wrapper-padding-horizontal); + padding: 0; +} + +.hds-side-nav--is-minimized .hds-side-nav-hide-when-minimized { + visibility: hidden !important; + opacity: 0; + pointer-events: none; +} +.hds-side-nav--is-not-minimized .hds-side-nav-hide-when-minimized { + visibility: visible; + opacity: 1; + transition: opacity var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing) var(--hds-app-sidenav-animation-delay); +} +.hds-side-nav--is-animating .hds-side-nav-hide-when-minimized { + pointer-events: none; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-side-nav-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.hds-side-nav-header__logo-container { + display: flex; + flex: none; + align-items: center; + justify-content: center; + width: var(--token-side-nav-header-home-link-logo-size); + height: var(--token-side-nav-header-home-link-logo-size); + transition: width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing), height var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing); +} +.hds-side-nav--is-minimized .hds-side-nav-header__logo-container { + width: var(--token-side-nav-header-home-link-logo-size-minimized); + height: var(--token-side-nav-header-home-link-logo-size-minimized); +} + +.hds-side-nav__home-link { + border: 1px solid transparent; + cursor: pointer; + color: var(--token-side-nav-color-foreground-strong); + background-color: transparent; + border-radius: var(--token-side-nav-body-list-item-border-radius); + display: block; + width: 100%; + height: 100%; + padding: calc(var(--token-side-nav-header-home-link-padding) - 1px); +} +.hds-side-nav__home-link:hover, .hds-side-nav__home-link.mock-hover { + color: var(--token-side-nav-color-foreground-strong); + background-color: var(--token-side-nav-color-surface-interactive-hover); +} +.hds-side-nav__home-link:focus, .hds-side-nav__home-link.mock-focus { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-700); +} +.hds-side-nav__home-link:focus::before, .hds-side-nav__home-link.mock-focus::before { + position: absolute; + top: -1px; + right: -1px; + bottom: -1px; + left: -1px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-side-nav__home-link:focus:focus::before, .hds-side-nav__home-link:focus.mock-focus::before, .hds-side-nav__home-link.mock-focus:focus::before, .hds-side-nav__home-link.mock-focus.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__home-link:focus:focus:not(:focus-visible)::before, .hds-side-nav__home-link.mock-focus:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-side-nav__home-link:focus:focus-visible::before, .hds-side-nav__home-link.mock-focus:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__home-link:focus:focus:active::before, .hds-side-nav__home-link:focus.mock-focus.mock-active::before, .hds-side-nav__home-link.mock-focus:focus:active::before, .hds-side-nav__home-link.mock-focus.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-side-nav__home-link:focus::before, .hds-side-nav__home-link.mock-focus::before { + color: var(--token-color-foreground-high-contrast); + border: none; + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__home-link:focus:focus:not(:focus-visible)::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__home-link:active, .hds-side-nav__home-link.mock-active { + color: var(--token-side-nav-color-foreground-strong); + background-color: var(--token-side-nav-color-surface-interactive-active); +} +.hds-side-nav__home-link:disabled, .hds-side-nav__home-link[disabled], .hds-side-nav__home-link.mock-disabled, .hds-side-nav__home-link:disabled:focus, .hds-side-nav__home-link[disabled]:focus, .hds-side-nav__home-link.mock-disabled:focus, .hds-side-nav__home-link:disabled:hover, .hds-side-nav__home-link[disabled]:hover, .hds-side-nav__home-link.mock-disabled:hover { + color: var(--token-color-foreground-disabled); + background-color: var(--token-color-palette-neutral-600); + border-color: var(--token-color-palette-neutral-500); +} + +.hds-side-nav-header__actions-container { + display: flex; + gap: var(--token-side-nav-header-actions-spacing); +} + +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *), +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) { + border: 1px solid transparent; + cursor: pointer; + border-color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-700); + border-radius: 5px; +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover { + border-color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-600); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-700); + border-color: var(--token-color-focus-action-internal); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before { + position: absolute; + top: -1px; + right: -1px; + bottom: -1px; + left: -1px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before { + color: var(--token-color-foreground-high-contrast); + border: none; + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active { + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-500); + border-color: var(--token-color-palette-neutral-400); +} +.hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav__dropdown .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, +.hds-side-nav-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover { + color: var(--token-color-foreground-disabled); + background-color: var(--token-color-palette-neutral-600); + border-color: var(--token-color-palette-neutral-500); +} + +.hds-side-nav__icon-button { + border: 1px solid transparent; + cursor: pointer; + border-color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-700); + border-radius: 5px; + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + padding: 5px; +} +.hds-side-nav__icon-button:hover, .hds-side-nav__icon-button.mock-hover { + border-color: var(--token-color-palette-neutral-500); + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-600); +} +.hds-side-nav__icon-button:focus, .hds-side-nav__icon-button.mock-focus { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-700); + border-color: var(--token-color-focus-action-internal); +} +.hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before { + position: absolute; + top: -1px; + right: -1px; + bottom: -1px; + left: -1px; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-side-nav__icon-button:focus:focus::before, .hds-side-nav__icon-button:focus.mock-focus::before, .hds-side-nav__icon-button.mock-focus:focus::before, .hds-side-nav__icon-button.mock-focus.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before, .hds-side-nav__icon-button.mock-focus:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-side-nav__icon-button:focus:focus-visible::before, .hds-side-nav__icon-button.mock-focus:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__icon-button:focus:focus:active::before, .hds-side-nav__icon-button:focus.mock-focus.mock-active::before, .hds-side-nav__icon-button.mock-focus:focus:active::before, .hds-side-nav__icon-button.mock-focus.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before { + color: var(--token-color-foreground-high-contrast); + border: none; + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__icon-button:active, .hds-side-nav__icon-button.mock-active { + color: var(--token-color-foreground-high-contrast); + background-color: var(--token-color-palette-neutral-500); + border-color: var(--token-color-palette-neutral-400); +} +.hds-side-nav__icon-button:disabled, .hds-side-nav__icon-button[disabled], .hds-side-nav__icon-button.mock-disabled, .hds-side-nav__icon-button:disabled:focus, .hds-side-nav__icon-button[disabled]:focus, .hds-side-nav__icon-button.mock-disabled:focus, .hds-side-nav__icon-button:disabled:hover, .hds-side-nav__icon-button[disabled]:hover, .hds-side-nav__icon-button.mock-disabled:hover { + color: var(--token-color-foreground-disabled); + background-color: var(--token-color-palette-neutral-600); + border-color: var(--token-color-palette-neutral-500); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-side-nav__content { + margin: 0 calc(var(--token-side-nav-wrapper-padding-horizontal) * -1); +} +.hds-side-nav--is-minimized .hds-side-nav__content { + height: 0; + overflow: hidden; +} + +.hds-side-nav__content-panels { + display: grid; + grid-template-columns: repeat(5, var(--hds-app-sidenav-width-expanded)); + width: 100%; +} + +.hds-side-nav__content-panel { + padding: 0 var(--token-side-nav-wrapper-padding-horizontal); + overflow: hidden; +} +.hds-side-nav__content-panel[aria-hidden=true] { + max-height: 0; +} + +.hds-side-nav__list-title { + min-height: var(--token-side-nav-body-list-item-height); + margin-top: var(--token-side-nav-body-list-margin-vertical); + padding: 9px var(--token-side-nav-body-list-item-padding-horizontal); + color: var(--token-side-nav-color-foreground-faint); + overflow-wrap: break-word; +} +.hds-side-nav__list-wrapper:first-child .hds-side-nav__list-item:first-child > .hds-side-nav__list-title { + margin-top: 0; +} + +.hds-side-nav__list-wrapper, +.hds-side-nav__list { + margin: 0; + padding: 0; +} + +.hds-side-nav__list-item { + list-style-type: none; +} +.hds-side-nav__list-item + .hds-side-nav__list-item { + margin-top: var(--token-side-nav-body-list-item-spacing-vertical); +} + +.hds-side-nav__list-item-link { + display: flex; + gap: var(--token-side-nav-body-list-item-content-spacing-horizontal); + align-items: center; + width: 100%; + min-height: var(--token-side-nav-body-list-item-height); + padding: var(--token-side-nav-body-list-item-padding-vertical) var(--token-side-nav-body-list-item-padding-horizontal); + color: var(--token-side-nav-color-foreground-primary); + text-decoration: none; + background: var(--token-side-nav-color-surface-primary); + border-color: transparent; + border-radius: var(--token-side-nav-body-list-item-border-radius); +} +.hds-side-nav__list-item-link:focus, .hds-side-nav__list-item-link.mock-focus { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-side-nav__list-item-link:focus::before, .hds-side-nav__list-item-link.mock-focus::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-side-nav__list-item-link:focus:focus::before, .hds-side-nav__list-item-link:focus.mock-focus::before, .hds-side-nav__list-item-link.mock-focus:focus::before, .hds-side-nav__list-item-link.mock-focus.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__list-item-link:focus:focus:not(:focus-visible)::before, .hds-side-nav__list-item-link.mock-focus:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-side-nav__list-item-link:focus:focus-visible::before, .hds-side-nav__list-item-link.mock-focus:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-side-nav__list-item-link:focus:focus:active::before, .hds-side-nav__list-item-link:focus.mock-focus.mock-active::before, .hds-side-nav__list-item-link.mock-focus:focus:active::before, .hds-side-nav__list-item-link.mock-focus.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-side-nav__list-item-link:hover, .hds-side-nav__list-item-link.mock-hover { + background: var(--token-side-nav-color-surface-interactive-hover); + border-color: transparent; +} +.hds-side-nav__list-item-link:hover .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link:hover .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link:hover .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link.mock-hover .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link.mock-hover .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link.mock-hover .hds-side-nav__list-item-icon-trailing { + color: var(--token-side-nav-color-foreground-strong); +} +.hds-side-nav__list-item-link:hover:focus, .hds-side-nav__list-item-link.active, .hds-side-nav__list-item-link:active, .hds-side-nav__list-item-link.mock-active { + background: var(--token-side-nav-color-surface-interactive-active); +} +.hds-side-nav__list-item-link:hover:focus .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link:hover:focus .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link:hover:focus .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link.active .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link.active .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link.active .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link:active .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link:active .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link:active .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link.mock-active .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link.mock-active .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link.mock-active .hds-side-nav__list-item-icon-trailing { + color: var(--token-side-nav-color-foreground-strong); +} +.hds-side-nav__list-item-link:hover:focus .hds-badge, +.hds-side-nav__list-item-link:hover:focus .hds-badge-count, .hds-side-nav__list-item-link.active .hds-badge, +.hds-side-nav__list-item-link.active .hds-badge-count, .hds-side-nav__list-item-link:active .hds-badge, +.hds-side-nav__list-item-link:active .hds-badge-count, .hds-side-nav__list-item-link.mock-active .hds-badge, +.hds-side-nav__list-item-link.mock-active .hds-badge-count { + color: var(--token-color-foreground-primary); + background: var(--token-color-surface-strong); +} + +.hds-side-nav__list-item-link--back-link:active, .hds-side-nav__list-item-link--back-link.mock-active { + background: var(--token-side-nav-color-surface-primary); +} +.hds-side-nav__list-item-link--back-link:active .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link--back-link:active .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link--back-link:active .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link--back-link.mock-active .hds-side-nav__list-item-text, +.hds-side-nav__list-item-link--back-link.mock-active .hds-side-nav__list-item-icon-leading, +.hds-side-nav__list-item-link--back-link.mock-active .hds-side-nav__list-item-icon-trailing { + color: var(--token-side-nav-color-foreground-primary); +} + +.hds-side-nav__list-item-text { + min-width: 0; + max-width: 100%; + color: var(--token-side-nav-color-foreground-primary); + text-align: left; + overflow-wrap: break-word; +} + +.hds-side-nav__list-item-icon-leading { + flex: none; +} + +.hds-side-nav__list-item-icon-trailing { + flex: none; + margin-left: auto; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-side-nav__toggle-button { + position: absolute; + top: 22px; + left: calc(var(--token-side-nav-wrapper-border-width) * -1); + z-index: 1; + display: flex; + flex-direction: row-reverse; + align-items: center; + width: var(--hds-app-sidenav-toggle-button-width); + height: 36px; + padding: 0 4px; + color: var(--token-color-foreground-high-contrast); + background: none; + background-color: var(--token-side-nav-color-surface-primary); + border: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color); + border-left-color: transparent; + border-top-right-radius: var(--token-side-nav-toggle-button-border-radius); + border-bottom-right-radius: var(--token-side-nav-toggle-button-border-radius); + transform: translateX(var(--hds-app-sidenav-width-expanded)); + cursor: pointer; + transition: transform var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing), width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing); +} +.hds-side-nav__toggle-button::before { + position: absolute; + top: calc(var(--token-side-nav-toggle-button-border-radius) * -2); + left: calc(var(--token-side-nav-wrapper-border-width) * -1); + box-sizing: border-box; + width: calc(var(--token-side-nav-toggle-button-border-radius) * 2); + height: calc(var(--token-side-nav-toggle-button-border-radius) * 2); + border-bottom: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color); + border-left: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color); + border-bottom-left-radius: var(--token-side-nav-toggle-button-border-radius); + box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-primary); + content: ""; +} +.hds-side-nav__toggle-button::after { + position: absolute; + bottom: calc(var(--token-side-nav-toggle-button-border-radius) * -2); + left: calc(var(--token-side-nav-wrapper-border-width) * -1); + box-sizing: border-box; + width: calc(var(--token-side-nav-toggle-button-border-radius) * 2); + height: calc(var(--token-side-nav-toggle-button-border-radius) * 2); + border-top: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color); + border-left: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color); + border-top-left-radius: var(--token-side-nav-toggle-button-border-radius); + box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-primary); + content: ""; +} +.hds-side-nav__toggle-button:hover, .hds-side-nav__toggle-button.mock-hover { + width: 30px; + background-color: var(--token-side-nav-color-surface-interactive-hover); +} +.hds-side-nav__toggle-button:hover::before, .hds-side-nav__toggle-button.mock-hover::before { + box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-interactive-hover); +} +.hds-side-nav__toggle-button:hover::after, .hds-side-nav__toggle-button.mock-hover::after { + box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-interactive-hover); +} +.hds-side-nav__toggle-button:active, .hds-side-nav__toggle-button.mock-active { + background-color: var(--token-side-nav-color-surface-interactive-active); +} +.hds-side-nav__toggle-button:active::before, .hds-side-nav__toggle-button.mock-active::before { + box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-interactive-active); +} +.hds-side-nav__toggle-button:active::after, .hds-side-nav__toggle-button.mock-active::after { + box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-interactive-active); +} +.hds-side-nav__toggle-button:focus-visible, .hds-side-nav__toggle-button.mock-focus { + border-color: var(--token-color-focus-action-internal); + outline: 3px solid var(--token-color-focus-action-external); +} +.hds-side-nav__toggle-button:focus-visible::before, .hds-side-nav__toggle-button:focus-visible::after, .hds-side-nav__toggle-button.mock-focus::before, .hds-side-nav__toggle-button.mock-focus::after { + display: none; +} +.hds-side-nav--is-minimized .hds-side-nav__toggle-button { + transform: translateX(var(--hds-app-sidenav-width-minimized)); +} +.hds-side-nav:has(.hds-side-nav__wrapper-header:empty) .hds-side-nav__toggle-button { + top: var(--token-side-nav-wrapper-padding-vertical); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-side-nav .ember-a11y-refocus-skip-link { + top: 10px; + left: 10px; + z-index: 20; + width: max-content; + padding: 2px 10px 4px; + color: var(--token-color-foreground-action); + font-size: var(--token-typography-display-200-font-size); + font-family: var(--token-typography-display-200-font-family); + line-height: var(--token-typography-display-200-line-height); + background-color: var(--token-color-surface-faint); + border-radius: 3px; + transform: translateY(-200%); + transition: 0.6s ease-in-out; +} +.hds-side-nav .ember-a11y-refocus-skip-link:focus { + transform: translateY(0); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-stepper-indicator-step { + position: relative; + width: 24px; + height: 24px; +} + +.hds-stepper-indicator-step__svg-hexagon { + width: 100%; + height: 100%; + filter: drop-shadow(0 1px 1px rgba(101, 106, 118, 0.05)); +} + +.hds-stepper-indicator-step__status { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.hds-stepper-indicator-step__icon { + width: 12px; + height: 12px; +} + +.hds-stepper-indicator-step__text { + width: 20px; + overflow: hidden; + white-space: nowrap; + text-align: center; + user-select: none; +} + +.hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-strong); +} +.hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-surface-faint); + stroke: var(--token-color-foreground-strong); +} + +.hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-high-contrast); +} +.hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-foreground-strong); + stroke: var(--token-color-foreground-strong); +} + +.hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-high-contrast); +} +.hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-foreground-strong); + stroke: var(--token-color-foreground-strong); +} + +.hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-high-contrast); +} +.hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-foreground-strong); + stroke: var(--token-color-foreground-strong); +} + +.hds-stepper-indicator-step--is-interactive { + cursor: pointer; +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-primary); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-surface-interactive); + stroke: var(--token-color-border-strong); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete:hover .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete.mock-hover .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-surface-interactive-hover); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete:active .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete.mock-active .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-surface-interactive-active); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-high-contrast); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-200); + stroke: var(--token-color-palette-blue-300); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress:hover .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress.mock-hover .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-300); + stroke: var(--token-color-palette-blue-400); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress:active .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress.mock-active .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-400); + stroke: var(--token-color-palette-blue-400); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status { + color: var(--token-color-foreground-high-contrast); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-200); + stroke: var(--token-color-palette-blue-300); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing:hover .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing.mock-hover .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-300); + stroke: var(--token-color-palette-blue-400); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing:active .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing.mock-active .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-400); + stroke: var(--token-color-palette-blue-400); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status { + color: var(--token-color-palette-blue-200); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-surface-action); + stroke: var(--token-color-palette-blue-300); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete:hover .hds-stepper-indicator-step__status, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete.mock-hover .hds-stepper-indicator-step__status { + color: var(--token-color-palette-blue-300); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete:hover .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete.mock-hover .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-100); + stroke: var(--token-color-palette-blue-400); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete:active .hds-stepper-indicator-step__status, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete.mock-active .hds-stepper-indicator-step__status { + color: var(--token-color-palette-blue-400); +} +.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete:active .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete.mock-active .hds-stepper-indicator-step__svg-hexagon path { + fill: var(--token-color-palette-blue-100); + stroke: var(--token-color-palette-blue-400); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-stepper-indicator-task { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + color: var(--token-color-foreground-strong); +} + +.hds-stepper-indicator-task__icon { + width: 12px; + height: 12px; +} + +.hds-stepper-indicator-task--is-interactive { + cursor: pointer; +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete { + color: var(--token-color-palette-neutral-300); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete:hover, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete:active, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete.mock-active { + color: var(--token-color-foreground-action-active); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress { + color: var(--token-color-foreground-action); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress:hover, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress:active, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress.mock-active { + color: var(--token-color-foreground-action-active); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing { + color: var(--token-color-foreground-action); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing:hover, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing:active, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing.mock-active { + color: var(--token-color-foreground-action-active); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete { + color: var(--token-color-foreground-success); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete:hover, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete.mock-hover { + color: var(--token-color-palette-green-300); +} +.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete:active, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete.mock-active { + color: var(--token-color-palette-green-400); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-table { + width: 100%; + border: 1px solid var(--token-color-border-primary); + border-radius: 6px; + border-spacing: 0; +} + +.hds-table--layout-fixed { + table-layout: fixed; +} + +.hds-table__thead .hds-table__tr { + color: var(--token-color-foreground-strong); + background-color: var(--token-color-surface-strong); +} +.hds-table__thead .hds-table__tr .hds-table__th { + position: relative; + padding: 14px 16px 13px 16px; + text-align: left; + border-top: none; + border-right: none; + border-bottom: 1px solid var(--token-color-border-primary); + border-left: none; +} +.hds-table__thead .hds-table__tr .hds-table__th + .hds-table__th::before { + position: absolute; + top: 6px; + bottom: 6px; + left: -1px; + width: 1px; + background-color: var(--token-color-border-primary); + content: ""; + pointer-events: none; +} +.hds-table__thead .hds-table__tr .hds-table__th--align-center, +.hds-table__thead .hds-table__tr .hds-table__td--align-center { + text-align: center; +} +.hds-table__thead .hds-table__tr .hds-table__th--align-center .hds-table__th-content, +.hds-table__thead .hds-table__tr .hds-table__td--align-center .hds-table__th-content { + justify-content: center; +} +.hds-table__thead .hds-table__tr .hds-table__th--align-right, +.hds-table__thead .hds-table__tr .hds-table__td--align-right { + text-align: right; +} +.hds-table__thead .hds-table__tr .hds-table__th--align-right .hds-table__th-content, +.hds-table__thead .hds-table__tr .hds-table__td--align-right .hds-table__th-content { + justify-content: flex-end; +} +.hds-table__thead .hds-table__tr:first-of-type .hds-table__th:first-child { + border-top-left-radius: 5px; +} +.hds-table__thead .hds-table__tr:first-of-type .hds-table__th:last-child { + border-top-right-radius: 5px; +} + +.hds-table__th--is-selectable { + width: 48px; +} + +.hds-table__th-content { + display: flex; + gap: 8px; + align-items: center; + justify-content: flex-start; +} + +.hds-table__th-button { + display: flex; + flex: none; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + margin: -2px 0; + padding: 0; + color: var(--token-color-foreground-faint); + background-color: transparent; + border: 1px solid transparent; + border-radius: 3px; + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-table__th-button:hover, .hds-table__th-button.mock-hover { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-interactive); + border-color: var(--token-color-border-strong); + box-shadow: var(--token-elevation-low-box-shadow); + cursor: pointer; +} +.hds-table__th-button::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + border-radius: inherit; + content: ""; +} +.hds-table__th-button:focus::before, .hds-table__th-button.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-table__th-button:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-table__th-button:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-table__th-button:focus:active::before, .hds-table__th-button.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-table__th-button:active, .hds-table__th-button.mock-active { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-interactive-active); + border-color: var(--token-color-border-strong); + box-shadow: none; +} + +.hds-table__th-button--is-sorted { + color: var(--token-color-foreground-action); +} +.hds-table__th-button--is-sorted:hover, .hds-table__th-button--is-sorted.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-table__th-button--is-sorted:active, .hds-table__th-button--is-sorted.mock-active { + color: var(--token-color-foreground-action-active); +} + +.hds-table__th-button-aria-label-hidden-segment { + display: none; +} + +.hds-table__tbody .hds-table__tr { + color: var(--token-color-foreground-primary); + background-color: var(--token-color-surface-primary); +} +.hds-table--striped .hds-table__tbody .hds-table__tr:nth-child(even) { + background-color: var(--token-color-surface-faint); +} +.hds-table__tbody .hds-table__tr:last-of-type .hds-table__th, +.hds-table__tbody .hds-table__tr:last-of-type .hds-table__td { + border-bottom: none; +} +.hds-table__tbody .hds-table__tr:last-of-type .hds-table__th:first-child, +.hds-table__tbody .hds-table__tr:last-of-type .hds-table__td:first-child { + border-bottom-left-radius: 5px; +} +.hds-table__tbody .hds-table__tr:last-of-type .hds-table__td:last-child { + border-bottom-right-radius: 5px; +} +.hds-table__tbody .hds-table__th, +.hds-table__tbody .hds-table__td { + text-align: left; + border-top: none; + border-right: none; + border-bottom: 1px solid var(--token-color-border-primary); + border-left: none; +} +.hds-table--density-short .hds-table__tbody .hds-table__th, +.hds-table--density-short .hds-table__tbody .hds-table__td { + padding: 6px 16px 5px 16px; +} +.hds-table--density-medium .hds-table__tbody .hds-table__th, +.hds-table--density-medium .hds-table__tbody .hds-table__td { + padding: 14px 16px 13px 16px; +} +.hds-table--density-tall .hds-table__tbody .hds-table__th, +.hds-table--density-tall .hds-table__tbody .hds-table__td { + padding: 22px 16px 21px 16px; +} +.hds-table__tbody .hds-table__th--align-center, +.hds-table__tbody .hds-table__td--align-center { + text-align: center; +} +.hds-table__tbody .hds-table__th--align-center .hds-table__th-content, +.hds-table__tbody .hds-table__td--align-center .hds-table__th-content { + justify-content: center; +} +.hds-table__tbody .hds-table__th--align-right, +.hds-table__tbody .hds-table__td--align-right { + text-align: right; +} +.hds-table__tbody .hds-table__th--align-right .hds-table__th-content, +.hds-table__tbody .hds-table__td--align-right .hds-table__th-content { + justify-content: flex-end; +} +.hds-table--valign-top .hds-table__tbody .hds-table__th, +.hds-table--valign-top .hds-table__tbody .hds-table__td { + vertical-align: top; +} +.hds-table--valign-middle .hds-table__tbody .hds-table__th, +.hds-table--valign-middle .hds-table__tbody .hds-table__td { + vertical-align: middle; +} +.hds-table--valign-baseline .hds-table__tbody .hds-table__th, +.hds-table--valign-baseline .hds-table__tbody .hds-table__td { + vertical-align: baseline; +} + +.hds-table__checkbox { + display: block; + margin: 2px 0; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-tabs__tablist-wrapper { + position: relative; +} +.hds-tabs__tablist-wrapper::before { + position: absolute; + right: 0; + bottom: calc((var(--token-tabs-indicator-height) - var(--token-tabs-divider-height)) / 2); + left: 0; + display: block; + border-top: var(--token-tabs-divider-height) solid var(--token-color-border-primary); + content: ""; +} + +.hds-tabs__tablist { + position: relative; + display: flex; + margin: 0; + padding: 0; + overflow-x: auto; + isolation: isolate; + -webkit-overflow-scrolling: touch; +} + +.hds-tabs__tab { + position: relative; + display: flex; + align-items: center; + margin: 0; + color: var(--token-color-foreground-primary); + white-space: nowrap; + text-decoration: none; + list-style: none; +} +.hds-tabs__tab:hover, .hds-tabs__tab.mock-hover { + color: var(--token-color-foreground-action); +} +.hds-tabs__tab.hds-tabs__tab--is-selected { + color: var(--token-color-foreground-action); +} +.hds-tabs__tab.hds-tabs__tab--is-selected:hover { + color: var(--token-color-foreground-action-hover); +} +.hds-tabs__tab.hds-tabs__tab--is-selected:hover ~ .hds-tabs__tab-indicator { + background: var(--token-color-foreground-action-hover); +} + +.hds-tabs__tab-button { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; + position: static; + display: flex; + gap: var(--token-tabs-tab-gutter); + align-items: center; + padding: 0; + color: inherit; + font-weight: var(--token-typography-font-weight-medium); + font-family: var(--token-typography-body-200-font-family); + background-color: transparent; + border: none; + border-radius: var(--token-tabs-tab-border-radius); + cursor: pointer; +} +.hds-tabs__tab-button::before { + position: absolute; + top: var(--token-tabs-tab-focus-inset); + right: var(--token-tabs-tab-focus-inset); + bottom: var(--token-tabs-tab-focus-inset); + left: var(--token-tabs-tab-focus-inset); + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-tabs__tab-button:focus::before, .hds-tabs__tab-button.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-tabs__tab-button:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-tabs__tab-button:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-tabs__tab-button:focus:active::before, .hds-tabs__tab-button.mock-focus.mock-active::before { + box-shadow: none; +} +.hds-tabs__tab-button::after { + position: absolute; + content: ""; + inset: 0; +} + +.hds-tabs__tab-indicator { + position: absolute; + right: 0; + bottom: 0; + left: var(--indicator-left-pos, 0); + z-index: 1; + display: block; + width: var(--indicator-width, 0); + height: var(--token-tabs-indicator-height); + background-color: var(--token-color-foreground-action); + border-radius: var(--token-tabs-indicator-height); +} +@media screen and (prefers-reduced-motion: no-preference) { + .hds-tabs__tab-indicator { + transition-timing-function: var(--token-tabs-indicator-transition-function); + transition-duration: var(--token-tabs-indicator-transition-duration); + transition-property: left, width; + } +} + +.hds-tabs__panel[hidden] { + display: none; +} + +.hds-tabs--size-medium .hds-tabs__tab { + height: var(--token-tabs-tab-height-medium); + padding: var(--token-tabs-tab-padding-vertical) var(--token-tabs-tab-padding-horizontal-medium); +} +.hds-tabs--size-medium .hds-tabs__tab-button { + font-size: var(--token-typography-body-200-font-size); +} + +.hds-tabs--size-large .hds-tabs__tab { + height: var(--token-tabs-tab-height-large); + padding: var(--token-tabs-tab-padding-vertical) var(--token-tabs-tab-padding-horizontal-large); +} +.hds-tabs--size-large .hds-tabs__tab-button { + font-size: var(--token-typography-body-300-font-size); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-tag { + display: inline-flex; + align-items: stretch; + line-height: 1rem; + vertical-align: middle; + background-color: var(--token-color-surface-interactive); + border: 1px solid var(--token-color-border-strong); + border-radius: 50px; +} + +.hds-tag__dismiss { + flex: 0 0 auto; + margin: 0; + padding: 6px 4px 6px 8px; + border: none; + border-radius: inherit; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.hds-tag__dismiss-icon { + width: 12px; + height: 12px; + color: var(--token-color-foreground-primary); +} + +.hds-tag__text, +.hds-tag__link { + flex: 1 0 0; + padding: 3px 10px 5px 10px; + border-radius: inherit; +} + +.hds-tag__dismiss ~ .hds-tag__text, +.hds-tag__dismiss ~ .hds-tag__link { + padding: 3px 8px 5px 6px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.hds-tag__dismiss, +.hds-tag__link { + background-color: var(--token-color-surface-interactive); + cursor: pointer; +} +.hds-tag__dismiss:hover, .hds-tag__dismiss.mock-hover, +.hds-tag__link:hover, +.hds-tag__link.mock-hover { + background-color: var(--token-color-surface-interactive-hover); +} +.hds-tag__dismiss:active, .hds-tag__dismiss.mock-active, +.hds-tag__link:active, +.hds-tag__link.mock-active { + background-color: var(--token-color-surface-interactive-active); +} +.hds-tag__dismiss:focus, .hds-tag__dismiss.mock-focus, +.hds-tag__link:focus, +.hds-tag__link.mock-focus { + outline-style: solid; + outline-color: transparent; + z-index: 1; +} +.hds-tag__dismiss:focus:focus, .hds-tag__dismiss:focus.mock-focus, .hds-tag__dismiss.mock-focus:focus, .hds-tag__dismiss.mock-focus.mock-focus, +.hds-tag__link:focus:focus, +.hds-tag__link:focus.mock-focus, +.hds-tag__link.mock-focus:focus, +.hds-tag__link.mock-focus.mock-focus { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-tag__dismiss:focus:focus:not(:focus-visible), .hds-tag__dismiss.mock-focus:focus:not(:focus-visible), +.hds-tag__link:focus:focus:not(:focus-visible), +.hds-tag__link.mock-focus:focus:not(:focus-visible) { + box-shadow: none; +} +.hds-tag__dismiss:focus:focus-visible, .hds-tag__dismiss.mock-focus:focus-visible, +.hds-tag__link:focus:focus-visible, +.hds-tag__link.mock-focus:focus-visible { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-tag__dismiss:focus:focus:active, .hds-tag__dismiss:focus.mock-focus.mock-active, .hds-tag__dismiss.mock-focus:focus:active, .hds-tag__dismiss.mock-focus.mock-focus.mock-active, +.hds-tag__link:focus:focus:active, +.hds-tag__link:focus.mock-focus.mock-active, +.hds-tag__link.mock-focus:focus:active, +.hds-tag__link.mock-focus.mock-focus.mock-active { + box-shadow: none; +} + +.hds-tag--color-primary .hds-tag__link { + color: var(--token-color-foreground-action); +} +.hds-tag--color-primary .hds-tag__link:hover, .hds-tag--color-primary .hds-tag__link.mock-hover { + color: var(--token-color-foreground-action-hover); +} +.hds-tag--color-primary .hds-tag__link:active, .hds-tag--color-primary .hds-tag__link.mock-active { + color: var(--token-color-foreground-action-active); +} + +.hds-tag--color-secondary .hds-tag__link { + color: var(--token-color-foreground-strong); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-text--align-left { + text-align: left; +} + +.hds-text--align-center { + text-align: center; +} + +.hds-text--align-right { + text-align: right; +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-toast { + width: fit-content; + min-width: min(360px, 80vw); + max-width: min(500px, 80vw); + box-shadow: var(--token-elevation-higher-box-shadow); +} + +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +.hds-tooltip-button { + position: relative; + outline-style: solid; + outline-color: transparent; + isolation: isolate; +} +.hds-tooltip-button::before { + position: absolute; + top: var(--token-tooltip-focus-offset); + right: var(--token-tooltip-focus-offset); + bottom: var(--token-tooltip-focus-offset); + left: var(--token-tooltip-focus-offset); + z-index: -1; + border-radius: 5px; + content: ""; +} +.hds-tooltip-button:focus::before, .hds-tooltip-button.mock-focus::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-tooltip-button:focus:not(:focus-visible)::before { + box-shadow: none; +} +.hds-tooltip-button:focus-visible::before { + box-shadow: var(--token-focus-ring-action-box-shadow); +} +.hds-tooltip-button:focus:active::before, .hds-tooltip-button.mock-focus.mock-active::before { + box-shadow: none; +} + +:where(.hds-tooltip-button) { + margin: 0; + padding: 0; + color: inherit; + font: inherit; + text-align: inherit; + background-color: inherit; + border: none; +} + +:where(.hds-tooltip-button--is-inline) { + display: inline-flex; +} + +:where(.hds-tooltip-button--is-block) { + display: flex; +} + +.tippy-box[data-theme~=hds] { + padding: var(--token-tooltip-padding-vertical) var(--token-tooltip-padding-horizontal); + color: var(--token-tooltip-color-foreground-primary); + font-weight: var(--token-typography-font-weight-regular); + font-size: var(--token-typography-body-200-font-size); + font-family: var(--token-typography-body-200-font-family); + line-height: var(--token-typography-body-200-line-height); + overflow-wrap: break-word; + background-color: var(--token-tooltip-color-surface-primary); + border-radius: var(--token-tooltip-border-radius); + box-shadow: var(--token-elevation-higher-box-shadow); + transition-property: transform, visibility, opacity; +} +.tippy-box[data-theme~=hds][data-animation=fade][data-state=hidden] { + opacity: 0; +} +.tippy-box[data-theme~=hds][data-inertia][data-state=visible] { + transition-timing-function: var(--token-tooltip-transition-function); +} +.tippy-box[data-theme~=hds] .tippy-content { + position: relative; + z-index: 1; + max-width: calc(var(--token-tooltip-max-width) - 2 * var(--token-tooltip-padding-horizontal)); + white-space: normal; + text-align: left; +} +.tippy-box[data-theme~=hds] .tippy-svg-arrow { + fill: var(--token-tooltip-color-surface-primary); +} + +.sr-only { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + padding: 0 !important; + overflow: hidden !important; + white-space: nowrap !important; /* 3 */ + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ + clip-path: inset(50%) !important; /* 2 */ +} \ No newline at end of file diff --git a/packages/components/src/styles/@hashicorp/design-system-components--themed-with-prefers-color-scheme.scss b/packages/components/src/styles/@hashicorp/design-system-components--themed-with-prefers-color-scheme.scss new file mode 100644 index 00000000000..30fe291632a --- /dev/null +++ b/packages/components/src/styles/@hashicorp/design-system-components--themed-with-prefers-color-scheme.scss @@ -0,0 +1,10 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// this CSS tokens file comes from the 'design-system-tokens' package +@use "themed-tokens-with-prefers-color-scheme/tokens.css" as *; + +// this file contains the rest of the HDS components-related code +@use "./partials/design-system-components-common" as *; diff --git a/packages/components/src/styles/@hashicorp/design-system-components.scss b/packages/components/src/styles/@hashicorp/design-system-components.scss index 95993baa817..478eb96d099 100644 --- a/packages/components/src/styles/@hashicorp/design-system-components.scss +++ b/packages/components/src/styles/@hashicorp/design-system-components.scss @@ -3,68 +3,10 @@ * SPDX-License-Identifier: MPL-2.0 */ -// these files come from the 'design-system-tokens' package -@use "tokens"; -@use "helpers/color"; -@use "helpers/elevation"; -@use "helpers/focus-ring"; -@use "helpers/typography"; +// this CSS tokens file comes from the 'design-system-tokens' package +// @use "tokens" as *; +// TEMP used to include themed tokens in the standard generated CSS file +@use "themed-tokens/unified.css" as *; -// Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments -// START COMPONENTS CSS FILES IMPORTS -@use "../components/accordion"; -@use "../components/alert"; -@use "../components/app-footer"; -@use "../components/app-frame"; -// @use "../components/app-header"; -// @use "../components/app-side-nav"; -@use "../components/application-state"; -@use "../components/badge"; -@use "../components/badge-count"; -@use "../components/breadcrumb"; -@use "../components/button"; -@use "../components/button-set"; -@use "../components/card"; -@use "../components/code-block"; -@use "../components/copy"; -@use "../components/dialog-primitive"; -@use "../components/disclosure-primitive"; -@use "../components/dismiss-button"; -@use "../components/dropdown"; -@use "../components/flyout"; -@use "../components/form"; // multiple components -@use "../components/icon"; -@use "../components/icon-tile"; -@use "../components/link"; // multiple components -@use "../components/menu-primitive"; -@use "../components/modal"; -@use "../components/page-header"; -@use "../components/pagination"; -@use "../components/reveal"; -@use "../components/rich-tooltip"; -@use "../components/segmented-group"; -@use "../components/separator"; -@use "../components/side-nav"; -@use "../components/stepper"; -@use "../components/table"; -@use "../components/tabs"; -@use "../components/tag"; -@use "../components/text"; -@use "../components/time"; -@use "../components/toast"; -@use "../components/tooltip"; -// END COMPONENT CSS FILES IMPORTS - -// stylelint-disable-next-line selector-class-pattern -.sr-only { - position: absolute !important; - width: 1px !important; - height: 1px !important; - margin: -1px !important; - padding: 0 !important; - overflow: hidden !important; - white-space: nowrap !important; /* 3 */ - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ - clip-path: inset(50%) !important; /* 2 */ -} +// this file contains the rest of the HDS components-related code +@use "./partials/design-system-components-common" as *; diff --git a/packages/components/src/styles/@hashicorp/partials/design-system-components-common.scss b/packages/components/src/styles/@hashicorp/partials/design-system-components-common.scss new file mode 100644 index 00000000000..1c1d56a1e44 --- /dev/null +++ b/packages/components/src/styles/@hashicorp/partials/design-system-components-common.scss @@ -0,0 +1,69 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// these helper files come from the 'design-system-tokens' package (they don't depend on theming) +@use "helpers/color"; +@use "helpers/elevation"; +@use "helpers/focus-ring"; +@use "helpers/typography"; + +// Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments +// START COMPONENTS CSS FILES IMPORTS +@use "../../components/accordion"; +@use "../../components/alert"; +@use "../../components/app-footer"; +@use "../../components/app-frame"; +// @use "../../components/app-header"; +// @use "../../components/app-side-nav"; +@use "../../components/application-state"; +@use "../../components/badge"; +@use "../../components/badge-count"; +@use "../../components/breadcrumb"; +@use "../../components/button"; +@use "../../components/button-set"; +@use "../../components/card"; +@use "../../components/code-block"; +@use "../../components/copy"; +@use "../../components/dialog-primitive"; +@use "../../components/disclosure-primitive"; +@use "../../components/dismiss-button"; +@use "../../components/dropdown"; +@use "../../components/flyout"; +@use "../../components/form"; // multiple components +@use "../../components/icon"; +@use "../../components/icon-tile"; +@use "../../components/link"; // multiple components +@use "../../components/menu-primitive"; +@use "../../components/modal"; +@use "../../components/page-header"; +@use "../../components/pagination"; +@use "../../components/reveal"; +@use "../../components/rich-tooltip"; +@use "../../components/segmented-group"; +@use "../../components/separator"; +@use "../../components/side-nav"; +@use "../../components/stepper"; +@use "../../components/table"; +@use "../../components/tabs"; +@use "../../components/tag"; +@use "../../components/text"; +@use "../../components/time"; +@use "../../components/toast"; +@use "../../components/tooltip"; +// END COMPONENT CSS FILES IMPORTS + +// stylelint-disable-next-line selector-class-pattern +.sr-only { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + padding: 0 !important; + overflow: hidden !important; + white-space: nowrap !important; /* 3 */ + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ + clip-path: inset(50%) !important; /* 2 */ +} diff --git a/packages/components/src/styles/components/dialog-primitive.scss b/packages/components/src/styles/components/dialog-primitive.scss index 5f0d1af6bf3..b34c73e26d8 100644 --- a/packages/components/src/styles/components/dialog-primitive.scss +++ b/packages/components/src/styles/components/dialog-primitive.scss @@ -30,6 +30,8 @@ $hds-dialog-primitive-vertical-padding: 16px; height: 100%; margin: 0; padding: 0; + // TODO this addition may have side effects on the consumers, something to explore more, but for now for the theming exploration it's OK + color: var(--token-color-foreground-primary); background: var(--token-color-surface-primary); border: none; } diff --git a/packages/components/src/styles/components/flyout.scss b/packages/components/src/styles/components/flyout.scss index 248637e62dc..8f775a1b90b 100644 --- a/packages/components/src/styles/components/flyout.scss +++ b/packages/components/src/styles/components/flyout.scss @@ -24,6 +24,7 @@ $hds-flyout-max-width: calc(100vw - var(--hds-app-sidenav-width-minimized) / 2); inset: 0; height: 100vh; max-height: 100vh; + // TODO this could be removed (it's already defined in the dialog primitive) background: var(--token-color-surface-primary); border: none; box-shadow: 0 2px 3px 0 #3b3d4540, 0 12px 24px 0 #3b3d4559; // TODO: convert to token diff --git a/packages/components/src/template-registry.ts b/packages/components/src/template-registry.ts index 5deaed8ae63..fda676e1503 100644 --- a/packages/components/src/template-registry.ts +++ b/packages/components/src/template-registry.ts @@ -187,6 +187,7 @@ import type HdsTagComponent from './components/hds/tag'; import type HdsTooltipButtonComponent from './components/hds/tooltip-button'; import type HdsToastComponent from './components/hds/toast'; import type HdsTextCodeComponent from './components/hds/text/code'; +import type HdsThemeSwitcherComponent from './components/hds/theme-switcher'; import type HdsTimeComponent from './components/hds/time'; import type HdsTimeSingleComponent from './components/hds/time/single'; import type HdsTimeRangeComponent from './components/hds/time/range'; @@ -851,6 +852,10 @@ export default interface HdsComponentsRegistry { 'Hds::Toast': typeof HdsToastComponent; 'hds/toast': typeof HdsToastComponent; + // ThemeSwitcher + 'Hds::ThemeSwitcher': typeof HdsThemeSwitcherComponent; + 'hds/theme-switcher': typeof HdsThemeSwitcherComponent; + // Time 'Hds::Time': typeof HdsTimeComponent; 'hds/time': typeof HdsTimeComponent; diff --git a/packages/tokens/dist/docs/products/tokens.json b/packages/tokens/dist/docs/products/tokens.json index ffb45cd5e08..2cbbafa3ebf 100644 --- a/packages/tokens/dist/docs/products/tokens.json +++ b/packages/tokens/dist/docs/products/tokens.json @@ -3,10 +3,12 @@ "value": "#1c345f", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#1c345f", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-500", "attributes": { @@ -18,16 +20,19 @@ "color", "palette", "blue-500" - ] + ], + "key": "{color.palette.blue-500}" }, { "value": "#0046d1", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#0046d1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-400", "attributes": { @@ -39,16 +44,19 @@ "color", "palette", "blue-400" - ] + ], + "key": "{color.palette.blue-400}" }, { "value": "#0c56e9", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#0c56e9", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-300", "attributes": { @@ -60,16 +68,19 @@ "color", "palette", "blue-300" - ] + ], + "key": "{color.palette.blue-300}" }, { "value": "#1060ff", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#1060ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-200", "attributes": { @@ -81,16 +92,19 @@ "color", "palette", "blue-200" - ] + ], + "key": "{color.palette.blue-200}" }, { "value": "#cce3fe", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#cce3fe", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-100", "attributes": { @@ -102,16 +116,19 @@ "color", "palette", "blue-100" - ] + ], + "key": "{color.palette.blue-100}" }, { "value": "#f2f8ff", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#f2f8ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-50", "attributes": { @@ -123,16 +140,19 @@ "color", "palette", "blue-50" - ] + ], + "key": "{color.palette.blue-50}" }, { "value": "#42215b", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#42215b", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-500", "attributes": { @@ -144,16 +164,19 @@ "color", "palette", "purple-500" - ] + ], + "key": "{color.palette.purple-500}" }, { "value": "#7b00db", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#7b00db", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-400", "attributes": { @@ -165,16 +188,19 @@ "color", "palette", "purple-400" - ] + ], + "key": "{color.palette.purple-400}" }, { "value": "#911ced", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#911ced", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-300", "attributes": { @@ -186,16 +212,19 @@ "color", "palette", "purple-300" - ] + ], + "key": "{color.palette.purple-300}" }, { "value": "#a737ff", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#a737ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-200", "attributes": { @@ -207,16 +236,19 @@ "color", "palette", "purple-200" - ] + ], + "key": "{color.palette.purple-200}" }, { "value": "#ead2fe", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#ead2fe", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-100", "attributes": { @@ -228,16 +260,19 @@ "color", "palette", "purple-100" - ] + ], + "key": "{color.palette.purple-100}" }, { "value": "#f9f2ff", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#f9f2ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-50", "attributes": { @@ -249,16 +284,19 @@ "color", "palette", "purple-50" - ] + ], + "key": "{color.palette.purple-50}" }, { "value": "#054220", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#054220", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-500", "attributes": { @@ -270,16 +308,19 @@ "color", "palette", "green-500" - ] + ], + "key": "{color.palette.green-500}" }, { "value": "#006619", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#006619", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-400", "attributes": { @@ -291,16 +332,19 @@ "color", "palette", "green-400" - ] + ], + "key": "{color.palette.green-400}" }, { "value": "#00781e", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#00781e", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-300", "attributes": { @@ -312,16 +356,19 @@ "color", "palette", "green-300" - ] + ], + "key": "{color.palette.green-300}" }, { "value": "#008a22", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#008a22", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-200", "attributes": { @@ -333,16 +380,19 @@ "color", "palette", "green-200" - ] + ], + "key": "{color.palette.green-200}" }, { "value": "#cceeda", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#cceeda", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-100", "attributes": { @@ -354,16 +404,19 @@ "color", "palette", "green-100" - ] + ], + "key": "{color.palette.green-100}" }, { "value": "#f2fbf6", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#f2fbf6", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-50", "attributes": { @@ -375,16 +428,19 @@ "color", "palette", "green-50" - ] + ], + "key": "{color.palette.green-50}" }, { "value": "#542800", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#542800", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-500", "attributes": { @@ -396,16 +452,19 @@ "color", "palette", "amber-500" - ] + ], + "key": "{color.palette.amber-500}" }, { "value": "#803d00", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#803d00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-400", "attributes": { @@ -417,16 +476,19 @@ "color", "palette", "amber-400" - ] + ], + "key": "{color.palette.amber-400}" }, { "value": "#9e4b00", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#9e4b00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-300", "attributes": { @@ -438,16 +500,19 @@ "color", "palette", "amber-300" - ] + ], + "key": "{color.palette.amber-300}" }, { "value": "#bb5a00", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#bb5a00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-200", "attributes": { @@ -459,16 +524,19 @@ "color", "palette", "amber-200" - ] + ], + "key": "{color.palette.amber-200}" }, { "value": "#fbeabf", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#fbeabf", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-100", "attributes": { @@ -480,16 +548,19 @@ "color", "palette", "amber-100" - ] + ], + "key": "{color.palette.amber-100}" }, { "value": "#fff9e8", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#fff9e8", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-50", "attributes": { @@ -501,16 +572,19 @@ "color", "palette", "amber-50" - ] + ], + "key": "{color.palette.amber-50}" }, { "value": "#51130a", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#51130a", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-500", "attributes": { @@ -522,16 +596,19 @@ "color", "palette", "red-500" - ] + ], + "key": "{color.palette.red-500}" }, { "value": "#940004", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#940004", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-400", "attributes": { @@ -543,16 +620,19 @@ "color", "palette", "red-400" - ] + ], + "key": "{color.palette.red-400}" }, { "value": "#c00005", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#c00005", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-300", "attributes": { @@ -564,16 +644,19 @@ "color", "palette", "red-300" - ] + ], + "key": "{color.palette.red-300}" }, { "value": "#e52228", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#e52228", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-200", "attributes": { @@ -585,16 +668,19 @@ "color", "palette", "red-200" - ] + ], + "key": "{color.palette.red-200}" }, { "value": "#fbd4d4", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#fbd4d4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-100", "attributes": { @@ -606,16 +692,19 @@ "color", "palette", "red-100" - ] + ], + "key": "{color.palette.red-100}" }, { "value": "#fff5f5", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#fff5f5", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-50", "attributes": { @@ -627,16 +716,19 @@ "color", "palette", "red-50" - ] + ], + "key": "{color.palette.red-50}" }, { "value": "#0c0c0e", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#0c0c0e", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-700", "attributes": { @@ -648,16 +740,19 @@ "color", "palette", "neutral-700" - ] + ], + "key": "{color.palette.neutral-700}" }, { "value": "#3b3d45", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#3b3d45", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-600", "attributes": { @@ -669,16 +764,19 @@ "color", "palette", "neutral-600" - ] + ], + "key": "{color.palette.neutral-600}" }, { "value": "#656a76", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#656a76", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-500", "attributes": { @@ -690,16 +788,19 @@ "color", "palette", "neutral-500" - ] + ], + "key": "{color.palette.neutral-500}" }, { "value": "#8c909c", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#8c909c", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-400", "attributes": { @@ -711,16 +812,19 @@ "color", "palette", "neutral-400" - ] + ], + "key": "{color.palette.neutral-400}" }, { "value": "#c2c5cb", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#c2c5cb", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-300", "attributes": { @@ -732,16 +836,19 @@ "color", "palette", "neutral-300" - ] + ], + "key": "{color.palette.neutral-300}" }, { "value": "#dedfe3", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#dedfe3", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-200", "attributes": { @@ -753,16 +860,19 @@ "color", "palette", "neutral-200" - ] + ], + "key": "{color.palette.neutral-200}" }, { "value": "#f1f2f3", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#f1f2f3", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-100", "attributes": { @@ -774,16 +884,19 @@ "color", "palette", "neutral-100" - ] + ], + "key": "{color.palette.neutral-100}" }, { "value": "#fafafa", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#fafafa", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-50", "attributes": { @@ -795,16 +908,19 @@ "color", "palette", "neutral-50" - ] + ], + "key": "{color.palette.neutral-50}" }, { "value": "#ffffff", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "#ffffff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-0", "attributes": { @@ -816,18 +932,21 @@ "color", "palette", "neutral-0" - ] + ], + "key": "{color.palette.neutral-0}" }, { "value": "#3b3d4566", "alpha": "0.4", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "{color.palette.neutral-600.value}", "alpha": "0.4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-alpha-300", "attributes": { @@ -839,18 +958,21 @@ "color", "palette", "alpha-300" - ] + ], + "key": "{color.palette.alpha-300}" }, { "value": "#656a7633", "alpha": "0.2", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "{color.palette.neutral-500.value}", "alpha": "0.2", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-alpha-200", "attributes": { @@ -862,18 +984,21 @@ "color", "palette", "alpha-200" - ] + ], + "key": "{color.palette.alpha-200}" }, { "value": "#656a761a", "alpha": "0.1", "type": "color", "group": "palette", + "theme": "light", "original": { "value": "{color.palette.neutral-500.value}", "alpha": "0.1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-alpha-100", "attributes": { @@ -885,7 +1010,8 @@ "color", "palette", "alpha-100" - ] + ], + "key": "{color.palette.alpha-100}" }, { "value": "#656a7633", @@ -906,7 +1032,8 @@ "color", "border", "primary" - ] + ], + "key": "{color.border.primary}" }, { "value": "#656a761a", @@ -927,7 +1054,8 @@ "color", "border", "faint" - ] + ], + "key": "{color.border.faint}" }, { "value": "#3b3d4566", @@ -948,7 +1076,8 @@ "color", "border", "strong" - ] + ], + "key": "{color.border.strong}" }, { "value": "#cce3fe", @@ -969,7 +1098,8 @@ "color", "border", "action" - ] + ], + "key": "{color.border.action}" }, { "value": "#ead2fe", @@ -990,7 +1120,8 @@ "color", "border", "highlight" - ] + ], + "key": "{color.border.highlight}" }, { "value": "#cceeda", @@ -1011,7 +1142,8 @@ "color", "border", "success" - ] + ], + "key": "{color.border.success}" }, { "value": "#fbeabf", @@ -1032,7 +1164,8 @@ "color", "border", "warning" - ] + ], + "key": "{color.border.warning}" }, { "value": "#fbd4d4", @@ -1053,7 +1186,8 @@ "color", "border", "critical" - ] + ], + "key": "{color.border.critical}" }, { "value": "#0c56e9", @@ -1076,7 +1210,8 @@ "focus", "action", "internal" - ] + ], + "key": "{color.focus.action.internal}" }, { "value": "#5990ff", @@ -1101,7 +1236,8 @@ "focus", "action", "external" - ] + ], + "key": "{color.focus.action.external}" }, { "value": "#c00005", @@ -1124,7 +1260,8 @@ "focus", "critical", "internal" - ] + ], + "key": "{color.focus.critical.internal}" }, { "value": "#dd7578", @@ -1149,7 +1286,8 @@ "focus", "critical", "external" - ] + ], + "key": "{color.focus.critical.external}" }, { "value": "#0c0c0e", @@ -1170,7 +1308,8 @@ "color", "foreground", "strong" - ] + ], + "key": "{color.foreground.strong}" }, { "value": "#3b3d45", @@ -1191,7 +1330,8 @@ "color", "foreground", "primary" - ] + ], + "key": "{color.foreground.primary}" }, { "value": "#656a76", @@ -1212,7 +1352,8 @@ "color", "foreground", "faint" - ] + ], + "key": "{color.foreground.faint}" }, { "value": "#ffffff", @@ -1233,7 +1374,8 @@ "color", "foreground", "high-contrast" - ] + ], + "key": "{color.foreground.high-contrast}" }, { "value": "#8c909c", @@ -1254,7 +1396,8 @@ "color", "foreground", "disabled" - ] + ], + "key": "{color.foreground.disabled}" }, { "value": "#1060ff", @@ -1275,7 +1418,8 @@ "color", "foreground", "action" - ] + ], + "key": "{color.foreground.action}" }, { "value": "#0c56e9", @@ -1296,7 +1440,8 @@ "color", "foreground", "action-hover" - ] + ], + "key": "{color.foreground.action-hover}" }, { "value": "#0046d1", @@ -1317,7 +1462,8 @@ "color", "foreground", "action-active" - ] + ], + "key": "{color.foreground.action-active}" }, { "value": "#a737ff", @@ -1338,7 +1484,8 @@ "color", "foreground", "highlight" - ] + ], + "key": "{color.foreground.highlight}" }, { "value": "#911ced", @@ -1359,7 +1506,8 @@ "color", "foreground", "highlight-on-surface" - ] + ], + "key": "{color.foreground.highlight-on-surface}" }, { "value": "#42215b", @@ -1380,7 +1528,8 @@ "color", "foreground", "highlight-high-contrast" - ] + ], + "key": "{color.foreground.highlight-high-contrast}" }, { "value": "#008a22", @@ -1401,7 +1550,8 @@ "color", "foreground", "success" - ] + ], + "key": "{color.foreground.success}" }, { "value": "#00781e", @@ -1422,7 +1572,8 @@ "color", "foreground", "success-on-surface" - ] + ], + "key": "{color.foreground.success-on-surface}" }, { "value": "#054220", @@ -1443,7 +1594,8 @@ "color", "foreground", "success-high-contrast" - ] + ], + "key": "{color.foreground.success-high-contrast}" }, { "value": "#bb5a00", @@ -1464,7 +1616,8 @@ "color", "foreground", "warning" - ] + ], + "key": "{color.foreground.warning}" }, { "value": "#9e4b00", @@ -1485,7 +1638,8 @@ "color", "foreground", "warning-on-surface" - ] + ], + "key": "{color.foreground.warning-on-surface}" }, { "value": "#542800", @@ -1506,7 +1660,8 @@ "color", "foreground", "warning-high-contrast" - ] + ], + "key": "{color.foreground.warning-high-contrast}" }, { "value": "#e52228", @@ -1527,7 +1682,8 @@ "color", "foreground", "critical" - ] + ], + "key": "{color.foreground.critical}" }, { "value": "#c00005", @@ -1548,7 +1704,8 @@ "color", "foreground", "critical-on-surface" - ] + ], + "key": "{color.foreground.critical-on-surface}" }, { "value": "#51130a", @@ -1569,7 +1726,8 @@ "color", "foreground", "critical-high-contrast" - ] + ], + "key": "{color.foreground.critical-high-contrast}" }, { "value": "#ffffff", @@ -1590,7 +1748,8 @@ "color", "page", "primary" - ] + ], + "key": "{color.page.primary}" }, { "value": "#fafafa", @@ -1611,7 +1770,8 @@ "color", "page", "faint" - ] + ], + "key": "{color.page.faint}" }, { "value": "#ffffff", @@ -1632,7 +1792,8 @@ "color", "surface", "primary" - ] + ], + "key": "{color.surface.primary}" }, { "value": "#fafafa", @@ -1653,7 +1814,8 @@ "color", "surface", "faint" - ] + ], + "key": "{color.surface.faint}" }, { "value": "#f1f2f3", @@ -1674,7 +1836,8 @@ "color", "surface", "strong" - ] + ], + "key": "{color.surface.strong}" }, { "value": "#ffffff", @@ -1695,7 +1858,8 @@ "color", "surface", "interactive" - ] + ], + "key": "{color.surface.interactive}" }, { "value": "#f1f2f3", @@ -1716,7 +1880,8 @@ "color", "surface", "interactive-hover" - ] + ], + "key": "{color.surface.interactive-hover}" }, { "value": "#dedfe3", @@ -1737,7 +1902,8 @@ "color", "surface", "interactive-active" - ] + ], + "key": "{color.surface.interactive-active}" }, { "value": "#fafafa", @@ -1758,7 +1924,8 @@ "color", "surface", "interactive-disabled" - ] + ], + "key": "{color.surface.interactive-disabled}" }, { "value": "#f2f8ff", @@ -1779,7 +1946,8 @@ "color", "surface", "action" - ] + ], + "key": "{color.surface.action}" }, { "value": "#f9f2ff", @@ -1800,7 +1968,8 @@ "color", "surface", "highlight" - ] + ], + "key": "{color.surface.highlight}" }, { "value": "#f2fbf6", @@ -1821,7 +1990,8 @@ "color", "surface", "success" - ] + ], + "key": "{color.surface.success}" }, { "value": "#fff9e8", @@ -1842,7 +2012,8 @@ "color", "surface", "warning" - ] + ], + "key": "{color.surface.warning}" }, { "value": "#fff5f5", @@ -1863,7 +2034,8 @@ "color", "surface", "critical" - ] + ], + "key": "{color.surface.critical}" }, { "value": "#000000", @@ -1884,7 +2056,8 @@ "color", "hashicorp", "brand" - ] + ], + "key": "{color.hashicorp.brand}" }, { "value": "#f24c53", @@ -1905,7 +2078,8 @@ "color", "boundary", "brand" - ] + ], + "key": "{color.boundary.brand}" }, { "value": "#cf2d32", @@ -1926,7 +2100,8 @@ "color", "boundary", "foreground" - ] + ], + "key": "{color.boundary.foreground}" }, { "value": "#ffecec", @@ -1947,7 +2122,8 @@ "color", "boundary", "surface" - ] + ], + "key": "{color.boundary.surface}" }, { "value": "#fbd7d8", @@ -1968,7 +2144,8 @@ "color", "boundary", "border" - ] + ], + "key": "{color.boundary.border}" }, { "value": "#f97076", @@ -1993,7 +2170,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.boundary.gradient.primary.start}" }, { "value": "#db363b", @@ -2018,7 +2196,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.boundary.gradient.primary.stop}" }, { "value": "#fffafa", @@ -2045,7 +2224,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.boundary.gradient.faint.start}" }, { "value": "#ffecec", @@ -2070,7 +2250,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.boundary.gradient.faint.stop}" }, { "value": "#e03875", @@ -2091,7 +2272,8 @@ "color", "consul", "brand" - ] + ], + "key": "{color.consul.brand}" }, { "value": "#d01c5b", @@ -2112,7 +2294,8 @@ "color", "consul", "foreground" - ] + ], + "key": "{color.consul.foreground}" }, { "value": "#ffe9f1", @@ -2133,7 +2316,8 @@ "color", "consul", "surface" - ] + ], + "key": "{color.consul.surface}" }, { "value": "#ffcede", @@ -2154,7 +2338,8 @@ "color", "consul", "border" - ] + ], + "key": "{color.consul.border}" }, { "value": "#ff99be", @@ -2179,7 +2364,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.consul.gradient.primary.start}" }, { "value": "#da306e", @@ -2204,7 +2390,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.consul.gradient.primary.stop}" }, { "value": "#fff9fb", @@ -2231,7 +2418,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.consul.gradient.faint.start}" }, { "value": "#ffe9f1", @@ -2256,7 +2444,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.consul.gradient.faint.stop}" }, { "value": "#000000", @@ -2277,7 +2466,8 @@ "color", "hcp", "brand" - ] + ], + "key": "{color.hcp.brand}" }, { "value": "#06d092", @@ -2298,7 +2488,8 @@ "color", "nomad", "brand" - ] + ], + "key": "{color.nomad.brand}" }, { "value": "#008661", @@ -2319,7 +2510,8 @@ "color", "nomad", "foreground" - ] + ], + "key": "{color.nomad.foreground}" }, { "value": "#d3fdeb", @@ -2340,7 +2532,8 @@ "color", "nomad", "surface" - ] + ], + "key": "{color.nomad.surface}" }, { "value": "#bff3dd", @@ -2361,7 +2554,8 @@ "color", "nomad", "border" - ] + ], + "key": "{color.nomad.border}" }, { "value": "#bff3dd", @@ -2386,7 +2580,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.nomad.gradient.primary.start}" }, { "value": "#60dea9", @@ -2411,7 +2606,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.nomad.gradient.primary.stop}" }, { "value": "#f3fff9", @@ -2438,7 +2634,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.nomad.gradient.faint.start}" }, { "value": "#d3fdeb", @@ -2463,7 +2660,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.nomad.gradient.faint.stop}" }, { "value": "#02a8ef", @@ -2484,7 +2682,8 @@ "color", "packer", "brand" - ] + ], + "key": "{color.packer.brand}" }, { "value": "#007eb4", @@ -2505,7 +2704,8 @@ "color", "packer", "foreground" - ] + ], + "key": "{color.packer.foreground}" }, { "value": "#d4f2ff", @@ -2526,7 +2726,8 @@ "color", "packer", "surface" - ] + ], + "key": "{color.packer.surface}" }, { "value": "#b4e4ff", @@ -2547,7 +2748,8 @@ "color", "packer", "border" - ] + ], + "key": "{color.packer.border}" }, { "value": "#b4e4ff", @@ -2572,7 +2774,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.packer.gradient.primary.start}" }, { "value": "#63d0ff", @@ -2597,7 +2800,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.packer.gradient.primary.stop}" }, { "value": "#f3fcff", @@ -2624,7 +2828,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.packer.gradient.faint.start}" }, { "value": "#d4f2ff", @@ -2649,7 +2854,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.packer.gradient.faint.stop}" }, { "value": "#7b42bc", @@ -2670,7 +2876,8 @@ "color", "terraform", "brand" - ] + ], + "key": "{color.terraform.brand}" }, { "value": "#a067da", @@ -2693,7 +2900,8 @@ "color", "terraform", "brand-on-dark" - ] + ], + "key": "{color.terraform.brand-on-dark}" }, { "value": "#773cb4", @@ -2714,7 +2922,8 @@ "color", "terraform", "foreground" - ] + ], + "key": "{color.terraform.foreground}" }, { "value": "#f4ecff", @@ -2735,7 +2944,8 @@ "color", "terraform", "surface" - ] + ], + "key": "{color.terraform.surface}" }, { "value": "#ebdbfc", @@ -2756,7 +2966,8 @@ "color", "terraform", "border" - ] + ], + "key": "{color.terraform.border}" }, { "value": "#bb8deb", @@ -2781,7 +2992,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.terraform.gradient.primary.start}" }, { "value": "#844fba", @@ -2806,7 +3018,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.terraform.gradient.primary.stop}" }, { "value": "#fcfaff", @@ -2833,7 +3046,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.terraform.gradient.faint.start}" }, { "value": "#f4ecff", @@ -2858,7 +3072,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.terraform.gradient.faint.stop}" }, { "value": "#1868f2", @@ -2879,7 +3094,8 @@ "color", "vagrant", "brand" - ] + ], + "key": "{color.vagrant.brand}" }, { "value": "#1c61d8", @@ -2900,7 +3116,8 @@ "color", "vagrant", "foreground" - ] + ], + "key": "{color.vagrant.foreground}" }, { "value": "#d6ebff", @@ -2921,7 +3138,8 @@ "color", "vagrant", "surface" - ] + ], + "key": "{color.vagrant.surface}" }, { "value": "#c7dbfc", @@ -2942,7 +3160,8 @@ "color", "vagrant", "border" - ] + ], + "key": "{color.vagrant.border}" }, { "value": "#639cff", @@ -2967,7 +3186,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.vagrant.gradient.primary.start}" }, { "value": "#2e71e5", @@ -2992,7 +3212,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.vagrant.gradient.primary.stop}" }, { "value": "#f4faff", @@ -3019,7 +3240,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.vagrant.gradient.faint.start}" }, { "value": "#d6ebff", @@ -3044,7 +3266,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.vagrant.gradient.faint.stop}" }, { "value": "#ffcf25", @@ -3065,7 +3288,8 @@ "color", "vault-radar", "brand" - ] + ], + "key": "{color.vault-radar.brand}" }, { "value": "#000000", @@ -3088,7 +3312,8 @@ "color", "vault-radar", "brand-alt" - ] + ], + "key": "{color.vault-radar.brand-alt}" }, { "value": "#9a6f00", @@ -3109,7 +3334,8 @@ "color", "vault-radar", "foreground" - ] + ], + "key": "{color.vault-radar.foreground}" }, { "value": "#fff9cf", @@ -3130,7 +3356,8 @@ "color", "vault-radar", "surface" - ] + ], + "key": "{color.vault-radar.surface}" }, { "value": "#feec7b", @@ -3151,7 +3378,8 @@ "color", "vault-radar", "border" - ] + ], + "key": "{color.vault-radar.border}" }, { "value": "#feec7b", @@ -3176,7 +3404,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.vault-radar.gradient.primary.start}" }, { "value": "#ffe543", @@ -3201,7 +3430,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.vault-radar.gradient.primary.stop}" }, { "value": "#fffdf2", @@ -3228,7 +3458,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.vault-radar.gradient.faint.start}" }, { "value": "#fff9cf", @@ -3253,7 +3484,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.vault-radar.gradient.faint.stop}" }, { "value": "#ffcf25", @@ -3274,7 +3506,8 @@ "color", "vault-secrets", "brand" - ] + ], + "key": "{color.vault-secrets.brand}" }, { "value": "#000000", @@ -3297,7 +3530,8 @@ "color", "vault-secrets", "brand-alt" - ] + ], + "key": "{color.vault-secrets.brand-alt}" }, { "value": "#9a6f00", @@ -3318,7 +3552,8 @@ "color", "vault-secrets", "foreground" - ] + ], + "key": "{color.vault-secrets.foreground}" }, { "value": "#fff9cf", @@ -3339,7 +3574,8 @@ "color", "vault-secrets", "surface" - ] + ], + "key": "{color.vault-secrets.surface}" }, { "value": "#feec7b", @@ -3360,7 +3596,8 @@ "color", "vault-secrets", "border" - ] + ], + "key": "{color.vault-secrets.border}" }, { "value": "#feec7b", @@ -3385,7 +3622,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.vault-secrets.gradient.primary.start}" }, { "value": "#ffe543", @@ -3410,7 +3648,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.vault-secrets.gradient.primary.stop}" }, { "value": "#fffdf2", @@ -3437,7 +3676,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.vault-secrets.gradient.faint.start}" }, { "value": "#fff9cf", @@ -3462,7 +3702,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.vault-secrets.gradient.faint.stop}" }, { "value": "#ffcf25", @@ -3483,7 +3724,8 @@ "color", "vault", "brand" - ] + ], + "key": "{color.vault.brand}" }, { "value": "#000000", @@ -3506,7 +3748,8 @@ "color", "vault", "brand-alt" - ] + ], + "key": "{color.vault.brand-alt}" }, { "value": "#9a6f00", @@ -3527,7 +3770,8 @@ "color", "vault", "foreground" - ] + ], + "key": "{color.vault.foreground}" }, { "value": "#fff9cf", @@ -3548,7 +3792,8 @@ "color", "vault", "surface" - ] + ], + "key": "{color.vault.surface}" }, { "value": "#feec7b", @@ -3569,7 +3814,8 @@ "color", "vault", "border" - ] + ], + "key": "{color.vault.border}" }, { "value": "#feec7b", @@ -3594,7 +3840,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.vault.gradient.primary.start}" }, { "value": "#ffe543", @@ -3619,7 +3866,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.vault.gradient.primary.stop}" }, { "value": "#fffdf2", @@ -3646,7 +3894,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.vault.gradient.faint.start}" }, { "value": "#fff9cf", @@ -3671,7 +3920,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.vault.gradient.faint.stop}" }, { "value": "#14c6cb", @@ -3692,7 +3942,8 @@ "color", "waypoint", "brand" - ] + ], + "key": "{color.waypoint.brand}" }, { "value": "#008196", @@ -3713,7 +3964,8 @@ "color", "waypoint", "foreground" - ] + ], + "key": "{color.waypoint.foreground}" }, { "value": "#e0fcff", @@ -3734,7 +3986,8 @@ "color", "waypoint", "surface" - ] + ], + "key": "{color.waypoint.surface}" }, { "value": "#cbf1f3", @@ -3755,7 +4008,8 @@ "color", "waypoint", "border" - ] + ], + "key": "{color.waypoint.border}" }, { "value": "#cbf1f3", @@ -3780,7 +4034,8 @@ "gradient", "primary", "start" - ] + ], + "key": "{color.waypoint.gradient.primary.start}" }, { "value": "#62d4dc", @@ -3805,7 +4060,8 @@ "gradient", "primary", "stop" - ] + ], + "key": "{color.waypoint.gradient.primary.stop}" }, { "value": "#f6feff", @@ -3832,7 +4088,8 @@ "gradient", "faint", "start" - ] + ], + "key": "{color.waypoint.gradient.faint.start}" }, { "value": "#e0fcff", @@ -3857,7 +4114,8 @@ "gradient", "faint", "stop" - ] + ], + "key": "{color.waypoint.gradient.faint.stop}" }, { "value": "inset 0px 1px 2px 1px #656a761a", @@ -3874,7 +4132,8 @@ "elevation", "inset", "box-shadow" - ] + ], + "key": "{elevation.inset.box-shadow}" }, { "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", @@ -3891,7 +4150,8 @@ "elevation", "low", "box-shadow" - ] + ], + "key": "{elevation.low.box-shadow}" }, { "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", @@ -3908,7 +4168,8 @@ "elevation", "mid", "box-shadow" - ] + ], + "key": "{elevation.mid.box-shadow}" }, { "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", @@ -3925,7 +4186,8 @@ "elevation", "high", "box-shadow" - ] + ], + "key": "{elevation.high.box-shadow}" }, { "value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", @@ -3942,7 +4204,8 @@ "elevation", "higher", "box-shadow" - ] + ], + "key": "{elevation.higher.box-shadow}" }, { "value": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", @@ -3959,7 +4222,8 @@ "elevation", "overlay", "box-shadow" - ] + ], + "key": "{elevation.overlay.box-shadow}" }, { "value": "inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a", @@ -3976,7 +4240,8 @@ "surface", "inset", "box-shadow" - ] + ], + "key": "{surface.inset.box-shadow}" }, { "value": "0 0 0 1px #656a7633", @@ -3993,7 +4258,8 @@ "surface", "base", "box-shadow" - ] + ], + "key": "{surface.base.box-shadow}" }, { "value": "0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", @@ -4010,7 +4276,8 @@ "surface", "low", "box-shadow" - ] + ], + "key": "{surface.low.box-shadow}" }, { "value": "0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", @@ -4027,7 +4294,8 @@ "surface", "mid", "box-shadow" - ] + ], + "key": "{surface.mid.box-shadow}" }, { "value": "0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", @@ -4044,7 +4312,8 @@ "surface", "high", "box-shadow" - ] + ], + "key": "{surface.high.box-shadow}" }, { "value": "0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", @@ -4061,7 +4330,8 @@ "surface", "higher", "box-shadow" - ] + ], + "key": "{surface.higher.box-shadow}" }, { "value": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", @@ -4078,7 +4348,8 @@ "surface", "overlay", "box-shadow" - ] + ], + "key": "{surface.overlay.box-shadow}" }, { "value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", @@ -4095,7 +4366,8 @@ "focus-ring", "action", "box-shadow" - ] + ], + "key": "{focus-ring.action.box-shadow}" }, { "value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", @@ -4112,7 +4384,8 @@ "focus-ring", "critical", "box-shadow" - ] + ], + "key": "{focus-ring.critical.box-shadow}" }, { "value": "60px", @@ -4129,7 +4402,8 @@ "path": [ "app-header", "height" - ] + ], + "key": "{app-header.height}" }, { "value": "36px", @@ -4148,7 +4422,8 @@ "app-header", "home-link", "size" - ] + ], + "key": "{app-header.home-link.size}" }, { "value": "28px", @@ -4167,7 +4442,8 @@ "app-header", "logo", "size" - ] + ], + "key": "{app-header.logo.size}" }, { "value": "1px", @@ -4188,7 +4464,8 @@ "wrapper", "border", "width" - ] + ], + "key": "{app-side-nav.wrapper.border.width}" }, { "value": "var(--token-color-palette-neutral-200)", @@ -4211,7 +4488,8 @@ "wrapper", "border", "color" - ] + ], + "key": "{app-side-nav.wrapper.border.color}" }, { "value": "16px", @@ -4232,7 +4510,8 @@ "wrapper", "padding", "horizontal" - ] + ], + "key": "{app-side-nav.wrapper.padding.horizontal}" }, { "value": "16px", @@ -4253,7 +4532,8 @@ "wrapper", "padding", "vertical" - ] + ], + "key": "{app-side-nav.wrapper.padding.vertical}" }, { "value": "8px", @@ -4274,7 +4554,8 @@ "wrapper", "padding", "horizontal-minimized" - ] + ], + "key": "{app-side-nav.wrapper.padding.horizontal-minimized}" }, { "value": "22px", @@ -4295,7 +4576,8 @@ "wrapper", "padding", "vertical-minimized" - ] + ], + "key": "{app-side-nav.wrapper.padding.vertical-minimized}" }, { "value": "5px", @@ -4316,7 +4598,8 @@ "toggle-button", "border", "radius" - ] + ], + "key": "{app-side-nav.toggle-button.border.radius}" }, { "value": "4px", @@ -4337,7 +4620,8 @@ "header", "home-link", "padding" - ] + ], + "key": "{app-side-nav.header.home-link.padding}" }, { "value": "48px", @@ -4358,7 +4642,8 @@ "header", "home-link", "logo-size" - ] + ], + "key": "{app-side-nav.header.home-link.logo-size}" }, { "value": "32px", @@ -4379,7 +4664,8 @@ "header", "home-link", "logo-size-minimized" - ] + ], + "key": "{app-side-nav.header.home-link.logo-size-minimized}" }, { "value": "8px", @@ -4400,7 +4686,8 @@ "header", "actions", "spacing" - ] + ], + "key": "{app-side-nav.header.actions.spacing}" }, { "value": "24px", @@ -4421,7 +4708,8 @@ "body", "list", "margin-vertical" - ] + ], + "key": "{app-side-nav.body.list.margin-vertical}" }, { "value": "36px", @@ -4442,7 +4730,8 @@ "body", "list-item", "height" - ] + ], + "key": "{app-side-nav.body.list-item.height}" }, { "value": "8px", @@ -4465,7 +4754,8 @@ "list-item", "padding", "horizontal" - ] + ], + "key": "{app-side-nav.body.list-item.padding.horizontal}" }, { "value": "4px", @@ -4488,7 +4778,8 @@ "list-item", "padding", "vertical" - ] + ], + "key": "{app-side-nav.body.list-item.padding.vertical}" }, { "value": "2px", @@ -4509,7 +4800,8 @@ "body", "list-item", "spacing-vertical" - ] + ], + "key": "{app-side-nav.body.list-item.spacing-vertical}" }, { "value": "8px", @@ -4530,7 +4822,8 @@ "body", "list-item", "content-spacing-horizontal" - ] + ], + "key": "{app-side-nav.body.list-item.content-spacing-horizontal}" }, { "value": "5px", @@ -4551,7 +4844,8 @@ "body", "list-item", "border-radius" - ] + ], + "key": "{app-side-nav.body.list-item.border-radius}" }, { "value": "var(--token-color-foreground-primary)", @@ -4574,7 +4868,8 @@ "color", "foreground", "primary" - ] + ], + "key": "{app-side-nav.color.foreground.primary}" }, { "value": "var(--token-color-foreground-primary)", @@ -4597,7 +4892,8 @@ "color", "foreground", "strong" - ] + ], + "key": "{app-side-nav.color.foreground.strong}" }, { "value": "var(--token-color-foreground-faint)", @@ -4620,7 +4916,8 @@ "color", "foreground", "faint" - ] + ], + "key": "{app-side-nav.color.foreground.faint}" }, { "value": "var(--token-color-surface-faint)", @@ -4643,7 +4940,8 @@ "color", "surface", "primary" - ] + ], + "key": "{app-side-nav.color.surface.primary}" }, { "value": "var(--token-color-surface-interactive-hover)", @@ -4666,7 +4964,8 @@ "color", "surface", "interactive-hover" - ] + ], + "key": "{app-side-nav.color.surface.interactive-hover}" }, { "value": "var(--token-color-palette-neutral-300)", @@ -4689,7 +4988,8 @@ "color", "surface", "interactive-active" - ] + ], + "key": "{app-side-nav.color.surface.interactive-active}" }, { "value": "#0c0c0e", @@ -4710,7 +5010,8 @@ "form", "label", "color" - ] + ], + "key": "{form.label.color}" }, { "value": "#0c0c0e", @@ -4731,7 +5032,8 @@ "form", "legend", "color" - ] + ], + "key": "{form.legend.color}" }, { "value": "#656a76", @@ -4752,7 +5054,8 @@ "form", "helper-text", "color" - ] + ], + "key": "{form.helper-text.color}" }, { "value": "#656a76", @@ -4775,7 +5078,8 @@ "indicator", "optional", "color" - ] + ], + "key": "{form.indicator.optional.color}" }, { "value": "#c00005", @@ -4796,7 +5100,8 @@ "form", "error", "color" - ] + ], + "key": "{form.error.color}" }, { "value": "14px", @@ -4815,7 +5120,8 @@ "form", "error", "icon-size" - ] + ], + "key": "{form.error.icon-size}" }, { "value": "16px", @@ -4834,7 +5140,8 @@ "form", "checkbox", "size" - ] + ], + "key": "{form.checkbox.size}" }, { "value": "3px", @@ -4855,7 +5162,8 @@ "checkbox", "border", "radius" - ] + ], + "key": "{form.checkbox.border.radius}" }, { "value": "1px", @@ -4876,7 +5184,8 @@ "checkbox", "border", "width" - ] + ], + "key": "{form.checkbox.border.width}" }, { "value": "12px", @@ -4897,7 +5206,8 @@ "checkbox", "background-image", "size" - ] + ], + "key": "{form.checkbox.background-image.size}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", @@ -4918,7 +5228,8 @@ "checkbox", "background-image", "data-url" - ] + ], + "key": "{form.checkbox.background-image.data-url}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")", @@ -4939,7 +5250,8 @@ "checkbox", "background-image", "data-url-indeterminate" - ] + ], + "key": "{form.checkbox.background-image.data-url-indeterminate}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", @@ -4960,7 +5272,8 @@ "checkbox", "background-image", "data-url-disabled" - ] + ], + "key": "{form.checkbox.background-image.data-url-disabled}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")", @@ -4981,7 +5294,8 @@ "checkbox", "background-image", "data-url-indeterminate-disabled" - ] + ], + "key": "{form.checkbox.background-image.data-url-indeterminate-disabled}" }, { "value": "#0c0c0e", @@ -5006,7 +5320,8 @@ "base", "foreground", "value-color" - ] + ], + "key": "{form.control.base.foreground.value-color}" }, { "value": "#656a76", @@ -5031,7 +5346,8 @@ "base", "foreground", "placeholder-color" - ] + ], + "key": "{form.control.base.foreground.placeholder-color}" }, { "value": "#ffffff", @@ -5056,7 +5372,8 @@ "base", "surface-color", "default" - ] + ], + "key": "{form.control.base.surface-color.default}" }, { "value": "#f1f2f3", @@ -5081,7 +5398,8 @@ "base", "surface-color", "hover" - ] + ], + "key": "{form.control.base.surface-color.hover}" }, { "value": "#8c909c", @@ -5106,7 +5424,8 @@ "base", "border-color", "default" - ] + ], + "key": "{form.control.base.border-color.default}" }, { "value": "#656a76", @@ -5131,7 +5450,8 @@ "base", "border-color", "hover" - ] + ], + "key": "{form.control.base.border-color.hover}" }, { "value": "#ffffff", @@ -5154,7 +5474,8 @@ "control", "checked", "foreground-color" - ] + ], + "key": "{form.control.checked.foreground-color}" }, { "value": "#1060ff", @@ -5179,7 +5500,8 @@ "checked", "surface-color", "default" - ] + ], + "key": "{form.control.checked.surface-color.default}" }, { "value": "#0c56e9", @@ -5204,7 +5526,8 @@ "checked", "surface-color", "hover" - ] + ], + "key": "{form.control.checked.surface-color.hover}" }, { "value": "#0c56e9", @@ -5229,7 +5552,8 @@ "checked", "border-color", "default" - ] + ], + "key": "{form.control.checked.border-color.default}" }, { "value": "#0046d1", @@ -5254,7 +5578,8 @@ "checked", "border-color", "hover" - ] + ], + "key": "{form.control.checked.border-color.hover}" }, { "value": "#c00005", @@ -5279,7 +5604,8 @@ "invalid", "border-color", "default" - ] + ], + "key": "{form.control.invalid.border-color.default}" }, { "value": "#940004", @@ -5304,7 +5630,8 @@ "invalid", "border-color", "hover" - ] + ], + "key": "{form.control.invalid.border-color.hover}" }, { "value": "#3b3d45", @@ -5327,7 +5654,8 @@ "control", "readonly", "foreground-color" - ] + ], + "key": "{form.control.readonly.foreground-color}" }, { "value": "#f1f2f3", @@ -5350,7 +5678,8 @@ "control", "readonly", "surface-color" - ] + ], + "key": "{form.control.readonly.surface-color}" }, { "value": "#656a761a", @@ -5373,7 +5702,8 @@ "control", "readonly", "border-color" - ] + ], + "key": "{form.control.readonly.border-color}" }, { "value": "#8c909c", @@ -5396,7 +5726,8 @@ "control", "disabled", "foreground-color" - ] + ], + "key": "{form.control.disabled.foreground-color}" }, { "value": "#fafafa", @@ -5419,7 +5750,8 @@ "control", "disabled", "surface-color" - ] + ], + "key": "{form.control.disabled.surface-color}" }, { "value": "#656a7633", @@ -5442,7 +5774,8 @@ "control", "disabled", "border-color" - ] + ], + "key": "{form.control.disabled.border-color}" }, { "value": "7px", @@ -5463,7 +5796,8 @@ "form", "control", "padding" - ] + ], + "key": "{form.control.padding}" }, { "value": "5px", @@ -5484,7 +5818,8 @@ "control", "border", "radius" - ] + ], + "key": "{form.control.border.radius}" }, { "value": "1px", @@ -5505,7 +5840,8 @@ "control", "border", "width" - ] + ], + "key": "{form.control.border.width}" }, { "value": "16px", @@ -5524,7 +5860,8 @@ "form", "radio", "size" - ] + ], + "key": "{form.radio.size}" }, { "value": "1px", @@ -5545,7 +5882,8 @@ "radio", "border", "width" - ] + ], + "key": "{form.radio.border.width}" }, { "value": "12px", @@ -5566,7 +5904,8 @@ "radio", "background-image", "size" - ] + ], + "key": "{form.radio.background-image.size}" }, { "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")", @@ -5587,7 +5926,8 @@ "radio", "background-image", "data-url" - ] + ], + "key": "{form.radio.background-image.data-url}" }, { "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")", @@ -5608,7 +5948,8 @@ "radio", "background-image", "data-url-disabled" - ] + ], + "key": "{form.radio.background-image.data-url-disabled}" }, { "value": "16px", @@ -5627,7 +5968,8 @@ "form", "radiocard-group", "gap" - ] + ], + "key": "{form.radiocard-group.gap}" }, { "value": "1px", @@ -5648,7 +5990,8 @@ "radiocard", "border", "width" - ] + ], + "key": "{form.radiocard.border.width}" }, { "value": "6px", @@ -5669,7 +6012,8 @@ "radiocard", "border", "radius" - ] + ], + "key": "{form.radiocard.border.radius}" }, { "value": "24px", @@ -5688,7 +6032,8 @@ "form", "radiocard", "content-padding" - ] + ], + "key": "{form.radiocard.content-padding}" }, { "value": "8px", @@ -5707,7 +6052,8 @@ "form", "radiocard", "control-padding" - ] + ], + "key": "{form.radiocard.control-padding}" }, { "value": "0.2s", @@ -5730,7 +6076,8 @@ "radiocard", "transition", "duration" - ] + ], + "key": "{form.radiocard.transition.duration}" }, { "value": "16px", @@ -5751,7 +6098,8 @@ "select", "background-image", "size" - ] + ], + "key": "{form.select.background-image.size}" }, { "value": "7px", @@ -5772,7 +6120,8 @@ "select", "background-image", "position-right-x" - ] + ], + "key": "{form.select.background-image.position-right-x}" }, { "value": "9px", @@ -5793,7 +6142,8 @@ "select", "background-image", "position-top-y" - ] + ], + "key": "{form.select.background-image.position-top-y}" }, { "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")", @@ -5814,7 +6164,8 @@ "select", "background-image", "data-url" - ] + ], + "key": "{form.select.background-image.data-url}" }, { "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")", @@ -5835,7 +6186,8 @@ "select", "background-image", "data-url-disabled" - ] + ], + "key": "{form.select.background-image.data-url-disabled}" }, { "value": "16px", @@ -5856,7 +6208,8 @@ "text-input", "background-image", "size" - ] + ], + "key": "{form.text-input.background-image.size}" }, { "value": "7px", @@ -5877,7 +6230,8 @@ "text-input", "background-image", "position-x" - ] + ], + "key": "{form.text-input.background-image.position-x}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")", @@ -5898,7 +6252,8 @@ "text-input", "background-image", "data-url-date" - ] + ], + "key": "{form.text-input.background-image.data-url-date}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", @@ -5919,7 +6274,8 @@ "text-input", "background-image", "data-url-time" - ] + ], + "key": "{form.text-input.background-image.data-url-time}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")", @@ -5940,7 +6296,8 @@ "text-input", "background-image", "data-url-search" - ] + ], + "key": "{form.text-input.background-image.data-url-search}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")", @@ -5961,7 +6318,8 @@ "text-input", "background-image", "data-url-search-cancel" - ] + ], + "key": "{form.text-input.background-image.data-url-search-cancel}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", @@ -5982,7 +6340,8 @@ "text-input", "background-image", "data-url-search-loading" - ] + ], + "key": "{form.text-input.background-image.data-url-search-loading}" }, { "value": "32px", @@ -6001,7 +6360,8 @@ "form", "toggle", "width" - ] + ], + "key": "{form.toggle.width}" }, { "value": "16px", @@ -6020,7 +6380,8 @@ "form", "toggle", "height" - ] + ], + "key": "{form.toggle.height}" }, { "value": "#f1f2f3", @@ -6047,7 +6408,8 @@ "base", "surface-color", "default" - ] + ], + "key": "{form.toggle.base.surface-color.default}" }, { "value": "3px", @@ -6068,7 +6430,8 @@ "toggle", "border", "radius" - ] + ], + "key": "{form.toggle.border.radius}" }, { "value": "1px", @@ -6089,7 +6452,8 @@ "toggle", "border", "width" - ] + ], + "key": "{form.toggle.border.width}" }, { "value": "12px", @@ -6110,7 +6474,8 @@ "toggle", "background-image", "size" - ] + ], + "key": "{form.toggle.background-image.size}" }, { "value": "2px", @@ -6131,7 +6496,8 @@ "toggle", "background-image", "position-x" - ] + ], + "key": "{form.toggle.background-image.position-x}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", @@ -6152,7 +6518,8 @@ "toggle", "background-image", "data-url" - ] + ], + "key": "{form.toggle.background-image.data-url}" }, { "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", @@ -6173,7 +6540,8 @@ "toggle", "background-image", "data-url-disabled" - ] + ], + "key": "{form.toggle.background-image.data-url-disabled}" }, { "value": "0.2s", @@ -6196,7 +6564,8 @@ "toggle", "transition", "duration" - ] + ], + "key": "{form.toggle.transition.duration}" }, { "value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", @@ -6215,7 +6584,8 @@ "toggle", "transition", "timing-function" - ] + ], + "key": "{form.toggle.transition.timing-function}" }, { "value": "16px", @@ -6234,7 +6604,8 @@ "form", "toggle", "thumb-size" - ] + ], + "key": "{form.toggle.thumb-size}" }, { "value": "36px", @@ -6255,7 +6626,8 @@ "nav", "control", "height" - ] + ], + "key": "{pagination.nav.control.height}" }, { "value": "12px", @@ -6278,7 +6650,8 @@ "control", "padding", "horizontal" - ] + ], + "key": "{pagination.nav.control.padding.horizontal}" }, { "value": "4px", @@ -6299,7 +6672,8 @@ "nav", "control", "focus-inset" - ] + ], + "key": "{pagination.nav.control.focus-inset}" }, { "value": "6px", @@ -6320,7 +6694,8 @@ "nav", "control", "icon-spacing" - ] + ], + "key": "{pagination.nav.control.icon-spacing}" }, { "value": "2px", @@ -6341,7 +6716,8 @@ "nav", "indicator", "height" - ] + ], + "key": "{pagination.nav.indicator.height}" }, { "value": "6px", @@ -6362,7 +6738,8 @@ "nav", "indicator", "spacing" - ] + ], + "key": "{pagination.nav.indicator.spacing}" }, { "value": "8px", @@ -6383,7 +6760,8 @@ "child", "spacing", "vertical" - ] + ], + "key": "{pagination.child.spacing.vertical}" }, { "value": "20px", @@ -6404,7 +6782,8 @@ "child", "spacing", "horizontal" - ] + ], + "key": "{pagination.child.spacing.horizontal}" }, { "value": "1px", @@ -6425,7 +6804,8 @@ "wrapper", "border", "width" - ] + ], + "key": "{side-nav.wrapper.border.width}" }, { "value": "#656a76", @@ -6448,7 +6828,8 @@ "wrapper", "border", "color" - ] + ], + "key": "{side-nav.wrapper.border.color}" }, { "value": "16px", @@ -6469,7 +6850,8 @@ "wrapper", "padding", "horizontal" - ] + ], + "key": "{side-nav.wrapper.padding.horizontal}" }, { "value": "16px", @@ -6490,7 +6872,8 @@ "wrapper", "padding", "vertical" - ] + ], + "key": "{side-nav.wrapper.padding.vertical}" }, { "value": "8px", @@ -6511,7 +6894,8 @@ "wrapper", "padding", "horizontal-minimized" - ] + ], + "key": "{side-nav.wrapper.padding.horizontal-minimized}" }, { "value": "22px", @@ -6532,7 +6916,8 @@ "wrapper", "padding", "vertical-minimized" - ] + ], + "key": "{side-nav.wrapper.padding.vertical-minimized}" }, { "value": "5px", @@ -6553,7 +6938,8 @@ "toggle-button", "border", "radius" - ] + ], + "key": "{side-nav.toggle-button.border.radius}" }, { "value": "4px", @@ -6574,7 +6960,8 @@ "header", "home-link", "padding" - ] + ], + "key": "{side-nav.header.home-link.padding}" }, { "value": "48px", @@ -6595,7 +6982,8 @@ "header", "home-link", "logo-size" - ] + ], + "key": "{side-nav.header.home-link.logo-size}" }, { "value": "32px", @@ -6616,7 +7004,8 @@ "header", "home-link", "logo-size-minimized" - ] + ], + "key": "{side-nav.header.home-link.logo-size-minimized}" }, { "value": "8px", @@ -6637,7 +7026,8 @@ "header", "actions", "spacing" - ] + ], + "key": "{side-nav.header.actions.spacing}" }, { "value": "24px", @@ -6658,7 +7048,8 @@ "body", "list", "margin-vertical" - ] + ], + "key": "{side-nav.body.list.margin-vertical}" }, { "value": "36px", @@ -6679,7 +7070,8 @@ "body", "list-item", "height" - ] + ], + "key": "{side-nav.body.list-item.height}" }, { "value": "8px", @@ -6702,7 +7094,8 @@ "list-item", "padding", "horizontal" - ] + ], + "key": "{side-nav.body.list-item.padding.horizontal}" }, { "value": "4px", @@ -6725,7 +7118,8 @@ "list-item", "padding", "vertical" - ] + ], + "key": "{side-nav.body.list-item.padding.vertical}" }, { "value": "2px", @@ -6746,7 +7140,8 @@ "body", "list-item", "spacing-vertical" - ] + ], + "key": "{side-nav.body.list-item.spacing-vertical}" }, { "value": "8px", @@ -6767,7 +7162,8 @@ "body", "list-item", "content-spacing-horizontal" - ] + ], + "key": "{side-nav.body.list-item.content-spacing-horizontal}" }, { "value": "5px", @@ -6788,7 +7184,8 @@ "body", "list-item", "border-radius" - ] + ], + "key": "{side-nav.body.list-item.border-radius}" }, { "value": "#dedfe3", @@ -6811,7 +7208,8 @@ "color", "foreground", "primary" - ] + ], + "key": "{side-nav.color.foreground.primary}" }, { "value": "#ffffff", @@ -6834,7 +7232,8 @@ "color", "foreground", "strong" - ] + ], + "key": "{side-nav.color.foreground.strong}" }, { "value": "#8c909c", @@ -6857,7 +7256,8 @@ "color", "foreground", "faint" - ] + ], + "key": "{side-nav.color.foreground.faint}" }, { "value": "#0c0c0e", @@ -6880,7 +7280,8 @@ "color", "surface", "primary" - ] + ], + "key": "{side-nav.color.surface.primary}" }, { "value": "#3b3d45", @@ -6903,7 +7304,8 @@ "color", "surface", "interactive-hover" - ] + ], + "key": "{side-nav.color.surface.interactive-hover}" }, { "value": "#656a76", @@ -6926,7 +7328,8 @@ "color", "surface", "interactive-active" - ] + ], + "key": "{side-nav.color.surface.interactive-active}" }, { "value": "36px", @@ -6947,7 +7350,8 @@ "tab", "height", "medium" - ] + ], + "key": "{tabs.tab.height.medium}" }, { "value": "48px", @@ -6968,7 +7372,8 @@ "tab", "height", "large" - ] + ], + "key": "{tabs.tab.height.large}" }, { "value": "12px", @@ -6991,7 +7396,8 @@ "padding", "horizontal", "medium" - ] + ], + "key": "{tabs.tab.padding.horizontal.medium}" }, { "value": "20px", @@ -7014,7 +7420,8 @@ "padding", "horizontal", "large" - ] + ], + "key": "{tabs.tab.padding.horizontal.large}" }, { "value": "0px", @@ -7035,7 +7442,8 @@ "tab", "padding", "vertical" - ] + ], + "key": "{tabs.tab.padding.vertical}" }, { "value": "5px", @@ -7054,7 +7462,8 @@ "tabs", "tab", "border-radius" - ] + ], + "key": "{tabs.tab.border-radius}" }, { "value": "6px", @@ -7073,7 +7482,8 @@ "tabs", "tab", "focus-inset" - ] + ], + "key": "{tabs.tab.focus-inset}" }, { "value": "6px", @@ -7092,7 +7502,8 @@ "tabs", "tab", "gutter" - ] + ], + "key": "{tabs.tab.gutter}" }, { "value": "3px", @@ -7111,7 +7522,8 @@ "tabs", "indicator", "height" - ] + ], + "key": "{tabs.indicator.height}" }, { "value": "cubic-bezier(0.5, 1, 0.89, 1)", @@ -7130,7 +7542,8 @@ "indicator", "transition", "function" - ] + ], + "key": "{tabs.indicator.transition.function}" }, { "value": "0.6s", @@ -7153,7 +7566,8 @@ "indicator", "transition", "duration" - ] + ], + "key": "{tabs.indicator.transition.duration}" }, { "value": "1px", @@ -7172,7 +7586,8 @@ "tabs", "divider", "height" - ] + ], + "key": "{tabs.divider.height}" }, { "value": "5px", @@ -7189,7 +7604,8 @@ "path": [ "tooltip", "border-radius" - ] + ], + "key": "{tooltip.border-radius}" }, { "value": "var(--token-color-foreground-high-contrast)", @@ -7212,7 +7628,8 @@ "color", "foreground", "primary" - ] + ], + "key": "{tooltip.color.foreground.primary}" }, { "value": "var(--token-color-palette-neutral-700)", @@ -7235,7 +7652,8 @@ "color", "surface", "primary" - ] + ], + "key": "{tooltip.color.surface.primary}" }, { "value": "-2px", @@ -7252,7 +7670,8 @@ "path": [ "tooltip", "focus-offset" - ] + ], + "key": "{tooltip.focus-offset}" }, { "value": "280px", @@ -7269,7 +7688,8 @@ "path": [ "tooltip", "max-width" - ] + ], + "key": "{tooltip.max-width}" }, { "value": "12px", @@ -7288,7 +7708,8 @@ "tooltip", "padding", "horizontal" - ] + ], + "key": "{tooltip.padding.horizontal}" }, { "value": "8px", @@ -7307,7 +7728,8 @@ "tooltip", "padding", "vertical" - ] + ], + "key": "{tooltip.padding.vertical}" }, { "value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", @@ -7324,7 +7746,8 @@ "tooltip", "transition", "function" - ] + ], + "key": "{tooltip.transition.function}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7341,7 +7764,8 @@ "typography", "font-stack", "display" - ] + ], + "key": "{typography.font-stack.display}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7358,7 +7782,8 @@ "typography", "font-stack", "text" - ] + ], + "key": "{typography.font-stack.text}" }, { "value": "ui-monospace, Menlo, Consolas, monospace", @@ -7375,7 +7800,8 @@ "typography", "font-stack", "code" - ] + ], + "key": "{typography.font-stack.code}" }, { "value": "400", @@ -7392,7 +7818,8 @@ "typography", "font-weight", "regular" - ] + ], + "key": "{typography.font-weight.regular}" }, { "value": "500", @@ -7409,7 +7836,8 @@ "typography", "font-weight", "medium" - ] + ], + "key": "{typography.font-weight.medium}" }, { "value": "600", @@ -7426,7 +7854,8 @@ "typography", "font-weight", "semibold" - ] + ], + "key": "{typography.font-weight.semibold}" }, { "value": "700", @@ -7443,7 +7872,8 @@ "typography", "font-weight", "bold" - ] + ], + "key": "{typography.font-weight.bold}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7460,7 +7890,8 @@ "typography", "display-500", "font-family" - ] + ], + "key": "{typography.display-500.font-family}" }, { "value": "1.875rem", @@ -7481,7 +7912,8 @@ "typography", "display-500", "font-size" - ] + ], + "key": "{typography.display-500.font-size}" }, { "value": "1.2666", @@ -7500,7 +7932,8 @@ "typography", "display-500", "line-height" - ] + ], + "key": "{typography.display-500.line-height}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7517,7 +7950,8 @@ "typography", "display-400", "font-family" - ] + ], + "key": "{typography.display-400.font-family}" }, { "value": "1.5rem", @@ -7538,7 +7972,8 @@ "typography", "display-400", "font-size" - ] + ], + "key": "{typography.display-400.font-size}" }, { "value": "1.3333", @@ -7557,7 +7992,8 @@ "typography", "display-400", "line-height" - ] + ], + "key": "{typography.display-400.line-height}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7574,7 +8010,8 @@ "typography", "display-300", "font-family" - ] + ], + "key": "{typography.display-300.font-family}" }, { "value": "1.125rem", @@ -7595,7 +8032,8 @@ "typography", "display-300", "font-size" - ] + ], + "key": "{typography.display-300.font-size}" }, { "value": "1.3333", @@ -7614,7 +8052,8 @@ "typography", "display-300", "line-height" - ] + ], + "key": "{typography.display-300.line-height}" }, { "value": "-0.5px", @@ -7633,7 +8072,8 @@ "typography", "display-300", "letter-spacing" - ] + ], + "key": "{typography.display-300.letter-spacing}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7650,7 +8090,8 @@ "typography", "display-200", "font-family" - ] + ], + "key": "{typography.display-200.font-family}" }, { "value": "1rem", @@ -7671,7 +8112,8 @@ "typography", "display-200", "font-size" - ] + ], + "key": "{typography.display-200.font-size}" }, { "value": "1.5", @@ -7690,7 +8132,8 @@ "typography", "display-200", "line-height" - ] + ], + "key": "{typography.display-200.line-height}" }, { "value": "-0.5px", @@ -7709,7 +8152,8 @@ "typography", "display-200", "letter-spacing" - ] + ], + "key": "{typography.display-200.letter-spacing}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7726,7 +8170,8 @@ "typography", "display-100", "font-family" - ] + ], + "key": "{typography.display-100.font-family}" }, { "value": "0.8125rem", @@ -7747,7 +8192,8 @@ "typography", "display-100", "font-size" - ] + ], + "key": "{typography.display-100.font-size}" }, { "value": "1.3846", @@ -7766,7 +8212,8 @@ "typography", "display-100", "line-height" - ] + ], + "key": "{typography.display-100.line-height}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7783,7 +8230,8 @@ "typography", "body-300", "font-family" - ] + ], + "key": "{typography.body-300.font-family}" }, { "value": "1rem", @@ -7804,7 +8252,8 @@ "typography", "body-300", "font-size" - ] + ], + "key": "{typography.body-300.font-size}" }, { "value": "1.5", @@ -7823,7 +8272,8 @@ "typography", "body-300", "line-height" - ] + ], + "key": "{typography.body-300.line-height}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7840,7 +8290,8 @@ "typography", "body-200", "font-family" - ] + ], + "key": "{typography.body-200.font-family}" }, { "value": "0.875rem", @@ -7861,7 +8312,8 @@ "typography", "body-200", "font-size" - ] + ], + "key": "{typography.body-200.font-size}" }, { "value": "1.4286", @@ -7880,7 +8332,8 @@ "typography", "body-200", "line-height" - ] + ], + "key": "{typography.body-200.line-height}" }, { "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", @@ -7897,7 +8350,8 @@ "typography", "body-100", "font-family" - ] + ], + "key": "{typography.body-100.font-family}" }, { "value": "0.8125rem", @@ -7918,7 +8372,8 @@ "typography", "body-100", "font-size" - ] + ], + "key": "{typography.body-100.font-size}" }, { "value": "1.3846", @@ -7937,7 +8392,8 @@ "typography", "body-100", "line-height" - ] + ], + "key": "{typography.body-100.line-height}" }, { "value": "ui-monospace, Menlo, Consolas, monospace", @@ -7954,7 +8410,8 @@ "typography", "code-100", "font-family" - ] + ], + "key": "{typography.code-100.font-family}" }, { "value": "0.8125rem", @@ -7975,7 +8432,8 @@ "typography", "code-100", "font-size" - ] + ], + "key": "{typography.code-100.font-size}" }, { "value": "1.23", @@ -7994,7 +8452,8 @@ "typography", "code-100", "line-height" - ] + ], + "key": "{typography.code-100.line-height}" }, { "value": "ui-monospace, Menlo, Consolas, monospace", @@ -8011,7 +8470,8 @@ "typography", "code-200", "font-family" - ] + ], + "key": "{typography.code-200.font-family}" }, { "value": "0.875rem", @@ -8032,7 +8492,8 @@ "typography", "code-200", "font-size" - ] + ], + "key": "{typography.code-200.font-size}" }, { "value": "1.125", @@ -8051,7 +8512,8 @@ "typography", "code-200", "line-height" - ] + ], + "key": "{typography.code-200.line-height}" }, { "value": "ui-monospace, Menlo, Consolas, monospace", @@ -8068,7 +8530,8 @@ "typography", "code-300", "font-family" - ] + ], + "key": "{typography.code-300.font-family}" }, { "value": "1rem", @@ -8089,7 +8552,8 @@ "typography", "code-300", "font-size" - ] + ], + "key": "{typography.code-300.font-size}" }, { "value": "1.25", @@ -8108,6 +8572,7 @@ "typography", "code-300", "line-height" - ] + ], + "key": "{typography.code-300.line-height}" } ] \ No newline at end of file diff --git a/packages/tokens/dist/marketing/tokens.json b/packages/tokens/dist/marketing/tokens.json index a0dc4bccf77..cf0adb51ec1 100644 --- a/packages/tokens/dist/marketing/tokens.json +++ b/packages/tokens/dist/marketing/tokens.json @@ -5,12 +5,14 @@ "value": "#1c345f", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#1c345f", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-500", "attributes": { @@ -28,12 +30,14 @@ "value": "#0046d1", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#0046d1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-400", "attributes": { @@ -51,12 +55,14 @@ "value": "#0c56e9", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#0c56e9", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-300", "attributes": { @@ -74,12 +80,14 @@ "value": "#1060ff", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#1060ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-200", "attributes": { @@ -97,12 +105,14 @@ "value": "#cce3fe", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#cce3fe", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-100", "attributes": { @@ -120,12 +130,14 @@ "value": "#f2f8ff", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#f2f8ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-blue-50", "attributes": { @@ -143,12 +155,14 @@ "value": "#42215b", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#42215b", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-500", "attributes": { @@ -166,12 +180,14 @@ "value": "#7b00db", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#7b00db", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-400", "attributes": { @@ -189,12 +205,14 @@ "value": "#911ced", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#911ced", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-300", "attributes": { @@ -212,12 +230,14 @@ "value": "#a737ff", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#a737ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-200", "attributes": { @@ -235,12 +255,14 @@ "value": "#ead2fe", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#ead2fe", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-100", "attributes": { @@ -258,12 +280,14 @@ "value": "#f9f2ff", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#f9f2ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-purple-50", "attributes": { @@ -281,12 +305,14 @@ "value": "#054220", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#054220", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-500", "attributes": { @@ -304,12 +330,14 @@ "value": "#006619", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#006619", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-400", "attributes": { @@ -327,12 +355,14 @@ "value": "#00781e", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#00781e", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-300", "attributes": { @@ -350,12 +380,14 @@ "value": "#008a22", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#008a22", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-200", "attributes": { @@ -373,12 +405,14 @@ "value": "#cceeda", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#cceeda", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-100", "attributes": { @@ -396,12 +430,14 @@ "value": "#f2fbf6", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#f2fbf6", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-green-50", "attributes": { @@ -419,12 +455,14 @@ "value": "#542800", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#542800", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-500", "attributes": { @@ -442,12 +480,14 @@ "value": "#803d00", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#803d00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-400", "attributes": { @@ -465,12 +505,14 @@ "value": "#9e4b00", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#9e4b00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-300", "attributes": { @@ -488,12 +530,14 @@ "value": "#bb5a00", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#bb5a00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-200", "attributes": { @@ -511,12 +555,14 @@ "value": "#fbeabf", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#fbeabf", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-100", "attributes": { @@ -534,12 +580,14 @@ "value": "#fff9e8", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#fff9e8", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-amber-50", "attributes": { @@ -557,12 +605,14 @@ "value": "#51130a", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#51130a", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-500", "attributes": { @@ -580,12 +630,14 @@ "value": "#940004", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#940004", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-400", "attributes": { @@ -603,12 +655,14 @@ "value": "#c00005", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#c00005", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-300", "attributes": { @@ -626,12 +680,14 @@ "value": "#e52228", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#e52228", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-200", "attributes": { @@ -649,12 +705,14 @@ "value": "#fbd4d4", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#fbd4d4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-100", "attributes": { @@ -672,12 +730,14 @@ "value": "#fff5f5", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-accents.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-accents.json", "isSource": true, "original": { "value": "#fff5f5", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-red-50", "attributes": { @@ -695,12 +755,14 @@ "value": "#0c0c0e", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#0c0c0e", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-700", "attributes": { @@ -718,12 +780,14 @@ "value": "#3b3d45", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#3b3d45", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-600", "attributes": { @@ -741,12 +805,14 @@ "value": "#656a76", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#656a76", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-500", "attributes": { @@ -764,12 +830,14 @@ "value": "#8c909c", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#8c909c", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-400", "attributes": { @@ -787,12 +855,14 @@ "value": "#c2c5cb", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#c2c5cb", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-300", "attributes": { @@ -810,12 +880,14 @@ "value": "#dedfe3", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#dedfe3", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-200", "attributes": { @@ -833,12 +905,14 @@ "value": "#f1f2f3", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#f1f2f3", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-100", "attributes": { @@ -856,12 +930,14 @@ "value": "#fafafa", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#fafafa", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-50", "attributes": { @@ -879,12 +955,14 @@ "value": "#ffffff", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "#ffffff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-neutral-0", "attributes": { @@ -903,13 +981,15 @@ "alpha": "0.4", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "{color.palette.neutral-600.value}", "alpha": "0.4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-alpha-300", "attributes": { @@ -928,13 +1008,15 @@ "alpha": "0.2", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "{color.palette.neutral-500.value}", "alpha": "0.2", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-alpha-200", "attributes": { @@ -953,13 +1035,15 @@ "alpha": "0.1", "type": "color", "group": "palette", - "filePath": "src/global/color/palette-neutrals.json", + "theme": "light", + "filePath": "src/global/themed/light/color/palette-neutrals.json", "isSource": true, "original": { "value": "{color.palette.neutral-500.value}", "alpha": "0.1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "name": "token-color-palette-alpha-100", "attributes": { @@ -979,7 +1063,7 @@ "value": "#656a7633", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.alpha-200.value}", @@ -1002,7 +1086,7 @@ "value": "#656a761a", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.alpha-100.value}", @@ -1025,7 +1109,7 @@ "value": "#3b3d4566", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.alpha-300.value}", @@ -1048,7 +1132,7 @@ "value": "#cce3fe", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.blue-100.value}", @@ -1071,7 +1155,7 @@ "value": "#ead2fe", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.purple-100.value}", @@ -1094,7 +1178,7 @@ "value": "#cceeda", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.green-100.value}", @@ -1117,7 +1201,7 @@ "value": "#fbeabf", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.amber-100.value}", @@ -1140,7 +1224,7 @@ "value": "#fbd4d4", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-border.json", + "filePath": "src/global/shared/color/semantic-border.json", "isSource": true, "original": { "value": "{color.palette.red-100.value}", @@ -1166,7 +1250,7 @@ "value": "#0c56e9", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-focus.json", + "filePath": "src/global/shared/color/semantic-focus.json", "isSource": true, "original": { "value": "{color.palette.blue-300.value}", @@ -1192,7 +1276,7 @@ "type": "color", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", - "filePath": "src/global/color/semantic-focus.json", + "filePath": "src/global/shared/color/semantic-focus.json", "isSource": true, "original": { "value": "#5990ff", @@ -1220,7 +1304,7 @@ "value": "#c00005", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-focus.json", + "filePath": "src/global/shared/color/semantic-focus.json", "isSource": true, "original": { "value": "{color.palette.red-300.value}", @@ -1246,7 +1330,7 @@ "type": "color", "group": "semantic", "comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose", - "filePath": "src/global/color/semantic-focus.json", + "filePath": "src/global/shared/color/semantic-focus.json", "isSource": true, "original": { "value": "#dd7578", @@ -1275,7 +1359,7 @@ "value": "#0c0c0e", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.neutral-700.value}", @@ -1298,7 +1382,7 @@ "value": "#3b3d45", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.neutral-600.value}", @@ -1321,7 +1405,7 @@ "value": "#656a76", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.neutral-500.value}", @@ -1344,7 +1428,7 @@ "value": "#ffffff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.neutral-0.value}", @@ -1367,7 +1451,7 @@ "value": "#8c909c", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.neutral-400.value}", @@ -1390,7 +1474,7 @@ "value": "#1060ff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.blue-200.value}", @@ -1413,7 +1497,7 @@ "value": "#0c56e9", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.blue-300.value}", @@ -1436,7 +1520,7 @@ "value": "#0046d1", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.blue-400.value}", @@ -1459,7 +1543,7 @@ "value": "#a737ff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.purple-200.value}", @@ -1482,7 +1566,7 @@ "value": "#911ced", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.purple-300.value}", @@ -1505,7 +1589,7 @@ "value": "#42215b", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.purple-500.value}", @@ -1528,7 +1612,7 @@ "value": "#008a22", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.green-200.value}", @@ -1551,7 +1635,7 @@ "value": "#00781e", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.green-300.value}", @@ -1574,7 +1658,7 @@ "value": "#054220", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.green-500.value}", @@ -1597,7 +1681,7 @@ "value": "#bb5a00", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.amber-200.value}", @@ -1620,7 +1704,7 @@ "value": "#9e4b00", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.amber-300.value}", @@ -1643,7 +1727,7 @@ "value": "#542800", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.amber-500.value}", @@ -1666,7 +1750,7 @@ "value": "#e52228", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.red-200.value}", @@ -1689,7 +1773,7 @@ "value": "#c00005", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.red-300.value}", @@ -1712,7 +1796,7 @@ "value": "#51130a", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-foreground.json", + "filePath": "src/global/shared/color/semantic-foreground.json", "isSource": true, "original": { "value": "{color.palette.red-500.value}", @@ -1737,7 +1821,7 @@ "value": "#ffffff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-page.json", + "filePath": "src/global/shared/color/semantic-page.json", "isSource": true, "original": { "value": "{color.palette.neutral-0.value}", @@ -1760,7 +1844,7 @@ "value": "#fafafa", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-page.json", + "filePath": "src/global/shared/color/semantic-page.json", "isSource": true, "original": { "value": "{color.palette.neutral-50.value}", @@ -1785,7 +1869,7 @@ "value": "#ffffff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-0.value}", @@ -1808,7 +1892,7 @@ "value": "#fafafa", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-50.value}", @@ -1831,7 +1915,7 @@ "value": "#f1f2f3", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-100.value}", @@ -1854,7 +1938,7 @@ "value": "#ffffff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-0.value}", @@ -1877,7 +1961,7 @@ "value": "#f1f2f3", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-100.value}", @@ -1900,7 +1984,7 @@ "value": "#dedfe3", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-200.value}", @@ -1923,7 +2007,7 @@ "value": "#fafafa", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.neutral-50.value}", @@ -1946,7 +2030,7 @@ "value": "#f2f8ff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.blue-50.value}", @@ -1969,7 +2053,7 @@ "value": "#f9f2ff", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.purple-50.value}", @@ -1992,7 +2076,7 @@ "value": "#f2fbf6", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.green-50.value}", @@ -2015,7 +2099,7 @@ "value": "#fff9e8", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.amber-50.value}", @@ -2038,7 +2122,7 @@ "value": "#fff5f5", "type": "color", "group": "semantic", - "filePath": "src/global/color/semantic-surface.json", + "filePath": "src/global/shared/color/semantic-surface.json", "isSource": true, "original": { "value": "{color.palette.red-50.value}", @@ -4313,7 +4397,7 @@ "inset": { "box-shadow": { "value": "inset 0px 1px 2px 1px #656a761a", - "filePath": "src/global/elevation/elevation.json", + "filePath": "src/global/shared/elevation/elevation.json", "isSource": true, "original": { "value": "{elevation.inset.box-shadow-01.value}" @@ -4334,7 +4418,7 @@ "low": { "box-shadow": { "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", - "filePath": "src/global/elevation/elevation.json", + "filePath": "src/global/shared/elevation/elevation.json", "isSource": true, "original": { "value": "{elevation.low.box-shadow-01.value}, {elevation.low.box-shadow-02.value}" @@ -4355,7 +4439,7 @@ "mid": { "box-shadow": { "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", - "filePath": "src/global/elevation/elevation.json", + "filePath": "src/global/shared/elevation/elevation.json", "isSource": true, "original": { "value": "{elevation.mid.box-shadow-01.value}, {elevation.mid.box-shadow-02.value}" @@ -4376,7 +4460,7 @@ "high": { "box-shadow": { "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", - "filePath": "src/global/elevation/elevation.json", + "filePath": "src/global/shared/elevation/elevation.json", "isSource": true, "original": { "value": "{elevation.high.box-shadow-01.value}, {elevation.high.box-shadow-02.value}" @@ -4397,7 +4481,7 @@ "higher": { "box-shadow": { "value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", - "filePath": "src/global/elevation/elevation.json", + "filePath": "src/global/shared/elevation/elevation.json", "isSource": true, "original": { "value": "{elevation.higher.box-shadow-01.value}, {elevation.higher.box-shadow-02.value}" @@ -4418,7 +4502,7 @@ "overlay": { "box-shadow": { "value": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", - "filePath": "src/global/elevation/elevation.json", + "filePath": "src/global/shared/elevation/elevation.json", "isSource": true, "original": { "value": "{elevation.overlay.box-shadow-01.value}, {elevation.overlay.box-shadow-02.value}" @@ -4441,7 +4525,7 @@ "inset": { "box-shadow": { "value": "inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.inset.box-shadow-border.value}, {elevation.inset.box-shadow.value}" @@ -4462,7 +4546,7 @@ "base": { "box-shadow": { "value": "0 0 0 1px #656a7633", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.base.box-shadow-border.value}" @@ -4483,7 +4567,7 @@ "low": { "box-shadow": { "value": "0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.low.box-shadow-border.value}, {elevation.low.box-shadow.value}" @@ -4504,7 +4588,7 @@ "mid": { "box-shadow": { "value": "0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.mid.box-shadow-border.value}, {elevation.mid.box-shadow.value}" @@ -4525,7 +4609,7 @@ "high": { "box-shadow": { "value": "0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.high.box-shadow-border.value}, {elevation.high.box-shadow.value}" @@ -4546,7 +4630,7 @@ "higher": { "box-shadow": { "value": "0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.higher.box-shadow-border.value}, {elevation.higher.box-shadow.value}" @@ -4567,7 +4651,7 @@ "overlay": { "box-shadow": { "value": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559", - "filePath": "src/global/elevation/surface.json", + "filePath": "src/global/shared/elevation/surface.json", "isSource": true, "original": { "value": "{elevation.overlay.box-shadow-border.value}, {elevation.overlay.box-shadow.value}" @@ -4590,7 +4674,7 @@ "action": { "box-shadow": { "value": "inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff", - "filePath": "src/global/focus-ring.json", + "filePath": "src/global/shared/focus-ring.json", "isSource": true, "original": { "value": "{focus-ring.action.internal-box-shadow.value}, {focus-ring.action.external-box-shadow.value}" @@ -4611,7 +4695,7 @@ "critical": { "box-shadow": { "value": "inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578", - "filePath": "src/global/focus-ring.json", + "filePath": "src/global/shared/focus-ring.json", "isSource": true, "original": { "value": "{focus-ring.critical.internal-box-shadow.value}, {focus-ring.critical.external-box-shadow.value}" diff --git a/packages/tokens/dist/products/css/themed-tokens/unified.css b/packages/tokens/dist/products/css/themed-tokens/unified.css new file mode 100644 index 00000000000..11615b9187e --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/unified.css @@ -0,0 +1,685 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root, +.hds-theme-light, +[data-hds-theme="light"], +.hds-theme-dark, +[data-hds-theme="dark"] { + --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-boundary-gradient-faint-start: #fffafa; /* this is the 'boundary-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-start: #fff9fb; /* this is the 'consul-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-start: #f3fff9; /* this is the 'nomad-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-start: #f3fcff; /* this is the 'packer-50' value at 25% opacity on white */ + --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-gradient-faint-start: #fcfaff; /* this is the 'terraform-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vault-radar-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */ + --token-color-vault-radar-gradient-faint-start: #fffdf2; /* this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-gradient-faint-start: #fffdf2; /* this is the 'vault-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */ + --token-elevation-inset-shadow-01-x: 0px; + --token-elevation-inset-shadow-01-y: 1px; + --token-elevation-inset-shadow-01-blur: 2px; + --token-elevation-inset-shadow-01-spread: 1px; + --token-elevation-inset-border-width: 1px; + --token-elevation-low-shadow-01-x: 0px; + --token-elevation-low-shadow-01-y: 1px; + --token-elevation-low-shadow-01-blur: 1px; + --token-elevation-low-shadow-01-spread: 0px; + --token-elevation-low-shadow-02-x: 0px; + --token-elevation-low-shadow-02-y: 2px; + --token-elevation-low-shadow-02-blur: 2px; + --token-elevation-low-shadow-02-spread: 0px; + --token-elevation-low-border-width: 1px; + --token-elevation-mid-shadow-01-x: 0px; + --token-elevation-mid-shadow-01-y: 2px; + --token-elevation-mid-shadow-01-blur: 3px; + --token-elevation-mid-shadow-01-spread: 0px; + --token-elevation-mid-shadow-02-x: 0px; + --token-elevation-mid-shadow-02-y: 8px; + --token-elevation-mid-shadow-02-blur: 16px; + --token-elevation-mid-shadow-02-spread: -10px; + --token-elevation-mid-border-width: 1px; + --token-elevation-high-shadow-01-x: 0px; + --token-elevation-high-shadow-01-y: 2px; + --token-elevation-high-shadow-01-blur: 3px; + --token-elevation-high-shadow-01-spread: 0px; + --token-elevation-high-shadow-02-x: 0px; + --token-elevation-high-shadow-02-y: 16px; + --token-elevation-high-shadow-02-blur: 16px; + --token-elevation-high-shadow-02-spread: -10px; + --token-elevation-high-border-width: 1px; + --token-elevation-higher-shadow-01-x: 0px; + --token-elevation-higher-shadow-01-y: 2px; + --token-elevation-higher-shadow-01-blur: 3px; + --token-elevation-higher-shadow-01-spread: 0px; + --token-elevation-higher-shadow-02-x: 0px; + --token-elevation-higher-shadow-02-y: 12px; + --token-elevation-higher-shadow-02-blur: 28px; + --token-elevation-higher-shadow-02-spread: 0px; + --token-elevation-higher-border-width: 1px; + --token-elevation-overlay-shadow-01-x: 0px; + --token-elevation-overlay-shadow-01-y: 2px; + --token-elevation-overlay-shadow-01-blur: 3px; + --token-elevation-overlay-shadow-01-spread: 0px; + --token-elevation-overlay-shadow-02-x: 0px; + --token-elevation-overlay-shadow-02-y: 12px; + --token-elevation-overlay-shadow-02-blur: 24px; + --token-elevation-overlay-shadow-02-spread: 0px; + --token-elevation-overlay-border-width: 1px; + --token-elevation-base-border-width: 1px; + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); + --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-text-input-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */ + --token-form-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-divider-height: 1px; + --token-tooltip-border-radius: 5px; + --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast); + --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700); + --token-tooltip-focus-offset: -2px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-stack-sans-display-mac-os: -apple-system, BlinkMacSystemFont; + --token-typography-font-stack-sans-display-windows: Segoe UI; + --token-typography-font-stack-sans-display-sans: Helvetica, Arial, sans-serif; + --token-typography-font-stack-sans-display-emoji: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-sans-text-mac-os: -apple-system, BlinkMacSystemFont; + --token-typography-font-stack-sans-text-windows: Segoe UI; + --token-typography-font-stack-sans-text-emoji: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-monospace-code-mac-os: ui-monospace, Menlo; + --token-typography-font-stack-monospace-code-windows: Consolas; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; + --token-typography-display-500-font-size: 1.875rem; /* 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /* 38px */ + --token-typography-display-400-font-size: 1.5rem; /* 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /* 32px */ + --token-typography-display-300-font-size: 1.125rem; /* 18px/1.125rem */ + --token-typography-display-300-line-height: 1.3333; /* 24px */ + --token-typography-display-300-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-200-font-size: 1rem; /* 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /* 24px */ + --token-typography-display-200-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.3846; /* 18px */ + --token-typography-body-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /* 24px */ + --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /* 20px */ + --token-typography-body-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /* 18px */ + --token-typography-code-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /* 16px */ + --token-typography-code-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /* 18px */ + --token-typography-code-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /* 20px */ + --token-color-border-action: var(--token-color-palette-blue-100); + --token-color-border-highlight: var(--token-color-palette-purple-100); + --token-color-border-success: var(--token-color-palette-green-100); + --token-color-border-warning: var(--token-color-palette-amber-100); + --token-color-border-critical: var(--token-color-palette-red-100); + --token-color-focus-action-internal: var(--token-color-palette-blue-300); + --token-color-focus-critical-internal: var(--token-color-palette-red-300); + --token-color-foreground-strong: var(--token-color-palette-neutral-700); + --token-color-foreground-primary: var(--token-color-palette-neutral-600); + --token-color-foreground-faint: var(--token-color-palette-neutral-500); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-color-foreground-disabled: var(--token-color-palette-neutral-400); + --token-color-foreground-action: var(--token-color-palette-blue-200); + --token-color-foreground-action-hover: var(--token-color-palette-blue-300); + --token-color-foreground-action-active: var(--token-color-palette-blue-400); + --token-color-foreground-highlight: var(--token-color-palette-purple-200); + --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-300); + --token-color-foreground-highlight-high-contrast: var(--token-color-palette-purple-500); + --token-color-foreground-success: var(--token-color-palette-green-200); + --token-color-foreground-success-on-surface: var(--token-color-palette-green-300); + --token-color-foreground-success-high-contrast: var(--token-color-palette-green-500); + --token-color-foreground-warning: var(--token-color-palette-amber-200); + --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-300); + --token-color-foreground-warning-high-contrast: var(--token-color-palette-amber-500); + --token-color-foreground-critical: var(--token-color-palette-red-200); + --token-color-foreground-critical-on-surface: var(--token-color-palette-red-300); + --token-color-foreground-critical-high-contrast: var(--token-color-palette-red-500); + --token-color-page-primary: var(--token-color-palette-neutral-0); + --token-color-page-faint: var(--token-color-palette-neutral-50); + --token-color-surface-primary: var(--token-color-palette-neutral-0); + --token-color-surface-faint: var(--token-color-palette-neutral-50); + --token-color-surface-strong: var(--token-color-palette-neutral-100); + --token-color-surface-interactive: var(--token-color-palette-neutral-0); + --token-color-surface-interactive-hover: var(--token-color-palette-neutral-100); + --token-color-surface-interactive-active: var(--token-color-palette-neutral-200); + --token-color-surface-interactive-disabled: var(--token-color-palette-neutral-50); + --token-color-surface-action: var(--token-color-palette-blue-50); + --token-color-surface-highlight: var(--token-color-palette-purple-50); + --token-color-surface-success: var(--token-color-palette-green-50); + --token-color-surface-warning: var(--token-color-palette-amber-50); + --token-color-surface-critical: var(--token-color-palette-red-50); + --token-color-hashicorp-brand: var(--token-color-palette-hashicorp-brand); + --token-color-boundary-brand: var(--token-color-palette-boundary-brand); + --token-color-boundary-foreground: var(--token-color-palette-boundary-500); + --token-color-boundary-surface: var(--token-color-palette-boundary-50); + --token-color-boundary-border: var(--token-color-palette-boundary-100); + --token-color-boundary-gradient-primary-start: var(--token-color-palette-boundary-300); + --token-color-boundary-gradient-primary-stop: var(--token-color-palette-boundary-400); + --token-color-boundary-gradient-faint-stop: var(--token-color-palette-boundary-50); + --token-color-consul-brand: var(--token-color-palette-consul-brand); + --token-color-consul-foreground: var(--token-color-palette-consul-500); + --token-color-consul-surface: var(--token-color-palette-consul-50); + --token-color-consul-border: var(--token-color-palette-consul-100); + --token-color-consul-gradient-primary-start: var(--token-color-palette-consul-300); + --token-color-consul-gradient-primary-stop: var(--token-color-palette-consul-400); + --token-color-consul-gradient-faint-stop: var(--token-color-palette-consul-50); + --token-color-hcp-brand: var(--token-color-palette-hcp-brand); + --token-color-nomad-brand: var(--token-color-palette-nomad-brand); + --token-color-nomad-foreground: var(--token-color-palette-nomad-500); + --token-color-nomad-surface: var(--token-color-palette-nomad-50); + --token-color-nomad-border: var(--token-color-palette-nomad-100); + --token-color-nomad-gradient-primary-start: var(--token-color-palette-nomad-100); + --token-color-nomad-gradient-primary-stop: var(--token-color-palette-nomad-200); + --token-color-nomad-gradient-faint-stop: var(--token-color-palette-nomad-50); + --token-color-packer-brand: var(--token-color-palette-packer-brand); + --token-color-packer-foreground: var(--token-color-palette-packer-500); + --token-color-packer-surface: var(--token-color-palette-packer-50); + --token-color-packer-border: var(--token-color-palette-packer-100); + --token-color-packer-gradient-primary-start: var(--token-color-palette-packer-100); + --token-color-packer-gradient-primary-stop: var(--token-color-palette-packer-200); + --token-color-packer-gradient-faint-stop: var(--token-color-palette-packer-50); + --token-color-terraform-brand: var(--token-color-palette-terraform-brand); + --token-color-terraform-foreground: var(--token-color-palette-terraform-500); + --token-color-terraform-surface: var(--token-color-palette-terraform-50); + --token-color-terraform-border: var(--token-color-palette-terraform-100); + --token-color-terraform-gradient-primary-start: var(--token-color-palette-terraform-300); + --token-color-terraform-gradient-primary-stop: var(--token-color-palette-terraform-400); + --token-color-terraform-gradient-faint-stop: var(--token-color-palette-terraform-50); + --token-color-vagrant-brand: var(--token-color-palette-vagrant-brand); + --token-color-vagrant-foreground: var(--token-color-palette-vagrant-500); + --token-color-vagrant-surface: var(--token-color-palette-vagrant-50); + --token-color-vagrant-border: var(--token-color-palette-vagrant-100); + --token-color-vagrant-gradient-primary-start: var(--token-color-palette-vagrant-300); + --token-color-vagrant-gradient-primary-stop: var(--token-color-palette-vagrant-400); + --token-color-vagrant-gradient-faint-stop: var(--token-color-palette-vagrant-50); + --token-color-vault-radar-brand: var(--token-color-palette-vault-radar-brand); + --token-color-vault-radar-foreground: var(--token-color-palette-vault-radar-500); + --token-color-vault-radar-surface: var(--token-color-palette-vault-radar-50); + --token-color-vault-radar-border: var(--token-color-palette-vault-radar-100); + --token-color-vault-radar-gradient-primary-start: var(--token-color-palette-vault-radar-100); + --token-color-vault-radar-gradient-primary-stop: var(--token-color-palette-vault-radar-200); + --token-color-vault-radar-gradient-faint-stop: var(--token-color-palette-vault-radar-50); + --token-color-vault-secrets-brand: var(--token-color-palette-vault-secrets-brand); + --token-color-vault-secrets-foreground: var(--token-color-palette-vault-secrets-500); + --token-color-vault-secrets-surface: var(--token-color-palette-vault-secrets-50); + --token-color-vault-secrets-border: var(--token-color-palette-vault-secrets-100); + --token-color-vault-secrets-gradient-primary-start: var(--token-color-palette-vault-secrets-100); + --token-color-vault-secrets-gradient-primary-stop: var(--token-color-palette-vault-secrets-200); + --token-color-vault-secrets-gradient-faint-stop: var(--token-color-palette-vault-secrets-50); + --token-color-vault-brand: var(--token-color-palette-vault-brand); + --token-color-vault-foreground: var(--token-color-palette-vault-500); + --token-color-vault-surface: var(--token-color-palette-vault-50); + --token-color-vault-border: var(--token-color-palette-vault-100); + --token-color-vault-gradient-primary-start: var(--token-color-palette-vault-100); + --token-color-vault-gradient-primary-stop: var(--token-color-palette-vault-200); + --token-color-vault-gradient-faint-stop: var(--token-color-palette-vault-50); + --token-color-waypoint-brand: var(--token-color-palette-waypoint-brand); + --token-color-waypoint-foreground: var(--token-color-palette-waypoint-500); + --token-color-waypoint-surface: var(--token-color-palette-waypoint-50); + --token-color-waypoint-border: var(--token-color-palette-waypoint-100); + --token-color-waypoint-gradient-primary-start: var(--token-color-palette-waypoint-100); + --token-color-waypoint-gradient-primary-stop: var(--token-color-palette-waypoint-200); + --token-color-waypoint-gradient-faint-stop: var(--token-color-palette-waypoint-50); + --token-elevation-inset-box-shadow-01: inset var(--token-elevation-inset-shadow-01-x) var(--token-elevation-inset-shadow-01-y) var(--token-elevation-inset-shadow-01-blur) var(--token-elevation-inset-shadow-01-spread) var(--token-elevation-inset-shadow-01-color); + --token-elevation-inset-box-shadow-border: inset 0 0 0 var(--token-elevation-inset-border-width) var(--token-elevation-inset-border-color); + --token-elevation-low-box-shadow-01: var(--token-elevation-low-shadow-01-x) var(--token-elevation-low-shadow-01-y) var(--token-elevation-low-shadow-01-blur) var(--token-elevation-low-shadow-01-spread) var(--token-elevation-low-shadow-01-color); + --token-elevation-low-box-shadow-02: var(--token-elevation-low-shadow-02-x) var(--token-elevation-low-shadow-02-y) var(--token-elevation-low-shadow-02-blur) var(--token-elevation-low-shadow-02-spread) var(--token-elevation-low-shadow-02-color); + --token-elevation-low-box-shadow-border: 0 0 0 var(--token-elevation-low-border-width) var(--token-elevation-low-border-color); + --token-elevation-mid-box-shadow-01: var(--token-elevation-mid-shadow-01-x) var(--token-elevation-mid-shadow-01-y) var(--token-elevation-mid-shadow-01-blur) var(--token-elevation-mid-shadow-01-spread) var(--token-elevation-mid-shadow-01-color); + --token-elevation-mid-box-shadow-border: 0 0 0 var(--token-elevation-mid-border-width) var(--token-elevation-mid-border-color); + --token-elevation-high-box-shadow-01: var(--token-elevation-high-shadow-01-x) var(--token-elevation-high-shadow-01-y) var(--token-elevation-high-shadow-01-blur) var(--token-elevation-high-shadow-01-spread) var(--token-elevation-high-shadow-01-color); + --token-elevation-high-box-shadow-02: var(--token-elevation-high-shadow-02-x) var(--token-elevation-high-shadow-02-y) var(--token-elevation-high-shadow-02-blur) var(--token-elevation-high-shadow-02-spread) var(--token-elevation-high-shadow-02-color); + --token-elevation-higher-box-shadow-02: var(--token-elevation-higher-shadow-02-x) var(--token-elevation-higher-shadow-02-y) var(--token-elevation-higher-shadow-02-blur) var(--token-elevation-higher-shadow-02-spread) var(--token-elevation-higher-shadow-02-color); + --token-elevation-overlay-box-shadow-02: var(--token-elevation-overlay-shadow-02-x) var(--token-elevation-overlay-shadow-02-y) var(--token-elevation-overlay-shadow-02-blur) var(--token-elevation-overlay-shadow-02-spread) var(--token-elevation-overlay-shadow-02-color); + --token-elevation-mid-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-mid-box-shadow-02: var(--token-elevation-mid-shadow-02-x) var(--token-elevation-mid-shadow-02-y) var(--token-elevation-mid-shadow-02-blur) var(--token-elevation-mid-shadow-02-spread) var(--token-elevation-mid-shadow-02-color); + --token-elevation-high-box-shadow-border: 0 0 0 var(--token-elevation-high-border-width) var(--token-elevation-high-border-color); + --token-elevation-higher-box-shadow-01: var(--token-elevation-higher-shadow-01-x) var(--token-elevation-higher-shadow-01-y) var(--token-elevation-higher-shadow-01-blur) var(--token-elevation-higher-shadow-01-spread) var(--token-elevation-higher-shadow-01-color); + --token-elevation-higher-box-shadow-border: 0 0 0 var(--token-elevation-higher-border-width) var(--token-elevation-higher-border-color); + --token-elevation-overlay-box-shadow-01: var(--token-elevation-overlay-shadow-01-x) var(--token-elevation-overlay-shadow-01-y) var(--token-elevation-overlay-shadow-01-blur) var(--token-elevation-overlay-shadow-01-spread) var(--token-elevation-overlay-shadow-01-color); + --token-elevation-overlay-box-shadow-border: 0 0 0 var(--token-elevation-overlay-border-width) var(--token-elevation-overlay-border-color); + --token-elevation-base-box-shadow-border: 0 0 0 var(--token-elevation-base-border-width) var(--token-elevation-base-border-color); + --token-elevation-color-base: var(--token-color-palette-neutral-500); + --token-elevation-color-strong: var(--token-color-palette-neutral-600); + --token-focus-ring-action-external-box-shadow: 0 0 0 3px var(--token-color-focus-action-external); + --token-focus-ring-critical-external-box-shadow: 0 0 0 3px var(--token-color-focus-critical-external); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-control-base-border-color-default: var(--token-color-palette-neutral-400); + --token-form-control-base-border-color-hover: var(--token-color-palette-neutral-500); + --token-form-control-checked-surface-color-default: var(--token-color-palette-blue-200); + --token-form-control-checked-surface-color-hover: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-default: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-hover: var(--token-color-palette-blue-400); + --token-form-control-invalid-border-color-default: var(--token-color-palette-red-300); + --token-form-control-invalid-border-color-hover: var(--token-color-palette-red-400); + --token-form-select-background-image-position-right-x: var(--token-form-control-padding); + --token-form-text-input-background-image-position-x: var(--token-form-control-padding); + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-typography-font-stack-display: var(--token-typography-font-stack-sans-display-mac-os), var(--token-typography-font-stack-sans-display-windows), var(--token-typography-font-stack-sans-display-sans), var(--token-typography-font-stack-sans-display-emoji); + --token-typography-font-stack-text: var(--token-typography-font-stack-sans-text-mac-os), var(--token-typography-font-stack-sans-text-windows), var(--token-typography-font-stack-sans-display-sans), var(--token-typography-font-stack-sans-text-emoji); + --token-typography-font-stack-code: var(--token-typography-font-stack-monospace-code-mac-os), var(--token-typography-font-stack-monospace-code-windows), monospace; + --token-color-border-primary: var(--token-color-palette-alpha-200); + --token-color-border-faint: var(--token-color-palette-alpha-100); + --token-color-border-strong: var(--token-color-palette-alpha-300); + --token-elevation-inset-box-shadow: var(--token-elevation-inset-box-shadow-01); + --token-elevation-inset-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-inset-border-color: var(--token-elevation-color-base); + --token-elevation-low-box-shadow: var(--token-elevation-low-box-shadow-01), var(--token-elevation-low-box-shadow-02); + --token-elevation-low-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-low-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-low-border-color: var(--token-elevation-color-base); + --token-elevation-mid-box-shadow: var(--token-elevation-mid-box-shadow-01), var(--token-elevation-mid-box-shadow-02); + --token-elevation-mid-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-mid-border-color: var(--token-elevation-color-base); + --token-elevation-high-box-shadow: var(--token-elevation-high-box-shadow-01), var(--token-elevation-high-box-shadow-02); + --token-elevation-high-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-high-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-high-border-color: var(--token-elevation-color-base); + --token-elevation-higher-box-shadow: var(--token-elevation-higher-box-shadow-01), var(--token-elevation-higher-box-shadow-02); + --token-elevation-higher-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-higher-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-higher-border-color: var(--token-elevation-color-base); + --token-elevation-overlay-box-shadow: var(--token-elevation-overlay-box-shadow-01), var(--token-elevation-overlay-box-shadow-02); + --token-elevation-overlay-shadow-01-color: var(--token-elevation-color-strong); + --token-elevation-overlay-shadow-02-color: var(--token-elevation-color-strong); + --token-elevation-overlay-border-color: var(--token-elevation-color-strong); + --token-elevation-base-border-color: var(--token-elevation-color-base); + --token-surface-inset-box-shadow: var(--token-elevation-inset-box-shadow-border), var(--token-elevation-inset-box-shadow); + --token-surface-base-box-shadow: var(--token-elevation-base-box-shadow-border); + --token-surface-low-box-shadow: var(--token-elevation-low-box-shadow-border), var(--token-elevation-low-box-shadow); + --token-surface-mid-box-shadow: var(--token-elevation-mid-box-shadow-border), var(--token-elevation-mid-box-shadow); + --token-surface-high-box-shadow: var(--token-elevation-high-box-shadow-border), var(--token-elevation-high-box-shadow); + --token-surface-higher-box-shadow: var(--token-elevation-higher-box-shadow-border), var(--token-elevation-higher-box-shadow); + --token-surface-overlay-box-shadow: var(--token-elevation-overlay-box-shadow-border), var(--token-elevation-overlay-box-shadow); + --token-focus-ring-action-internal-box-shadow: inset 0 0 0 1px var(--token-color-focus-action-internal); + --token-focus-ring-critical-internal-box-shadow: inset 0 0 0 1px var(--token-color-focus-critical-internal); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-control-base-foreground-value-color: var(--token-color-foreground-strong); + --token-form-control-base-foreground-placeholder-color: var(--token-color-foreground-faint); + --token-form-control-base-surface-color-default: var(--token-color-surface-interactive); + --token-form-control-base-surface-color-hover: var(--token-color-surface-interactive-hover); + --token-form-control-checked-foreground-color: var(--token-color-foreground-high-contrast); + --token-form-control-readonly-foreground-color: var(--token-color-foreground-primary); + --token-form-control-readonly-surface-color: var(--token-color-surface-strong); + --token-form-control-disabled-foreground-color: var(--token-color-foreground-disabled); + --token-form-control-disabled-surface-color: var(--token-color-surface-interactive-disabled); + --token-form-toggle-base-surface-color-default: var(--token-color-surface-strong); /* the toggle has a different base surface color, compared to the other controls */ + --token-typography-display-500-font-family: var(--token-typography-font-stack-display); + --token-typography-display-400-font-family: var(--token-typography-font-stack-display); + --token-typography-display-300-font-family: var(--token-typography-font-stack-text); + --token-typography-display-200-font-family: var(--token-typography-font-stack-display); + --token-typography-display-100-font-family: var(--token-typography-font-stack-text); + --token-typography-body-300-font-family: var(--token-typography-font-stack-text); + --token-typography-body-200-font-family: var(--token-typography-font-stack-text); + --token-typography-body-100-font-family: var(--token-typography-font-stack-text); + --token-typography-code-100-font-family: var(--token-typography-font-stack-code); + --token-typography-code-200-font-family: var(--token-typography-font-stack-code); + --token-typography-code-300-font-family: var(--token-typography-font-stack-code); + --token-focus-ring-action-box-shadow: var(--token-focus-ring-action-internal-box-shadow), var(--token-focus-ring-action-external-box-shadow); + --token-focus-ring-critical-box-shadow: var(--token-focus-ring-critical-internal-box-shadow), var(--token-focus-ring-critical-external-box-shadow); + --token-form-legend-color: var(--token-form-label-color); + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-disabled-border-color: var(--token-color-border-primary); +} + +:root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} + +@media (prefers-color-scheme: light) { + :root.hds-theme-auto, + :root[data-hds-theme="auto"] { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + } +} + +@media (prefers-color-scheme: dark) { + :root.hds-theme-auto, + :root[data-hds-theme="auto"] { + --token-color-palette-blue-500: #6bc1ff; + --token-color-palette-blue-400: #4ca1ff; + --token-color-palette-blue-300: #389aff; + --token-color-palette-blue-200: #2b89ff; + --token-color-palette-blue-100: #1c345f; + --token-color-palette-blue-50: #111f37; + --token-color-palette-purple-500: #dda5ff; + --token-color-palette-purple-400: #c070ff; + --token-color-palette-purple-300: #b457ff; + --token-color-palette-purple-200: #ab42ff; + --token-color-palette-purple-100: #42225b; + --token-color-palette-purple-50: #29123a; + --token-color-palette-green-500: #1ce375; + --token-color-palette-green-400: #00c157; + --token-color-palette-green-300: #00ae4e; + --token-color-palette-green-200: #009241; + --token-color-palette-green-100: #054220; + --token-color-palette-green-50: #042a15; + --token-color-palette-amber-500: #ffcc6a; + --token-color-palette-amber-400: #faad3a; + --token-color-palette-amber-300: #fda219; + --token-color-palette-amber-200: #e88c03; + --token-color-palette-amber-100: #542800; + --token-color-palette-amber-50: #2e1b06; + --token-color-palette-red-500: #ff8c7c; + --token-color-palette-red-400: #ff5841; + --token-color-palette-red-300: #f9381e; + --token-color-palette-red-200: #ef3016; + --token-color-palette-red-100: #62170d; + --token-color-palette-red-50: #370b06; + --token-color-palette-neutral-700: #efeff1; + --token-color-palette-neutral-600: #d5d7d8; + --token-color-palette-neutral-500: #b2b6bd; + --token-color-palette-neutral-400: #616875; + --token-color-palette-neutral-300: #434956; + --token-color-palette-neutral-200: #2b303c; + --token-color-palette-neutral-100: #1e222a; + --token-color-palette-neutral-50: #15181e; + --token-color-palette-neutral-0: #0d0e12; + --token-color-palette-alpha-300: #d5d7d866; + --token-color-palette-alpha-200: #b2b6bd33; + --token-color-palette-alpha-100: #b2b6bd1a; + } +} + +:root, +.hds-theme-light, +[data-hds-theme="light"] { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} + +.hds-theme-dark, +[data-hds-theme="dark"] { + --token-color-palette-blue-500: #6bc1ff; + --token-color-palette-blue-400: #4ca1ff; + --token-color-palette-blue-300: #389aff; + --token-color-palette-blue-200: #2b89ff; + --token-color-palette-blue-100: #1c345f; + --token-color-palette-blue-50: #111f37; + --token-color-palette-purple-500: #dda5ff; + --token-color-palette-purple-400: #c070ff; + --token-color-palette-purple-300: #b457ff; + --token-color-palette-purple-200: #ab42ff; + --token-color-palette-purple-100: #42225b; + --token-color-palette-purple-50: #29123a; + --token-color-palette-green-500: #1ce375; + --token-color-palette-green-400: #00c157; + --token-color-palette-green-300: #00ae4e; + --token-color-palette-green-200: #009241; + --token-color-palette-green-100: #054220; + --token-color-palette-green-50: #042a15; + --token-color-palette-amber-500: #ffcc6a; + --token-color-palette-amber-400: #faad3a; + --token-color-palette-amber-300: #fda219; + --token-color-palette-amber-200: #e88c03; + --token-color-palette-amber-100: #542800; + --token-color-palette-amber-50: #2e1b06; + --token-color-palette-red-500: #ff8c7c; + --token-color-palette-red-400: #ff5841; + --token-color-palette-red-300: #f9381e; + --token-color-palette-red-200: #ef3016; + --token-color-palette-red-100: #62170d; + --token-color-palette-red-50: #370b06; + --token-color-palette-neutral-700: #efeff1; + --token-color-palette-neutral-600: #d5d7d8; + --token-color-palette-neutral-500: #b2b6bd; + --token-color-palette-neutral-400: #616875; + --token-color-palette-neutral-300: #434956; + --token-color-palette-neutral-200: #2b303c; + --token-color-palette-neutral-100: #1e222a; + --token-color-palette-neutral-50: #15181e; + --token-color-palette-neutral-0: #0d0e12; + --token-color-palette-alpha-300: #d5d7d866; + --token-color-palette-alpha-200: #b2b6bd33; + --token-color-palette-alpha-100: #b2b6bd1a; +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors.css b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors.css new file mode 100644 index 00000000000..cf5aea8f48c --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors.css @@ -0,0 +1,584 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-boundary-gradient-faint-start: #fffafa; /* this is the 'boundary-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-start: #fff9fb; /* this is the 'consul-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-start: #f3fff9; /* this is the 'nomad-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-start: #f3fcff; /* this is the 'packer-50' value at 25% opacity on white */ + --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-gradient-faint-start: #fcfaff; /* this is the 'terraform-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vault-radar-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */ + --token-color-vault-radar-gradient-faint-start: #fffdf2; /* this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-gradient-faint-start: #fffdf2; /* this is the 'vault-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */ + --token-elevation-inset-shadow-01-x: 0px; + --token-elevation-inset-shadow-01-y: 1px; + --token-elevation-inset-shadow-01-blur: 2px; + --token-elevation-inset-shadow-01-spread: 1px; + --token-elevation-inset-border-width: 1px; + --token-elevation-low-shadow-01-x: 0px; + --token-elevation-low-shadow-01-y: 1px; + --token-elevation-low-shadow-01-blur: 1px; + --token-elevation-low-shadow-01-spread: 0px; + --token-elevation-low-shadow-02-x: 0px; + --token-elevation-low-shadow-02-y: 2px; + --token-elevation-low-shadow-02-blur: 2px; + --token-elevation-low-shadow-02-spread: 0px; + --token-elevation-low-border-width: 1px; + --token-elevation-mid-shadow-01-x: 0px; + --token-elevation-mid-shadow-01-y: 2px; + --token-elevation-mid-shadow-01-blur: 3px; + --token-elevation-mid-shadow-01-spread: 0px; + --token-elevation-mid-shadow-02-x: 0px; + --token-elevation-mid-shadow-02-y: 8px; + --token-elevation-mid-shadow-02-blur: 16px; + --token-elevation-mid-shadow-02-spread: -10px; + --token-elevation-mid-border-width: 1px; + --token-elevation-high-shadow-01-x: 0px; + --token-elevation-high-shadow-01-y: 2px; + --token-elevation-high-shadow-01-blur: 3px; + --token-elevation-high-shadow-01-spread: 0px; + --token-elevation-high-shadow-02-x: 0px; + --token-elevation-high-shadow-02-y: 16px; + --token-elevation-high-shadow-02-blur: 16px; + --token-elevation-high-shadow-02-spread: -10px; + --token-elevation-high-border-width: 1px; + --token-elevation-higher-shadow-01-x: 0px; + --token-elevation-higher-shadow-01-y: 2px; + --token-elevation-higher-shadow-01-blur: 3px; + --token-elevation-higher-shadow-01-spread: 0px; + --token-elevation-higher-shadow-02-x: 0px; + --token-elevation-higher-shadow-02-y: 12px; + --token-elevation-higher-shadow-02-blur: 28px; + --token-elevation-higher-shadow-02-spread: 0px; + --token-elevation-higher-border-width: 1px; + --token-elevation-overlay-shadow-01-x: 0px; + --token-elevation-overlay-shadow-01-y: 2px; + --token-elevation-overlay-shadow-01-blur: 3px; + --token-elevation-overlay-shadow-01-spread: 0px; + --token-elevation-overlay-shadow-02-x: 0px; + --token-elevation-overlay-shadow-02-y: 12px; + --token-elevation-overlay-shadow-02-blur: 24px; + --token-elevation-overlay-shadow-02-spread: 0px; + --token-elevation-overlay-border-width: 1px; + --token-elevation-base-border-width: 1px; + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); + --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-text-input-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */ + --token-form-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-divider-height: 1px; + --token-tooltip-border-radius: 5px; + --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast); + --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700); + --token-tooltip-focus-offset: -2px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-stack-sans-display-mac-os: -apple-system, BlinkMacSystemFont; + --token-typography-font-stack-sans-display-windows: Segoe UI; + --token-typography-font-stack-sans-display-sans: Helvetica, Arial, sans-serif; + --token-typography-font-stack-sans-display-emoji: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-sans-text-mac-os: -apple-system, BlinkMacSystemFont; + --token-typography-font-stack-sans-text-windows: Segoe UI; + --token-typography-font-stack-sans-text-emoji: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-monospace-code-mac-os: ui-monospace, Menlo; + --token-typography-font-stack-monospace-code-windows: Consolas; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; + --token-typography-display-500-font-size: 1.875rem; /* 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /* 38px */ + --token-typography-display-400-font-size: 1.5rem; /* 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /* 32px */ + --token-typography-display-300-font-size: 1.125rem; /* 18px/1.125rem */ + --token-typography-display-300-line-height: 1.3333; /* 24px */ + --token-typography-display-300-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-200-font-size: 1rem; /* 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /* 24px */ + --token-typography-display-200-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.3846; /* 18px */ + --token-typography-body-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /* 24px */ + --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /* 20px */ + --token-typography-body-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /* 18px */ + --token-typography-code-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /* 16px */ + --token-typography-code-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /* 18px */ + --token-typography-code-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /* 20px */ + --token-color-border-action: var(--token-color-palette-blue-100); + --token-color-border-highlight: var(--token-color-palette-purple-100); + --token-color-border-success: var(--token-color-palette-green-100); + --token-color-border-warning: var(--token-color-palette-amber-100); + --token-color-border-critical: var(--token-color-palette-red-100); + --token-color-focus-action-internal: var(--token-color-palette-blue-300); + --token-color-focus-critical-internal: var(--token-color-palette-red-300); + --token-color-foreground-strong: var(--token-color-palette-neutral-700); + --token-color-foreground-primary: var(--token-color-palette-neutral-600); + --token-color-foreground-faint: var(--token-color-palette-neutral-500); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-color-foreground-disabled: var(--token-color-palette-neutral-400); + --token-color-foreground-action: var(--token-color-palette-blue-200); + --token-color-foreground-action-hover: var(--token-color-palette-blue-300); + --token-color-foreground-action-active: var(--token-color-palette-blue-400); + --token-color-foreground-highlight: var(--token-color-palette-purple-200); + --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-300); + --token-color-foreground-highlight-high-contrast: var(--token-color-palette-purple-500); + --token-color-foreground-success: var(--token-color-palette-green-200); + --token-color-foreground-success-on-surface: var(--token-color-palette-green-300); + --token-color-foreground-success-high-contrast: var(--token-color-palette-green-500); + --token-color-foreground-warning: var(--token-color-palette-amber-200); + --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-300); + --token-color-foreground-warning-high-contrast: var(--token-color-palette-amber-500); + --token-color-foreground-critical: var(--token-color-palette-red-200); + --token-color-foreground-critical-on-surface: var(--token-color-palette-red-300); + --token-color-foreground-critical-high-contrast: var(--token-color-palette-red-500); + --token-color-page-primary: var(--token-color-palette-neutral-0); + --token-color-page-faint: var(--token-color-palette-neutral-50); + --token-color-surface-primary: var(--token-color-palette-neutral-0); + --token-color-surface-faint: var(--token-color-palette-neutral-50); + --token-color-surface-strong: var(--token-color-palette-neutral-100); + --token-color-surface-interactive: var(--token-color-palette-neutral-0); + --token-color-surface-interactive-hover: var(--token-color-palette-neutral-100); + --token-color-surface-interactive-active: var(--token-color-palette-neutral-200); + --token-color-surface-interactive-disabled: var(--token-color-palette-neutral-50); + --token-color-surface-action: var(--token-color-palette-blue-50); + --token-color-surface-highlight: var(--token-color-palette-purple-50); + --token-color-surface-success: var(--token-color-palette-green-50); + --token-color-surface-warning: var(--token-color-palette-amber-50); + --token-color-surface-critical: var(--token-color-palette-red-50); + --token-color-hashicorp-brand: var(--token-color-palette-hashicorp-brand); + --token-color-boundary-brand: var(--token-color-palette-boundary-brand); + --token-color-boundary-foreground: var(--token-color-palette-boundary-500); + --token-color-boundary-surface: var(--token-color-palette-boundary-50); + --token-color-boundary-border: var(--token-color-palette-boundary-100); + --token-color-boundary-gradient-primary-start: var(--token-color-palette-boundary-300); + --token-color-boundary-gradient-primary-stop: var(--token-color-palette-boundary-400); + --token-color-boundary-gradient-faint-stop: var(--token-color-palette-boundary-50); + --token-color-consul-brand: var(--token-color-palette-consul-brand); + --token-color-consul-foreground: var(--token-color-palette-consul-500); + --token-color-consul-surface: var(--token-color-palette-consul-50); + --token-color-consul-border: var(--token-color-palette-consul-100); + --token-color-consul-gradient-primary-start: var(--token-color-palette-consul-300); + --token-color-consul-gradient-primary-stop: var(--token-color-palette-consul-400); + --token-color-consul-gradient-faint-stop: var(--token-color-palette-consul-50); + --token-color-hcp-brand: var(--token-color-palette-hcp-brand); + --token-color-nomad-brand: var(--token-color-palette-nomad-brand); + --token-color-nomad-foreground: var(--token-color-palette-nomad-500); + --token-color-nomad-surface: var(--token-color-palette-nomad-50); + --token-color-nomad-border: var(--token-color-palette-nomad-100); + --token-color-nomad-gradient-primary-start: var(--token-color-palette-nomad-100); + --token-color-nomad-gradient-primary-stop: var(--token-color-palette-nomad-200); + --token-color-nomad-gradient-faint-stop: var(--token-color-palette-nomad-50); + --token-color-packer-brand: var(--token-color-palette-packer-brand); + --token-color-packer-foreground: var(--token-color-palette-packer-500); + --token-color-packer-surface: var(--token-color-palette-packer-50); + --token-color-packer-border: var(--token-color-palette-packer-100); + --token-color-packer-gradient-primary-start: var(--token-color-palette-packer-100); + --token-color-packer-gradient-primary-stop: var(--token-color-palette-packer-200); + --token-color-packer-gradient-faint-stop: var(--token-color-palette-packer-50); + --token-color-terraform-brand: var(--token-color-palette-terraform-brand); + --token-color-terraform-foreground: var(--token-color-palette-terraform-500); + --token-color-terraform-surface: var(--token-color-palette-terraform-50); + --token-color-terraform-border: var(--token-color-palette-terraform-100); + --token-color-terraform-gradient-primary-start: var(--token-color-palette-terraform-300); + --token-color-terraform-gradient-primary-stop: var(--token-color-palette-terraform-400); + --token-color-terraform-gradient-faint-stop: var(--token-color-palette-terraform-50); + --token-color-vagrant-brand: var(--token-color-palette-vagrant-brand); + --token-color-vagrant-foreground: var(--token-color-palette-vagrant-500); + --token-color-vagrant-surface: var(--token-color-palette-vagrant-50); + --token-color-vagrant-border: var(--token-color-palette-vagrant-100); + --token-color-vagrant-gradient-primary-start: var(--token-color-palette-vagrant-300); + --token-color-vagrant-gradient-primary-stop: var(--token-color-palette-vagrant-400); + --token-color-vagrant-gradient-faint-stop: var(--token-color-palette-vagrant-50); + --token-color-vault-radar-brand: var(--token-color-palette-vault-radar-brand); + --token-color-vault-radar-foreground: var(--token-color-palette-vault-radar-500); + --token-color-vault-radar-surface: var(--token-color-palette-vault-radar-50); + --token-color-vault-radar-border: var(--token-color-palette-vault-radar-100); + --token-color-vault-radar-gradient-primary-start: var(--token-color-palette-vault-radar-100); + --token-color-vault-radar-gradient-primary-stop: var(--token-color-palette-vault-radar-200); + --token-color-vault-radar-gradient-faint-stop: var(--token-color-palette-vault-radar-50); + --token-color-vault-secrets-brand: var(--token-color-palette-vault-secrets-brand); + --token-color-vault-secrets-foreground: var(--token-color-palette-vault-secrets-500); + --token-color-vault-secrets-surface: var(--token-color-palette-vault-secrets-50); + --token-color-vault-secrets-border: var(--token-color-palette-vault-secrets-100); + --token-color-vault-secrets-gradient-primary-start: var(--token-color-palette-vault-secrets-100); + --token-color-vault-secrets-gradient-primary-stop: var(--token-color-palette-vault-secrets-200); + --token-color-vault-secrets-gradient-faint-stop: var(--token-color-palette-vault-secrets-50); + --token-color-vault-brand: var(--token-color-palette-vault-brand); + --token-color-vault-foreground: var(--token-color-palette-vault-500); + --token-color-vault-surface: var(--token-color-palette-vault-50); + --token-color-vault-border: var(--token-color-palette-vault-100); + --token-color-vault-gradient-primary-start: var(--token-color-palette-vault-100); + --token-color-vault-gradient-primary-stop: var(--token-color-palette-vault-200); + --token-color-vault-gradient-faint-stop: var(--token-color-palette-vault-50); + --token-color-waypoint-brand: var(--token-color-palette-waypoint-brand); + --token-color-waypoint-foreground: var(--token-color-palette-waypoint-500); + --token-color-waypoint-surface: var(--token-color-palette-waypoint-50); + --token-color-waypoint-border: var(--token-color-palette-waypoint-100); + --token-color-waypoint-gradient-primary-start: var(--token-color-palette-waypoint-100); + --token-color-waypoint-gradient-primary-stop: var(--token-color-palette-waypoint-200); + --token-color-waypoint-gradient-faint-stop: var(--token-color-palette-waypoint-50); + --token-elevation-inset-box-shadow-01: inset var(--token-elevation-inset-shadow-01-x) var(--token-elevation-inset-shadow-01-y) var(--token-elevation-inset-shadow-01-blur) var(--token-elevation-inset-shadow-01-spread) var(--token-elevation-inset-shadow-01-color); + --token-elevation-inset-box-shadow-border: inset 0 0 0 var(--token-elevation-inset-border-width) var(--token-elevation-inset-border-color); + --token-elevation-low-box-shadow-01: var(--token-elevation-low-shadow-01-x) var(--token-elevation-low-shadow-01-y) var(--token-elevation-low-shadow-01-blur) var(--token-elevation-low-shadow-01-spread) var(--token-elevation-low-shadow-01-color); + --token-elevation-low-box-shadow-02: var(--token-elevation-low-shadow-02-x) var(--token-elevation-low-shadow-02-y) var(--token-elevation-low-shadow-02-blur) var(--token-elevation-low-shadow-02-spread) var(--token-elevation-low-shadow-02-color); + --token-elevation-low-box-shadow-border: 0 0 0 var(--token-elevation-low-border-width) var(--token-elevation-low-border-color); + --token-elevation-mid-box-shadow-01: var(--token-elevation-mid-shadow-01-x) var(--token-elevation-mid-shadow-01-y) var(--token-elevation-mid-shadow-01-blur) var(--token-elevation-mid-shadow-01-spread) var(--token-elevation-mid-shadow-01-color); + --token-elevation-mid-box-shadow-border: 0 0 0 var(--token-elevation-mid-border-width) var(--token-elevation-mid-border-color); + --token-elevation-high-box-shadow-01: var(--token-elevation-high-shadow-01-x) var(--token-elevation-high-shadow-01-y) var(--token-elevation-high-shadow-01-blur) var(--token-elevation-high-shadow-01-spread) var(--token-elevation-high-shadow-01-color); + --token-elevation-high-box-shadow-02: var(--token-elevation-high-shadow-02-x) var(--token-elevation-high-shadow-02-y) var(--token-elevation-high-shadow-02-blur) var(--token-elevation-high-shadow-02-spread) var(--token-elevation-high-shadow-02-color); + --token-elevation-higher-box-shadow-02: var(--token-elevation-higher-shadow-02-x) var(--token-elevation-higher-shadow-02-y) var(--token-elevation-higher-shadow-02-blur) var(--token-elevation-higher-shadow-02-spread) var(--token-elevation-higher-shadow-02-color); + --token-elevation-overlay-box-shadow-02: var(--token-elevation-overlay-shadow-02-x) var(--token-elevation-overlay-shadow-02-y) var(--token-elevation-overlay-shadow-02-blur) var(--token-elevation-overlay-shadow-02-spread) var(--token-elevation-overlay-shadow-02-color); + --token-elevation-mid-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-mid-box-shadow-02: var(--token-elevation-mid-shadow-02-x) var(--token-elevation-mid-shadow-02-y) var(--token-elevation-mid-shadow-02-blur) var(--token-elevation-mid-shadow-02-spread) var(--token-elevation-mid-shadow-02-color); + --token-elevation-high-box-shadow-border: 0 0 0 var(--token-elevation-high-border-width) var(--token-elevation-high-border-color); + --token-elevation-higher-box-shadow-01: var(--token-elevation-higher-shadow-01-x) var(--token-elevation-higher-shadow-01-y) var(--token-elevation-higher-shadow-01-blur) var(--token-elevation-higher-shadow-01-spread) var(--token-elevation-higher-shadow-01-color); + --token-elevation-higher-box-shadow-border: 0 0 0 var(--token-elevation-higher-border-width) var(--token-elevation-higher-border-color); + --token-elevation-overlay-box-shadow-01: var(--token-elevation-overlay-shadow-01-x) var(--token-elevation-overlay-shadow-01-y) var(--token-elevation-overlay-shadow-01-blur) var(--token-elevation-overlay-shadow-01-spread) var(--token-elevation-overlay-shadow-01-color); + --token-elevation-overlay-box-shadow-border: 0 0 0 var(--token-elevation-overlay-border-width) var(--token-elevation-overlay-border-color); + --token-elevation-base-box-shadow-border: 0 0 0 var(--token-elevation-base-border-width) var(--token-elevation-base-border-color); + --token-elevation-color-base: var(--token-color-palette-neutral-500); + --token-elevation-color-strong: var(--token-color-palette-neutral-600); + --token-focus-ring-action-external-box-shadow: 0 0 0 3px var(--token-color-focus-action-external); + --token-focus-ring-critical-external-box-shadow: 0 0 0 3px var(--token-color-focus-critical-external); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-control-base-border-color-default: var(--token-color-palette-neutral-400); + --token-form-control-base-border-color-hover: var(--token-color-palette-neutral-500); + --token-form-control-checked-surface-color-default: var(--token-color-palette-blue-200); + --token-form-control-checked-surface-color-hover: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-default: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-hover: var(--token-color-palette-blue-400); + --token-form-control-invalid-border-color-default: var(--token-color-palette-red-300); + --token-form-control-invalid-border-color-hover: var(--token-color-palette-red-400); + --token-form-select-background-image-position-right-x: var(--token-form-control-padding); + --token-form-text-input-background-image-position-x: var(--token-form-control-padding); + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-typography-font-stack-display: var(--token-typography-font-stack-sans-display-mac-os), var(--token-typography-font-stack-sans-display-windows), var(--token-typography-font-stack-sans-display-sans), var(--token-typography-font-stack-sans-display-emoji); + --token-typography-font-stack-text: var(--token-typography-font-stack-sans-text-mac-os), var(--token-typography-font-stack-sans-text-windows), var(--token-typography-font-stack-sans-display-sans), var(--token-typography-font-stack-sans-text-emoji); + --token-typography-font-stack-code: var(--token-typography-font-stack-monospace-code-mac-os), var(--token-typography-font-stack-monospace-code-windows), monospace; + --token-color-border-primary: var(--token-color-palette-alpha-200); + --token-color-border-faint: var(--token-color-palette-alpha-100); + --token-color-border-strong: var(--token-color-palette-alpha-300); + --token-elevation-inset-box-shadow: var(--token-elevation-inset-box-shadow-01); + --token-elevation-inset-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-inset-border-color: var(--token-elevation-color-base); + --token-elevation-low-box-shadow: var(--token-elevation-low-box-shadow-01), var(--token-elevation-low-box-shadow-02); + --token-elevation-low-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-low-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-low-border-color: var(--token-elevation-color-base); + --token-elevation-mid-box-shadow: var(--token-elevation-mid-box-shadow-01), var(--token-elevation-mid-box-shadow-02); + --token-elevation-mid-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-mid-border-color: var(--token-elevation-color-base); + --token-elevation-high-box-shadow: var(--token-elevation-high-box-shadow-01), var(--token-elevation-high-box-shadow-02); + --token-elevation-high-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-high-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-high-border-color: var(--token-elevation-color-base); + --token-elevation-higher-box-shadow: var(--token-elevation-higher-box-shadow-01), var(--token-elevation-higher-box-shadow-02); + --token-elevation-higher-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-higher-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-higher-border-color: var(--token-elevation-color-base); + --token-elevation-overlay-box-shadow: var(--token-elevation-overlay-box-shadow-01), var(--token-elevation-overlay-box-shadow-02); + --token-elevation-overlay-shadow-01-color: var(--token-elevation-color-strong); + --token-elevation-overlay-shadow-02-color: var(--token-elevation-color-strong); + --token-elevation-overlay-border-color: var(--token-elevation-color-strong); + --token-elevation-base-border-color: var(--token-elevation-color-base); + --token-surface-inset-box-shadow: var(--token-elevation-inset-box-shadow-border), var(--token-elevation-inset-box-shadow); + --token-surface-base-box-shadow: var(--token-elevation-base-box-shadow-border); + --token-surface-low-box-shadow: var(--token-elevation-low-box-shadow-border), var(--token-elevation-low-box-shadow); + --token-surface-mid-box-shadow: var(--token-elevation-mid-box-shadow-border), var(--token-elevation-mid-box-shadow); + --token-surface-high-box-shadow: var(--token-elevation-high-box-shadow-border), var(--token-elevation-high-box-shadow); + --token-surface-higher-box-shadow: var(--token-elevation-higher-box-shadow-border), var(--token-elevation-higher-box-shadow); + --token-surface-overlay-box-shadow: var(--token-elevation-overlay-box-shadow-border), var(--token-elevation-overlay-box-shadow); + --token-focus-ring-action-internal-box-shadow: inset 0 0 0 1px var(--token-color-focus-action-internal); + --token-focus-ring-critical-internal-box-shadow: inset 0 0 0 1px var(--token-color-focus-critical-internal); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-control-base-foreground-value-color: var(--token-color-foreground-strong); + --token-form-control-base-foreground-placeholder-color: var(--token-color-foreground-faint); + --token-form-control-base-surface-color-default: var(--token-color-surface-interactive); + --token-form-control-base-surface-color-hover: var(--token-color-surface-interactive-hover); + --token-form-control-checked-foreground-color: var(--token-color-foreground-high-contrast); + --token-form-control-readonly-foreground-color: var(--token-color-foreground-primary); + --token-form-control-readonly-surface-color: var(--token-color-surface-strong); + --token-form-control-disabled-foreground-color: var(--token-color-foreground-disabled); + --token-form-control-disabled-surface-color: var(--token-color-surface-interactive-disabled); + --token-form-toggle-base-surface-color-default: var(--token-color-surface-strong); /* the toggle has a different base surface color, compared to the other controls */ + --token-typography-display-500-font-family: var(--token-typography-font-stack-display); + --token-typography-display-400-font-family: var(--token-typography-font-stack-display); + --token-typography-display-300-font-family: var(--token-typography-font-stack-text); + --token-typography-display-200-font-family: var(--token-typography-font-stack-display); + --token-typography-display-100-font-family: var(--token-typography-font-stack-text); + --token-typography-body-300-font-family: var(--token-typography-font-stack-text); + --token-typography-body-200-font-family: var(--token-typography-font-stack-text); + --token-typography-body-100-font-family: var(--token-typography-font-stack-text); + --token-typography-code-100-font-family: var(--token-typography-font-stack-code); + --token-typography-code-200-font-family: var(--token-typography-font-stack-code); + --token-typography-code-300-font-family: var(--token-typography-font-stack-code); + --token-focus-ring-action-box-shadow: var(--token-focus-ring-action-internal-box-shadow), var(--token-focus-ring-action-external-box-shadow); + --token-focus-ring-critical-box-shadow: var(--token-focus-ring-critical-internal-box-shadow), var(--token-focus-ring-critical-external-box-shadow); + --token-form-legend-color: var(--token-form-label-color); + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-disabled-border-color: var(--token-color-border-primary); +} + +:root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} + +.hds-theme-light, +[data-hds-theme="light"] { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} + +.hds-theme-dark, +[data-hds-theme="dark"] { + --token-color-palette-blue-500: #6bc1ff; + --token-color-palette-blue-400: #4ca1ff; + --token-color-palette-blue-300: #389aff; + --token-color-palette-blue-200: #2b89ff; + --token-color-palette-blue-100: #1c345f; + --token-color-palette-blue-50: #111f37; + --token-color-palette-purple-500: #dda5ff; + --token-color-palette-purple-400: #c070ff; + --token-color-palette-purple-300: #b457ff; + --token-color-palette-purple-200: #ab42ff; + --token-color-palette-purple-100: #42225b; + --token-color-palette-purple-50: #29123a; + --token-color-palette-green-500: #1ce375; + --token-color-palette-green-400: #00c157; + --token-color-palette-green-300: #00ae4e; + --token-color-palette-green-200: #009241; + --token-color-palette-green-100: #054220; + --token-color-palette-green-50: #042a15; + --token-color-palette-amber-500: #ffcc6a; + --token-color-palette-amber-400: #faad3a; + --token-color-palette-amber-300: #fda219; + --token-color-palette-amber-200: #e88c03; + --token-color-palette-amber-100: #542800; + --token-color-palette-amber-50: #2e1b06; + --token-color-palette-red-500: #ff8c7c; + --token-color-palette-red-400: #ff5841; + --token-color-palette-red-300: #f9381e; + --token-color-palette-red-200: #ef3016; + --token-color-palette-red-100: #62170d; + --token-color-palette-red-50: #370b06; + --token-color-palette-neutral-700: #efeff1; + --token-color-palette-neutral-600: #d5d7d8; + --token-color-palette-neutral-500: #b2b6bd; + --token-color-palette-neutral-400: #616875; + --token-color-palette-neutral-300: #434956; + --token-color-palette-neutral-200: #2b303c; + --token-color-palette-neutral-100: #1e222a; + --token-color-palette-neutral-50: #15181e; + --token-color-palette-neutral-0: #0d0e12; + --token-color-palette-alpha-300: #d5d7d866; + --token-color-palette-alpha-200: #b2b6bd33; + --token-color-palette-alpha-100: #b2b6bd1a; +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme.css b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme.css new file mode 100644 index 00000000000..24f70709782 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme.css @@ -0,0 +1,586 @@ +/** + * Do not edit directly, this file was auto-generated. + */ + +:root { + --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-boundary-gradient-faint-start: #fffafa; /* this is the 'boundary-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-start: #fff9fb; /* this is the 'consul-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-start: #f3fff9; /* this is the 'nomad-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-start: #f3fcff; /* this is the 'packer-50' value at 25% opacity on white */ + --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-gradient-faint-start: #fcfaff; /* this is the 'terraform-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vault-radar-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */ + --token-color-vault-radar-gradient-faint-start: #fffdf2; /* this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-gradient-faint-start: #fffdf2; /* this is the 'vault-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */ + --token-elevation-inset-shadow-01-x: 0px; + --token-elevation-inset-shadow-01-y: 1px; + --token-elevation-inset-shadow-01-blur: 2px; + --token-elevation-inset-shadow-01-spread: 1px; + --token-elevation-inset-border-width: 1px; + --token-elevation-low-shadow-01-x: 0px; + --token-elevation-low-shadow-01-y: 1px; + --token-elevation-low-shadow-01-blur: 1px; + --token-elevation-low-shadow-01-spread: 0px; + --token-elevation-low-shadow-02-x: 0px; + --token-elevation-low-shadow-02-y: 2px; + --token-elevation-low-shadow-02-blur: 2px; + --token-elevation-low-shadow-02-spread: 0px; + --token-elevation-low-border-width: 1px; + --token-elevation-mid-shadow-01-x: 0px; + --token-elevation-mid-shadow-01-y: 2px; + --token-elevation-mid-shadow-01-blur: 3px; + --token-elevation-mid-shadow-01-spread: 0px; + --token-elevation-mid-shadow-02-x: 0px; + --token-elevation-mid-shadow-02-y: 8px; + --token-elevation-mid-shadow-02-blur: 16px; + --token-elevation-mid-shadow-02-spread: -10px; + --token-elevation-mid-border-width: 1px; + --token-elevation-high-shadow-01-x: 0px; + --token-elevation-high-shadow-01-y: 2px; + --token-elevation-high-shadow-01-blur: 3px; + --token-elevation-high-shadow-01-spread: 0px; + --token-elevation-high-shadow-02-x: 0px; + --token-elevation-high-shadow-02-y: 16px; + --token-elevation-high-shadow-02-blur: 16px; + --token-elevation-high-shadow-02-spread: -10px; + --token-elevation-high-border-width: 1px; + --token-elevation-higher-shadow-01-x: 0px; + --token-elevation-higher-shadow-01-y: 2px; + --token-elevation-higher-shadow-01-blur: 3px; + --token-elevation-higher-shadow-01-spread: 0px; + --token-elevation-higher-shadow-02-x: 0px; + --token-elevation-higher-shadow-02-y: 12px; + --token-elevation-higher-shadow-02-blur: 28px; + --token-elevation-higher-shadow-02-spread: 0px; + --token-elevation-higher-border-width: 1px; + --token-elevation-overlay-shadow-01-x: 0px; + --token-elevation-overlay-shadow-01-y: 2px; + --token-elevation-overlay-shadow-01-blur: 3px; + --token-elevation-overlay-shadow-01-spread: 0px; + --token-elevation-overlay-shadow-02-x: 0px; + --token-elevation-overlay-shadow-02-y: 12px; + --token-elevation-overlay-shadow-02-blur: 24px; + --token-elevation-overlay-shadow-02-spread: 0px; + --token-elevation-overlay-border-width: 1px; + --token-elevation-base-border-width: 1px; + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); + --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-text-input-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */ + --token-form-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-divider-height: 1px; + --token-tooltip-border-radius: 5px; + --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast); + --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700); + --token-tooltip-focus-offset: -2px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-stack-sans-display-mac-os: -apple-system, BlinkMacSystemFont; + --token-typography-font-stack-sans-display-windows: Segoe UI; + --token-typography-font-stack-sans-display-sans: Helvetica, Arial, sans-serif; + --token-typography-font-stack-sans-display-emoji: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-sans-text-mac-os: -apple-system, BlinkMacSystemFont; + --token-typography-font-stack-sans-text-windows: Segoe UI; + --token-typography-font-stack-sans-text-emoji: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-monospace-code-mac-os: ui-monospace, Menlo; + --token-typography-font-stack-monospace-code-windows: Consolas; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; + --token-typography-display-500-font-size: 1.875rem; /* 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /* 38px */ + --token-typography-display-400-font-size: 1.5rem; /* 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /* 32px */ + --token-typography-display-300-font-size: 1.125rem; /* 18px/1.125rem */ + --token-typography-display-300-line-height: 1.3333; /* 24px */ + --token-typography-display-300-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-200-font-size: 1rem; /* 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /* 24px */ + --token-typography-display-200-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.3846; /* 18px */ + --token-typography-body-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /* 24px */ + --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /* 20px */ + --token-typography-body-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /* 18px */ + --token-typography-code-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /* 16px */ + --token-typography-code-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /* 18px */ + --token-typography-code-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /* 20px */ + --token-color-border-action: var(--token-color-palette-blue-100); + --token-color-border-highlight: var(--token-color-palette-purple-100); + --token-color-border-success: var(--token-color-palette-green-100); + --token-color-border-warning: var(--token-color-palette-amber-100); + --token-color-border-critical: var(--token-color-palette-red-100); + --token-color-focus-action-internal: var(--token-color-palette-blue-300); + --token-color-focus-critical-internal: var(--token-color-palette-red-300); + --token-color-foreground-strong: var(--token-color-palette-neutral-700); + --token-color-foreground-primary: var(--token-color-palette-neutral-600); + --token-color-foreground-faint: var(--token-color-palette-neutral-500); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-color-foreground-disabled: var(--token-color-palette-neutral-400); + --token-color-foreground-action: var(--token-color-palette-blue-200); + --token-color-foreground-action-hover: var(--token-color-palette-blue-300); + --token-color-foreground-action-active: var(--token-color-palette-blue-400); + --token-color-foreground-highlight: var(--token-color-palette-purple-200); + --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-300); + --token-color-foreground-highlight-high-contrast: var(--token-color-palette-purple-500); + --token-color-foreground-success: var(--token-color-palette-green-200); + --token-color-foreground-success-on-surface: var(--token-color-palette-green-300); + --token-color-foreground-success-high-contrast: var(--token-color-palette-green-500); + --token-color-foreground-warning: var(--token-color-palette-amber-200); + --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-300); + --token-color-foreground-warning-high-contrast: var(--token-color-palette-amber-500); + --token-color-foreground-critical: var(--token-color-palette-red-200); + --token-color-foreground-critical-on-surface: var(--token-color-palette-red-300); + --token-color-foreground-critical-high-contrast: var(--token-color-palette-red-500); + --token-color-page-primary: var(--token-color-palette-neutral-0); + --token-color-page-faint: var(--token-color-palette-neutral-50); + --token-color-surface-primary: var(--token-color-palette-neutral-0); + --token-color-surface-faint: var(--token-color-palette-neutral-50); + --token-color-surface-strong: var(--token-color-palette-neutral-100); + --token-color-surface-interactive: var(--token-color-palette-neutral-0); + --token-color-surface-interactive-hover: var(--token-color-palette-neutral-100); + --token-color-surface-interactive-active: var(--token-color-palette-neutral-200); + --token-color-surface-interactive-disabled: var(--token-color-palette-neutral-50); + --token-color-surface-action: var(--token-color-palette-blue-50); + --token-color-surface-highlight: var(--token-color-palette-purple-50); + --token-color-surface-success: var(--token-color-palette-green-50); + --token-color-surface-warning: var(--token-color-palette-amber-50); + --token-color-surface-critical: var(--token-color-palette-red-50); + --token-color-hashicorp-brand: var(--token-color-palette-hashicorp-brand); + --token-color-boundary-brand: var(--token-color-palette-boundary-brand); + --token-color-boundary-foreground: var(--token-color-palette-boundary-500); + --token-color-boundary-surface: var(--token-color-palette-boundary-50); + --token-color-boundary-border: var(--token-color-palette-boundary-100); + --token-color-boundary-gradient-primary-start: var(--token-color-palette-boundary-300); + --token-color-boundary-gradient-primary-stop: var(--token-color-palette-boundary-400); + --token-color-boundary-gradient-faint-stop: var(--token-color-palette-boundary-50); + --token-color-consul-brand: var(--token-color-palette-consul-brand); + --token-color-consul-foreground: var(--token-color-palette-consul-500); + --token-color-consul-surface: var(--token-color-palette-consul-50); + --token-color-consul-border: var(--token-color-palette-consul-100); + --token-color-consul-gradient-primary-start: var(--token-color-palette-consul-300); + --token-color-consul-gradient-primary-stop: var(--token-color-palette-consul-400); + --token-color-consul-gradient-faint-stop: var(--token-color-palette-consul-50); + --token-color-hcp-brand: var(--token-color-palette-hcp-brand); + --token-color-nomad-brand: var(--token-color-palette-nomad-brand); + --token-color-nomad-foreground: var(--token-color-palette-nomad-500); + --token-color-nomad-surface: var(--token-color-palette-nomad-50); + --token-color-nomad-border: var(--token-color-palette-nomad-100); + --token-color-nomad-gradient-primary-start: var(--token-color-palette-nomad-100); + --token-color-nomad-gradient-primary-stop: var(--token-color-palette-nomad-200); + --token-color-nomad-gradient-faint-stop: var(--token-color-palette-nomad-50); + --token-color-packer-brand: var(--token-color-palette-packer-brand); + --token-color-packer-foreground: var(--token-color-palette-packer-500); + --token-color-packer-surface: var(--token-color-palette-packer-50); + --token-color-packer-border: var(--token-color-palette-packer-100); + --token-color-packer-gradient-primary-start: var(--token-color-palette-packer-100); + --token-color-packer-gradient-primary-stop: var(--token-color-palette-packer-200); + --token-color-packer-gradient-faint-stop: var(--token-color-palette-packer-50); + --token-color-terraform-brand: var(--token-color-palette-terraform-brand); + --token-color-terraform-foreground: var(--token-color-palette-terraform-500); + --token-color-terraform-surface: var(--token-color-palette-terraform-50); + --token-color-terraform-border: var(--token-color-palette-terraform-100); + --token-color-terraform-gradient-primary-start: var(--token-color-palette-terraform-300); + --token-color-terraform-gradient-primary-stop: var(--token-color-palette-terraform-400); + --token-color-terraform-gradient-faint-stop: var(--token-color-palette-terraform-50); + --token-color-vagrant-brand: var(--token-color-palette-vagrant-brand); + --token-color-vagrant-foreground: var(--token-color-palette-vagrant-500); + --token-color-vagrant-surface: var(--token-color-palette-vagrant-50); + --token-color-vagrant-border: var(--token-color-palette-vagrant-100); + --token-color-vagrant-gradient-primary-start: var(--token-color-palette-vagrant-300); + --token-color-vagrant-gradient-primary-stop: var(--token-color-palette-vagrant-400); + --token-color-vagrant-gradient-faint-stop: var(--token-color-palette-vagrant-50); + --token-color-vault-radar-brand: var(--token-color-palette-vault-radar-brand); + --token-color-vault-radar-foreground: var(--token-color-palette-vault-radar-500); + --token-color-vault-radar-surface: var(--token-color-palette-vault-radar-50); + --token-color-vault-radar-border: var(--token-color-palette-vault-radar-100); + --token-color-vault-radar-gradient-primary-start: var(--token-color-palette-vault-radar-100); + --token-color-vault-radar-gradient-primary-stop: var(--token-color-palette-vault-radar-200); + --token-color-vault-radar-gradient-faint-stop: var(--token-color-palette-vault-radar-50); + --token-color-vault-secrets-brand: var(--token-color-palette-vault-secrets-brand); + --token-color-vault-secrets-foreground: var(--token-color-palette-vault-secrets-500); + --token-color-vault-secrets-surface: var(--token-color-palette-vault-secrets-50); + --token-color-vault-secrets-border: var(--token-color-palette-vault-secrets-100); + --token-color-vault-secrets-gradient-primary-start: var(--token-color-palette-vault-secrets-100); + --token-color-vault-secrets-gradient-primary-stop: var(--token-color-palette-vault-secrets-200); + --token-color-vault-secrets-gradient-faint-stop: var(--token-color-palette-vault-secrets-50); + --token-color-vault-brand: var(--token-color-palette-vault-brand); + --token-color-vault-foreground: var(--token-color-palette-vault-500); + --token-color-vault-surface: var(--token-color-palette-vault-50); + --token-color-vault-border: var(--token-color-palette-vault-100); + --token-color-vault-gradient-primary-start: var(--token-color-palette-vault-100); + --token-color-vault-gradient-primary-stop: var(--token-color-palette-vault-200); + --token-color-vault-gradient-faint-stop: var(--token-color-palette-vault-50); + --token-color-waypoint-brand: var(--token-color-palette-waypoint-brand); + --token-color-waypoint-foreground: var(--token-color-palette-waypoint-500); + --token-color-waypoint-surface: var(--token-color-palette-waypoint-50); + --token-color-waypoint-border: var(--token-color-palette-waypoint-100); + --token-color-waypoint-gradient-primary-start: var(--token-color-palette-waypoint-100); + --token-color-waypoint-gradient-primary-stop: var(--token-color-palette-waypoint-200); + --token-color-waypoint-gradient-faint-stop: var(--token-color-palette-waypoint-50); + --token-elevation-inset-box-shadow-01: inset var(--token-elevation-inset-shadow-01-x) var(--token-elevation-inset-shadow-01-y) var(--token-elevation-inset-shadow-01-blur) var(--token-elevation-inset-shadow-01-spread) var(--token-elevation-inset-shadow-01-color); + --token-elevation-inset-box-shadow-border: inset 0 0 0 var(--token-elevation-inset-border-width) var(--token-elevation-inset-border-color); + --token-elevation-low-box-shadow-01: var(--token-elevation-low-shadow-01-x) var(--token-elevation-low-shadow-01-y) var(--token-elevation-low-shadow-01-blur) var(--token-elevation-low-shadow-01-spread) var(--token-elevation-low-shadow-01-color); + --token-elevation-low-box-shadow-02: var(--token-elevation-low-shadow-02-x) var(--token-elevation-low-shadow-02-y) var(--token-elevation-low-shadow-02-blur) var(--token-elevation-low-shadow-02-spread) var(--token-elevation-low-shadow-02-color); + --token-elevation-low-box-shadow-border: 0 0 0 var(--token-elevation-low-border-width) var(--token-elevation-low-border-color); + --token-elevation-mid-box-shadow-01: var(--token-elevation-mid-shadow-01-x) var(--token-elevation-mid-shadow-01-y) var(--token-elevation-mid-shadow-01-blur) var(--token-elevation-mid-shadow-01-spread) var(--token-elevation-mid-shadow-01-color); + --token-elevation-mid-box-shadow-border: 0 0 0 var(--token-elevation-mid-border-width) var(--token-elevation-mid-border-color); + --token-elevation-high-box-shadow-01: var(--token-elevation-high-shadow-01-x) var(--token-elevation-high-shadow-01-y) var(--token-elevation-high-shadow-01-blur) var(--token-elevation-high-shadow-01-spread) var(--token-elevation-high-shadow-01-color); + --token-elevation-high-box-shadow-02: var(--token-elevation-high-shadow-02-x) var(--token-elevation-high-shadow-02-y) var(--token-elevation-high-shadow-02-blur) var(--token-elevation-high-shadow-02-spread) var(--token-elevation-high-shadow-02-color); + --token-elevation-higher-box-shadow-02: var(--token-elevation-higher-shadow-02-x) var(--token-elevation-higher-shadow-02-y) var(--token-elevation-higher-shadow-02-blur) var(--token-elevation-higher-shadow-02-spread) var(--token-elevation-higher-shadow-02-color); + --token-elevation-overlay-box-shadow-02: var(--token-elevation-overlay-shadow-02-x) var(--token-elevation-overlay-shadow-02-y) var(--token-elevation-overlay-shadow-02-blur) var(--token-elevation-overlay-shadow-02-spread) var(--token-elevation-overlay-shadow-02-color); + --token-elevation-mid-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-mid-box-shadow-02: var(--token-elevation-mid-shadow-02-x) var(--token-elevation-mid-shadow-02-y) var(--token-elevation-mid-shadow-02-blur) var(--token-elevation-mid-shadow-02-spread) var(--token-elevation-mid-shadow-02-color); + --token-elevation-high-box-shadow-border: 0 0 0 var(--token-elevation-high-border-width) var(--token-elevation-high-border-color); + --token-elevation-higher-box-shadow-01: var(--token-elevation-higher-shadow-01-x) var(--token-elevation-higher-shadow-01-y) var(--token-elevation-higher-shadow-01-blur) var(--token-elevation-higher-shadow-01-spread) var(--token-elevation-higher-shadow-01-color); + --token-elevation-higher-box-shadow-border: 0 0 0 var(--token-elevation-higher-border-width) var(--token-elevation-higher-border-color); + --token-elevation-overlay-box-shadow-01: var(--token-elevation-overlay-shadow-01-x) var(--token-elevation-overlay-shadow-01-y) var(--token-elevation-overlay-shadow-01-blur) var(--token-elevation-overlay-shadow-01-spread) var(--token-elevation-overlay-shadow-01-color); + --token-elevation-overlay-box-shadow-border: 0 0 0 var(--token-elevation-overlay-border-width) var(--token-elevation-overlay-border-color); + --token-elevation-base-box-shadow-border: 0 0 0 var(--token-elevation-base-border-width) var(--token-elevation-base-border-color); + --token-elevation-color-base: var(--token-color-palette-neutral-500); + --token-elevation-color-strong: var(--token-color-palette-neutral-600); + --token-focus-ring-action-external-box-shadow: 0 0 0 3px var(--token-color-focus-action-external); + --token-focus-ring-critical-external-box-shadow: 0 0 0 3px var(--token-color-focus-critical-external); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-control-base-border-color-default: var(--token-color-palette-neutral-400); + --token-form-control-base-border-color-hover: var(--token-color-palette-neutral-500); + --token-form-control-checked-surface-color-default: var(--token-color-palette-blue-200); + --token-form-control-checked-surface-color-hover: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-default: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-hover: var(--token-color-palette-blue-400); + --token-form-control-invalid-border-color-default: var(--token-color-palette-red-300); + --token-form-control-invalid-border-color-hover: var(--token-color-palette-red-400); + --token-form-select-background-image-position-right-x: var(--token-form-control-padding); + --token-form-text-input-background-image-position-x: var(--token-form-control-padding); + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-typography-font-stack-display: var(--token-typography-font-stack-sans-display-mac-os), var(--token-typography-font-stack-sans-display-windows), var(--token-typography-font-stack-sans-display-sans), var(--token-typography-font-stack-sans-display-emoji); + --token-typography-font-stack-text: var(--token-typography-font-stack-sans-text-mac-os), var(--token-typography-font-stack-sans-text-windows), var(--token-typography-font-stack-sans-display-sans), var(--token-typography-font-stack-sans-text-emoji); + --token-typography-font-stack-code: var(--token-typography-font-stack-monospace-code-mac-os), var(--token-typography-font-stack-monospace-code-windows), monospace; + --token-color-border-primary: var(--token-color-palette-alpha-200); + --token-color-border-faint: var(--token-color-palette-alpha-100); + --token-color-border-strong: var(--token-color-palette-alpha-300); + --token-elevation-inset-box-shadow: var(--token-elevation-inset-box-shadow-01); + --token-elevation-inset-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-inset-border-color: var(--token-elevation-color-base); + --token-elevation-low-box-shadow: var(--token-elevation-low-box-shadow-01), var(--token-elevation-low-box-shadow-02); + --token-elevation-low-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-low-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-low-border-color: var(--token-elevation-color-base); + --token-elevation-mid-box-shadow: var(--token-elevation-mid-box-shadow-01), var(--token-elevation-mid-box-shadow-02); + --token-elevation-mid-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-mid-border-color: var(--token-elevation-color-base); + --token-elevation-high-box-shadow: var(--token-elevation-high-box-shadow-01), var(--token-elevation-high-box-shadow-02); + --token-elevation-high-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-high-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-high-border-color: var(--token-elevation-color-base); + --token-elevation-higher-box-shadow: var(--token-elevation-higher-box-shadow-01), var(--token-elevation-higher-box-shadow-02); + --token-elevation-higher-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-higher-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-higher-border-color: var(--token-elevation-color-base); + --token-elevation-overlay-box-shadow: var(--token-elevation-overlay-box-shadow-01), var(--token-elevation-overlay-box-shadow-02); + --token-elevation-overlay-shadow-01-color: var(--token-elevation-color-strong); + --token-elevation-overlay-shadow-02-color: var(--token-elevation-color-strong); + --token-elevation-overlay-border-color: var(--token-elevation-color-strong); + --token-elevation-base-border-color: var(--token-elevation-color-base); + --token-surface-inset-box-shadow: var(--token-elevation-inset-box-shadow-border), var(--token-elevation-inset-box-shadow); + --token-surface-base-box-shadow: var(--token-elevation-base-box-shadow-border); + --token-surface-low-box-shadow: var(--token-elevation-low-box-shadow-border), var(--token-elevation-low-box-shadow); + --token-surface-mid-box-shadow: var(--token-elevation-mid-box-shadow-border), var(--token-elevation-mid-box-shadow); + --token-surface-high-box-shadow: var(--token-elevation-high-box-shadow-border), var(--token-elevation-high-box-shadow); + --token-surface-higher-box-shadow: var(--token-elevation-higher-box-shadow-border), var(--token-elevation-higher-box-shadow); + --token-surface-overlay-box-shadow: var(--token-elevation-overlay-box-shadow-border), var(--token-elevation-overlay-box-shadow); + --token-focus-ring-action-internal-box-shadow: inset 0 0 0 1px var(--token-color-focus-action-internal); + --token-focus-ring-critical-internal-box-shadow: inset 0 0 0 1px var(--token-color-focus-critical-internal); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-control-base-foreground-value-color: var(--token-color-foreground-strong); + --token-form-control-base-foreground-placeholder-color: var(--token-color-foreground-faint); + --token-form-control-base-surface-color-default: var(--token-color-surface-interactive); + --token-form-control-base-surface-color-hover: var(--token-color-surface-interactive-hover); + --token-form-control-checked-foreground-color: var(--token-color-foreground-high-contrast); + --token-form-control-readonly-foreground-color: var(--token-color-foreground-primary); + --token-form-control-readonly-surface-color: var(--token-color-surface-strong); + --token-form-control-disabled-foreground-color: var(--token-color-foreground-disabled); + --token-form-control-disabled-surface-color: var(--token-color-surface-interactive-disabled); + --token-form-toggle-base-surface-color-default: var(--token-color-surface-strong); /* the toggle has a different base surface color, compared to the other controls */ + --token-typography-display-500-font-family: var(--token-typography-font-stack-display); + --token-typography-display-400-font-family: var(--token-typography-font-stack-display); + --token-typography-display-300-font-family: var(--token-typography-font-stack-text); + --token-typography-display-200-font-family: var(--token-typography-font-stack-display); + --token-typography-display-100-font-family: var(--token-typography-font-stack-text); + --token-typography-body-300-font-family: var(--token-typography-font-stack-text); + --token-typography-body-200-font-family: var(--token-typography-font-stack-text); + --token-typography-body-100-font-family: var(--token-typography-font-stack-text); + --token-typography-code-100-font-family: var(--token-typography-font-stack-code); + --token-typography-code-200-font-family: var(--token-typography-font-stack-code); + --token-typography-code-300-font-family: var(--token-typography-font-stack-code); + --token-focus-ring-action-box-shadow: var(--token-focus-ring-action-internal-box-shadow), var(--token-focus-ring-action-external-box-shadow); + --token-focus-ring-critical-box-shadow: var(--token-focus-ring-critical-internal-box-shadow), var(--token-focus-ring-critical-external-box-shadow); + --token-form-legend-color: var(--token-form-label-color); + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-disabled-border-color: var(--token-color-border-primary); +} + +:root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} + +@media (prefers-color-scheme: light) { + :root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; + } +} + +@media (prefers-color-scheme: dark) { + :root { + --token-color-palette-blue-500: #6bc1ff; + --token-color-palette-blue-400: #4ca1ff; + --token-color-palette-blue-300: #389aff; + --token-color-palette-blue-200: #2b89ff; + --token-color-palette-blue-100: #1c345f; + --token-color-palette-blue-50: #111f37; + --token-color-palette-purple-500: #dda5ff; + --token-color-palette-purple-400: #c070ff; + --token-color-palette-purple-300: #b457ff; + --token-color-palette-purple-200: #ab42ff; + --token-color-palette-purple-100: #42225b; + --token-color-palette-purple-50: #29123a; + --token-color-palette-green-500: #1ce375; + --token-color-palette-green-400: #00c157; + --token-color-palette-green-300: #00ae4e; + --token-color-palette-green-200: #009241; + --token-color-palette-green-100: #054220; + --token-color-palette-green-50: #042a15; + --token-color-palette-amber-500: #ffcc6a; + --token-color-palette-amber-400: #faad3a; + --token-color-palette-amber-300: #fda219; + --token-color-palette-amber-200: #e88c03; + --token-color-palette-amber-100: #542800; + --token-color-palette-amber-50: #2e1b06; + --token-color-palette-red-500: #ff8c7c; + --token-color-palette-red-400: #ff5841; + --token-color-palette-red-300: #f9381e; + --token-color-palette-red-200: #ef3016; + --token-color-palette-red-100: #62170d; + --token-color-palette-red-50: #370b06; + --token-color-palette-neutral-700: #efeff1; + --token-color-palette-neutral-600: #d5d7d8; + --token-color-palette-neutral-500: #b2b6bd; + --token-color-palette-neutral-400: #616875; + --token-color-palette-neutral-300: #434956; + --token-color-palette-neutral-200: #2b303c; + --token-color-palette-neutral-100: #1e222a; + --token-color-palette-neutral-50: #15181e; + --token-color-palette-neutral-0: #0d0e12; + --token-color-palette-alpha-300: #d5d7d866; + --token-color-palette-alpha-200: #b2b6bd33; + --token-color-palette-alpha-100: #b2b6bd1a; + } +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/common-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/common-tokens.css new file mode 100644 index 00000000000..58a16ab841d --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/common-tokens.css @@ -0,0 +1,443 @@ +:root { + --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ + --token-color-boundary-gradient-faint-start: #fffafa; /* this is the 'boundary-50' value at 25% opacity on white */ + --token-color-consul-gradient-faint-start: #fff9fb; /* this is the 'consul-50' value at 25% opacity on white */ + --token-color-nomad-gradient-faint-start: #f3fff9; /* this is the 'nomad-50' value at 25% opacity on white */ + --token-color-packer-gradient-faint-start: #f3fcff; /* this is the 'packer-50' value at 25% opacity on white */ + --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */ + --token-color-terraform-gradient-faint-start: #fcfaff; /* this is the 'terraform-50' value at 25% opacity on white */ + --token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */ + --token-color-vault-radar-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */ + --token-color-vault-radar-gradient-faint-start: #fffdf2; /* this is the 'vault-radar-50' value at 25% opacity on white */ + --token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */ + --token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */ + --token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */ + --token-color-vault-gradient-faint-start: #fffdf2; /* this is the 'vault-50' value at 25% opacity on white */ + --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */ + --token-elevation-inset-shadow-01-x: 0px; + --token-elevation-inset-shadow-01-y: 1px; + --token-elevation-inset-shadow-01-blur: 2px; + --token-elevation-inset-shadow-01-spread: 1px; + --token-elevation-inset-border-width: 1px; + --token-elevation-low-shadow-01-x: 0px; + --token-elevation-low-shadow-01-y: 1px; + --token-elevation-low-shadow-01-blur: 1px; + --token-elevation-low-shadow-01-spread: 0px; + --token-elevation-low-shadow-02-x: 0px; + --token-elevation-low-shadow-02-y: 2px; + --token-elevation-low-shadow-02-blur: 2px; + --token-elevation-low-shadow-02-spread: 0px; + --token-elevation-low-border-width: 1px; + --token-elevation-mid-shadow-01-x: 0px; + --token-elevation-mid-shadow-01-y: 2px; + --token-elevation-mid-shadow-01-blur: 3px; + --token-elevation-mid-shadow-01-spread: 0px; + --token-elevation-mid-shadow-02-x: 0px; + --token-elevation-mid-shadow-02-y: 8px; + --token-elevation-mid-shadow-02-blur: 16px; + --token-elevation-mid-shadow-02-spread: -10px; + --token-elevation-mid-border-width: 1px; + --token-elevation-high-shadow-01-x: 0px; + --token-elevation-high-shadow-01-y: 2px; + --token-elevation-high-shadow-01-blur: 3px; + --token-elevation-high-shadow-01-spread: 0px; + --token-elevation-high-shadow-02-x: 0px; + --token-elevation-high-shadow-02-y: 16px; + --token-elevation-high-shadow-02-blur: 16px; + --token-elevation-high-shadow-02-spread: -10px; + --token-elevation-high-border-width: 1px; + --token-elevation-higher-shadow-01-x: 0px; + --token-elevation-higher-shadow-01-y: 2px; + --token-elevation-higher-shadow-01-blur: 3px; + --token-elevation-higher-shadow-01-spread: 0px; + --token-elevation-higher-shadow-02-x: 0px; + --token-elevation-higher-shadow-02-y: 12px; + --token-elevation-higher-shadow-02-blur: 28px; + --token-elevation-higher-shadow-02-spread: 0px; + --token-elevation-higher-border-width: 1px; + --token-elevation-overlay-shadow-01-x: 0px; + --token-elevation-overlay-shadow-01-y: 2px; + --token-elevation-overlay-shadow-01-blur: 3px; + --token-elevation-overlay-shadow-01-spread: 0px; + --token-elevation-overlay-shadow-02-x: 0px; + --token-elevation-overlay-shadow-02-y: 12px; + --token-elevation-overlay-shadow-02-blur: 24px; + --token-elevation-overlay-shadow-02-spread: 0px; + --token-elevation-overlay-border-width: 1px; + --token-elevation-base-border-width: 1px; + --token-app-header-height: 60px; + --token-app-header-home-link-size: 36px; + --token-app-header-logo-size: 28px; + --token-app-side-nav-wrapper-border-width: 1px; + --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200); + --token-app-side-nav-wrapper-padding-horizontal: 16px; + --token-app-side-nav-wrapper-padding-vertical: 16px; + --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-app-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-app-side-nav-toggle-button-border-radius: 5px; + --token-app-side-nav-header-home-link-padding: 4px; + --token-app-side-nav-header-home-link-logo-size: 48px; + --token-app-side-nav-header-home-link-logo-size-minimized: 32px; + --token-app-side-nav-header-actions-spacing: 8px; + --token-app-side-nav-body-list-margin-vertical: 24px; + --token-app-side-nav-body-list-item-height: 36px; + --token-app-side-nav-body-list-item-padding-horizontal: 8px; + --token-app-side-nav-body-list-item-padding-vertical: 4px; + --token-app-side-nav-body-list-item-spacing-vertical: 2px; + --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-app-side-nav-body-list-item-border-radius: 5px; + --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary); + --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint); + --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint); + --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover); + --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300); + --token-form-error-icon-size: 14px; + --token-form-checkbox-size: 16px; + --token-form-checkbox-border-radius: 3px; + --token-form-checkbox-border-width: 1px; + --token-form-checkbox-background-image-size: 12px; + --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */ + --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */ + --token-form-control-border-radius: 5px; + --token-form-control-border-width: 1px; + --token-form-radio-size: 16px; + --token-form-radio-border-width: 1px; + --token-form-radio-background-image-size: 12px; + --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */ + --token-form-radiocard-group-gap: 16px; + --token-form-radiocard-border-width: 1px; + --token-form-radiocard-border-radius: 6px; + --token-form-radiocard-content-padding: 24px; + --token-form-radiocard-control-padding: 8px; + --token-form-radiocard-transition-duration: 0.2s; + --token-form-select-background-image-size: 16px; + --token-form-select-background-image-position-top-y: 9px; + --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */ + --token-form-text-input-background-image-size: 16px; + --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */ + --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */ + --token-form-toggle-width: 32px; + --token-form-toggle-height: 16px; + --token-form-toggle-border-radius: 3px; + --token-form-toggle-border-width: 1px; + --token-form-toggle-background-image-size: 12px; + --token-form-toggle-background-image-position-x: 2px; + --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */ + --token-form-toggle-transition-duration: 0.2s; + --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15); + --token-pagination-nav-control-height: 36px; + --token-pagination-nav-control-padding-horizontal: 12px; + --token-pagination-nav-control-focus-inset: 4px; + --token-pagination-nav-control-icon-spacing: 6px; + --token-pagination-nav-indicator-height: 2px; + --token-pagination-nav-indicator-spacing: 6px; + --token-pagination-child-spacing-vertical: 8px; + --token-pagination-child-spacing-horizontal: 20px; + --token-side-nav-wrapper-border-width: 1px; + --token-side-nav-wrapper-border-color: #656a76; + --token-side-nav-wrapper-padding-horizontal: 16px; + --token-side-nav-wrapper-padding-vertical: 16px; + --token-side-nav-wrapper-padding-horizontal-minimized: 8px; + --token-side-nav-wrapper-padding-vertical-minimized: 22px; + --token-side-nav-toggle-button-border-radius: 5px; + --token-side-nav-header-home-link-padding: 4px; + --token-side-nav-header-home-link-logo-size: 48px; + --token-side-nav-header-home-link-logo-size-minimized: 32px; + --token-side-nav-header-actions-spacing: 8px; + --token-side-nav-body-list-margin-vertical: 24px; + --token-side-nav-body-list-item-height: 36px; + --token-side-nav-body-list-item-padding-horizontal: 8px; + --token-side-nav-body-list-item-padding-vertical: 4px; + --token-side-nav-body-list-item-spacing-vertical: 2px; + --token-side-nav-body-list-item-content-spacing-horizontal: 8px; + --token-side-nav-body-list-item-border-radius: 5px; + --token-side-nav-color-foreground-primary: #dedfe3; + --token-side-nav-color-foreground-strong: #ffffff; + --token-side-nav-color-foreground-faint: #8c909c; + --token-side-nav-color-surface-primary: #0c0c0e; + --token-side-nav-color-surface-interactive-hover: #3b3d45; + --token-side-nav-color-surface-interactive-active: #656a76; + --token-tabs-tab-height-medium: 36px; + --token-tabs-tab-height-large: 48px; + --token-tabs-tab-padding-horizontal-medium: 12px; + --token-tabs-tab-padding-horizontal-large: 20px; + --token-tabs-tab-padding-vertical: 0px; + --token-tabs-tab-border-radius: 5px; + --token-tabs-tab-focus-inset: 6px; + --token-tabs-tab-gutter: 6px; + --token-tabs-indicator-height: 3px; + --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); + --token-tabs-indicator-transition-duration: 0.6s; + --token-tabs-divider-height: 1px; + --token-tooltip-border-radius: 5px; + --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast); + --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700); + --token-tooltip-focus-offset: -2px; + --token-tooltip-max-width: 280px; + --token-tooltip-padding-horizontal: 12px; + --token-tooltip-padding-vertical: 8px; + --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); + --token-typography-font-stack-sans-display-mac-os: -apple-system, BlinkMacSystemFont; + --token-typography-font-stack-sans-display-windows: Segoe UI; + --token-typography-font-stack-sans-display-sans: Helvetica, Arial, sans-serif; + --token-typography-font-stack-sans-display-emoji: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-sans-text-mac-os: -apple-system, BlinkMacSystemFont; + --token-typography-font-stack-sans-text-windows: Segoe UI; + --token-typography-font-stack-sans-text-emoji: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --token-typography-font-stack-monospace-code-mac-os: ui-monospace, Menlo; + --token-typography-font-stack-monospace-code-windows: Consolas; + --token-typography-font-weight-regular: 400; + --token-typography-font-weight-medium: 500; + --token-typography-font-weight-semibold: 600; + --token-typography-font-weight-bold: 700; + --token-typography-display-500-font-size: 1.875rem; /* 30px/1.875rem */ + --token-typography-display-500-line-height: 1.2666; /* 38px */ + --token-typography-display-400-font-size: 1.5rem; /* 24px/1.5rem */ + --token-typography-display-400-line-height: 1.3333; /* 32px */ + --token-typography-display-300-font-size: 1.125rem; /* 18px/1.125rem */ + --token-typography-display-300-line-height: 1.3333; /* 24px */ + --token-typography-display-300-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-200-font-size: 1rem; /* 16px/1rem */ + --token-typography-display-200-line-height: 1.5; /* 24px */ + --token-typography-display-200-letter-spacing: -0.5px; /* this is `tracking` */ + --token-typography-display-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-display-100-line-height: 1.3846; /* 18px */ + --token-typography-body-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-body-300-line-height: 1.5; /* 24px */ + --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-body-200-line-height: 1.4286; /* 20px */ + --token-typography-body-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-body-100-line-height: 1.3846; /* 18px */ + --token-typography-code-100-font-size: 0.8125rem; /* 13px/0.8125rem */ + --token-typography-code-100-line-height: 1.23; /* 16px */ + --token-typography-code-200-font-size: 0.875rem; /* 14px/0.875rem */ + --token-typography-code-200-line-height: 1.125; /* 18px */ + --token-typography-code-300-font-size: 1rem; /* 16px/1rem */ + --token-typography-code-300-line-height: 1.25; /* 20px */ + --token-color-border-action: var(--token-color-palette-blue-100); + --token-color-border-highlight: var(--token-color-palette-purple-100); + --token-color-border-success: var(--token-color-palette-green-100); + --token-color-border-warning: var(--token-color-palette-amber-100); + --token-color-border-critical: var(--token-color-palette-red-100); + --token-color-focus-action-internal: var(--token-color-palette-blue-300); + --token-color-focus-critical-internal: var(--token-color-palette-red-300); + --token-color-foreground-strong: var(--token-color-palette-neutral-700); + --token-color-foreground-primary: var(--token-color-palette-neutral-600); + --token-color-foreground-faint: var(--token-color-palette-neutral-500); + --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); + --token-color-foreground-disabled: var(--token-color-palette-neutral-400); + --token-color-foreground-action: var(--token-color-palette-blue-200); + --token-color-foreground-action-hover: var(--token-color-palette-blue-300); + --token-color-foreground-action-active: var(--token-color-palette-blue-400); + --token-color-foreground-highlight: var(--token-color-palette-purple-200); + --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-300); + --token-color-foreground-highlight-high-contrast: var(--token-color-palette-purple-500); + --token-color-foreground-success: var(--token-color-palette-green-200); + --token-color-foreground-success-on-surface: var(--token-color-palette-green-300); + --token-color-foreground-success-high-contrast: var(--token-color-palette-green-500); + --token-color-foreground-warning: var(--token-color-palette-amber-200); + --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-300); + --token-color-foreground-warning-high-contrast: var(--token-color-palette-amber-500); + --token-color-foreground-critical: var(--token-color-palette-red-200); + --token-color-foreground-critical-on-surface: var(--token-color-palette-red-300); + --token-color-foreground-critical-high-contrast: var(--token-color-palette-red-500); + --token-color-page-primary: var(--token-color-palette-neutral-0); + --token-color-page-faint: var(--token-color-palette-neutral-50); + --token-color-surface-primary: var(--token-color-palette-neutral-0); + --token-color-surface-faint: var(--token-color-palette-neutral-50); + --token-color-surface-strong: var(--token-color-palette-neutral-100); + --token-color-surface-interactive: var(--token-color-palette-neutral-0); + --token-color-surface-interactive-hover: var(--token-color-palette-neutral-100); + --token-color-surface-interactive-active: var(--token-color-palette-neutral-200); + --token-color-surface-interactive-disabled: var(--token-color-palette-neutral-50); + --token-color-surface-action: var(--token-color-palette-blue-50); + --token-color-surface-highlight: var(--token-color-palette-purple-50); + --token-color-surface-success: var(--token-color-palette-green-50); + --token-color-surface-warning: var(--token-color-palette-amber-50); + --token-color-surface-critical: var(--token-color-palette-red-50); + --token-color-hashicorp-brand: var(--token-color-palette-hashicorp-brand); + --token-color-boundary-brand: var(--token-color-palette-boundary-brand); + --token-color-boundary-foreground: var(--token-color-palette-boundary-500); + --token-color-boundary-surface: var(--token-color-palette-boundary-50); + --token-color-boundary-border: var(--token-color-palette-boundary-100); + --token-color-boundary-gradient-primary-start: var(--token-color-palette-boundary-300); + --token-color-boundary-gradient-primary-stop: var(--token-color-palette-boundary-400); + --token-color-boundary-gradient-faint-stop: var(--token-color-palette-boundary-50); + --token-color-consul-brand: var(--token-color-palette-consul-brand); + --token-color-consul-foreground: var(--token-color-palette-consul-500); + --token-color-consul-surface: var(--token-color-palette-consul-50); + --token-color-consul-border: var(--token-color-palette-consul-100); + --token-color-consul-gradient-primary-start: var(--token-color-palette-consul-300); + --token-color-consul-gradient-primary-stop: var(--token-color-palette-consul-400); + --token-color-consul-gradient-faint-stop: var(--token-color-palette-consul-50); + --token-color-hcp-brand: var(--token-color-palette-hcp-brand); + --token-color-nomad-brand: var(--token-color-palette-nomad-brand); + --token-color-nomad-foreground: var(--token-color-palette-nomad-500); + --token-color-nomad-surface: var(--token-color-palette-nomad-50); + --token-color-nomad-border: var(--token-color-palette-nomad-100); + --token-color-nomad-gradient-primary-start: var(--token-color-palette-nomad-100); + --token-color-nomad-gradient-primary-stop: var(--token-color-palette-nomad-200); + --token-color-nomad-gradient-faint-stop: var(--token-color-palette-nomad-50); + --token-color-packer-brand: var(--token-color-palette-packer-brand); + --token-color-packer-foreground: var(--token-color-palette-packer-500); + --token-color-packer-surface: var(--token-color-palette-packer-50); + --token-color-packer-border: var(--token-color-palette-packer-100); + --token-color-packer-gradient-primary-start: var(--token-color-palette-packer-100); + --token-color-packer-gradient-primary-stop: var(--token-color-palette-packer-200); + --token-color-packer-gradient-faint-stop: var(--token-color-palette-packer-50); + --token-color-terraform-brand: var(--token-color-palette-terraform-brand); + --token-color-terraform-foreground: var(--token-color-palette-terraform-500); + --token-color-terraform-surface: var(--token-color-palette-terraform-50); + --token-color-terraform-border: var(--token-color-palette-terraform-100); + --token-color-terraform-gradient-primary-start: var(--token-color-palette-terraform-300); + --token-color-terraform-gradient-primary-stop: var(--token-color-palette-terraform-400); + --token-color-terraform-gradient-faint-stop: var(--token-color-palette-terraform-50); + --token-color-vagrant-brand: var(--token-color-palette-vagrant-brand); + --token-color-vagrant-foreground: var(--token-color-palette-vagrant-500); + --token-color-vagrant-surface: var(--token-color-palette-vagrant-50); + --token-color-vagrant-border: var(--token-color-palette-vagrant-100); + --token-color-vagrant-gradient-primary-start: var(--token-color-palette-vagrant-300); + --token-color-vagrant-gradient-primary-stop: var(--token-color-palette-vagrant-400); + --token-color-vagrant-gradient-faint-stop: var(--token-color-palette-vagrant-50); + --token-color-vault-radar-brand: var(--token-color-palette-vault-radar-brand); + --token-color-vault-radar-foreground: var(--token-color-palette-vault-radar-500); + --token-color-vault-radar-surface: var(--token-color-palette-vault-radar-50); + --token-color-vault-radar-border: var(--token-color-palette-vault-radar-100); + --token-color-vault-radar-gradient-primary-start: var(--token-color-palette-vault-radar-100); + --token-color-vault-radar-gradient-primary-stop: var(--token-color-palette-vault-radar-200); + --token-color-vault-radar-gradient-faint-stop: var(--token-color-palette-vault-radar-50); + --token-color-vault-secrets-brand: var(--token-color-palette-vault-secrets-brand); + --token-color-vault-secrets-foreground: var(--token-color-palette-vault-secrets-500); + --token-color-vault-secrets-surface: var(--token-color-palette-vault-secrets-50); + --token-color-vault-secrets-border: var(--token-color-palette-vault-secrets-100); + --token-color-vault-secrets-gradient-primary-start: var(--token-color-palette-vault-secrets-100); + --token-color-vault-secrets-gradient-primary-stop: var(--token-color-palette-vault-secrets-200); + --token-color-vault-secrets-gradient-faint-stop: var(--token-color-palette-vault-secrets-50); + --token-color-vault-brand: var(--token-color-palette-vault-brand); + --token-color-vault-foreground: var(--token-color-palette-vault-500); + --token-color-vault-surface: var(--token-color-palette-vault-50); + --token-color-vault-border: var(--token-color-palette-vault-100); + --token-color-vault-gradient-primary-start: var(--token-color-palette-vault-100); + --token-color-vault-gradient-primary-stop: var(--token-color-palette-vault-200); + --token-color-vault-gradient-faint-stop: var(--token-color-palette-vault-50); + --token-color-waypoint-brand: var(--token-color-palette-waypoint-brand); + --token-color-waypoint-foreground: var(--token-color-palette-waypoint-500); + --token-color-waypoint-surface: var(--token-color-palette-waypoint-50); + --token-color-waypoint-border: var(--token-color-palette-waypoint-100); + --token-color-waypoint-gradient-primary-start: var(--token-color-palette-waypoint-100); + --token-color-waypoint-gradient-primary-stop: var(--token-color-palette-waypoint-200); + --token-color-waypoint-gradient-faint-stop: var(--token-color-palette-waypoint-50); + --token-elevation-inset-box-shadow-01: inset var(--token-elevation-inset-shadow-01-x) var(--token-elevation-inset-shadow-01-y) var(--token-elevation-inset-shadow-01-blur) var(--token-elevation-inset-shadow-01-spread) var(--token-elevation-inset-shadow-01-color); + --token-elevation-inset-box-shadow-border: inset 0 0 0 var(--token-elevation-inset-border-width) var(--token-elevation-inset-border-color); + --token-elevation-low-box-shadow-01: var(--token-elevation-low-shadow-01-x) var(--token-elevation-low-shadow-01-y) var(--token-elevation-low-shadow-01-blur) var(--token-elevation-low-shadow-01-spread) var(--token-elevation-low-shadow-01-color); + --token-elevation-low-box-shadow-02: var(--token-elevation-low-shadow-02-x) var(--token-elevation-low-shadow-02-y) var(--token-elevation-low-shadow-02-blur) var(--token-elevation-low-shadow-02-spread) var(--token-elevation-low-shadow-02-color); + --token-elevation-low-box-shadow-border: 0 0 0 var(--token-elevation-low-border-width) var(--token-elevation-low-border-color); + --token-elevation-mid-box-shadow-01: var(--token-elevation-mid-shadow-01-x) var(--token-elevation-mid-shadow-01-y) var(--token-elevation-mid-shadow-01-blur) var(--token-elevation-mid-shadow-01-spread) var(--token-elevation-mid-shadow-01-color); + --token-elevation-mid-box-shadow-border: 0 0 0 var(--token-elevation-mid-border-width) var(--token-elevation-mid-border-color); + --token-elevation-high-box-shadow-01: var(--token-elevation-high-shadow-01-x) var(--token-elevation-high-shadow-01-y) var(--token-elevation-high-shadow-01-blur) var(--token-elevation-high-shadow-01-spread) var(--token-elevation-high-shadow-01-color); + --token-elevation-high-box-shadow-02: var(--token-elevation-high-shadow-02-x) var(--token-elevation-high-shadow-02-y) var(--token-elevation-high-shadow-02-blur) var(--token-elevation-high-shadow-02-spread) var(--token-elevation-high-shadow-02-color); + --token-elevation-higher-box-shadow-02: var(--token-elevation-higher-shadow-02-x) var(--token-elevation-higher-shadow-02-y) var(--token-elevation-higher-shadow-02-blur) var(--token-elevation-higher-shadow-02-spread) var(--token-elevation-higher-shadow-02-color); + --token-elevation-overlay-box-shadow-02: var(--token-elevation-overlay-shadow-02-x) var(--token-elevation-overlay-shadow-02-y) var(--token-elevation-overlay-shadow-02-blur) var(--token-elevation-overlay-shadow-02-spread) var(--token-elevation-overlay-shadow-02-color); + --token-elevation-mid-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-mid-box-shadow-02: var(--token-elevation-mid-shadow-02-x) var(--token-elevation-mid-shadow-02-y) var(--token-elevation-mid-shadow-02-blur) var(--token-elevation-mid-shadow-02-spread) var(--token-elevation-mid-shadow-02-color); + --token-elevation-high-box-shadow-border: 0 0 0 var(--token-elevation-high-border-width) var(--token-elevation-high-border-color); + --token-elevation-higher-box-shadow-01: var(--token-elevation-higher-shadow-01-x) var(--token-elevation-higher-shadow-01-y) var(--token-elevation-higher-shadow-01-blur) var(--token-elevation-higher-shadow-01-spread) var(--token-elevation-higher-shadow-01-color); + --token-elevation-higher-box-shadow-border: 0 0 0 var(--token-elevation-higher-border-width) var(--token-elevation-higher-border-color); + --token-elevation-overlay-box-shadow-01: var(--token-elevation-overlay-shadow-01-x) var(--token-elevation-overlay-shadow-01-y) var(--token-elevation-overlay-shadow-01-blur) var(--token-elevation-overlay-shadow-01-spread) var(--token-elevation-overlay-shadow-01-color); + --token-elevation-overlay-box-shadow-border: 0 0 0 var(--token-elevation-overlay-border-width) var(--token-elevation-overlay-border-color); + --token-elevation-base-box-shadow-border: 0 0 0 var(--token-elevation-base-border-width) var(--token-elevation-base-border-color); + --token-elevation-color-base: var(--token-color-palette-neutral-500); + --token-elevation-color-strong: var(--token-color-palette-neutral-600); + --token-focus-ring-action-external-box-shadow: 0 0 0 3px var(--token-color-focus-action-external); + --token-focus-ring-critical-external-box-shadow: 0 0 0 3px var(--token-color-focus-critical-external); + --token-form-error-color: var(--token-color-palette-red-300); + --token-form-control-base-border-color-default: var(--token-color-palette-neutral-400); + --token-form-control-base-border-color-hover: var(--token-color-palette-neutral-500); + --token-form-control-checked-surface-color-default: var(--token-color-palette-blue-200); + --token-form-control-checked-surface-color-hover: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-default: var(--token-color-palette-blue-300); + --token-form-control-checked-border-color-hover: var(--token-color-palette-blue-400); + --token-form-control-invalid-border-color-default: var(--token-color-palette-red-300); + --token-form-control-invalid-border-color-hover: var(--token-color-palette-red-400); + --token-form-select-background-image-position-right-x: var(--token-form-control-padding); + --token-form-text-input-background-image-position-x: var(--token-form-control-padding); + --token-form-toggle-thumb-size: var(--token-form-toggle-height); + --token-typography-font-stack-display: var(--token-typography-font-stack-sans-display-mac-os), var(--token-typography-font-stack-sans-display-windows), var(--token-typography-font-stack-sans-display-sans), var(--token-typography-font-stack-sans-display-emoji); + --token-typography-font-stack-text: var(--token-typography-font-stack-sans-text-mac-os), var(--token-typography-font-stack-sans-text-windows), var(--token-typography-font-stack-sans-display-sans), var(--token-typography-font-stack-sans-text-emoji); + --token-typography-font-stack-code: var(--token-typography-font-stack-monospace-code-mac-os), var(--token-typography-font-stack-monospace-code-windows), monospace; + --token-color-border-primary: var(--token-color-palette-alpha-200); + --token-color-border-faint: var(--token-color-palette-alpha-100); + --token-color-border-strong: var(--token-color-palette-alpha-300); + --token-elevation-inset-box-shadow: var(--token-elevation-inset-box-shadow-01); + --token-elevation-inset-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-inset-border-color: var(--token-elevation-color-base); + --token-elevation-low-box-shadow: var(--token-elevation-low-box-shadow-01), var(--token-elevation-low-box-shadow-02); + --token-elevation-low-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-low-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-low-border-color: var(--token-elevation-color-base); + --token-elevation-mid-box-shadow: var(--token-elevation-mid-box-shadow-01), var(--token-elevation-mid-box-shadow-02); + --token-elevation-mid-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-mid-border-color: var(--token-elevation-color-base); + --token-elevation-high-box-shadow: var(--token-elevation-high-box-shadow-01), var(--token-elevation-high-box-shadow-02); + --token-elevation-high-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-high-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-high-border-color: var(--token-elevation-color-base); + --token-elevation-higher-box-shadow: var(--token-elevation-higher-box-shadow-01), var(--token-elevation-higher-box-shadow-02); + --token-elevation-higher-shadow-01-color: var(--token-elevation-color-base); + --token-elevation-higher-shadow-02-color: var(--token-elevation-color-base); + --token-elevation-higher-border-color: var(--token-elevation-color-base); + --token-elevation-overlay-box-shadow: var(--token-elevation-overlay-box-shadow-01), var(--token-elevation-overlay-box-shadow-02); + --token-elevation-overlay-shadow-01-color: var(--token-elevation-color-strong); + --token-elevation-overlay-shadow-02-color: var(--token-elevation-color-strong); + --token-elevation-overlay-border-color: var(--token-elevation-color-strong); + --token-elevation-base-border-color: var(--token-elevation-color-base); + --token-surface-inset-box-shadow: var(--token-elevation-inset-box-shadow-border), var(--token-elevation-inset-box-shadow); + --token-surface-base-box-shadow: var(--token-elevation-base-box-shadow-border); + --token-surface-low-box-shadow: var(--token-elevation-low-box-shadow-border), var(--token-elevation-low-box-shadow); + --token-surface-mid-box-shadow: var(--token-elevation-mid-box-shadow-border), var(--token-elevation-mid-box-shadow); + --token-surface-high-box-shadow: var(--token-elevation-high-box-shadow-border), var(--token-elevation-high-box-shadow); + --token-surface-higher-box-shadow: var(--token-elevation-higher-box-shadow-border), var(--token-elevation-higher-box-shadow); + --token-surface-overlay-box-shadow: var(--token-elevation-overlay-box-shadow-border), var(--token-elevation-overlay-box-shadow); + --token-focus-ring-action-internal-box-shadow: inset 0 0 0 1px var(--token-color-focus-action-internal); + --token-focus-ring-critical-internal-box-shadow: inset 0 0 0 1px var(--token-color-focus-critical-internal); + --token-form-label-color: var(--token-color-foreground-strong); + --token-form-helper-text-color: var(--token-color-foreground-faint); + --token-form-indicator-optional-color: var(--token-color-foreground-faint); + --token-form-control-base-foreground-value-color: var(--token-color-foreground-strong); + --token-form-control-base-foreground-placeholder-color: var(--token-color-foreground-faint); + --token-form-control-base-surface-color-default: var(--token-color-surface-interactive); + --token-form-control-base-surface-color-hover: var(--token-color-surface-interactive-hover); + --token-form-control-checked-foreground-color: var(--token-color-foreground-high-contrast); + --token-form-control-readonly-foreground-color: var(--token-color-foreground-primary); + --token-form-control-readonly-surface-color: var(--token-color-surface-strong); + --token-form-control-disabled-foreground-color: var(--token-color-foreground-disabled); + --token-form-control-disabled-surface-color: var(--token-color-surface-interactive-disabled); + --token-form-toggle-base-surface-color-default: var(--token-color-surface-strong); /* the toggle has a different base surface color, compared to the other controls */ + --token-typography-display-500-font-family: var(--token-typography-font-stack-display); + --token-typography-display-400-font-family: var(--token-typography-font-stack-display); + --token-typography-display-300-font-family: var(--token-typography-font-stack-text); + --token-typography-display-200-font-family: var(--token-typography-font-stack-display); + --token-typography-display-100-font-family: var(--token-typography-font-stack-text); + --token-typography-body-300-font-family: var(--token-typography-font-stack-text); + --token-typography-body-200-font-family: var(--token-typography-font-stack-text); + --token-typography-body-100-font-family: var(--token-typography-font-stack-text); + --token-typography-code-100-font-family: var(--token-typography-font-stack-code); + --token-typography-code-200-font-family: var(--token-typography-font-stack-code); + --token-typography-code-300-font-family: var(--token-typography-font-stack-code); + --token-focus-ring-action-box-shadow: var(--token-focus-ring-action-internal-box-shadow), var(--token-focus-ring-action-external-box-shadow); + --token-focus-ring-critical-box-shadow: var(--token-focus-ring-critical-internal-box-shadow), var(--token-focus-ring-critical-external-box-shadow); + --token-form-legend-color: var(--token-form-label-color); + --token-form-control-readonly-border-color: var(--token-color-border-faint); + --token-form-control-disabled-border-color: var(--token-color-border-primary); +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/dark-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/dark-tokens.css new file mode 100644 index 00000000000..87b2e2a237c --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/dark-tokens.css @@ -0,0 +1,44 @@ +:root { + --token-color-palette-blue-500: #6bc1ff; + --token-color-palette-blue-400: #4ca1ff; + --token-color-palette-blue-300: #389aff; + --token-color-palette-blue-200: #2b89ff; + --token-color-palette-blue-100: #1c345f; + --token-color-palette-blue-50: #111f37; + --token-color-palette-purple-500: #dda5ff; + --token-color-palette-purple-400: #c070ff; + --token-color-palette-purple-300: #b457ff; + --token-color-palette-purple-200: #ab42ff; + --token-color-palette-purple-100: #42225b; + --token-color-palette-purple-50: #29123a; + --token-color-palette-green-500: #1ce375; + --token-color-palette-green-400: #00c157; + --token-color-palette-green-300: #00ae4e; + --token-color-palette-green-200: #009241; + --token-color-palette-green-100: #054220; + --token-color-palette-green-50: #042a15; + --token-color-palette-amber-500: #ffcc6a; + --token-color-palette-amber-400: #faad3a; + --token-color-palette-amber-300: #fda219; + --token-color-palette-amber-200: #e88c03; + --token-color-palette-amber-100: #542800; + --token-color-palette-amber-50: #2e1b06; + --token-color-palette-red-500: #ff8c7c; + --token-color-palette-red-400: #ff5841; + --token-color-palette-red-300: #f9381e; + --token-color-palette-red-200: #ef3016; + --token-color-palette-red-100: #62170d; + --token-color-palette-red-50: #370b06; + --token-color-palette-neutral-700: #efeff1; + --token-color-palette-neutral-600: #d5d7d8; + --token-color-palette-neutral-500: #b2b6bd; + --token-color-palette-neutral-400: #616875; + --token-color-palette-neutral-300: #434956; + --token-color-palette-neutral-200: #2b303c; + --token-color-palette-neutral-100: #1e222a; + --token-color-palette-neutral-50: #15181e; + --token-color-palette-neutral-0: #0d0e12; + --token-color-palette-alpha-300: #d5d7d866; + --token-color-palette-alpha-200: #b2b6bd33; + --token-color-palette-alpha-100: #b2b6bd1a; +} diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/light-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/light-tokens.css new file mode 100644 index 00000000000..f742f113858 --- /dev/null +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/light-tokens.css @@ -0,0 +1,44 @@ +:root { + --token-color-palette-blue-500: #1c345f; + --token-color-palette-blue-400: #0046d1; + --token-color-palette-blue-300: #0c56e9; + --token-color-palette-blue-200: #1060ff; + --token-color-palette-blue-100: #cce3fe; + --token-color-palette-blue-50: #f2f8ff; + --token-color-palette-purple-500: #42215b; + --token-color-palette-purple-400: #7b00db; + --token-color-palette-purple-300: #911ced; + --token-color-palette-purple-200: #a737ff; + --token-color-palette-purple-100: #ead2fe; + --token-color-palette-purple-50: #f9f2ff; + --token-color-palette-green-500: #054220; + --token-color-palette-green-400: #006619; + --token-color-palette-green-300: #00781e; + --token-color-palette-green-200: #008a22; + --token-color-palette-green-100: #cceeda; + --token-color-palette-green-50: #f2fbf6; + --token-color-palette-amber-500: #542800; + --token-color-palette-amber-400: #803d00; + --token-color-palette-amber-300: #9e4b00; + --token-color-palette-amber-200: #bb5a00; + --token-color-palette-amber-100: #fbeabf; + --token-color-palette-amber-50: #fff9e8; + --token-color-palette-red-500: #51130a; + --token-color-palette-red-400: #940004; + --token-color-palette-red-300: #c00005; + --token-color-palette-red-200: #e52228; + --token-color-palette-red-100: #fbd4d4; + --token-color-palette-red-50: #fff5f5; + --token-color-palette-neutral-700: #0c0c0e; + --token-color-palette-neutral-600: #3b3d45; + --token-color-palette-neutral-500: #656a76; + --token-color-palette-neutral-400: #8c909c; + --token-color-palette-neutral-300: #c2c5cb; + --token-color-palette-neutral-200: #dedfe3; + --token-color-palette-neutral-100: #f1f2f3; + --token-color-palette-neutral-50: #fafafa; + --token-color-palette-neutral-0: #ffffff; + --token-color-palette-alpha-300: #3b3d4566; + --token-color-palette-alpha-200: #656a7633; + --token-color-palette-alpha-100: #656a761a; +} diff --git a/packages/tokens/package.json b/packages/tokens/package.json index b8482488e33..d9a85f8a7fc 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -20,7 +20,8 @@ "scripts": { "typecheck": "yarn tsc --noEmit", "lint": "yarn eslint --quiet --ext .js,.ts", - "build": "tsx ./scripts/build" + "build": "tsx ./scripts/build", + "build:watch": "nodemon --watch './src/*' --ext 'json' --exec 'tsx ./scripts/build'" }, "devDependencies": { "@types/fs-extra": "^11.0.3", @@ -33,8 +34,9 @@ "eslint": "^8.57.0", "fs-extra": "^11.1.1", "lodash-es": "^4.17.21", + "nodemon": "^3.1.7", "path": "^0.12.7", - "prettier": "^3.3.2", + "prettier": "^3.4.2", "style-dictionary": "^4.2.0", "tinycolor2": "^1.6.0", "ts-node": "^10.9.2", diff --git a/packages/tokens/scripts/@types/Config.d.ts b/packages/tokens/scripts/@types/Config.d.ts index 859d42a181a..df7ff711b19 100644 --- a/packages/tokens/scripts/@types/Config.d.ts +++ b/packages/tokens/scripts/@types/Config.d.ts @@ -9,6 +9,7 @@ export type ConfigTarget = { source: Config['source'], transformGroup: Config['transformGroup'], platforms: string[], + destination: string, }; export type ConfigTargets = { diff --git a/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts new file mode 100644 index 00000000000..bad880b3cf5 --- /dev/null +++ b/packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts @@ -0,0 +1,69 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import fs from 'fs-extra'; +import prettier from 'prettier'; + +import type { Dictionary, PlatformConfig } from 'style-dictionary'; +import { fileHeader } from 'style-dictionary/utils'; + +const prettierConfig = { + parser: 'css', + tabWidth: 2, + printWidth: 1000, +} as const; + +export async function generateExtraThemingFiles(_dictionary: Dictionary, config: PlatformConfig ): Promise { + + const lightSource = await fs.readFile(`${config.buildPath}themed-tokens/with-root-selector/light-tokens.css`, 'utf8'); + const darkSource = await fs.readFile(`${config.buildPath}themed-tokens/with-root-selector/dark-tokens.css`, 'utf8'); + const commonSource = await fs.readFile(`${config.buildPath}themed-tokens/with-root-selector/common-tokens.css`, 'utf8'); + + const header = await fileHeader({}); + + const methods = ['prefers-color-scheme', 'css-selectors', 'unified']; + + for (const method of methods) { + + const outputFolder = `${config.buildPath}themed-tokens/`; + fs.ensureDir(outputFolder); + + let outputFilename; + let outputContent = `${header}\n\n`; + + if (method === 'prefers-color-scheme') { + outputFilename = 'with-prefers-color-scheme'; + outputContent += `${commonSource}\n\n`; + // this is the fallback to `light` mode (commented for now: consumers can always import the `themed-tokens/with-root-selector/light-tokens.css` as extra file if they want to) + outputContent += `${lightSource}\n\n`; + outputContent += `@media (prefers-color-scheme: light) { ${lightSource} }\n\n`; + outputContent += `@media (prefers-color-scheme: dark) { ${darkSource} }\n\n`; + } + if (method === 'css-selectors') { + outputFilename = 'with-css-selectors'; + outputContent += `${commonSource}\n\n`; + // this is the fallback to `light` mode (commented for now: consumers can always import the `themed-tokens/with-root-selector/light-tokens.css` as extra file if they want to) + outputContent += `${lightSource}\n\n`; + outputContent += `${lightSource.replace(/^:root/, '.hds-theme-light, [data-hds-theme="light"]')}\n\n`; + outputContent += `${darkSource.replace(/^:root/, '.hds-theme-dark, [data-hds-theme="dark"]')}\n\n`; + } + if (method === 'unified') { + outputFilename = 'unified'; + // TODO this is a temporary workaround to have nested theming working + // in reality what needs to be done is to have only the variables that alias "themed" variables to be declared in this way (to do later) + outputContent += `${commonSource.replace(/^:root/, ':root, .hds-theme-light, [data-hds-theme="light"], .hds-theme-dark, [data-hds-theme="dark"]')}\n\n`; + // this is the fallback to `light` mode (commented for now: consumers can always import the `themed-tokens/with-root-selector/light-tokens.css` as extra file if they want to) + outputContent += `${lightSource}\n\n`; + outputContent += `@media (prefers-color-scheme: light) { ${lightSource.replace(/^:root/, ':root.hds-theme-auto, :root[data-hds-theme="auto"]')} }\n\n`; + outputContent += `@media (prefers-color-scheme: dark) { ${darkSource.replace(/^:root/, ':root.hds-theme-auto, :root[data-hds-theme="auto"]')} }\n\n`; + outputContent += `${lightSource.replace(/^:root/, ':root, .hds-theme-light, [data-hds-theme="light"]')}\n\n`; + outputContent += `${darkSource.replace(/^:root/, '.hds-theme-dark, [data-hds-theme="dark"]')}\n\n`; + } + + const outputTokensCss = await prettier.format(outputContent, prettierConfig);; + await fs.writeFile(`${outputFolder}${outputFilename}.css`, outputTokensCss); + } + +} diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts index de6ae416dcd..374ca98469b 100644 --- a/packages/tokens/scripts/build.ts +++ b/packages/tokens/scripts/build.ts @@ -17,6 +17,7 @@ import { cloneDeep } from 'lodash-es'; import type { ConfigTargets } from './@types/Config.d.ts'; import { generateCssHelpers } from './build-parts/generateCssHelpers.ts'; +import { generateExtraThemingFiles } from './build-parts/generateExtraThemingFiles.ts'; // SCRIPT CONFIG @@ -34,7 +35,9 @@ const transformPxToRem: Transform['transform'] = (token, platform) => { } StyleDictionary.registerTransform({ - name: 'size/px', + // TODO! there is a bug in SD where registering a transform (more in general a "hook") with the same name as a default one doesn't work if another hook is registered before it (in this case, the 'preprocessor') + // TODO later when the bug is fixed, rename this transform to `size/px` + name: 'size/pixel', type: 'value', filter: function(token) { return token.type === 'size'; @@ -50,7 +53,7 @@ StyleDictionary.registerTransform({ name: 'font-size/rem', type: 'value', filter: function(token) { - return token?.attributes?.category === 'typography' && token.type === 'font-size'; + return token.type === 'font-size'; }, transform: transformPxToRem }); @@ -59,7 +62,7 @@ StyleDictionary.registerTransform({ name: 'font-size/px', type: 'value', filter: function(token) { - return token?.attributes?.category === 'typography' && token.type === 'font-size'; + return token.type === 'font-size'; }, transform: function (token) { const val = parseFloat(token.value); @@ -101,18 +104,18 @@ StyleDictionary.registerTransform({ StyleDictionary.registerTransformGroup({ name: 'products/web', - transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/px', 'color/css', 'color/with-alpha', 'time/sec'] + transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/pixel', 'color/css', 'color/with-alpha', 'time/sec'] }); StyleDictionary.registerTransformGroup({ name: 'products/email', // notice: for emails we need the font-size in `px` (not `rem`) - transforms: ['attribute/cti', 'name/kebab', 'font-size/px', 'size/px', 'color/css', 'color/with-alpha', 'time/sec'] + transforms: ['attribute/cti', 'name/kebab', 'font-size/px', 'size/pixel', 'color/css', 'color/with-alpha', 'time/sec'] }); StyleDictionary.registerTransformGroup({ name: 'marketing/web', - transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/px', 'color/css', 'color/with-alpha', 'time/sec'] + transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/pixel', 'color/css', 'color/with-alpha', 'time/sec'] }); StyleDictionary.registerFormat({ @@ -140,61 +143,159 @@ StyleDictionary.registerAction({ undo: () => {} }); +StyleDictionary.registerAction({ + name: 'generate-extra-theming-files', + do: generateExtraThemingFiles, + undo: () => {} +}); + // DYNAMIC CONFIG const targets: ConfigTargets = { + // THEMING + // TODO temporary hack, while we come up with a more solid approach based on the Style Dictionary APIs + 'products/theme[dark]': { + 'source': [ + `src/global/themed/dark/**/*.json`, + `src/global/shared/**/*.json`, + `src/products/shared/**/*.json` + ], + 'transformGroup': 'products/web', + 'platforms': ['web/css-variables-theme-dark'], + 'destination': 'products' + }, + 'products/theme[light]': { + 'source': [ + `src/global/themed/light/**/*.json`, + `src/global/shared/**/*.json`, + `src/products/shared/**/*.json` + ], + 'transformGroup': 'products/web', + 'platforms': ['web/css-variables-theme-light'], + 'destination': 'products' + }, + // NON-THEMED TARGETS 'products': { 'source': [ - `src/global/**/*.json`, + `src/global/themed/light/**/*.json`, + `src/global/shared/**/*.json`, `src/products/shared/**/*.json` ], 'transformGroup': 'products/web', - 'platforms': ['web/css-variables', 'docs/json'] + 'platforms': ['web/css-variables', 'docs/json'], + 'destination': 'products' }, 'devdot': { 'source': [ - `src/global/**/*.json`, + `src/global/themed/light/**/*.json`, + `src/global/shared/**/*.json`, `src/products/shared/**/*.json`, // just uncomment the line below to include overrides for "devdot" tokens `src/devdot/**/*.json` ], 'transformGroup': 'products/web', - 'platforms': ['web/css-variables'] + 'platforms': ['web/css-variables'], + 'destination': 'devdot' }, 'marketing': { 'source': [ - `src/global/**/*.json`, + `src/global/themed/light/**/*.json`, + `src/global/shared/**/*.json`, `src/products/shared/**/*.json`, ], 'transformGroup': 'marketing/web', - 'platforms': ['web/css-variables', 'json'] + 'platforms': ['web/css-variables', 'json'], + 'destination': 'marketing' }, // these tokens will be consumed by the email templating system in https://github.com/hashicorp/cloud-email 'cloud-email': { // we need only foundational tokens (colors, typography, etc) 'source': [ - `src/global/**/*.json`, + `src/global/themed/light/**/*.json`, + `src/global/shared/**/*.json`, `src/products/shared/color/**/*.json`, `src/products/shared/typography.json`, ], 'transformGroup': 'products/email', - 'platforms': ['email/sass-variables'] + 'platforms': ['email/sass-variables'], + 'destination': 'cloud-email' } }; function getStyleDictionaryConfig({ target }: { target: string }): Config { // @ts-ignore safe to ignore, since we control the `targets` object, and the `getStyleDictionaryConfig` invocations - const { source, transformGroup, platforms } = targets[target]; + const { source, transformGroup, platforms, destination } = targets[target]; // we need to explicitly initialize the `config` object this way to make TS happy - const config: Config = {}; + const config: Config = {log: { verbosity: 'verbose' }}; config.source = source; config.platforms = {}; + // EXTRA THEME-RELATED FILES + // TODO we hide all the complexity here, for the moment, in this super-scrappy implementation, until we have a more solid solution leveraging the proper Style Dictionary APIs + + if (platforms.includes('web/css-variables-theme-dark')) { + config.platforms['web/css-variables-theme-dark'] = { + transformGroup, + "buildPath": `dist/${destination}/css/`, + "prefix": "token", + "basePxFontSize": 16, + "files": [ + { + "destination": "themed-tokens/with-root-selector/dark-tokens.css", + "format": "css/variables", + "options": { + "showFileHeader": false + }, + "filter": function(token: DesignToken) { + return !token.private && token.theme === 'dark'; + }, + } + ], + } + } + if (platforms.includes('web/css-variables-theme-light')) { + config.platforms['web/css-variables-theme-light'] = { + transformGroup, + "buildPath": `dist/${destination}/css/`, + "prefix": "token", + "basePxFontSize": 16, + "files": [ + { + "destination": "themed-tokens/with-root-selector/light-tokens.css", + "format": "css/variables", + "options": { + "showFileHeader": false + }, + "filter": function(token: DesignToken) { + return !token.private && token.theme === 'light'; + }, + }, + { + "destination": "themed-tokens/with-root-selector/common-tokens.css", + "format": "css/variables", + "options": { + "showFileHeader": false, + // THIS IS IMPORTANT! (notice: it triggers a warning in the console log) + "outputReferences": true + }, + "filter": function(token: DesignToken) { + // TODO! use `outputReferencesFilter` above to decide when to output the reference and when not + // return !token.private && token.theme === undefined; + return token.theme === undefined; + }, + } + ], + "actions": ['generate-extra-theming-files'] + } + } + + // STANDARD (OLD, NON-THEMED) OUTPUTS + if (platforms.includes('web/css-variables')) { config.platforms['web/css-variables'] = { transformGroup, - "buildPath": `dist/${target}/css/`, + "buildPath": `dist/${destination}/css/`, "prefix": "token", "basePxFontSize": 16, "files": [ @@ -231,7 +332,7 @@ function getStyleDictionaryConfig({ target }: { target: string }): Config { if (platforms.includes("json")) { config.platforms["json"] = { transformGroup, - "buildPath": `dist/${target}/`, + "buildPath": `dist/${destination}/`, "prefix": "token", "basePxFontSize": 16, "files": [ @@ -249,7 +350,7 @@ function getStyleDictionaryConfig({ target }: { target: string }): Config { if (platforms.includes("email/sass-variables")) { config.platforms["email/sass-variables"] = { transformGroup, - "buildPath": `dist/${target}/`, + "buildPath": `dist/${destination}/`, "prefix": "token", "files": [ { diff --git a/packages/tokens/src/global/color/semantic-border.json b/packages/tokens/src/global/shared/color/semantic-border.json similarity index 100% rename from packages/tokens/src/global/color/semantic-border.json rename to packages/tokens/src/global/shared/color/semantic-border.json diff --git a/packages/tokens/src/global/color/semantic-focus.json b/packages/tokens/src/global/shared/color/semantic-focus.json similarity index 100% rename from packages/tokens/src/global/color/semantic-focus.json rename to packages/tokens/src/global/shared/color/semantic-focus.json diff --git a/packages/tokens/src/global/color/semantic-foreground.json b/packages/tokens/src/global/shared/color/semantic-foreground.json similarity index 100% rename from packages/tokens/src/global/color/semantic-foreground.json rename to packages/tokens/src/global/shared/color/semantic-foreground.json diff --git a/packages/tokens/src/global/color/semantic-page.json b/packages/tokens/src/global/shared/color/semantic-page.json similarity index 100% rename from packages/tokens/src/global/color/semantic-page.json rename to packages/tokens/src/global/shared/color/semantic-page.json diff --git a/packages/tokens/src/global/color/semantic-surface.json b/packages/tokens/src/global/shared/color/semantic-surface.json similarity index 100% rename from packages/tokens/src/global/color/semantic-surface.json rename to packages/tokens/src/global/shared/color/semantic-surface.json diff --git a/packages/tokens/src/global/elevation/elevation.json b/packages/tokens/src/global/shared/elevation/elevation.json similarity index 100% rename from packages/tokens/src/global/elevation/elevation.json rename to packages/tokens/src/global/shared/elevation/elevation.json diff --git a/packages/tokens/src/global/elevation/surface.json b/packages/tokens/src/global/shared/elevation/surface.json similarity index 100% rename from packages/tokens/src/global/elevation/surface.json rename to packages/tokens/src/global/shared/elevation/surface.json diff --git a/packages/tokens/src/global/elevation/values/base-level.json b/packages/tokens/src/global/shared/elevation/values/base-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/base-level.json rename to packages/tokens/src/global/shared/elevation/values/base-level.json diff --git a/packages/tokens/src/global/elevation/values/colors.json b/packages/tokens/src/global/shared/elevation/values/colors.json similarity index 100% rename from packages/tokens/src/global/elevation/values/colors.json rename to packages/tokens/src/global/shared/elevation/values/colors.json diff --git a/packages/tokens/src/global/elevation/values/high-level.json b/packages/tokens/src/global/shared/elevation/values/high-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/high-level.json rename to packages/tokens/src/global/shared/elevation/values/high-level.json diff --git a/packages/tokens/src/global/elevation/values/higher-level.json b/packages/tokens/src/global/shared/elevation/values/higher-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/higher-level.json rename to packages/tokens/src/global/shared/elevation/values/higher-level.json diff --git a/packages/tokens/src/global/elevation/values/inset-level.json b/packages/tokens/src/global/shared/elevation/values/inset-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/inset-level.json rename to packages/tokens/src/global/shared/elevation/values/inset-level.json diff --git a/packages/tokens/src/global/elevation/values/low-level.json b/packages/tokens/src/global/shared/elevation/values/low-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/low-level.json rename to packages/tokens/src/global/shared/elevation/values/low-level.json diff --git a/packages/tokens/src/global/elevation/values/mid-level.json b/packages/tokens/src/global/shared/elevation/values/mid-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/mid-level.json rename to packages/tokens/src/global/shared/elevation/values/mid-level.json diff --git a/packages/tokens/src/global/elevation/values/overlay-level.json b/packages/tokens/src/global/shared/elevation/values/overlay-level.json similarity index 100% rename from packages/tokens/src/global/elevation/values/overlay-level.json rename to packages/tokens/src/global/shared/elevation/values/overlay-level.json diff --git a/packages/tokens/src/global/focus-ring.json b/packages/tokens/src/global/shared/focus-ring.json similarity index 100% rename from packages/tokens/src/global/focus-ring.json rename to packages/tokens/src/global/shared/focus-ring.json diff --git a/packages/tokens/src/global/themed/dark/color/palette-accents.json b/packages/tokens/src/global/themed/dark/color/palette-accents.json new file mode 100644 index 00000000000..03a080204f3 --- /dev/null +++ b/packages/tokens/src/global/themed/dark/color/palette-accents.json @@ -0,0 +1,186 @@ +{ + "color": { + "palette": { + "blue-500": { + "value": "#6bc1ff", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "blue-400": { + "value": "#4ca1ff", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "blue-300": { + "value": "#389aff", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "blue-200": { + "value": "#2b89ff", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "blue-100": { + "value": "#1c345f", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "blue-50": { + "value": "#111f37", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "purple-500": { + "value": "#dda5ff", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "purple-400": { + "value": "#c070ff", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "purple-300": { + "value": "#b457ff", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "purple-200": { + "value": "#ab42ff", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "purple-100": { + "value": "#42225b", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "purple-50": { + "value": "#29123a", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "green-500": { + "value": "#1ce375", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "green-400": { + "value": "#00c157", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "green-300": { + "value": "#00ae4e", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "green-200": { + "value": "#009241", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "green-100": { + "value": "#054220", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "green-50": { + "value": "#042a15", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "amber-500": { + "value": "#ffcc6a", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "amber-400": { + "value": "#faad3a", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "amber-300": { + "value": "#fda219", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "amber-200": { + "value": "#e88c03", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "amber-100": { + "value": "#542800", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "amber-50": { + "value": "#2e1b06", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "red-500": { + "value": "#ff8c7c", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "red-400": { + "value": "#ff5841", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "red-300": { + "value": "#f9381e", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "red-200": { + "value": "#ef3016", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "red-100": { + "value": "#62170d", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "red-50": { + "value": "#370b06", + "type": "color", + "group": "palette", + "theme": "dark" + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/global/themed/dark/color/palette-neutrals.json b/packages/tokens/src/global/themed/dark/color/palette-neutrals.json new file mode 100644 index 00000000000..6b2f67c3422 --- /dev/null +++ b/packages/tokens/src/global/themed/dark/color/palette-neutrals.json @@ -0,0 +1,81 @@ +{ + "color": { + "palette": { + "neutral-700": { + "value": "#efeff1", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "neutral-600": { + "value": "#d5d7d8", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "neutral-500": { + "value": "#b2b6bd", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "neutral-400": { + "value": "#616875", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "neutral-300": { + "value": "#434956", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "neutral-200": { + "value": "#2b303c", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "neutral-100": { + "value": "#1e222a", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "neutral-50": { + "value": "#15181e", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "neutral-0": { + "value": "#0d0e12", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "alpha-300": { + "value": "{color.palette.neutral-600.value}", + "alpha": "0.4", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "alpha-200": { + "value": "{color.palette.neutral-500.value}", + "alpha": "0.2", + "type": "color", + "group": "palette", + "theme": "dark" + }, + "alpha-100": { + "value": "{color.palette.neutral-500.value}", + "alpha": "0.1", + "type": "color", + "group": "palette", + "theme": "dark" + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/global/themed/dark/color/palette-products.json b/packages/tokens/src/global/themed/dark/color/palette-products.json new file mode 100644 index 00000000000..caebad125c1 --- /dev/null +++ b/packages/tokens/src/global/themed/dark/color/palette-products.json @@ -0,0 +1,580 @@ +{ + "color": { + "palette": { + "hashicorp-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "boundary-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "boundary-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "boundary-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "boundary-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "boundary-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "boundary-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "boundary-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "boundary-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "consul-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "consul-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "consul-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "consul-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "consul-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "consul-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "consul-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "consul-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "hcp-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "nomad-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "nomad-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "nomad-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "nomad-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "nomad-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "nomad-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "nomad-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "nomad-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "packer-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "packer-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "packer-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "packer-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "packer-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "packer-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "packer-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "packer-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "terraform-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "terraform-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "terraform-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "terraform-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "terraform-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "terraform-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "terraform-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "terraform-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vagrant-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vagrant-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vagrant-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vagrant-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vagrant-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vagrant-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vagrant-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vagrant-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-secrets-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-secrets-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-secrets-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-secrets-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-secrets-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-secrets-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-secrets-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-secrets-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-radar-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-radar-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-radar-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-radar-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-radar-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-radar-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-radar-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "vault-radar-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "waypoint-brand": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "waypoint-600": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "waypoint-500": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "waypoint-400": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "waypoint-300": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "waypoint-200": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "waypoint-100": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + }, + "waypoint-50": { + "value": "#FF0000", + "type": "color", + "group": "palette", + "theme": "dark", + "private": "true" + } + } + } +} \ No newline at end of file diff --git a/packages/tokens/src/global/color/palette-accents.json b/packages/tokens/src/global/themed/light/color/palette-accents.json similarity index 61% rename from packages/tokens/src/global/color/palette-accents.json rename to packages/tokens/src/global/themed/light/color/palette-accents.json index 3211aee1c77..2cbc74d7a1f 100644 --- a/packages/tokens/src/global/color/palette-accents.json +++ b/packages/tokens/src/global/themed/light/color/palette-accents.json @@ -4,152 +4,182 @@ "blue-500": { "value": "#1c345f", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "blue-400": { "value": "#0046d1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "blue-300": { "value": "#0c56e9", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "blue-200": { "value": "#1060ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "blue-100": { "value": "#cce3fe", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "blue-50": { "value": "#f2f8ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "purple-500": { "value": "#42215b", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "purple-400": { "value": "#7b00db", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "purple-300": { "value": "#911ced", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "purple-200": { "value": "#a737ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "purple-100": { "value": "#ead2fe", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "purple-50": { "value": "#f9f2ff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "green-500": { "value": "#054220", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "green-400": { "value": "#006619", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "green-300": { "value": "#00781e", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "green-200": { "value": "#008a22", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "green-100": { "value": "#cceeda", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "green-50": { "value": "#f2fbf6", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "amber-500": { "value": "#542800", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "amber-400": { "value": "#803d00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "amber-300": { "value": "#9e4b00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "amber-200": { "value": "#bb5a00", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "amber-100": { "value": "#fbeabf", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "amber-50": { "value": "#fff9e8", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "red-500": { "value": "#51130a", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "red-400": { "value": "#940004", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "red-300": { "value": "#c00005", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "red-200": { "value": "#e52228", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "red-100": { "value": "#fbd4d4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "red-50": { "value": "#fff5f5", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" } } } diff --git a/packages/tokens/src/global/color/palette-neutrals.json b/packages/tokens/src/global/themed/light/color/palette-neutrals.json similarity index 65% rename from packages/tokens/src/global/color/palette-neutrals.json rename to packages/tokens/src/global/themed/light/color/palette-neutrals.json index cf1d6902317..abc212e818b 100644 --- a/packages/tokens/src/global/color/palette-neutrals.json +++ b/packages/tokens/src/global/themed/light/color/palette-neutrals.json @@ -4,65 +4,77 @@ "neutral-700": { "value": "#0c0c0e", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-600": { "value": "#3b3d45", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-500": { "value": "#656a76", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-400": { "value": "#8c909c", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-300": { "value": "#c2c5cb", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-200": { "value": "#dedfe3", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-100": { "value": "#f1f2f3", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-50": { "value": "#fafafa", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "neutral-0": { "value": "#ffffff", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "alpha-300": { "value": "{color.palette.neutral-600.value}", "alpha": "0.4", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "alpha-200": { "value": "{color.palette.neutral-500.value}", "alpha": "0.2", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" }, "alpha-100": { "value": "{color.palette.neutral-500.value}", "alpha": "0.1", "type": "color", - "group": "palette" + "group": "palette", + "theme": "light" } } } diff --git a/packages/tokens/src/global/color/palette-products.json b/packages/tokens/src/global/themed/light/color/palette-products.json similarity index 84% rename from packages/tokens/src/global/color/palette-products.json rename to packages/tokens/src/global/themed/light/color/palette-products.json index 62979e05eae..21445270942 100644 --- a/packages/tokens/src/global/color/palette-products.json +++ b/packages/tokens/src/global/themed/light/color/palette-products.json @@ -5,492 +5,574 @@ "value": "#000000", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-brand": { "value": "#f24c53", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-600": { "value": "#b21e23", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-500": { "value": "#cf2d32", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-400": { "value": "#db363b", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-300": { "value": "#f97076", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-200": { "value": "#ff9da2", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-100": { "value": "#fbd7d8", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "boundary-50": { "value": "#ffecec", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-brand": { "value": "#e03875", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-600": { "value": "#b10743", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-500": { "value": "#d01c5b", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-400": { "value": "#da306e", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-300": { "value": "#ff99be", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-200": { "value": "#ffbbd4", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-100": { "value": "#ffcede", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "consul-50": { "value": "#ffe9f1", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "hcp-brand": { "value": "#000000", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-brand": { "value": "#06d092", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-600": { "value": "#007756", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-500": { "value": "#008661", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-400": { "value": "#22a870", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-300": { "value": "#4cd099", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-200": { "value": "#60dea9", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-100": { "value": "#bff3dd", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "nomad-50": { "value": "#d3fdeb", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-brand": { "value": "#02a8ef", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-600": { "value": "#0071a1", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-500": { "value": "#007eb4", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-400": { "value": "#1d9ed7", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-300": { "value": "#3cc1fb", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-200": { "value": "#63d0ff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-100": { "value": "#b4e4ff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "packer-50": { "value": "#d4f2ff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-brand": { "value": "#7b42bc", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-600": { "value": "#5f219e", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-500": { "value": "#773cb4", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-400": { "value": "#844fba", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-300": { "value": "#bb8deb", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-200": { "value": "#d8b7fc", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-100": { "value": "#ebdbfc", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "terraform-50": { "value": "#f4ecff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-brand": { "value": "#1868f2", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-600": { "value": "#064abe", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-500": { "value": "#1c61d8", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-400": { "value": "#2e71e5", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-300": { "value": "#639cff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-200": { "value": "#7dadff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-100": { "value": "#c7dbfc", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vagrant-50": { "value": "#d6ebff", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-brand": { "value": "#ffcf25", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-600": { "value": "#8b6400", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-500": { "value": "#9a6f00", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-400": { "value": "#bb8e1a", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-300": { "value": "#f5d712", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-200": { "value": "#ffe543", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-100": { "value": "#feec7b", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-50": { "value": "#fff9cf", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-brand": { "value": "#ffcf25", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-600": { "value": "#8b6400", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-500": { "value": "#9a6f00", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-400": { "value": "#bb8e1a", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-300": { "value": "#f5d712", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-200": { "value": "#ffe543", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-100": { "value": "#feec7b", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-secrets-50": { "value": "#fff9cf", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-brand": { "value": "#ffcf25", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-600": { "value": "#8b6400", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-500": { "value": "#9a6f00", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-400": { "value": "#bb8e1a", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-300": { "value": "#f5d712", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-200": { "value": "#ffe543", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-100": { "value": "#feec7b", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "vault-radar-50": { "value": "#fff9cf", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-brand": { "value": "#14c6cb", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-600": { "value": "#007487", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-500": { "value": "#008196", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-400": { "value": "#22a4ac", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-300": { "value": "#4fc9d1", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-200": { "value": "#62d4dc", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-100": { "value": "#cbf1f3", "type": "color", "group": "palette", + "theme": "light", "private": "true" }, "waypoint-50": { "value": "#e0fcff", "type": "color", "group": "palette", + "theme": "light", "private": "true" } } diff --git a/showcase/app/components/mock/app/index.gts b/showcase/app/components/mock/app/index.gts index bf583de6cdd..5beeb3814e6 100644 --- a/showcase/app/components/mock/app/index.gts +++ b/showcase/app/components/mock/app/index.gts @@ -9,10 +9,16 @@ import MockAppHeaderAppHeader from './header/app-header'; import MockAppSidebarSideNav from './sidebar/side-nav'; import MockAppMainPageHeader from './main/page-header'; import MockAppMainGenericTextContent from './main/generic-text-content'; +import MockAppMainFormComplex from './main/form-complex'; +import MockAppMainTableComplex from './main/table-complex'; +import MockAppMainPagination from './main/pagination'; import MockAppFooterAppFooter from './footer/app-footer'; // HDS components -import { HdsAppFrame } from '@hashicorp/design-system-components/components'; +import { + HdsAlert, + HdsAppFrame, +} from '@hashicorp/design-system-components/components'; // types import type { ComponentLike } from '@glint/template'; @@ -21,10 +27,14 @@ import type { MockAppHeaderAppHeaderSignature } from './header/app-header'; import type { MockAppSidebarSideNavSignature } from './sidebar/side-nav'; import type { MockAppMainPageHeaderSignature } from './main/page-header'; import type { MockAppMainGenericTextContentSignature } from './main/generic-text-content'; +import type { MockAppMainFormComplexSignature } from './main/form-complex'; +import type { MockAppMainTableComplexSignature } from './main/table-complex'; +import type { MockAppMainPaginationSignature } from './main/pagination'; import type { MockAppFooterAppFooterSignature } from './footer/app-footer'; export interface MockAppSignature { Args: { + hasPageAlert?: boolean; hasHeader?: HdsAppFrameSignature['Args']['hasHeader']; hasSidebar?: HdsAppFrameSignature['Args']['hasSidebar']; hasFooter?: HdsAppFrameSignature['Args']['hasFooter']; @@ -44,6 +54,9 @@ export interface MockAppSignature { { PageHeader?: ComponentLike; GenericTextContent?: ComponentLike; + MockAppMainFormComplex?: ComponentLike; + MockAppMainTableComplex?: ComponentLike; + MockAppMainPagination?: ComponentLike; }, ]; footer?: [ @@ -80,11 +93,20 @@ export default class MockApp extends Component { {{/if}} + {{#if @hasPageAlert}} + + Lorem ipsum + Lorem ipsum dolor sit amet. + + {{/if}}
{{yield (hash PageHeader=MockAppMainPageHeader GenericTextContent=MockAppMainGenericTextContent + FormComplex=MockAppMainFormComplex + TableComplex=MockAppMainTableComplex + Pagination=MockAppMainPagination ) to="main" }} diff --git a/showcase/app/components/mock/app/main/form-complex.gts b/showcase/app/components/mock/app/main/form-complex.gts new file mode 100644 index 00000000000..d9198fc8094 --- /dev/null +++ b/showcase/app/components/mock/app/main/form-complex.gts @@ -0,0 +1,357 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import style from 'ember-style-modifier/modifiers/style'; + +// HDS components +import { + HdsButton, + HdsButtonSet, + HdsFormCheckboxGroup, + HdsFormFileInputField, + HdsFormMaskedInputField, + HdsFormRadioGroup, + HdsFormRadioCardGroup, + HdsFormSelectField, + HdsFormSuperSelectSingleField, + HdsFormSuperSelectMultipleField, + HdsFormTextInputField, + HdsFormTextareaField, + HdsFormToggleField, + HdsLinkInline, + HdsSeparator, + HdsTextBody, + HdsTextDisplay, +} from '@hashicorp/design-system-components/components'; + +const RADIOCARDS = [ + { + value: '1', + label: 'Radio card label 1', + badge: 'Badge', + checked: true, + description: 'Radio card description 1', + generic: 'Radio card custom content 1', + }, + { + value: '2', + label: 'Radio card label 2', + badge: 'Badge', + description: 'Radio card description 2', + generic: 'Radio card custom content 2', + }, + { + value: '3', + label: 'Radio card label 3', + badge: 'Badge', + description: 'Radio card description 3', + generic: 'Radio card custom content 3', + }, +]; + +const SUPERSELECT1_OPTIONS = [ + { + size: 'Extra Small', + description: '2 vCPU | 1 GiB RAM', + price: '$0.02', + }, + { + size: 'Small', + description: '2 vCPU | 2 GiB RAM', + price: '$0.04', + disabled: true, + }, + { + size: 'Medium', + description: '4 vCPU | 4 GiB RAM', + price: '$0.08', + disabled: true, + }, + { size: 'Large', description: '8 vCPU | 8 GiB RAM', price: '$0.16' }, + { + size: 'Extra Large', + description: '16 vCPU | 16 GiB RAM', + price: '$0.32', + }, +]; +const SELECTED_SUPERSELECT1_OPTION = SUPERSELECT1_OPTIONS[1]; + +const SUPERSELECT2_OPTIONS = ['Option 1', 'Option 2', 'Option 3']; +const SELECTED_SUPERSELECT2_OPTIONS = [ + SUPERSELECT2_OPTIONS[0], + SUPERSELECT2_OPTIONS[1], +]; + +const noop = () => {}; + +export interface MockAppMainFormComplexSignature { + Args: { + showErrors?: boolean; + showIntro?: boolean; + showCheckbox?: boolean; + showFileInput?: boolean; + showMaskedInput?: boolean; + showRadio?: boolean; + showRadioCard?: boolean; + showSelect?: boolean; + showSuperSelect?: boolean; + showTextarea?: boolean; + showTextInput?: boolean; + showToggle?: boolean; + showButtons?: boolean; + showErrors?: boolean; + }; + Element: HTMLDivElement; +} + +export default class MockAppMainFormComplex extends Component { + _showIntro; + _showCheckbox; + _showFileInput; + _showMaskedInput; + _showRadio; + _showRadioCard; + _showSelect; + _showSuperSelect; + _showTextarea; + _showTextInput; + _showToggle; + _showButtons; + _showErrors; + + constructor(owner: unknown, args: MockAppMainFormComplexSignature['Args']) { + super(owner, args); + this._showIntro = this.args.showIntro ?? this.args.showAll ?? false; + this._showCheckbox = this.args.showCheckbox ?? this.args.showAll ?? false; + this._showFileInput = this.args.showFileInput ?? this.args.showAll ?? false; + this._showMaskedInput = + this.args.showMaskedInput ?? this.args.showAll ?? false; + this._showRadio = this.args.showRadio ?? this.args.showAll ?? false; + this._showRadioCard = this.args.showRadioCard ?? this.args.showAll ?? false; + this._showSelect = this.args.showSelect ?? this.args.showAll ?? false; + this._showSuperSelect = + this.args.showSuperSelect ?? this.args.showAll ?? false; + this._showTextarea = this.args.showTextarea ?? this.args.showAll ?? false; + this._showToggle = this.args.showToggle ?? this.args.showAll ?? false; + this._showErrors = this.args.showErrors ?? this.args.showAll ?? false; + // we want at least something to be visible by default + this._showTextInput = this.args.showTextInput ?? this.args.showAll ?? true; + this._showButtons = this.args._showButtons ?? this.args.showAll ?? true; + } + + +} diff --git a/showcase/app/components/mock/app/main/generic-text-content.gts b/showcase/app/components/mock/app/main/generic-text-content.gts index 9c15bb89b5c..5a24e765690 100644 --- a/showcase/app/components/mock/app/main/generic-text-content.gts +++ b/showcase/app/components/mock/app/main/generic-text-content.gts @@ -6,14 +6,22 @@ // HDS components import { HdsLinkInline, + HdsTextDisplay, HdsTextBody, } from '@hashicorp/design-system-components/components'; // eslint-disable-next-line @typescript-eslint/no-empty-object-type -export interface MockAppMainGenericTextContentSignature {} +export interface MockAppMainGenericTextContentSignature { + Args: { + showHeadings?: boolean; + }; +}