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

Merge branch 'next' of https://github.com/shoelace-style/webawesome into next

Browse Source
This commit is contained in:
Cory LaViska
2023-09-14 11:15:52 -04:00
parent e262ed14b0 545eb467fc
commit 33706e0f27
12 changed files with 130 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/styles/docs.css
View File

@@ -1,5 +1,5 @@
:root {
--docs-background-color: var(--wa-color-surface-raised);
--docs-background-color: var(--wa-color-surface-default);
--docs-content-max-width: 860px;
--docs-sidebar-width: 320px;
--docs-sidebar-transition-speed: 250ms;

12
src/components/alert/alert.styles.ts
View File

@@ -15,7 +15,7 @@ export default css`
position: relative;
display: flex;
align-items: stretch;
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-panel-corners);
font: inherit;
margin: inherit;
}
@@ -35,31 +35,31 @@ export default css`
.alert--brand {
background-color: var(--wa-color-brand-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-brand-outline-muted);
border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-brand-outline-muted);
color: var(--wa-color-brand-text-on-muted);
}
.alert--success {
background-color: var(--wa-color-success-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-success-outline-muted);
border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-success-outline-muted);
color: var(--wa-color-success-text-on-muted);
}
.alert--neutral {
background-color: var(--wa-color-neutral-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-neutral-outline-muted);
border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-outline-muted);
color: var(--wa-color-neutral-text-on-muted);
}
.alert--warning {
background-color: var(--wa-color-warning-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-warning-outline-muted);
border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-warning-outline-muted);
color: var(--wa-color-warning-text-on-muted);
}
.alert--danger {
background-color: var(--wa-color-danger-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-danger-outline-muted);
border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-danger-outline-muted);
color: var(--wa-color-danger-text-on-muted);
}

4
src/components/card/card.styles.ts
View File

@@ -6,8 +6,8 @@ export default css`
:host {
--border-color: var(--wa-color-surface-outline);
--border-radius: var(--wa-corners-1x);
--border-width: var(--wa-border-width-thin);
--border-radius: var(--wa-panel-corners);
--border-width: var(--wa-panel-border-width);
--padding: var(--wa-space-l);
display: inline-block;

2
src/components/checkbox/checkbox.styles.ts
View File

@@ -42,7 +42,7 @@ export default css`
width: var(--toggle-size);
height: var(--toggle-size);
border: var(--wa-border-style) var(--wa-form-controls-border-width) var(--wa-form-controls-border-color-resting);
border-radius: 2px;
border-radius: var(--wa-corners-half);
background-color: var(--wa-form-controls-background);
color: var(--wa-form-controls-text-color);
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,

2
src/components/details/details.styles.ts
View File

@@ -10,7 +10,7 @@ export default css`
.details {
border: solid 1px var(--wa-color-surface-outline);
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-panel-corners);
background-color: var(--wa-color-surface-default);
overflow-anchor: none;
}

4
src/components/dialog/dialog.styles.ts
View File

@@ -33,7 +33,7 @@ export default css`
max-width: calc(100% - var(--wa-space-2xl));
max-height: calc(100% - var(--wa-space-2xl));
background-color: var(--wa-color-surface-raised);
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-panel-corners);
box-shadow: var(--wa-shadow-level-3);
}
@@ -112,7 +112,7 @@ export default css`
right: 0;
bottom: 0;
left: 0;
background-color: var(--wa-overlay-color);
background-color: var(--wa-color-overlay);
}
@media (forced-colors: active) {

2
src/components/drawer/drawer.styles.ts
View File

@@ -143,7 +143,7 @@ export default css`
right: 0;
bottom: 0;
left: 0;
background-color: var(--wa-overlay-color);
background-color: var(--wa-color-overlay);
pointer-events: all;
}

4
src/components/progress-bar/progress-bar.styles.ts
View File

