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

more stylez

Browse Source
This commit is contained in:
Cory LaViska
2023-09-06 16:13:49 -04:00
parent 67bfbed308
commit 67d4458e69
7 changed files with 114 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/pages/components/carousel.md
View File

@@ -518,12 +518,12 @@ The `slides-per-page` attribute makes it possible to display multiple slides at
```html:preview
<sl-carousel navigation pagination slides-per-page="2" slides-per-move="2">
<sl-carousel-item style="background: var(--sl-color-red-200);">Slide 1</sl-carousel-item>
<sl-carousel-item style="background: var(--sl-color-orange-200);">Slide 2</sl-carousel-item>
<sl-carousel-item style="background: var(--sl-color-yellow-200);">Slide 3</sl-carousel-item>
<sl-carousel-item style="background: var(--sl-color-green-200);">Slide 4</sl-carousel-item>
<sl-carousel-item style="background: var(--sl-color-blue-200);">Slide 5</sl-carousel-item>
<sl-carousel-item style="background: var(--sl-color-violet-200);">Slide 6</sl-carousel-item>
<sl-carousel-item style="background: red;">Slide 1</sl-carousel-item>
<sl-carousel-item style="background: orange;">Slide 2</sl-carousel-item>
<sl-carousel-item style="background: yellow;">Slide 3</sl-carousel-item>
<sl-carousel-item style="background: green;">Slide 4</sl-carousel-item>
<sl-carousel-item style="background: blue;">Slide 5</sl-carousel-item>
<sl-carousel-item style="background: purple;">Slide 6</sl-carousel-item>
</sl-carousel>
```
@@ -535,12 +535,12 @@ import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
const App = () => (
<SlCarousel navigation pagination slidesPerPage={2} slidesPerMove={2}>
<SlCarouselItem style={{ background: 'var(--sl-color-red-200)' }}>Slide 1</SlCarouselItem>
<SlCarouselItem style={{ background: 'var(--sl-color-orange-200)' }}>Slide 2</SlCarouselItem>
<SlCarouselItem style={{ background: 'var(--sl-color-yellow-200)' }}>Slide 3</SlCarouselItem>
<SlCarouselItem style={{ background: 'var(--sl-color-green-200)' }}>Slide 4</SlCarouselItem>
<SlCarouselItem style={{ background: 'var(--sl-color-blue-200)' }}>Slide 5</SlCarouselItem>
<SlCarouselItem style={{ background: 'var(--sl-color-violet-200)' }}>Slide 6</SlCarouselItem>
<SlCarouselItem style={{ background: 'red' }}>Slide 1</SlCarouselItem>
<SlCarouselItem style={{ background: 'orange' }}>Slide 2</SlCarouselItem>
<SlCarouselItem style={{ background: 'yellow' }}>Slide 3</SlCarouselItem>
<SlCarouselItem style={{ background: 'green' }}>Slide 4</SlCarouselItem>
<SlCarouselItem style={{ background: 'blue' }}>Slide 5</SlCarouselItem>
<SlCarouselItem style={{ background: 'purple' }}>Slide 6</SlCarouselItem>
</SlCarousel>
);
```
@@ -553,9 +553,9 @@ The content of the carousel can be changed by adding or removing carousel items.
```html:preview
<sl-carousel class="dynamic-carousel" pagination navigation>
<sl-carousel-item style="background: var(--sl-color-red-200)">Slide 1</sl-carousel-item>
<sl-carousel-item style="background: var(--sl-color-orange-200)">Slide 2</sl-carousel-item>
<sl-carousel-item style="background: var(--sl-color-yellow-200)">Slide 3</sl-carousel-item>
<sl-carousel-item style="background: red">Slide 1</sl-carousel-item>
<sl-carousel-item style="background: orange">Slide 2</sl-carousel-item>
<sl-carousel-item style="background: yellow">Slide 3</sl-carousel-item>
</sl-carousel>
<div class="carousel-options">
@@ -589,14 +589,14 @@ The content of the carousel can be changed by adding or removing carousel items.
const dynamicCarousel = document.querySelector('.dynamic-carousel');
const dynamicAdd = document.querySelector('#dynamic-add');
const dynamicRemove = document.querySelector('#dynamic-remove');
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'];
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
let colorIndex = 2;
const addSlide = () => {
const slide = document.createElement('sl-carousel-item');
const color = colors[++colorIndex % colors.length];
slide.innerText = `Slide ${dynamicCarousel.children.length + 1}`;
slide.style.setProperty('background', `var(--sl-color-${color}-200)`);
slide.style.setProperty('background', color);
dynamicCarousel.appendChild(slide);
dynamicRemove.disabled = false;
};
@@ -649,7 +649,7 @@ const css = `
const App = () => {
const [slides, setSlides] = useState(['#204ed8', '#be133d', '#6e28d9']);
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'];
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
const addSlide = () => {
setSlides([...slides, getRandomColor()]);

8
docs/pages/components/checkbox.md
View File

@@ -116,9 +116,11 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
});
// Handle submit
form.addEventListener('submit', event => {
event.preventDefault();
alert('All fields are valid!');
customElements.whenDefined('sl-checkbox').then(() => {
form.addEventListener('submit', event => {
event.preventDefault();
alert('All fields are valid!');
});
});
</script>
```

