@import url('../layers.css'); @import url('../color/palettes/bright.css'); /* To use this palette, add class="wa-palette-bright" to the element */ @import url('https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap'); @layer wa-theme { .wa-theme-awesome, .wa-theme-awesome.wa-light, .wa-theme-awesome .wa-light, .wa-theme-awesome.wa-dark .wa-invert, .wa-theme-awesome .wa-dark .wa-invert, .wa-light .wa-theme-awesome, .wa-dark .wa-theme-awesome.wa-invert, .wa-dark .wa-theme-awesome .wa-invert { /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */ color-scheme: light; color: var(--wa-color-text-normal); --wa-color-surface-raised: white; --wa-color-surface-default: white; --wa-color-surface-lowered: var(--wa-color-neutral-95); --wa-color-surface-border: var(--wa-color-neutral-90); --wa-color-text-normal: var(--wa-color-neutral-20); --wa-color-text-quiet: var(--wa-color-neutral-40); --wa-color-text-link: var(--wa-color-brand-40); --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) 25%, transparent); --wa-color-shadow: color-mix( in oklab, var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), transparent ); --wa-color-focus: var(--wa-color-brand-60); --wa-color-mix-hover: black 10%; --wa-color-mix-active: black 20%; --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); --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); --wa-color-brand-on-quiet: var(--wa-color-brand-40); --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-success-95); --wa-color-success-fill-normal: var(--wa-color-success-90); --wa-color-success-fill-loud: var(--wa-color-success-80); --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-warning-95); --wa-color-warning-fill-normal: var(--wa-color-warning-90); --wa-color-warning-fill-loud: var(--wa-color-warning-80); --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-danger-95); --wa-color-danger-fill-normal: var(--wa-color-danger-90); --wa-color-danger-fill-loud: var(--wa-color-danger-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-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); /* #endregion */ } .wa-theme-awesome.wa-dark, .wa-theme-awesome .wa-dark, .wa-theme-awesome.wa-invert, .wa-theme-awesome .wa-invert, .wa-dark .wa-theme-awesome, .wa-light .wa-theme-awesome.wa-invert, .wa-light .wa-theme-awesome .wa-invert { /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */ color-scheme: dark; color: var(--wa-color-text-normal); --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-neutral-20); --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-neutral-50) 10%, transparent); --wa-color-shadow: color-mix( in oklab, var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent ); --wa-color-focus: var(--wa-color-brand-60); --wa-color-mix-hover: black 8%; --wa-color-mix-active: black 16%; --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); --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-normal: var(--wa-color-brand-80); --wa-color-brand-on-loud: white; --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-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-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-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-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-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-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; /* #endregion */ } .wa-theme-awesome, .wa-theme-awesome.wa-light, .wa-theme-awesome .wa-light, .wa-theme-awesome.wa-dark, .wa-theme-awesome .wa-dark, .wa-theme-awesome.wa-invert, .wa-theme-awesome .wa-invert { font-family: var(--wa-font-family-body); /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ --wa-font-family-body: 'Quicksand', sans-serif; --wa-font-family-heading: var(--wa-font-family-body); --wa-font-family-code: ui-monospace, monospace; --wa-font-family-longform: 'Crimson Pro', serif; /* Font sizes use a ratio of 1.125 to scale sizes proportionally. * For larger font sizes, each size is twice 1.125x larger to maximize impact. * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */ --wa-font-size-scale: 1; --wa-font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 10px */ --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */ --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */ --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */ --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */ --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */ --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */ --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */ --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */ --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */ --wa-font-size-5xl: round(calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px); /* 66px */ --wa-font-size-smaller: round(calc(1em / 1.125), 1px); --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px); --wa-font-weight-light: 400; --wa-font-weight-normal: 500; --wa-font-weight-semibold: 600; --wa-font-weight-bold: 700; --wa-font-weight-body: var(--wa-font-weight-normal); --wa-font-weight-heading: var(--wa-font-weight-bold); --wa-font-weight-code: var(--wa-font-weight-normal); --wa-font-weight-longform: var(--wa-font-weight-normal); --wa-font-weight-action: var(--wa-font-weight-bold); --wa-line-height-condensed: 1.2; --wa-line-height-normal: 1.6; --wa-line-height-expanded: 2; --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted; --wa-link-decoration-hover: underline; /* #endregion */ /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ --wa-space-scale: 1; --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */ --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */ --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */ --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */ --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */ --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */ --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */ --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */ --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */ --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */ --wa-space-5xl: calc(var(--wa-space-scale) * 5rem); /* 80px */ --wa-content-spacing: var(--wa-space-l); /* #endregion */ /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ --wa-border-style: solid; --wa-border-width-scale: 2; --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem); --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem); --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem); /* #endregion */ /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */ --wa-border-radius-scale: 1.5; --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem); --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem); --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem); --wa-border-radius-pill: 9999px; --wa-border-radius-circle: 50%; --wa-border-radius-square: 0px; /* #endregion */ /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ --wa-focus-ring-style: solid; --wa-focus-ring-width: 0.1875rem; /* 3px */ --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); --wa-focus-ring-offset: 0.0625rem; /* 1px */ /* #endregion */ /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ --wa-shadow-offset-x-scale: 0; --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem); --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem); --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem); --wa-shadow-offset-y-scale: 2; --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem); --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem); --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem); --wa-shadow-blur-scale: 0; --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem); --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem); --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem); --wa-shadow-spread-scale: 0; --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem); --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem); --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem); --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-shadow-spread-s) var(--wa-color-shadow); --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-shadow-spread-m) var(--wa-color-shadow); --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-shadow-spread-l) var(--wa-color-shadow); /* #endregion */ /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */ --wa-transition-easing: ease-in; --wa-transition-slow: 300ms; --wa-transition-normal: 150ms; --wa-transition-fast: 75ms; /* #endregion */ /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */ /* Form Controls */ --wa-form-control-background-color: var(--wa-color-surface-default); --wa-form-control-border-color: var(--wa-color-neutral-border-normal); --wa-form-control-border-style: var(--wa-border-style); --wa-form-control-border-width: var(--wa-border-width-s); --wa-form-control-border-radius: var(--wa-border-radius-m); --wa-form-control-activated-color: var(--wa-color-neutral-border-loud); --wa-form-control-label-color: var(--wa-color-text-normal); --wa-form-control-label-font-weight: var(--wa-font-weight-bold); --wa-form-control-label-line-height: var(--wa-line-height-normal); --wa-form-control-value-color: var(--wa-color-text-normal); --wa-form-control-value-font-weight: var(--wa-font-weight-body); --wa-form-control-value-line-height: var(--wa-line-height-condensed); --wa-form-control-hint-color: var(--wa-color-text-quiet); --wa-form-control-hint-font-weight: var(--wa-font-weight-body); --wa-form-control-hint-line-height: var(--wa-line-height-normal); --wa-form-control-placeholder-color: var(--wa-color-gray-50); --wa-form-control-required-content: '*'; --wa-form-control-required-content-color: inherit; --wa-form-control-required-content-offset: 0.1em; --wa-form-control-padding-block: 1.375em; --wa-form-control-padding-inline: 1.5em; --wa-form-control-height: round( calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), 1px ); --wa-form-control-toggle-size: round(1.25em, 1px); /* Panels */ --wa-panel-border-style: var(--wa-border-style); --wa-panel-border-width: var(--wa-border-width-s); --wa-panel-border-radius: var(--wa-border-radius-l); /* Tooltips */ --wa-tooltip-arrow-size: 0.375rem; --wa-tooltip-background-color: var(--wa-color-text-normal); --wa-tooltip-border-color: var(--wa-tooltip-background-color); --wa-tooltip-border-style: var(--wa-border-style); --wa-tooltip-border-width: var(--wa-border-width-s); --wa-tooltip-border-radius: var(--wa-border-radius-s); --wa-tooltip-content-color: var(--wa-color-surface-default); --wa-tooltip-font-size: var(--wa-font-size-s); --wa-tooltip-line-height: var(--wa-line-height-normal); /* #endregion */ } } @layer wa-theme-dimension { .wa-theme-awesome { wa-button, button, input:is([type='button'], [type='reset'], [type='submit']), a.wa-button { /* Match the shadow color to the button's variant */ --wa-color-shadow: var(--wa-color-border-normal); &[appearance='outlined'], &.wa-outlined:not(.wa-filled) { --wa-color-shadow: var(--wa-color-border-loud); } /* Disable transitions for a snappy, tactile feel */ --wa-transition-slow: 0; --wa-transition-normal: 0; --wa-transition-fast: 0; &:not([appearance='plain'], .wa-plain) { /* Give buttons a raised effect via solid box-shadow * and adjust height to visually match other inputs */ &:where(:not(wa-button)), &::part(base) { height: calc(var(--wa-form-control-height) - var(--wa-shadow-offset-y-s)); box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0 0 var(--wa-color-shadow); /* Because shadow offsets don't change with writing mode, * use physical margin properties to accommodate shadows * instead of their logical equivalents */ margin-bottom: var(--wa-shadow-offset-y-s); margin-right: var(--wa-shadow-offset-x-s); } /* Give active buttons a "punch in" effect */ &:not([disabled], :disabled):active { &:where(:not(wa-button)), &::part(base) { color: var(--wa-color-fill-quiet); background-color: var(--wa-color-shadow); border-color: var(--wa-color-shadow); box-shadow: none; transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s)); } } } } /* Give active buttons in vertical button groups a "punch in" effect * without leaving a visible gap between buttons */ wa-button-group[orientation='vertical'] { & > *:not(:last-child) { &:is(wa-button:not([appearance='plain'], .wa-plain)), & wa-button:not([appearance='plain'], .wa-plain) { &::part(base) { height: var(--wa-form-control-height); margin-bottom: 0; margin-right: 0; box-shadow: none; } &:not([disabled], :disabled):active { &::part(base) { height: calc(var(--wa-form-control-height) - var(--wa-shadow-offset-y-s)); margin-top: var(--wa-shadow-offset-y-s); transform: none; } } } } & > *:not(:first-child) { &:is(wa-button:not([appearance='plain'], .wa-plain)), & wa-button:not([appearance='plain'], .wa-plain) { &:not([disabled], :disabled):active { &::part(base) { box-shadow: var(--wa-shadow-offset-x-s) calc(var(--wa-shadow-offset-y-s) * -1) 0 0 var(--wa-color-shadow); } } } } } wa-radio[appearance='button'] { &:state(checked) { background-color: var(--wa-form-control-activated-color); border-color: var(--wa-form-control-activated-color); color: var(--wa-color-surface-default); } } /* Add inset shadow to text-based form controls */ :is( wa-input, wa-textarea, wa-select, wa-combobox, input:not( [type='button'], [type='checkbox'], [type='color'], [type='file'], [type='hidden'], [type='image'], [type='radio'], [type='range'], [type='reset'], [type='submit'] ), textarea, select ):not(:focus, [appearance='filled']) { &:where(:not(wa-input, wa-textarea, wa-select, wa-combobox)), &:where(wa-input)::part(base), &:where(wa-textarea)::part(base), &:where(wa-select)::part(combobox), &:where(wa-combobox)::part(combobox) { box-shadow: inset var(--wa-shadow-offset-x-s) max(var(--wa-shadow-offset-y-s), var(--wa-form-control-border-width)) 0 0 var(--wa-color-shadow); } } } /* Dark mode only */ .wa-theme-awesome.wa-dark, .wa-theme-awesome .wa-dark, .wa-theme-awesome.wa-invert, .wa-theme-awesome .wa-invert, .wa-dark .wa-theme-awesome, .wa-light .wa-theme-awesome.wa-invert, .wa-light .wa-theme-awesome .wa-invert { wa-button, button, input:is([type='button'], [type='reset'], [type='submit']), a.wa-button { &:where(:not([appearance], .wa-filled, .wa-outlined, .wa-plain)), &[appearance='accent'], &.wa-accent { --wa-color-shadow: var(--wa-color-border-quiet); &:not([disabled], :disabled):active { &:where(:not(wa-button)), &::part(base) { color: var(--wa-color-on-quiet); } } } } } } @layer wa-theme-overrides { .wa-theme-awesome { /* Give opinionated borders to accent buttons */ wa-button, button, input:is([type='button'], [type='reset'], [type='submit']), a.wa-button { &:where(:not([appearance], .wa-filled, .wa-outlined, .wa-plain)), &[appearance='accent'], &.wa-accent { --wa-color-shadow: var(--wa-color-on-loud); &:where(:not(wa-button)), &::part(base) { border-color: var(--wa-color-shadow); } } } /* Treat accent buttons as outlined in button groups */ wa-button-group { &[orientation='horizontal'] wa-button[appearance='accent'] { margin-inline-start: var(--_button-horizontal-indent-outlined); } &[orientation='vertical'] wa-button[appearance='accent'] { margin-block-start: var(--_button-vertical-indent-outlined); } } wa-badge { border-radius: var(--wa-border-radius-m); font-weight: var(--wa-font-weight-bold); text-transform: uppercase; } wa-callout { &:is(:not([appearance]), [appearance='outlined'], [appearance='filled-outlined']) { border-color: var(--wa-color-border-normal); } } wa-card { &::part(header) { border-bottom-style: dotted; } &::part(footer) { border-top-style: dotted; } } wa-checkbox, wa-tree-item::part(checkbox), input[type='checkbox'] { --checked-icon-color: var(--wa-color-surface-default); } wa-switch { --height: 1.5em; } wa-tag { font-weight: var(--wa-font-weight-bold); } } /* Dark mode only */ .wa-theme-awesome.wa-dark, .wa-theme-awesome .wa-dark, .wa-theme-awesome.wa-invert, .wa-theme-awesome .wa-invert, .wa-dark .wa-theme-awesome, .wa-light .wa-theme-awesome.wa-invert, .wa-light .wa-theme-awesome .wa-invert { wa-button, button, input:is([type='button'], [type='reset'], [type='submit']), a.wa-button { /* Accent button shadows only match the text color in light mode * Revert to the wa-theme-dimension layer for shadow color in dark mode */ &:where(:not([appearance], .wa-filled, .wa-outlined, .wa-plain)), &[appearance='accent'], &.wa-accent { --wa-color-shadow: revert-layer; } } } }