Skip to main content

Global CSS Variables

tip

Standardized components unify implementations across PC, H5, and mini-program platforms while exposing a series of standard APIs to the public, including style APIs and custom CSS variables. All standardized components are marked with in the Component List.

WeDa Component Library provides a set of global CSS variables that enable quick theme switching through variable configuration.

CSS Variables

:root,
page,
:root[theme-mode='light'],
page[theme-mode='light'],
.wd-theme-light {
// ********************************************************************* //

// Base colors and extensions for states such as hover / focus / disabled / active

--wd-color-brand: var(--wd-color-brand-8); // Color - Brand - Actionable
--wd-color-brand-light: var(--wd-color-brand-1); // Light variant
--wd-color-brand-dark: var(--wd-color-brand-9); // Dark variant
--wd-color-brand-hover: var(--wd-color-brand-7); // hover state
--wd-color-brand-focus: var(--wd-color-brand-2); // focus state, including mouse and keyboard
--wd-color-brand-active: var(--wd-color-brand-9); // active state
--wd-color-brand-disabled: var(--wd-color-brand-3); // disabled state

// Warning color extensions

--wd-color-warning: var(--wd-color-warning-5); // Color - Functional - Warning
--wd-color-warning-light: var(--wd-color-warning-1);
--wd-color-warning-dark: var(--wd-color-warning-9);
--wd-color-warning-hover: var(--wd-color-warning-4);
--wd-color-warning-focus: var(--wd-color-warning-2);
--wd-color-warning-active: var(--wd-color-warning-6);
--wd-color-warning-disabled: var(--wd-color-warning-3);

// Failure/Error color extensions

--wd-color-error: var(--wd-color-error-6); // Color - Functional - Error
--wd-color-error-light: var(--wd-color-error-1);
--wd-color-error-dark: var(--wd-color-error-9);
--wd-color-error-hover: var(--wd-color-error-5);
--wd-color-error-focus: var(--wd-color-error-2);
--wd-color-error-active: var(--wd-color-error-7);
--wd-color-error-disabled: var(--wd-color-error-3);

// Success color extensions

--wd-color-success: var(--wd-color-success-5); // Color - Functional - Success
--wd-color-success-light: var(--wd-color-success-1);
--wd-color-success-dark: var(--wd-color-success-9);
--wd-color-success-hover: var(--wd-color-success-4);
--wd-color-success-focus: var(--wd-color-success-2);
--wd-color-success-active: var(--wd-color-success-6);
--wd-color-success-disabled: var(--wd-color-success-3);

// Mask

--wd-bg-mask: rgba(var(--wd-black-rgb), 80%);
--wd-bg-mask-inverse: rgba(var(--wd-white-rgb), 60%);

// Text color

--wd-color-text-default: var(--wd-font-gray-1); // Color - Text - Primary
--wd-color-text-secondary: var(--wd-font-gray-2); // Color - Text - Secondary
--wd-color-text-placeholder: var(--wd-font-gray-3); // Color - Text - Placeholder/Description
--wd-color-text-disabled: var(--wd-font-gray-4); // Color - Text - Disabled
--wd-color-text-inverse: var(--wd-white); // Color - Text - Inverse
--wd-color-text-brand: var(--wd-color-brand-6); // Color - Text - Brand
--wd-color-text-link: var(--wd-color-brand); // Color - Text - Link
--wd-color-text-link-hover: var(--wd-color-brand-hover); // Color - Text - Link
--wd-color-text-link-active: var(--wd-color-brand-active); // Color - Text - Link
--wd-color-text-link-focus: var(--wd-color-brand-focus); // Color - Text - Link
--wd-color-text-link-disabled: var(
--wd-color-brand-disabled
); // Color - Text - Link

--wd-color-text-tooltips: var(--wd-white);
--wd-color-text-success: var(--wd-color-success-6);
--wd-color-text-error: var(--wd-color-error-6);
--wd-color-text-warning: var(--wd-color-warning-6);

// Divider
--wd-color-border-separator: var(--wd-color-gray-2);

// Border
--wd-color-border-default: var(--wd-color-gray-3);
--wd-color-border-hover: var(--wd-color-gray-4);
--wd-color-border-disabled: var(--wd-color-gray-3);
}