packages/components/src/utils/theme-variables.scss - trunk - githubmirror/gutenberg

packages/components/src/utils/theme-variables.scss
40 строк3 KB
Marco Ciampini
Components: Migrate ToggleGroupControl to SCSS Modules (#80381)
17 июл 2026, 17:45
17 июл 2026, 17:45ff3dc71
// Accent color
//
// If the `--wp-components-color-accent` variable is not defined, fallback to
// `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
// defined, fallback to the default theme color (WP blueberry).
$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
$components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
$components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));

// The non-accent values fall back to the design system (`--wpds-*`) tokens.
// Those are defined at `:root` by the prebuilt `@wordpress/theme` stylesheet
// when it is loaded (always the case inside WordPress). The references here
// intentionally omit a hardcoded fallback — the build plugin injects the
// design system default value, so component styles stay correct even when
// neither the prebuilt stylesheet nor a runtime `<ThemeProvider>` is present.

// Used when placing text on the accent color.
$components-color-accent-inverted: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong));

$components-color-background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong));
$components-color-foreground: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral));

// Used when placing text on the foreground color.
$components-color-foreground-inverted: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral));

$components-color-gray-100: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral));
$components-color-gray-200: var(--wp-components-color-gray-200, var(--wpds-color-stroke-surface-neutral));
$components-color-gray-300: var(--wp-components-color-gray-300, var(--wpds-color-stroke-surface-neutral));
$components-color-gray-400: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral));
$components-color-gray-600: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral));
$components-color-gray-700: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak));
$components-color-gray-800: var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral));

$components-color-dark-gray-placeholder: color-mix(in srgb, $components-color-foreground, transparent 38%);
$components-color-light-gray-placeholder: color-mix(in srgb, $components-color-background, transparent 35%);

// Semantic aliases (prefer these over raw gray values when applicable).
$components-color-border: #{ $components-color-gray-600 };
$components-color-disabled: #{ $components-color-gray-600 };
$components-color-focus: var(--wp-components-color-accent, var(--wpds-color-stroke-focus));