shoelace/themes/dark.css

431 wiersze
21 KiB
CSS
Czysty Zwykły widok Historia

2020-08-18 13:41:02 +00:00
.sl-theme-dark {
/* Theme colors */
--sl-color-primary-saturation: 80%;
--sl-color-success-saturation: 50%;
--sl-color-info-saturation: 10%;
--sl-color-warning-saturation: 70%;
--sl-color-danger-saturation: 75%;
--sl-color-gray-saturation: 10%;
/*
* Color palettes
*
* Don't change these! They need to be redefined so the browser reevaluates them when scoped below the default theme.
* This allows you to apply the theme to a specific element instead of the entire page.
*
* See: https://stackoverflow.com/questions/52015737/css-scoped-custom-property-ignored-when-used-to-calculate-variable-in-outer-scop
*/
--sl-color-primary-5: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 5%);
--sl-color-primary-10: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 10%);
--sl-color-primary-15: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 15%);
--sl-color-primary-20: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 20%);
--sl-color-primary-25: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 25%);
--sl-color-primary-30: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 30%);
--sl-color-primary-35: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 35%);
--sl-color-primary-40: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 40%);
--sl-color-primary-45: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 45%);
--sl-color-primary-50: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%);
--sl-color-primary-55: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 55%);
--sl-color-primary-60: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 60%);
--sl-color-primary-65: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 65%);
--sl-color-primary-70: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 70%);
--sl-color-primary-75: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 75%);
--sl-color-primary-80: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 80%);
--sl-color-primary-85: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 85%);
--sl-color-primary-90: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 90%);
--sl-color-primary-95: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 95%);
--sl-color-success-5: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 5%);
--sl-color-success-10: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 10%);
--sl-color-success-15: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 15%);
--sl-color-success-20: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 20%);
--sl-color-success-25: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 25%);
--sl-color-success-30: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 30%);
--sl-color-success-35: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 35%);
--sl-color-success-40: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 40%);
--sl-color-success-45: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 45%);
--sl-color-success-50: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 50%);
--sl-color-success-55: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 55%);
--sl-color-success-60: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 60%);
--sl-color-success-65: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 65%);
--sl-color-success-70: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 70%);
--sl-color-success-75: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 75%);
--sl-color-success-80: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 80%);
--sl-color-success-85: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 85%);
--sl-color-success-90: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 90%);
--sl-color-success-95: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 95%);
--sl-color-info-5: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 5%);
--sl-color-info-10: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 10%);
--sl-color-info-15: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 15%);
--sl-color-info-20: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 20%);
--sl-color-info-25: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 25%);
--sl-color-info-30: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 30%);
--sl-color-info-35: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 35%);
--sl-color-info-40: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 40%);
--sl-color-info-45: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 45%);
--sl-color-info-50: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 50%);
--sl-color-info-55: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 55%);
--sl-color-info-60: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 60%);
--sl-color-info-65: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 65%);
--sl-color-info-70: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 70%);
--sl-color-info-75: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 75%);
--sl-color-info-80: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 80%);
--sl-color-info-85: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 85%);
--sl-color-info-90: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 90%);
--sl-color-info-95: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 95%);
--sl-color-warning-5: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 5%);
--sl-color-warning-10: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 10%);
--sl-color-warning-15: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 15%);
--sl-color-warning-20: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 20%);
--sl-color-warning-25: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 25%);
--sl-color-warning-30: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 30%);
--sl-color-warning-35: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 35%);
--sl-color-warning-40: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 40%);
--sl-color-warning-45: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 45%);
--sl-color-warning-50: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 50%);
--sl-color-warning-55: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 55%);
--sl-color-warning-60: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 60%);
--sl-color-warning-65: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 65%);
--sl-color-warning-70: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 70%);
--sl-color-warning-75: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 75%);
--sl-color-warning-80: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 80%);
--sl-color-warning-85: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 85%);
--sl-color-warning-90: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 90%);
--sl-color-warning-95: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 95%);
--sl-color-danger-5: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 5%);
--sl-color-danger-10: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 10%);
--sl-color-danger-15: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 15%);
--sl-color-danger-20: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 20%);
--sl-color-danger-25: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 25%);
--sl-color-danger-30: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 30%);
--sl-color-danger-35: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 35%);
--sl-color-danger-40: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 40%);
--sl-color-danger-45: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 45%);
--sl-color-danger-50: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 50%);
--sl-color-danger-55: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 55%);
--sl-color-danger-60: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 60%);
--sl-color-danger-65: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 65%);
--sl-color-danger-70: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 70%);
--sl-color-danger-75: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 75%);
--sl-color-danger-80: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 80%);
--sl-color-danger-85: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 85%);
--sl-color-danger-90: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 90%);
--sl-color-danger-95: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 95%);
--sl-color-gray-5: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 5%);
--sl-color-gray-10: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 10%);
--sl-color-gray-15: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 15%);
--sl-color-gray-20: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 20%);
--sl-color-gray-25: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 25%);
--sl-color-gray-30: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 30%);
--sl-color-gray-35: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 35%);
--sl-color-gray-40: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 40%);
--sl-color-gray-45: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 45%);
--sl-color-gray-50: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 50%);
--sl-color-gray-55: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 55%);
--sl-color-gray-60: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 60%);
--sl-color-gray-65: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 65%);
--sl-color-gray-70: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 70%);
--sl-color-gray-75: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 75%);
--sl-color-gray-80: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 80%);
--sl-color-gray-85: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 85%);
--sl-color-gray-90: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 90%);
--sl-color-gray-95: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 95%);
/* Inputs */
--sl-input-background-color: var(--sl-color-gray-10);
--sl-input-background-color-hover: var(--sl-color-gray-10);
--sl-input-background-color-focus: var(--sl-color-gray-10);
--sl-input-background-color-disabled: var(--sl-color-gray-15);
--sl-input-border-color: var(--sl-color-gray-30);
--sl-input-border-color-hover: var(--sl-color-gray-40);
--sl-input-border-color-focus: var(--sl-color-primary-50);
--sl-input-border-color-disabled: var(--sl-color-gray-80);
--sl-input-border-color-valid: var(--sl-color-success-50);
--sl-input-border-color-invalid: var(--sl-color-danger-50);
--sl-input-font-family: var(--sl-font-sans);
--sl-input-font-weight: var(--sl-font-weight-normal);
--sl-input-font-size-small: var(--sl-font-size-small);
--sl-input-font-size-medium: var(--sl-font-size-medium);
--sl-input-font-size-large: var(--sl-font-size-large);
--sl-input-letter-spacing: var(--sl-letter-spacing-normal);
--sl-input-border-color: var(--sl-color-gray-30);
--sl-input-border-color-hover: var(--sl-color-gray-40);
--sl-input-border-color-focus: var(--sl-color-primary-60);
--sl-input-border-color-disabled: var(--sl-color-gray-30);
--sl-input-border-color-valid: var(--sl-color-success-50);
--sl-input-border-color-invalid: var(--sl-color-danger-50);
--sl-input-color: var(--sl-color-gray-80);
--sl-input-color-hover: var(--sl-color-gray-80);
--sl-input-color-focus: var(--sl-color-gray-80);
--sl-input-color-disabled: var(--sl-color-gray-90);
--sl-input-color-valid: var(--sl-color-success-60);
--sl-input-color-invalid: var(--sl-color-danger-40);
--sl-input-icon-color: var(--sl-color-gray-40);
--sl-input-icon-color-hover: var(--sl-color-gray-60);
--sl-input-icon-color-focus: var(--sl-color-gray-60);
--sl-input-placeholder-color: var(--sl-color-gray-30);
--sl-input-placeholder-color-disabled: var(--sl-color-gray-40);
/* Overlays */
--sl-overlay-background-color: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 80%, 0.1);
2020-08-18 21:10:09 +00:00
/* Panels */
--sl-panel-background-color: var(--sl-color-gray-10);
--sl-panel-border-color: var(--sl-color-gray-20);
2020-08-18 13:41:02 +00:00
/* Tooltips */
--sl-tooltip-background-color: var(--sl-color-gray-80);
--sl-tooltip-color: var(--sl-color-black);
}
/* Alert */
.sl-theme-dark sl-alert::part(base) {
background-color: var(--sl-color-gray-10);
border-left-color: var(--sl-color-gray-20);
border-right-color: var(--sl-color-gray-20);
border-bottom-color: var(--sl-color-gray-20);
color: var(--sl-color-gray-80);
}
/* Avatar */
.sl-theme-dark sl-avatar::part(base) {
background-color: var(--sl-color-gray-30);
color: var(--sl-color-gray-70);
}
/* Button */
.sl-theme-dark sl-button[type='default']::part(base) {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-30);
color: var(--sl-color-gray-60);
}
.sl-theme-dark sl-button[type='default']:not([disabled])::part(base):hover {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-60);
}
.sl-theme-dark sl-button[type='default']:not([disabled])::part(base):focus {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-60);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
}
.sl-theme-dark sl-button[type='default']:not([disabled])::part(base):active {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-40);
color: var(--sl-color-primary-70);
}
/* Card */
.sl-theme-dark sl-card::part(base) {
background-color: var(--sl-color-gray-10);
--border-color: var(--sl-color-gray-20);
}
2020-08-18 21:10:09 +00:00
/* Checkbox & radio */
.sl-theme-dark sl-checkbox::part(control),
.sl-theme-dark sl-radio::part(control) {
color: var(--sl-color-gray-10);
2020-08-18 13:41:02 +00:00
}
2020-08-18 21:10:09 +00:00
/* Color picker */
2020-08-18 13:41:02 +00:00
.sl-theme-dark sl-color-picker::part(copy-button) {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-30);
color: var(--sl-color-gray-60);
}
.sl-theme-dark sl-color-picker::part(copy-button):hover {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-60);
}
.sl-theme-dark sl-color-picker::part(copy-button):focus {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-60);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
}
.sl-theme-dark sl-color-picker::part(copy-button):active {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-40);
color: var(--sl-color-primary-70);
}
.sl-theme-dark sl-color-picker::part(panel) {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-20);
}
.sl-theme-dark sl-color-picker::part(slider-handle) {
background-color: var(--sl-color-gray-10);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.sl-theme-dark sl-color-picker::part(slider-handle):focus {
box-shadow: 0 0 0 1px hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%),
var(--sl-focus-ring-box-shadow);
}
.sl-theme-dark sl-color-picker::part(grid-handle) {
border-color: var(--sl-color-gray-10);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.sl-theme-dark sl-color-picker::part(grid-handle):focus {
box-shadow: 0 0 0 1px hsl(var(--sl-focus-ring-hue), var(--sl-focus-ring-saturation), var(--sl-focus-ring-lightness)),
inset 0 0 0 1px hsl(var(--sl-focus-ring-hue), var(--sl-focus-ring-saturation), var(--sl-focus-ring-lightness)),
var(--sl-focus-ring-box-shadow);
}
.sl-theme-dark sl-color-picker::part(preview),
.sl-theme-dark sl-color-picker::part(opacity-slider),
.sl-theme-dark sl-color-picker::part(trigger) {
background-image: linear-gradient(45deg, #333 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #333 75%),
linear-gradient(45deg, transparent 75%, #333 75%), linear-gradient(45deg, #333 25%, transparent 25%);
}
.sl-theme-dark sl-color-picker::part(swatches) {
border-top-color: var(--sl-color-gray-20);
}
/* Details */
.sl-theme-dark sl-details::part(base) {
border-color: var(--sl-color-gray-20);
}
/* Icon button */
.sl-theme-dark sl-icon-button::part(base) {
color: var(--sl-color-gray-60);
}
.sl-theme-dark sl-icon-button:not([disabled])::part(base):hover,
.sl-theme-dark sl-icon-button:not([disabled])::part(base):focus {
color: var(--sl-color-primary-50);
}
.sl-theme-dark sl-icon-button:not([disabled])::part(base):active {
color: var(--sl-color-primary-60);
}
2020-08-21 21:27:11 +00:00
/* Image comparer */
.sl-theme-dark sl-image-comparer::part(divider),
.sl-theme-dark sl-image-comparer::part(handle) {
background-color: var(--sl-color-gray-10);
color: var(--sl-color-gray-60);
}
2020-08-18 13:41:02 +00:00
/* Menu item */
.sl-theme-dark sl-menu-item[active]::part(base) {
background-color: var(--sl-color-primary-15);
color: var(--sl-color-primary-50);
}
.sl-theme-dark sl-menu-item[disabled]::part(base) {
color: var(--sl-color-gray-40);
}
2020-08-18 13:41:02 +00:00
/* Menu label */
.sl-theme-dark sl-menu-label::part(base) {
color: var(--sl-color-gray-40);
}
/* Progress bar */
.sl-theme-dark sl-progress-bar::part(base) {
background-color: var(--sl-color-gray-20);
}
2020-08-18 21:10:09 +00:00
.sl-theme-dark sl-progress-bar::part(indicator) {
color: var(--sl-color-gray-10);
}
2020-08-18 13:41:02 +00:00
/* Progress ring */
.sl-theme-dark sl-progress-ring::part(base) {
--track-color: var(--sl-color-gray-20);
}
/* Range */
.sl-theme-dark sl-range {
--track-color: var(--sl-color-gray-20);
}
/* Rating */
.sl-theme-dark sl-rating {
--symbol-color: var(--sl-color-gray-35);
}
/* Select */
2020-08-18 21:10:09 +00:00
.sl-theme-dark sl-select::part(tag) {
background-color: var(--sl-color-info-15);
border-color: var(--sl-color-info-30);
color: var(--sl-color-info-70);
2020-08-18 13:41:02 +00:00
}
/* Skeleton */
.sl-theme-dark sl-skeleton {
--color: var(--sl-color-gray-20);
--sheen-color: var(--sl-color-gray-25);
}
/* Switch */
.sl-theme-dark sl-switch::part(control) {
background-color: var(--sl-color-gray-30);
border-color: var(--sl-color-gray-30);
}
.sl-theme-dark sl-switch::part(thumb) {
2020-08-18 21:10:09 +00:00
background-color: var(--sl-color-gray-10);
2020-08-18 13:41:02 +00:00
}
/* Tab group */
.sl-theme-dark sl-tab-group::part(tabs) {
--tabs-border-color: var(--sl-color-gray-20);
}
/* Tab */
.sl-theme-dark sl-tab::part(base) {
color: var(--sl-color-gray-60);
}
.sl-theme-dark sl-tab:not([disabled])::part(base):hover,
.sl-theme-dark sl-tab[active]::part(base) {
color: var(--sl-color-primary-50);
}
/* Tag */
.sl-theme-dark sl-tag[type='primary']::part(base) {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-70);
}
.sl-theme-dark sl-tag[type='success']::part(base) {
background-color: var(--sl-color-success-15);
border-color: var(--sl-color-success-30);
color: var(--sl-color-success-65);
}
.sl-theme-dark sl-tag[type='info']::part(base) {
background-color: var(--sl-color-info-15);
border-color: var(--sl-color-info-30);
color: var(--sl-color-info-70);
}
.sl-theme-dark sl-tag[type='warning']::part(base) {
background-color: var(--sl-color-warning-15);
border-color: var(--sl-color-warning-30);
color: var(--sl-color-warning-70);
}
.sl-theme-dark sl-tag[type='danger']::part(base) {
background-color: var(--sl-color-danger-15);
border-color: var(--sl-color-danger-30);
color: var(--sl-color-danger-75);
}