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

more knobs

Browse Source
This commit is contained in:
Cory LaViska
2023-09-26 16:37:56 -04:00
parent 528748155a
commit 9fd070639c
4 changed files with 93 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
docs/pages/experimental/themer.md
View File

@@ -13,7 +13,7 @@ toc: false
<wa-option value="default">Default</wa-option>
<wa-option value="mellow">Mellow</wa-option>
</wa-select>
<wa-select name="heading-text" label="Heading" value="serif">
<wa-select name="heading-text" label="Heading" value="sans-serif">
<wa-option value="serif">Serif</wa-option>
<wa-option value="sans-serif">Sans-serif</wa-option>
<wa-option value="monospace">Monospace</wa-option>
@@ -26,29 +26,64 @@ toc: false
<wa-option value="cursive">Cursive</wa-option>
</wa-select>
<h3>Borders</h3>
<wa-range name="corners" label="Corners" min="0" max="3" value="1"></wa-range>
<wa-range name="border-width" label="Width" min="1" max="3" value="1"></wa-range>
<wa-range name="border-style" label="Style" min="1" max="3" value="1"></wa-range>
<wa-range name="corners" label="Corners" min="0" max="2" value=".25" step=".125"></wa-range>
<wa-range name="border-width" label="Width" min="1" max="8" value="1" step="1"></wa-range>
<wa-select name="border-style" label="Style" value="solid">
<wa-option value="solid">Solid</wa-option>
<wa-option value="dashed">Dashed</wa-option>
<wa-option value="dotted">Dotted</wa-option>
<wa-option value="double">Double</wa-option>
</wa-select>
<h3>Other</h3>
<wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125"></wa-range>
<wa-range name="shadows" label="Shadows" min="0" max="3" value="1"></wa-range>
<wa-range name="shadows" label="Spacing" min="0" max="10" value="5"></wa-range>
</div>
</div>
<script>
const container = document.getElementById('knobs');
const themeStylesheet = document.getElementById('theme-stylesheet');
const themeSelector = container.querySelector('[name="theme"]');
// Change theme
themeSelector.addEventListener('wa-change', () => {
themeStylesheet.href = `/dist/themes/${themeSelector.value}.css`;
// Theme
container.querySelector('[name="theme"]').addEventListener('wa-change', event => {
themeStylesheet.href = `/dist/themes/${event.target.value}.css`;
});
// Heading text
container.querySelector('[name="heading-text"]').addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-font-family-heading', event.target.value);
});
// Body text
container.querySelector('[name="body-text"]').addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-font-family-body', event.target.value);
});
// Corners
container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-corners-base', `${event.target.value}rem`);
});
// Border width
container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-border-width-base', `${event.target.value / 16}rem`);
});
// Border style
container.querySelector('[name="border-style"]').addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-border-style', event.target.value);
});
// Spacing style
container.querySelector('[name="spacing"]').addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-space-base', `${event.target.value}rem`);
});
</script>
<style>
:root {
--knobs-width: 400px;
--knobs-width: 300px;
}
#knobs {
@@ -60,7 +95,7 @@ toc: false
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-radius: var(--wa-corners-2x);
box-shadow: var(--wa-shadow-level-2);
max-width: var(--knobs-width);
width: var(--knobs-width);
padding: 2rem;
margin-inline: auto;
margin-block: 0 4rem;
@@ -259,8 +294,8 @@ toc: false
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: var(--wa-space-m);
margin-block-start: var(--wa-space-m);
gap: 1rem;
margin-block-start: 1rem;
}
.cards wa-card::part(base) {
@@ -270,7 +305,7 @@ toc: false
.space-vertically {
display: flex;
flex-direction: column;
gap: var(--wa-space-xl);
gap: 1.25rem;
}
@media screen and (max-width: 670px) {

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

@@ -7,6 +7,7 @@ export default css`
:host {
--border-color: var(--wa-color-surface-outline);
--border-radius: var(--wa-panel-corners);
--border-style: var(--wa-border-style);
--border-width: var(--wa-panel-border-width);
--padding: var(--wa-space-l);
@@ -18,7 +19,7 @@ export default css`
flex-direction: column;
background-color: var(--wa-color-surface-raised);
box-shadow: var(--wa-shadow-level-1);
border: solid var(--border-width) var(--border-color);
border: var(--border-style) var(--border-width) var(--border-color);
border-radius: var(--border-radius);
}
@@ -41,7 +42,7 @@ export default css`
.card__header {
display: block;
border-bottom: solid var(--border-width) var(--border-color);
border-bottom: var(--border-style) var(--border-width) var(--border-color);
padding: calc(var(--padding) / 2) var(--padding);
}
@@ -61,7 +62,7 @@ export default css`
.card--has-footer .card__footer {
display: block;
border-top: solid var(--border-width) var(--border-color);
border-top: var(--border-style) var(--border-width) var(--border-color);
padding: var(--padding);
}

37
src/themes/default.css
View File

@@ -190,16 +190,16 @@
/**
* Spacing
*/
--wa-space-3xs: 0.125rem; /* 2 */
--wa-space-2xs: 0.25rem; /* 4 */
--wa-space-xs: 0.5rem; /* 8 */
--wa-space-s: 0.75rem; /* 12 */
--wa-space-m: 1rem; /* 16 */
--wa-space-l: 1.25rem; /* 20 */
--wa-space-xl: 1.5rem; /* 24 */
--wa-space-2xl: 2rem; /* 32 */
--wa-space-3xl: 3rem; /* 48 */
--wa-space-base: 1rem;
--wa-space-3xs: calc(var(--wa-space-base) * 0.125); /* 2 */
--wa-space-2xs: calc(var(--wa-space-base) * 0.25); /* 4 */
--wa-space-xs: calc(var(--wa-space-base) * 0.5); /* 8 */
--wa-space-s: calc(var(--wa-space-base) * 0.75); /* 12 */
--wa-space-m: var(--wa-space-base); /* 16 */
--wa-space-l: calc(var(--wa-space-base) * 1.25); /* 20 */
--wa-space-xl: calc(var(--wa-space-base) * 1.5); /* 24 */
--wa-space-2xl: calc(var(--wa-space-base) * 2); /* 32 */
--wa-space-3xl: calc(var(--wa-space-base) * 3); /* 48 */
--wa-space-square-xs: var(--wa-space-xs);
--wa-space-square-s: var(--wa-space-s);
@@ -222,17 +222,18 @@
/**
* Borders & corners
*/
--wa-border-width-thin: 0.0625rem; /* 1px */
--wa-border-width-medium: calc(var(--wa-border-width-thin) * 2);
--wa-border-width-thick: calc(var(--wa-border-width-thin) * 3);
--wa-border-width-base: 0.0625rem; /* 1px */
--wa-border-width-thin: var(--wa-border-width-base);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3);
--wa-border-style: solid;
/* TODO - add base tokens and make scales relative to those */
--wa-corners-half: calc(var(--wa-corners-1x) * 0.5);
--wa-corners-1x: 0.25rem;
--wa-corners-2x: calc(var(--wa-corners-1x) * 2);
--wa-corners-3x: calc(var(--wa-corners-1x) * 3);
--wa-corners-base: 0.25rem;
--wa-corners-half: calc(var(--wa-corners-base) * 0.5);
--wa-corners-1x: var(--wa-corners-base);
--wa-corners-2x: calc(var(--wa-corners-base) * 2);
--wa-corners-3x: calc(var(--wa-corners-base) * 3);
--wa-corners-pill: 9999px;
--wa-corners-circle: 50%;

