js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finalize Glossy theme, closes #491 (#525)

Browse Source 
* Initial glassy theme progress

* Add fallback to slider thumb box shadow

* Remove redundant `wa-dark` styles and refactor shadows

* Rename to 'Glossy' since it fits the vibe better
This commit is contained in:
Lindsay M
2025-01-14 18:44:31 -05:00
committed by GitHub
parent 6b07c9a040
commit ac86c037a1
7 changed files with 242 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/docs/experimental/themer.md
View File

@@ -506,7 +506,7 @@ hasOutline: false
<wa-option data-alpha="remove" value="playful">Playful</wa-option>
<wa-option data-alpha="remove" value="brutalist">Brutalist</wa-option>
<wa-option data-alpha="remove" value="tailspin">Tailspin</wa-option>
<wa-option data-alpha="remove" value="glassy">Glassy</wa-option>
<wa-option data-alpha="remove" value="glossy">Glossy</wa-option>
<wa-option data-alpha="remove" value="active">Active</wa-option>
<wa-option value="classic">Classic</wa-option>
</wa-select>
@@ -886,7 +886,7 @@ hasOutline: false
case 'active':
colorPalette = 'rudimentary';
break;
case 'glassy':
case 'glossy':
colorPalette = 'elegant';
break;
case 'premium':
@@ -1049,7 +1049,7 @@ hasOutline: false
case 'brutalist':
case 'classic':
case 'awesome':
case 'glassy':
case 'glossy':
case 'active':
assetFolder = themeSelect.value;
break;
@@ -1259,7 +1259,7 @@ hasOutline: false
case 'tailspin':
presetLogoIcons = ['wind', 'feather', 'lemon', 'wind-turbine'];
break;
case 'glassy':
case 'glossy':
presetLogoIcons = ['raindrops', 'citrus-slice', 'lighthouse', 'kiwi-bird'];
break;
case 'active':

1
docs/docs/resources/changelog.md
View File

@@ -17,6 +17,7 @@ During the alpha period, things might break! We take breaking changes very serio
- Added `.wa-callout` utility class
- Added new themes:
- Glossy
- Premium
## 3.0.0-alpha.8

8
docs/docs/themes/glassy.md vendored
View File

@@ -1,8 +0,0 @@
---
title: Glassy
description: Smooth, sleek, and reflective.
isPro: true
tags: pro
noAlpha: true
defaultPalette: elegant
---

7
docs/docs/themes/glossy.md vendored Normal file
View File

@@ -0,0 +1,7 @@
---
title: Glossy
description: Bustling with plenty of luster and shine.
isPro: true
tags: pro
defaultPalette: elegant
---

2
src/styles/native/slider.css
View File

