/** * Design System - Component Tokens * Auto-generated - Do not edit directly * * Contains: Patterns + Component layers * Requires: build/core/variables.css loaded first */ /* ============================================ PATTERNS LAYER Component patterns (shared base tokens) ============================================ */ :root { --pattern-button-base-tokens-padding-x: var(--semantic-spacing-inset-md); --pattern-button-base-tokens-padding-y: var(--semantic-spacing-inset-xs); --pattern-button-base-tokens-border-radius: var(--primitive-radius-full); --pattern-button-base-tokens-border-width: var(--primitive-border-width-regular); --pattern-button-base-tokens-icon-size: var(--primitive-icon-size-md); --pattern-button-base-tokens-icon-stroke: var(--primitive-icon-stroke-regular); --pattern-button-base-tokens-gap: var(--semantic-spacing-inline-sm); --pattern-button-base-tokens-min-height: 37px; --pattern-button-base-tokens-font-family: var(--semantic-typography-label-md-font-family); --pattern-button-base-tokens-font-size: var(--semantic-typography-label-md-font-size); --pattern-button-base-tokens-font-weight: var(--semantic-typography-label-md-font-weight); --pattern-button-base-tokens-line-height: var(--semantic-typography-label-md-line-height); --pattern-button-base-tokens-letter-spacing: var(--semantic-typography-label-md-letter-spacing); --pattern-button-base-tokens-text-transform: var(--semantic-typography-label-md-text-transform); --pattern-button-base-tokens-transition: var(--semantic-transition-color); --pattern-button-properties-display: inline-flex; --pattern-button-properties-align-items: center; --pattern-button-properties-justify-content: center; --pattern-button-properties-cursor: pointer; --pattern-button-properties-border-style: solid; --pattern-button-properties-user-select: none; --pattern-button-properties-white-space: nowrap; --pattern-button-properties-overflow: hidden; --pattern-button-properties-text-overflow: ellipsis; --pattern-button-properties-min-width: none; --pattern-button-properties-max-width: none; --pattern-button-layout-modes-0: label-only; --pattern-button-layout-modes-1: icon-only; --pattern-button-layout-modes-2: icon-left; --pattern-button-layout-modes-3: icon-right; --pattern-button-layout-mode-definitions-icon-only-justify-content: center; --pattern-button-layout-mode-definitions-icon-left-icon-position: before; --pattern-button-layout-mode-definitions-icon-right-icon-position: after; --pattern-button-variants-0: primary; --pattern-button-variants-1: secondary; --pattern-button-variants-2: ghost; --pattern-button-variants-3: destructive; --pattern-button-sizes-0: sm; --pattern-button-sizes-1: md; --pattern-button-sizes-2: lg; --pattern-badge-base-tokens-padding-x: var(--semantic-spacing-inset-sm); --pattern-badge-base-tokens-padding-y: var(--primitive-spacing-zero); --pattern-badge-base-tokens-border-radius: var(--primitive-radius-full); --pattern-badge-base-tokens-border-width: var(--primitive-border-width-regular); --pattern-badge-base-tokens-icon-size: var(--primitive-icon-size-xs); --pattern-badge-base-tokens-icon-stroke: var(--primitive-icon-stroke-medium); --pattern-badge-base-tokens-gap: var(--semantic-spacing-inline-sm); --pattern-badge-base-tokens-min-height: 24px; --pattern-badge-base-tokens-_custom-height: 24px; --pattern-badge-base-tokens-font-family: var(--semantic-typography-code-inline-font-family); --pattern-badge-base-tokens-font-size: var(--semantic-typography-code-inline-font-size); --pattern-badge-base-tokens-font-weight: var(--semantic-typography-code-inline-font-weight); --pattern-badge-base-tokens-line-height: var(--semantic-typography-code-inline-line-height); --pattern-badge-base-tokens-letter-spacing: var(--semantic-typography-code-inline-letter-spacing); --pattern-badge-base-tokens-text-transform: var(--semantic-typography-code-inline-text-transform); --pattern-badge-properties-display: inline-flex; --pattern-badge-properties-align-items: center; --pattern-badge-properties-user-select: none; --pattern-badge-properties-white-space: nowrap; --pattern-badge-properties-min-width: none; --pattern-badge-properties-max-width: none; --pattern-badge-properties-overflow: hidden; --pattern-badge-properties-border-style: solid; --pattern-badge-properties-text-overflow: ellipsis; --pattern-badge-properties-justify-content: center; --pattern-badge-layout-modes-0: label-only; --pattern-badge-layout-modes-1: icon-left; --pattern-badge-layout-modes-2: icon-right; --pattern-badge-layout-modes-3: icon-only; --pattern-badge-layout-mode-definitions-icon-only-justify-content: center; --pattern-badge-layout-mode-definitions-icon-left-icon-position: before; --pattern-badge-layout-mode-definitions-icon-right-icon-position: after; --pattern-badge-variants-0: neutral; --pattern-badge-variants-1: primary; --pattern-badge-variants-2: secondary; --pattern-badge-variants-3: tertiary; --pattern-badge-variants-4: success; --pattern-badge-variants-5: warning; --pattern-badge-variants-6: error; --pattern-badge-variants-7: info; --pattern-badge-sizes-0: sm; --pattern-badge-sizes-1: md; --pattern-text-input-base-tokens-padding-x: var(--semantic-spacing-inset-md); --pattern-text-input-base-tokens-padding-y: var(--primitive-spacing-zero); --pattern-text-input-base-tokens-border-radius: var(--primitive-radius-xl); --pattern-text-input-base-tokens-border-width: var(--primitive-border-width-regular); --pattern-text-input-base-tokens-min-height: 32px; --pattern-text-input-base-tokens-_custom-height: 32px; --pattern-text-input-base-tokens-font-family: var(--semantic-typography-body-sm-font-family); --pattern-text-input-base-tokens-font-size: var(--semantic-typography-body-sm-font-size); --pattern-text-input-base-tokens-font-weight: var(--semantic-typography-body-sm-font-weight); --pattern-text-input-base-tokens-line-height: var(--semantic-typography-body-sm-line-height); --pattern-text-input-base-tokens-letter-spacing: var(--semantic-typography-body-sm-letter-spacing); --pattern-text-input-base-tokens-text-transform: var(--semantic-typography-body-sm-text-transform); --pattern-text-input-base-tokens-transition: var(--semantic-transition-fast); --pattern-text-input-base-tokens-icon-size: var(--primitive-icon-size-sm); --pattern-text-input-base-tokens-icon-stroke: var(--primitive-icon-stroke-regular); --pattern-text-input-base-tokens-gap: var(--semantic-spacing-inline-sm); --pattern-text-input-properties-display: flex; --pattern-text-input-properties-align-items: center; --pattern-text-input-properties-width: 100%; --pattern-text-input-properties-border-style: solid; --pattern-text-input-properties-outline: none; --pattern-text-input-properties-min-width: none; --pattern-text-input-properties-max-width: 422px; --pattern-text-input-layout-modes-0: label-only; --pattern-text-input-layout-modes-1: icon-left; --pattern-text-input-layout-modes-2: icon-right; --pattern-text-input-layout-mode-definitions-icon-left-icon-position: before; --pattern-text-input-layout-mode-definitions-icon-left-justify-content: flex-start; --pattern-text-input-layout-mode-definitions-icon-right-icon-position: after; --pattern-text-input-layout-mode-definitions-icon-right-justify-content: space-between; --pattern-text-input-layout-mode-definitions-label-only-justify-content: flex-start; --pattern-text-input-sizes-0: sm; --pattern-text-input-sizes-1: md; } /* ============================================ COMPONENT LAYER Component tokens referencing semantic layer Theme-agnostic - semantic layer handles theming ============================================ */ :root { --component-button-ghost-background: transparent; --component-button-ghost-background-hover: var(--semantic-color-surface-neutral-subtle); --component-button-ghost-background-active: var(--semantic-color-surface-neutral-bold); --component-button-ghost-background-disabled: var(--semantic-color-interactive-primary-disabled); --component-button-ghost-text-color: var(--semantic-color-text-neutral-default); --component-button-ghost-text-color-hover: var(--semantic-color-text-neutral-bold); --component-button-ghost-text-color-active: var(--semantic-color-text-neutral-contrast); --component-button-ghost-text-color-disabled: var(--semantic-color-interactive-primary-text-disabled); --component-button-ghost-border-color: transparent; --component-button-ghost-border-color-hover: transparent; --component-button-ghost-border-color-active: transparent; --component-button-ghost-border-color-disabled: transparent; --component-button-ghost-background-opacity: var(--primitive-opacity-alpha-100); --component-button-ghost-background-hover-opacity: var(--primitive-opacity-alpha-100); --component-button-ghost-background-active-opacity: var(--primitive-opacity-alpha-100); --component-button-ghost-background-disabled-opacity: var(--primitive-opacity-alpha-100); --component-button-primary-background: var(--semantic-color-surface-neutral-subtle); --component-button-primary-background-hover: var(--semantic-color-surface-neutral-subtle); --component-button-primary-background-active: var(--semantic-color-surface-neutral-bold); --component-button-primary-background-disabled: var(--semantic-color-interactive-primary-disabled); --component-button-primary-text-color: var(--semantic-color-text-neutral-bold); --component-button-primary-text-color-hover: var(--semantic-color-text-neutral-bold); --component-button-primary-text-color-active: var(--semantic-color-text-neutral-contrast); --component-button-primary-text-color-disabled: var(--semantic-color-interactive-primary-text-disabled); --component-button-primary-border-color: transparent; --component-button-primary-border-color-hover: var(--semantic-color-border-neutral-bold); --component-button-primary-border-color-active: transparent; --component-button-primary-border-color-disabled: transparent; --component-button-primary-background-opacity: var(--primitive-opacity-alpha-100); --component-button-primary-background-hover-opacity: var(--primitive-opacity-alpha-100); --component-button-primary-background-active-opacity: var(--primitive-opacity-alpha-100); --component-button-primary-background-disabled-opacity: var(--primitive-opacity-alpha-100); --component-button-secondary-background: var(--semantic-color-surface-neutral-bold); --component-button-secondary-background-hover: var(--semantic-color-surface-neutral-bold); --component-button-secondary-background-active: var(--semantic-color-surface-neutral-bold); --component-button-secondary-background-disabled: var(--semantic-color-interactive-primary-disabled); --component-button-secondary-text-color: var(--semantic-color-text-neutral-contrast); --component-button-secondary-text-color-hover: var(--semantic-color-text-neutral-contrast); --component-button-secondary-text-color-active: var(--semantic-color-text-neutral-contrast); --component-button-secondary-text-color-disabled: var(--semantic-color-interactive-primary-text-disabled); --component-button-secondary-border-color: transparent; --component-button-secondary-border-color-hover: transparent; --component-button-secondary-border-color-active: transparent; --component-button-secondary-border-color-disabled: transparent; --component-button-secondary-background-opacity: var(--primitive-opacity-alpha-100); --component-button-secondary-background-hover-opacity: var(--primitive-opacity-alpha-70); --component-button-secondary-background-active-opacity: var(--primitive-opacity-alpha-100); --component-button-secondary-background-disabled-opacity: var(--primitive-opacity-alpha-100); --component-button-destructive-background: var(--semantic-color-interactive-destructive-default); --component-button-destructive-background-hover: var(--semantic-color-interactive-destructive-hover); --component-button-destructive-background-active: var(--semantic-color-interactive-destructive-active); --component-button-destructive-background-disabled: var(--semantic-color-interactive-destructive-disabled); --component-button-destructive-text-color: var(--semantic-color-text-neutral-contrast); --component-button-destructive-text-color-hover: var(--semantic-color-text-neutral-contrast); --component-button-destructive-text-color-active: var(--semantic-color-text-neutral-contrast); --component-button-destructive-text-color-disabled: var(--semantic-color-text-disabled); --component-button-destructive-border-color: transparent; --component-button-destructive-border-color-hover: transparent; --component-button-destructive-border-color-active: transparent; --component-button-destructive-border-color-disabled: transparent; --component-button-destructive-background-opacity: var(--primitive-opacity-alpha-100); --component-button-destructive-background-hover-opacity: var(--primitive-opacity-alpha-100); --component-button-destructive-background-active-opacity: var(--primitive-opacity-alpha-100); --component-button-destructive-background-disabled-opacity: var(--primitive-opacity-alpha-100); --component-button-lg-padding-x: var(--semantic-spacing-inset-md); --component-button-lg-padding-y: var(--semantic-spacing-inset-md); --component-button-lg-border-radius: var(--primitive-radius-full); --component-button-lg-icon-size: var(--primitive-icon-size-lg); --component-button-lg-icon-stroke: var(--primitive-icon-stroke-medium); --component-button-lg-gap: var(--semantic-spacing-inline-md); --component-button-lg-min-width: 120px; --component-button-lg-max-width: none; --component-button-lg-min-height: 66px; --component-button-lg-font-family: var(--semantic-typography-label-lg-font-family); --component-button-lg-font-size: var(--semantic-typography-label-lg-font-size); --component-button-lg-font-weight: var(--semantic-typography-label-lg-font-weight); --component-button-lg-line-height: var(--semantic-typography-label-lg-line-height); --component-button-lg-letter-spacing: var(--semantic-typography-label-lg-letter-spacing); --component-button-lg-text-transform: var(--semantic-typography-label-lg-text-transform); --component-button-md-min-width: 120px; --component-button-md-max-width: none; --component-button-md-min-height: 37px; --component-button-sm-padding-x: var(--semantic-spacing-inset-md); --component-button-sm-padding-y: var(--primitive-spacing-zero); --component-button-sm-border-radius: var(--primitive-radius-full); --component-button-sm-icon-size: var(--primitive-icon-size-sm); --component-button-sm-icon-stroke: var(--primitive-icon-stroke-regular); --component-button-sm-gap: var(--semantic-spacing-inline-sm); --component-button-sm-min-width: 0px; --component-button-sm-max-width: none; --component-button-sm-min-height: 32px; --component-button-sm-_custom-height: 32px; --component-button-sm-font-family: var(--semantic-typography-label-sm-font-family); --component-button-sm-font-size: var(--semantic-typography-label-sm-font-size); --component-button-sm-font-weight: var(--semantic-typography-label-sm-font-weight); --component-button-sm-line-height: var(--semantic-typography-label-sm-line-height); --component-button-sm-letter-spacing: var(--semantic-typography-label-sm-letter-spacing); --component-button-sm-text-transform: var(--semantic-typography-label-sm-text-transform); --component-badge-info-subtle-background: var(--semantic-color-surface-info-subtle); --component-badge-info-subtle-text-color: var(--semantic-color-text-info-bold); --component-badge-info-subtle-border-color: transparent; --component-badge-info-bold-background: var(--semantic-color-surface-info-bold); --component-badge-info-bold-text-color: var(--semantic-color-text-info-contrast); --component-badge-info-bold-border-color: transparent; --component-badge-info-outline-background: transparent; --component-badge-info-outline-text-color: var(--semantic-color-text-info-default); --component-badge-info-outline-border-color: var(--semantic-color-border-info-default); --component-badge-error-subtle-background: var(--semantic-color-surface-error-subtle); --component-badge-error-subtle-text-color: var(--semantic-color-text-error-bold); --component-badge-error-subtle-border-color: transparent; --component-badge-error-bold-background: var(--semantic-color-surface-error-bold); --component-badge-error-bold-text-color: var(--semantic-color-text-error-contrast); --component-badge-error-bold-border-color: transparent; --component-badge-error-outline-background: transparent; --component-badge-error-outline-text-color: var(--semantic-color-text-error-default); --component-badge-error-outline-border-color: var(--semantic-color-border-error-default); --component-badge-neutral-subtle-background: var(--semantic-color-surface-neutral-default); --component-badge-neutral-subtle-text-color: var(--semantic-color-text-neutral-default); --component-badge-neutral-subtle-border-color: transparent; --component-badge-neutral-bold-background: var(--semantic-color-surface-neutral-bold); --component-badge-neutral-bold-text-color: var(--semantic-color-text-neutral-contrast); --component-badge-neutral-bold-border-color: transparent; --component-badge-neutral-outline-background: transparent; --component-badge-neutral-outline-text-color: var(--semantic-color-text-neutral-bold); --component-badge-neutral-outline-border-color: var(--semantic-color-border-neutral-bold); --component-badge-primary-subtle-background: var(--semantic-color-surface-primary-subtle); --component-badge-primary-subtle-text-color: var(--semantic-color-text-primary-default); --component-badge-primary-subtle-border-color: transparent; --component-badge-primary-bold-background: var(--semantic-color-surface-primary-bold); --component-badge-primary-bold-text-color: var(--semantic-color-text-neutral-contrast); --component-badge-primary-bold-border-color: transparent; --component-badge-primary-outline-background: transparent; --component-badge-primary-outline-text-color: var(--semantic-color-text-primary-default); --component-badge-primary-outline-border-color: var(--semantic-color-border-primary-default); --component-badge-success-subtle-background: var(--semantic-color-surface-success-subtle); --component-badge-success-subtle-text-color: var(--semantic-color-text-success-bold); --component-badge-success-subtle-border-color: transparent; --component-badge-success-bold-background: var(--semantic-color-surface-success-bold); --component-badge-success-bold-text-color: var(--semantic-color-text-success-contrast); --component-badge-success-bold-border-color: transparent; --component-badge-success-outline-background: transparent; --component-badge-success-outline-text-color: var(--semantic-color-text-success-default); --component-badge-success-outline-border-color: var(--semantic-color-border-success-default); --component-badge-warning-subtle-background: var(--semantic-color-surface-warning-subtle); --component-badge-warning-subtle-text-color: var(--semantic-color-text-warning-bold); --component-badge-warning-subtle-border-color: transparent; --component-badge-warning-bold-background: var(--semantic-color-surface-warning-bold); --component-badge-warning-bold-text-color: var(--semantic-color-text-warning-contrast); --component-badge-warning-bold-border-color: transparent; --component-badge-warning-outline-background: transparent; --component-badge-warning-outline-text-color: var(--semantic-color-text-warning-default); --component-badge-warning-outline-border-color: var(--semantic-color-border-warning-default); --component-badge-tertiary-subtle-background: var(--semantic-color-surface-accent-subtle); --component-badge-tertiary-subtle-text-color: var(--semantic-color-text-accent-bold); --component-badge-tertiary-subtle-border-color: transparent; --component-badge-tertiary-bold-background: var(--semantic-color-surface-accent-bold); --component-badge-tertiary-bold-text-color: var(--semantic-color-text-neutral-contrast); --component-badge-tertiary-bold-border-color: transparent; --component-badge-tertiary-outline-background: transparent; --component-badge-tertiary-outline-text-color: var(--semantic-color-text-accent-default); --component-badge-tertiary-outline-border-color: var(--semantic-color-border-accent-default); --component-badge-secondary-subtle-background: var(--semantic-color-surface-secondary-subtle); --component-badge-secondary-subtle-text-color: var(--semantic-color-text-secondary-bold); --component-badge-secondary-subtle-border-color: transparent; --component-badge-secondary-bold-background: var(--semantic-color-surface-secondary-bold); --component-badge-secondary-bold-text-color: var(--semantic-color-text-secondary-contrast); --component-badge-secondary-bold-border-color: transparent; --component-badge-secondary-outline-background: transparent; --component-badge-secondary-outline-text-color: var(--semantic-color-text-secondary-default); --component-badge-secondary-outline-border-color: var(--semantic-color-border-secondary-default); --component-badge-md-min-width: none; --component-badge-md-max-width: none; --component-badge-md-min-height: 24px; --component-badge-sm-padding-x: var(--semantic-spacing-inset-sm); --component-badge-sm-padding-y: var(--primitive-spacing-zero); --component-badge-sm-border-radius: var(--primitive-radius-full); --component-badge-sm-icon-size: var(--primitive-icon-size-xs); --component-badge-sm-icon-stroke: var(--primitive-icon-stroke-regular); --component-badge-sm-gap: var(--semantic-spacing-inline-xs); --component-badge-sm-min-width: none; --component-badge-sm-max-width: none; --component-badge-sm-min-height: 22px; --component-badge-sm-font-family: var(--semantic-typography-code-block-font-family); --component-badge-sm-font-size: var(--semantic-typography-code-block-font-size); --component-badge-sm-font-weight: var(--semantic-typography-code-block-font-weight); --component-badge-sm-line-height: var(--semantic-typography-code-block-line-height); --component-badge-sm-letter-spacing: var(--semantic-typography-code-block-letter-spacing); --component-badge-sm-text-transform: var(--semantic-typography-code-block-text-transform); --component-text-input-default-background: var(--semantic-color-surface-neutral-subtle); --component-text-input-default-background-focus: var(--semantic-color-contrast-light); --component-text-input-default-background-error: var(--semantic-color-surface-error-subtle); --component-text-input-default-background-disabled: var(--semantic-color-surface-disabled); --component-text-input-default-text-color: var(--semantic-color-text-neutral-bold); --component-text-input-default-text-color-focus: var(--semantic-color-text-neutral-bold); --component-text-input-default-text-color-error: var(--semantic-color-text-neutral-bold); --component-text-input-default-text-color-disabled: var(--semantic-color-text-disabled); --component-text-input-default-placeholder-color: var(--semantic-color-text-neutral-subtle); --component-text-input-default-placeholder-color-focus: var(--semantic-color-text-neutral-default); --component-text-input-default-placeholder-color-error: var(--semantic-color-text-error-default); --component-text-input-default-placeholder-color-disabled: var(--semantic-color-text-disabled); --component-text-input-default-border-color: transparent; --component-text-input-default-border-color-focus: var(--semantic-color-border-neutral-bold); --component-text-input-default-border-color-error: var(--semantic-color-border-error-default); --component-text-input-default-border-color-disabled: transparent; --component-text-input-md-min-width: none; --component-text-input-md-max-width: 100%; --component-text-input-md-min-height: 32px; --component-text-input-sm-padding-x: var(--semantic-spacing-inset-md); --component-text-input-sm-padding-y: var(--semantic-spacing-inset-xs); --component-text-input-sm-border-radius: var(--primitive-radius-full); --component-text-input-sm-icon-size: var(--primitive-icon-size-xs); --component-text-input-sm-icon-stroke: var(--primitive-icon-stroke-regular); --component-text-input-sm-gap: var(--semantic-spacing-inline-xs); --component-text-input-sm-min-width: none; --component-text-input-sm-max-width: 422px; --component-text-input-sm-min-height: 32px; --component-text-input-sm-_custom-height: 32px; --component-text-input-sm-font-family: var(--semantic-typography-body-xs-font-family); --component-text-input-sm-font-size: var(--semantic-typography-body-xs-font-size); --component-text-input-sm-font-weight: var(--semantic-typography-body-xs-font-weight); --component-text-input-sm-line-height: var(--semantic-typography-body-xs-line-height); --component-text-input-sm-letter-spacing: var(--semantic-typography-body-xs-letter-spacing); --component-text-input-sm-text-transform: var(--semantic-typography-body-xs-text-transform); }