diff --git a/docs/index.html b/docs/index.html
index 7326c6cf..c1b25add 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -42,6 +42,7 @@
+
diff --git a/src/styles/shoelace.scss b/src/styles/shoelace.scss
index 0434c1c3..2e5ca3eb 100644
--- a/src/styles/shoelace.scss
+++ b/src/styles/shoelace.scss
@@ -271,4 +271,3 @@
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@import '../components/button-group/button-group.light-dom';
-@import 'theme-dark';
diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss
deleted file mode 100644
index c6544e06..00000000
--- a/src/styles/theme-dark.scss
+++ /dev/null
@@ -1,334 +0,0 @@
-.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%;
-
- @include make-color-palette('primary');
- @include make-color-palette('success');
- @include make-color-palette('info');
- @include make-color-palette('warning');
- @include make-color-palette('danger');
- @include make-color-palette('gray');
-
- // 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);
-
- // Tooltips
- --sl-tooltip-background-color: var(--sl-color-gray-80);
- --sl-tooltip-color: var(--sl-color-black);
-
- // Alert
- 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-avatar::part(base) {
- background-color: var(--sl-color-gray-30);
- color: var(--sl-color-gray-70);
- }
-
- // Button
- 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-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-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-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-card::part(base) {
- background-color: var(--sl-color-gray-10);
- --border-color: var(--sl-color-gray-20);
- }
-
- // Color picker
- sl-color-picker::part(base) {
- background-color: var(--sl-color-gray-10);
- border-color: var(--sl-color-gray-20);
- }
-
- 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);
-
- &:hover {
- background-color: var(--sl-color-primary-15);
- border-color: var(--sl-color-primary-30);
- color: var(--sl-color-primary-60);
- }
-
- &: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));
- }
-
- &:active {
- background-color: var(--sl-color-primary-15);
- border-color: var(--sl-color-primary-40);
- color: var(--sl-color-primary-70);
- }
- }
-
- sl-color-picker::part(panel) {
- background-color: var(--sl-color-gray-10);
- border-color: var(--sl-color-gray-20);
- }
-
- 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-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-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-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-color-picker::part(preview),
- sl-color-picker::part(opacity-slider),
- 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-color-picker::part(swatches) {
- border-top-color: var(--sl-color-gray-20);
- }
-
- // Details
- sl-details::part(base) {
- border-color: var(--sl-color-gray-20);
- }
-
- // Dialog
- sl-dialog::part(panel) {
- background-color: var(--sl-color-gray-10);
- }
-
- // Drawer
- sl-drawer::part(panel) {
- background-color: var(--sl-color-gray-10);
- }
-
- // Dropdown
- sl-dropdown::part(panel) {
- background-color: var(--sl-color-gray-10);
- border-color: var(--sl-color-gray-20);
- }
-
- // Icon button
- sl-icon-button::part(base) {
- color: var(--sl-color-gray-60);
- }
-
- sl-icon-button:not([disabled])::part(base) {
- &:hover,
- &:focus {
- color: var(--sl-color-primary-50);
- }
-
- &:active {
- color: var(--sl-color-primary-60);
- }
- }
-
- // Menu
- sl-menu::part(base) {
- background-color: var(--sl-color-gray-10);
- }
-
- // Menu divider
- sl-menu-divider {
- --color: var(--sl-color-gray-20);
- }
-
- // Menu item
- sl-menu-item[active]::part(base) {
- background-color: var(--sl-color-primary-15);
- color: var(--sl-color-primary-50);
- }
-
- // Menu label
- sl-menu-label::part(base) {
- color: var(--sl-color-gray-40);
- }
-
- // Progress bar
- sl-progress-bar::part(base) {
- background-color: var(--sl-color-gray-20);
- }
-
- // Progress ring
- sl-progress-ring::part(base) {
- --track-color: var(--sl-color-gray-20);
- }
-
- // Range
- sl-range {
- --track-color: var(--sl-color-gray-20);
- }
-
- // Rating
- sl-rating {
- --symbol-color: var(--sl-color-gray-35);
- }
-
- // Select
- sl-select::part(panel) {
- border-color: var(--sl-color-gray-20);
- background-color: var(--sl-color-gray-10);
- }
-
- sl-select::part(menu) {
- background-color: var(--sl-color-gray-10);
- }
-
- // Skeleton
- sl-skeleton {
- --color: var(--sl-color-gray-20);
- --sheen-color: var(--sl-color-gray-25);
- }
-
- // Switch
- sl-switch::part(control) {
- background-color: var(--sl-color-gray-30);
- border-color: var(--sl-color-gray-30);
- }
-
- sl-switch::part(thumb) {
- background-color: var(--sl-color-black);
- }
-
- // Tab group
- sl-tab-group::part(tabs) {
- --tabs-border-color: var(--sl-color-gray-20);
- }
-
- // Tab
- sl-tab::part(base) {
- color: var(--sl-color-gray-60);
- }
-
- sl-tab:not([disabled])::part(base):hover,
- sl-tab[active]::part(base) {
- color: var(--sl-color-primary-50);
- }
-
- // Tag
- 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);
- }
-
- &[type='success']::part(base) {
- background-color: var(--sl-color-success-15);
- border-color: var(--sl-color-success-30);
- color: var(--sl-color-success-65);
- }
-
- &[type='info']::part(base) {
- background-color: var(--sl-color-info-15);
- border-color: var(--sl-color-info-30);
- color: var(--sl-color-info-70);
- }
-
- &[type='warning']::part(base) {
- background-color: var(--sl-color-warning-15);
- border-color: var(--sl-color-warning-30);
- color: var(--sl-color-warning-70);
- }
-
- &[type='danger']::part(base) {
- background-color: var(--sl-color-danger-15);
- border-color: var(--sl-color-danger-30);
- color: var(--sl-color-danger-75);
- }
- }
-}
diff --git a/themes/dark.css b/themes/dark.css
new file mode 100644
index 00000000..d7af3cc2
--- /dev/null
+++ b/themes/dark.css
@@ -0,0 +1,439 @@
+.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);
+
+ /* 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);
+}
+
+/* Color picker */
+.sl-theme-dark sl-color-picker::part(base) {
+ background-color: var(--sl-color-gray-10);
+ border-color: var(--sl-color-gray-20);
+}
+
+.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);
+}
+
+/* Dialog */
+.sl-theme-dark sl-dialog::part(panel) {
+ background-color: var(--sl-color-gray-10);
+}
+
+/* Drawer */
+.sl-theme-dark sl-drawer::part(panel) {
+ background-color: var(--sl-color-gray-10);
+}
+
+/* Dropdown */
+.sl-theme-dark sl-dropdown::part(panel) {
+ background-color: var(--sl-color-gray-10);
+ 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);
+}
+
+/* Menu */
+.sl-theme-dark sl-menu::part(base) {
+ background-color: var(--sl-color-gray-10);
+}
+
+/* Menu divider */
+.sl-theme-dark sl-menu-divider {
+ --color: var(--sl-color-gray-20);
+}
+
+/* Menu item */
+.sl-theme-dark sl-menu-item[active]::part(base) {
+ background-color: var(--sl-color-primary-15);
+ color: var(--sl-color-primary-50);
+}
+
+/* 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);
+}
+
+/* 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 */
+.sl-theme-dark sl-select::part(panel) {
+ border-color: var(--sl-color-gray-20);
+ background-color: var(--sl-color-gray-10);
+}
+
+.sl-theme-dark sl-select::part(menu) {
+ background-color: var(--sl-color-gray-10);
+}
+
+/* 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) {
+ background-color: var(--sl-color-black);
+}
+
+/* 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);
+}