@@ -6,7 +6,7 @@ export default css`
:host {
--height: 1rem;
--track-color: var(--wa-color-neutral-fill-muted);
--track-color: var(--wa-color-neutral-fill-muted-alt);
--indicator-color: var(--wa-color-brand-fill-vivid);
--label-color: var(--wa-color-brand-text-on-vivid);
@@ -18,7 +18,7 @@ export default css`
background-color: var(--track-color);
height: var(--height);
border-radius: var(--wa-corners-pill);
box-shadow: inset var(--wa-shadow-level-1);
box-shadow: var(--wa-shadow-inset);
overflow: hidden;
}

2
src/components/progress-ring/progress-ring.styles.ts
View File

@@ -7,7 +7,7 @@ export default css`
:host {
--size: 8rem;
--track-width: 0.25rem;
--track-color: var(--wa-color-neutral-fill-muted);
--track-color: var(--wa-color-neutral-fill-muted-alt);
--indicator-width: var(--track-width);
--indicator-color: var(--wa-color-brand-fill-vivid);
--indicator-transition-duration: 0.35s;

4
src/components/skeleton/skeleton.styles.ts
View File

@@ -6,8 +6,8 @@ export default css`
:host {
--border-radius: var(--wa-corners-pill);
--color: var(--wa-color-neutral-fill-muted);
--sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted), white 50%);
--color: var(--wa-color-neutral-fill-muted-alt);
--sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted-alt), var(--wa-color-surface-raised) 30%);
display: block;
position: relative;

2
src/components/spinner/spinner.styles.ts
View File

