packages/components/src/utils/_theme-variables.scss - trunk - githubmirror/wp-calypso

packages/components/src/utils/_theme-variables.scss

32 строки2 KB

Lena Morita

Components: Make local copy of `Badge` (`CoreBadge`) (#103568)

22 май 2025, 19:47

22 май 2025, 19:4768a5a04

// Forked from `@wordpress/components`

@use '@wordpress/base-styles/colors';

// 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));

// Used when placing text on the accent color.
$components-color-accent-inverted: var(--wp-components-color-accent-inverted, colors.$white);

$components-color-background: var(--wp-components-color-background, colors.$white);
$components-color-foreground: var(--wp-components-color-foreground, colors.$gray-900);

// Used when placing text on the foreground color.
$components-color-foreground-inverted: var(--wp-components-color-foreground-inverted, colors.$white);

$components-color-gray-100: var(--wp-components-color-gray-100, colors.$gray-100);
$components-color-gray-200: var(--wp-components-color-gray-200, colors.$gray-200);
$components-color-gray-300: var(--wp-components-color-gray-300, colors.$gray-300);
$components-color-gray-400: var(--wp-components-color-gray-400, colors.$gray-400);
$components-color-gray-600: var(--wp-components-color-gray-600, colors.$gray-600);
$components-color-gray-700: var(--wp-components-color-gray-700, colors.$gray-700);
$components-color-gray-800: var(--wp-components-color-gray-800, colors.$gray-800);

// Semantic aliases (prefer these over raw gray values when applicable).
$components-color-border: #{ $components-color-gray-600 };