mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Simplify Classic theme using the new CSS files
This commit is contained in:
Lea Verou
@@ -1,4 +1,8 @@
|
||||
@import 'classic_components.css';
|
||||
@import url('default/typography.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/groups.css');
|
||||
|
||||
:root,
|
||||
:host,
|
||||
@@ -203,123 +207,21 @@
|
||||
--wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--wa-font-family-longform: Georgia, 'Times New Roman', serif;
|
||||
|
||||
/* The default type scale is roughly based on the Major Second scale (x1.125),
|
||||
* with each value rounded to the nearest whole pixel based on a 16px root font size.
|
||||
* For larger font sizes, every other step on the scale is skipped in order to maximize variation.
|
||||
* A multiplier is provided to uniformly increase or decrease all font sizes. */
|
||||
--wa-font-size-scale: 1;
|
||||
--wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-scale)); /* 11px */
|
||||
--wa-font-size-xs: calc(0.75rem * var(--wa-font-size-scale)); /* 12px */
|
||||
--wa-font-size-s: calc(0.875rem * var(--wa-font-size-scale)); /* 14px */
|
||||
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
|
||||
--wa-font-size-l: calc(1.25rem * var(--wa-font-size-scale)); /* 20px */
|
||||
--wa-font-size-xl: calc(1.625rem * var(--wa-font-size-scale)); /* 26px */
|
||||
--wa-font-size-2xl: calc(2rem * var(--wa-font-size-scale)); /* 32px */
|
||||
--wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-scale)); /* 41px */
|
||||
--wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-scale)); /* 52px */
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 500;
|
||||
--wa-font-weight-bold: 600;
|
||||
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-heading: var(--wa-font-weight-semibold);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
--wa-line-height-condensed: 1.2;
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
--wa-link-decoration-default: underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
|
||||
/**
|
||||
* Spacing
|
||||
*/
|
||||
|
||||
/* A multiplier is provided to uniformly increase or decrease all spacing. */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
|
||||
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
--wa-border-style: solid;
|
||||
|
||||
/* A multiplier is provided to uniformly increase or decrease all border widths. */
|
||||
--wa-border-width-scale: 0.0625;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
|
||||
|
||||
/* A multiplier is provided to uniformly increase or decrease all border radii. */
|
||||
--wa-border-radius-scale: 0.25;
|
||||
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.5rem);
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
|
||||
|
||||
/* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0px;
|
||||
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.1875rem; /* 3px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus) 60%, transparent);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
* Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
|
||||
* A multiplier is provided for each shadow quality to uniformly scale all related values.
|
||||
*/
|
||||
|
||||
--wa-shadow-offset-x-scale: 0;
|
||||
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
|
||||
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
|
||||
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 2rem);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 4rem);
|
||||
|
||||
--wa-shadow-offset-y-scale: 0.0625;
|
||||
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 2rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 4rem);
|
||||
|
||||
--wa-shadow-blur-scale: 0.125;
|
||||
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.5rem);
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 2rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 4rem);
|
||||
|
||||
--wa-shadow-spread-scale: 0;
|
||||
--wa-shadow-spread-xs: calc(var(--wa-shadow-spread-scale) * 0.5rem);
|
||||
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 1rem);
|
||||
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 2rem);
|
||||
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 4rem);
|
||||
|
||||
--wa-shadow-xs: var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
|
||||
var(--wa-shadow-spread-xs) var(--wa-color-shadow);
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
|
||||
var(--wa-shadow-spread-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
|
||||
var(--wa-shadow-spread-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
|
||||
var(--wa-shadow-spread-l) var(--wa-color-shadow);
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
@@ -335,48 +237,19 @@
|
||||
*/
|
||||
|
||||
/* Form controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-60);
|
||||
|
||||
--wa-form-control-height-s: 1.875rem;
|
||||
--wa-form-control-height-m: 2.5rem;
|
||||
--wa-form-control-height-l: 3.125rem;
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
/* Panels */
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
--wa-panel-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
/* Tooltips */
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
}
|
||||
|
||||
.wa-theme-classic-dark,
|
||||
@@ -462,3 +335,143 @@
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-gray-05);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component style overrides
|
||||
*/
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-loud);
|
||||
--content-color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
wa-button,
|
||||
wa-radio-button {
|
||||
&[size='small'] {
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
|
||||
&[size='medium'] {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
&[size='large'] {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
}
|
||||
|
||||
wa-radio-button {
|
||||
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
|
||||
--background-color-hover: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--wa-form-control-resting-color);
|
||||
--border-color-active: var(--background-color-active);
|
||||
--border-color-hover: var(--background-color-hover);
|
||||
--label-color-active: var(--label-color-hover);
|
||||
--label-color-hover: var(--wa-color-brand-on-loud);
|
||||
--indicator-color: var(--wa-background-color);
|
||||
|
||||
&[checked] {
|
||||
--background-color: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--background-color);
|
||||
--label-color: var(--wa-color-brand-on-loud);
|
||||
}
|
||||
}
|
||||
|
||||
wa-breadcrumb {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
/* #region Callouts */
|
||||
wa-callout {
|
||||
--background-color: var(--wa-color-surface-raised);
|
||||
--border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
|
||||
--content-color: var(--wa-color-text-normal);
|
||||
--spacing: var(--wa-space-l);
|
||||
|
||||
font-size: var(--wa-font-size-s);
|
||||
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-brand-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-success-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-warning-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-danger-fill-loud);
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
--background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--box-shadow: var(--wa-shadow-xs);
|
||||
--pagination-color-active: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
wa-dialog,
|
||||
wa-drawer {
|
||||
--spacing: var(--wa-space-l);
|
||||
}
|
||||
|
||||
wa-input:not([filled]),
|
||||
wa-select:not([filled]),
|
||||
wa-textarea:not([filled]) {
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
|
||||
--wa-focus-ring-offset: 0;
|
||||
}
|
||||
|
||||
wa-radio {
|
||||
--background-color-checked: var(--border-color-checked);
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
--checked-icon-scale: 0.4;
|
||||
}
|
||||
|
||||
wa-range {
|
||||
--thumb-gap: 0;
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-gray-50);
|
||||
--border-color: var(--background-color);
|
||||
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
|
||||
--thumb-color: var(--wa-color-surface-default);
|
||||
--thumb-size: calc(var(--height) + 4px);
|
||||
--width: calc(var(--height) * 2);
|
||||
|
||||
&::part(thumb) {
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
|
||||
}
|
||||
&[checked]::part(thumb) {
|
||||
border-color: var(--background-color-checked);
|
||||
}
|
||||
}
|
||||
|
||||
wa-progress-bar {
|
||||
--height: 1rem;
|
||||
}
|
||||
|
||||
wa-tab {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
@@ -1,154 +0,0 @@
|
||||
/* #region Avatars */
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-loud);
|
||||
--content-color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Buttons */
|
||||
wa-button,
|
||||
wa-radio-button {
|
||||
&[size='small'] {
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
|
||||
&[size='medium'] {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
&[size='large'] {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
}
|
||||
|
||||
wa-radio-button {
|
||||
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
|
||||
--background-color-hover: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--wa-form-control-resting-color);
|
||||
--border-color-active: var(--background-color-active);
|
||||
--border-color-hover: var(--background-color-hover);
|
||||
--label-color-active: var(--label-color-hover);
|
||||
--label-color-hover: var(--wa-color-brand-on-loud);
|
||||
--indicator-color: var(--wa-background-color);
|
||||
}
|
||||
|
||||
wa-radio-button[checked] {
|
||||
--background-color: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--background-color);
|
||||
--label-color: var(--wa-color-brand-on-loud);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Breadcrumbs */
|
||||
wa-breadcrumb {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
/* #region Callouts */
|
||||
wa-callout {
|
||||
--background-color: var(--wa-color-surface-raised);
|
||||
--border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
|
||||
--content-color: var(--wa-color-text-normal);
|
||||
--spacing: var(--wa-space-l);
|
||||
|
||||
font-size: var(--wa-font-size-s);
|
||||
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-brand-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-success-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-warning-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-danger-fill-loud);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Cards */
|
||||
wa-card {
|
||||
--background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Carousel */
|
||||
wa-carousel {
|
||||
--box-shadow: var(--wa-shadow-xs);
|
||||
--pagination-color-active: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Modals */
|
||||
wa-dialog,
|
||||
wa-drawer {
|
||||
--spacing: var(--wa-space-l);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Inputs */
|
||||
wa-input:not([filled]),
|
||||
wa-select:not([filled]),
|
||||
wa-textarea:not([filled]) {
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
|
||||
--wa-focus-ring-offset: 0;
|
||||
}
|
||||
|
||||
wa-radio {
|
||||
--background-color-checked: var(--border-color-checked);
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
--checked-icon-scale: 0.4;
|
||||
}
|
||||
|
||||
wa-range {
|
||||
--thumb-gap: 0;
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-gray-50);
|
||||
--border-color: var(--background-color);
|
||||
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
|
||||
--thumb-color: var(--wa-color-surface-default);
|
||||
--thumb-size: calc(var(--height) + 4px);
|
||||
--width: calc(var(--height) * 2);
|
||||
|
||||
&::part(thumb) {
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
|
||||
}
|
||||
&[checked]::part(thumb) {
|
||||
border-color: var(--background-color-checked);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Progress Indicators */
|
||||
wa-progress-bar {
|
||||
--height: 1rem;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Tabs */
|
||||
wa-tab {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
/* #endregion */
|
||||
Reference in New Issue
Block a user