kopia lustrzana https://github.com/shoelace-style/shoelace
add panel border width token
rodzic
15ce341d81
commit
47aff56e71
|
@ -8,7 +8,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
|
||||
## Next
|
||||
|
||||
- Added initial surface design tokens to improve the appearance of alert, card, and panels in dark mode
|
||||
- Added `--sl-surface-base` and `--sl-surface-base-alt` as early surface tokens to improve the appearance of alert, card, and panels in dark mode
|
||||
- Added the `--sl-panel-border-width` design token
|
||||
- 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>` and supporting design tokens
|
||||
|
|
|
@ -16,8 +16,8 @@ export default css`
|
|||
display: flex;
|
||||
align-items: stretch;
|
||||
background-color: rgb(var(--sl-surface-base-alt));
|
||||
border: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border-top-width: 3px;
|
||||
border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
|
||||
border-top-width: calc(var(--sl-panel-border-width) * 3);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
box-shadow: var(--box-shadow);
|
||||
font-family: var(--sl-font-sans);
|
||||
|
|
|
@ -28,7 +28,7 @@ export default css`
|
|||
}
|
||||
|
||||
.color-picker--inline {
|
||||
border: solid 1px rgb(var(--sl-panel-border-color));
|
||||
border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
|
||||
}
|
||||
|
||||
.color-picker__grid {
|
||||
|
|
|
@ -28,7 +28,7 @@ export default css`
|
|||
font-weight: var(--sl-font-weight-normal);
|
||||
color: var(--color);
|
||||
background-color: rgb(var(--sl-panel-background-color));
|
||||
border: solid 1px rgb(var(--sl-panel-border-color));
|
||||
border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
box-shadow: var(--sl-shadow-large);
|
||||
overflow: auto;
|
||||
|
|
|
@ -9,7 +9,7 @@ export default css`
|
|||
}
|
||||
|
||||
.menu-divider {
|
||||
border-top: solid 1px rgb(var(--sl-panel-border-color));
|
||||
border-top: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
|
||||
margin: var(--sl-spacing-x-small) 0;
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -9,7 +9,7 @@ export default css`
|
|||
}
|
||||
|
||||
.radio-group {
|
||||
border: solid 1px rgb(var(--sl-panel-border-color));
|
||||
border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
padding: var(--sl-spacing-large);
|
||||
padding-top: var(--sl-spacing-x-small);
|
||||
|
|
|
@ -555,6 +555,7 @@ export default css`
|
|||
|
||||
--sl-panel-background-color: var(--sl-surface-base-alt);
|
||||
--sl-panel-border-color: var(--sl-color-neutral-200);
|
||||
--sl-panel-border-width: 1px;
|
||||
|
||||
/*
|
||||
* Tooltips
|
||||
|
|
|
@ -555,6 +555,7 @@ export default css`
|
|||
|
||||
--sl-panel-background-color: var(--sl-surface-base-alt);
|
||||
--sl-panel-border-color: var(--sl-color-neutral-200);
|
||||
--sl-panel-border-width: 1px;
|
||||
|
||||
/*
|
||||
* Tooltips
|
||||
|
|
Ładowanie…
Reference in New Issue