@@ -6,7 +6,7 @@ export default css`
:host {
--track-width: 2px;
--track-color: var(--wa-color-neutral-fill-muted);
--track-color: var(--wa-color-neutral-fill-muted-alt);
--indicator-color: var(--wa-color-brand-fill-vivid);
--speed: 2s;

117
src/themes/default.css
View File

@@ -75,7 +75,6 @@
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-inverse: var(--wa-color-white);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-selection-background: var(--wa-color-blue-80);
@@ -89,6 +88,10 @@
--wa-color-tint-hover: black 8%;
--wa-color-tint-active: black 16%;
--wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent);
--wa-color-shadow: rgb(0 0 0 / 0.06);
/**
* Semantic color variants
*/
@@ -242,10 +245,11 @@
/**
* Shadows
*/
--wa-shadow-inset: inset 0 0.0625rem 0 var(--wa-color-shadow);
--wa-shadow-level-0: none;
--wa-shadow-level-1: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.08);
--wa-shadow-level-2: 0 0.125rem 0.25rem rgb(0 0 0 / 0.06);
--wa-shadow-level-3: 0 0.25rem 0.5rem rgb(0 0 0 / 0.04);
--wa-shadow-level-1: 0 0.0625rem 0.125rem var(--wa-color-shadow);
--wa-shadow-level-2: 0 0.125rem 0.25rem var(--wa-color-shadow);
--wa-shadow-level-3: 0 0.25rem 0.5rem var(--wa-color-shadow);
/**
* Z-index
@@ -266,7 +270,7 @@
/**
* Form controls
*/
--wa-form-controls-background: var(--wa-color-surface-raised);
--wa-form-controls-background: var(--wa-color-surface-default);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-form-controls-corners: var(--wa-corners-1x);
@@ -277,6 +281,12 @@
--wa-form-controls-padding: var(--wa-space-square-s);
--wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
/**
* Panels
*/
--wa-panel-border-width: var(--wa-border-width-thin);
--wa-panel-corners: var(--wa-corners-2x);
/**
* From 2.x
*/
@@ -290,9 +300,102 @@
--wa-form-controls-required-content-color: inherit;
--wa-form-controls-required-content-offset: -0.1em;
--wa-overlay-color: hsl(240 3.8% 46.1% / 33%);
--wa-tooltip-arrow-size: 0.375rem;
}
:root.wa-theme-default-dark {
color-scheme: dark;
/**
* App
*/
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-10);
--wa-color-surface-lowered: var(--wa-color-black);
--wa-color-surface-outline: 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-inverse: var(--wa-color-neutral-10);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-selection-background: var(--wa-color-blue-40);
--wa-color-selection-text: var(--wa-color-white);
--wa-color-focus: var(--wa-color-blue-50);
--wa-color-tint-white: rgb(255 255 255 / 0.2);
--wa-color-tint-black: rgb(0 0 0 / 0.2);
--wa-color-tint-hover: black 8%;
--wa-color-tint-active: black 16%;
--wa-color-overlay: color-mix(in oklab, var(--wa-color-black) 50%, transparent);
--wa-color-shadow: rgb(0 0 0 / 0.25);
/**
* Semantic color variants
*/
--wa-color-brand-fill-vivid: var(--wa-color-blue-50);
--wa-color-brand-fill-vivid-alt: var(--wa-color-blue-30);
--wa-color-brand-fill-muted: var(--wa-color-blue-10);
--wa-color-brand-fill-muted-alt: var(--wa-color-blue-20);
--wa-color-brand-outline-vivid: var(--wa-color-blue-50);
--wa-color-brand-outline-vivid-alt: var(--wa-color-blue-40);
--wa-color-brand-outline-muted: var(--wa-color-blue-20);
--wa-color-brand-outline-muted-alt: var(--wa-color-blue-30);
--wa-color-brand-text-on-vivid: var(--wa-color-white);
--wa-color-brand-text-on-muted: var(--wa-color-blue-70);
--wa-color-brand-text-on-surface: var(--wa-color-blue-60);
--wa-color-success-fill-vivid: var(--wa-color-green-50);
--wa-color-success-fill-vivid-alt: var(--wa-color-green-30);
--wa-color-success-fill-muted: var(--wa-color-green-10);
--wa-color-success-fill-muted-alt: var(--wa-color-green-20);
--wa-color-success-outline-vivid: var(--wa-color-green-50);
--wa-color-success-outline-vivid-alt: var(--wa-color-green-40);
--wa-color-success-outline-muted: var(--wa-color-green-20);
--wa-color-success-outline-muted-alt: var(--wa-color-green-30);
--wa-color-success-text-on-vivid: var(--wa-color-white);
--wa-color-success-text-on-muted: var(--wa-color-green-70);
--wa-color-success-text-on-surface: var(--wa-color-green-60);
--wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
--wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-30);
--wa-color-warning-fill-muted: var(--wa-color-yellow-10);
--wa-color-warning-fill-muted-alt: var(--wa-color-yellow-20);
--wa-color-warning-outline-vivid: var(--wa-color-yellow-50);
--wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-40);
--wa-color-warning-outline-muted: var(--wa-color-yellow-20);
--wa-color-warning-outline-muted-alt: var(--wa-color-yellow-30);
--wa-color-warning-text-on-vivid: var(--wa-color-white);
--wa-color-warning-text-on-muted: var(--wa-color-yellow-70);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
--wa-color-danger-fill-vivid: var(--wa-color-red-50);
--wa-color-danger-fill-vivid-alt: var(--wa-color-red-30);
--wa-color-danger-fill-muted: var(--wa-color-red-10);
--wa-color-danger-fill-muted-alt: var(--wa-color-red-20);
--wa-color-danger-outline-vivid: var(--wa-color-red-50);
--wa-color-danger-outline-vivid-alt: var(--wa-color-red-40);
--wa-color-danger-outline-muted: var(--wa-color-red-20);
--wa-color-danger-outline-muted-alt: var(--wa-color-red-30);
--wa-color-danger-text-on-vivid: var(--wa-color-white);
--wa-color-danger-text-on-muted: var(--wa-color-red-70);
--wa-color-danger-text-on-surface: var(--wa-color-red-60);
--wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
--wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-30);
--wa-color-neutral-fill-muted: var(--wa-color-neutral-10);
--wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-20);
--wa-color-neutral-outline-vivid: var(--wa-color-neutral-50);
--wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-40);
--wa-color-neutral-outline-muted: var(--wa-color-neutral-20);
--wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-30);
--wa-color-neutral-text-on-vivid: var(--wa-color-white);
--wa-color-neutral-text-on-muted: var(--wa-color-neutral-70);
--wa-color-neutral-text-on-surface: var(--wa-color-neutral-60);
}
/* _utility.css */