6
docs/pages/tokens/borders.md
View File

@@ -11,9 +11,9 @@ Border radius tokens are used to give sharp edges a more subtle, rounded effect.
| Token | Value | Example |
| -------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
| `--wa-border-style` | `solid` | |
| `--sl-border-width-thin` | 0.0625rem (1px) | <div class="border-demo" style="border-width: var(--wa-border-width-thin);"></div> |
| `--sl-border-width-medium` | `calc(var(--wa-border-width-thin) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-medium);"></div> |
| `--sl-border-width-thick` | `calc(var(--wa-border-width-thin) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-thick);"></div> |
| `--wa-border-width-thin` | `0.0625rem` (1px) | <div class="border-demo" style="border-width: var(--wa-border-width-thin);"></div> |
| `--wa-border-width-medium` | `calc(var(--wa-border-width-thin) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-medium);"></div> |
| `--wa-border-width-thick` | `calc(var(--wa-border-width-thin) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-thick);"></div> |
## Corners

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

@@ -12,26 +12,26 @@ export default css`
position: relative;
display: inline-flex;
align-items: flex-start;
font-family: var(--sl-input-font-family);
font-weight: var(--sl-input-font-weight);
color: var(--sl-input-label-color);
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
color: var(--wa-form-controls-color-text);
vertical-align: middle;
cursor: pointer;
}
.checkbox--small {
--toggle-size: var(--sl-toggle-size-small);
font-size: var(--sl-input-font-size-small);
--toggle-size: var(--wa-form-control-toggle-size-s);
font-size: var(--wa-font-size-s);
}
.checkbox--medium {
--toggle-size: var(--sl-toggle-size-medium);
font-size: var(--sl-input-font-size-medium);
--toggle-size: var(--wa-form-control-toggle-size-m);
font-size: var(--wa-font-size-m);
}
.checkbox--large {
--toggle-size: var(--sl-toggle-size-large);
font-size: var(--sl-input-font-size-large);
--toggle-size: var(--wa-form-control-toggle-size-l);
font-size: var(--wa-font-size-l);
}
.checkbox__control {
@@ -42,12 +42,12 @@ export default css`
justify-content: center;
width: var(--toggle-size);
height: var(--toggle-size);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
border: solid var(--wa-form-controls-border-width) var(--wa-form-controls-color-resting);
border-radius: 2px;
background-color: var(--sl-input-background-color);
color: var(--sl-color-neutral-0);
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
background-color: var(--wa-form-controls-background);
color: var(--wa-form-controls-color-text);
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,
var(--wa-transition-fast) color, var(--wa-transition-fast) box-shadow;
}
.checkbox__input {
@@ -65,37 +65,34 @@ export default css`
height: var(--toggle-size);
}
/* Hover */
.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
border-color: var(--sl-input-border-color-hover);
background-color: var(--sl-input-background-color-hover);
}
/* Focus */
.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
border-color: var(--wa-form-controls-color-activated);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* Checked/indeterminate */
.checkbox--checked .checkbox__control,
.checkbox--indeterminate .checkbox__control {
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-600);
color: var(--wa-color-brand-text-on-vivid);
border-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-element-fill-vivid);
}
/* Checked/indeterminate + hover */
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-500);
color: var(--wa-color-brand-text-on-vivid);
border-color: color-mix(in oklch, var(--wa-color-brand-element-fill-vivid), white 6%);
background-color: color-mix(in oklch, var(--wa-color-brand-element-fill-vivid), white 6%);
}
/* Checked/indeterminate + focus */
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* Disabled */
@@ -106,14 +103,14 @@ export default css`
.checkbox__label {
display: inline-block;
color: var(--sl-input-label-color);
line-height: var(--toggle-size);
margin-inline-start: 0.5em;
margin-inline-start: var(--wa-space-xs);
user-select: none;
}
:host([required]) .checkbox__label::after {
content: var(--sl-input-required-content);
margin-inline-start: var(--sl-input-required-content-offset);
content: var(--wa-form-controls-required-content);
color: var(--wa-form-controls-required-content-color);
margin-inline-start: -0.2em;
}
`;

94
src/components/color-picker/color-picker.styles.ts
View File

@@ -17,22 +17,22 @@ export default css`
.color-picker {
width: var(--grid-width);
font-family: var(--sl-font-sans);
font-size: var(--sl-font-size-medium);
font-weight: var(--sl-font-weight-normal);
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
font-size: var(--wa-font-size-m);
color: var(--color);
background-color: var(--sl-panel-background-color);
border-radius: var(--sl-border-radius-medium);
background-color: var(--wa-color-surface-raised);
border-radius: var(--wa-corners-1x);
user-select: none;
}
.color-picker--inline {
border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
border: var(--wa-form-controls-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
}
.color-picker--inline:focus-visible {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.color-picker__grid {
@@ -40,8 +40,8 @@ export default css`
height: var(--grid-height);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
border-top-left-radius: var(--sl-border-radius-medium);
border-top-right-radius: var(--sl-border-radius-medium);
border-top-left-radius: var(--wa-corners-1x);
border-top-right-radius: var(--wa-corners-1x);
cursor: crosshair;
forced-color-adjust: none;
}
@@ -55,7 +55,7 @@ export default css`
border: solid 2px white;
margin-top: calc(var(--grid-handle-size) / -2);
margin-left: calc(var(--grid-handle-size) / -2);
transition: var(--sl-transition-fast) scale;
transition: var(--wa-transition-fast) scale;
}
.color-picker__grid-handle--dragging {
@@ -64,11 +64,11 @@ export default css`
}
.color-picker__grid-handle:focus-visible {
outline: var(--sl-focus-ring);
outline: var(--wa-focus-ring);
}
.color-picker__controls {
padding: var(--sl-spacing-small);
padding: var(--wa-space-s);
display: flex;
align-items: center;
}
@@ -80,13 +80,13 @@ export default css`
.color-picker__slider {
position: relative;
height: var(--slider-height);
border-radius: var(--sl-border-radius-pill);
border-radius: var(--wa-corners-pill);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
forced-color-adjust: none;
}
.color-picker__slider:not(:last-of-type) {
margin-bottom: var(--sl-spacing-small);
margin-bottom: var(--wa-space-s);
}
.color-picker__slider-handle {
@@ -101,7 +101,7 @@ export default css`
}
.color-picker__slider-handle:focus-visible {
outline: var(--sl-focus-ring);
outline: var(--wa-focus-ring);
}
.color-picker__hue {
@@ -135,9 +135,9 @@ export default css`
width: 2.25rem;
height: 2.25rem;
border: none;
border-radius: var(--sl-border-radius-circle);
border-radius: var(--wa-corners-circle);
background: none;
margin-left: var(--sl-spacing-small);
margin-left: var(--wa-space-s);
cursor: copy;
forced-color-adjust: none;
}
@@ -157,8 +157,8 @@ export default css`
}
.color-picker__preview:focus-visible {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.color-picker__preview-color {
@@ -176,7 +176,7 @@ export default css`
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 var(--sl-color-primary-500);
box-shadow: 0 0 0 0 var(--wa-color-brand-container-fill-vivid);
}
70% {
box-shadow: 0 0 0 0.5rem transparent;
@@ -188,7 +188,7 @@ export default css`
.color-picker__user-input {
display: flex;
padding: 0 var(--sl-spacing-small) var(--sl-spacing-small) var(--sl-spacing-small);
padding: 0 var(--wa-space-s) var(--wa-space-s) var(--wa-space-s);
}
.color-picker__user-input sl-input {
@@ -197,7 +197,7 @@ export default css`
}
.color-picker__user-input sl-button-group {
margin-left: var(--sl-spacing-small);
margin-left: var(--wa-space-s);
}
.color-picker__user-input sl-button {
@@ -211,8 +211,8 @@ export default css`
grid-template-columns: repeat(8, 1fr);
grid-gap: 0.5rem;
justify-items: center;
border-top: solid 1px var(--sl-color-neutral-200);
padding: var(--sl-spacing-small);
border-top: solid 1px var(--wa-color-surface-outline);
padding: var(--wa-space-s);
forced-color-adjust: none;
}
@@ -220,7 +220,7 @@ export default css`
position: relative;
width: var(--swatch-size);
height: var(--swatch-size);
border-radius: var(--sl-border-radius-small);
border-radius: var(--wa-corners-1x);
}
.color-picker__swatch .color-picker__swatch-color {
@@ -235,15 +235,15 @@ export default css`
}
.color-picker__swatch:focus-visible {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.color-picker__transparent-bg {
background-image: linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%);
background-image: linear-gradient(45deg, var(--wa-color-neutral-element-fill-muted) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-element-fill-muted) 75%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-element-fill-muted) 75%),
linear-gradient(45deg, var(--wa-color-neutral-element-fill-muted) 25%, transparent 25%);
background-size: 10px 10px;
background-position: 0 0, 0 0, -5px -5px, 5px 5px;
}
@@ -269,9 +269,9 @@ export default css`
.color-dropdown::part(panel) {
max-height: none;
background-color: var(--sl-panel-background-color);
border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
border-radius: var(--sl-border-radius-medium);
background-color: var(--wa-color-surface-raised);
border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-radius: var(--wa-corners-1x);
overflow: visible;
}
@@ -285,21 +285,21 @@ export default css`
}
.color-dropdown__trigger.color-dropdown__trigger--small {
width: var(--sl-input-height-small);
height: var(--sl-input-height-small);
border-radius: var(--sl-border-radius-circle);
width: var(--wa-form-controls-height-s);
height: var(--wa-form-controls-height-s);
border-radius: var(--wa-corners-circle);
}
.color-dropdown__trigger.color-dropdown__trigger--medium {
width: var(--sl-input-height-medium);
height: var(--sl-input-height-medium);
border-radius: var(--sl-border-radius-circle);
width: var(--wa-form-controls-height-m);
height: var(--wa-form-controls-height-m);
border-radius: var(--wa-corners-circle);
}
.color-dropdown__trigger.color-dropdown__trigger--large {
width: var(--sl-input-height-large);
height: var(--sl-input-height-large);
border-radius: var(--sl-border-radius-circle);
width: var(--wa-form-controls-height-l);
height: var(--wa-form-controls-height-l);
border-radius: var(--wa-corners-circle);
}
.color-dropdown__trigger:before {
@@ -311,7 +311,7 @@ export default css`
height: 100%;
border-radius: inherit;
background-color: currentColor;
box-shadow: inset 0 0 0 2px var(--sl-input-border-color), inset 0 0 0 4px var(--sl-color-neutral-0);
box-shadow: inset 0 0 0 2px var(--wa-form-controls-color-resting), inset 0 0 0 4px var(--wa-color-white);
}
.color-dropdown__trigger--empty:before {
@@ -323,8 +323,8 @@ export default css`
}
.color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.color-dropdown__trigger.color-dropdown__trigger--disabled {

3
src/components/radio-button/radio-button.component.ts
View File

@@ -108,7 +108,8 @@ export default class SlRadioButton extends ShoelaceElement {
aria-checked="${this.checked}"
class=${classMap({
button: true,
'button--default': true,
'button--neutral': !this.checked,
'button--brand': this.checked,
'button--small': this.size === 'small',
'button--medium': this.size === 'medium',
'button--large': this.size === 'large',

15
src/themes/default.css
View File

@@ -263,21 +263,26 @@
--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);
/* prettier-ignore */
--wa-form-controls-color-resting: var(--wa-color-neutral-element-outline-muted); /* rename to --wa-form-controls-border-color-resting? */
/* prettier-ignore */
--wa-form-controls-color-activated: var(--wa-color-brand-action-vivid); /* rename to --wa-form-controls-border-color-activated? */
--wa-form-controls-color-text: var(--wa-color-neutral-text-on-surface);
--wa-form-controls-color-resting: var(--wa-color-neutral-element-outline-muted);
--wa-form-controls-color-activated: var(--wa-color-brand-action-vivid);
--wa-form-controls-font-line-height: var(--wa-font-height-compact);
--wa-form-controls-padding: var(--wa-space-square-s);
--wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
--wa-form-controls-height-s: 2rem;
--wa-form-controls-height-m: 2.75rem;
--wa-form-controls-height-l: 3.5rem;
/**
* From 2.x
*/
--wa-form-controls-required-content: '*';
--wa-form-controls-required-content-color: inherit;
--wa-form-controls-height-s: 2rem;
--wa-form-controls-height-m: 2.75rem;
--wa-form-controls-height-l: 3.5rem;
--wa-form-control-toggle-size-s: 0.875rem;
--wa-form-control-toggle-size-m: 1.125rem;
--wa-form-control-toggle-size-l: 1.375rem;
--wa-overlay-color: hsl(240 3.8% 46.1% / 33%);