kopia lustrzana https://github.com/shoelace-style/shoelace
add filled tokens and update styles
rodzic
7476204258
commit
15ce341d81
|
@ -11,7 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
- Added initial surface design tokens to improve the appearance of alert, card, and panels in dark mode
|
||||
- Added missing background color to `<sl-details>`
|
||||
- Added the `outline` variation to `<sl-button>` [#522](https://github.com/shoelace-style/shoelace/issues/522)
|
||||
- Added the `filled` variation to `<sl-input>`, `<sl-textarea>`, and `<sl-select>`
|
||||
- Added the `filled` variation to `<sl-input>`, `<sl-textarea>`, and `<sl-select>` and supporting design tokens
|
||||
- Added the `control` part to `<sl-select>` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538)
|
||||
- Changed the default `distance` in `<sl-dropdown>` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538)
|
||||
|
||||
|
|
|
@ -65,18 +65,22 @@ export default css`
|
|||
|
||||
/* Filled inputs */
|
||||
.input--filled {
|
||||
background-color: rgb(var(--sl-color-neutral-100));
|
||||
border: solid 1px rgb(var(--sl-color-neutral-100));
|
||||
border: none;
|
||||
background-color: rgb(var(--sl-input-filled-background-color));
|
||||
color: rgb(var(--sl-input-color));
|
||||
}
|
||||
|
||||
.input--filled:hover:not(.input--disabled) {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-hover));
|
||||
}
|
||||
|
||||
.input--filled.input--focused:not(.input--disabled) {
|
||||
background-color: rgb(var(--sl-color-surface-base));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: rgb(var(--sl-input-filled-background-color-focus));
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.input--filled.input--disabled {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-disabled));
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
|
@ -61,22 +61,24 @@ export default css`
|
|||
|
||||
/* Filled selects */
|
||||
.select--filled .select__control {
|
||||
background-color: rgb(var(--sl-color-neutral-100));
|
||||
border: solid 1px rgb(var(--sl-color-neutral-100));
|
||||
border: none;
|
||||
background-color: rgb(var(--sl-input-filled-background-color));
|
||||
color: rgb(var(--sl-input-color));
|
||||
}
|
||||
|
||||
.select--filled:hover:not(.select--disabled) .select__control {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-hover));
|
||||
}
|
||||
|
||||
.select--filled.select--focused:not(.select--disabled) .select__control {
|
||||
background-color: rgb(var(--sl-color-surface-base));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: rgb(var(--sl-input-filled-background-color-focus));
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select--filled.select--disabled .select__control {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-disabled));
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select--disabled .select__tags,
|
||||
|
|
|
@ -67,21 +67,22 @@ export default css`
|
|||
|
||||
/* Filled textareas */
|
||||
.textarea--filled {
|
||||
background-color: rgb(var(--sl-color-neutral-100));
|
||||
border: solid 1px rgb(var(--sl-color-neutral-100));
|
||||
border: none;
|
||||
background-color: rgb(var(--sl-input-filled-background-color));
|
||||
color: rgb(var(--sl-input-color));
|
||||
}
|
||||
|
||||
.textarea--filled:hover:not(.textarea--disabled) .textarea__control {
|
||||
color: rgb(var(--sl-input-color-hover));
|
||||
.textarea--filled:hover:not(.textarea--disabled) {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-hover));
|
||||
}
|
||||
|
||||
.textarea--filled.textarea--focused:not(.textarea--disabled) {
|
||||
background-color: rgb(var(--sl-color-surface-base));
|
||||
border-color: rgb(var(--sl-color-primary-500));
|
||||
background-color: rgb(var(--sl-input-filled-background-color-focus));
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.textarea--filled.textarea--disabled {
|
||||
background-color: rgb(var(--sl-input-filled-background-color-disabled));
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
|
@ -516,6 +516,15 @@ export default css`
|
|||
--sl-input-spacing-medium: var(--sl-spacing-medium);
|
||||
--sl-input-spacing-large: var(--sl-spacing-large);
|
||||
|
||||
--sl-input-filled-background-color: var(--sl-color-neutral-100);
|
||||
--sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
|
||||
--sl-input-filled-background-color-focus: var(--sl-color-neutral-0);
|
||||
--sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
|
||||
--sl-input-filled-color: var(--sl-color-neutral-800);
|
||||
--sl-input-filled-color-hover: var(--sl-color-neutral-800);
|
||||
--sl-input-filled-color-focus: var(--sl-color-neutral-700);
|
||||
--sl-input-filled-color-disabled: var(--sl-color-neutral-800);
|
||||
|
||||
/* Labels */
|
||||
--sl-input-label-font-size-small: var(--sl-font-size-small);
|
||||
--sl-input-label-font-size-medium: var(--sl-font-size-medium);
|
||||
|
|
|
@ -516,6 +516,15 @@ export default css`
|
|||
--sl-input-spacing-medium: var(--sl-spacing-medium);
|
||||
--sl-input-spacing-large: var(--sl-spacing-large);
|
||||
|
||||
--sl-input-filled-background-color: var(--sl-color-neutral-100);
|
||||
--sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
|
||||
--sl-input-filled-background-color-focus: var(--sl-color-neutral-0);
|
||||
--sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
|
||||
--sl-input-filled-color: var(--sl-color-neutral-800);
|
||||
--sl-input-filled-color-hover: var(--sl-color-neutral-800);
|
||||
--sl-input-filled-color-focus: var(--sl-color-neutral-700);
|
||||
--sl-input-filled-color-disabled: var(--sl-color-neutral-800);
|
||||
|
||||
/* Labels */
|
||||
--sl-input-label-font-size-small: var(--sl-font-size-small);
|
||||
--sl-input-label-font-size-medium: var(--sl-font-size-medium);
|
||||
|
|
Ładowanie…
Reference in New Issue