diff --git a/docs/_data/hues.json b/docs/_data/hues.json index e4555ff72..2e68ebe4b 100644 --- a/docs/_data/hues.json +++ b/docs/_data/hues.json @@ -1 +1 @@ -["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"] +["red", "orange", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"] diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md index 222e5b8d5..d1cd32a64 100644 --- a/docs/docs/components/card.md +++ b/docs/docs/components/card.md @@ -19,13 +19,13 @@ icon: card
More Info - +
+ \ No newline at end of file diff --git a/docs/docs/native/input.md b/docs/docs/native/input.md index c7c11f0dc..ef7c483e5 100644 --- a/docs/docs/native/input.md +++ b/docs/docs/native/input.md @@ -42,6 +42,14 @@ wa-code-demo::part(preview) { ``` +## Pill shaped text fields + +Add the `wa-pill` class to an `` to make it pill-shaped. + +```html {.example} + +``` + ## Color Picker Basic: diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index 51bd55882..0da89e80d 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -12,6 +12,12 @@ Components with the Experimental bad During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience! ::: +## Next + +- Fixed `wa-pill` class for text fields +- Fixed `pill` style for `` elements +- Fixed a bug in `` that prevented light dismiss from working when clicking immediately above the color picker dropdown + ## 3.0.0-alpha.11 ### Color Palettes @@ -20,6 +26,7 @@ During the alpha period, things might break! We take breaking changes very serio - Added a `pink` scale to all color palettes - Tweaked hues of all color palettes to make them more distinct and make their hues more intentional - Dropped `violet` and `teal`, instead using `purple` and `cyan` (this is not just a renaming, the colors have been adjusted too). +- Fixed a bug in `` that caused tooltips to work incorrectly when toggling the switch ### Design Tokens diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css index fa7e6ad18..2cf52a21f 100644 --- a/src/components/color-picker/color-picker.css +++ b/src/components/color-picker/color-picker.css @@ -278,11 +278,11 @@ } /* - * Color dropdown - */ + * Color dropdown + */ .color-dropdown { - display: flex; + display: contents; } .color-dropdown::part(panel) { diff --git a/src/components/icon-button/icon-button.css b/src/components/icon-button/icon-button.css index 38ef368f1..cf12fe75b 100644 --- a/src/components/icon-button/icon-button.css +++ b/src/components/icon-button/icon-button.css @@ -1,5 +1,8 @@ :host { --background-color-hover: var(--wa-color-neutral-fill-quiet); + --text-color-hover: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); + --background-color-active: transparent; + --text-color-active: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); display: inline-block; color: var(--wa-color-text-quiet); @@ -22,12 +25,13 @@ :host(:not([disabled])) .icon-button:hover, :host(:not([disabled])) .icon-button:focus-visible { - background-color: var(--wa-color-neutral-fill-quiet); - color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); + background-color: var(--background-color-hover); + color: var(--text-color-hover); } :host(:not([disabled])) .icon-button:active { - color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); + background-color: var(--background-color-active); + color: var(--text-color-active); } .icon-button:focus { diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts index 0a7b62834..64ec7475e 100644 --- a/src/components/icon-button/icon-button.ts +++ b/src/components/icon-button/icon-button.ts @@ -17,7 +17,10 @@ import styles from './icon-button.css'; * @event blur - Emitted when the icon button loses focus. * @event focus - Emitted when the icon button gains focus. * - * @cssproperty --background-color-hover - The color of the button's background on hover. + * @cssproperty [--background-color-hover=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on hover. + * @cssproperty [--background-color-active=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on `:active`. + * @cssproperty --text-color-hover - The color of the button's background on hover. + * @cssproperty --text-color-active - The color of the button's background on `:active`. * * @csspart base - The component's base wrapper. */ diff --git a/src/components/select/select.css b/src/components/select/select.css index 633c2bf01..88312e37f 100644 --- a/src/components/select/select.css +++ b/src/components/select/select.css @@ -208,13 +208,13 @@ &::slotted(wa-divider) { --spacing: var(--wa-space-xs); } - - &::slotted(small) { - display: block; - font-size: var(--wa-font-size-s); - font-weight: var(--wa-font-weight-semibold); - color: var(--wa-color-text-quiet); - padding-block: var(--wa-space-xs); - padding-inline: var(--wa-space-xl); - } +} + +slot:not([name])::slotted(small) { + display: block; + font-size: var(--wa-font-size-s); + font-weight: var(--wa-font-weight-semibold); + color: var(--wa-color-text-quiet); + padding-block: var(--wa-space-xs); + padding-inline: var(--wa-space-xl); } diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts index 747cfe987..ca302c03a 100644 --- a/src/components/select/select.test.ts +++ b/src/components/select/select.test.ts @@ -647,6 +647,7 @@ describe('', () => { ); const el = form.querySelector('wa-select')!; + expect(el.defaultValue).to.equal('option-1'); expect(el.value).to.equal(''); expect(new FormData(form).get('select')).equal(''); @@ -657,6 +658,7 @@ describe('', () => { await aTimeout(10); await el.updateComplete; + expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['option-1']); expect(el.value).to.equal('option-1'); expect(new FormData(form).get('select')).equal('option-1'); }); @@ -745,6 +747,8 @@ describe('', () => { ); const el = form.querySelector('wa-select')!; + expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['bar', 'baz']); + expect(el.optionValues?.size).to.equal(2); expect(el.value).to.have.members(['bar', 'baz']); expect(el.value!.length).to.equal(2); expect(new FormData(form).getAll('select')).to.have.members(['bar', 'baz']); @@ -760,6 +764,36 @@ describe('', () => { expect(new FormData(form).getAll('select')).to.have.members(['foo', 'bar', 'baz']); }); }); + + describe('With setting the value via JS', () => { + it('Should preserve value even if not returned', async () => { + const form = await fixture( + html`
+ + Bar + Baz + +
`, + ); + + const el = form.querySelector('wa-select')!; + expect(el.value).to.equal(''); + + el.value = 'foo'; + await aTimeout(10); + await el.updateComplete; + expect(el.value).to.equal(''); + + const option = document.createElement('wa-option'); + option.value = 'foo'; + option.innerText = 'Foo'; + el.append(option); + + await aTimeout(10); + await el.updateComplete; + expect(el.value).to.equal('foo'); + }); + }); }); }); } diff --git a/src/components/select/select.ts b/src/components/select/select.ts index e82c53d2c..d7ab3c3b6 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -118,6 +118,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { @state() displayLabel = ''; @state() currentOption: WaOption; @state() selectedOptions: WaOption[] = []; + @state() optionValues: Set | undefined; /** The name of the select, submitted as a name/value pair with form data. */ @property() name = ''; @@ -158,7 +159,47 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { return val; } - @property({ attribute: false }) value: string | string[] | null = null; + private _value: string[] | undefined; + @property({ attribute: false }) + set value(val: string | string[]) { + let oldValue = this.value; + + if (!Array.isArray(val)) { + val = val.split(' '); + } + + if (!this._value || this._value.join(' ') !== val.join(' ')) { + this._value = val; + let newValue = this.value; + + if (newValue != oldValue) { + this.requestUpdate('value', oldValue); + } + } + } + get value() { + let value = this._value ?? this.defaultValue; + value = Array.isArray(value) ? value : [value]; + let optionsChanged = !this.optionValues; + + if (optionsChanged) { + this.optionValues = new Set( + this.getAllOptions() + .filter(option => !option.disabled) + .map(option => option.value), + ); + } + + // Drop values not in the DOM + let ret: string | string[] = value.filter(v => this.optionValues!.has(v)); + ret = this.multiple ? ret : (ret[0] ?? ''); + + if (optionsChanged) { + this.requestUpdate('value'); + } + + return ret; + } /** The select's size. */ @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit'; @@ -538,12 +579,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { } const allOptions = this.getAllOptions(); - const val = this.valueHasChanged ? this.value : this.defaultValue; - const value = Array.isArray(val) ? val : [val]; - const values: string[] = []; + this.optionValues = undefined; // dirty the value so it gets recalculated - // Check for duplicate values in menu items - allOptions.forEach(option => values.push(option.value)); + const value = this.value; // Select only the options that match the new value this.setSelectedOptions(allOptions.filter(el => value.includes(el.value))); @@ -565,6 +603,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { // Gets an array of all `` elements private getAllOptions() { + if (!this?.querySelectorAll) { + return []; + } return [...this.querySelectorAll('wa-option')]; } @@ -628,11 +669,24 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { // Update selected options cache this.selectedOptions = options.filter(el => el.selected); + let selectedValues = new Set(this.selectedOptions.map(el => el.value)); + + // Toggle values present in the DOM from this.value, while preserving options NOT present in the DOM (for lazy loading) + // Note that options NOT present in the DOM will be moved to the end after this + if (selectedValues.size > 0 || this._value) { + if (!this._value) { + // First time it's set + let value = this.defaultValue ?? []; + this._value = Array.isArray(value) ? value : [value]; + } + + // Filter out values that are in the DOM + this._value = this._value.filter(value => !this.optionValues?.has(value)); + this._value.unshift(...selectedValues); + } // Update the value and display label if (this.multiple) { - this.value = this.selectedOptions.map(el => el.value); - if (this.placeholder && this.value.length === 0) { // When no items are selected, keep the value empty so the placeholder shows this.displayLabel = ''; @@ -641,7 +695,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { } } else { const selectedOption = this.selectedOptions[0]; - this.value = selectedOption?.value ?? ''; this.displayLabel = selectedOption?.label ?? ''; } diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 74d5a7fb7..47a9bcdf4 100644 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -49,6 +49,7 @@ import styles from './switch.css'; */ @customElement('wa-switch') export default class WaSwitch extends WebAwesomeFormAssociatedElement { + static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true }; static shadowStyle = [formControlStyles, sizeStyles, styles]; static get validators() { diff --git a/src/components/tooltip/tooltip.css b/src/components/tooltip/tooltip.css index 80dd00621..144baf400 100644 --- a/src/components/tooltip/tooltip.css +++ b/src/components/tooltip/tooltip.css @@ -4,10 +4,16 @@ --max-width: 30ch; --padding: var(--wa-space-2xs) var(--wa-space-xs); + /** These styles are added so we don't interfere in the DOM. */ display: inline-block; position: absolute; - /** These styles are added so we dont interfere in the DOM. */ + /** Defaults for inherited CSS properties */ + color: var(--wa-tooltip-content-color); + font-size: var(--wa-tooltip-font-size); + line-height: var(--wa-tooltip-line-height); + text-align: start; + white-space: normal; } .tooltip { @@ -41,12 +47,6 @@ max-width: var(--max-width); border-radius: var(--border-radius); background-color: var(--background-color); - font: inherit; - color: var(--wa-tooltip-content-color); - font-size: var(--wa-tooltip-font-size); - line-height: var(--wa-tooltip-line-height); - text-align: start; - white-space: normal; padding: var(--padding); user-select: none; -webkit-user-select: none; diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 0389ef977..4f2b1cb63 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -35,11 +35,8 @@ import styles from './tooltip.css'; * * @cssproperty --background-color - The tooltip's background color. * @cssproperty --border-radius - The radius of the tooltip's corners. - * @cssproperty --text-color - The color of the tooltip's content. * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap. * @cssproperty --padding - The padding within the tooltip. - * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering. - * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering. */ @customElement('wa-tooltip') export default class WaTooltip extends WebAwesomeElement { diff --git a/src/styles/brand/base.css b/src/styles/brand/base.css deleted file mode 100644 index 175dc8049..000000000 --- a/src/styles/brand/base.css +++ /dev/null @@ -1,74 +0,0 @@ -:where(:root), -:host, -:where([class^='wa-theme-'], [class*=' wa-theme-']), -:where([class^='wa-palette-'], [class*=' wa-palette-']), -:where([class^='wa-brand-'], [class*=' wa-brand-']) { - /** - * Conditional tokens for use in color-mix() - * --wa-color-brand-if-lt-N ➡️ 100% if key < N, 0% otherwise - * --wa-color-brand-if-gte-N ➡️ 100% if key >= N, 0% otherwise - */ - --wa-color-brand-if-lt-40: calc(clamp(0, 40 - var(--wa-color-brand-key), 1) * 100%); - --wa-color-brand-if-lt-50: calc(clamp(0, 50 - var(--wa-color-brand-key), 1) * 100%); - --wa-color-brand-if-lt-60: calc(clamp(0, 60 - var(--wa-color-brand-key), 1) * 100%); - --wa-color-brand-if-lt-70: calc(clamp(0, 70 - var(--wa-color-brand-key), 1) * 100%); - --wa-color-brand-if-lt-80: calc(clamp(0, 80 - var(--wa-color-brand-key), 1) * 100%); - - --wa-color-brand-if-gte-40: calc(100% - var(--wa-color-brand-if-lt-40)); - --wa-color-brand-if-gte-50: calc(100% - var(--wa-color-brand-if-lt-50)); - --wa-color-brand-if-gte-60: calc(100% - var(--wa-color-brand-if-lt-60)); - --wa-color-brand-if-gte-70: calc(100% - var(--wa-color-brand-if-lt-70)); - --wa-color-brand-if-gte-80: calc(100% - var(--wa-color-brand-if-lt-80)); - - /* - * Convenience tokens for common tint cutoffs - * --wa-color-brand-N-max ➡️ var(--color-brand) if key <= N, var(--color-brand-N) otherwise - * --wa-color-brand-N-min ➡️ var(--color-brand) if key >= N, var(--color-brand-N) otherwise - */ - --wa-color-brand-40-max: color-mix( - in oklab, - var(--wa-color-brand) var(--wa-color-brand-if-lt-40), - var(--wa-color-brand-40) - ); - --wa-color-brand-40-min: color-mix( - in oklab, - var(--wa-color-brand) var(--wa-color-brand-if-gte-40), - var(--wa-color-brand-40) - ); - - --wa-color-brand-50-max: color-mix( - in oklab, - var(--wa-color-brand) var(--wa-color-brand-if-lt-50), - var(--wa-color-brand-50) - ); - --wa-color-brand-50-min: color-mix( - in oklab, - var(--wa-color-brand) var(--wa-color-brand-if-gte-50), - var(--wa-color-brand-50) - ); - - --wa-color-brand-60-max: color-mix( - in oklab, - var(--wa-color-brand) var(--wa-color-brand-if-lt-60), - var(--wa-color-brand-60) - ); - --wa-color-brand-60-min: color-mix( - in oklab, - var(--wa-color-brand) var(--wa-color-brand-if-gte-60), - var(--wa-color-brand-60) - ); - - --wa-color-brand-70-max: color-mix( - in oklab, - var(--wa-color-brand) var(--wa-color-brand-if-lt-70), - var(--wa-color-brand-70) - ); - --wa-color-brand-70-min: color-mix( - in oklab, - var(--wa-color-brand) var(--wa-color-brand-if-gte-70), - var(--wa-color-brand-70) - ); - - /* Text color: white if key < 60, brand-10 otherwise */ - --wa-color-brand-on: color-mix(in oklab, var(--wa-color-brand-10) var(--wa-color-brand-if-gte-60), white); -} diff --git a/src/styles/brand/blue.css b/src/styles/brand/blue.css index 94ce3f332..a46c9e84c 100644 --- a/src/styles/brand/blue.css +++ b/src/styles/brand/blue.css @@ -1,5 +1,3 @@ -@import url('base.css'); - :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -17,5 +15,22 @@ --wa-color-brand-10: var(--wa-color-blue-10); --wa-color-brand-05: var(--wa-color-blue-05); --wa-color-brand: var(--wa-color-blue); - --wa-color-brand-key: var(--wa-color-blue-key); + + --wa-color-brand-lt-50: var(--wa-color-blue-lt-50); + --wa-color-brand-gte-50: var(--wa-color-blue-gte-50); + + --wa-color-brand-lt-60: var(--wa-color-blue-lt-60); + --wa-color-brand-gte-60: var(--wa-color-blue-gte-60); + + --wa-color-brand-lt-70: var(--wa-color-blue-lt-70); + --wa-color-brand-gte-70: var(--wa-color-blue-gte-70); + + --wa-color-brand-max-50: var(--wa-color-blue-max-50); + --wa-color-brand-min-50: var(--wa-color-blue-min-50); + --wa-color-brand-max-60: var(--wa-color-blue-max-60); + --wa-color-brand-min-60: var(--wa-color-blue-min-60); + --wa-color-brand-max-70: var(--wa-color-blue-max-70); + --wa-color-brand-min-70: var(--wa-color-blue-min-70); + + --wa-color-brand-on: var(--wa-color-blue-on); } diff --git a/src/styles/brand/cyan.css b/src/styles/brand/cyan.css index afca52c2c..6e7ec4565 100644 --- a/src/styles/brand/cyan.css +++ b/src/styles/brand/cyan.css @@ -1,5 +1,3 @@ -@import url('base.css'); - :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -17,5 +15,22 @@ --wa-color-brand-10: var(--wa-color-cyan-10); --wa-color-brand-05: var(--wa-color-cyan-05); --wa-color-brand: var(--wa-color-cyan); - --wa-color-brand-key: var(--wa-color-cyan-key); + + --wa-color-brand-lt-50: var(--wa-color-cyan-lt-50); + --wa-color-brand-gte-50: var(--wa-color-cyan-gte-50); + + --wa-color-brand-lt-60: var(--wa-color-cyan-lt-60); + --wa-color-brand-gte-60: var(--wa-color-cyan-gte-60); + + --wa-color-brand-lt-70: var(--wa-color-cyan-lt-70); + --wa-color-brand-gte-70: var(--wa-color-cyan-gte-70); + + --wa-color-brand-max-50: var(--wa-color-cyan-max-50); + --wa-color-brand-min-50: var(--wa-color-cyan-min-50); + --wa-color-brand-max-60: var(--wa-color-cyan-max-60); + --wa-color-brand-min-60: var(--wa-color-cyan-min-60); + --wa-color-brand-max-70: var(--wa-color-cyan-max-70); + --wa-color-brand-min-70: var(--wa-color-cyan-min-70); + + --wa-color-brand-on: var(--wa-color-cyan-on); } diff --git a/src/styles/brand/gray.css b/src/styles/brand/gray.css index 59edc0b3b..991f48f65 100644 --- a/src/styles/brand/gray.css +++ b/src/styles/brand/gray.css @@ -1,5 +1,3 @@ -@import url('base.css'); - :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -17,5 +15,22 @@ --wa-color-brand-10: var(--wa-color-gray-10); --wa-color-brand-05: var(--wa-color-gray-05); --wa-color-brand: var(--wa-color-gray); - --wa-color-brand-key: var(--wa-color-gray-key); + + --wa-color-brand-lt-50: var(--wa-color-gray-lt-50); + --wa-color-brand-gte-50: var(--wa-color-gray-gte-50); + + --wa-color-brand-lt-60: var(--wa-color-gray-lt-60); + --wa-color-brand-gte-60: var(--wa-color-gray-gte-60); + + --wa-color-brand-lt-70: var(--wa-color-gray-lt-70); + --wa-color-brand-gte-70: var(--wa-color-gray-gte-70); + + --wa-color-brand-max-50: var(--wa-color-gray-max-50); + --wa-color-brand-min-50: var(--wa-color-gray-min-50); + --wa-color-brand-max-60: var(--wa-color-gray-max-60); + --wa-color-brand-min-60: var(--wa-color-gray-min-60); + --wa-color-brand-max-70: var(--wa-color-gray-max-70); + --wa-color-brand-min-70: var(--wa-color-gray-min-70); + + --wa-color-brand-on: var(--wa-color-gray-on); } diff --git a/src/styles/brand/green.css b/src/styles/brand/green.css index b0c392732..3a9768e06 100644 --- a/src/styles/brand/green.css +++ b/src/styles/brand/green.css @@ -1,5 +1,3 @@ -@import url('base.css'); - :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -17,5 +15,22 @@ --wa-color-brand-10: var(--wa-color-green-10); --wa-color-brand-05: var(--wa-color-green-05); --wa-color-brand: var(--wa-color-green); - --wa-color-brand-key: var(--wa-color-green-key); + + --wa-color-brand-lt-50: var(--wa-color-green-lt-50); + --wa-color-brand-gte-50: var(--wa-color-green-gte-50); + + --wa-color-brand-lt-60: var(--wa-color-green-lt-60); + --wa-color-brand-gte-60: var(--wa-color-green-gte-60); + + --wa-color-brand-lt-70: var(--wa-color-green-lt-70); + --wa-color-brand-gte-70: var(--wa-color-green-gte-70); + + --wa-color-brand-max-50: var(--wa-color-green-max-50); + --wa-color-brand-min-50: var(--wa-color-green-min-50); + --wa-color-brand-max-60: var(--wa-color-green-max-60); + --wa-color-brand-min-60: var(--wa-color-green-min-60); + --wa-color-brand-max-70: var(--wa-color-green-max-70); + --wa-color-brand-min-70: var(--wa-color-green-min-70); + + --wa-color-brand-on: var(--wa-color-green-on); } diff --git a/src/styles/brand/indigo.css b/src/styles/brand/indigo.css index b4516bceb..4eb083a65 100644 --- a/src/styles/brand/indigo.css +++ b/src/styles/brand/indigo.css @@ -1,5 +1,3 @@ -@import url('base.css'); - :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -17,5 +15,22 @@ --wa-color-brand-10: var(--wa-color-indigo-10); --wa-color-brand-05: var(--wa-color-indigo-05); --wa-color-brand: var(--wa-color-indigo); - --wa-color-brand-key: var(--wa-color-indigo-key); + + --wa-color-brand-lt-50: var(--wa-color-indigo-lt-50); + --wa-color-brand-gte-50: var(--wa-color-indigo-gte-50); + + --wa-color-brand-lt-60: var(--wa-color-indigo-lt-60); + --wa-color-brand-gte-60: var(--wa-color-indigo-gte-60); + + --wa-color-brand-lt-70: var(--wa-color-indigo-lt-70); + --wa-color-brand-gte-70: var(--wa-color-indigo-gte-70); + + --wa-color-brand-max-50: var(--wa-color-indigo-max-50); + --wa-color-brand-min-50: var(--wa-color-indigo-min-50); + --wa-color-brand-max-60: var(--wa-color-indigo-max-60); + --wa-color-brand-min-60: var(--wa-color-indigo-min-60); + --wa-color-brand-max-70: var(--wa-color-indigo-max-70); + --wa-color-brand-min-70: var(--wa-color-indigo-min-70); + + --wa-color-brand-on: var(--wa-color-indigo-on); } diff --git a/src/styles/brand/orange.css b/src/styles/brand/orange.css index b067fd064..da5fb937a 100644 --- a/src/styles/brand/orange.css +++ b/src/styles/brand/orange.css @@ -1,5 +1,3 @@ -@import url('base.css'); - :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -17,5 +15,22 @@ --wa-color-brand-10: var(--wa-color-orange-10); --wa-color-brand-05: var(--wa-color-orange-05); --wa-color-brand: var(--wa-color-orange); - --wa-color-brand-key: var(--wa-color-orange-key); + + --wa-color-brand-lt-50: var(--wa-color-orange-lt-50); + --wa-color-brand-gte-50: var(--wa-color-orange-gte-50); + + --wa-color-brand-lt-60: var(--wa-color-orange-lt-60); + --wa-color-brand-gte-60: var(--wa-color-orange-gte-60); + + --wa-color-brand-lt-70: var(--wa-color-orange-lt-70); + --wa-color-brand-gte-70: var(--wa-color-orange-gte-70); + + --wa-color-brand-max-50: var(--wa-color-orange-max-50); + --wa-color-brand-min-50: var(--wa-color-orange-min-50); + --wa-color-brand-max-60: var(--wa-color-orange-max-60); + --wa-color-brand-min-60: var(--wa-color-orange-min-60); + --wa-color-brand-max-70: var(--wa-color-orange-max-70); + --wa-color-brand-min-70: var(--wa-color-orange-min-70); + + --wa-color-brand-on: var(--wa-color-orange-on); } diff --git a/src/styles/brand/pink.css b/src/styles/brand/pink.css index 5ffcd8387..81610ff6d 100644 --- a/src/styles/brand/pink.css +++ b/src/styles/brand/pink.css @@ -1,5 +1,3 @@ -@import url('base.css'); - :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -17,5 +15,22 @@ --wa-color-brand-10: var(--wa-color-pink-10); --wa-color-brand-05: var(--wa-color-pink-05); --wa-color-brand: var(--wa-color-pink); - --wa-color-brand-key: var(--wa-color-pink-key); + + --wa-color-brand-lt-50: var(--wa-color-pink-lt-50); + --wa-color-brand-gte-50: var(--wa-color-pink-gte-50); + + --wa-color-brand-lt-60: var(--wa-color-pink-lt-60); + --wa-color-brand-gte-60: var(--wa-color-pink-gte-60); + + --wa-color-brand-lt-70: var(--wa-color-pink-lt-70); + --wa-color-brand-gte-70: var(--wa-color-pink-gte-70); + + --wa-color-brand-max-50: var(--wa-color-pink-max-50); + --wa-color-brand-min-50: var(--wa-color-pink-min-50); + --wa-color-brand-max-60: var(--wa-color-pink-max-60); + --wa-color-brand-min-60: var(--wa-color-pink-min-60); + --wa-color-brand-max-70: var(--wa-color-pink-max-70); + --wa-color-brand-min-70: var(--wa-color-pink-min-70); + + --wa-color-brand-on: var(--wa-color-pink-on); } diff --git a/src/styles/brand/purple.css b/src/styles/brand/purple.css index 84b11d4e5..0fcbf19de 100644 --- a/src/styles/brand/purple.css +++ b/src/styles/brand/purple.css @@ -1,5 +1,3 @@ -@import url('base.css'); - :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -17,5 +15,22 @@ --wa-color-brand-10: var(--wa-color-purple-10); --wa-color-brand-05: var(--wa-color-purple-05); --wa-color-brand: var(--wa-color-purple); - --wa-color-brand-key: var(--wa-color-purple-key); + + --wa-color-brand-lt-50: var(--wa-color-purple-lt-50); + --wa-color-brand-gte-50: var(--wa-color-purple-gte-50); + + --wa-color-brand-lt-60: var(--wa-color-purple-lt-60); + --wa-color-brand-gte-60: var(--wa-color-purple-gte-60); + + --wa-color-brand-lt-70: var(--wa-color-purple-lt-70); + --wa-color-brand-gte-70: var(--wa-color-purple-gte-70); + + --wa-color-brand-max-50: var(--wa-color-purple-max-50); + --wa-color-brand-min-50: var(--wa-color-purple-min-50); + --wa-color-brand-max-60: var(--wa-color-purple-max-60); + --wa-color-brand-min-60: var(--wa-color-purple-min-60); + --wa-color-brand-max-70: var(--wa-color-purple-max-70); + --wa-color-brand-min-70: var(--wa-color-purple-min-70); + + --wa-color-brand-on: var(--wa-color-purple-on); } diff --git a/src/styles/brand/red.css b/src/styles/brand/red.css index 823c1e304..cee3d7e28 100644 --- a/src/styles/brand/red.css +++ b/src/styles/brand/red.css @@ -1,5 +1,3 @@ -@import url('base.css'); - :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -17,5 +15,22 @@ --wa-color-brand-10: var(--wa-color-red-10); --wa-color-brand-05: var(--wa-color-red-05); --wa-color-brand: var(--wa-color-red); - --wa-color-brand-key: var(--wa-color-red-key); + + --wa-color-brand-lt-50: var(--wa-color-red-lt-50); + --wa-color-brand-gte-50: var(--wa-color-red-gte-50); + + --wa-color-brand-lt-60: var(--wa-color-red-lt-60); + --wa-color-brand-gte-60: var(--wa-color-red-gte-60); + + --wa-color-brand-lt-70: var(--wa-color-red-lt-70); + --wa-color-brand-gte-70: var(--wa-color-red-gte-70); + + --wa-color-brand-max-50: var(--wa-color-red-max-50); + --wa-color-brand-min-50: var(--wa-color-red-min-50); + --wa-color-brand-max-60: var(--wa-color-red-max-60); + --wa-color-brand-min-60: var(--wa-color-red-min-60); + --wa-color-brand-max-70: var(--wa-color-red-max-70); + --wa-color-brand-min-70: var(--wa-color-red-min-70); + + --wa-color-brand-on: var(--wa-color-red-on); } diff --git a/src/styles/brand/yellow.css b/src/styles/brand/yellow.css index abf5cea11..51d01e0f0 100644 --- a/src/styles/brand/yellow.css +++ b/src/styles/brand/yellow.css @@ -1,5 +1,3 @@ -@import url('base.css'); - :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -17,5 +15,22 @@ --wa-color-brand-10: var(--wa-color-yellow-10); --wa-color-brand-05: var(--wa-color-yellow-05); --wa-color-brand: var(--wa-color-yellow); - --wa-color-brand-key: var(--wa-color-yellow-key); + + --wa-color-brand-lt-50: var(--wa-color-yellow-lt-50); + --wa-color-brand-gte-50: var(--wa-color-yellow-gte-50); + + --wa-color-brand-lt-60: var(--wa-color-yellow-lt-60); + --wa-color-brand-gte-60: var(--wa-color-yellow-gte-60); + + --wa-color-brand-lt-70: var(--wa-color-yellow-lt-70); + --wa-color-brand-gte-70: var(--wa-color-yellow-gte-70); + + --wa-color-brand-max-50: var(--wa-color-yellow-max-50); + --wa-color-brand-min-50: var(--wa-color-yellow-min-50); + --wa-color-brand-max-60: var(--wa-color-yellow-max-60); + --wa-color-brand-min-60: var(--wa-color-yellow-min-60); + --wa-color-brand-max-70: var(--wa-color-yellow-max-70); + --wa-color-brand-min-70: var(--wa-color-yellow-min-70); + + --wa-color-brand-on: var(--wa-color-yellow-on); } diff --git a/src/styles/color/anodized.css b/src/styles/color/anodized.css index c0073ec2c..fc1b06a94 100644 --- a/src/styles/color/anodized.css +++ b/src/styles/color/anodized.css @@ -1,3 +1,5 @@ +@import url('base.css'); + :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -16,6 +18,20 @@ --wa-color-red: var(--wa-color-red-70); --wa-color-red-key: 70; + --wa-color-orange-95: oklch(96.462% 0.02077 52.138); + --wa-color-orange-90: oklch(92.556% 0.04363 51.242); + --wa-color-orange-80: #fdbb96 /* oklch(84.396% 0.09052 50.397) */; + --wa-color-orange-70: #eb9c74 /* oklch(76.151% 0.10953 47.299) */; + --wa-color-orange-60: #cf8162 /* oklch(67.86% 0.10698 42.148) */; + --wa-color-orange-50: #aa6248 /* oklch(57.281% 0.1014 40.415) */; + --wa-color-orange-40: #864834 /* oklch(47.233% 0.08958 39.166) */; + --wa-color-orange-30: #6b3727 /* oklch(39.974% 0.07776 38.975) */; + --wa-color-orange-20: #50271a /* oklch(32.519% 0.0649 38.022) */; + --wa-color-orange-10: #32160e /* oklch(23.873% 0.04713 38.423) */; + --wa-color-orange-05: #210c06 /* oklch(18.614% 0.03797 38.589) */; + --wa-color-orange: var(--wa-color-orange-70); + --wa-color-orange-key: 70; + --wa-color-yellow-95: #faf3e1 /* oklch(96.479% 0.02487 89.211) */; --wa-color-yellow-90: #f4e5be /* oklch(92.412% 0.0535 89.488) */; --wa-color-yellow-80: #eac673 /* oklch(84.03% 0.1101 86.581) */; diff --git a/src/styles/color/base.css b/src/styles/color/base.css new file mode 100644 index 000000000..802ab0c9f --- /dev/null +++ b/src/styles/color/base.css @@ -0,0 +1,338 @@ +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +:where([class^='wa-brand-'], [class*=' wa-brand-']), +:where(:root), +:host { + /** + * Conditional tokens for use in color-mix() + * --wa-color-{hue}-lt-N ➡️ 100% if key < N, 0% otherwise + * --wa-color-{hue}-gte-N ➡️ 100% if key >= N, 0% otherwise + */ + + --wa-color-red-lt-50: calc(clamp(0, 50 - var(--wa-color-red-key), 1) * 100%); + --wa-color-red-gte-50: calc(100% - var(--wa-color-red-lt-50)); + --wa-color-red-lt-60: calc(clamp(0, 60 - var(--wa-color-red-key), 1) * 100%); + --wa-color-red-gte-60: calc(100% - var(--wa-color-red-lt-60)); + --wa-color-red-lt-70: calc(clamp(0, 70 - var(--wa-color-red-key), 1) * 100%); + --wa-color-red-gte-70: calc(100% - var(--wa-color-red-lt-70)); + + --wa-color-orange-lt-50: calc(clamp(0, 50 - var(--wa-color-orange-key), 1) * 100%); + --wa-color-orange-gte-50: calc(100% - var(--wa-color-orange-lt-50)); + --wa-color-orange-lt-60: calc(clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%); + --wa-color-orange-gte-60: calc(100% - var(--wa-color-orange-lt-60)); + --wa-color-orange-lt-70: calc(clamp(0, 70 - var(--wa-color-orange-key), 1) * 100%); + --wa-color-orange-gte-70: calc(100% - var(--wa-color-orange-lt-70)); + + --wa-color-yellow-lt-50: calc(clamp(0, 50 - var(--wa-color-yellow-key), 1) * 100%); + --wa-color-yellow-gte-50: calc(100% - var(--wa-color-yellow-lt-50)); + --wa-color-yellow-lt-60: calc(clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%); + --wa-color-yellow-gte-60: calc(100% - var(--wa-color-yellow-lt-60)); + --wa-color-yellow-lt-70: calc(clamp(0, 70 - var(--wa-color-yellow-key), 1) * 100%); + --wa-color-yellow-gte-70: calc(100% - var(--wa-color-yellow-lt-70)); + + --wa-color-green-lt-50: calc(clamp(0, 50 - var(--wa-color-green-key), 1) * 100%); + --wa-color-green-gte-50: calc(100% - var(--wa-color-green-lt-50)); + --wa-color-green-lt-60: calc(clamp(0, 60 - var(--wa-color-green-key), 1) * 100%); + --wa-color-green-gte-60: calc(100% - var(--wa-color-green-lt-60)); + --wa-color-green-lt-70: calc(clamp(0, 70 - var(--wa-color-green-key), 1) * 100%); + --wa-color-green-gte-70: calc(100% - var(--wa-color-green-lt-70)); + + --wa-color-cyan-lt-50: calc(clamp(0, 50 - var(--wa-color-cyan-key), 1) * 100%); + --wa-color-cyan-gte-50: calc(100% - var(--wa-color-cyan-lt-50)); + --wa-color-cyan-lt-60: calc(clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%); + --wa-color-cyan-gte-60: calc(100% - var(--wa-color-cyan-lt-60)); + --wa-color-cyan-lt-70: calc(clamp(0, 70 - var(--wa-color-cyan-key), 1) * 100%); + --wa-color-cyan-gte-70: calc(100% - var(--wa-color-cyan-lt-70)); + + --wa-color-blue-lt-50: calc(clamp(0, 50 - var(--wa-color-blue-key), 1) * 100%); + --wa-color-blue-gte-50: calc(100% - var(--wa-color-blue-lt-50)); + --wa-color-blue-lt-60: calc(clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%); + --wa-color-blue-gte-60: calc(100% - var(--wa-color-blue-lt-60)); + --wa-color-blue-lt-70: calc(clamp(0, 70 - var(--wa-color-blue-key), 1) * 100%); + --wa-color-blue-gte-70: calc(100% - var(--wa-color-blue-lt-70)); + + --wa-color-indigo-lt-50: calc(clamp(0, 50 - var(--wa-color-indigo-key), 1) * 100%); + --wa-color-indigo-gte-50: calc(100% - var(--wa-color-indigo-lt-50)); + --wa-color-indigo-lt-60: calc(clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%); + --wa-color-indigo-gte-60: calc(100% - var(--wa-color-indigo-lt-60)); + --wa-color-indigo-lt-70: calc(clamp(0, 70 - var(--wa-color-indigo-key), 1) * 100%); + --wa-color-indigo-gte-70: calc(100% - var(--wa-color-indigo-lt-70)); + + --wa-color-purple-lt-50: calc(clamp(0, 50 - var(--wa-color-purple-key), 1) * 100%); + --wa-color-purple-gte-50: calc(100% - var(--wa-color-purple-lt-50)); + --wa-color-purple-lt-60: calc(clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%); + --wa-color-purple-gte-60: calc(100% - var(--wa-color-purple-lt-60)); + --wa-color-purple-lt-70: calc(clamp(0, 70 - var(--wa-color-purple-key), 1) * 100%); + --wa-color-purple-gte-70: calc(100% - var(--wa-color-purple-lt-70)); + + --wa-color-pink-lt-50: calc(clamp(0, 50 - var(--wa-color-pink-key), 1) * 100%); + --wa-color-pink-gte-50: calc(100% - var(--wa-color-pink-lt-50)); + --wa-color-pink-lt-60: calc(clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%); + --wa-color-pink-gte-60: calc(100% - var(--wa-color-pink-lt-60)); + --wa-color-pink-lt-70: calc(clamp(0, 70 - var(--wa-color-pink-key), 1) * 100%); + --wa-color-pink-gte-70: calc(100% - var(--wa-color-pink-lt-70)); + + --wa-color-gray-lt-50: calc(clamp(0, 50 - var(--wa-color-gray-key), 1) * 100%); + --wa-color-gray-gte-50: calc(100% - var(--wa-color-gray-lt-50)); + --wa-color-gray-lt-60: calc(clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%); + --wa-color-gray-gte-60: calc(100% - var(--wa-color-gray-lt-60)); + --wa-color-gray-lt-70: calc(clamp(0, 70 - var(--wa-color-gray-key), 1) * 100%); + --wa-color-gray-gte-70: calc(100% - var(--wa-color-gray-lt-70)); + + /* + * Convenience tokens for common tint cutoffs + * --wa-color-{hue}-N-max ➡️ var(--color-{hue}) if key <= N, var(--color-{hue}-N) otherwise + * --wa-color-{hue}-N-min ➡️ var(--color-{hue}) if key >= N, var(--color-{hue}-N) otherwise + */ + + --wa-color-red-max-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-50), var(--wa-color-red-50)); + --wa-color-red-min-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-50), var(--wa-color-red-50)); + --wa-color-red-max-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-60), var(--wa-color-red-60)); + --wa-color-red-min-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-60), var(--wa-color-red-60)); + --wa-color-red-max-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-70), var(--wa-color-red-70)); + --wa-color-red-min-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-70), var(--wa-color-red-70)); + + --wa-color-orange-max-50: color-mix( + in oklab, + var(--wa-color-orange) var(--wa-color-orange-lt-50), + var(--wa-color-orange-50) + ); + --wa-color-orange-min-50: color-mix( + in oklab, + var(--wa-color-orange) var(--wa-color-orange-gte-50), + var(--wa-color-orange-50) + ); + --wa-color-orange-max-60: color-mix( + in oklab, + var(--wa-color-orange) var(--wa-color-orange-lt-60), + var(--wa-color-orange-60) + ); + --wa-color-orange-min-60: color-mix( + in oklab, + var(--wa-color-orange) var(--wa-color-orange-gte-60), + var(--wa-color-orange-60) + ); + --wa-color-orange-max-70: color-mix( + in oklab, + var(--wa-color-orange) var(--wa-color-orange-lt-70), + var(--wa-color-orange-70) + ); + --wa-color-orange-min-70: color-mix( + in oklab, + var(--wa-color-orange) var(--wa-color-orange-gte-70), + var(--wa-color-orange-70) + ); + + --wa-color-yellow-max-50: color-mix( + in oklab, + var(--wa-color-yellow) var(--wa-color-yellow-lt-50), + var(--wa-color-yellow-50) + ); + --wa-color-yellow-min-50: color-mix( + in oklab, + var(--wa-color-yellow) var(--wa-color-yellow-gte-50), + var(--wa-color-yellow-50) + ); + --wa-color-yellow-max-60: color-mix( + in oklab, + var(--wa-color-yellow) var(--wa-color-yellow-lt-60), + var(--wa-color-yellow-60) + ); + --wa-color-yellow-min-60: color-mix( + in oklab, + var(--wa-color-yellow) var(--wa-color-yellow-gte-60), + var(--wa-color-yellow-60) + ); + --wa-color-yellow-max-70: color-mix( + in oklab, + var(--wa-color-yellow) var(--wa-color-yellow-lt-70), + var(--wa-color-yellow-70) + ); + --wa-color-yellow-min-70: color-mix( + in oklab, + var(--wa-color-yellow) var(--wa-color-yellow-gte-70), + var(--wa-color-yellow-70) + ); + + --wa-color-green-max-50: color-mix( + in oklab, + var(--wa-color-green) var(--wa-color-green-lt-50), + var(--wa-color-green-50) + ); + --wa-color-green-min-50: color-mix( + in oklab, + var(--wa-color-green) var(--wa-color-green-gte-50), + var(--wa-color-green-50) + ); + --wa-color-green-max-60: color-mix( + in oklab, + var(--wa-color-green) var(--wa-color-green-lt-60), + var(--wa-color-green-60) + ); + --wa-color-green-min-60: color-mix( + in oklab, + var(--wa-color-green) var(--wa-color-green-gte-60), + var(--wa-color-green-60) + ); + --wa-color-green-max-70: color-mix( + in oklab, + var(--wa-color-green) var(--wa-color-green-lt-70), + var(--wa-color-green-70) + ); + --wa-color-green-min-70: color-mix( + in oklab, + var(--wa-color-green) var(--wa-color-green-gte-70), + var(--wa-color-green-70) + ); + + --wa-color-cyan-max-50: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-50), var(--wa-color-cyan-50)); + --wa-color-cyan-min-50: color-mix( + in oklab, + var(--wa-color-cyan) var(--wa-color-cyan-gte-50), + var(--wa-color-cyan-50) + ); + --wa-color-cyan-max-60: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-60), var(--wa-color-cyan-60)); + --wa-color-cyan-min-60: color-mix( + in oklab, + var(--wa-color-cyan) var(--wa-color-cyan-gte-60), + var(--wa-color-cyan-60) + ); + --wa-color-cyan-max-70: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-70), var(--wa-color-cyan-70)); + --wa-color-cyan-min-70: color-mix( + in oklab, + var(--wa-color-cyan) var(--wa-color-cyan-gte-70), + var(--wa-color-cyan-70) + ); + + --wa-color-blue-max-50: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-50), var(--wa-color-blue-50)); + --wa-color-blue-min-50: color-mix( + in oklab, + var(--wa-color-blue) var(--wa-color-blue-gte-50), + var(--wa-color-blue-50) + ); + --wa-color-blue-max-60: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-60), var(--wa-color-blue-60)); + --wa-color-blue-min-60: color-mix( + in oklab, + var(--wa-color-blue) var(--wa-color-blue-gte-60), + var(--wa-color-blue-60) + ); + --wa-color-blue-max-70: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-70), var(--wa-color-blue-70)); + --wa-color-blue-min-70: color-mix( + in oklab, + var(--wa-color-blue) var(--wa-color-blue-gte-70), + var(--wa-color-blue-70) + ); + + --wa-color-indigo-max-50: color-mix( + in oklab, + var(--wa-color-indigo) var(--wa-color-indigo-lt-50), + var(--wa-color-indigo-50) + ); + --wa-color-indigo-min-50: color-mix( + in oklab, + var(--wa-color-indigo) var(--wa-color-indigo-gte-50), + var(--wa-color-indigo-50) + ); + --wa-color-indigo-max-60: color-mix( + in oklab, + var(--wa-color-indigo) var(--wa-color-indigo-lt-60), + var(--wa-color-indigo-60) + ); + --wa-color-indigo-min-60: color-mix( + in oklab, + var(--wa-color-indigo) var(--wa-color-indigo-gte-60), + var(--wa-color-indigo-60) + ); + --wa-color-indigo-max-70: color-mix( + in oklab, + var(--wa-color-indigo) var(--wa-color-indigo-lt-70), + var(--wa-color-indigo-70) + ); + --wa-color-indigo-min-70: color-mix( + in oklab, + var(--wa-color-indigo) var(--wa-color-indigo-gte-70), + var(--wa-color-indigo-70) + ); + + --wa-color-purple-max-50: color-mix( + in oklab, + var(--wa-color-purple) var(--wa-color-purple-lt-50), + var(--wa-color-purple-50) + ); + --wa-color-purple-min-50: color-mix( + in oklab, + var(--wa-color-purple) var(--wa-color-purple-gte-50), + var(--wa-color-purple-50) + ); + --wa-color-purple-max-60: color-mix( + in oklab, + var(--wa-color-purple) var(--wa-color-purple-lt-60), + var(--wa-color-purple-60) + ); + --wa-color-purple-min-60: color-mix( + in oklab, + var(--wa-color-purple) var(--wa-color-purple-gte-60), + var(--wa-color-purple-60) + ); + --wa-color-purple-max-70: color-mix( + in oklab, + var(--wa-color-purple) var(--wa-color-purple-lt-70), + var(--wa-color-purple-70) + ); + --wa-color-purple-min-70: color-mix( + in oklab, + var(--wa-color-purple) var(--wa-color-purple-gte-70), + var(--wa-color-purple-70) + ); + + --wa-color-pink-max-50: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-50), var(--wa-color-pink-50)); + --wa-color-pink-min-50: color-mix( + in oklab, + var(--wa-color-pink) var(--wa-color-pink-gte-50), + var(--wa-color-pink-50) + ); + --wa-color-pink-max-60: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-60), var(--wa-color-pink-60)); + --wa-color-pink-min-60: color-mix( + in oklab, + var(--wa-color-pink) var(--wa-color-pink-gte-60), + var(--wa-color-pink-60) + ); + --wa-color-pink-max-70: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-70), var(--wa-color-pink-70)); + --wa-color-pink-min-70: color-mix( + in oklab, + var(--wa-color-pink) var(--wa-color-pink-gte-70), + var(--wa-color-pink-70) + ); + + --wa-color-gray-max-50: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-50), var(--wa-color-gray-50)); + --wa-color-gray-min-50: color-mix( + in oklab, + var(--wa-color-gray) var(--wa-color-gray-gte-50), + var(--wa-color-gray-50) + ); + --wa-color-gray-max-60: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-60), var(--wa-color-gray-60)); + --wa-color-gray-min-60: color-mix( + in oklab, + var(--wa-color-gray) var(--wa-color-gray-gte-60), + var(--wa-color-gray-60) + ); + --wa-color-gray-max-70: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-70), var(--wa-color-gray-70)); + --wa-color-gray-min-70: color-mix( + in oklab, + var(--wa-color-gray) var(--wa-color-gray-gte-70), + var(--wa-color-gray-70) + ); + + /* Text color: white if key < 60, {hue}-10 otherwise */ + + --wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white); + --wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white); + --wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white); + --wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white); + --wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white); + --wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white); + --wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white); + --wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white); + --wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white); + --wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white); +} diff --git a/src/styles/color/bright.css b/src/styles/color/bright.css index 2e4f5f9a6..912b77c40 100644 --- a/src/styles/color/bright.css +++ b/src/styles/color/bright.css @@ -1,3 +1,5 @@ +@import url('base.css'); + :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -16,6 +18,20 @@ --wa-color-red: var(--wa-color-red-60); --wa-color-red-key: 60; + --wa-color-orange-95: oklch(96.406% 0.04001 53.476); + --wa-color-orange-90: oklch(92.395% 0.07984 53.06); + --wa-color-orange-80: oklch(84.389% 0.12224 47.981); + --wa-color-orange-70: oklch(76.55% 0.16521 42.512); + --wa-color-orange-60: #ea7237 /* oklch(68.444% 0.16501 44.349) */; + --wa-color-orange-50: #c0561a /* oklch(57.844% 0.15254 45.085) */; + --wa-color-orange-40: #963e05 /* oklch(47.639% 0.13153 45.898) */; + --wa-color-orange-30: oklch(40.376% 0.11554 45.517); + --wa-color-orange-20: oklch(32.94% 0.09927 45.913); + --wa-color-orange-10: oklch(24.083% 0.07743 46.027); + --wa-color-orange-05: oklch(18.817% 0.06098 48.455); + --wa-color-orange: var(--wa-color-orange-70); + --wa-color-orange-key: 70; + --wa-color-yellow-95: #fff4c0 /* oklch(96.32% 0.0677 97.497) */; --wa-color-yellow-90: #ffe579 /* oklch(92.176% 0.13122 96.089) */; --wa-color-yellow-80: #ffbf18 /* oklch(84.069% 0.16897 83.446) */; diff --git a/src/styles/color/classic.css b/src/styles/color/classic.css index 84ec49097..8d1c822fc 100644 --- a/src/styles/color/classic.css +++ b/src/styles/color/classic.css @@ -1,3 +1,5 @@ +@import url('base.css'); + :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -16,6 +18,20 @@ --wa-color-red: var(--wa-color-red-50); --wa-color-red-key: 50; + --wa-color-orange-95: oklch(96.245% 0.04153 59.224); + --wa-color-orange-90: oklch(92.468% 0.07656 58.647); + --wa-color-orange-80: oklch(84.375% 0.11283 54.179); + --wa-color-orange-70: #fb945a /* oklch(76.369% 0.14454 48.621) */; + --wa-color-orange-60: #f26b31 /* oklch(68.509% 0.18046 41.503) */; + --wa-color-orange-50: #cf4812 /* oklch(58.288% 0.18026 38.576) */; + --wa-color-orange-40: oklch(48.175% 0.16316 38.526); + --wa-color-orange-30: oklch(40.779% 0.13925 37.899); + --wa-color-orange-20: oklch(33.129% 0.11288 38.58); + --wa-color-orange-10: oklch(24.259% 0.0831 38.502); + --wa-color-orange-05: oklch(18.969% 0.06527 38.137); + --wa-color-orange: var(--wa-color-orange-60); + --wa-color-orange-key: 60; + --wa-color-yellow-95: #fef2bf /* oklch(95.823% 0.06674 96.369) */; --wa-color-yellow-90: #fde588 /* oklch(92.2% 0.11633 95.327) */; --wa-color-yellow-80: #f4c34e /* oklch(83.998% 0.14252 85.76) */; diff --git a/src/styles/color/default.css b/src/styles/color/default.css index 5cf3149a6..340f2d09a 100644 --- a/src/styles/color/default.css +++ b/src/styles/color/default.css @@ -1,3 +1,5 @@ +@import url('base.css'); + :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -16,6 +18,20 @@ --wa-color-red: var(--wa-color-red-50); --wa-color-red-key: 50; + --wa-color-orange-95: oklch(96.494% 0.0335 57.914); + --wa-color-orange-90: oklch(92.556% 0.06963 56.631); + --wa-color-orange-80: oklch(84.494% 0.12276 53.381); + --wa-color-orange-70: oklch(76.375% 0.17194 46.091); + --wa-color-orange-60: #eb713f /* oklch(68.398% 0.16422 41.446) */; + --wa-color-orange-50: #cb4b1d /* oklch(58.153% 0.17174 38.404) */; + --wa-color-orange-40: #a2310c /* oklch(48.028% 0.15488 36.538) */; + --wa-color-orange-30: #7f2810 /* oklch(40.591% 0.12506 35.663) */; + --wa-color-orange-20: #5d1d0e /* oklch(32.908% 0.09683 34.387) */; + --wa-color-orange-10: #3a1005 /* oklch(24.088% 0.06954 35.613) */; + --wa-color-orange-05: #270803 /* oklch(18.801% 0.05509 34.149) */; + --wa-color-orange: var(--wa-color-orange-70); + --wa-color-orange-key: 70; + --wa-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */; --wa-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */; --wa-color-yellow-80: #fac22b /* oklch(84.185% 0.16263 85.991) */; diff --git a/src/styles/color/elegant.css b/src/styles/color/elegant.css index 54121023f..3e45327b5 100644 --- a/src/styles/color/elegant.css +++ b/src/styles/color/elegant.css @@ -1,3 +1,5 @@ +@import url('base.css'); + :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -16,6 +18,20 @@ --wa-color-red: var(--wa-color-red-40); --wa-color-red-key: 40; + --wa-color-orange-95: oklch(96.238% 0.02664 61.788); + --wa-color-orange-90: #fbe1cc /* oklch(92.512% 0.04019 60.45) */; + --wa-color-orange-80: #edc1a0 /* oklch(84.097% 0.06661 58.236) */; + --wa-color-orange-70: #dda178 /* oklch(75.734% 0.09064 55.123) */; + --wa-color-orange-60: #cd8351 /* oklch(67.646% 0.1134 53.172) */; + --wa-color-orange-50: #b65d22 /* oklch(57.437% 0.13446 49.881) */; + --wa-color-orange-40: oklch(47.576% 0.13426 46.452); + --wa-color-orange-30: oklch(40.382% 0.12087 47.003); + --wa-color-orange-20: oklch(32.846% 0.0965 46.227); + --wa-color-orange-10: oklch(24.06% 0.06873 45.849); + --wa-color-orange-05: #260900 /* oklch(18.727% 0.05359 44.791) */; + --wa-color-orange: var(--wa-color-orange-50); + --wa-color-orange-key: 50; + --wa-color-yellow-95: #f7f4da /* oklch(96.266% 0.03422 101.63) */; --wa-color-yellow-90: #ede7c3 /* oklch(92.349% 0.04769 99.435) */; --wa-color-yellow-80: #d8ca96 /* oklch(83.793% 0.06999 94.829) */; diff --git a/src/styles/color/mild.css b/src/styles/color/mild.css index 90a957088..45f69f779 100644 --- a/src/styles/color/mild.css +++ b/src/styles/color/mild.css @@ -1,3 +1,5 @@ +@import url('base.css'); + :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -16,6 +18,20 @@ --wa-color-red: var(--wa-color-red-40); --wa-color-red-key: 40; + --wa-color-orange-95: oklch(96.126% 0.05417 66.333); + --wa-color-orange-90: oklch(92.413% 0.07898 62.545); + --wa-color-orange-80: #f9bd86 /* oklch(84.088% 0.09891 63.847) */; + --wa-color-orange-70: #e2a05f /* oklch(75.707% 0.11352 64.057) */; + --wa-color-orange-60: #d18228 /* oklch(67.572% 0.13809 64.146) */; + --wa-color-orange-50: oklch(57.202% 0.13583 64.309); + --wa-color-orange-40: oklch(47.462% 0.13789 64.939); + --wa-color-orange-30: oklch(40.049% 0.12025 65.207); + --wa-color-orange-20: oklch(32.552% 0.09777 64.859); + --wa-color-orange-10: oklch(23.884% 0.07141 64.246); + --wa-color-orange-05: oklch(18.698% 0.05597 65.589); + --wa-color-orange: var(--wa-color-orange-60); + --wa-color-orange-key: 60; + --wa-color-yellow-95: #fff4b3 /* oklch(96.064% 0.08319 99.657) */; --wa-color-yellow-90: #fee58c /* oklch(92.346% 0.11242 94.205) */; --wa-color-yellow-80: #e3c868 /* oklch(83.63% 0.12003 93.943) */; diff --git a/src/styles/color/natural.css b/src/styles/color/natural.css index f0b23aecc..8c3200ee4 100644 --- a/src/styles/color/natural.css +++ b/src/styles/color/natural.css @@ -1,3 +1,5 @@ +@import url('base.css'); + :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -16,6 +18,20 @@ --wa-color-red: var(--wa-color-red-50); --wa-color-red-key: 50; + --wa-color-orange-95: #f8f0ec /* oklch(96.084% 0.01043 54.557) */; + --wa-color-orange-90: #f2e3d8 /* oklch(92.485% 0.02211 56.694) */; + --wa-color-orange-80: #e4c4ad /* oklch(84.166% 0.04799 57.553) */; + --wa-color-orange-70: #d3a583 /* oklch(75.674% 0.07148 57.481) */; + --wa-color-orange-60: #bc8a65 /* oklch(67.319% 0.08062 57.054) */; + --wa-color-orange-50: #9e6940 /* oklch(56.757% 0.08845 56.746) */; + --wa-color-orange-40: #7e4d27 /* oklch(46.949% 0.08447 57.382) */; + --wa-color-orange-30: #673a17 /* oklch(39.774% 0.0793 55.768) */; + --wa-color-orange-20: #4f2906 /* oklch(32.45% 0.0725 57.629) */; + --wa-color-orange-10: #311702 /* oklch(23.759% 0.05361 57.126) */; + --wa-color-orange-05: #200d01 /* oklch(18.517% 0.04211 57.178) */; + --wa-color-orange: var(--wa-color-orange-50); + --wa-color-orange-key: 50; + --wa-color-yellow-95: #f6f1ea /* oklch(96.009% 0.01076 76.598) */; --wa-color-yellow-90: #eee5d7 /* oklch(92.521% 0.02111 79.091) */; --wa-color-yellow-80: #dbc8a8 /* oklch(84.033% 0.04791 80.753) */; diff --git a/src/styles/color/rudimentary.css b/src/styles/color/rudimentary.css index f455b5bb2..b1d2f32f3 100644 --- a/src/styles/color/rudimentary.css +++ b/src/styles/color/rudimentary.css @@ -1,3 +1,5 @@ +@import url('base.css'); + :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -16,6 +18,20 @@ --wa-color-red: var(--wa-color-red-50); --wa-color-red-key: 50; + --wa-color-orange-95: oklch(96.488% 0.04965 58.92); + --wa-color-orange-90: oklch(92.244% 0.08759 57.789); + --wa-color-orange-80: oklch(84.32% 0.12702 56.232); + --wa-color-orange-70: oklch(76.31% 0.17967 50.95); + --wa-color-orange-60: #e87431 /* oklch(68.352% 0.16354 47.083) */; + --wa-color-orange-50: oklch(58.23% 0.17947 43.3); + --wa-color-orange-40: oklch(48.089% 0.16071 40.798); + --wa-color-orange-30: oklch(40.708% 0.13699 39.616); + --wa-color-orange-20: oklch(33.124% 0.1121 39.599); + --wa-color-orange-10: oklch(24.257% 0.08204 39.602); + --wa-color-orange-05: oklch(18.966% 0.06414 39.606); + --wa-color-orange: var(--wa-color-orange-70); + --wa-color-orange-key: 70; + --wa-color-yellow-95: #fff5b4 /* oklch(96.281% 0.08306 100.4) */; --wa-color-yellow-90: #fde572 /* oklch(91.915% 0.13738 97.724) */; --wa-color-yellow-80: #f4c403 /* oklch(83.862% 0.17104 90.777) */; diff --git a/src/styles/color/scripts/palettes-analyzed.js b/src/styles/color/scripts/palettes-analyzed.js index 45430a753..d296b6457 100644 --- a/src/styles/color/scripts/palettes-analyzed.js +++ b/src/styles/color/scripts/palettes-analyzed.js @@ -24,15 +24,22 @@ for (let paletteId in palettes) { palettes[paletteId] = tokens; for (let hue in tokens) { - let tints = Object.assign({}, tokens[hue]); - tokens[hue] = tints; + let scale = Object.assign({}, tokens[hue]); + tokens[hue] = scale; - let maxChromaTint = DEFAULT_ACCENT; - let maxChroma = tints[DEFAULT_ACCENT].c || 0; + let maxChromaTint = DEFAULT_ACCENT; // TODO handle scale.core + let maxChroma = scale.core?.get('oklch.c') ?? (scale[DEFAULT_ACCENT].c || 0); - for (let tint in tints) { - let color = tints[tint].to('oklch'); - tints[tint] = color; + for (let tint in scale) { + let color = scale[tint]; + + if (!color || color.constructor.name !== 'Color') { + // Not a color + continue; + } + + color = color.to('oklch'); + scale[tint] = color; if (tint === '05') { // The object has both '5' and '05' keys, but '05' is out of order @@ -47,14 +54,14 @@ for (let paletteId in palettes) { } } - tints['05'] = tints['5']; + scale['05'] = scale['5']; - tints.maxChroma = tints.maxChromaRaw = maxChroma; - tints.maxChromaTint = tints.maxChromaTintRaw = maxChromaTint; + scale.maxChroma = scale.maxChromaRaw = maxChroma; + scale.maxChromaTint = scale.maxChromaTintRaw = maxChromaTint; if (maxChromaTint < MIN_ACCENT || maxChromaTint > MAX_ACCENT) { - tints.maxChromaTint = clamp(MIN_ACCENT, maxChromaTint, MAX_ACCENT); - tints.maxChroma = tints[maxChromaTint].c; + scale.maxChromaTint = clamp(MIN_ACCENT, maxChromaTint, MAX_ACCENT); + scale.maxChroma = scale[maxChromaTint].c; } } } diff --git a/src/styles/color/scripts/palettes.js b/src/styles/color/scripts/palettes.js index 1507b58d0..68cb59302 100644 --- a/src/styles/color/scripts/palettes.js +++ b/src/styles/color/scripts/palettes.js @@ -8,9 +8,11 @@ import fs from 'fs'; import path from 'path'; import { PALETTE_DIR } from './util.js'; -export const paletteFiles = fs.readdirSync(PALETTE_DIR + '/').filter(file => file.endsWith('.css')); +export const paletteFiles = fs + .readdirSync(PALETTE_DIR + '/') + .filter(file => file.endsWith('.css') && !file.endsWith('base.css')); export const declarationRegex = - /^\s*--wa-color-(?[a-z]+)-(?[0-9]+):\s*(?.+?)\s*(\/\*.+?\*\/)?\s*;$/gm; + /^\s*--wa-color-(?[a-z]+)(?:-(?[0-9]+|key))?:\s*(?.+?)\s*(\/\*.+?\*\/)?\s*;$/gm; export const rawCSS = {}; function parse(contents, file) { @@ -24,8 +26,24 @@ function parse(contents, file) { const ret = {}; for (let match of matches) { - let { hue, level, color } = match.groups; + let { hue, level = '', color } = match.groups; ret[hue] ??= {}; + let scale = ret[hue]; + + if (level === 'key') { + scale.maxChromaTint = color; + continue; + } + + if (!level) { + if (color.startsWith('var(')) { + // Core color aliased to another color, ignore + continue; + } else { + // Custom core color + level = 'core'; + } + } // Attempt to convert color to Color object, fall back to string if this fails // This will happen for e.g. colors defined via color-mix() @@ -38,13 +56,13 @@ function parse(contents, file) { if (level.startsWith('0')) { // Leading zeroes throw off sorting, add both properties // NOTE: Ideally one of the two would be added as non-enumerable, but then we cannot access it via 11ty data - ret[hue][level] = color; + scale[level] = color; // Drop leading zeroes level = level.replace(/^0+/, ''); } - ret[hue][level] = color; + scale[level] = color; } return ret; diff --git a/src/styles/color/scripts/postprocess.js b/src/styles/color/scripts/postprocess.js new file mode 100644 index 000000000..053f26173 --- /dev/null +++ b/src/styles/color/scripts/postprocess.js @@ -0,0 +1,162 @@ +/** + * Post-process palette CSS files to add core colors, oklch coordinates etc. + * Run via node postprocess.js + * Warning: Will overwrite existing files. Check the diff before committing! + */ +import chalk from 'chalk'; +import fs from 'fs'; +import path from 'path'; +import palettes from './palettes-analyzed.js'; +import { PALETTE_DIR, formatComparison, hueToChalk } from './util.js'; + +// TODO import from global data file instead of duplicating this data +const hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray']; +const huesChromatic = hues.slice(0, -1); + +/** If a hue is missing, how should it be generated from the neighboring hues? */ +const mixPercentage = { orange: 0.6 }; +const selector = paletteId => + [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join( + ',\n', + ); + +// Used for formatting warnings +const paletteIdMaxChars = Object.keys(palettes).reduce((max, id) => Math.max(max, id.length), 0); +const hueMaxChars = Object.keys(palettes.default).reduce((max, id) => Math.max(max, id.length), 0); + +const indent = ' '; + +const paletteIssues = { total: 0 }; + +for (let paletteId in palettes) { + const palette = palettes[paletteId]; + + let paletteCSS = ''; + let hueCSS = Object.fromEntries(hues.map(hue => [hue, ''])); + + for (let hue in palette) { + let scale = palette[hue]; + + if (scale.maxChromaTint != scale.maxChromaTintRaw) { + reportPaletteIssue( + `Clamping accent color to ${chalk.bold(scale.maxChromaTint)}, but peak chroma is in ${chalk.bold(scale.maxChromaTintRaw)} (${formatComparison(scale[scale.maxChromaTintRaw].c, scale[scale.maxChromaTint].c)})`, + { paletteId, hue: hue }, + ); + } + + hueCSS[hue] += scaleCSS(hue, scale); + } + + // Generate missing hues + for (let i = 0; i < hues.length; i++) { + let hue = hues[i]; + + if (hueCSS[hue]) { + continue; + } + + // Find previous and next hue to interpolate + // We assume gaps will always be at most 1 hue wide + let prevHue = huesChromatic[i - 1] ?? huesChromatic.at(-1); + let nextHue = huesChromatic[i + 1] ?? huesChromatic[0]; + + reportPaletteIssue(`Missing hue. Generating from ${prevHue} and ${nextHue}`, { paletteId, hue }); + + let prevScale = palette[prevHue]; + let nextScale = palette[nextHue]; + + let progress = mixPercentage[hue] ?? 0.5; + let scale = (palette[hue] = {}); + + scale.maxChromaTint = (1 - progress) * prevScale.maxChromaTint + progress * nextScale.maxChromaTint; + scale.maxChromaTint = Math.round(scale.maxChromaTint / 10) * 10; + + for (let tint in prevScale) { + if (tint === '05' || !(tint > 0)) { + continue; + } + + let prevColor = palette[prevHue][tint]; + let nextColor = palette[nextHue][tint]; + + let color = prevColor.mix(nextColor, progress, { space: 'oklch' }); + scale[tint] = color; + } + + // Ensure core color has the max chroma + let coreColor = scale[scale.maxChromaTint]; + coreColor.c = Math.max(...Object.values(scale).map(color => color.c || 0)) + 0.0002; + + hueCSS[hue] += scaleCSS(hue, scale); + } + + hueCSS = Object.values(hueCSS).filter(Boolean).join('\n\n'); + // TODO apply Prettier instead of faking it + paletteCSS = `${selector(paletteId)} {\n${hueCSS.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`; + + fs.writeFileSync(path.join(PALETTE_DIR, paletteId + '.css'), paletteCSS, 'utf8'); +} + +let issuePaletteCount = Object.keys(paletteIssues).length - 1; +console.info( + `🎨 Wrote ${Object.keys(palettes).length} palette files.` + + (paletteIssues.total > 0 + ? ` ${chalk.bold(paletteIssues.total)} issues found across ${chalk.bold(issuePaletteCount)} palettes.` + : ''), +); + +function reportPaletteIssue(issue, { paletteId, hue }) { + let palettePrefix = `[${paletteId}]`.padEnd(paletteIdMaxChars + 2); + + if (!paletteIssues[paletteId]) { + // First time encountering an issue with this palette + paletteIssues[paletteId] = { count: 0 }; + } else { + // Don't print palette id multiple times + palettePrefix = ' '.repeat(paletteIdMaxChars + 2); + } + + paletteIssues[paletteId].count++; + paletteIssues.total++; + + let msg = palettePrefix; + let huePrefix = ''; + + if (hue) { + huePrefix = hueToChalk(hue)(hue.padEnd(hueMaxChars + 2)); + } + + console.warn(`${msg}${huePrefix}${issue}`); +} + +function declareColor(color, hue, tint) { + tint = tint.padStart(2, '0'); + let ret = `--wa-color-${hue}-${tint}: `; + + if (color.inGamut('srgb')) { + ret += `${color.toString({ format: 'hex' })} /* ${color.toString()} */;`; + } else { + ret += `${color.toString()};`; + } + + return ret; +} + +function scaleCSS(hue, scale) { + let ret = []; + for (let tint in scale) { + if (tint === '05' || !(tint > 0)) { + // The object has both '5' and '05' keys, but '05' is out of order + // Also ignore non-tints + continue; + } + + let color = scale[tint]; + ret.push(declareColor(color, hue, tint)); + } + ret.reverse(); + + ret.push(`--wa-color-${hue}: var(--wa-color-${hue}-${scale.maxChromaTint});`); + ret.push(`--wa-color-${hue}-key: ${scale.maxChromaTint};`); + return ret.join('\n'); +} diff --git a/src/styles/color/scripts/tintless.js b/src/styles/color/scripts/tintless.js deleted file mode 100644 index 4277a2400..000000000 --- a/src/styles/color/scripts/tintless.js +++ /dev/null @@ -1,80 +0,0 @@ -/** - * Add tintless variables and OKLCH coords as comments to palette CSS files. - * Run via node tintless.js - * Warning: Will overwrite existing files. Check the diff before committing! - */ -import chalk from 'chalk'; -import fs from 'fs'; -import path from 'path'; -import palettes, { rawPalettes } from './palettes-analyzed.js'; -import { PALETTE_DIR, formatComparison, hueToChalk } from './util.js'; - -const selector = paletteId => - [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join( - ',\n', - ); - -// Used for formatting warnings -const paletteIdMaxChars = Object.keys(palettes).reduce((max, id) => Math.max(max, id.length), 0); -const hueMaxChars = Object.keys(palettes.default).reduce((max, id) => Math.max(max, id.length), 0); - -let issueCount = 0; -let issuePaletteCount = 0; - -for (let paletteId in palettes) { - const tokens = palettes[paletteId]; - - let css = ''; - let prefix = `[${paletteId}]`.padEnd(paletteIdMaxChars + 2); - - for (let hue in tokens) { - let tints = tokens[hue]; - - let tintCSS = ''; - - for (let tint in tints) { - if (tint === '05' || !(tint > 0)) { - // The object has both '5' and '05' keys, but '05' is out of order - // Also ignore non-tints - continue; - } - - let color = tints[tint]; - tint = tint.padStart(2, '0'); - - tintCSS = - `--wa-color-${hue}-${tint}: ${color.toString({ format: 'hex' })} /* ${color.toString()} */;\n` + tintCSS; - } - - if (tints.maxChromaTint != tints.maxChromaTintRaw) { - let huePrefix = hueToChalk(hue)(hue.padEnd(hueMaxChars + 2)); - - console.warn( - `${prefix} ${huePrefix}: Clamping accent color to ${chalk.bold(tints.maxChromaTint)}, but peak chroma is in ${chalk.bold(tints.maxChromaTintRaw)} (${formatComparison(tints[tints.maxChromaTintRaw].c, tints[tints.maxChromaTint].c)})`, - ); - issueCount++; - - if (prefix.trim()) { - // First time encountering an issue with this palette - issuePaletteCount++; - - // Don't print palette id multiple times - prefix = ' '.repeat(paletteIdMaxChars + 2); - } - } - - tintCSS += `--wa-color-${hue}: var(--wa-color-${hue}-${tints.maxChromaTint});\n`; - tintCSS += `--wa-color-${hue}-key: ${tints.maxChromaTint};\n`; - css += tintCSS + '\n'; - } - - let indent = ' '; - css = `${selector(paletteId)} {\n${css.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`; - - fs.writeFileSync(path.join(PALETTE_DIR, paletteId + '.css'), css, 'utf8'); -} - -console.info( - `🎨 Wrote ${Object.keys(palettes).length} palette files.` + - (issueCount > 0 ? ` ${chalk.bold(issueCount)} issues found across ${chalk.bold(issuePaletteCount)} palettes.` : ''), -); diff --git a/src/styles/color/vogue.css b/src/styles/color/vogue.css index 304eb19f4..7277a877d 100644 --- a/src/styles/color/vogue.css +++ b/src/styles/color/vogue.css @@ -1,3 +1,5 @@ +@import url('base.css'); + :where(:root), :host, :where([class^='wa-theme-'], [class*=' wa-theme-']), @@ -16,6 +18,20 @@ --wa-color-red: var(--wa-color-red-50); --wa-color-red-key: 50; + --wa-color-orange-95: oklch(96.355% 0.05982 62.448); + --wa-color-orange-90: oklch(92.371% 0.10134 60.314); + --wa-color-orange-80: oklch(84.228% 0.13101 54.157); + --wa-color-orange-70: oklch(76.275% 0.16839 51.143); + --wa-color-orange-60: #e67530 /* oklch(68.22% 0.16179 47.997) */; + --wa-color-orange-50: oklch(58.011% 0.16819 44.953); + --wa-color-orange-40: #9b390d /* oklch(47.739% 0.14004 40.585) */; + --wa-color-orange-30: #7a2b17 /* oklch(40.323% 0.11475 35.602) */; + --wa-color-orange-20: #5c1e0f /* oklch(32.963% 0.09552 34.666) */; + --wa-color-orange-10: #3a0f06 /* oklch(24.042% 0.07066 34.715) */; + --wa-color-orange-05: #270803 /* oklch(18.867% 0.05444 34.696) */; + --wa-color-orange: var(--wa-color-orange-70); + --wa-color-orange-key: 70; + --wa-color-yellow-95: #fef6ab /* oklch(96.234% 0.09455 102.83) */; --wa-color-yellow-90: #fde761 /* oklch(92.138% 0.15325 99.997) */; --wa-color-yellow-80: #f5c308 /* oklch(83.774% 0.17019 89.81) */; diff --git a/src/styles/danger/blue.css b/src/styles/danger/blue.css new file mode 100644 index 000000000..352ca8806 --- /dev/null +++ b/src/styles/danger/blue.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-danger-blue { + --wa-color-danger-95: var(--wa-color-blue-95); + --wa-color-danger-90: var(--wa-color-blue-90); + --wa-color-danger-80: var(--wa-color-blue-80); + --wa-color-danger-70: var(--wa-color-blue-70); + --wa-color-danger-60: var(--wa-color-blue-60); + --wa-color-danger-50: var(--wa-color-blue-50); + --wa-color-danger-40: var(--wa-color-blue-40); + --wa-color-danger-30: var(--wa-color-blue-30); + --wa-color-danger-20: var(--wa-color-blue-20); + --wa-color-danger-10: var(--wa-color-blue-10); + --wa-color-danger-05: var(--wa-color-blue-05); + --wa-color-danger: var(--wa-color-blue); + + --wa-color-danger-lt-50: var(--wa-color-blue-lt-50); + --wa-color-danger-gte-50: var(--wa-color-blue-gte-50); + + --wa-color-danger-lt-60: var(--wa-color-blue-lt-60); + --wa-color-danger-gte-60: var(--wa-color-blue-gte-60); + + --wa-color-danger-lt-70: var(--wa-color-blue-lt-70); + --wa-color-danger-gte-70: var(--wa-color-blue-gte-70); + + --wa-color-danger-max-50: var(--wa-color-blue-max-50); + --wa-color-danger-min-50: var(--wa-color-blue-min-50); + --wa-color-danger-max-60: var(--wa-color-blue-max-60); + --wa-color-danger-min-60: var(--wa-color-blue-min-60); + --wa-color-danger-max-70: var(--wa-color-blue-max-70); + --wa-color-danger-min-70: var(--wa-color-blue-min-70); + + --wa-color-danger-on: var(--wa-color-blue-on); +} diff --git a/src/styles/danger/cyan.css b/src/styles/danger/cyan.css new file mode 100644 index 000000000..bf1b3158b --- /dev/null +++ b/src/styles/danger/cyan.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-danger-cyan { + --wa-color-danger-95: var(--wa-color-cyan-95); + --wa-color-danger-90: var(--wa-color-cyan-90); + --wa-color-danger-80: var(--wa-color-cyan-80); + --wa-color-danger-70: var(--wa-color-cyan-70); + --wa-color-danger-60: var(--wa-color-cyan-60); + --wa-color-danger-50: var(--wa-color-cyan-50); + --wa-color-danger-40: var(--wa-color-cyan-40); + --wa-color-danger-30: var(--wa-color-cyan-30); + --wa-color-danger-20: var(--wa-color-cyan-20); + --wa-color-danger-10: var(--wa-color-cyan-10); + --wa-color-danger-05: var(--wa-color-cyan-05); + --wa-color-danger: var(--wa-color-cyan); + + --wa-color-danger-lt-50: var(--wa-color-cyan-lt-50); + --wa-color-danger-gte-50: var(--wa-color-cyan-gte-50); + + --wa-color-danger-lt-60: var(--wa-color-cyan-lt-60); + --wa-color-danger-gte-60: var(--wa-color-cyan-gte-60); + + --wa-color-danger-lt-70: var(--wa-color-cyan-lt-70); + --wa-color-danger-gte-70: var(--wa-color-cyan-gte-70); + + --wa-color-danger-max-50: var(--wa-color-cyan-max-50); + --wa-color-danger-min-50: var(--wa-color-cyan-min-50); + --wa-color-danger-max-60: var(--wa-color-cyan-max-60); + --wa-color-danger-min-60: var(--wa-color-cyan-min-60); + --wa-color-danger-max-70: var(--wa-color-cyan-max-70); + --wa-color-danger-min-70: var(--wa-color-cyan-min-70); + + --wa-color-danger-on: var(--wa-color-cyan-on); +} diff --git a/src/styles/danger/gray.css b/src/styles/danger/gray.css new file mode 100644 index 000000000..5c436068b --- /dev/null +++ b/src/styles/danger/gray.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-danger-gray { + --wa-color-danger-95: var(--wa-color-gray-95); + --wa-color-danger-90: var(--wa-color-gray-90); + --wa-color-danger-80: var(--wa-color-gray-80); + --wa-color-danger-70: var(--wa-color-gray-70); + --wa-color-danger-60: var(--wa-color-gray-60); + --wa-color-danger-50: var(--wa-color-gray-50); + --wa-color-danger-40: var(--wa-color-gray-40); + --wa-color-danger-30: var(--wa-color-gray-30); + --wa-color-danger-20: var(--wa-color-gray-20); + --wa-color-danger-10: var(--wa-color-gray-10); + --wa-color-danger-05: var(--wa-color-gray-05); + --wa-color-danger: var(--wa-color-gray); + + --wa-color-danger-lt-50: var(--wa-color-gray-lt-50); + --wa-color-danger-gte-50: var(--wa-color-gray-gte-50); + + --wa-color-danger-lt-60: var(--wa-color-gray-lt-60); + --wa-color-danger-gte-60: var(--wa-color-gray-gte-60); + + --wa-color-danger-lt-70: var(--wa-color-gray-lt-70); + --wa-color-danger-gte-70: var(--wa-color-gray-gte-70); + + --wa-color-danger-max-50: var(--wa-color-gray-max-50); + --wa-color-danger-min-50: var(--wa-color-gray-min-50); + --wa-color-danger-max-60: var(--wa-color-gray-max-60); + --wa-color-danger-min-60: var(--wa-color-gray-min-60); + --wa-color-danger-max-70: var(--wa-color-gray-max-70); + --wa-color-danger-min-70: var(--wa-color-gray-min-70); + + --wa-color-danger-on: var(--wa-color-gray-on); +} diff --git a/src/styles/danger/green.css b/src/styles/danger/green.css new file mode 100644 index 000000000..c24b3d7d1 --- /dev/null +++ b/src/styles/danger/green.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-danger-green { + --wa-color-danger-95: var(--wa-color-green-95); + --wa-color-danger-90: var(--wa-color-green-90); + --wa-color-danger-80: var(--wa-color-green-80); + --wa-color-danger-70: var(--wa-color-green-70); + --wa-color-danger-60: var(--wa-color-green-60); + --wa-color-danger-50: var(--wa-color-green-50); + --wa-color-danger-40: var(--wa-color-green-40); + --wa-color-danger-30: var(--wa-color-green-30); + --wa-color-danger-20: var(--wa-color-green-20); + --wa-color-danger-10: var(--wa-color-green-10); + --wa-color-danger-05: var(--wa-color-green-05); + --wa-color-danger: var(--wa-color-green); + + --wa-color-danger-lt-50: var(--wa-color-green-lt-50); + --wa-color-danger-gte-50: var(--wa-color-green-gte-50); + + --wa-color-danger-lt-60: var(--wa-color-green-lt-60); + --wa-color-danger-gte-60: var(--wa-color-green-gte-60); + + --wa-color-danger-lt-70: var(--wa-color-green-lt-70); + --wa-color-danger-gte-70: var(--wa-color-green-gte-70); + + --wa-color-danger-max-50: var(--wa-color-green-max-50); + --wa-color-danger-min-50: var(--wa-color-green-min-50); + --wa-color-danger-max-60: var(--wa-color-green-max-60); + --wa-color-danger-min-60: var(--wa-color-green-min-60); + --wa-color-danger-max-70: var(--wa-color-green-max-70); + --wa-color-danger-min-70: var(--wa-color-green-min-70); + + --wa-color-danger-on: var(--wa-color-green-on); +} diff --git a/src/styles/danger/indigo.css b/src/styles/danger/indigo.css new file mode 100644 index 000000000..a3c75da3d --- /dev/null +++ b/src/styles/danger/indigo.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-danger-indigo { + --wa-color-danger-95: var(--wa-color-indigo-95); + --wa-color-danger-90: var(--wa-color-indigo-90); + --wa-color-danger-80: var(--wa-color-indigo-80); + --wa-color-danger-70: var(--wa-color-indigo-70); + --wa-color-danger-60: var(--wa-color-indigo-60); + --wa-color-danger-50: var(--wa-color-indigo-50); + --wa-color-danger-40: var(--wa-color-indigo-40); + --wa-color-danger-30: var(--wa-color-indigo-30); + --wa-color-danger-20: var(--wa-color-indigo-20); + --wa-color-danger-10: var(--wa-color-indigo-10); + --wa-color-danger-05: var(--wa-color-indigo-05); + --wa-color-danger: var(--wa-color-indigo); + + --wa-color-danger-lt-50: var(--wa-color-indigo-lt-50); + --wa-color-danger-gte-50: var(--wa-color-indigo-gte-50); + + --wa-color-danger-lt-60: var(--wa-color-indigo-lt-60); + --wa-color-danger-gte-60: var(--wa-color-indigo-gte-60); + + --wa-color-danger-lt-70: var(--wa-color-indigo-lt-70); + --wa-color-danger-gte-70: var(--wa-color-indigo-gte-70); + + --wa-color-danger-max-50: var(--wa-color-indigo-max-50); + --wa-color-danger-min-50: var(--wa-color-indigo-min-50); + --wa-color-danger-max-60: var(--wa-color-indigo-max-60); + --wa-color-danger-min-60: var(--wa-color-indigo-min-60); + --wa-color-danger-max-70: var(--wa-color-indigo-max-70); + --wa-color-danger-min-70: var(--wa-color-indigo-min-70); + + --wa-color-danger-on: var(--wa-color-indigo-on); +} diff --git a/src/styles/danger/orange.css b/src/styles/danger/orange.css new file mode 100644 index 000000000..fb11dd590 --- /dev/null +++ b/src/styles/danger/orange.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-danger-orange { + --wa-color-danger-95: var(--wa-color-orange-95); + --wa-color-danger-90: var(--wa-color-orange-90); + --wa-color-danger-80: var(--wa-color-orange-80); + --wa-color-danger-70: var(--wa-color-orange-70); + --wa-color-danger-60: var(--wa-color-orange-60); + --wa-color-danger-50: var(--wa-color-orange-50); + --wa-color-danger-40: var(--wa-color-orange-40); + --wa-color-danger-30: var(--wa-color-orange-30); + --wa-color-danger-20: var(--wa-color-orange-20); + --wa-color-danger-10: var(--wa-color-orange-10); + --wa-color-danger-05: var(--wa-color-orange-05); + --wa-color-danger: var(--wa-color-orange); + + --wa-color-danger-lt-50: var(--wa-color-orange-lt-50); + --wa-color-danger-gte-50: var(--wa-color-orange-gte-50); + + --wa-color-danger-lt-60: var(--wa-color-orange-lt-60); + --wa-color-danger-gte-60: var(--wa-color-orange-gte-60); + + --wa-color-danger-lt-70: var(--wa-color-orange-lt-70); + --wa-color-danger-gte-70: var(--wa-color-orange-gte-70); + + --wa-color-danger-max-50: var(--wa-color-orange-max-50); + --wa-color-danger-min-50: var(--wa-color-orange-min-50); + --wa-color-danger-max-60: var(--wa-color-orange-max-60); + --wa-color-danger-min-60: var(--wa-color-orange-min-60); + --wa-color-danger-max-70: var(--wa-color-orange-max-70); + --wa-color-danger-min-70: var(--wa-color-orange-min-70); + + --wa-color-danger-on: var(--wa-color-orange-on); +} diff --git a/src/styles/danger/pink.css b/src/styles/danger/pink.css new file mode 100644 index 000000000..3e85eec73 --- /dev/null +++ b/src/styles/danger/pink.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-danger-pink { + --wa-color-danger-95: var(--wa-color-pink-95); + --wa-color-danger-90: var(--wa-color-pink-90); + --wa-color-danger-80: var(--wa-color-pink-80); + --wa-color-danger-70: var(--wa-color-pink-70); + --wa-color-danger-60: var(--wa-color-pink-60); + --wa-color-danger-50: var(--wa-color-pink-50); + --wa-color-danger-40: var(--wa-color-pink-40); + --wa-color-danger-30: var(--wa-color-pink-30); + --wa-color-danger-20: var(--wa-color-pink-20); + --wa-color-danger-10: var(--wa-color-pink-10); + --wa-color-danger-05: var(--wa-color-pink-05); + --wa-color-danger: var(--wa-color-pink); + + --wa-color-danger-lt-50: var(--wa-color-pink-lt-50); + --wa-color-danger-gte-50: var(--wa-color-pink-gte-50); + + --wa-color-danger-lt-60: var(--wa-color-pink-lt-60); + --wa-color-danger-gte-60: var(--wa-color-pink-gte-60); + + --wa-color-danger-lt-70: var(--wa-color-pink-lt-70); + --wa-color-danger-gte-70: var(--wa-color-pink-gte-70); + + --wa-color-danger-max-50: var(--wa-color-pink-max-50); + --wa-color-danger-min-50: var(--wa-color-pink-min-50); + --wa-color-danger-max-60: var(--wa-color-pink-max-60); + --wa-color-danger-min-60: var(--wa-color-pink-min-60); + --wa-color-danger-max-70: var(--wa-color-pink-max-70); + --wa-color-danger-min-70: var(--wa-color-pink-min-70); + + --wa-color-danger-on: var(--wa-color-pink-on); +} diff --git a/src/styles/danger/purple.css b/src/styles/danger/purple.css new file mode 100644 index 000000000..478005e31 --- /dev/null +++ b/src/styles/danger/purple.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-danger-purple { + --wa-color-danger-95: var(--wa-color-purple-95); + --wa-color-danger-90: var(--wa-color-purple-90); + --wa-color-danger-80: var(--wa-color-purple-80); + --wa-color-danger-70: var(--wa-color-purple-70); + --wa-color-danger-60: var(--wa-color-purple-60); + --wa-color-danger-50: var(--wa-color-purple-50); + --wa-color-danger-40: var(--wa-color-purple-40); + --wa-color-danger-30: var(--wa-color-purple-30); + --wa-color-danger-20: var(--wa-color-purple-20); + --wa-color-danger-10: var(--wa-color-purple-10); + --wa-color-danger-05: var(--wa-color-purple-05); + --wa-color-danger: var(--wa-color-purple); + + --wa-color-danger-lt-50: var(--wa-color-purple-lt-50); + --wa-color-danger-gte-50: var(--wa-color-purple-gte-50); + + --wa-color-danger-lt-60: var(--wa-color-purple-lt-60); + --wa-color-danger-gte-60: var(--wa-color-purple-gte-60); + + --wa-color-danger-lt-70: var(--wa-color-purple-lt-70); + --wa-color-danger-gte-70: var(--wa-color-purple-gte-70); + + --wa-color-danger-max-50: var(--wa-color-purple-max-50); + --wa-color-danger-min-50: var(--wa-color-purple-min-50); + --wa-color-danger-max-60: var(--wa-color-purple-max-60); + --wa-color-danger-min-60: var(--wa-color-purple-min-60); + --wa-color-danger-max-70: var(--wa-color-purple-max-70); + --wa-color-danger-min-70: var(--wa-color-purple-min-70); + + --wa-color-danger-on: var(--wa-color-purple-on); +} diff --git a/src/styles/danger/red.css b/src/styles/danger/red.css new file mode 100644 index 000000000..11457667e --- /dev/null +++ b/src/styles/danger/red.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-danger-red { + --wa-color-danger-95: var(--wa-color-red-95); + --wa-color-danger-90: var(--wa-color-red-90); + --wa-color-danger-80: var(--wa-color-red-80); + --wa-color-danger-70: var(--wa-color-red-70); + --wa-color-danger-60: var(--wa-color-red-60); + --wa-color-danger-50: var(--wa-color-red-50); + --wa-color-danger-40: var(--wa-color-red-40); + --wa-color-danger-30: var(--wa-color-red-30); + --wa-color-danger-20: var(--wa-color-red-20); + --wa-color-danger-10: var(--wa-color-red-10); + --wa-color-danger-05: var(--wa-color-red-05); + --wa-color-danger: var(--wa-color-red); + + --wa-color-danger-lt-50: var(--wa-color-red-lt-50); + --wa-color-danger-gte-50: var(--wa-color-red-gte-50); + + --wa-color-danger-lt-60: var(--wa-color-red-lt-60); + --wa-color-danger-gte-60: var(--wa-color-red-gte-60); + + --wa-color-danger-lt-70: var(--wa-color-red-lt-70); + --wa-color-danger-gte-70: var(--wa-color-red-gte-70); + + --wa-color-danger-max-50: var(--wa-color-red-max-50); + --wa-color-danger-min-50: var(--wa-color-red-min-50); + --wa-color-danger-max-60: var(--wa-color-red-max-60); + --wa-color-danger-min-60: var(--wa-color-red-min-60); + --wa-color-danger-max-70: var(--wa-color-red-max-70); + --wa-color-danger-min-70: var(--wa-color-red-min-70); + + --wa-color-danger-on: var(--wa-color-red-on); +} diff --git a/src/styles/danger/yellow.css b/src/styles/danger/yellow.css new file mode 100644 index 000000000..424e28687 --- /dev/null +++ b/src/styles/danger/yellow.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-danger-yellow { + --wa-color-danger-95: var(--wa-color-yellow-95); + --wa-color-danger-90: var(--wa-color-yellow-90); + --wa-color-danger-80: var(--wa-color-yellow-80); + --wa-color-danger-70: var(--wa-color-yellow-70); + --wa-color-danger-60: var(--wa-color-yellow-60); + --wa-color-danger-50: var(--wa-color-yellow-50); + --wa-color-danger-40: var(--wa-color-yellow-40); + --wa-color-danger-30: var(--wa-color-yellow-30); + --wa-color-danger-20: var(--wa-color-yellow-20); + --wa-color-danger-10: var(--wa-color-yellow-10); + --wa-color-danger-05: var(--wa-color-yellow-05); + --wa-color-danger: var(--wa-color-yellow); + + --wa-color-danger-lt-50: var(--wa-color-yellow-lt-50); + --wa-color-danger-gte-50: var(--wa-color-yellow-gte-50); + + --wa-color-danger-lt-60: var(--wa-color-yellow-lt-60); + --wa-color-danger-gte-60: var(--wa-color-yellow-gte-60); + + --wa-color-danger-lt-70: var(--wa-color-yellow-lt-70); + --wa-color-danger-gte-70: var(--wa-color-yellow-gte-70); + + --wa-color-danger-max-50: var(--wa-color-yellow-max-50); + --wa-color-danger-min-50: var(--wa-color-yellow-min-50); + --wa-color-danger-max-60: var(--wa-color-yellow-max-60); + --wa-color-danger-min-60: var(--wa-color-yellow-min-60); + --wa-color-danger-max-70: var(--wa-color-yellow-max-70); + --wa-color-danger-min-70: var(--wa-color-yellow-min-70); + + --wa-color-danger-on: var(--wa-color-yellow-on); +} diff --git a/src/styles/native/input.css b/src/styles/native/input.css index 246812a7a..7580e33d3 100644 --- a/src/styles/native/input.css +++ b/src/styles/native/input.css @@ -121,7 +121,8 @@ input:where(:not( font: inherit; } -.wa-pill, -:host([pill]) { - border-radius: var(--wa-border-radius-pill); +input.wa-pill, +textarea.wa-pill, +:host([pill]) .wa-text-field { + border-radius: var(--wa-border-radius-pill) !important; } diff --git a/src/styles/neutral/blue.css b/src/styles/neutral/blue.css new file mode 100644 index 000000000..bb31fcc06 --- /dev/null +++ b/src/styles/neutral/blue.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-neutral-blue { + --wa-color-neutral-95: var(--wa-color-blue-95); + --wa-color-neutral-90: var(--wa-color-blue-90); + --wa-color-neutral-80: var(--wa-color-blue-80); + --wa-color-neutral-70: var(--wa-color-blue-70); + --wa-color-neutral-60: var(--wa-color-blue-60); + --wa-color-neutral-50: var(--wa-color-blue-50); + --wa-color-neutral-40: var(--wa-color-blue-40); + --wa-color-neutral-30: var(--wa-color-blue-30); + --wa-color-neutral-20: var(--wa-color-blue-20); + --wa-color-neutral-10: var(--wa-color-blue-10); + --wa-color-neutral-05: var(--wa-color-blue-05); + --wa-color-neutral: var(--wa-color-blue); + + --wa-color-neutral-lt-50: var(--wa-color-blue-lt-50); + --wa-color-neutral-gte-50: var(--wa-color-blue-gte-50); + + --wa-color-neutral-lt-60: var(--wa-color-blue-lt-60); + --wa-color-neutral-gte-60: var(--wa-color-blue-gte-60); + + --wa-color-neutral-lt-70: var(--wa-color-blue-lt-70); + --wa-color-neutral-gte-70: var(--wa-color-blue-gte-70); + + --wa-color-neutral-max-50: var(--wa-color-blue-max-50); + --wa-color-neutral-min-50: var(--wa-color-blue-min-50); + --wa-color-neutral-max-60: var(--wa-color-blue-max-60); + --wa-color-neutral-min-60: var(--wa-color-blue-min-60); + --wa-color-neutral-max-70: var(--wa-color-blue-max-70); + --wa-color-neutral-min-70: var(--wa-color-blue-min-70); + + --wa-color-neutral-on: var(--wa-color-blue-on); +} diff --git a/src/styles/neutral/cyan.css b/src/styles/neutral/cyan.css new file mode 100644 index 000000000..671ca0ce5 --- /dev/null +++ b/src/styles/neutral/cyan.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-neutral-cyan { + --wa-color-neutral-95: var(--wa-color-cyan-95); + --wa-color-neutral-90: var(--wa-color-cyan-90); + --wa-color-neutral-80: var(--wa-color-cyan-80); + --wa-color-neutral-70: var(--wa-color-cyan-70); + --wa-color-neutral-60: var(--wa-color-cyan-60); + --wa-color-neutral-50: var(--wa-color-cyan-50); + --wa-color-neutral-40: var(--wa-color-cyan-40); + --wa-color-neutral-30: var(--wa-color-cyan-30); + --wa-color-neutral-20: var(--wa-color-cyan-20); + --wa-color-neutral-10: var(--wa-color-cyan-10); + --wa-color-neutral-05: var(--wa-color-cyan-05); + --wa-color-neutral: var(--wa-color-cyan); + + --wa-color-neutral-lt-50: var(--wa-color-cyan-lt-50); + --wa-color-neutral-gte-50: var(--wa-color-cyan-gte-50); + + --wa-color-neutral-lt-60: var(--wa-color-cyan-lt-60); + --wa-color-neutral-gte-60: var(--wa-color-cyan-gte-60); + + --wa-color-neutral-lt-70: var(--wa-color-cyan-lt-70); + --wa-color-neutral-gte-70: var(--wa-color-cyan-gte-70); + + --wa-color-neutral-max-50: var(--wa-color-cyan-max-50); + --wa-color-neutral-min-50: var(--wa-color-cyan-min-50); + --wa-color-neutral-max-60: var(--wa-color-cyan-max-60); + --wa-color-neutral-min-60: var(--wa-color-cyan-min-60); + --wa-color-neutral-max-70: var(--wa-color-cyan-max-70); + --wa-color-neutral-min-70: var(--wa-color-cyan-min-70); + + --wa-color-neutral-on: var(--wa-color-cyan-on); +} diff --git a/src/styles/neutral/gray.css b/src/styles/neutral/gray.css new file mode 100644 index 000000000..a606dd6b9 --- /dev/null +++ b/src/styles/neutral/gray.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-neutral-gray { + --wa-color-neutral-95: var(--wa-color-gray-95); + --wa-color-neutral-90: var(--wa-color-gray-90); + --wa-color-neutral-80: var(--wa-color-gray-80); + --wa-color-neutral-70: var(--wa-color-gray-70); + --wa-color-neutral-60: var(--wa-color-gray-60); + --wa-color-neutral-50: var(--wa-color-gray-50); + --wa-color-neutral-40: var(--wa-color-gray-40); + --wa-color-neutral-30: var(--wa-color-gray-30); + --wa-color-neutral-20: var(--wa-color-gray-20); + --wa-color-neutral-10: var(--wa-color-gray-10); + --wa-color-neutral-05: var(--wa-color-gray-05); + --wa-color-neutral: var(--wa-color-gray); + + --wa-color-neutral-lt-50: var(--wa-color-gray-lt-50); + --wa-color-neutral-gte-50: var(--wa-color-gray-gte-50); + + --wa-color-neutral-lt-60: var(--wa-color-gray-lt-60); + --wa-color-neutral-gte-60: var(--wa-color-gray-gte-60); + + --wa-color-neutral-lt-70: var(--wa-color-gray-lt-70); + --wa-color-neutral-gte-70: var(--wa-color-gray-gte-70); + + --wa-color-neutral-max-50: var(--wa-color-gray-max-50); + --wa-color-neutral-min-50: var(--wa-color-gray-min-50); + --wa-color-neutral-max-60: var(--wa-color-gray-max-60); + --wa-color-neutral-min-60: var(--wa-color-gray-min-60); + --wa-color-neutral-max-70: var(--wa-color-gray-max-70); + --wa-color-neutral-min-70: var(--wa-color-gray-min-70); + + --wa-color-neutral-on: var(--wa-color-gray-on); +} diff --git a/src/styles/neutral/green.css b/src/styles/neutral/green.css new file mode 100644 index 000000000..91fa062bb --- /dev/null +++ b/src/styles/neutral/green.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-neutral-green { + --wa-color-neutral-95: var(--wa-color-green-95); + --wa-color-neutral-90: var(--wa-color-green-90); + --wa-color-neutral-80: var(--wa-color-green-80); + --wa-color-neutral-70: var(--wa-color-green-70); + --wa-color-neutral-60: var(--wa-color-green-60); + --wa-color-neutral-50: var(--wa-color-green-50); + --wa-color-neutral-40: var(--wa-color-green-40); + --wa-color-neutral-30: var(--wa-color-green-30); + --wa-color-neutral-20: var(--wa-color-green-20); + --wa-color-neutral-10: var(--wa-color-green-10); + --wa-color-neutral-05: var(--wa-color-green-05); + --wa-color-neutral: var(--wa-color-green); + + --wa-color-neutral-lt-50: var(--wa-color-green-lt-50); + --wa-color-neutral-gte-50: var(--wa-color-green-gte-50); + + --wa-color-neutral-lt-60: var(--wa-color-green-lt-60); + --wa-color-neutral-gte-60: var(--wa-color-green-gte-60); + + --wa-color-neutral-lt-70: var(--wa-color-green-lt-70); + --wa-color-neutral-gte-70: var(--wa-color-green-gte-70); + + --wa-color-neutral-max-50: var(--wa-color-green-max-50); + --wa-color-neutral-min-50: var(--wa-color-green-min-50); + --wa-color-neutral-max-60: var(--wa-color-green-max-60); + --wa-color-neutral-min-60: var(--wa-color-green-min-60); + --wa-color-neutral-max-70: var(--wa-color-green-max-70); + --wa-color-neutral-min-70: var(--wa-color-green-min-70); + + --wa-color-neutral-on: var(--wa-color-green-on); +} diff --git a/src/styles/neutral/indigo.css b/src/styles/neutral/indigo.css new file mode 100644 index 000000000..7f126353c --- /dev/null +++ b/src/styles/neutral/indigo.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-neutral-indigo { + --wa-color-neutral-95: var(--wa-color-indigo-95); + --wa-color-neutral-90: var(--wa-color-indigo-90); + --wa-color-neutral-80: var(--wa-color-indigo-80); + --wa-color-neutral-70: var(--wa-color-indigo-70); + --wa-color-neutral-60: var(--wa-color-indigo-60); + --wa-color-neutral-50: var(--wa-color-indigo-50); + --wa-color-neutral-40: var(--wa-color-indigo-40); + --wa-color-neutral-30: var(--wa-color-indigo-30); + --wa-color-neutral-20: var(--wa-color-indigo-20); + --wa-color-neutral-10: var(--wa-color-indigo-10); + --wa-color-neutral-05: var(--wa-color-indigo-05); + --wa-color-neutral: var(--wa-color-indigo); + + --wa-color-neutral-lt-50: var(--wa-color-indigo-lt-50); + --wa-color-neutral-gte-50: var(--wa-color-indigo-gte-50); + + --wa-color-neutral-lt-60: var(--wa-color-indigo-lt-60); + --wa-color-neutral-gte-60: var(--wa-color-indigo-gte-60); + + --wa-color-neutral-lt-70: var(--wa-color-indigo-lt-70); + --wa-color-neutral-gte-70: var(--wa-color-indigo-gte-70); + + --wa-color-neutral-max-50: var(--wa-color-indigo-max-50); + --wa-color-neutral-min-50: var(--wa-color-indigo-min-50); + --wa-color-neutral-max-60: var(--wa-color-indigo-max-60); + --wa-color-neutral-min-60: var(--wa-color-indigo-min-60); + --wa-color-neutral-max-70: var(--wa-color-indigo-max-70); + --wa-color-neutral-min-70: var(--wa-color-indigo-min-70); + + --wa-color-neutral-on: var(--wa-color-indigo-on); +} diff --git a/src/styles/neutral/orange.css b/src/styles/neutral/orange.css new file mode 100644 index 000000000..d025333e2 --- /dev/null +++ b/src/styles/neutral/orange.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-neutral-orange { + --wa-color-neutral-95: var(--wa-color-orange-95); + --wa-color-neutral-90: var(--wa-color-orange-90); + --wa-color-neutral-80: var(--wa-color-orange-80); + --wa-color-neutral-70: var(--wa-color-orange-70); + --wa-color-neutral-60: var(--wa-color-orange-60); + --wa-color-neutral-50: var(--wa-color-orange-50); + --wa-color-neutral-40: var(--wa-color-orange-40); + --wa-color-neutral-30: var(--wa-color-orange-30); + --wa-color-neutral-20: var(--wa-color-orange-20); + --wa-color-neutral-10: var(--wa-color-orange-10); + --wa-color-neutral-05: var(--wa-color-orange-05); + --wa-color-neutral: var(--wa-color-orange); + + --wa-color-neutral-lt-50: var(--wa-color-orange-lt-50); + --wa-color-neutral-gte-50: var(--wa-color-orange-gte-50); + + --wa-color-neutral-lt-60: var(--wa-color-orange-lt-60); + --wa-color-neutral-gte-60: var(--wa-color-orange-gte-60); + + --wa-color-neutral-lt-70: var(--wa-color-orange-lt-70); + --wa-color-neutral-gte-70: var(--wa-color-orange-gte-70); + + --wa-color-neutral-max-50: var(--wa-color-orange-max-50); + --wa-color-neutral-min-50: var(--wa-color-orange-min-50); + --wa-color-neutral-max-60: var(--wa-color-orange-max-60); + --wa-color-neutral-min-60: var(--wa-color-orange-min-60); + --wa-color-neutral-max-70: var(--wa-color-orange-max-70); + --wa-color-neutral-min-70: var(--wa-color-orange-min-70); + + --wa-color-neutral-on: var(--wa-color-orange-on); +} diff --git a/src/styles/neutral/pink.css b/src/styles/neutral/pink.css new file mode 100644 index 000000000..c45d19dfe --- /dev/null +++ b/src/styles/neutral/pink.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-neutral-pink { + --wa-color-neutral-95: var(--wa-color-pink-95); + --wa-color-neutral-90: var(--wa-color-pink-90); + --wa-color-neutral-80: var(--wa-color-pink-80); + --wa-color-neutral-70: var(--wa-color-pink-70); + --wa-color-neutral-60: var(--wa-color-pink-60); + --wa-color-neutral-50: var(--wa-color-pink-50); + --wa-color-neutral-40: var(--wa-color-pink-40); + --wa-color-neutral-30: var(--wa-color-pink-30); + --wa-color-neutral-20: var(--wa-color-pink-20); + --wa-color-neutral-10: var(--wa-color-pink-10); + --wa-color-neutral-05: var(--wa-color-pink-05); + --wa-color-neutral: var(--wa-color-pink); + + --wa-color-neutral-lt-50: var(--wa-color-pink-lt-50); + --wa-color-neutral-gte-50: var(--wa-color-pink-gte-50); + + --wa-color-neutral-lt-60: var(--wa-color-pink-lt-60); + --wa-color-neutral-gte-60: var(--wa-color-pink-gte-60); + + --wa-color-neutral-lt-70: var(--wa-color-pink-lt-70); + --wa-color-neutral-gte-70: var(--wa-color-pink-gte-70); + + --wa-color-neutral-max-50: var(--wa-color-pink-max-50); + --wa-color-neutral-min-50: var(--wa-color-pink-min-50); + --wa-color-neutral-max-60: var(--wa-color-pink-max-60); + --wa-color-neutral-min-60: var(--wa-color-pink-min-60); + --wa-color-neutral-max-70: var(--wa-color-pink-max-70); + --wa-color-neutral-min-70: var(--wa-color-pink-min-70); + + --wa-color-neutral-on: var(--wa-color-pink-on); +} diff --git a/src/styles/neutral/purple.css b/src/styles/neutral/purple.css new file mode 100644 index 000000000..5dae2f390 --- /dev/null +++ b/src/styles/neutral/purple.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-neutral-purple { + --wa-color-neutral-95: var(--wa-color-purple-95); + --wa-color-neutral-90: var(--wa-color-purple-90); + --wa-color-neutral-80: var(--wa-color-purple-80); + --wa-color-neutral-70: var(--wa-color-purple-70); + --wa-color-neutral-60: var(--wa-color-purple-60); + --wa-color-neutral-50: var(--wa-color-purple-50); + --wa-color-neutral-40: var(--wa-color-purple-40); + --wa-color-neutral-30: var(--wa-color-purple-30); + --wa-color-neutral-20: var(--wa-color-purple-20); + --wa-color-neutral-10: var(--wa-color-purple-10); + --wa-color-neutral-05: var(--wa-color-purple-05); + --wa-color-neutral: var(--wa-color-purple); + + --wa-color-neutral-lt-50: var(--wa-color-purple-lt-50); + --wa-color-neutral-gte-50: var(--wa-color-purple-gte-50); + + --wa-color-neutral-lt-60: var(--wa-color-purple-lt-60); + --wa-color-neutral-gte-60: var(--wa-color-purple-gte-60); + + --wa-color-neutral-lt-70: var(--wa-color-purple-lt-70); + --wa-color-neutral-gte-70: var(--wa-color-purple-gte-70); + + --wa-color-neutral-max-50: var(--wa-color-purple-max-50); + --wa-color-neutral-min-50: var(--wa-color-purple-min-50); + --wa-color-neutral-max-60: var(--wa-color-purple-max-60); + --wa-color-neutral-min-60: var(--wa-color-purple-min-60); + --wa-color-neutral-max-70: var(--wa-color-purple-max-70); + --wa-color-neutral-min-70: var(--wa-color-purple-min-70); + + --wa-color-neutral-on: var(--wa-color-purple-on); +} diff --git a/src/styles/neutral/red.css b/src/styles/neutral/red.css new file mode 100644 index 000000000..4c1c37f13 --- /dev/null +++ b/src/styles/neutral/red.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-neutral-red { + --wa-color-neutral-95: var(--wa-color-red-95); + --wa-color-neutral-90: var(--wa-color-red-90); + --wa-color-neutral-80: var(--wa-color-red-80); + --wa-color-neutral-70: var(--wa-color-red-70); + --wa-color-neutral-60: var(--wa-color-red-60); + --wa-color-neutral-50: var(--wa-color-red-50); + --wa-color-neutral-40: var(--wa-color-red-40); + --wa-color-neutral-30: var(--wa-color-red-30); + --wa-color-neutral-20: var(--wa-color-red-20); + --wa-color-neutral-10: var(--wa-color-red-10); + --wa-color-neutral-05: var(--wa-color-red-05); + --wa-color-neutral: var(--wa-color-red); + + --wa-color-neutral-lt-50: var(--wa-color-red-lt-50); + --wa-color-neutral-gte-50: var(--wa-color-red-gte-50); + + --wa-color-neutral-lt-60: var(--wa-color-red-lt-60); + --wa-color-neutral-gte-60: var(--wa-color-red-gte-60); + + --wa-color-neutral-lt-70: var(--wa-color-red-lt-70); + --wa-color-neutral-gte-70: var(--wa-color-red-gte-70); + + --wa-color-neutral-max-50: var(--wa-color-red-max-50); + --wa-color-neutral-min-50: var(--wa-color-red-min-50); + --wa-color-neutral-max-60: var(--wa-color-red-max-60); + --wa-color-neutral-min-60: var(--wa-color-red-min-60); + --wa-color-neutral-max-70: var(--wa-color-red-max-70); + --wa-color-neutral-min-70: var(--wa-color-red-min-70); + + --wa-color-neutral-on: var(--wa-color-red-on); +} diff --git a/src/styles/neutral/yellow.css b/src/styles/neutral/yellow.css new file mode 100644 index 000000000..ed860a5bb --- /dev/null +++ b/src/styles/neutral/yellow.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-neutral-yellow { + --wa-color-neutral-95: var(--wa-color-yellow-95); + --wa-color-neutral-90: var(--wa-color-yellow-90); + --wa-color-neutral-80: var(--wa-color-yellow-80); + --wa-color-neutral-70: var(--wa-color-yellow-70); + --wa-color-neutral-60: var(--wa-color-yellow-60); + --wa-color-neutral-50: var(--wa-color-yellow-50); + --wa-color-neutral-40: var(--wa-color-yellow-40); + --wa-color-neutral-30: var(--wa-color-yellow-30); + --wa-color-neutral-20: var(--wa-color-yellow-20); + --wa-color-neutral-10: var(--wa-color-yellow-10); + --wa-color-neutral-05: var(--wa-color-yellow-05); + --wa-color-neutral: var(--wa-color-yellow); + + --wa-color-neutral-lt-50: var(--wa-color-yellow-lt-50); + --wa-color-neutral-gte-50: var(--wa-color-yellow-gte-50); + + --wa-color-neutral-lt-60: var(--wa-color-yellow-lt-60); + --wa-color-neutral-gte-60: var(--wa-color-yellow-gte-60); + + --wa-color-neutral-lt-70: var(--wa-color-yellow-lt-70); + --wa-color-neutral-gte-70: var(--wa-color-yellow-gte-70); + + --wa-color-neutral-max-50: var(--wa-color-yellow-max-50); + --wa-color-neutral-min-50: var(--wa-color-yellow-min-50); + --wa-color-neutral-max-60: var(--wa-color-yellow-max-60); + --wa-color-neutral-min-60: var(--wa-color-yellow-min-60); + --wa-color-neutral-max-70: var(--wa-color-yellow-max-70); + --wa-color-neutral-min-70: var(--wa-color-yellow-min-70); + + --wa-color-neutral-on: var(--wa-color-yellow-on); +} diff --git a/src/styles/success/blue.css b/src/styles/success/blue.css new file mode 100644 index 000000000..ea52bb405 --- /dev/null +++ b/src/styles/success/blue.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-success-blue { + --wa-color-success-95: var(--wa-color-blue-95); + --wa-color-success-90: var(--wa-color-blue-90); + --wa-color-success-80: var(--wa-color-blue-80); + --wa-color-success-70: var(--wa-color-blue-70); + --wa-color-success-60: var(--wa-color-blue-60); + --wa-color-success-50: var(--wa-color-blue-50); + --wa-color-success-40: var(--wa-color-blue-40); + --wa-color-success-30: var(--wa-color-blue-30); + --wa-color-success-20: var(--wa-color-blue-20); + --wa-color-success-10: var(--wa-color-blue-10); + --wa-color-success-05: var(--wa-color-blue-05); + --wa-color-success: var(--wa-color-blue); + + --wa-color-success-lt-50: var(--wa-color-blue-lt-50); + --wa-color-success-gte-50: var(--wa-color-blue-gte-50); + + --wa-color-success-lt-60: var(--wa-color-blue-lt-60); + --wa-color-success-gte-60: var(--wa-color-blue-gte-60); + + --wa-color-success-lt-70: var(--wa-color-blue-lt-70); + --wa-color-success-gte-70: var(--wa-color-blue-gte-70); + + --wa-color-success-max-50: var(--wa-color-blue-max-50); + --wa-color-success-min-50: var(--wa-color-blue-min-50); + --wa-color-success-max-60: var(--wa-color-blue-max-60); + --wa-color-success-min-60: var(--wa-color-blue-min-60); + --wa-color-success-max-70: var(--wa-color-blue-max-70); + --wa-color-success-min-70: var(--wa-color-blue-min-70); + + --wa-color-success-on: var(--wa-color-blue-on); +} diff --git a/src/styles/success/cyan.css b/src/styles/success/cyan.css new file mode 100644 index 000000000..f04c86bea --- /dev/null +++ b/src/styles/success/cyan.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-success-cyan { + --wa-color-success-95: var(--wa-color-cyan-95); + --wa-color-success-90: var(--wa-color-cyan-90); + --wa-color-success-80: var(--wa-color-cyan-80); + --wa-color-success-70: var(--wa-color-cyan-70); + --wa-color-success-60: var(--wa-color-cyan-60); + --wa-color-success-50: var(--wa-color-cyan-50); + --wa-color-success-40: var(--wa-color-cyan-40); + --wa-color-success-30: var(--wa-color-cyan-30); + --wa-color-success-20: var(--wa-color-cyan-20); + --wa-color-success-10: var(--wa-color-cyan-10); + --wa-color-success-05: var(--wa-color-cyan-05); + --wa-color-success: var(--wa-color-cyan); + + --wa-color-success-lt-50: var(--wa-color-cyan-lt-50); + --wa-color-success-gte-50: var(--wa-color-cyan-gte-50); + + --wa-color-success-lt-60: var(--wa-color-cyan-lt-60); + --wa-color-success-gte-60: var(--wa-color-cyan-gte-60); + + --wa-color-success-lt-70: var(--wa-color-cyan-lt-70); + --wa-color-success-gte-70: var(--wa-color-cyan-gte-70); + + --wa-color-success-max-50: var(--wa-color-cyan-max-50); + --wa-color-success-min-50: var(--wa-color-cyan-min-50); + --wa-color-success-max-60: var(--wa-color-cyan-max-60); + --wa-color-success-min-60: var(--wa-color-cyan-min-60); + --wa-color-success-max-70: var(--wa-color-cyan-max-70); + --wa-color-success-min-70: var(--wa-color-cyan-min-70); + + --wa-color-success-on: var(--wa-color-cyan-on); +} diff --git a/src/styles/success/gray.css b/src/styles/success/gray.css new file mode 100644 index 000000000..1ef3cd2bc --- /dev/null +++ b/src/styles/success/gray.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-success-gray { + --wa-color-success-95: var(--wa-color-gray-95); + --wa-color-success-90: var(--wa-color-gray-90); + --wa-color-success-80: var(--wa-color-gray-80); + --wa-color-success-70: var(--wa-color-gray-70); + --wa-color-success-60: var(--wa-color-gray-60); + --wa-color-success-50: var(--wa-color-gray-50); + --wa-color-success-40: var(--wa-color-gray-40); + --wa-color-success-30: var(--wa-color-gray-30); + --wa-color-success-20: var(--wa-color-gray-20); + --wa-color-success-10: var(--wa-color-gray-10); + --wa-color-success-05: var(--wa-color-gray-05); + --wa-color-success: var(--wa-color-gray); + + --wa-color-success-lt-50: var(--wa-color-gray-lt-50); + --wa-color-success-gte-50: var(--wa-color-gray-gte-50); + + --wa-color-success-lt-60: var(--wa-color-gray-lt-60); + --wa-color-success-gte-60: var(--wa-color-gray-gte-60); + + --wa-color-success-lt-70: var(--wa-color-gray-lt-70); + --wa-color-success-gte-70: var(--wa-color-gray-gte-70); + + --wa-color-success-max-50: var(--wa-color-gray-max-50); + --wa-color-success-min-50: var(--wa-color-gray-min-50); + --wa-color-success-max-60: var(--wa-color-gray-max-60); + --wa-color-success-min-60: var(--wa-color-gray-min-60); + --wa-color-success-max-70: var(--wa-color-gray-max-70); + --wa-color-success-min-70: var(--wa-color-gray-min-70); + + --wa-color-success-on: var(--wa-color-gray-on); +} diff --git a/src/styles/success/green.css b/src/styles/success/green.css new file mode 100644 index 000000000..4088a7762 --- /dev/null +++ b/src/styles/success/green.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-success-green { + --wa-color-success-95: var(--wa-color-green-95); + --wa-color-success-90: var(--wa-color-green-90); + --wa-color-success-80: var(--wa-color-green-80); + --wa-color-success-70: var(--wa-color-green-70); + --wa-color-success-60: var(--wa-color-green-60); + --wa-color-success-50: var(--wa-color-green-50); + --wa-color-success-40: var(--wa-color-green-40); + --wa-color-success-30: var(--wa-color-green-30); + --wa-color-success-20: var(--wa-color-green-20); + --wa-color-success-10: var(--wa-color-green-10); + --wa-color-success-05: var(--wa-color-green-05); + --wa-color-success: var(--wa-color-green); + + --wa-color-success-lt-50: var(--wa-color-green-lt-50); + --wa-color-success-gte-50: var(--wa-color-green-gte-50); + + --wa-color-success-lt-60: var(--wa-color-green-lt-60); + --wa-color-success-gte-60: var(--wa-color-green-gte-60); + + --wa-color-success-lt-70: var(--wa-color-green-lt-70); + --wa-color-success-gte-70: var(--wa-color-green-gte-70); + + --wa-color-success-max-50: var(--wa-color-green-max-50); + --wa-color-success-min-50: var(--wa-color-green-min-50); + --wa-color-success-max-60: var(--wa-color-green-max-60); + --wa-color-success-min-60: var(--wa-color-green-min-60); + --wa-color-success-max-70: var(--wa-color-green-max-70); + --wa-color-success-min-70: var(--wa-color-green-min-70); + + --wa-color-success-on: var(--wa-color-green-on); +} diff --git a/src/styles/success/indigo.css b/src/styles/success/indigo.css new file mode 100644 index 000000000..b85471c29 --- /dev/null +++ b/src/styles/success/indigo.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-success-indigo { + --wa-color-success-95: var(--wa-color-indigo-95); + --wa-color-success-90: var(--wa-color-indigo-90); + --wa-color-success-80: var(--wa-color-indigo-80); + --wa-color-success-70: var(--wa-color-indigo-70); + --wa-color-success-60: var(--wa-color-indigo-60); + --wa-color-success-50: var(--wa-color-indigo-50); + --wa-color-success-40: var(--wa-color-indigo-40); + --wa-color-success-30: var(--wa-color-indigo-30); + --wa-color-success-20: var(--wa-color-indigo-20); + --wa-color-success-10: var(--wa-color-indigo-10); + --wa-color-success-05: var(--wa-color-indigo-05); + --wa-color-success: var(--wa-color-indigo); + + --wa-color-success-lt-50: var(--wa-color-indigo-lt-50); + --wa-color-success-gte-50: var(--wa-color-indigo-gte-50); + + --wa-color-success-lt-60: var(--wa-color-indigo-lt-60); + --wa-color-success-gte-60: var(--wa-color-indigo-gte-60); + + --wa-color-success-lt-70: var(--wa-color-indigo-lt-70); + --wa-color-success-gte-70: var(--wa-color-indigo-gte-70); + + --wa-color-success-max-50: var(--wa-color-indigo-max-50); + --wa-color-success-min-50: var(--wa-color-indigo-min-50); + --wa-color-success-max-60: var(--wa-color-indigo-max-60); + --wa-color-success-min-60: var(--wa-color-indigo-min-60); + --wa-color-success-max-70: var(--wa-color-indigo-max-70); + --wa-color-success-min-70: var(--wa-color-indigo-min-70); + + --wa-color-success-on: var(--wa-color-indigo-on); +} diff --git a/src/styles/success/orange.css b/src/styles/success/orange.css new file mode 100644 index 000000000..6e534f047 --- /dev/null +++ b/src/styles/success/orange.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-success-orange { + --wa-color-success-95: var(--wa-color-orange-95); + --wa-color-success-90: var(--wa-color-orange-90); + --wa-color-success-80: var(--wa-color-orange-80); + --wa-color-success-70: var(--wa-color-orange-70); + --wa-color-success-60: var(--wa-color-orange-60); + --wa-color-success-50: var(--wa-color-orange-50); + --wa-color-success-40: var(--wa-color-orange-40); + --wa-color-success-30: var(--wa-color-orange-30); + --wa-color-success-20: var(--wa-color-orange-20); + --wa-color-success-10: var(--wa-color-orange-10); + --wa-color-success-05: var(--wa-color-orange-05); + --wa-color-success: var(--wa-color-orange); + + --wa-color-success-lt-50: var(--wa-color-orange-lt-50); + --wa-color-success-gte-50: var(--wa-color-orange-gte-50); + + --wa-color-success-lt-60: var(--wa-color-orange-lt-60); + --wa-color-success-gte-60: var(--wa-color-orange-gte-60); + + --wa-color-success-lt-70: var(--wa-color-orange-lt-70); + --wa-color-success-gte-70: var(--wa-color-orange-gte-70); + + --wa-color-success-max-50: var(--wa-color-orange-max-50); + --wa-color-success-min-50: var(--wa-color-orange-min-50); + --wa-color-success-max-60: var(--wa-color-orange-max-60); + --wa-color-success-min-60: var(--wa-color-orange-min-60); + --wa-color-success-max-70: var(--wa-color-orange-max-70); + --wa-color-success-min-70: var(--wa-color-orange-min-70); + + --wa-color-success-on: var(--wa-color-orange-on); +} diff --git a/src/styles/success/pink.css b/src/styles/success/pink.css new file mode 100644 index 000000000..5e6693d84 --- /dev/null +++ b/src/styles/success/pink.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-success-pink { + --wa-color-success-95: var(--wa-color-pink-95); + --wa-color-success-90: var(--wa-color-pink-90); + --wa-color-success-80: var(--wa-color-pink-80); + --wa-color-success-70: var(--wa-color-pink-70); + --wa-color-success-60: var(--wa-color-pink-60); + --wa-color-success-50: var(--wa-color-pink-50); + --wa-color-success-40: var(--wa-color-pink-40); + --wa-color-success-30: var(--wa-color-pink-30); + --wa-color-success-20: var(--wa-color-pink-20); + --wa-color-success-10: var(--wa-color-pink-10); + --wa-color-success-05: var(--wa-color-pink-05); + --wa-color-success: var(--wa-color-pink); + + --wa-color-success-lt-50: var(--wa-color-pink-lt-50); + --wa-color-success-gte-50: var(--wa-color-pink-gte-50); + + --wa-color-success-lt-60: var(--wa-color-pink-lt-60); + --wa-color-success-gte-60: var(--wa-color-pink-gte-60); + + --wa-color-success-lt-70: var(--wa-color-pink-lt-70); + --wa-color-success-gte-70: var(--wa-color-pink-gte-70); + + --wa-color-success-max-50: var(--wa-color-pink-max-50); + --wa-color-success-min-50: var(--wa-color-pink-min-50); + --wa-color-success-max-60: var(--wa-color-pink-max-60); + --wa-color-success-min-60: var(--wa-color-pink-min-60); + --wa-color-success-max-70: var(--wa-color-pink-max-70); + --wa-color-success-min-70: var(--wa-color-pink-min-70); + + --wa-color-success-on: var(--wa-color-pink-on); +} diff --git a/src/styles/success/purple.css b/src/styles/success/purple.css new file mode 100644 index 000000000..2a9dfa78f --- /dev/null +++ b/src/styles/success/purple.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-success-purple { + --wa-color-success-95: var(--wa-color-purple-95); + --wa-color-success-90: var(--wa-color-purple-90); + --wa-color-success-80: var(--wa-color-purple-80); + --wa-color-success-70: var(--wa-color-purple-70); + --wa-color-success-60: var(--wa-color-purple-60); + --wa-color-success-50: var(--wa-color-purple-50); + --wa-color-success-40: var(--wa-color-purple-40); + --wa-color-success-30: var(--wa-color-purple-30); + --wa-color-success-20: var(--wa-color-purple-20); + --wa-color-success-10: var(--wa-color-purple-10); + --wa-color-success-05: var(--wa-color-purple-05); + --wa-color-success: var(--wa-color-purple); + + --wa-color-success-lt-50: var(--wa-color-purple-lt-50); + --wa-color-success-gte-50: var(--wa-color-purple-gte-50); + + --wa-color-success-lt-60: var(--wa-color-purple-lt-60); + --wa-color-success-gte-60: var(--wa-color-purple-gte-60); + + --wa-color-success-lt-70: var(--wa-color-purple-lt-70); + --wa-color-success-gte-70: var(--wa-color-purple-gte-70); + + --wa-color-success-max-50: var(--wa-color-purple-max-50); + --wa-color-success-min-50: var(--wa-color-purple-min-50); + --wa-color-success-max-60: var(--wa-color-purple-max-60); + --wa-color-success-min-60: var(--wa-color-purple-min-60); + --wa-color-success-max-70: var(--wa-color-purple-max-70); + --wa-color-success-min-70: var(--wa-color-purple-min-70); + + --wa-color-success-on: var(--wa-color-purple-on); +} diff --git a/src/styles/success/red.css b/src/styles/success/red.css new file mode 100644 index 000000000..a60880f2c --- /dev/null +++ b/src/styles/success/red.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-success-red { + --wa-color-success-95: var(--wa-color-red-95); + --wa-color-success-90: var(--wa-color-red-90); + --wa-color-success-80: var(--wa-color-red-80); + --wa-color-success-70: var(--wa-color-red-70); + --wa-color-success-60: var(--wa-color-red-60); + --wa-color-success-50: var(--wa-color-red-50); + --wa-color-success-40: var(--wa-color-red-40); + --wa-color-success-30: var(--wa-color-red-30); + --wa-color-success-20: var(--wa-color-red-20); + --wa-color-success-10: var(--wa-color-red-10); + --wa-color-success-05: var(--wa-color-red-05); + --wa-color-success: var(--wa-color-red); + + --wa-color-success-lt-50: var(--wa-color-red-lt-50); + --wa-color-success-gte-50: var(--wa-color-red-gte-50); + + --wa-color-success-lt-60: var(--wa-color-red-lt-60); + --wa-color-success-gte-60: var(--wa-color-red-gte-60); + + --wa-color-success-lt-70: var(--wa-color-red-lt-70); + --wa-color-success-gte-70: var(--wa-color-red-gte-70); + + --wa-color-success-max-50: var(--wa-color-red-max-50); + --wa-color-success-min-50: var(--wa-color-red-min-50); + --wa-color-success-max-60: var(--wa-color-red-max-60); + --wa-color-success-min-60: var(--wa-color-red-min-60); + --wa-color-success-max-70: var(--wa-color-red-max-70); + --wa-color-success-min-70: var(--wa-color-red-min-70); + + --wa-color-success-on: var(--wa-color-red-on); +} diff --git a/src/styles/success/yellow.css b/src/styles/success/yellow.css new file mode 100644 index 000000000..287e9053d --- /dev/null +++ b/src/styles/success/yellow.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-success-yellow { + --wa-color-success-95: var(--wa-color-yellow-95); + --wa-color-success-90: var(--wa-color-yellow-90); + --wa-color-success-80: var(--wa-color-yellow-80); + --wa-color-success-70: var(--wa-color-yellow-70); + --wa-color-success-60: var(--wa-color-yellow-60); + --wa-color-success-50: var(--wa-color-yellow-50); + --wa-color-success-40: var(--wa-color-yellow-40); + --wa-color-success-30: var(--wa-color-yellow-30); + --wa-color-success-20: var(--wa-color-yellow-20); + --wa-color-success-10: var(--wa-color-yellow-10); + --wa-color-success-05: var(--wa-color-yellow-05); + --wa-color-success: var(--wa-color-yellow); + + --wa-color-success-lt-50: var(--wa-color-yellow-lt-50); + --wa-color-success-gte-50: var(--wa-color-yellow-gte-50); + + --wa-color-success-lt-60: var(--wa-color-yellow-lt-60); + --wa-color-success-gte-60: var(--wa-color-yellow-gte-60); + + --wa-color-success-lt-70: var(--wa-color-yellow-lt-70); + --wa-color-success-gte-70: var(--wa-color-yellow-gte-70); + + --wa-color-success-max-50: var(--wa-color-yellow-max-50); + --wa-color-success-min-50: var(--wa-color-yellow-min-50); + --wa-color-success-max-60: var(--wa-color-yellow-max-60); + --wa-color-success-min-60: var(--wa-color-yellow-min-60); + --wa-color-success-max-70: var(--wa-color-yellow-max-70); + --wa-color-success-min-70: var(--wa-color-yellow-min-70); + + --wa-color-success-on: var(--wa-color-yellow-on); +} diff --git a/src/styles/themes/active/color.css b/src/styles/themes/active/color.css index 20af3694f..e6b04d98e 100644 --- a/src/styles/themes/active/color.css +++ b/src/styles/themes/active/color.css @@ -1,6 +1,10 @@ @import url('../../color/rudimentary.css'); @import url('../default/color.css'); @import url('../../brand/green.css'); +@import url('../../success/green.css'); +@import url('../../warning/yellow.css'); +@import url('../../danger/red.css'); +@import url('../../neutral/gray.css'); :where(:root), :host, @@ -13,7 +17,7 @@ /** * Foundational Colors */ - --wa-color-text-normal: var(--wa-color-gray-05); + --wa-color-text-normal: var(--wa-color-neutral-05); --wa-color-text-link: var(--wa-color-brand-40); --wa-color-focus: var(--wa-color-blue-60); @@ -26,52 +30,52 @@ */ --wa-color-brand-fill-quiet: var(--wa-color-brand-95); --wa-color-brand-fill-normal: var(--wa-color-brand-90); - --wa-color-brand-fill-loud: var(--wa-color-brand); + --wa-color-brand-fill-loud: var(--wa-color-brand-min-70); --wa-color-brand-border-quiet: var(--wa-color-brand-90); --wa-color-brand-border-normal: var(--wa-color-brand-80); --wa-color-brand-border-loud: var(--wa-color-brand-70); --wa-color-brand-on-quiet: var(--wa-color-brand-40); --wa-color-brand-on-normal: var(--wa-color-brand-30); - --wa-color-brand-on-loud: var(--wa-color-brand-on); + --wa-color-brand-on-loud: black; - --wa-color-success-fill-quiet: var(--wa-color-green-95); - --wa-color-success-fill-normal: var(--wa-color-green-90); - --wa-color-success-fill-loud: var(--wa-color-green-80); - --wa-color-success-border-quiet: var(--wa-color-green-90); - --wa-color-success-border-normal: var(--wa-color-green-80); - --wa-color-success-border-loud: var(--wa-color-green-70); - --wa-color-success-on-quiet: var(--wa-color-green-40); - --wa-color-success-on-normal: var(--wa-color-green-30); + --wa-color-success-fill-quiet: var(--wa-color-success-95); + --wa-color-success-fill-normal: var(--wa-color-success-90); + --wa-color-success-fill-loud: var(--wa-color-success-min-70); + --wa-color-success-border-quiet: var(--wa-color-success-90); + --wa-color-success-border-normal: var(--wa-color-success-80); + --wa-color-success-border-loud: var(--wa-color-success-70); + --wa-color-success-on-quiet: var(--wa-color-success-40); + --wa-color-success-on-normal: var(--wa-color-success-30); --wa-color-success-on-loud: black; - --wa-color-warning-fill-quiet: var(--wa-color-yellow-95); - --wa-color-warning-fill-normal: var(--wa-color-yellow-90); - --wa-color-warning-fill-loud: var(--wa-color-yellow-80); - --wa-color-warning-border-quiet: var(--wa-color-yellow-90); - --wa-color-warning-border-normal: var(--wa-color-yellow-80); - --wa-color-warning-border-loud: var(--wa-color-yellow-70); - --wa-color-warning-on-quiet: var(--wa-color-yellow-40); - --wa-color-warning-on-normal: var(--wa-color-yellow-30); + --wa-color-warning-fill-quiet: var(--wa-color-warning-95); + --wa-color-warning-fill-normal: var(--wa-color-warning-90); + --wa-color-warning-fill-loud: var(--wa-color-warning-min-70); + --wa-color-warning-border-quiet: var(--wa-color-warning-90); + --wa-color-warning-border-normal: var(--wa-color-warning-80); + --wa-color-warning-border-loud: var(--wa-color-warning-70); + --wa-color-warning-on-quiet: var(--wa-color-warning-40); + --wa-color-warning-on-normal: var(--wa-color-warning-30); --wa-color-warning-on-loud: black; - --wa-color-danger-fill-quiet: var(--wa-color-red-95); - --wa-color-danger-fill-normal: var(--wa-color-red-90); - --wa-color-danger-fill-loud: var(--wa-color-red-70); - --wa-color-danger-border-quiet: var(--wa-color-red-90); - --wa-color-danger-border-normal: var(--wa-color-red-80); - --wa-color-danger-border-loud: var(--wa-color-red-70); - --wa-color-danger-on-quiet: var(--wa-color-red-40); - --wa-color-danger-on-normal: var(--wa-color-red-30); + --wa-color-danger-fill-quiet: var(--wa-color-danger-95); + --wa-color-danger-fill-normal: var(--wa-color-danger-90); + --wa-color-danger-fill-loud: var(--wa-color-danger-min-70); + --wa-color-danger-border-quiet: var(--wa-color-danger-90); + --wa-color-danger-border-normal: var(--wa-color-danger-80); + --wa-color-danger-border-loud: var(--wa-color-danger-70); + --wa-color-danger-on-quiet: var(--wa-color-danger-40); + --wa-color-danger-on-normal: var(--wa-color-danger-30); --wa-color-danger-on-loud: black; - --wa-color-neutral-fill-quiet: var(--wa-color-gray-95); - --wa-color-neutral-fill-normal: var(--wa-color-gray-90); - --wa-color-neutral-fill-loud: var(--wa-color-gray-80); - --wa-color-neutral-border-quiet: var(--wa-color-gray-90); - --wa-color-neutral-border-normal: var(--wa-color-gray-80); - --wa-color-neutral-border-loud: var(--wa-color-gray-70); - --wa-color-neutral-on-quiet: var(--wa-color-gray-40); - --wa-color-neutral-on-normal: var(--wa-color-gray-30); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-80); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-90); + --wa-color-neutral-border-normal: var(--wa-color-neutral-80); + --wa-color-neutral-border-loud: var(--wa-color-neutral-70); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-40); + --wa-color-neutral-on-normal: var(--wa-color-neutral-30); --wa-color-neutral-on-loud: black; } @@ -90,51 +94,51 @@ */ --wa-color-brand-fill-quiet: var(--wa-color-brand-10); --wa-color-brand-fill-normal: var(--wa-color-brand-20); - --wa-color-brand-fill-loud: var(--wa-color-brand); + --wa-color-brand-fill-loud: var(--wa-color-brand-min-70); --wa-color-brand-border-quiet: var(--wa-color-brand-20); --wa-color-brand-border-normal: var(--wa-color-brand-30); --wa-color-brand-border-loud: var(--wa-color-brand-60); - --wa-color-brand-on-quiet: var(--wa-color-brand-80); + --wa-color-brand-on-quiet: var(--wa-color-brand-min-70); --wa-color-brand-on-normal: var(--wa-color-brand-90); - --wa-color-brand-on-loud: var(--wa-color-brand-on); + --wa-color-brand-on-loud: black; - --wa-color-success-fill-quiet: var(--wa-color-green-10); - --wa-color-success-fill-normal: var(--wa-color-green-20); - --wa-color-success-fill-loud: var(--wa-color-green-80); - --wa-color-success-border-quiet: var(--wa-color-green-20); - --wa-color-success-border-normal: var(--wa-color-green-30); - --wa-color-success-border-loud: var(--wa-color-green-40); - --wa-color-success-on-quiet: var(--wa-color-green-80); - --wa-color-success-on-normal: var(--wa-color-green-90); + --wa-color-success-fill-quiet: var(--wa-color-success-10); + --wa-color-success-fill-normal: var(--wa-color-success-20); + --wa-color-success-fill-loud: var(--wa-color-success-min-70); + --wa-color-success-border-quiet: var(--wa-color-success-20); + --wa-color-success-border-normal: var(--wa-color-success-30); + --wa-color-success-border-loud: var(--wa-color-success-40); + --wa-color-success-on-quiet: var(--wa-color-success-min-70); + --wa-color-success-on-normal: var(--wa-color-success-90); --wa-color-success-on-loud: black; - --wa-color-warning-fill-quiet: var(--wa-color-yellow-10); - --wa-color-warning-fill-normal: var(--wa-color-yellow-20); - --wa-color-warning-fill-loud: var(--wa-color-yellow-80); - --wa-color-warning-border-quiet: var(--wa-color-yellow-20); - --wa-color-warning-border-normal: var(--wa-color-yellow-30); - --wa-color-warning-border-loud: var(--wa-color-yellow-60); - --wa-color-warning-on-quiet: var(--wa-color-yellow-80); - --wa-color-warning-on-normal: var(--wa-color-yellow-90); + --wa-color-warning-fill-quiet: var(--wa-color-warning-10); + --wa-color-warning-fill-normal: var(--wa-color-warning-20); + --wa-color-warning-fill-loud: var(--wa-color-warning-min-70); + --wa-color-warning-border-quiet: var(--wa-color-warning-20); + --wa-color-warning-border-normal: var(--wa-color-warning-30); + --wa-color-warning-border-loud: var(--wa-color-warning-60); + --wa-color-warning-on-quiet: var(--wa-color-warning-min-70); + --wa-color-warning-on-normal: var(--wa-color-warning-90); --wa-color-warning-on-loud: black; - --wa-color-danger-fill-quiet: var(--wa-color-red-10); - --wa-color-danger-fill-normal: var(--wa-color-red-20); - --wa-color-danger-fill-loud: var(--wa-color-red-70); - --wa-color-danger-border-quiet: var(--wa-color-red-20); - --wa-color-danger-border-normal: var(--wa-color-red-30); - --wa-color-danger-border-loud: var(--wa-color-red-60); - --wa-color-danger-on-quiet: var(--wa-color-red-80); - --wa-color-danger-on-normal: var(--wa-color-red-90); + --wa-color-danger-fill-quiet: var(--wa-color-danger-10); + --wa-color-danger-fill-normal: var(--wa-color-danger-20); + --wa-color-danger-fill-loud: var(--wa-color-danger-min-70); + --wa-color-danger-border-quiet: var(--wa-color-danger-20); + --wa-color-danger-border-normal: var(--wa-color-danger-30); + --wa-color-danger-border-loud: var(--wa-color-danger-60); + --wa-color-danger-on-quiet: var(--wa-color-danger-min-70); + --wa-color-danger-on-normal: var(--wa-color-danger-90); --wa-color-danger-on-loud: black; - --wa-color-neutral-fill-quiet: var(--wa-color-gray-10); - --wa-color-neutral-fill-normal: var(--wa-color-gray-20); - --wa-color-neutral-fill-loud: var(--wa-color-gray-80); - --wa-color-neutral-border-quiet: var(--wa-color-gray-20); - --wa-color-neutral-border-normal: var(--wa-color-gray-30); - --wa-color-neutral-border-loud: var(--wa-color-gray-60); - --wa-color-neutral-on-quiet: var(--wa-color-gray-80); - --wa-color-neutral-on-normal: var(--wa-color-gray-90); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-20); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-80); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-20); + --wa-color-neutral-border-normal: var(--wa-color-neutral-30); + --wa-color-neutral-border-loud: var(--wa-color-neutral-60); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-80); + --wa-color-neutral-on-normal: var(--wa-color-neutral-90); --wa-color-neutral-on-loud: black; } diff --git a/src/styles/themes/awesome/color.css b/src/styles/themes/awesome/color.css index ed55d2aea..f608d931a 100644 --- a/src/styles/themes/awesome/color.css +++ b/src/styles/themes/awesome/color.css @@ -1,6 +1,10 @@ @import url('../../color/bright.css'); @import url('../default/color.css'); @import url('../../brand/blue.css'); +@import url('../../success/green.css'); +@import url('../../warning/yellow.css'); +@import url('../../danger/red.css'); +@import url('../../neutral/gray.css'); :where(:root), :host, @@ -10,14 +14,14 @@ /** * Foundational Colors */ - --wa-color-text-normal: var(--wa-color-gray-20); + --wa-color-text-normal: var(--wa-color-neutral-20); /** * Semantic Colors */ --wa-color-brand-fill-quiet: var(--wa-color-brand-95); --wa-color-brand-fill-normal: var(--wa-color-brand-90); - --wa-color-brand-fill-loud: var(--wa-color-brand-70-min); + --wa-color-brand-fill-loud: var(--wa-color-brand-min-70); --wa-color-brand-border-quiet: var(--wa-color-brand-70); --wa-color-brand-border-normal: var(--wa-color-brand-50); --wa-color-brand-border-loud: var(--wa-color-brand-30); @@ -25,44 +29,44 @@ --wa-color-brand-on-normal: var(--wa-color-brand-40); --wa-color-brand-on-loud: var(--wa-color-text-normal); - --wa-color-success-fill-quiet: var(--wa-color-green-95); - --wa-color-success-fill-normal: var(--wa-color-green-90); - --wa-color-success-fill-loud: var(--wa-color-green-80); - --wa-color-success-border-quiet: var(--wa-color-green-70); - --wa-color-success-border-normal: var(--wa-color-green-50); - --wa-color-success-border-loud: var(--wa-color-green-30); - --wa-color-success-on-quiet: var(--wa-color-green-40); - --wa-color-success-on-normal: var(--wa-color-green-40); + --wa-color-success-fill-quiet: var(--wa-color-success-95); + --wa-color-success-fill-normal: var(--wa-color-success-90); + --wa-color-success-fill-loud: var(--wa-color-success-min-70); + --wa-color-success-border-quiet: var(--wa-color-success-70); + --wa-color-success-border-normal: var(--wa-color-success-50); + --wa-color-success-border-loud: var(--wa-color-success-30); + --wa-color-success-on-quiet: var(--wa-color-success-40); + --wa-color-success-on-normal: var(--wa-color-success-40); --wa-color-success-on-loud: var(--wa-color-text-normal); - --wa-color-warning-fill-quiet: var(--wa-color-yellow-95); - --wa-color-warning-fill-normal: var(--wa-color-yellow-90); - --wa-color-warning-fill-loud: var(--wa-color-yellow-80); - --wa-color-warning-border-quiet: var(--wa-color-yellow-70); - --wa-color-warning-border-normal: var(--wa-color-yellow-50); - --wa-color-warning-border-loud: var(--wa-color-yellow-30); - --wa-color-warning-on-quiet: var(--wa-color-yellow-40); - --wa-color-warning-on-normal: var(--wa-color-yellow-40); + --wa-color-warning-fill-quiet: var(--wa-color-warning-95); + --wa-color-warning-fill-normal: var(--wa-color-warning-90); + --wa-color-warning-fill-loud: var(--wa-color-warning-min-70); + --wa-color-warning-border-quiet: var(--wa-color-warning-70); + --wa-color-warning-border-normal: var(--wa-color-warning-50); + --wa-color-warning-border-loud: var(--wa-color-warning-30); + --wa-color-warning-on-quiet: var(--wa-color-warning-40); + --wa-color-warning-on-normal: var(--wa-color-warning-40); --wa-color-warning-on-loud: var(--wa-color-text-normal); - --wa-color-danger-fill-quiet: var(--wa-color-red-95); - --wa-color-danger-fill-normal: var(--wa-color-red-90); - --wa-color-danger-fill-loud: var(--wa-color-red-70); - --wa-color-danger-border-quiet: var(--wa-color-red-70); - --wa-color-danger-border-normal: var(--wa-color-red-50); - --wa-color-danger-border-loud: var(--wa-color-red-30); - --wa-color-danger-on-quiet: var(--wa-color-red-40); - --wa-color-danger-on-normal: var(--wa-color-red-40); + --wa-color-danger-fill-quiet: var(--wa-color-danger-95); + --wa-color-danger-fill-normal: var(--wa-color-danger-90); + --wa-color-danger-fill-loud: var(--wa-color-danger-min-70); + --wa-color-danger-border-quiet: var(--wa-color-danger-70); + --wa-color-danger-border-normal: var(--wa-color-danger-50); + --wa-color-danger-border-loud: var(--wa-color-danger-30); + --wa-color-danger-on-quiet: var(--wa-color-danger-40); + --wa-color-danger-on-normal: var(--wa-color-danger-40); --wa-color-danger-on-loud: var(--wa-color-text-normal); - --wa-color-neutral-fill-quiet: var(--wa-color-gray-95); - --wa-color-neutral-fill-normal: var(--wa-color-gray-90); - --wa-color-neutral-fill-loud: var(--wa-color-gray-80); - --wa-color-neutral-border-quiet: var(--wa-color-gray-70); - --wa-color-neutral-border-normal: var(--wa-color-gray-50); - --wa-color-neutral-border-loud: var(--wa-color-gray-30); - --wa-color-neutral-on-quiet: var(--wa-color-gray-40); - --wa-color-neutral-on-normal: var(--wa-color-gray-40); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-80); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-70); + --wa-color-neutral-border-normal: var(--wa-color-neutral-50); + --wa-color-neutral-border-loud: var(--wa-color-neutral-30); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-40); + --wa-color-neutral-on-normal: var(--wa-color-neutral-40); --wa-color-neutral-on-loud: var(--wa-color-text-normal); } @@ -77,51 +81,51 @@ */ --wa-color-brand-fill-quiet: var(--wa-color-brand-10); --wa-color-brand-fill-normal: var(--wa-color-brand-20); - --wa-color-brand-fill-loud: var(--wa-color-brand-50-max); + --wa-color-brand-fill-loud: var(--wa-color-brand-50); --wa-color-brand-border-quiet: var(--wa-color-brand-30); --wa-color-brand-border-normal: var(--wa-color-brand-50); --wa-color-brand-border-loud: var(--wa-color-brand-80); - --wa-color-brand-on-quiet: var(--wa-color-brand-70); + --wa-color-brand-on-quiet: var(--wa-color-brand-min-70); --wa-color-brand-on-normal: var(--wa-color-brand-80); --wa-color-brand-on-loud: white; - --wa-color-success-fill-quiet: var(--wa-color-green-10); - --wa-color-success-fill-normal: var(--wa-color-green-20); - --wa-color-success-fill-loud: var(--wa-color-green-50); - --wa-color-success-border-quiet: var(--wa-color-green-30); - --wa-color-success-border-normal: var(--wa-color-green-50); - --wa-color-success-border-loud: var(--wa-color-green-80); - --wa-color-success-on-quiet: var(--wa-color-green-70); - --wa-color-success-on-normal: var(--wa-color-green-80); + --wa-color-success-fill-quiet: var(--wa-color-success-10); + --wa-color-success-fill-normal: var(--wa-color-success-20); + --wa-color-success-fill-loud: var(--wa-color-success-50); + --wa-color-success-border-quiet: var(--wa-color-success-30); + --wa-color-success-border-normal: var(--wa-color-success-50); + --wa-color-success-border-loud: var(--wa-color-success-80); + --wa-color-success-on-quiet: var(--wa-color-success-min-70); + --wa-color-success-on-normal: var(--wa-color-success-80); --wa-color-success-on-loud: white; - --wa-color-warning-fill-quiet: var(--wa-color-yellow-10); - --wa-color-warning-fill-normal: var(--wa-color-yellow-20); - --wa-color-warning-fill-loud: var(--wa-color-yellow-70); - --wa-color-warning-border-quiet: var(--wa-color-yellow-30); - --wa-color-warning-border-normal: var(--wa-color-yellow-50); - --wa-color-warning-border-loud: var(--wa-color-yellow-80); - --wa-color-warning-on-quiet: var(--wa-color-yellow-70); - --wa-color-warning-on-normal: var(--wa-color-yellow-80); - --wa-color-warning-on-loud: var(--wa-color-yellow-05); + --wa-color-warning-fill-quiet: var(--wa-color-warning-10); + --wa-color-warning-fill-normal: var(--wa-color-warning-20); + --wa-color-warning-fill-loud: var(--wa-color-warning-70); + --wa-color-warning-border-quiet: var(--wa-color-warning-30); + --wa-color-warning-border-normal: var(--wa-color-warning-50); + --wa-color-warning-border-loud: var(--wa-color-warning-80); + --wa-color-warning-on-quiet: var(--wa-color-warning-min-70); + --wa-color-warning-on-normal: var(--wa-color-warning-80); + --wa-color-warning-on-loud: var(--wa-color-warning-05); - --wa-color-danger-fill-quiet: var(--wa-color-red-10); - --wa-color-danger-fill-normal: var(--wa-color-red-20); - --wa-color-danger-fill-loud: var(--wa-color-red-50); - --wa-color-danger-border-quiet: var(--wa-color-red-30); - --wa-color-danger-border-normal: var(--wa-color-red-50); - --wa-color-danger-border-loud: var(--wa-color-red-80); - --wa-color-danger-on-quiet: var(--wa-color-red-70); - --wa-color-danger-on-normal: var(--wa-color-red-80); + --wa-color-danger-fill-quiet: var(--wa-color-danger-10); + --wa-color-danger-fill-normal: var(--wa-color-danger-20); + --wa-color-danger-fill-loud: var(--wa-color-danger-50); + --wa-color-danger-border-quiet: var(--wa-color-danger-30); + --wa-color-danger-border-normal: var(--wa-color-danger-50); + --wa-color-danger-border-loud: var(--wa-color-danger-80); + --wa-color-danger-on-quiet: var(--wa-color-danger-min-70); + --wa-color-danger-on-normal: var(--wa-color-danger-80); --wa-color-danger-on-loud: white; - --wa-color-neutral-fill-quiet: var(--wa-color-gray-10); - --wa-color-neutral-fill-normal: var(--wa-color-gray-20); - --wa-color-neutral-fill-loud: var(--wa-color-gray-50); - --wa-color-neutral-border-quiet: var(--wa-color-gray-30); - --wa-color-neutral-border-normal: var(--wa-color-gray-50); - --wa-color-neutral-border-loud: var(--wa-color-gray-80); - --wa-color-neutral-on-quiet: var(--wa-color-gray-70); - --wa-color-neutral-on-normal: var(--wa-color-gray-80); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-20); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-50); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-30); + --wa-color-neutral-border-normal: var(--wa-color-neutral-50); + --wa-color-neutral-border-loud: var(--wa-color-neutral-80); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-70); + --wa-color-neutral-on-normal: var(--wa-color-neutral-80); --wa-color-neutral-on-loud: white; } diff --git a/src/styles/themes/brutalist/color.css b/src/styles/themes/brutalist/color.css index 9089ee416..98013f2a5 100644 --- a/src/styles/themes/brutalist/color.css +++ b/src/styles/themes/brutalist/color.css @@ -1,6 +1,10 @@ @import url('../../color/default.css'); @import url('../default/color.css'); @import url('../../brand/blue.css'); +@import url('../../success/green.css'); +@import url('../../warning/yellow.css'); +@import url('../../danger/red.css'); +@import url('../../neutral/gray.css'); :where(:root), :host, @@ -10,9 +14,9 @@ /** * Foundational Colors */ - --wa-color-surface-border: var(--wa-color-gray-10); + --wa-color-surface-border: var(--wa-color-neutral-10); - --wa-color-text-link: var(--wa-color-gray-40); + --wa-color-text-link: var(--wa-color-neutral-40); --wa-color-shadow: rgb(0 0 0 / 0.2); @@ -24,7 +28,7 @@ */ --wa-color-brand-fill-quiet: var(--wa-color-brand-95); --wa-color-brand-fill-normal: var(--wa-color-brand-90); - --wa-color-brand-fill-loud: var(--wa-color-brand-50-max); + --wa-color-brand-fill-loud: var(--wa-color-brand-max-50); --wa-color-brand-border-quiet: var(--wa-color-brand-80); --wa-color-brand-border-normal: var(--wa-color-brand-60); --wa-color-brand-border-loud: var(--wa-color-brand-40); @@ -32,44 +36,44 @@ --wa-color-brand-on-normal: var(--wa-color-brand-40); --wa-color-brand-on-loud: white; - --wa-color-success-fill-quiet: var(--wa-color-green-95); - --wa-color-success-fill-normal: var(--wa-color-green-90); - --wa-color-success-fill-loud: var(--wa-color-green-50); - --wa-color-success-border-quiet: var(--wa-color-green-80); - --wa-color-success-border-normal: var(--wa-color-green-60); - --wa-color-success-border-loud: var(--wa-color-green-40); - --wa-color-success-on-quiet: var(--wa-color-green-40); - --wa-color-success-on-normal: var(--wa-color-green-40); + --wa-color-success-fill-quiet: var(--wa-color-success-95); + --wa-color-success-fill-normal: var(--wa-color-success-90); + --wa-color-success-fill-loud: var(--wa-color-success-max-50); + --wa-color-success-border-quiet: var(--wa-color-success-80); + --wa-color-success-border-normal: var(--wa-color-success-60); + --wa-color-success-border-loud: var(--wa-color-success-40); + --wa-color-success-on-quiet: var(--wa-color-success-40); + --wa-color-success-on-normal: var(--wa-color-success-40); --wa-color-success-on-loud: white; - --wa-color-warning-fill-quiet: var(--wa-color-yellow-95); - --wa-color-warning-fill-normal: var(--wa-color-yellow-90); - --wa-color-warning-fill-loud: var(--wa-color-yellow-50); - --wa-color-warning-border-quiet: var(--wa-color-yellow-80); - --wa-color-warning-border-normal: var(--wa-color-yellow-60); - --wa-color-warning-border-loud: var(--wa-color-yellow-40); - --wa-color-warning-on-quiet: var(--wa-color-yellow-40); - --wa-color-warning-on-normal: var(--wa-color-yellow-40); + --wa-color-warning-fill-quiet: var(--wa-color-warning-95); + --wa-color-warning-fill-normal: var(--wa-color-warning-90); + --wa-color-warning-fill-loud: var(--wa-color-warning-max-50); + --wa-color-warning-border-quiet: var(--wa-color-warning-80); + --wa-color-warning-border-normal: var(--wa-color-warning-60); + --wa-color-warning-border-loud: var(--wa-color-warning-40); + --wa-color-warning-on-quiet: var(--wa-color-warning-40); + --wa-color-warning-on-normal: var(--wa-color-warning-40); --wa-color-warning-on-loud: white; - --wa-color-danger-fill-quiet: var(--wa-color-red-95); - --wa-color-danger-fill-normal: var(--wa-color-red-90); - --wa-color-danger-fill-loud: var(--wa-color-red-50); - --wa-color-danger-border-quiet: var(--wa-color-red-80); - --wa-color-danger-border-normal: var(--wa-color-red-60); - --wa-color-danger-border-loud: var(--wa-color-red-40); - --wa-color-danger-on-quiet: var(--wa-color-red-40); - --wa-color-danger-on-normal: var(--wa-color-red-40); + --wa-color-danger-fill-quiet: var(--wa-color-danger-95); + --wa-color-danger-fill-normal: var(--wa-color-danger-90); + --wa-color-danger-fill-loud: var(--wa-color-danger-max-50); + --wa-color-danger-border-quiet: var(--wa-color-danger-80); + --wa-color-danger-border-normal: var(--wa-color-danger-60); + --wa-color-danger-border-loud: var(--wa-color-danger-40); + --wa-color-danger-on-quiet: var(--wa-color-danger-40); + --wa-color-danger-on-normal: var(--wa-color-danger-40); --wa-color-danger-on-loud: white; - --wa-color-neutral-fill-quiet: var(--wa-color-gray-90); - --wa-color-neutral-fill-normal: var(--wa-color-gray-70); - --wa-color-neutral-fill-loud: var(--wa-color-gray-20); - --wa-color-neutral-border-quiet: var(--wa-color-gray-80); - --wa-color-neutral-border-normal: var(--wa-color-gray-40); - --wa-color-neutral-border-loud: var(--wa-color-gray-20); - --wa-color-neutral-on-quiet: var(--wa-color-gray-10); - --wa-color-neutral-on-normal: var(--wa-color-gray-30); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-70); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-20); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-80); + --wa-color-neutral-border-normal: var(--wa-color-neutral-40); + --wa-color-neutral-border-loud: var(--wa-color-neutral-20); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-10); + --wa-color-neutral-on-normal: var(--wa-color-neutral-30); --wa-color-neutral-on-loud: white; } @@ -82,12 +86,12 @@ /** * Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-gray-05); - --wa-color-surface-default: var(--wa-color-gray-10); - --wa-color-surface-lowered: var(--wa-color-gray-05); - --wa-color-surface-border: var(--wa-color-gray-40); + --wa-color-surface-raised: var(--wa-color-neutral-05); + --wa-color-surface-default: var(--wa-color-neutral-10); + --wa-color-surface-lowered: var(--wa-color-neutral-05); + --wa-color-surface-border: var(--wa-color-neutral-40); - --wa-color-text-link: var(--wa-color-gray-70); + --wa-color-text-link: var(--wa-color-neutral-70); --wa-color-shadow: rgb(0 0 0 / 0.5); @@ -96,51 +100,51 @@ */ --wa-color-brand-fill-quiet: var(--wa-color-brand-20); --wa-color-brand-fill-normal: var(--wa-color-brand-30); - --wa-color-brand-fill-loud: var(--wa-color-brand-70-min); + --wa-color-brand-fill-loud: var(--wa-color-brand-min-70); --wa-color-brand-border-quiet: var(--wa-color-brand-30); --wa-color-brand-border-normal: var(--wa-color-brand-40); --wa-color-brand-border-loud: var(--wa-color-brand-80); - --wa-color-brand-on-quiet: var(--wa-color-brand-80); + --wa-color-brand-on-quiet: var(--wa-color-brand-min-70); --wa-color-brand-on-normal: var(--wa-color-brand-95); --wa-color-brand-on-loud: var(--wa-color-brand-10); - --wa-color-success-fill-quiet: var(--wa-color-green-20); - --wa-color-success-fill-normal: var(--wa-color-green-30); - --wa-color-success-fill-loud: var(--wa-color-green-70); - --wa-color-success-border-quiet: var(--wa-color-green-30); - --wa-color-success-border-normal: var(--wa-color-green-40); - --wa-color-success-border-loud: var(--wa-color-green-80); - --wa-color-success-on-quiet: var(--wa-color-green-80); - --wa-color-success-on-normal: var(--wa-color-green-95); - --wa-color-success-on-loud: var(--wa-color-green-10); + --wa-color-success-fill-quiet: var(--wa-color-success-20); + --wa-color-success-fill-normal: var(--wa-color-success-30); + --wa-color-success-fill-loud: var(--wa-color-success-min-70); + --wa-color-success-border-quiet: var(--wa-color-success-30); + --wa-color-success-border-normal: var(--wa-color-success-40); + --wa-color-success-border-loud: var(--wa-color-success-80); + --wa-color-success-on-quiet: var(--wa-color-success-min-70); + --wa-color-success-on-normal: var(--wa-color-success-95); + --wa-color-success-on-loud: var(--wa-color-success-10); - --wa-color-warning-fill-quiet: var(--wa-color-yellow-20); - --wa-color-warning-fill-normal: var(--wa-color-yellow-30); - --wa-color-warning-fill-loud: var(--wa-color-yellow-70); - --wa-color-warning-border-quiet: var(--wa-color-yellow-30); - --wa-color-warning-border-normal: var(--wa-color-yellow-40); - --wa-color-warning-border-loud: var(--wa-color-yellow-80); - --wa-color-warning-on-quiet: var(--wa-color-yellow-80); - --wa-color-warning-on-normal: var(--wa-color-yellow-95); - --wa-color-warning-on-loud: var(--wa-color-yellow-10); + --wa-color-warning-fill-quiet: var(--wa-color-warning-20); + --wa-color-warning-fill-normal: var(--wa-color-warning-30); + --wa-color-warning-fill-loud: var(--wa-color-warning-min-70); + --wa-color-warning-border-quiet: var(--wa-color-warning-30); + --wa-color-warning-border-normal: var(--wa-color-warning-40); + --wa-color-warning-border-loud: var(--wa-color-warning-80); + --wa-color-warning-on-quiet: var(--wa-color-warning-min-70); + --wa-color-warning-on-normal: var(--wa-color-warning-95); + --wa-color-warning-on-loud: var(--wa-color-warning-10); - --wa-color-danger-fill-quiet: var(--wa-color-red-20); - --wa-color-danger-fill-normal: var(--wa-color-red-30); - --wa-color-danger-fill-loud: var(--wa-color-red-70); - --wa-color-danger-border-quiet: var(--wa-color-red-30); - --wa-color-danger-border-normal: var(--wa-color-red-40); - --wa-color-danger-border-loud: var(--wa-color-red-80); - --wa-color-danger-on-quiet: var(--wa-color-red-80); - --wa-color-danger-on-normal: var(--wa-color-red-95); - --wa-color-danger-on-loud: var(--wa-color-red-10); + --wa-color-danger-fill-quiet: var(--wa-color-danger-20); + --wa-color-danger-fill-normal: var(--wa-color-danger-30); + --wa-color-danger-fill-loud: var(--wa-color-danger-min-70); + --wa-color-danger-border-quiet: var(--wa-color-danger-30); + --wa-color-danger-border-normal: var(--wa-color-danger-40); + --wa-color-danger-border-loud: var(--wa-color-danger-80); + --wa-color-danger-on-quiet: var(--wa-color-danger-min-70); + --wa-color-danger-on-normal: var(--wa-color-danger-95); + --wa-color-danger-on-loud: var(--wa-color-danger-10); - --wa-color-neutral-fill-quiet: var(--wa-color-gray-20); - --wa-color-neutral-fill-normal: var(--wa-color-gray-30); - --wa-color-neutral-fill-loud: var(--wa-color-gray-70); - --wa-color-neutral-border-quiet: var(--wa-color-gray-50); - --wa-color-neutral-border-normal: var(--wa-color-gray-80); - --wa-color-neutral-border-loud: var(--wa-color-gray-90); - --wa-color-neutral-on-quiet: var(--wa-color-gray-80); - --wa-color-neutral-on-normal: var(--wa-color-gray-95); - --wa-color-neutral-on-loud: var(--wa-color-gray-10); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-30); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-70); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-50); + --wa-color-neutral-border-normal: var(--wa-color-neutral-80); + --wa-color-neutral-border-loud: var(--wa-color-neutral-90); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-80); + --wa-color-neutral-on-normal: var(--wa-color-neutral-95); + --wa-color-neutral-on-loud: var(--wa-color-neutral-10); } diff --git a/src/styles/themes/classic/color.css b/src/styles/themes/classic/color.css index c2ded2237..a42a72998 100644 --- a/src/styles/themes/classic/color.css +++ b/src/styles/themes/classic/color.css @@ -1,6 +1,10 @@ @import url('../../color/classic.css'); @import url('../default/color.css'); @import url('../../brand/blue.css'); +@import url('../../success/green.css'); +@import url('../../warning/yellow.css'); +@import url('../../danger/red.css'); +@import url('../../neutral/gray.css'); :where(:root), :host, @@ -22,44 +26,44 @@ --wa-color-brand-on-normal: var(--wa-color-brand-40); --wa-color-brand-on-loud: white; - --wa-color-success-fill-quiet: var(--wa-color-green-95); - --wa-color-success-fill-normal: var(--wa-color-green-90); - --wa-color-success-fill-loud: var(--wa-color-green-50); - --wa-color-success-border-quiet: var(--wa-color-green-90); - --wa-color-success-border-normal: var(--wa-color-green-80); - --wa-color-success-border-loud: var(--wa-color-green-60); - --wa-color-success-on-quiet: var(--wa-color-green-50); - --wa-color-success-on-normal: var(--wa-color-green-40); + --wa-color-success-fill-quiet: var(--wa-color-success-95); + --wa-color-success-fill-normal: var(--wa-color-success-90); + --wa-color-success-fill-loud: var(--wa-color-success-50); + --wa-color-success-border-quiet: var(--wa-color-success-90); + --wa-color-success-border-normal: var(--wa-color-success-80); + --wa-color-success-border-loud: var(--wa-color-success-60); + --wa-color-success-on-quiet: var(--wa-color-success-50); + --wa-color-success-on-normal: var(--wa-color-success-40); --wa-color-success-on-loud: white; - --wa-color-warning-fill-quiet: var(--wa-color-yellow-95); - --wa-color-warning-fill-normal: var(--wa-color-yellow-90); - --wa-color-warning-fill-loud: var(--wa-color-yellow-50); - --wa-color-warning-border-quiet: var(--wa-color-yellow-90); - --wa-color-warning-border-normal: var(--wa-color-yellow-80); - --wa-color-warning-border-loud: var(--wa-color-yellow-60); - --wa-color-warning-on-quiet: var(--wa-color-yellow-50); - --wa-color-warning-on-normal: var(--wa-color-yellow-40); + --wa-color-warning-fill-quiet: var(--wa-color-warning-95); + --wa-color-warning-fill-normal: var(--wa-color-warning-90); + --wa-color-warning-fill-loud: var(--wa-color-warning-50); + --wa-color-warning-border-quiet: var(--wa-color-warning-90); + --wa-color-warning-border-normal: var(--wa-color-warning-80); + --wa-color-warning-border-loud: var(--wa-color-warning-60); + --wa-color-warning-on-quiet: var(--wa-color-warning-50); + --wa-color-warning-on-normal: var(--wa-color-warning-40); --wa-color-warning-on-loud: white; - --wa-color-danger-fill-quiet: var(--wa-color-red-95); - --wa-color-danger-fill-normal: var(--wa-color-red-90); - --wa-color-danger-fill-loud: var(--wa-color-red-50); - --wa-color-danger-border-quiet: var(--wa-color-red-90); - --wa-color-danger-border-normal: var(--wa-color-red-80); - --wa-color-danger-border-loud: var(--wa-color-red-60); - --wa-color-danger-on-quiet: var(--wa-color-red-50); - --wa-color-danger-on-normal: var(--wa-color-red-40); + --wa-color-danger-fill-quiet: var(--wa-color-danger-95); + --wa-color-danger-fill-normal: var(--wa-color-danger-90); + --wa-color-danger-fill-loud: var(--wa-color-danger-50); + --wa-color-danger-border-quiet: var(--wa-color-danger-90); + --wa-color-danger-border-normal: var(--wa-color-danger-80); + --wa-color-danger-border-loud: var(--wa-color-danger-60); + --wa-color-danger-on-quiet: var(--wa-color-danger-50); + --wa-color-danger-on-normal: var(--wa-color-danger-40); --wa-color-danger-on-loud: white; - --wa-color-neutral-fill-quiet: var(--wa-color-gray-95); - --wa-color-neutral-fill-normal: var(--wa-color-gray-90); - --wa-color-neutral-fill-loud: var(--wa-color-gray-40); - --wa-color-neutral-border-quiet: var(--wa-color-gray-90); - --wa-color-neutral-border-normal: var(--wa-color-gray-80); - --wa-color-neutral-border-loud: var(--wa-color-gray-50); - --wa-color-neutral-on-quiet: var(--wa-color-gray-40); - --wa-color-neutral-on-normal: var(--wa-color-gray-30); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-40); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-90); + --wa-color-neutral-border-normal: var(--wa-color-neutral-80); + --wa-color-neutral-border-loud: var(--wa-color-neutral-50); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-40); + --wa-color-neutral-on-normal: var(--wa-color-neutral-30); --wa-color-neutral-on-loud: white; } @@ -69,7 +73,7 @@ /** * Foundational Colors */ - --wa-color-text-normal: var(--wa-color-gray-80); + --wa-color-text-normal: var(--wa-color-neutral-80); /** * Semantic Colors @@ -82,45 +86,45 @@ --wa-color-brand-border-loud: var(--wa-color-brand-50); --wa-color-brand-on-quiet: var(--wa-color-brand-70); --wa-color-brand-on-normal: var(--wa-color-brand-80); - --wa-color-brand-on-loud: var(--wa-color-gray-10); + --wa-color-brand-on-loud: var(--wa-color-neutral-10); - --wa-color-success-fill-quiet: var(--wa-color-green-20); - --wa-color-success-fill-normal: var(--wa-color-green-30); - --wa-color-success-fill-loud: var(--wa-color-green-70); - --wa-color-success-border-quiet: var(--wa-color-green-30); - --wa-color-success-border-normal: var(--wa-color-green-40); - --wa-color-success-border-loud: var(--wa-color-green-50); - --wa-color-success-on-quiet: var(--wa-color-green-70); - --wa-color-success-on-normal: var(--wa-color-green-80); - --wa-color-success-on-loud: var(--wa-color-gray-10); + --wa-color-success-fill-quiet: var(--wa-color-success-20); + --wa-color-success-fill-normal: var(--wa-color-success-30); + --wa-color-success-fill-loud: var(--wa-color-success-70); + --wa-color-success-border-quiet: var(--wa-color-success-30); + --wa-color-success-border-normal: var(--wa-color-success-40); + --wa-color-success-border-loud: var(--wa-color-success-50); + --wa-color-success-on-quiet: var(--wa-color-success-70); + --wa-color-success-on-normal: var(--wa-color-success-80); + --wa-color-success-on-loud: var(--wa-color-neutral-10); - --wa-color-warning-fill-quiet: var(--wa-color-yellow-20); - --wa-color-warning-fill-normal: var(--wa-color-yellow-30); - --wa-color-warning-fill-loud: var(--wa-color-yellow-70); - --wa-color-warning-border-quiet: var(--wa-color-yellow-30); - --wa-color-warning-border-normal: var(--wa-color-yellow-40); - --wa-color-warning-border-loud: var(--wa-color-yellow-50); - --wa-color-warning-on-quiet: var(--wa-color-yellow-70); - --wa-color-warning-on-normal: var(--wa-color-yellow-80); - --wa-color-warning-on-loud: var(--wa-color-gray-10); + --wa-color-warning-fill-quiet: var(--wa-color-warning-20); + --wa-color-warning-fill-normal: var(--wa-color-warning-30); + --wa-color-warning-fill-loud: var(--wa-color-warning-70); + --wa-color-warning-border-quiet: var(--wa-color-warning-30); + --wa-color-warning-border-normal: var(--wa-color-warning-40); + --wa-color-warning-border-loud: var(--wa-color-warning-50); + --wa-color-warning-on-quiet: var(--wa-color-warning-70); + --wa-color-warning-on-normal: var(--wa-color-warning-80); + --wa-color-warning-on-loud: var(--wa-color-neutral-10); - --wa-color-danger-fill-quiet: var(--wa-color-red-20); - --wa-color-danger-fill-normal: var(--wa-color-red-30); - --wa-color-danger-fill-loud: var(--wa-color-red-60); - --wa-color-danger-border-quiet: var(--wa-color-red-30); - --wa-color-danger-border-normal: var(--wa-color-red-40); - --wa-color-danger-border-loud: var(--wa-color-red-50); - --wa-color-danger-on-quiet: var(--wa-color-red-70); - --wa-color-danger-on-normal: var(--wa-color-red-80); - --wa-color-danger-on-loud: var(--wa-color-gray-10); + --wa-color-danger-fill-quiet: var(--wa-color-danger-20); + --wa-color-danger-fill-normal: var(--wa-color-danger-30); + --wa-color-danger-fill-loud: var(--wa-color-danger-60); + --wa-color-danger-border-quiet: var(--wa-color-danger-30); + --wa-color-danger-border-normal: var(--wa-color-danger-40); + --wa-color-danger-border-loud: var(--wa-color-danger-50); + --wa-color-danger-on-quiet: var(--wa-color-danger-70); + --wa-color-danger-on-normal: var(--wa-color-danger-80); + --wa-color-danger-on-loud: var(--wa-color-neutral-10); - --wa-color-neutral-fill-quiet: var(--wa-color-gray-10); - --wa-color-neutral-fill-normal: var(--wa-color-gray-20); - --wa-color-neutral-fill-loud: var(--wa-color-gray-60); - --wa-color-neutral-border-quiet: var(--wa-color-gray-20); - --wa-color-neutral-border-normal: var(--wa-color-gray-30); - --wa-color-neutral-border-loud: var(--wa-color-gray-50); - --wa-color-neutral-on-quiet: var(--wa-color-gray-60); - --wa-color-neutral-on-normal: var(--wa-color-gray-70); - --wa-color-neutral-on-loud: var(--wa-color-gray-05); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-20); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-60); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-20); + --wa-color-neutral-border-normal: var(--wa-color-neutral-30); + --wa-color-neutral-border-loud: var(--wa-color-neutral-50); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-60); + --wa-color-neutral-on-normal: var(--wa-color-neutral-70); + --wa-color-neutral-on-loud: var(--wa-color-neutral-05); } diff --git a/src/styles/themes/default/color.css b/src/styles/themes/default/color.css index bf027e1a4..da6fd8339 100644 --- a/src/styles/themes/default/color.css +++ b/src/styles/themes/default/color.css @@ -1,4 +1,8 @@ @import url('../../brand/blue.css'); +@import url('../../success/green.css'); +@import url('../../warning/yellow.css'); +@import url('../../danger/red.css'); +@import url('../../neutral/gray.css'); /** * Foundational Colors and Semantic Colors @@ -20,25 +24,25 @@ * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */ --wa-color-surface-raised: white; --wa-color-surface-default: white; - --wa-color-surface-lowered: var(--wa-color-gray-95); - --wa-color-surface-border: var(--wa-color-gray-90); + --wa-color-surface-lowered: var(--wa-color-neutral-95); + --wa-color-surface-border: var(--wa-color-neutral-90); /* Text colors are used for standard text elements. * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */ - --wa-color-text-normal: var(--wa-color-gray-10); - --wa-color-text-quiet: var(--wa-color-gray-40); + --wa-color-text-normal: var(--wa-color-neutral-10); + --wa-color-text-quiet: var(--wa-color-neutral-40); --wa-color-text-link: var(--wa-color-brand-40); /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */ - --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-05) 50%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent); + --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent); + --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 20%, transparent); /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties. * By default, the opacity of your shadow color is tied to the blur of shadows in your theme. * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */ --wa-color-shadow: color-mix( in oklab, - var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), + var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), transparent ); @@ -61,7 +65,7 @@ */ --wa-color-brand-fill-quiet: var(--wa-color-brand-95); --wa-color-brand-fill-normal: var(--wa-color-brand-90); - --wa-color-brand-fill-loud: var(--wa-color-brand-50-max); + --wa-color-brand-fill-loud: var(--wa-color-brand-max-50); --wa-color-brand-border-quiet: var(--wa-color-brand-90); --wa-color-brand-border-normal: var(--wa-color-brand-80); --wa-color-brand-border-loud: var(--wa-color-brand-60); @@ -69,44 +73,44 @@ --wa-color-brand-on-normal: var(--wa-color-brand-30); --wa-color-brand-on-loud: white; - --wa-color-success-fill-quiet: var(--wa-color-green-95); - --wa-color-success-fill-normal: var(--wa-color-green-90); - --wa-color-success-fill-loud: var(--wa-color-green-50); - --wa-color-success-border-quiet: var(--wa-color-green-90); - --wa-color-success-border-normal: var(--wa-color-green-80); - --wa-color-success-border-loud: var(--wa-color-green-60); - --wa-color-success-on-quiet: var(--wa-color-green-40); - --wa-color-success-on-normal: var(--wa-color-green-30); + --wa-color-success-fill-quiet: var(--wa-color-success-95); + --wa-color-success-fill-normal: var(--wa-color-success-90); + --wa-color-success-fill-loud: var(--wa-color-success-max-50); + --wa-color-success-border-quiet: var(--wa-color-success-90); + --wa-color-success-border-normal: var(--wa-color-success-80); + --wa-color-success-border-loud: var(--wa-color-success-60); + --wa-color-success-on-quiet: var(--wa-color-success-40); + --wa-color-success-on-normal: var(--wa-color-success-30); --wa-color-success-on-loud: white; - --wa-color-warning-fill-quiet: var(--wa-color-yellow-95); - --wa-color-warning-fill-normal: var(--wa-color-yellow-90); - --wa-color-warning-fill-loud: var(--wa-color-yellow-50); - --wa-color-warning-border-quiet: var(--wa-color-yellow-90); - --wa-color-warning-border-normal: var(--wa-color-yellow-80); - --wa-color-warning-border-loud: var(--wa-color-yellow-60); - --wa-color-warning-on-quiet: var(--wa-color-yellow-40); - --wa-color-warning-on-normal: var(--wa-color-yellow-30); + --wa-color-warning-fill-quiet: var(--wa-color-warning-95); + --wa-color-warning-fill-normal: var(--wa-color-warning-90); + --wa-color-warning-fill-loud: var(--wa-color-warning-max-50); + --wa-color-warning-border-quiet: var(--wa-color-warning-90); + --wa-color-warning-border-normal: var(--wa-color-warning-80); + --wa-color-warning-border-loud: var(--wa-color-warning-60); + --wa-color-warning-on-quiet: var(--wa-color-warning-40); + --wa-color-warning-on-normal: var(--wa-color-warning-30); --wa-color-warning-on-loud: white; - --wa-color-danger-fill-quiet: var(--wa-color-red-95); - --wa-color-danger-fill-normal: var(--wa-color-red-90); - --wa-color-danger-fill-loud: var(--wa-color-red-50); - --wa-color-danger-border-quiet: var(--wa-color-red-90); - --wa-color-danger-border-normal: var(--wa-color-red-80); - --wa-color-danger-border-loud: var(--wa-color-red-60); - --wa-color-danger-on-quiet: var(--wa-color-red-40); - --wa-color-danger-on-normal: var(--wa-color-red-30); + --wa-color-danger-fill-quiet: var(--wa-color-danger-95); + --wa-color-danger-fill-normal: var(--wa-color-danger-90); + --wa-color-danger-fill-loud: var(--wa-color-danger-max-50); + --wa-color-danger-border-quiet: var(--wa-color-danger-90); + --wa-color-danger-border-normal: var(--wa-color-danger-80); + --wa-color-danger-border-loud: var(--wa-color-danger-60); + --wa-color-danger-on-quiet: var(--wa-color-danger-40); + --wa-color-danger-on-normal: var(--wa-color-danger-30); --wa-color-danger-on-loud: white; - --wa-color-neutral-fill-quiet: var(--wa-color-gray-95); - --wa-color-neutral-fill-normal: var(--wa-color-gray-90); - --wa-color-neutral-fill-loud: var(--wa-color-gray-20); - --wa-color-neutral-border-quiet: var(--wa-color-gray-90); - --wa-color-neutral-border-normal: var(--wa-color-gray-80); - --wa-color-neutral-border-loud: var(--wa-color-gray-60); - --wa-color-neutral-on-quiet: var(--wa-color-gray-40); - --wa-color-neutral-on-normal: var(--wa-color-gray-30); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-20); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-90); + --wa-color-neutral-border-normal: var(--wa-color-neutral-80); + --wa-color-neutral-border-loud: var(--wa-color-neutral-60); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-40); + --wa-color-neutral-on-normal: var(--wa-color-neutral-30); --wa-color-neutral-on-loud: white; } @@ -120,17 +124,17 @@ /** * Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-gray-10); - --wa-color-surface-default: var(--wa-color-gray-05); + --wa-color-surface-raised: var(--wa-color-neutral-10); + --wa-color-surface-default: var(--wa-color-neutral-05); --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%); - --wa-color-surface-border: var(--wa-color-gray-20); + --wa-color-surface-border: var(--wa-color-neutral-20); - --wa-color-text-normal: var(--wa-color-gray-95); - --wa-color-text-quiet: var(--wa-color-gray-60); + --wa-color-text-normal: var(--wa-color-neutral-95); + --wa-color-text-quiet: var(--wa-color-neutral-60); --wa-color-text-link: var(--wa-color-brand-70); --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent); + --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent); /* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */ --wa-color-shadow: color-mix( @@ -149,51 +153,51 @@ */ --wa-color-brand-fill-quiet: var(--wa-color-brand-10); --wa-color-brand-fill-normal: var(--wa-color-brand-20); - --wa-color-brand-fill-loud: var(--wa-color-brand-50-max); + --wa-color-brand-fill-loud: var(--wa-color-brand-50); --wa-color-brand-border-quiet: var(--wa-color-brand-20); --wa-color-brand-border-normal: var(--wa-color-brand-30); --wa-color-brand-border-loud: var(--wa-color-brand-40); - --wa-color-brand-on-quiet: var(--wa-color-brand-60); + --wa-color-brand-on-quiet: var(--wa-color-brand-min-60); --wa-color-brand-on-normal: var(--wa-color-brand-70); --wa-color-brand-on-loud: white; - --wa-color-success-fill-quiet: var(--wa-color-green-10); - --wa-color-success-fill-normal: var(--wa-color-green-20); - --wa-color-success-fill-loud: var(--wa-color-green-50); - --wa-color-success-border-quiet: var(--wa-color-green-20); - --wa-color-success-border-normal: var(--wa-color-green-30); - --wa-color-success-border-loud: var(--wa-color-green-40); - --wa-color-success-on-quiet: var(--wa-color-green-60); - --wa-color-success-on-normal: var(--wa-color-green-70); + --wa-color-success-fill-quiet: var(--wa-color-success-10); + --wa-color-success-fill-normal: var(--wa-color-success-20); + --wa-color-success-fill-loud: var(--wa-color-success-50); + --wa-color-success-border-quiet: var(--wa-color-success-20); + --wa-color-success-border-normal: var(--wa-color-success-30); + --wa-color-success-border-loud: var(--wa-color-success-40); + --wa-color-success-on-quiet: var(--wa-color-success-min-60); + --wa-color-success-on-normal: var(--wa-color-success-70); --wa-color-success-on-loud: white; - --wa-color-warning-fill-quiet: var(--wa-color-yellow-10); - --wa-color-warning-fill-normal: var(--wa-color-yellow-20); - --wa-color-warning-fill-loud: var(--wa-color-yellow-50); - --wa-color-warning-border-quiet: var(--wa-color-yellow-20); - --wa-color-warning-border-normal: var(--wa-color-yellow-30); - --wa-color-warning-border-loud: var(--wa-color-yellow-40); - --wa-color-warning-on-quiet: var(--wa-color-yellow-60); - --wa-color-warning-on-normal: var(--wa-color-yellow-70); + --wa-color-warning-fill-quiet: var(--wa-color-warning-10); + --wa-color-warning-fill-normal: var(--wa-color-warning-20); + --wa-color-warning-fill-loud: var(--wa-color-warning-50); + --wa-color-warning-border-quiet: var(--wa-color-warning-20); + --wa-color-warning-border-normal: var(--wa-color-warning-30); + --wa-color-warning-border-loud: var(--wa-color-warning-40); + --wa-color-warning-on-quiet: var(--wa-color-warning-min-60); + --wa-color-warning-on-normal: var(--wa-color-warning-70); --wa-color-warning-on-loud: white; - --wa-color-danger-fill-quiet: var(--wa-color-red-10); - --wa-color-danger-fill-normal: var(--wa-color-red-20); - --wa-color-danger-fill-loud: var(--wa-color-red-50); - --wa-color-danger-border-quiet: var(--wa-color-red-20); - --wa-color-danger-border-normal: var(--wa-color-red-30); - --wa-color-danger-border-loud: var(--wa-color-red-40); - --wa-color-danger-on-quiet: var(--wa-color-red-60); - --wa-color-danger-on-normal: var(--wa-color-red-70); + --wa-color-danger-fill-quiet: var(--wa-color-danger-10); + --wa-color-danger-fill-normal: var(--wa-color-danger-20); + --wa-color-danger-fill-loud: var(--wa-color-danger-50); + --wa-color-danger-border-quiet: var(--wa-color-danger-20); + --wa-color-danger-border-normal: var(--wa-color-danger-30); + --wa-color-danger-border-loud: var(--wa-color-danger-40); + --wa-color-danger-on-quiet: var(--wa-color-danger-min-60); + --wa-color-danger-on-normal: var(--wa-color-danger-70); --wa-color-danger-on-loud: white; - --wa-color-neutral-fill-quiet: var(--wa-color-gray-10); - --wa-color-neutral-fill-normal: var(--wa-color-gray-20); - --wa-color-neutral-fill-loud: var(--wa-color-gray-90); - --wa-color-neutral-border-quiet: var(--wa-color-gray-20); - --wa-color-neutral-border-normal: var(--wa-color-gray-30); - --wa-color-neutral-border-loud: var(--wa-color-gray-40); - --wa-color-neutral-on-quiet: var(--wa-color-gray-60); - --wa-color-neutral-on-normal: var(--wa-color-gray-70); - --wa-color-neutral-on-loud: var(--wa-color-gray-05); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-20); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-90); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-20); + --wa-color-neutral-border-normal: var(--wa-color-neutral-30); + --wa-color-neutral-border-loud: var(--wa-color-neutral-40); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-60); + --wa-color-neutral-on-normal: var(--wa-color-neutral-70); + --wa-color-neutral-on-loud: var(--wa-color-neutral-05); } diff --git a/src/styles/themes/glossy/color.css b/src/styles/themes/glossy/color.css index b8bed8836..831354aee 100644 --- a/src/styles/themes/glossy/color.css +++ b/src/styles/themes/glossy/color.css @@ -1,67 +1,7 @@ @import url('../../color/elegant.css'); @import url('../default/color.css'); @import url('../../brand/indigo.css'); - -:where(:root), -:host, -.wa-theme-glossy, -.wa-light, -.wa-dark .wa-invert { - /** - * Foundational Colors - */ - --wa-color-text-link: var(--wa-color-brand-40); - - --wa-color-focus: var(--wa-color-brand-60); - - /** - * Semantic Colors - */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-95); - --wa-color-brand-fill-normal: var(--wa-color-brand-90); - --wa-color-brand-fill-loud: var(--wa-color-brand); - --wa-color-brand-border-quiet: var(--wa-color-brand-90); - --wa-color-brand-border-normal: var(--wa-color-brand-80); - --wa-color-brand-border-loud: var(--wa-color-brand-60); - --wa-color-brand-on-quiet: var(--wa-color-brand-40); - --wa-color-brand-on-normal: var(--wa-color-brand-30); - --wa-color-brand-on-loud: var(--wa-color-brand-on); - - --wa-color-success-fill-loud: var(--wa-color-green-40); - - --wa-color-warning-fill-loud: var(--wa-color-yellow-40); - - --wa-color-danger-fill-loud: var(--wa-color-red-40); - - --wa-color-neutral-fill-loud: var(--wa-color-gray-10); -} - -.wa-dark, -.wa-invert, -:is(:host-context(.wa-dark)) { - /** - * Foundational Colors - */ - --wa-color-text-link: var(--wa-color-brand-70); - - --wa-color-focus: var(--wa-color-brand-60); - - /** - * Semantic Colors - */ - --wa-color-brand-fill-quiet: var(--wa-color-brand-10); - --wa-color-brand-fill-normal: var(--wa-color-brand-20); - --wa-color-brand-fill-loud: var(--wa-color-brand); - --wa-color-brand-border-quiet: var(--wa-color-brand-20); - --wa-color-brand-border-normal: var(--wa-color-brand-30); - --wa-color-brand-border-loud: var(--wa-color-brand-40); - --wa-color-brand-on-quiet: var(--wa-color-brand-60); - --wa-color-brand-on-normal: var(--wa-color-brand-70); - --wa-color-brand-on-loud: var(--wa-color-brand-on); - - --wa-color-success-fill-loud: var(--wa-color-green-40); - - --wa-color-warning-fill-loud: var(--wa-color-yellow-40); - - --wa-color-danger-fill-loud: var(--wa-color-red-40); -} +@import url('../../success/green.css'); +@import url('../../warning/yellow.css'); +@import url('../../danger/red.css'); +@import url('../../neutral/gray.css'); diff --git a/src/styles/themes/matter/color.css b/src/styles/themes/matter/color.css index 62648dcbf..d3e891796 100644 --- a/src/styles/themes/matter/color.css +++ b/src/styles/themes/matter/color.css @@ -1,6 +1,10 @@ @import url('../../color/mild.css'); @import url('../default/color.css'); -@import url('../../brand/indigo.css'); +@import url('../../brand/purple.css'); +@import url('../../success/green.css'); +@import url('../../warning/yellow.css'); +@import url('../../danger/red.css'); +@import url('../../neutral/gray.css'); :where(:root), :host, @@ -15,7 +19,7 @@ */ --wa-color-surface-raised: var(--wa-color-brand-95); - --wa-color-surface-lowered: var(--wa-color-gray-90); + --wa-color-surface-lowered: var(--wa-color-neutral-90); --wa-color-text-link: var(--wa-color-brand-40); @@ -39,44 +43,44 @@ --wa-color-brand-on-normal: var(--wa-color-brand-30); --wa-color-brand-on-loud: white; - --wa-color-success-fill-quiet: var(--wa-color-green-95); - --wa-color-success-fill-normal: var(--wa-color-green-90); - --wa-color-success-fill-loud: var(--wa-color-green-40); - --wa-color-success-border-quiet: var(--wa-color-green-90); - --wa-color-success-border-normal: var(--wa-color-green-80); - --wa-color-success-border-loud: var(--wa-color-green-50); - --wa-color-success-on-quiet: var(--wa-color-green-40); - --wa-color-success-on-normal: var(--wa-color-green-30); + --wa-color-success-fill-quiet: var(--wa-color-success-95); + --wa-color-success-fill-normal: var(--wa-color-success-90); + --wa-color-success-fill-loud: var(--wa-color-success-40); + --wa-color-success-border-quiet: var(--wa-color-success-90); + --wa-color-success-border-normal: var(--wa-color-success-80); + --wa-color-success-border-loud: var(--wa-color-success-50); + --wa-color-success-on-quiet: var(--wa-color-success-40); + --wa-color-success-on-normal: var(--wa-color-success-30); --wa-color-success-on-loud: white; - --wa-color-warning-fill-quiet: var(--wa-color-yellow-95); - --wa-color-warning-fill-normal: var(--wa-color-yellow-90); - --wa-color-warning-fill-loud: var(--wa-color-yellow-40); - --wa-color-warning-border-quiet: var(--wa-color-yellow-90); - --wa-color-warning-border-normal: var(--wa-color-yellow-80); - --wa-color-warning-border-loud: var(--wa-color-yellow-50); - --wa-color-warning-on-quiet: var(--wa-color-yellow-40); - --wa-color-warning-on-normal: var(--wa-color-yellow-30); + --wa-color-warning-fill-quiet: var(--wa-color-warning-95); + --wa-color-warning-fill-normal: var(--wa-color-warning-90); + --wa-color-warning-fill-loud: var(--wa-color-warning-40); + --wa-color-warning-border-quiet: var(--wa-color-warning-90); + --wa-color-warning-border-normal: var(--wa-color-warning-80); + --wa-color-warning-border-loud: var(--wa-color-warning-50); + --wa-color-warning-on-quiet: var(--wa-color-warning-40); + --wa-color-warning-on-normal: var(--wa-color-warning-30); --wa-color-warning-on-loud: white; - --wa-color-danger-fill-quiet: var(--wa-color-red-95); - --wa-color-danger-fill-normal: var(--wa-color-red-90); - --wa-color-danger-fill-loud: var(--wa-color-red-40); - --wa-color-danger-border-quiet: var(--wa-color-red-90); - --wa-color-danger-border-normal: var(--wa-color-red-80); - --wa-color-danger-border-loud: var(--wa-color-red-50); - --wa-color-danger-on-quiet: var(--wa-color-red-40); - --wa-color-danger-on-normal: var(--wa-color-red-30); + --wa-color-danger-fill-quiet: var(--wa-color-danger-95); + --wa-color-danger-fill-normal: var(--wa-color-danger-90); + --wa-color-danger-fill-loud: var(--wa-color-danger-40); + --wa-color-danger-border-quiet: var(--wa-color-danger-90); + --wa-color-danger-border-normal: var(--wa-color-danger-80); + --wa-color-danger-border-loud: var(--wa-color-danger-50); + --wa-color-danger-on-quiet: var(--wa-color-danger-40); + --wa-color-danger-on-normal: var(--wa-color-danger-30); --wa-color-danger-on-loud: white; - --wa-color-neutral-fill-quiet: var(--wa-color-gray-95); - --wa-color-neutral-fill-normal: var(--wa-color-gray-90); - --wa-color-neutral-fill-loud: var(--wa-color-gray-40); - --wa-color-neutral-border-quiet: var(--wa-color-gray-90); - --wa-color-neutral-border-normal: var(--wa-color-gray-80); - --wa-color-neutral-border-loud: var(--wa-color-gray-50); - --wa-color-neutral-on-quiet: var(--wa-color-gray-30); - --wa-color-neutral-on-normal: var(--wa-color-gray-20); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-40); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-90); + --wa-color-neutral-border-normal: var(--wa-color-neutral-80); + --wa-color-neutral-border-loud: var(--wa-color-neutral-50); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-30); + --wa-color-neutral-on-normal: var(--wa-color-neutral-20); --wa-color-neutral-on-loud: white; } @@ -102,43 +106,43 @@ --wa-color-brand-on-normal: var(--wa-color-brand-80); --wa-color-brand-on-loud: var(--wa-color-brand-10); - --wa-color-success-fill-quiet: var(--wa-color-green-20); - --wa-color-success-fill-normal: var(--wa-color-green-30); - --wa-color-success-fill-loud: var(--wa-color-green-70); - --wa-color-success-border-quiet: var(--wa-color-green-20); - --wa-color-success-border-normal: var(--wa-color-green-30); - --wa-color-success-border-loud: var(--wa-color-green-60); - --wa-color-success-on-quiet: var(--wa-color-green-70); - --wa-color-success-on-normal: var(--wa-color-green-80); - --wa-color-success-on-loud: var(--wa-color-green-10); + --wa-color-success-fill-quiet: var(--wa-color-success-20); + --wa-color-success-fill-normal: var(--wa-color-success-30); + --wa-color-success-fill-loud: var(--wa-color-success-70); + --wa-color-success-border-quiet: var(--wa-color-success-20); + --wa-color-success-border-normal: var(--wa-color-success-30); + --wa-color-success-border-loud: var(--wa-color-success-60); + --wa-color-success-on-quiet: var(--wa-color-success-70); + --wa-color-success-on-normal: var(--wa-color-success-80); + --wa-color-success-on-loud: var(--wa-color-success-10); - --wa-color-warning-fill-quiet: var(--wa-color-yellow-20); - --wa-color-warning-fill-normal: var(--wa-color-yellow-30); - --wa-color-warning-fill-loud: var(--wa-color-yellow-70); - --wa-color-warning-border-quiet: var(--wa-color-yellow-20); - --wa-color-warning-border-normal: var(--wa-color-yellow-30); - --wa-color-warning-border-loud: var(--wa-color-yellow-60); - --wa-color-warning-on-quiet: var(--wa-color-yellow-70); - --wa-color-warning-on-normal: var(--wa-color-yellow-80); - --wa-color-warning-on-loud: var(--wa-color-yellow-10); + --wa-color-warning-fill-quiet: var(--wa-color-warning-20); + --wa-color-warning-fill-normal: var(--wa-color-warning-30); + --wa-color-warning-fill-loud: var(--wa-color-warning-70); + --wa-color-warning-border-quiet: var(--wa-color-warning-20); + --wa-color-warning-border-normal: var(--wa-color-warning-30); + --wa-color-warning-border-loud: var(--wa-color-warning-60); + --wa-color-warning-on-quiet: var(--wa-color-warning-70); + --wa-color-warning-on-normal: var(--wa-color-warning-80); + --wa-color-warning-on-loud: var(--wa-color-warning-10); - --wa-color-danger-fill-quiet: var(--wa-color-red-20); - --wa-color-danger-fill-normal: var(--wa-color-red-30); - --wa-color-danger-fill-loud: var(--wa-color-red-70); - --wa-color-danger-border-quiet: var(--wa-color-red-20); - --wa-color-danger-border-normal: var(--wa-color-red-30); - --wa-color-danger-border-loud: var(--wa-color-red-60); - --wa-color-danger-on-quiet: var(--wa-color-red-70); - --wa-color-danger-on-normal: var(--wa-color-red-80); - --wa-color-danger-on-loud: var(--wa-color-red-10); + --wa-color-danger-fill-quiet: var(--wa-color-danger-20); + --wa-color-danger-fill-normal: var(--wa-color-danger-30); + --wa-color-danger-fill-loud: var(--wa-color-danger-70); + --wa-color-danger-border-quiet: var(--wa-color-danger-20); + --wa-color-danger-border-normal: var(--wa-color-danger-30); + --wa-color-danger-border-loud: var(--wa-color-danger-60); + --wa-color-danger-on-quiet: var(--wa-color-danger-70); + --wa-color-danger-on-normal: var(--wa-color-danger-80); + --wa-color-danger-on-loud: var(--wa-color-danger-10); - --wa-color-neutral-fill-quiet: var(--wa-color-gray-20); - --wa-color-neutral-fill-normal: var(--wa-color-gray-30); - --wa-color-neutral-fill-loud: var(--wa-color-gray-70); - --wa-color-neutral-border-quiet: var(--wa-color-gray-20); - --wa-color-neutral-border-normal: var(--wa-color-gray-30); - --wa-color-neutral-border-loud: var(--wa-color-gray-80); - --wa-color-neutral-on-quiet: var(--wa-color-gray-70); - --wa-color-neutral-on-normal: var(--wa-color-gray-80); - --wa-color-neutral-on-loud: var(--wa-color-gray-10); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-30); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-70); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-20); + --wa-color-neutral-border-normal: var(--wa-color-neutral-30); + --wa-color-neutral-border-loud: var(--wa-color-neutral-80); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-70); + --wa-color-neutral-on-normal: var(--wa-color-neutral-80); + --wa-color-neutral-on-loud: var(--wa-color-neutral-10); } diff --git a/src/styles/themes/mellow/color.css b/src/styles/themes/mellow/color.css index aeca9a958..c8d945415 100644 --- a/src/styles/themes/mellow/color.css +++ b/src/styles/themes/mellow/color.css @@ -1,6 +1,10 @@ @import url('../../color/natural.css'); @import url('../default/color.css'); @import url('../../brand/blue.css'); +@import url('../../success/green.css'); +@import url('../../warning/yellow.css'); +@import url('../../danger/red.css'); +@import url('../../neutral/gray.css'); :where(:root), :host, @@ -14,9 +18,9 @@ * Foundational Colors */ --wa-color-surface-raised: white; - --wa-color-surface-default: var(--wa-color-gray-95); - --wa-color-surface-lowered: var(--wa-color-gray-90); - --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-80), transparent); + --wa-color-surface-default: var(--wa-color-neutral-95); + --wa-color-surface-lowered: var(--wa-color-neutral-90); + --wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-80), transparent); --wa-color-text-normal: var(--wa-color-brand-20); --wa-color-text-quiet: var(--wa-color-brand-40); @@ -29,7 +33,7 @@ */ --wa-color-brand-fill-quiet: var(--wa-color-brand-90); --wa-color-brand-fill-normal: var(--wa-color-brand-80); - --wa-color-brand-fill-loud: var(--wa-color-brand-50-max); + --wa-color-brand-fill-loud: var(--wa-color-brand-50); --wa-color-brand-border-quiet: var(--wa-color-brand-80); --wa-color-brand-border-normal: var(--wa-color-brand-70); --wa-color-brand-border-loud: var(--wa-color-brand-60); @@ -37,44 +41,44 @@ --wa-color-brand-on-normal: var(--wa-color-brand-30); --wa-color-brand-on-loud: white; - --wa-color-success-fill-quiet: var(--wa-color-green-90); - --wa-color-success-fill-normal: var(--wa-color-green-80); - --wa-color-success-fill-loud: var(--wa-color-green-50); - --wa-color-success-border-quiet: var(--wa-color-green-80); - --wa-color-success-border-normal: var(--wa-color-green-70); - --wa-color-success-border-loud: var(--wa-color-green-60); - --wa-color-success-on-quiet: var(--wa-color-green-40); - --wa-color-success-on-normal: var(--wa-color-green-30); + --wa-color-success-fill-quiet: var(--wa-color-success-90); + --wa-color-success-fill-normal: var(--wa-color-success-80); + --wa-color-success-fill-loud: var(--wa-color-success-50); + --wa-color-success-border-quiet: var(--wa-color-success-80); + --wa-color-success-border-normal: var(--wa-color-success-70); + --wa-color-success-border-loud: var(--wa-color-success-60); + --wa-color-success-on-quiet: var(--wa-color-success-40); + --wa-color-success-on-normal: var(--wa-color-success-30); --wa-color-success-on-loud: white; - --wa-color-warning-fill-quiet: var(--wa-color-yellow-90); - --wa-color-warning-fill-normal: var(--wa-color-yellow-80); - --wa-color-warning-fill-loud: var(--wa-color-yellow-50); - --wa-color-warning-border-quiet: var(--wa-color-yellow-80); - --wa-color-warning-border-normal: var(--wa-color-yellow-70); - --wa-color-warning-border-loud: var(--wa-color-yellow-60); - --wa-color-warning-on-quiet: var(--wa-color-yellow-40); - --wa-color-warning-on-normal: var(--wa-color-yellow-30); + --wa-color-warning-fill-quiet: var(--wa-color-warning-90); + --wa-color-warning-fill-normal: var(--wa-color-warning-80); + --wa-color-warning-fill-loud: var(--wa-color-warning-50); + --wa-color-warning-border-quiet: var(--wa-color-warning-80); + --wa-color-warning-border-normal: var(--wa-color-warning-70); + --wa-color-warning-border-loud: var(--wa-color-warning-60); + --wa-color-warning-on-quiet: var(--wa-color-warning-40); + --wa-color-warning-on-normal: var(--wa-color-warning-30); --wa-color-warning-on-loud: white; - --wa-color-danger-fill-quiet: var(--wa-color-red-90); - --wa-color-danger-fill-normal: var(--wa-color-red-80); - --wa-color-danger-fill-loud: var(--wa-color-red-50); - --wa-color-danger-border-quiet: var(--wa-color-red-80); - --wa-color-danger-border-normal: var(--wa-color-red-70); - --wa-color-danger-border-loud: var(--wa-color-red-60); - --wa-color-danger-on-quiet: var(--wa-color-red-40); - --wa-color-danger-on-normal: var(--wa-color-red-30); + --wa-color-danger-fill-quiet: var(--wa-color-danger-90); + --wa-color-danger-fill-normal: var(--wa-color-danger-80); + --wa-color-danger-fill-loud: var(--wa-color-danger-50); + --wa-color-danger-border-quiet: var(--wa-color-danger-80); + --wa-color-danger-border-normal: var(--wa-color-danger-70); + --wa-color-danger-border-loud: var(--wa-color-danger-60); + --wa-color-danger-on-quiet: var(--wa-color-danger-40); + --wa-color-danger-on-normal: var(--wa-color-danger-30); --wa-color-danger-on-loud: white; - --wa-color-neutral-fill-quiet: var(--wa-color-gray-90); - --wa-color-neutral-fill-normal: var(--wa-color-gray-80); - --wa-color-neutral-fill-loud: var(--wa-color-gray-50); - --wa-color-neutral-border-quiet: var(--wa-color-gray-80); - --wa-color-neutral-border-normal: var(--wa-color-gray-70); - --wa-color-neutral-border-loud: var(--wa-color-gray-60); - --wa-color-neutral-on-quiet: var(--wa-color-gray-40); - --wa-color-neutral-on-normal: var(--wa-color-gray-30); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-80); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-50); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-80); + --wa-color-neutral-border-normal: var(--wa-color-neutral-70); + --wa-color-neutral-border-loud: var(--wa-color-neutral-60); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-40); + --wa-color-neutral-on-normal: var(--wa-color-neutral-30); --wa-color-neutral-on-loud: white; } @@ -84,7 +88,7 @@ /** * Foundational Colors */ - --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-30), transparent); + --wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-30), transparent); --wa-color-text-normal: var(--wa-color-brand-90); --wa-color-text-quiet: var(--wa-color-brand-70); @@ -92,6 +96,6 @@ /** * Semantic Colors */ - --wa-color-neutral-fill-loud: var(--wa-color-gray-50); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-50); --wa-color-neutral-on-loud: white; } diff --git a/src/styles/themes/playful/color.css b/src/styles/themes/playful/color.css index 1c02e288b..731bab72d 100644 --- a/src/styles/themes/playful/color.css +++ b/src/styles/themes/playful/color.css @@ -1,6 +1,10 @@ @import url('../../color/rudimentary.css'); @import url('../default/color.css'); @import url('../../brand/purple.css'); +@import url('../../success/green.css'); +@import url('../../warning/yellow.css'); +@import url('../../danger/red.css'); +@import url('../../neutral/gray.css'); :where(:root), :host, @@ -10,7 +14,7 @@ /** * Foundational Colors */ - --wa-color-surface-border: var(--wa-color-gray-80); + --wa-color-surface-border: var(--wa-color-neutral-80); --wa-color-text-link: var(--wa-color-yellow-40); @@ -29,45 +33,45 @@ --wa-color-brand-on-normal: var(--wa-color-brand-30); --wa-color-brand-on-loud: var(--wa-color-brand-on); - --wa-color-success-fill-quiet: var(--wa-color-green-90); - --wa-color-success-fill-normal: var(--wa-color-green-80); - --wa-color-success-fill-loud: var(--wa-color-green-50); - --wa-color-success-border-quiet: var(--wa-color-green-90); - --wa-color-success-border-normal: var(--wa-color-green-70); - --wa-color-success-border-loud: var(--wa-color-green-50); - --wa-color-success-on-quiet: var(--wa-color-green-30); - --wa-color-success-on-normal: var(--wa-color-green-30); - --wa-color-success-on-loud: white; + --wa-color-success-fill-quiet: var(--wa-color-success-90); + --wa-color-success-fill-normal: var(--wa-color-success-80); + --wa-color-success-fill-loud: var(--wa-color-success); + --wa-color-success-border-quiet: var(--wa-color-success-90); + --wa-color-success-border-normal: var(--wa-color-success-70); + --wa-color-success-border-loud: var(--wa-color-success-50); + --wa-color-success-on-quiet: var(--wa-color-success-30); + --wa-color-success-on-normal: var(--wa-color-success-30); + --wa-color-success-on-loud: var(--wa-color-success-on); - --wa-color-warning-fill-quiet: var(--wa-color-yellow-90); - --wa-color-warning-fill-normal: var(--wa-color-yellow-80); - --wa-color-warning-fill-loud: var(--wa-color-yellow-50); - --wa-color-warning-border-quiet: var(--wa-color-yellow-90); - --wa-color-warning-border-normal: var(--wa-color-yellow-70); - --wa-color-warning-border-loud: var(--wa-color-yellow-50); - --wa-color-warning-on-quiet: var(--wa-color-yellow-30); - --wa-color-warning-on-normal: var(--wa-color-yellow-30); - --wa-color-warning-on-loud: white; + --wa-color-warning-fill-quiet: var(--wa-color-warning-90); + --wa-color-warning-fill-normal: var(--wa-color-warning-80); + --wa-color-warning-fill-loud: var(--wa-color-warning); + --wa-color-warning-border-quiet: var(--wa-color-warning-90); + --wa-color-warning-border-normal: var(--wa-color-warning-70); + --wa-color-warning-border-loud: var(--wa-color-warning-50); + --wa-color-warning-on-quiet: var(--wa-color-warning-30); + --wa-color-warning-on-normal: var(--wa-color-warning-30); + --wa-color-warning-on-loud: var(--wa-color-warning-on); - --wa-color-danger-fill-quiet: var(--wa-color-red-90); - --wa-color-danger-fill-normal: var(--wa-color-red-80); - --wa-color-danger-fill-loud: var(--wa-color-red-50); - --wa-color-danger-border-quiet: var(--wa-color-red-90); - --wa-color-danger-border-normal: var(--wa-color-red-70); - --wa-color-danger-border-loud: var(--wa-color-red-50); - --wa-color-danger-on-quiet: var(--wa-color-red-30); - --wa-color-danger-on-normal: var(--wa-color-red-30); - --wa-color-danger-on-loud: white; + --wa-color-danger-fill-quiet: var(--wa-color-danger-90); + --wa-color-danger-fill-normal: var(--wa-color-danger-80); + --wa-color-danger-fill-loud: var(--wa-color-danger); + --wa-color-danger-border-quiet: var(--wa-color-danger-90); + --wa-color-danger-border-normal: var(--wa-color-danger-70); + --wa-color-danger-border-loud: var(--wa-color-danger-50); + --wa-color-danger-on-quiet: var(--wa-color-danger-30); + --wa-color-danger-on-normal: var(--wa-color-danger-30); + --wa-color-danger-on-loud: var(--wa-color-danger-on); - --wa-color-neutral-fill-quiet: var(--wa-color-gray-90); - --wa-color-neutral-fill-normal: var(--wa-color-gray-80); - --wa-color-neutral-fill-loud: var(--wa-color-gray-40); - --wa-color-neutral-border-quiet: var(--wa-color-gray-90); - --wa-color-neutral-border-normal: var(--wa-color-gray-70); - --wa-color-neutral-border-loud: var(--wa-color-gray-50); - --wa-color-neutral-on-quiet: var(--wa-color-gray-30); - --wa-color-neutral-on-normal: var(--wa-color-gray-30); - --wa-color-neutral-on-loud: var(--wa-color-gray-95); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-90); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-80); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-40); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-90); + --wa-color-neutral-border-normal: var(--wa-color-neutral-70); + --wa-color-neutral-border-loud: var(--wa-color-neutral-50); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-30); + --wa-color-neutral-on-normal: var(--wa-color-neutral-30); + --wa-color-neutral-on-loud: var(--wa-color-neutral-95); } .wa-dark, @@ -76,13 +80,13 @@ /** * Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-gray-20); - --wa-color-surface-default: var(--wa-color-gray-10); - --wa-color-surface-lowered: var(--wa-color-gray-05); - --wa-color-surface-border: var(--wa-color-gray-20); + --wa-color-surface-raised: var(--wa-color-neutral-20); + --wa-color-surface-default: var(--wa-color-neutral-10); + --wa-color-surface-lowered: var(--wa-color-neutral-05); + --wa-color-surface-border: var(--wa-color-neutral-20); - --wa-color-text-normal: var(--wa-color-gray-95); - --wa-color-text-quiet: var(--wa-color-gray-60); + --wa-color-text-normal: var(--wa-color-neutral-95); + --wa-color-text-quiet: var(--wa-color-neutral-60); --wa-color-text-link: var(--wa-color-yellow-80); --wa-color-focus: var(--wa-color-brand-60); @@ -98,47 +102,47 @@ --wa-color-brand-border-quiet: var(--wa-color-brand-30); --wa-color-brand-border-normal: var(--wa-color-brand-40); --wa-color-brand-border-loud: var(--wa-color-brand-50); - --wa-color-brand-on-quiet: var(--wa-color-brand-70); + --wa-color-brand-on-quiet: var(--wa-color-brand-min-70); --wa-color-brand-on-normal: var(--wa-color-brand-90); --wa-color-brand-on-loud: var(--wa-color-brand-on); - --wa-color-success-fill-quiet: var(--wa-color-green-20); - --wa-color-success-fill-normal: var(--wa-color-green-40); - --wa-color-success-fill-loud: var(--wa-color-green-50); - --wa-color-success-border-quiet: var(--wa-color-green-30); - --wa-color-success-border-normal: var(--wa-color-green-40); - --wa-color-success-border-loud: var(--wa-color-green-50); - --wa-color-success-on-quiet: var(--wa-color-green-70); - --wa-color-success-on-normal: var(--wa-color-green-90); - --wa-color-success-on-loud: white; + --wa-color-success-fill-quiet: var(--wa-color-success-20); + --wa-color-success-fill-normal: var(--wa-color-success-40); + --wa-color-success-fill-loud: var(--wa-color-success); + --wa-color-success-border-quiet: var(--wa-color-success-30); + --wa-color-success-border-normal: var(--wa-color-success-40); + --wa-color-success-border-loud: var(--wa-color-success-50); + --wa-color-success-on-quiet: var(--wa-color-success-min-70); + --wa-color-success-on-normal: var(--wa-color-success-90); + --wa-color-success-on-loud: var(--wa-color-success-on); - --wa-color-warning-fill-quiet: var(--wa-color-yellow-20); - --wa-color-warning-fill-normal: var(--wa-color-yellow-40); - --wa-color-warning-fill-loud: var(--wa-color-yellow-50); - --wa-color-warning-border-quiet: var(--wa-color-yellow-30); - --wa-color-warning-border-normal: var(--wa-color-yellow-40); - --wa-color-warning-border-loud: var(--wa-color-yellow-50); - --wa-color-warning-on-quiet: var(--wa-color-yellow-70); - --wa-color-warning-on-normal: var(--wa-color-yellow-90); - --wa-color-warning-on-loud: white; + --wa-color-warning-fill-quiet: var(--wa-color-warning-20); + --wa-color-warning-fill-normal: var(--wa-color-warning-40); + --wa-color-warning-fill-loud: var(--wa-color-warning); + --wa-color-warning-border-quiet: var(--wa-color-warning-30); + --wa-color-warning-border-normal: var(--wa-color-warning-40); + --wa-color-warning-border-loud: var(--wa-color-warning-50); + --wa-color-warning-on-quiet: var(--wa-color-warning-min-70); + --wa-color-warning-on-normal: var(--wa-color-warning-90); + --wa-color-warning-on-loud: var(--wa-color-warning-on); - --wa-color-danger-fill-quiet: var(--wa-color-red-20); - --wa-color-danger-fill-normal: var(--wa-color-red-40); - --wa-color-danger-fill-loud: var(--wa-color-red-50); - --wa-color-danger-border-quiet: var(--wa-color-red-30); - --wa-color-danger-border-normal: var(--wa-color-red-40); - --wa-color-danger-border-loud: var(--wa-color-red-50); - --wa-color-danger-on-quiet: var(--wa-color-red-70); - --wa-color-danger-on-normal: var(--wa-color-red-90); - --wa-color-danger-on-loud: white; + --wa-color-danger-fill-quiet: var(--wa-color-danger-20); + --wa-color-danger-fill-normal: var(--wa-color-danger-40); + --wa-color-danger-fill-loud: var(--wa-color-danger); + --wa-color-danger-border-quiet: var(--wa-color-danger-30); + --wa-color-danger-border-normal: var(--wa-color-danger-40); + --wa-color-danger-border-loud: var(--wa-color-danger-50); + --wa-color-danger-on-quiet: var(--wa-color-danger-min-70); + --wa-color-danger-on-normal: var(--wa-color-danger-90); + --wa-color-danger-on-loud: var(--wa-color-danger-on); - --wa-color-neutral-fill-quiet: var(--wa-color-gray-20); - --wa-color-neutral-fill-normal: var(--wa-color-gray-40); - --wa-color-neutral-fill-loud: var(--wa-color-gray-70); - --wa-color-neutral-border-quiet: var(--wa-color-gray-30); - --wa-color-neutral-border-normal: var(--wa-color-gray-40); - --wa-color-neutral-border-loud: var(--wa-color-gray-50); - --wa-color-neutral-on-quiet: var(--wa-color-gray-70); - --wa-color-neutral-on-normal: var(--wa-color-gray-90); - --wa-color-neutral-on-loud: var(--wa-color-gray-05); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-20); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-40); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-70); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-30); + --wa-color-neutral-border-normal: var(--wa-color-neutral-40); + --wa-color-neutral-border-loud: var(--wa-color-neutral-50); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-70); + --wa-color-neutral-on-normal: var(--wa-color-neutral-90); + --wa-color-neutral-on-loud: var(--wa-color-neutral-05); } diff --git a/src/styles/themes/premium/color.css b/src/styles/themes/premium/color.css index 5f71e430b..d28d65046 100644 --- a/src/styles/themes/premium/color.css +++ b/src/styles/themes/premium/color.css @@ -1,6 +1,10 @@ @import url('../../color/anodized.css'); @import url('../default/color.css'); @import url('../../brand/cyan.css'); +@import url('../../success/green.css'); +@import url('../../warning/yellow.css'); +@import url('../../danger/red.css'); +@import url('../../neutral/gray.css'); :where(:root), :host, @@ -10,11 +14,7 @@ /** * Foundational Colors */ - --wa-color-surface-border: var(--wa-color-gray-80); - - --wa-color-text-link: var(--wa-color-brand-40); - - --wa-color-focus: var(--wa-color-brand-60); + --wa-color-surface-border: var(--wa-color-neutral-80); --wa-color-mix-hover: white 10%; --wa-color-mix-active: var(--wa-color-surface-default) 5%; @@ -24,7 +24,7 @@ */ --wa-color-brand-fill-quiet: var(--wa-color-brand-95); --wa-color-brand-fill-normal: var(--wa-color-brand-90); - --wa-color-brand-fill-loud: var(--wa-color-brand); + --wa-color-brand-fill-loud: var(--wa-color-brand-min-70); --wa-color-brand-border-quiet: var(--wa-color-brand-80); --wa-color-brand-border-normal: var(--wa-color-brand-70); --wa-color-brand-border-loud: var(--wa-color-brand-50); @@ -32,45 +32,45 @@ --wa-color-brand-on-normal: var(--wa-color-brand-30); --wa-color-brand-on-loud: var(--wa-color-brand-on); - --wa-color-success-fill-quiet: var(--wa-color-green-95); - --wa-color-success-fill-normal: var(--wa-color-green-90); - --wa-color-success-fill-loud: var(--wa-color-green-80); - --wa-color-success-border-quiet: var(--wa-color-green-80); - --wa-color-success-border-normal: var(--wa-color-green-70); - --wa-color-success-border-loud: var(--wa-color-green-50); - --wa-color-success-on-quiet: var(--wa-color-green-40); - --wa-color-success-on-normal: var(--wa-color-green-30); - --wa-color-success-on-loud: var(--wa-color-green-20); + --wa-color-success-fill-quiet: var(--wa-color-success-95); + --wa-color-success-fill-normal: var(--wa-color-success-90); + --wa-color-success-fill-loud: var(--wa-color-success-min-70); + --wa-color-success-border-quiet: var(--wa-color-success-80); + --wa-color-success-border-normal: var(--wa-color-success-70); + --wa-color-success-border-loud: var(--wa-color-success-50); + --wa-color-success-on-quiet: var(--wa-color-success-40); + --wa-color-success-on-normal: var(--wa-color-success-30); + --wa-color-success-on-loud: var(--wa-color-success-20); - --wa-color-warning-fill-quiet: var(--wa-color-yellow-95); - --wa-color-warning-fill-normal: var(--wa-color-yellow-90); - --wa-color-warning-fill-loud: var(--wa-color-yellow-80); - --wa-color-warning-border-quiet: var(--wa-color-yellow-80); - --wa-color-warning-border-normal: var(--wa-color-yellow-70); - --wa-color-warning-border-loud: var(--wa-color-yellow-50); - --wa-color-warning-on-quiet: var(--wa-color-yellow-40); - --wa-color-warning-on-normal: var(--wa-color-yellow-30); - --wa-color-warning-on-loud: var(--wa-color-yellow-20); + --wa-color-warning-fill-quiet: var(--wa-color-warning-95); + --wa-color-warning-fill-normal: var(--wa-color-warning-90); + --wa-color-warning-fill-loud: var(--wa-color-warning-min-70); + --wa-color-warning-border-quiet: var(--wa-color-warning-80); + --wa-color-warning-border-normal: var(--wa-color-warning-70); + --wa-color-warning-border-loud: var(--wa-color-warning-50); + --wa-color-warning-on-quiet: var(--wa-color-warning-40); + --wa-color-warning-on-normal: var(--wa-color-warning-30); + --wa-color-warning-on-loud: var(--wa-color-warning-20); - --wa-color-danger-fill-quiet: var(--wa-color-red-95); - --wa-color-danger-fill-normal: var(--wa-color-red-90); - --wa-color-danger-fill-loud: var(--wa-color-red-70); - --wa-color-danger-border-quiet: var(--wa-color-red-80); - --wa-color-danger-border-normal: var(--wa-color-red-70); - --wa-color-danger-border-loud: var(--wa-color-red-50); - --wa-color-danger-on-quiet: var(--wa-color-red-40); - --wa-color-danger-on-normal: var(--wa-color-red-30); - --wa-color-danger-on-loud: var(--wa-color-red-10); + --wa-color-danger-fill-quiet: var(--wa-color-danger-95); + --wa-color-danger-fill-normal: var(--wa-color-danger-90); + --wa-color-danger-fill-loud: var(--wa-color-danger-min-70); + --wa-color-danger-border-quiet: var(--wa-color-danger-80); + --wa-color-danger-border-normal: var(--wa-color-danger-70); + --wa-color-danger-border-loud: var(--wa-color-danger-50); + --wa-color-danger-on-quiet: var(--wa-color-danger-40); + --wa-color-danger-on-normal: var(--wa-color-danger-30); + --wa-color-danger-on-loud: var(--wa-color-danger-10); - --wa-color-neutral-fill-quiet: var(--wa-color-gray-95); - --wa-color-neutral-fill-normal: var(--wa-color-gray-90); - --wa-color-neutral-fill-loud: var(--wa-color-gray-30); - --wa-color-neutral-border-quiet: var(--wa-color-gray-80); - --wa-color-neutral-border-normal: var(--wa-color-gray-70); - --wa-color-neutral-border-loud: var(--wa-color-gray-50); - --wa-color-neutral-on-quiet: var(--wa-color-gray-40); - --wa-color-neutral-on-normal: var(--wa-color-gray-30); - --wa-color-neutral-on-loud: var(--wa-color-gray-95); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-30); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-80); + --wa-color-neutral-border-normal: var(--wa-color-neutral-70); + --wa-color-neutral-border-loud: var(--wa-color-neutral-50); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-40); + --wa-color-neutral-on-normal: var(--wa-color-neutral-30); + --wa-color-neutral-on-loud: var(--wa-color-neutral-95); } .wa-dark, @@ -79,17 +79,15 @@ /** * Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-gray-30); - --wa-color-surface-default: var(--wa-color-gray-20); - --wa-color-surface-lowered: var(--wa-color-gray-10); - --wa-color-surface-border: var(--wa-color-gray-30); + --wa-color-surface-raised: var(--wa-color-neutral-30); + --wa-color-surface-default: var(--wa-color-neutral-20); + --wa-color-surface-lowered: var(--wa-color-neutral-10); + --wa-color-surface-border: var(--wa-color-neutral-30); - --wa-color-text-normal: var(--wa-color-gray-95); - --wa-color-text-quiet: var(--wa-color-gray-80); + --wa-color-text-normal: var(--wa-color-neutral-95); + --wa-color-text-quiet: var(--wa-color-neutral-80); --wa-color-text-link: var(--wa-color-brand-80); - --wa-color-focus: var(--wa-color-brand-60); - --wa-color-mix-hover: white 20%; --wa-color-mix-active: var(--wa-color-surface-default) 10%; @@ -98,51 +96,51 @@ */ --wa-color-brand-fill-quiet: var(--wa-color-brand-30); --wa-color-brand-fill-normal: var(--wa-color-brand-40); - --wa-color-brand-fill-loud: var(--wa-color-brand); + --wa-color-brand-fill-loud: var(--wa-color-brand-min-70); --wa-color-brand-border-quiet: var(--wa-color-brand-30); --wa-color-brand-border-normal: var(--wa-color-brand-40); --wa-color-brand-border-loud: var(--wa-color-brand-70); - --wa-color-brand-on-quiet: var(--wa-color-brand-70); + --wa-color-brand-on-quiet: var(--wa-color-brand-80); --wa-color-brand-on-normal: var(--wa-color-brand-90); --wa-color-brand-on-loud: var(--wa-color-brand-on); - --wa-color-success-fill-quiet: var(--wa-color-green-30); - --wa-color-success-fill-normal: var(--wa-color-green-40); - --wa-color-success-fill-loud: var(--wa-color-green-80); - --wa-color-success-border-quiet: var(--wa-color-green-30); - --wa-color-success-border-normal: var(--wa-color-green-40); - --wa-color-success-border-loud: var(--wa-color-green-70); - --wa-color-success-on-quiet: var(--wa-color-green-70); - --wa-color-success-on-normal: var(--wa-color-green-90); - --wa-color-success-on-loud: var(--wa-color-green-20); + --wa-color-success-fill-quiet: var(--wa-color-success-30); + --wa-color-success-fill-normal: var(--wa-color-success-40); + --wa-color-success-fill-loud: var(--wa-color-success-min-70); + --wa-color-success-border-quiet: var(--wa-color-success-30); + --wa-color-success-border-normal: var(--wa-color-success-40); + --wa-color-success-border-loud: var(--wa-color-success-70); + --wa-color-success-on-quiet: var(--wa-color-success-80); + --wa-color-success-on-normal: var(--wa-color-success-90); + --wa-color-success-on-loud: var(--wa-color-success-20); - --wa-color-warning-fill-quiet: var(--wa-color-yellow-30); - --wa-color-warning-fill-normal: var(--wa-color-yellow-40); - --wa-color-warning-fill-loud: var(--wa-color-yellow-80); - --wa-color-warning-border-quiet: var(--wa-color-yellow-30); - --wa-color-warning-border-normal: var(--wa-color-yellow-40); - --wa-color-warning-border-loud: var(--wa-color-yellow-70); - --wa-color-warning-on-quiet: var(--wa-color-yellow-70); - --wa-color-warning-on-normal: var(--wa-color-yellow-90); - --wa-color-warning-on-loud: var(--wa-color-yellow-20); + --wa-color-warning-fill-quiet: var(--wa-color-warning-30); + --wa-color-warning-fill-normal: var(--wa-color-warning-40); + --wa-color-warning-fill-loud: var(--wa-color-warning-min-70); + --wa-color-warning-border-quiet: var(--wa-color-warning-30); + --wa-color-warning-border-normal: var(--wa-color-warning-40); + --wa-color-warning-border-loud: var(--wa-color-warning-70); + --wa-color-warning-on-quiet: var(--wa-color-warning-80); + --wa-color-warning-on-normal: var(--wa-color-warning-90); + --wa-color-warning-on-loud: var(--wa-color-warning-20); - --wa-color-danger-fill-quiet: var(--wa-color-red-30); - --wa-color-danger-fill-normal: var(--wa-color-red-40); - --wa-color-danger-fill-loud: var(--wa-color-red-70); - --wa-color-danger-border-quiet: var(--wa-color-red-30); - --wa-color-danger-border-normal: var(--wa-color-red-40); - --wa-color-danger-border-loud: var(--wa-color-red-70); - --wa-color-danger-on-quiet: var(--wa-color-red-70); - --wa-color-danger-on-normal: var(--wa-color-red-90); - --wa-color-danger-on-loud: var(--wa-color-red-10); + --wa-color-danger-fill-quiet: var(--wa-color-danger-30); + --wa-color-danger-fill-normal: var(--wa-color-danger-40); + --wa-color-danger-fill-loud: var(--wa-color-danger-min-70); + --wa-color-danger-border-quiet: var(--wa-color-danger-30); + --wa-color-danger-border-normal: var(--wa-color-danger-40); + --wa-color-danger-border-loud: var(--wa-color-danger-70); + --wa-color-danger-on-quiet: var(--wa-color-danger-80); + --wa-color-danger-on-normal: var(--wa-color-danger-90); + --wa-color-danger-on-loud: var(--wa-color-danger-10); - --wa-color-neutral-fill-quiet: var(--wa-color-gray-30); - --wa-color-neutral-fill-normal: var(--wa-color-gray-40); - --wa-color-neutral-fill-loud: var(--wa-color-gray-90); - --wa-color-neutral-border-quiet: var(--wa-color-gray-30); - --wa-color-neutral-border-normal: var(--wa-color-gray-40); - --wa-color-neutral-border-loud: var(--wa-color-gray-70); - --wa-color-neutral-on-quiet: var(--wa-color-gray-70); - --wa-color-neutral-on-normal: var(--wa-color-gray-90); - --wa-color-neutral-on-loud: var(--wa-color-gray-20); + --wa-color-neutral-fill-quiet: var(--wa-color-neutral-30); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-40); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-90); + --wa-color-neutral-border-quiet: var(--wa-color-neutral-30); + --wa-color-neutral-border-normal: var(--wa-color-neutral-40); + --wa-color-neutral-border-loud: var(--wa-color-neutral-70); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-80); + --wa-color-neutral-on-normal: var(--wa-color-neutral-90); + --wa-color-neutral-on-loud: var(--wa-color-neutral-10); } diff --git a/src/styles/themes/tailspin/color.css b/src/styles/themes/tailspin/color.css index 5af80c5ed..a7a8890de 100644 --- a/src/styles/themes/tailspin/color.css +++ b/src/styles/themes/tailspin/color.css @@ -1,6 +1,10 @@ @import url('../../color/vogue.css'); @import url('../default/color.css'); @import url('../../brand/indigo.css'); +@import url('../../success/green.css'); +@import url('../../warning/yellow.css'); +@import url('../../danger/red.css'); +@import url('../../neutral/gray.css'); :where(:root), :host, @@ -16,8 +20,8 @@ --wa-color-focus: var(--wa-color-brand-50); - --wa-color-mix-hover: var(--wa-color-gray-80) 20%; - --wa-color-mix-active: var(--wa-color-gray-80) 10%; + --wa-color-mix-hover: var(--wa-color-neutral-80) 20%; + --wa-color-mix-active: var(--wa-color-neutral-80) 10%; /** * Semantic Colors @@ -32,44 +36,44 @@ --wa-color-brand-on-normal: var(--wa-color-brand-30); --wa-color-brand-on-loud: white; - --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-95) 85%, transparent); - --wa-color-success-fill-normal: var(--wa-color-green-90); - --wa-color-success-fill-loud: var(--wa-color-green-50); - --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-80), transparent); - --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-70) 60%, transparent); - --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-green-60) 70%, transparent); - --wa-color-success-on-quiet: var(--wa-color-green-40); - --wa-color-success-on-normal: var(--wa-color-green-30); + --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-95) 85%, transparent); + --wa-color-success-fill-normal: var(--wa-color-success-90); + --wa-color-success-fill-loud: var(--wa-color-success-50); + --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-80), transparent); + --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-70) 60%, transparent); + --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-60) 70%, transparent); + --wa-color-success-on-quiet: var(--wa-color-success-40); + --wa-color-success-on-normal: var(--wa-color-success-30); --wa-color-success-on-loud: white; - --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-yellow-95) 85%, transparent); - --wa-color-warning-fill-normal: var(--wa-color-yellow-90); - --wa-color-warning-fill-loud: var(--wa-color-yellow-50); - --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-80), transparent); - --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-70) 60%, transparent); - --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-yellow-60) 70%, transparent); - --wa-color-warning-on-quiet: var(--wa-color-yellow-40); - --wa-color-warning-on-normal: var(--wa-color-yellow-30); + --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-95) 85%, transparent); + --wa-color-warning-fill-normal: var(--wa-color-warning-90); + --wa-color-warning-fill-loud: var(--wa-color-warning-50); + --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-80), transparent); + --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-70) 60%, transparent); + --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-60) 70%, transparent); + --wa-color-warning-on-quiet: var(--wa-color-warning-40); + --wa-color-warning-on-normal: var(--wa-color-warning-30); --wa-color-warning-on-loud: white; - --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-red-95) 85%, transparent); - --wa-color-danger-fill-normal: var(--wa-color-red-90); - --wa-color-danger-fill-loud: var(--wa-color-red-50); - --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-80), transparent); - --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-70) 60%, transparent); - --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-red-60) 70%, transparent); - --wa-color-danger-on-quiet: var(--wa-color-red-40); - --wa-color-danger-on-normal: var(--wa-color-red-30); + --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-95) 85%, transparent); + --wa-color-danger-fill-normal: var(--wa-color-danger-90); + --wa-color-danger-fill-loud: var(--wa-color-danger-50); + --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-80), transparent); + --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-70) 60%, transparent); + --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-60) 70%, transparent); + --wa-color-danger-on-quiet: var(--wa-color-danger-40); + --wa-color-danger-on-normal: var(--wa-color-danger-30); --wa-color-danger-on-loud: white; - --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-gray-95) 85%, transparent); - --wa-color-neutral-fill-normal: var(--wa-color-gray-90); - --wa-color-neutral-fill-loud: var(--wa-color-gray-10); - --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-80), transparent); - --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-gray-70) 60%, transparent); - --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-gray-60) 70%, transparent); - --wa-color-neutral-on-quiet: var(--wa-color-gray-30); - --wa-color-neutral-on-normal: var(--wa-color-gray-30); + --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-95) 85%, transparent); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); + --wa-color-neutral-fill-loud: var(--wa-color-neutral-10); + --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-80), transparent); + --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-70) 60%, transparent); + --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-60) 70%, transparent); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-30); + --wa-color-neutral-on-normal: var(--wa-color-neutral-30); --wa-color-neutral-on-loud: white; /** @@ -88,15 +92,15 @@ --wa-color-surface-border: rgb(255 255 255 / 0.1); --wa-color-text-normal: white; - --wa-color-text-quiet: var(--wa-color-gray-60); + --wa-color-text-quiet: var(--wa-color-neutral-60); --wa-color-text-link: var(--wa-color-brand-70); --wa-color-shadow: rgb(0 0 0 / 0.2); --wa-color-focus: var(--wa-color-brand-60); - --wa-color-mix-hover: var(--wa-color-gray-70) 20%; - --wa-color-mix-active: var(--wa-color-gray-70) 10%; + --wa-color-mix-hover: var(--wa-color-neutral-70) 20%; + --wa-color-mix-active: var(--wa-color-neutral-70) 10%; /** * Semantic Colors @@ -107,47 +111,47 @@ --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20), transparent); --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-30), transparent); --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-40), transparent); - --wa-color-brand-on-quiet: var(--wa-color-brand-60); - --wa-color-brand-on-normal: var(--wa-color-brand-70); + --wa-color-brand-on-quiet: var(--wa-color-brand-min-60); + --wa-color-brand-on-normal: var(--wa-color-brand-min-70); --wa-color-brand-on-loud: white; - --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-10) 90%, transparent); - --wa-color-success-fill-normal: var(--wa-color-green-20); - --wa-color-success-fill-loud: var(--wa-color-green-50); - --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-20), transparent); - --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-30) 60%, transparent); - --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-green-40) 70%, transparent); - --wa-color-success-on-quiet: var(--wa-color-green-60); - --wa-color-success-on-normal: var(--wa-color-green-70); + --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-10) 90%, transparent); + --wa-color-success-fill-normal: var(--wa-color-success-20); + --wa-color-success-fill-loud: var(--wa-color-success-50); + --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-20), transparent); + --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-30) 60%, transparent); + --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-40) 70%, transparent); + --wa-color-success-on-quiet: var(--wa-color-success-min-60); + --wa-color-success-on-normal: var(--wa-color-success-min-70); --wa-color-success-on-loud: white; - --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-yellow-10) 90%, transparent); - --wa-color-warning-fill-normal: var(--wa-color-yellow-20); - --wa-color-warning-fill-loud: var(--wa-color-yellow-50); - --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-20), transparent); - --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-30) 60%, transparent); - --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-yellow-40) 70%, transparent); - --wa-color-warning-on-quiet: var(--wa-color-yellow-60); - --wa-color-warning-on-normal: var(--wa-color-yellow-70); + --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-10) 90%, transparent); + --wa-color-warning-fill-normal: var(--wa-color-warning-20); + --wa-color-warning-fill-loud: var(--wa-color-warning-50); + --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-20), transparent); + --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-30) 60%, transparent); + --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-40) 70%, transparent); + --wa-color-warning-on-quiet: var(--wa-color-warning-min-60); + --wa-color-warning-on-normal: var(--wa-color-warning-min-70); --wa-color-warning-on-loud: white; - --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-red-10) 90%, transparent); - --wa-color-danger-fill-normal: var(--wa-color-red-20); - --wa-color-danger-fill-loud: var(--wa-color-red-50); - --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-20), transparent); - --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-30) 60%, transparent); - --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-red-40) 70%, transparent); - --wa-color-danger-on-quiet: var(--wa-color-red-60); - --wa-color-danger-on-normal: var(--wa-color-red-70); + --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-10) 90%, transparent); + --wa-color-danger-fill-normal: var(--wa-color-danger-20); + --wa-color-danger-fill-loud: var(--wa-color-danger-50); + --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-20), transparent); + --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-30) 60%, transparent); + --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-40) 70%, transparent); + --wa-color-danger-on-quiet: var(--wa-color-danger-min-60); + --wa-color-danger-on-normal: var(--wa-color-danger-min-70); --wa-color-danger-on-loud: white; - --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-gray-10) 90%, transparent); - --wa-color-neutral-fill-normal: var(--wa-color-gray-20); + --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-10) 90%, transparent); + --wa-color-neutral-fill-normal: var(--wa-color-neutral-20); --wa-color-neutral-fill-loud: white; - --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-20), transparent); - --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-gray-30) 60%, transparent); - --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-gray-40) 70%, transparent); - --wa-color-neutral-on-quiet: var(--wa-color-gray-60); - --wa-color-neutral-on-normal: var(--wa-color-gray-70); - --wa-color-neutral-on-loud: var(--wa-color-gray-10); + --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-20), transparent); + --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-30) 60%, transparent); + --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-40) 70%, transparent); + --wa-color-neutral-on-quiet: var(--wa-color-neutral-60); + --wa-color-neutral-on-normal: var(--wa-color-neutral-70); + --wa-color-neutral-on-loud: var(--wa-color-neutral-10); } diff --git a/src/styles/warning/blue.css b/src/styles/warning/blue.css new file mode 100644 index 000000000..df03400ea --- /dev/null +++ b/src/styles/warning/blue.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-warning-blue { + --wa-color-warning-95: var(--wa-color-blue-95); + --wa-color-warning-90: var(--wa-color-blue-90); + --wa-color-warning-80: var(--wa-color-blue-80); + --wa-color-warning-70: var(--wa-color-blue-70); + --wa-color-warning-60: var(--wa-color-blue-60); + --wa-color-warning-50: var(--wa-color-blue-50); + --wa-color-warning-40: var(--wa-color-blue-40); + --wa-color-warning-30: var(--wa-color-blue-30); + --wa-color-warning-20: var(--wa-color-blue-20); + --wa-color-warning-10: var(--wa-color-blue-10); + --wa-color-warning-05: var(--wa-color-blue-05); + --wa-color-warning: var(--wa-color-blue); + + --wa-color-warning-lt-50: var(--wa-color-blue-lt-50); + --wa-color-warning-gte-50: var(--wa-color-blue-gte-50); + + --wa-color-warning-lt-60: var(--wa-color-blue-lt-60); + --wa-color-warning-gte-60: var(--wa-color-blue-gte-60); + + --wa-color-warning-lt-70: var(--wa-color-blue-lt-70); + --wa-color-warning-gte-70: var(--wa-color-blue-gte-70); + + --wa-color-warning-max-50: var(--wa-color-blue-max-50); + --wa-color-warning-min-50: var(--wa-color-blue-min-50); + --wa-color-warning-max-60: var(--wa-color-blue-max-60); + --wa-color-warning-min-60: var(--wa-color-blue-min-60); + --wa-color-warning-max-70: var(--wa-color-blue-max-70); + --wa-color-warning-min-70: var(--wa-color-blue-min-70); + + --wa-color-warning-on: var(--wa-color-blue-on); +} diff --git a/src/styles/warning/cyan.css b/src/styles/warning/cyan.css new file mode 100644 index 000000000..8c813de0f --- /dev/null +++ b/src/styles/warning/cyan.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-warning-cyan { + --wa-color-warning-95: var(--wa-color-cyan-95); + --wa-color-warning-90: var(--wa-color-cyan-90); + --wa-color-warning-80: var(--wa-color-cyan-80); + --wa-color-warning-70: var(--wa-color-cyan-70); + --wa-color-warning-60: var(--wa-color-cyan-60); + --wa-color-warning-50: var(--wa-color-cyan-50); + --wa-color-warning-40: var(--wa-color-cyan-40); + --wa-color-warning-30: var(--wa-color-cyan-30); + --wa-color-warning-20: var(--wa-color-cyan-20); + --wa-color-warning-10: var(--wa-color-cyan-10); + --wa-color-warning-05: var(--wa-color-cyan-05); + --wa-color-warning: var(--wa-color-cyan); + + --wa-color-warning-lt-50: var(--wa-color-cyan-lt-50); + --wa-color-warning-gte-50: var(--wa-color-cyan-gte-50); + + --wa-color-warning-lt-60: var(--wa-color-cyan-lt-60); + --wa-color-warning-gte-60: var(--wa-color-cyan-gte-60); + + --wa-color-warning-lt-70: var(--wa-color-cyan-lt-70); + --wa-color-warning-gte-70: var(--wa-color-cyan-gte-70); + + --wa-color-warning-max-50: var(--wa-color-cyan-max-50); + --wa-color-warning-min-50: var(--wa-color-cyan-min-50); + --wa-color-warning-max-60: var(--wa-color-cyan-max-60); + --wa-color-warning-min-60: var(--wa-color-cyan-min-60); + --wa-color-warning-max-70: var(--wa-color-cyan-max-70); + --wa-color-warning-min-70: var(--wa-color-cyan-min-70); + + --wa-color-warning-on: var(--wa-color-cyan-on); +} diff --git a/src/styles/warning/gray.css b/src/styles/warning/gray.css new file mode 100644 index 000000000..82a1b99ee --- /dev/null +++ b/src/styles/warning/gray.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-warning-gray { + --wa-color-warning-95: var(--wa-color-gray-95); + --wa-color-warning-90: var(--wa-color-gray-90); + --wa-color-warning-80: var(--wa-color-gray-80); + --wa-color-warning-70: var(--wa-color-gray-70); + --wa-color-warning-60: var(--wa-color-gray-60); + --wa-color-warning-50: var(--wa-color-gray-50); + --wa-color-warning-40: var(--wa-color-gray-40); + --wa-color-warning-30: var(--wa-color-gray-30); + --wa-color-warning-20: var(--wa-color-gray-20); + --wa-color-warning-10: var(--wa-color-gray-10); + --wa-color-warning-05: var(--wa-color-gray-05); + --wa-color-warning: var(--wa-color-gray); + + --wa-color-warning-lt-50: var(--wa-color-gray-lt-50); + --wa-color-warning-gte-50: var(--wa-color-gray-gte-50); + + --wa-color-warning-lt-60: var(--wa-color-gray-lt-60); + --wa-color-warning-gte-60: var(--wa-color-gray-gte-60); + + --wa-color-warning-lt-70: var(--wa-color-gray-lt-70); + --wa-color-warning-gte-70: var(--wa-color-gray-gte-70); + + --wa-color-warning-max-50: var(--wa-color-gray-max-50); + --wa-color-warning-min-50: var(--wa-color-gray-min-50); + --wa-color-warning-max-60: var(--wa-color-gray-max-60); + --wa-color-warning-min-60: var(--wa-color-gray-min-60); + --wa-color-warning-max-70: var(--wa-color-gray-max-70); + --wa-color-warning-min-70: var(--wa-color-gray-min-70); + + --wa-color-warning-on: var(--wa-color-gray-on); +} diff --git a/src/styles/warning/green.css b/src/styles/warning/green.css new file mode 100644 index 000000000..7f5f6569d --- /dev/null +++ b/src/styles/warning/green.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-warning-green { + --wa-color-warning-95: var(--wa-color-green-95); + --wa-color-warning-90: var(--wa-color-green-90); + --wa-color-warning-80: var(--wa-color-green-80); + --wa-color-warning-70: var(--wa-color-green-70); + --wa-color-warning-60: var(--wa-color-green-60); + --wa-color-warning-50: var(--wa-color-green-50); + --wa-color-warning-40: var(--wa-color-green-40); + --wa-color-warning-30: var(--wa-color-green-30); + --wa-color-warning-20: var(--wa-color-green-20); + --wa-color-warning-10: var(--wa-color-green-10); + --wa-color-warning-05: var(--wa-color-green-05); + --wa-color-warning: var(--wa-color-green); + + --wa-color-warning-lt-50: var(--wa-color-green-lt-50); + --wa-color-warning-gte-50: var(--wa-color-green-gte-50); + + --wa-color-warning-lt-60: var(--wa-color-green-lt-60); + --wa-color-warning-gte-60: var(--wa-color-green-gte-60); + + --wa-color-warning-lt-70: var(--wa-color-green-lt-70); + --wa-color-warning-gte-70: var(--wa-color-green-gte-70); + + --wa-color-warning-max-50: var(--wa-color-green-max-50); + --wa-color-warning-min-50: var(--wa-color-green-min-50); + --wa-color-warning-max-60: var(--wa-color-green-max-60); + --wa-color-warning-min-60: var(--wa-color-green-min-60); + --wa-color-warning-max-70: var(--wa-color-green-max-70); + --wa-color-warning-min-70: var(--wa-color-green-min-70); + + --wa-color-warning-on: var(--wa-color-green-on); +} diff --git a/src/styles/warning/indigo.css b/src/styles/warning/indigo.css new file mode 100644 index 000000000..db10ebc8b --- /dev/null +++ b/src/styles/warning/indigo.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-warning-indigo { + --wa-color-warning-95: var(--wa-color-indigo-95); + --wa-color-warning-90: var(--wa-color-indigo-90); + --wa-color-warning-80: var(--wa-color-indigo-80); + --wa-color-warning-70: var(--wa-color-indigo-70); + --wa-color-warning-60: var(--wa-color-indigo-60); + --wa-color-warning-50: var(--wa-color-indigo-50); + --wa-color-warning-40: var(--wa-color-indigo-40); + --wa-color-warning-30: var(--wa-color-indigo-30); + --wa-color-warning-20: var(--wa-color-indigo-20); + --wa-color-warning-10: var(--wa-color-indigo-10); + --wa-color-warning-05: var(--wa-color-indigo-05); + --wa-color-warning: var(--wa-color-indigo); + + --wa-color-warning-lt-50: var(--wa-color-indigo-lt-50); + --wa-color-warning-gte-50: var(--wa-color-indigo-gte-50); + + --wa-color-warning-lt-60: var(--wa-color-indigo-lt-60); + --wa-color-warning-gte-60: var(--wa-color-indigo-gte-60); + + --wa-color-warning-lt-70: var(--wa-color-indigo-lt-70); + --wa-color-warning-gte-70: var(--wa-color-indigo-gte-70); + + --wa-color-warning-max-50: var(--wa-color-indigo-max-50); + --wa-color-warning-min-50: var(--wa-color-indigo-min-50); + --wa-color-warning-max-60: var(--wa-color-indigo-max-60); + --wa-color-warning-min-60: var(--wa-color-indigo-min-60); + --wa-color-warning-max-70: var(--wa-color-indigo-max-70); + --wa-color-warning-min-70: var(--wa-color-indigo-min-70); + + --wa-color-warning-on: var(--wa-color-indigo-on); +} diff --git a/src/styles/warning/orange.css b/src/styles/warning/orange.css new file mode 100644 index 000000000..df46f463d --- /dev/null +++ b/src/styles/warning/orange.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-warning-orange { + --wa-color-warning-95: var(--wa-color-orange-95); + --wa-color-warning-90: var(--wa-color-orange-90); + --wa-color-warning-80: var(--wa-color-orange-80); + --wa-color-warning-70: var(--wa-color-orange-70); + --wa-color-warning-60: var(--wa-color-orange-60); + --wa-color-warning-50: var(--wa-color-orange-50); + --wa-color-warning-40: var(--wa-color-orange-40); + --wa-color-warning-30: var(--wa-color-orange-30); + --wa-color-warning-20: var(--wa-color-orange-20); + --wa-color-warning-10: var(--wa-color-orange-10); + --wa-color-warning-05: var(--wa-color-orange-05); + --wa-color-warning: var(--wa-color-orange); + + --wa-color-warning-lt-50: var(--wa-color-orange-lt-50); + --wa-color-warning-gte-50: var(--wa-color-orange-gte-50); + + --wa-color-warning-lt-60: var(--wa-color-orange-lt-60); + --wa-color-warning-gte-60: var(--wa-color-orange-gte-60); + + --wa-color-warning-lt-70: var(--wa-color-orange-lt-70); + --wa-color-warning-gte-70: var(--wa-color-orange-gte-70); + + --wa-color-warning-max-50: var(--wa-color-orange-max-50); + --wa-color-warning-min-50: var(--wa-color-orange-min-50); + --wa-color-warning-max-60: var(--wa-color-orange-max-60); + --wa-color-warning-min-60: var(--wa-color-orange-min-60); + --wa-color-warning-max-70: var(--wa-color-orange-max-70); + --wa-color-warning-min-70: var(--wa-color-orange-min-70); + + --wa-color-warning-on: var(--wa-color-orange-on); +} diff --git a/src/styles/warning/pink.css b/src/styles/warning/pink.css new file mode 100644 index 000000000..de06dd08c --- /dev/null +++ b/src/styles/warning/pink.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-warning-pink { + --wa-color-warning-95: var(--wa-color-pink-95); + --wa-color-warning-90: var(--wa-color-pink-90); + --wa-color-warning-80: var(--wa-color-pink-80); + --wa-color-warning-70: var(--wa-color-pink-70); + --wa-color-warning-60: var(--wa-color-pink-60); + --wa-color-warning-50: var(--wa-color-pink-50); + --wa-color-warning-40: var(--wa-color-pink-40); + --wa-color-warning-30: var(--wa-color-pink-30); + --wa-color-warning-20: var(--wa-color-pink-20); + --wa-color-warning-10: var(--wa-color-pink-10); + --wa-color-warning-05: var(--wa-color-pink-05); + --wa-color-warning: var(--wa-color-pink); + + --wa-color-warning-lt-50: var(--wa-color-pink-lt-50); + --wa-color-warning-gte-50: var(--wa-color-pink-gte-50); + + --wa-color-warning-lt-60: var(--wa-color-pink-lt-60); + --wa-color-warning-gte-60: var(--wa-color-pink-gte-60); + + --wa-color-warning-lt-70: var(--wa-color-pink-lt-70); + --wa-color-warning-gte-70: var(--wa-color-pink-gte-70); + + --wa-color-warning-max-50: var(--wa-color-pink-max-50); + --wa-color-warning-min-50: var(--wa-color-pink-min-50); + --wa-color-warning-max-60: var(--wa-color-pink-max-60); + --wa-color-warning-min-60: var(--wa-color-pink-min-60); + --wa-color-warning-max-70: var(--wa-color-pink-max-70); + --wa-color-warning-min-70: var(--wa-color-pink-min-70); + + --wa-color-warning-on: var(--wa-color-pink-on); +} diff --git a/src/styles/warning/purple.css b/src/styles/warning/purple.css new file mode 100644 index 000000000..e0cf12e68 --- /dev/null +++ b/src/styles/warning/purple.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-warning-purple { + --wa-color-warning-95: var(--wa-color-purple-95); + --wa-color-warning-90: var(--wa-color-purple-90); + --wa-color-warning-80: var(--wa-color-purple-80); + --wa-color-warning-70: var(--wa-color-purple-70); + --wa-color-warning-60: var(--wa-color-purple-60); + --wa-color-warning-50: var(--wa-color-purple-50); + --wa-color-warning-40: var(--wa-color-purple-40); + --wa-color-warning-30: var(--wa-color-purple-30); + --wa-color-warning-20: var(--wa-color-purple-20); + --wa-color-warning-10: var(--wa-color-purple-10); + --wa-color-warning-05: var(--wa-color-purple-05); + --wa-color-warning: var(--wa-color-purple); + + --wa-color-warning-lt-50: var(--wa-color-purple-lt-50); + --wa-color-warning-gte-50: var(--wa-color-purple-gte-50); + + --wa-color-warning-lt-60: var(--wa-color-purple-lt-60); + --wa-color-warning-gte-60: var(--wa-color-purple-gte-60); + + --wa-color-warning-lt-70: var(--wa-color-purple-lt-70); + --wa-color-warning-gte-70: var(--wa-color-purple-gte-70); + + --wa-color-warning-max-50: var(--wa-color-purple-max-50); + --wa-color-warning-min-50: var(--wa-color-purple-min-50); + --wa-color-warning-max-60: var(--wa-color-purple-max-60); + --wa-color-warning-min-60: var(--wa-color-purple-min-60); + --wa-color-warning-max-70: var(--wa-color-purple-max-70); + --wa-color-warning-min-70: var(--wa-color-purple-min-70); + + --wa-color-warning-on: var(--wa-color-purple-on); +} diff --git a/src/styles/warning/red.css b/src/styles/warning/red.css new file mode 100644 index 000000000..1d9db95d3 --- /dev/null +++ b/src/styles/warning/red.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-warning-red { + --wa-color-warning-95: var(--wa-color-red-95); + --wa-color-warning-90: var(--wa-color-red-90); + --wa-color-warning-80: var(--wa-color-red-80); + --wa-color-warning-70: var(--wa-color-red-70); + --wa-color-warning-60: var(--wa-color-red-60); + --wa-color-warning-50: var(--wa-color-red-50); + --wa-color-warning-40: var(--wa-color-red-40); + --wa-color-warning-30: var(--wa-color-red-30); + --wa-color-warning-20: var(--wa-color-red-20); + --wa-color-warning-10: var(--wa-color-red-10); + --wa-color-warning-05: var(--wa-color-red-05); + --wa-color-warning: var(--wa-color-red); + + --wa-color-warning-lt-50: var(--wa-color-red-lt-50); + --wa-color-warning-gte-50: var(--wa-color-red-gte-50); + + --wa-color-warning-lt-60: var(--wa-color-red-lt-60); + --wa-color-warning-gte-60: var(--wa-color-red-gte-60); + + --wa-color-warning-lt-70: var(--wa-color-red-lt-70); + --wa-color-warning-gte-70: var(--wa-color-red-gte-70); + + --wa-color-warning-max-50: var(--wa-color-red-max-50); + --wa-color-warning-min-50: var(--wa-color-red-min-50); + --wa-color-warning-max-60: var(--wa-color-red-max-60); + --wa-color-warning-min-60: var(--wa-color-red-min-60); + --wa-color-warning-max-70: var(--wa-color-red-max-70); + --wa-color-warning-min-70: var(--wa-color-red-min-70); + + --wa-color-warning-on: var(--wa-color-red-on); +} diff --git a/src/styles/warning/yellow.css b/src/styles/warning/yellow.css new file mode 100644 index 000000000..0a37be680 --- /dev/null +++ b/src/styles/warning/yellow.css @@ -0,0 +1,36 @@ +:where(:root), +:host, +:where([class^='wa-theme-'], [class*=' wa-theme-']), +:where([class^='wa-palette-'], [class*=' wa-palette-']), +.wa-warning-yellow { + --wa-color-warning-95: var(--wa-color-yellow-95); + --wa-color-warning-90: var(--wa-color-yellow-90); + --wa-color-warning-80: var(--wa-color-yellow-80); + --wa-color-warning-70: var(--wa-color-yellow-70); + --wa-color-warning-60: var(--wa-color-yellow-60); + --wa-color-warning-50: var(--wa-color-yellow-50); + --wa-color-warning-40: var(--wa-color-yellow-40); + --wa-color-warning-30: var(--wa-color-yellow-30); + --wa-color-warning-20: var(--wa-color-yellow-20); + --wa-color-warning-10: var(--wa-color-yellow-10); + --wa-color-warning-05: var(--wa-color-yellow-05); + --wa-color-warning: var(--wa-color-yellow); + + --wa-color-warning-lt-50: var(--wa-color-yellow-lt-50); + --wa-color-warning-gte-50: var(--wa-color-yellow-gte-50); + + --wa-color-warning-lt-60: var(--wa-color-yellow-lt-60); + --wa-color-warning-gte-60: var(--wa-color-yellow-gte-60); + + --wa-color-warning-lt-70: var(--wa-color-yellow-lt-70); + --wa-color-warning-gte-70: var(--wa-color-yellow-gte-70); + + --wa-color-warning-max-50: var(--wa-color-yellow-max-50); + --wa-color-warning-min-50: var(--wa-color-yellow-min-50); + --wa-color-warning-max-60: var(--wa-color-yellow-max-60); + --wa-color-warning-min-60: var(--wa-color-yellow-min-60); + --wa-color-warning-max-70: var(--wa-color-yellow-max-70); + --wa-color-warning-min-70: var(--wa-color-yellow-min-70); + + --wa-color-warning-on: var(--wa-color-yellow-on); +}