@@ -96,7 +96,7 @@ input[type='range'] {
border-radius: 50%;
background-color: var(--thumb-color);
box-shadow:
var(--thumb-shadow),
var(--thumb-shadow, 0 0 transparent),
0 0 0 var(--thumb-gap) var(--wa-color-surface-default);
transition-property: background-color, border-color, box-shadow, color;
transition-duration: var(--wa-transition-normal);

206
src/styles/themes/glassy.css
View File

@@ -1,206 +0,0 @@
@import url('../color/elegant.css');
@import url('default/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('default/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
:where(:root),
:host,
.wa-theme-glassy,
.wa-light,
.wa-dark .wa-invert {
color-scheme: light;
color: var(--wa-color-text-normal);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-teal-95);
--wa-color-brand-fill-normal: var(--wa-color-teal-90);
--wa-color-brand-fill-loud: var(--wa-color-teal-50);
--wa-color-brand-border-quiet: var(--wa-color-teal-90);
--wa-color-brand-border-normal: var(--wa-color-teal-80);
--wa-color-brand-border-loud: var(--wa-color-teal-60);
--wa-color-brand-on-quiet: var(--wa-color-teal-40);
--wa-color-brand-on-normal: var(--wa-color-teal-30);
--wa-color-brand-on-loud: white;
/**
* Shadows
*/
--wa-shadow-blur-scale: 3;
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-gray-10);
--wa-color-surface-default: var(--wa-color-gray-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
--wa-color-surface-border: var(--wa-color-gray-20);
--wa-color-text-normal: var(--wa-color-gray-95);
--wa-color-text-quiet: var(--wa-color-gray-60);
--wa-color-text-link: var(--wa-color-teal-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-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
--wa-color-focus: var(--wa-color-teal-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-teal-10);
--wa-color-brand-fill-normal: var(--wa-color-teal-20);
--wa-color-brand-fill-loud: var(--wa-color-teal-50);
--wa-color-brand-border-quiet: var(--wa-color-teal-20);
--wa-color-brand-border-normal: var(--wa-color-teal-30);
--wa-color-brand-border-loud: var(--wa-color-teal-40);
--wa-color-brand-on-quiet: var(--wa-color-teal-60);
--wa-color-brand-on-normal: var(--wa-color-teal-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-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-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-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);
}
/**
* Component Styles
*/
:where(:root),
:host,
.wa-theme-glassy {
wa-button:not([appearance='plain']) {
box-shadow:
inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
var(--wa-shadow-s) /* outer shadow */;
margin-bottom: var(--wa-shadow-offset-y-s);
transition: transform var(--wa-transition-fast);
&:not([disabled]) {
&:hover {
box-shadow:
inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */,
var(--wa-shadow-m) /* outer shadow */;
}
&:active {
box-shadow:
inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */,
0 0 0 0 transparent /* outer shadow */;
transform: translateY(var(--wa-shadow-offset-y-s));
}
}
}
wa-checkbox,
wa-input:not(:focus),
wa-radio,
wa-select {
--box-shadow: inset var(--wa-shadow-s), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
}
wa-checkbox:state(checked),
wa-radio:state(checked) {
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
}
wa-textarea:not(:focus) {
&:not([appearance='filled']):not([disabled]) {
--box-shadow: var(--wa-shadow-s);
}
}
wa-switch {
--box-shadow: inset var(--wa-shadow-s);
--thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
}
wa-progress-bar {
box-shadow: inset var(--wa-shadow-s);
&::part(indicator) {
box-shadow:
inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
var(--wa-shadow-s) /* outer shadow */;
}
}
}

229
src/styles/themes/glossy.css Normal file
View File

@@ -0,0 +1,229 @@
@import url('../color/elegant.css');
@import url('default/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('default/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
:where(:root),
:host,
.wa-theme-glossy,
.wa-light,
.wa-dark .wa-invert {
color-scheme: light;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-text-link: var(--wa-color-indigo-40);
--wa-color-focus: var(--wa-color-indigo-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
--wa-color-brand-fill-normal: var(--wa-color-indigo-90);
--wa-color-brand-fill-loud: var(--wa-color-indigo-40);
--wa-color-brand-border-quiet: var(--wa-color-indigo-90);
--wa-color-brand-border-normal: var(--wa-color-indigo-80);
--wa-color-brand-border-loud: var(--wa-color-indigo-60);
--wa-color-brand-on-quiet: var(--wa-color-indigo-40);
--wa-color-brand-on-normal: var(--wa-color-indigo-30);
--wa-color-brand-on-loud: white;
--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);
/**
* Typography
*/
--wa-font-family-body: 'Figtree', sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 800;
--wa-line-height-condensed: 1.35;
--wa-line-height-normal: 1.8;
--wa-line-height-expanded: 2.25;
/**
* Spacing
*/
--wa-space-scale: 1.125;
/**
* Rounding
*/
--wa-border-radius-scale: 1.33;
/**
* Shadows
*/
--wa-shadow-blur-scale: 3;
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-text-link: var(--wa-color-indigo-70);
--wa-color-focus: var(--wa-color-indigo-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-indigo-10);
--wa-color-brand-fill-normal: var(--wa-color-indigo-20);
--wa-color-brand-fill-loud: var(--wa-color-indigo-40);
--wa-color-brand-border-quiet: var(--wa-color-indigo-20);
--wa-color-brand-border-normal: var(--wa-color-indigo-30);
--wa-color-brand-border-loud: var(--wa-color-indigo-40);
--wa-color-brand-on-quiet: var(--wa-color-indigo-60);
--wa-color-brand-on-normal: var(--wa-color-indigo-70);
--wa-color-brand-on-loud: white;
--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);
}
/**
* Component Styles
*/
:where(:root),
:host,
.wa-theme-glossy {
--wa-theme-glossy-inner-shine: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.4);
--wa-theme-glossy-top-highlight: inset 0 0.125rem 0 0 rgb(255 255 255 / 0.2);
--wa-theme-glossy-upper-tint: inset 0 1.25em 0 0 rgb(255 255 255 / 0.1);
--wa-theme-glossy-lower-shade: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.03);
--wa-theme-glossy-bottom-shadow: inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.15);
--wa-theme-glossy-inner-shine-active: inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1);
--wa-theme-glossy-top-highlight-active: inset 0 0.125rem 0 0 rgb(0 0 0 / 0.04);
--wa-theme-glossy-upper-tint-active: inset 0 1.25em 0 0 rgb(0 0 0 / 0.04);
--wa-theme-glossy-lower-shade-active: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.02);
--wa-theme-glossy-bottom-shadow-active: inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04);
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: -0.02em;
}
:is(
button,
input:where([type='button'], [type='reset'], [type='submit']),
wa-button,
wa-radio-button,
.wa-button
):not([appearance='plain'], .wa-plain) {
box-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
var(--wa-theme-glossy-upper-tint), var(--wa-theme-glossy-lower-shade), var(--wa-theme-glossy-bottom-shadow);
margin-bottom: var(--wa-shadow-offset-y-s);
transition: all var(--wa-transition-fast);
&:not([disabled]):active {
box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
var(--wa-theme-glossy-upper-tint-active), var(--wa-theme-glossy-lower-shade-active),
var(--wa-theme-glossy-bottom-shadow-active);
transform: scale(0.98);
}
}
input:where(
:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
)
),
select,
textarea,
wa-input,
wa-select,
wa-textarea,
.wa-text-field {
--box-shadow: var(--wa-theme-glossy-upper-tint), var(--wa-theme-glossy-lower-shade);
transition: all var(--wa-transition-fast);
&:focus {
--box-shadow: 0 0 transparent, 0 0 transparent;
}
}
input:is([type='checkbox'], [type='radio']):is(:checked, :indeterminate),
wa-checkbox:is(:state(checked), :state(indeterminate)),
wa-radio:state(checked) {
--box-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
var(--wa-theme-glossy-bottom-shadow);
&:active {
--box-shadow: var(--wa-theme-glossy-inner-shine-active), var(--wa-theme-glossy-top-highlight-active),
var(--wa-theme-glossy-bottom-shadow-active);
}
}
input[type='radio'],
wa-radio {
--background-color-checked: var(--border-color-checked);
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
}
input[type='range'],
wa-slider,
wa-switch {
--thumb-shadow: var(--wa-theme-glossy-inner-shine), var(--wa-theme-glossy-top-highlight),
var(--wa-theme-glossy-bottom-shadow);
}
progress,
wa-progress-bar {
box-shadow: inset var(--wa-shadow-s);
&::part(indicator) {
box-shadow:
var(--wa-theme-glossy-inner-shine),
var(--wa-theme-glossy-top-highlight),
inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
var(--wa-theme-glossy-bottom-shadow);
}
}
}