39
src/themes/mellow.css
View File

@@ -192,15 +192,16 @@
/**
* Spacing
*/
--wa-space-3xs: 0.125rem; /* 2 */
--wa-space-2xs: 0.25rem; /* 4 */
--wa-space-xs: 0.5rem; /* 8 */
--wa-space-s: 0.75rem; /* 12 */
--wa-space-m: 1rem; /* 16 */
--wa-space-l: 1.25rem; /* 20 */
--wa-space-xl: 1.5rem; /* 24 */
--wa-space-2xl: 2rem; /* 32 */
--wa-space-3xl: 3rem; /* 48 */
--wa-space-base: 1rem;
--wa-space-3xs: calc(var(--wa-space-base) * 0.125); /* 2 */
--wa-space-2xs: calc(var(--wa-space-base) * 0.25); /* 4 */
--wa-space-xs: calc(var(--wa-space-base) * 0.5); /* 8 */
--wa-space-s: calc(var(--wa-space-base) * 0.75); /* 12 */
--wa-space-m: var(--wa-space-base); /* 16 */
--wa-space-l: calc(var(--wa-space-base) * 1.25); /* 20 */
--wa-space-xl: calc(var(--wa-space-base) * 1.5); /* 24 */
--wa-space-2xl: calc(var(--wa-space-base) * 2); /* 32 */
--wa-space-3xl: calc(var(--wa-space-base) * 3); /* 48 */
--wa-space-square-xs: var(--wa-space-xs);
--wa-space-square-s: var(--wa-space-s);
@@ -223,16 +224,18 @@
/**
* Borders & corners
*/
--wa-border-width-thin: 0.0625rem; /* 1px */
--wa-border-width-medium: calc(var(--wa-border-width-thin) * 2);
--wa-border-width-thick: calc(var(--wa-border-width-thin) * 3);
--wa-border-width-base: 0.0625rem; /* 1px */
--wa-border-width-thin: var(--wa-border-width-base);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3);
--wa-border-style: solid;
--wa-corners-half: calc(var(--wa-corners-1x) * 0.5);
--wa-corners-1x: 0.125rem;
--wa-corners-2x: calc(var(--wa-corners-1x) * 2);
--wa-corners-3x: calc(var(--wa-corners-1x) * 3);
--wa-corners-base: 0.125rem;
--wa-corners-half: calc(var(--wa-corners-base) * 0.5);
--wa-corners-1x: var(--wa-corners-base);
--wa-corners-2x: calc(var(--wa-corners-base) * 2);
--wa-corners-3x: calc(var(--wa-corners-base) * 3);
--wa-corners-pill: 9999px;
--wa-corners-circle: 50%;
@@ -306,8 +309,8 @@
--wa-flow-spacing: 1.5rem;
}
:host,
.wa-theme-mellow-dark {
.wa-theme-mellow-dark,
.wa-theme-mellow-dark :host {
color-scheme: dark;
/**