@import url("../layers.css"); @import url("../color/palettes/rudimentary.css"); /* To use this palette, add class="wa-palette-rudimentary" to the element */ @import url("https://fonts.bunny.net/css?family=azeret-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|biorhyme:200,300,400,500,600,700,800|fredoka:300,400,500,600,700|nunito:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"); @layer wa-theme { .wa-theme-playful, .wa-theme-playful.wa-light, .wa-theme-playful .wa-light, .wa-theme-playful.wa-dark .wa-invert, .wa-theme-playful .wa-dark .wa-invert, .wa-light .wa-theme-playful, .wa-dark .wa-theme-playful.wa-invert, .wa-dark .wa-theme-playful .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-80); --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); --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: oklch(from currentColor calc(1 - l) c h) 10%; --wa-color-mix-active: oklch(from currentColor 0.1 c h) 10%; --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); --wa-color-brand-border-quiet: var(--wa-color-brand-90); --wa-color-brand-border-normal: var(--wa-color-brand-70); --wa-color-brand-border-loud: var(--wa-color-brand-50); --wa-color-brand-on-quiet: var(--wa-color-brand-30); --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-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-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-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-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); /* #endregion */ } .wa-theme-playful.wa-dark, .wa-theme-playful .wa-dark, .wa-theme-playful.wa-invert, .wa-theme-playful .wa-invert, .wa-dark .wa-theme-playful, .wa-light .wa-theme-playful.wa-invert, .wa-light .wa-theme-playful .wa-invert { /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */ color-scheme: dark; color: var(--wa-color-text-normal); --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-neutral-95); --wa-color-text-quiet: var(--wa-color-neutral-60); --wa-color-text-link: var(--wa-color-brand-80); --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: oklch(from currentColor calc(1 - l) c h) 20%; --wa-color-mix-active: oklch(from currentColor 0.1 c h) 10%; --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-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); --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-60); --wa-color-success-on-normal: var(--wa-color-success-70); --wa-color-success-on-loud: var(--wa-color-success-on); --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); --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-60); --wa-color-warning-on-normal: var(--wa-color-warning-70); --wa-color-warning-on-loud: var(--wa-color-warning-on); --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); --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-60); --wa-color-danger-on-normal: var(--wa-color-danger-70); --wa-color-danger-on-loud: var(--wa-color-danger-on); --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); /* #endregion */ } .wa-theme-playful, .wa-theme-playful.wa-light, .wa-theme-playful .wa-light, .wa-theme-playful.wa-dark, .wa-theme-playful .wa-dark, .wa-theme-playful.wa-invert, .wa-theme-playful .wa-invert { font-family: var(--wa-font-family-body); /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ --wa-font-family-body: "Nunito", sans-serif; --wa-font-family-heading: "Fredoka", sans-serif; --wa-font-family-code: "Azeret Mono", monospace; --wa-font-family-longform: ui-serif, 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.125; --wa-font-size-3xs: round( calc(var(--wa-font-size-2xs) / 1.125), 1px ); /* 11px */ --wa-font-size-2xs: round( calc(var(--wa-font-size-xs) / 1.125), 1px ); /* 12.375px */ --wa-font-size-xs: round( calc(var(--wa-font-size-s) / 1.125), 1px ); /* 13.5px */ --wa-font-size-s: round( calc(var(--wa-font-size-m) / 1.125), 1px ); /* 15.75px */ --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 18px */ --wa-font-size-l: round( calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px ); /* 22.5px */ --wa-font-size-xl: round( calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px ); /* 28.125px */ --wa-font-size-2xl: round( calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px ); /* 36px */ --wa-font-size-3xl: round( calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px ); /* 46.125px */ --wa-font-size-4xl: round( calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px ); /* 58.5px */ --wa-font-size-5xl: round( calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px ); /* 74px */ --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-semibold); --wa-font-weight-code: var(--wa-font-weight-light); --wa-font-weight-longform: var(--wa-font-weight-light); --wa-font-weight-action: var(--wa-font-weight-semibold); --wa-line-height-condensed: 1.35; --wa-line-height-normal: 1.8; --wa-line-height-expanded: 2.25; --wa-link-decoration-default: underline color-mix( in oklab, currentColor 60%, transparent ) dashed; --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: 3; --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: 2; --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.25rem; /* 4px */ --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: 3; --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.5; --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; --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: min( var(--wa-border-radius-pill), calc(var(--wa-form-control-height) * 0.6) ); --wa-form-control-activated-color: var(--wa-color-brand-fill-loud); --wa-form-control-label-color: var(--wa-color-text-normal); --wa-form-control-label-font-weight: var(--wa-font-weight-semibold); --wa-form-control-label-line-height: var(--wa-line-height-condensed); --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: 0.75em; --wa-form-control-padding-inline: 1em; --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); /* Buttons */ --wa-button-transform-hover: scale(1.02); --wa-button-transform-active: scale(0.98); /* 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-playful { button, input:is([type="button"], [type="reset"], [type="submit"]), wa-button, a.wa-button { &:not([appearance="outlined"], [appearance="plain"], .wa-outlined:not(.wa-filled), .wa-plain) { --gradient-top: oklab(from var(--wa-color-fill-loud) calc(l - 0.1) a b); --gradient-middle: var(--wa-color-fill-loud); --gradient-bottom: oklab( from var(--wa-color-fill-loud) calc(l + 0.1) a b ); --glow-outer: 0px 0.375em 1em color-mix( in oklab, oklab(from var(--wa-color-fill-loud) calc(l + 0.1) a b), transparent 70% ); --shadow-lower: inset 0 -0.125em 0.5em oklab( from var(--wa-color-fill-loud) calc(l - 0.2) a b ); --shadow-upper: inset 0 0.125em 0.5em oklab( from var(--wa-color-fill-loud) calc(l + 0.4) a b ); &:where(:not(wa-button)), &::part(base) { background: linear-gradient( 180deg, var(--gradient-top) 0%, var(--gradient-middle) 51.88%, var(--gradient-bottom) 100% ); box-shadow: var(--glow-outer), var(--shadow-lower), var(--shadow-upper); text-shadow: 0 0.125em 0.125em oklab(from var(--wa-color-fill-loud) calc(l - 0.1) a b); } &:is([appearance="filled"], [appearance="filled-outlined"], .wa-filled) { --gradient-top: oklab( from var(--wa-color-fill-normal) calc(l - 0.05) a b ); --gradient-middle: var(--wa-color-fill-normal); --gradient-bottom: oklab( from var(--wa-color-fill-normal) calc(l + 0.15) a b ); --glow-outer: 0px 0.375em 1em color-mix( in oklab, oklab(from var(--wa-color-fill-normal) calc(l + 0.1) a b), transparent 70% ); --shadow-lower: inset 0 -0.125em 0.5em oklab( from var(--wa-color-fill-normal) calc(l - 0.1) a b ); --shadow-upper: inset 0 0.125em 0.5em oklab( from var(--wa-color-fill-normal) calc(l + 0.5) a b ); &:where(:not(wa-button)), &::part(base) { text-shadow: 0 0.125em 0.125em oklab(from var(--wa-color-fill-normal) calc(l - 0.1) a b); } } &:not([appearance="outlined"], [appearance="filled-outlined"], .wa-outlined) { &:where(:not(wa-button)), &::part(base) { padding-inline: calc( var(--wa-form-control-padding-inline) + var(--wa-form-control-border-width) ); border-width: 0px; } } &:not([disabled]) { @media (hover: hover) { &:hover { &:where(:not(wa-button)), &::part(base) { background: linear-gradient( 180deg, var(--gradient-bottom) 0%, var(--gradient-middle) 51.88%, var(--gradient-top) 100% ); } } } &:active { &:where(:not(wa-button)), &::part(base) { background: linear-gradient( 180deg, color-mix( in oklab, var(--gradient-top), var(--wa-color-mix-active) ) 0%, color-mix( in oklab, var(--gradient-middle), var(--wa-color-mix-active) ) 51.88%, color-mix( in oklab, var(--gradient-bottom), var(--wa-color-mix-active) ) 100% ); box-shadow: 0 0 transparent, var(--shadow-lower), var(--shadow-upper); } } } } } input:is([type="checkbox"], [type="radio"]):is(:checked, :indeterminate), wa-checkbox:is(:state(checked), :state(indeterminate))::part(control), wa-tree-item:is(:state(selected), :state(indeterminate))::part(checkbox__control), wa-radio:state(checked)::part(control), wa-switch:state(checked)::part(control) { --gradient-top: oklab( from var(--wa-form-control-activated-color) calc(l - 0.1) a b ); --gradient-middle: var(--wa-form-control-activated-color); --gradient-bottom: oklab( from var(--wa-form-control-activated-color) calc(l + 0.1) a b ); background: linear-gradient( 180deg, var(--gradient-top) 0%, var(--gradient-middle) 51.88%, var(--gradient-bottom) 100% ); } wa-progress-bar, wa-slider { --shadow-lower: inset 0 -0.125em 0.5em oklab( from var(--wa-form-control-activated-color) calc(l - 0.2) a b ); --shadow-upper: inset 0 0.125em 0.5em oklab( from var(--wa-form-control-activated-color) calc(l + 0.4) a b ); } wa-slider::part(thumb) { box-shadow: var(--wa-shadow-s), var(--shadow-lower), var(--shadow-upper); } wa-progress-bar::part(indicator) { box-shadow: var(--shadow-lower), var(--shadow-upper); } wa-switch[checked]::part(thumb) { box-shadow: var(--wa-shadow-s); } } } @layer wa-theme-overrides { .wa-theme-playful { wa-badge, wa-button, button, input:where([type="button"], [type="reset"], [type="submit"]), a.wa-button { &:where(:not(wa-button)), &::part(base) { font-weight: var(--wa-font-weight-bold); } } wa-badge, wa-tag, wa-select::part(tag), wa-combobox::part(tag) { border-width: calc(var(--wa-border-width-s) * 0.67); } wa-select::part(tag), wa-combobox::part(tag) { border-radius: var(--wa-form-control-border-radius); } wa-radio, input[type="radio"] { --checked-icon-color: var(--wa-color-surface-default); --checked-icon-scale: 0.4; &:checked, &:state(checked)::part(control) { background-color: var(--wa-form-control-activated-color); } } wa-rating { --symbol-color: color-mix( in oklab, var(--symbol-color-active), transparent ); } } }