stargazer-ui 1.5.34 → 1.5.36

package/styles/stargazerui.css

@@ -37,6 +37,7 @@ body {
   height: 100dvh;
   color: var(--sg-body-color);
   background-color: var(--sg-body-bg);
+  line-height: var(--sg-line-height);
 }
 
 #root {
@@ -3173,8 +3174,91 @@ legend {
   }
 }
 :root {
+  --sg-nav-color: #1a1b1d;
   --sg-body-bg: #212529;
   --sg-body-color: white;
+  --sg-line-height: 1.4em;
+  /* colors */
+  --sg-primary: #fc5f5f;
+  --sg-primary-text: black;
+  --sg-primary-contrast: white;
+  --sg-secondary: #6c757d;
+  --sg-secondary-text: white;
+  --sg-secondary-contrast: black;
+  --sg-success: #1fad61;
+  --sg-success-text: black;
+  --sg-success-contrast: white;
+  --sg-info: #9184bd;
+  --sg-info-text: black;
+  --sg-info-contrast: white;
+  --sg-warning: #e0bc29;
+  --sg-warning-text: black;
+  --sg-warning-contrast: white;
+  --sg-danger: #4995d5;
+  --sg-danger-text: black;
+  --sg-danger-contrast: white;
+  --sg-light: #f8f9fa;
+  --sg-light-text: black;
+  --sg-light-contrast: black;
+  --sg-dark: #212529;
+  --sg-dark-text: white;
+  --sg-dark-contrast: black;
+  /* z-indexes */
+  --sg-zindex-sticky: 1010;
+  --sg-zindex-navbar: 1010;
+  --sg-zindex-fixed: 1010;
+  --sg-zindex-dropdown: 1020;
+  --sg-zindex-popover: 1020;
+  --sg-zindex-offcanvas-backdrop: 1030;
+  --sg-zindex-offcanvas: 1040;
+  --sg-zindex-modal-backdrop: 1050;
+  --sg-zindex-modal: 1060;
+  --sg-zindex-tooltip: 1080;
+  --sg-zindex-toast: 1090;
+  /* dropdown */
+  --sg-dropdown-list-bg: var(--sg-nav-color);
+  /* form */
+  --sg-input-text-color: var(--sg-body-color);
+  --sg-input-background-color: var(--sg-nav-color);
+  --sg-input-background-color-dark: rgb(175, 174, 174);
+  --sg-input-border-color: color-mix(in oklab, var(--sg-input-background-color), white 25%);
+  --sg-input-border-width: 2px;
+  --sg-input-border-radius: 0;
+  --sg-input-padding-x: 0.375em;
+  --sg-input-padding-y: 0.5em;
+  /* nav */
+  --sg-link-color: var(--sg-primary);
+  --sg-link-hover-color: white;
+  --sg-link-disable-color: rgb(180, 180, 180);
+  /* offcanvas */
+  -sg-offCanvas-background-color: #2e3236;
+  /* tabs */
+  --sg-tab-controls-bg: var(--sg-body-bg);
+  --sg-tab-button-color: var(--sg-primary);
+  /* form */
+  --sg-input-line-height: var(--sg-line-height);
+  --sg-input-padding-x: 0.375em;
+  --sg-input-padding-y: 0.5em;
+  --sg-input-border-width: 2px;
+  --sg-input-border-style: outset;
+  --sg-input-border-radius: 0;
+  --sg-input-background-color: var(--sg-nav-color);
+  --sg-input-disabled-color: #e9ecef;
+  --sg-input-placeholder-color: rgba(255, 255, 255, 0.336);
+  --sg-input-border-color: color-mix(in oklab, var(--sg-input-background-color), currentColor 25%);
+  --sg-input-border-color-focus: var(--sg-primary);
+  --sg-input-border-color-invalid: var(--sg-warning);
+  --sg-input-group-text-background-color: #e9ecef;
+  --sg-input-height: calc(var(--sg-input-line-height) + var(--sg-input-padding-x) * 2 + 2*var(--sg-input-border-width));
+  --sg-form-switch-width: 2em;
+  --sg-slider-filled-color: var(--sg-primary);
+  --sg-slider-filled-border-color: color-mix(in oklab, var(--sg-slider-filled-color), black 20%);
+  --sg-slider-empty-color: var(--sg-input-background-color);
+  --sg-slider-empty-border-color: var(--sg-input-border-color);
+  --sg-slider-height: 1.75rem;
+  --sg-slider-thumb-width: 1.5rem;
+  --sg-slider-thumb-height: 0.5rem;
+  --sg-slider-border-width: 1px;
 }
 
 /* Grid variables */
@@ -3195,12 +3279,100 @@ legend {
   overflow: auto;
 }
 
-/* Dropdown */
-/* Form */
-/* Nav */
-/* Overlay */
-/* Table */
-/* Tabs */
+/*
+/// Dropdown
+$sg-dropdown-list-bg: #343a40;
+
+$sg-dropdown-item-hover-bg: color.mix(black, $sg-dropdown-list-bg, 15%);
+$sg-dropdown-item-action-bg: color.mix(black, $sg-dropdown-list-bg, 20%);
+$sg-dropdown-item-disabled-bg: color.mix(white, $sg-dropdown-list-bg, 15%);
+
+
+/// Form 
+$input-text-color: white;// #212529;
+$input-text-color-dark: black;
+
+$input-line-height: $body-line-height;
+
+$input-padding-x: 0.375em;
+$input-padding-y: 0.5em;
+
+$input-border-width: 2px;
+$input-border-radius: 0;// 0.375em;
+
+$input-border-color: color-mix(in oklab, $sg-nav-color, white 25%) ;// #ced4da;
+$input-border-color-dark: color-mix(in oklab, white, $sg-nav-color 25%) ;
+$input-border-color-focus: $danger;
+$input-border-color-focus-dark: color-mix(in oklab, $danger, black 25%);
+$input-border-color-invalid: $warning;
+$input-border-color-invalid-dark: color-mix(in oklab, $warning, black 25%);
+$input-border-style: outset;// solid;
+
+$input-background-color: $sg-nav-color;
+$input-background-color-dark: $sg-body-bg-dark;// white;
+$input-disabled-color: #e9ecef;
+$input-placeholder-color: rgba(255, 255, 255, 0.336);// #6c757d;
+
+$input-group-text-background-color: #e9ecef;
+$input-group-text-border-color: color.mix(black, $input-group-text-background-color, 5%);// #ced4da;
+
+$input-height: calc($input-line-height + $input-padding-x * 2 + 2*$input-border-width);
+
+$slider-height: 1.75rem;
+$slider-thumb-width: 1.5rem;
+$slider-thumb-height: 0.5rem;
+$slider-border-width: 1px;
+
+$slider-filled-color: $danger;
+$slider-filled-hover-color: color-mix(in oklab, $slider-filled-color, black 15%);
+$slider-filled-border-color: color-mix(in oklab, $slider-filled-color, black 20%);
+$slider-filled-border-hover-color: color-mix(in oklab, $slider-filled-color, black 35%);
+
+$slider-empty-color: $input-background-color;
+$slider-empty-bover-color: color-mix(in oklab, $input-background-color, black 15%);
+$slider-empty-border-color: color-mix(in oklab, $input-border-color, black 15%);
+$slider-empty-border-hover-color: color-mix(in oklab, $input-border-color, black 25%);
+
+
+/// Nav 
+$sg-link-color: $danger;// #4D9DE0;// #0d6efd;
+$sg-link-hover-color: white;//color.mix(black, #E15554, 15%);// #62a4da;// #0a58ca;
+$sg-link-disable-color: rgb(180, 180, 180);
+
+
+/// Overlay
+$sg-arrow-border: white;
+$sg-arrow-fill: rgb(26, 27, 29);
+$tooltip-arrow-filter: brightness(66.666666%);
+
+$tooltip-text-color: white;
+$tooltip-background-color: rgb(26, 27, 29);
+
+
+$tooltip-font-size: 0.75rem;
+$tooltip-max-width: 12rem;
+
+$tooltip-padding-x: 0.375em;
+$tooltip-padding-y: 0.5em;
+
+$tooltip-border-color: color-mix(in oklab, $sg-nav-color, white 25%) ;
+$tooltip-border-radius: 0;
+$tooltip-border-width: 2px;
+$tooltip-border-style: inset;
+$tooltip-border-color: $tooltip-text-color;
+
+
+// Table
+$sg-table-padding: 0.5rem;
+$sg-table-padding-sm: 0.25rem;
+
+/// Tabs
+$sg-tab-controls-bg: #212529;
+
+$sg-tab-button-color: $danger;
+$sg-tab-button-hover: color-mix(in srgb, black 15%, $sg-tab-controls-bg);
+$sg-tab-button-active: color-mix(in srgb, black 25%, $sg-tab-controls-bg);
+*/
 .sg-visually-hidden {
   position: absolute !important;
   width: 1px !important;
@@ -3214,13 +3386,16 @@ legend {
 }
 
 .sg-card {
+  --card-color: var(--sg-body-color);
+  --card-border-color: var(--sg-body-color);
   --card-border-radius: 0rem;
   --border-width: -2px;
-  --border-gradient-color: color-mix(in srgb, color-mix(in hsl, white 3%, #212529), white 3%);
-  --border-gradient-mix-color: color-mix(in srgb, color-mix(in hsl, white 3%, #212529), white 3%);
-  --background-gradient-color: rgb(26, 27, 29);
-  --background-gradient-mix-color: color-mix(in srgb, color-mix(in hsl, white 3%, #212529), white 3%);
-  --divider-color: white;
+  --header-bg-color: color-mix(in oklab, var(--card-color) 3%, var(--sg-body-bg));
+  --border-gradient-color: color-mix(in srgb, var(--header-bg-color), var(--card-color) 3%);
+  --border-gradient-mix-color: color-mix(in srgb, var(--header-bg-color), var(--card-color) 3%);
+  --background-gradient-color: var(--sg-nav-color);
+  --background-gradient-mix-color: color-mix(in srgb, var(--header-bg-color), var(--card-color) 3%);
+  --divider-color: var(--sg-body-color);
   display: flex;
   flex-direction: column;
   border: calc(var(--border-width) * -1) solid transparent;
@@ -3230,8 +3405,8 @@ legend {
   background-clip: padding-box;
 }
 .sg-card.sg-card-overlay {
-  color: white;
-  border: 1px solid white;
+  color: var(--card-color);
+  border: 1px solid var(--card-border-color);
 }
 .sg-card .sg-card-body {
   flex: 1 1 auto;
@@ -3274,161 +3449,147 @@ legend {
 }
 
 .primary {
-  --border-gradient-mix-color: rgb(252, 95, 95);
-  grid-column: 2/3;
-  grid-row: 1;
+  --border-gradient-mix-color: var(--sg-primary);
 }
 .primary.inverted {
-  --border-gradient-color: color-mix(in srgb, rgb(252, 95, 95), black 30%);
-  --border-gradient-mix-color: rgb(252, 95, 95);
-  --background-gradient-color: color-mix(in srgb, rgb(252, 95, 95), black 0%);
-  --background-gradient-mix-color: rgb(252, 95, 95);
-  --divider-color: color-mix(in srgb, rgb(252, 95, 95), black 15%);
+  --border-gradient-color: color-mix(in srgb, var(--sg-primary), black 30%);
+  --border-gradient-mix-color: var(--sg-primary);
+  --background-gradient-color: color-mix(in srgb, var(--sg-primary), black 0%);
+  --background-gradient-mix-color: var(--sg-primary);
+  --divider-color: color-mix(in srgb, var(--sg-primary), black 15%);
   /*
   > h1, h2, h3, h4, h5, h6, span, p, small {
       background-color: $color;
       box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
   }
   */
-  color: black;
+  color: var(--sg-primary-text);
 }
 
 .secondary {
-  --border-gradient-mix-color: #6c757d;
-  grid-column: 4/5;
-  grid-row: 1;
+  --border-gradient-mix-color: var(--sg-secondary);
 }
 .secondary.inverted {
-  --border-gradient-color: color-mix(in srgb, #6c757d, black 30%);
-  --border-gradient-mix-color: #6c757d;
-  --background-gradient-color: color-mix(in srgb, #6c757d, black 0%);
-  --background-gradient-mix-color: #6c757d;
-  --divider-color: color-mix(in srgb, #6c757d, black 15%);
+  --border-gradient-color: color-mix(in srgb, var(--sg-secondary), black 30%);
+  --border-gradient-mix-color: var(--sg-secondary);
+  --background-gradient-color: color-mix(in srgb, var(--sg-secondary), black 0%);
+  --background-gradient-mix-color: var(--sg-secondary);
+  --divider-color: color-mix(in srgb, var(--sg-secondary), black 15%);
   /*
   > h1, h2, h3, h4, h5, h6, span, p, small {
       background-color: $color;
       box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
   }
   */
+  color: var(--sg-secondary-text);
 }
 
 .success {
-  --border-gradient-mix-color: #1fad61;
-  grid-column: 6/7;
-  grid-row: 1;
+  --border-gradient-mix-color: var(--sg-success);
 }
 .success.inverted {
-  --border-gradient-color: color-mix(in srgb, #1fad61, black 30%);
-  --border-gradient-mix-color: #1fad61;
-  --background-gradient-color: color-mix(in srgb, #1fad61, black 0%);
-  --background-gradient-mix-color: #1fad61;
-  --divider-color: color-mix(in srgb, #1fad61, black 15%);
+  --border-gradient-color: color-mix(in srgb, var(--sg-success), black 30%);
+  --border-gradient-mix-color: var(--sg-success);
+  --background-gradient-color: color-mix(in srgb, var(--sg-success), black 0%);
+  --background-gradient-mix-color: var(--sg-success);
+  --divider-color: color-mix(in srgb, var(--sg-success), black 15%);
   /*
   > h1, h2, h3, h4, h5, h6, span, p, small {
       background-color: $color;
       box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
   }
   */
-  color: black;
+  color: var(--sg-success-text);
 }
 
 .info {
-  --border-gradient-mix-color: #9184bd;
-  grid-column: 8/9;
-  grid-row: 1;
+  --border-gradient-mix-color: var(--sg-info);
 }
 .info.inverted {
-  --border-gradient-color: color-mix(in srgb, #9184bd, black 30%);
-  --border-gradient-mix-color: #9184bd;
-  --background-gradient-color: color-mix(in srgb, #9184bd, black 0%);
-  --background-gradient-mix-color: #9184bd;
-  --divider-color: color-mix(in srgb, #9184bd, black 15%);
+  --border-gradient-color: color-mix(in srgb, var(--sg-info), black 30%);
+  --border-gradient-mix-color: var(--sg-info);
+  --background-gradient-color: color-mix(in srgb, var(--sg-info), black 0%);
+  --background-gradient-mix-color: var(--sg-info);
+  --divider-color: color-mix(in srgb, var(--sg-info), black 15%);
   /*
   > h1, h2, h3, h4, h5, h6, span, p, small {
       background-color: $color;
       box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
   }
   */
-  color: black;
+  color: var(--sg-info-text);
 }
 
 .warning {
-  --border-gradient-mix-color: hsl(48, 75%, 52%);
-  grid-column: 2/3;
-  grid-row: 2;
+  --border-gradient-mix-color: var(--sg-warning);
 }
 .warning.inverted {
-  --border-gradient-color: color-mix(in srgb, hsl(48, 75%, 52%), black 30%);
-  --border-gradient-mix-color: hsl(48, 75%, 52%);
-  --background-gradient-color: color-mix(in srgb, hsl(48, 75%, 52%), black 0%);
-  --background-gradient-mix-color: hsl(48, 75%, 52%);
-  --divider-color: color-mix(in srgb, hsl(48, 75%, 52%), black 15%);
+  --border-gradient-color: color-mix(in srgb, var(--sg-warning), black 30%);
+  --border-gradient-mix-color: var(--sg-warning);
+  --background-gradient-color: color-mix(in srgb, var(--sg-warning), black 0%);
+  --background-gradient-mix-color: var(--sg-warning);
+  --divider-color: color-mix(in srgb, var(--sg-warning), black 15%);
   /*
   > h1, h2, h3, h4, h5, h6, span, p, small {
       background-color: $color;
       box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
   }
   */
-  color: black;
+  color: var(--sg-warning-text);
 }
 
 .danger {
-  --border-gradient-mix-color: #4995d5;
-  grid-column: 4/5;
-  grid-row: 2;
+  --border-gradient-mix-color: var(--sg-danger);
 }
 .danger.inverted {
-  --border-gradient-color: color-mix(in srgb, #4995d5, black 30%);
-  --border-gradient-mix-color: #4995d5;
-  --background-gradient-color: color-mix(in srgb, #4995d5, black 0%);
-  --background-gradient-mix-color: #4995d5;
-  --divider-color: color-mix(in srgb, #4995d5, black 15%);
+  --border-gradient-color: color-mix(in srgb, var(--sg-danger), black 30%);
+  --border-gradient-mix-color: var(--sg-danger);
+  --background-gradient-color: color-mix(in srgb, var(--sg-danger), black 0%);
+  --background-gradient-mix-color: var(--sg-danger);
+  --divider-color: color-mix(in srgb, var(--sg-danger), black 15%);
   /*
   > h1, h2, h3, h4, h5, h6, span, p, small {
       background-color: $color;
       box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
   }
   */
-  color: black;
+  color: var(--sg-danger-text);
 }
 
 .light {
-  --border-gradient-mix-color: #f8f9fa;
-  grid-column: 6/7;
-  grid-row: 2;
+  --border-gradient-mix-color: var(--sg-light);
 }
 .light.inverted {
-  --border-gradient-color: color-mix(in srgb, #f8f9fa, black 30%);
-  --border-gradient-mix-color: #f8f9fa;
-  --background-gradient-color: color-mix(in srgb, #f8f9fa, black 0%);
-  --background-gradient-mix-color: #f8f9fa;
-  --divider-color: color-mix(in srgb, #f8f9fa, black 15%);
+  --border-gradient-color: color-mix(in srgb, var(--sg-light), black 30%);
+  --border-gradient-mix-color: var(--sg-light);
+  --background-gradient-color: color-mix(in srgb, var(--sg-light), black 0%);
+  --background-gradient-mix-color: var(--sg-light);
+  --divider-color: color-mix(in srgb, var(--sg-light), black 15%);
   /*
   > h1, h2, h3, h4, h5, h6, span, p, small {
       background-color: $color;
       box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
   }
   */
-  color: black;
+  color: var(--sg-light-text);
 }
 
 .dark {
-  --border-gradient-mix-color: #212529;
-  grid-column: 8/9;
-  grid-row: 2;
+  --border-gradient-mix-color: var(--sg-dark);
 }
 .dark.inverted {
-  --border-gradient-color: color-mix(in srgb, #212529, black 30%);
-  --border-gradient-mix-color: #212529;
-  --background-gradient-color: color-mix(in srgb, #212529, black 0%);
-  --background-gradient-mix-color: #212529;
-  --divider-color: color-mix(in srgb, #212529, black 15%);
+  --border-gradient-color: color-mix(in srgb, var(--sg-dark), black 30%);
+  --border-gradient-mix-color: var(--sg-dark);
+  --background-gradient-color: color-mix(in srgb, var(--sg-dark), black 0%);
+  --background-gradient-mix-color: var(--sg-dark);
+  --divider-color: color-mix(in srgb, var(--sg-dark), black 15%);
   /*
   > h1, h2, h3, h4, h5, h6, span, p, small {
       background-color: $color;
       box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
   }
   */
+  color: var(--sg-dark-text);
 }
 
 .sg-button-close {
@@ -3517,16 +3678,15 @@ legend {
 }
 
 .sg-button-primary {
-  --text-color: black;
-  --bg-color: rgb(252, 95, 95);
-  --border-color: rgb(252, 95, 95);
-  --bg-hover-color: #fc7777;
-  --border-hover-color: #fc7777;
-  --bg-active-color: #fd7f7f;
-  --border-active-color: #fd7f7f;
-  --focus-visible-border-color: black;
-  --focus-visible-outline-color: rgb(252, 95, 95);
-  --focus-visible-boxshadow-color: black;
+  --text-color: var(--sg-primary-text);
+  --bg-color: var(--sg-primary);
+  --bg-hover-color: color-mix(in oklab, var(--sg-primary), var(--sg-primary-contrast) 15%);
+  --border-hover-color: color-mix(in oklab, var(--sg-primary), var(--sg-primary-contrast) 15%);
+  --bg-active-color: color-mix(in oklab, var(--sg-primary), var(--sg-primary-contrast) 20%);
+  --border-active-color: color-mix(in oklab, var(--sg-primary), var(--sg-primary-contrast) 20%);
+  --focus-visible-border-color: var(--sg-primary-text);
+  --focus-visible-outline-color: var(--sg-primary);
+  --focus-visible-boxshadow-color: var(--sg-primary-text);
 }
 
 .sg-button-group > .btn-primary {
@@ -3535,16 +3695,15 @@ legend {
 }
 
 .sg-button-secondary {
-  --text-color: white;
-  --bg-color: #6c757d;
-  --border-color: #6c757d;
-  --bg-hover-color: #5c636a;
-  --border-hover-color: #5c636a;
-  --bg-active-color: #565e64;
-  --border-active-color: #565e64;
-  --focus-visible-border-color: white;
-  --focus-visible-outline-color: #6c757d;
-  --focus-visible-boxshadow-color: white;
+  --text-color: var(--sg-secondary-text);
+  --bg-color: var(--sg-secondary);
+  --bg-hover-color: color-mix(in oklab, var(--sg-secondary), var(--sg-secondary-contrast) 15%);
+  --border-hover-color: color-mix(in oklab, var(--sg-secondary), var(--sg-secondary-contrast) 15%);
+  --bg-active-color: color-mix(in oklab, var(--sg-secondary), var(--sg-secondary-contrast) 20%);
+  --border-active-color: color-mix(in oklab, var(--sg-secondary), var(--sg-secondary-contrast) 20%);
+  --focus-visible-border-color: var(--sg-secondary-text);
+  --focus-visible-outline-color: var(--sg-secondary);
+  --focus-visible-boxshadow-color: var(--sg-secondary-text);
 }
 
 .sg-button-group > .btn-secondary {
@@ -3553,16 +3712,15 @@ legend {
 }
 
 .sg-button-success {
-  --text-color: black;
-  --bg-color: #1fad61;
-  --border-color: #1fad61;
-  --bg-hover-color: #41b979;
-  --border-hover-color: #41b979;
-  --bg-active-color: #4cbd81;
-  --border-active-color: #4cbd81;
-  --focus-visible-border-color: black;
-  --focus-visible-outline-color: #1fad61;
-  --focus-visible-boxshadow-color: black;
+  --text-color: var(--sg-success-text);
+  --bg-color: var(--sg-success);
+  --bg-hover-color: color-mix(in oklab, var(--sg-success), var(--sg-success-contrast) 15%);
+  --border-hover-color: color-mix(in oklab, var(--sg-success), var(--sg-success-contrast) 15%);
+  --bg-active-color: color-mix(in oklab, var(--sg-success), var(--sg-success-contrast) 20%);
+  --border-active-color: color-mix(in oklab, var(--sg-success), var(--sg-success-contrast) 20%);
+  --focus-visible-border-color: var(--sg-success-text);
+  --focus-visible-outline-color: var(--sg-success);
+  --focus-visible-boxshadow-color: var(--sg-success-text);
 }
 
 .sg-button-group > .btn-success {
@@ -3571,16 +3729,15 @@ legend {
 }
 
 .sg-button-info {
-  --text-color: black;
-  --bg-color: #9184bd;
-  --border-color: #9184bd;
-  --bg-hover-color: #a296c7;
-  --border-hover-color: #a296c7;
-  --bg-active-color: #a79dca;
-  --border-active-color: #a79dca;
-  --focus-visible-border-color: black;
-  --focus-visible-outline-color: #9184bd;
-  --focus-visible-boxshadow-color: black;
+  --text-color: var(--sg-info-text);
+  --bg-color: var(--sg-info);
+  --bg-hover-color: color-mix(in oklab, var(--sg-info), var(--sg-info-contrast) 15%);
+  --border-hover-color: color-mix(in oklab, var(--sg-info), var(--sg-info-contrast) 15%);
+  --bg-active-color: color-mix(in oklab, var(--sg-info), var(--sg-info-contrast) 20%);
+  --border-active-color: color-mix(in oklab, var(--sg-info), var(--sg-info-contrast) 20%);
+  --focus-visible-border-color: var(--sg-info-text);
+  --focus-visible-outline-color: var(--sg-info);
+  --focus-visible-boxshadow-color: var(--sg-info-text);
 }
 
 .sg-button-group > .btn-info {
@@ -3589,16 +3746,15 @@ legend {
 }
 
 .sg-button-warning {
-  --text-color: black;
-  --bg-color: hsl(48, 75%, 52%);
-  --border-color: hsl(48, 75%, 52%);
-  --bg-hover-color: #e5c649;
-  --border-hover-color: #e5c649;
-  --bg-active-color: #e6c954;
-  --border-active-color: #e6c954;
-  --focus-visible-border-color: black;
-  --focus-visible-outline-color: hsl(48, 75%, 52%);
-  --focus-visible-boxshadow-color: black;
+  --text-color: var(--sg-warning-text);
+  --bg-color: var(--sg-warning);
+  --bg-hover-color: color-mix(in oklab, var(--sg-warning), var(--sg-warning-contrast) 15%);
+  --border-hover-color: color-mix(in oklab, var(--sg-warning), var(--sg-warning-contrast) 15%);
+  --bg-active-color: color-mix(in oklab, var(--sg-warning), var(--sg-warning-contrast) 20%);
+  --border-active-color: color-mix(in oklab, var(--sg-warning), var(--sg-warning-contrast) 20%);
+  --focus-visible-border-color: var(--sg-warning-text);
+  --focus-visible-outline-color: var(--sg-warning);
+  --focus-visible-boxshadow-color: var(--sg-warning-text);
 }
 
 .sg-button-group > .btn-warning {
@@ -3607,16 +3763,15 @@ legend {
 }
 
 .sg-button-danger {
-  --text-color: black;
-  --bg-color: #4995d5;
-  --border-color: #4995d5;
-  --bg-hover-color: #64a5db;
-  --border-hover-color: #64a5db;
-  --bg-active-color: #6daadd;
-  --border-active-color: #6daadd;
-  --focus-visible-border-color: black;
-  --focus-visible-outline-color: #4995d5;
-  --focus-visible-boxshadow-color: black;
+  --text-color: var(--sg-danger-text);
+  --bg-color: var(--sg-danger);
+  --bg-hover-color: color-mix(in oklab, var(--sg-danger), var(--sg-danger-contrast) 15%);
+  --border-hover-color: color-mix(in oklab, var(--sg-danger), var(--sg-danger-contrast) 15%);
+  --bg-active-color: color-mix(in oklab, var(--sg-danger), var(--sg-danger-contrast) 20%);
+  --border-active-color: color-mix(in oklab, var(--sg-danger), var(--sg-danger-contrast) 20%);
+  --focus-visible-border-color: var(--sg-danger-text);
+  --focus-visible-outline-color: var(--sg-danger);
+  --focus-visible-boxshadow-color: var(--sg-danger-text);
 }
 
 .sg-button-group > .btn-danger {
@@ -3625,16 +3780,15 @@ legend {
 }
 
 .sg-button-light {
-  --text-color: black;
-  --bg-color: #f8f9fa;
-  --border-color: #f8f9fa;
-  --bg-hover-color: #f9fafb;
-  --border-hover-color: #f9fafb;
-  --bg-active-color: #f9fafb;
-  --border-active-color: #f9fafb;
-  --focus-visible-border-color: black;
-  --focus-visible-outline-color: #f8f9fa;
-  --focus-visible-boxshadow-color: black;
+  --text-color: var(--sg-light-text);
+  --bg-color: var(--sg-light);
+  --bg-hover-color: color-mix(in oklab, var(--sg-light), var(--sg-light-contrast) 15%);
+  --border-hover-color: color-mix(in oklab, var(--sg-light), var(--sg-light-contrast) 15%);
+  --bg-active-color: color-mix(in oklab, var(--sg-light), var(--sg-light-contrast) 20%);
+  --border-active-color: color-mix(in oklab, var(--sg-light), var(--sg-light-contrast) 20%);
+  --focus-visible-border-color: var(--sg-light-text);
+  --focus-visible-outline-color: var(--sg-light);
+  --focus-visible-boxshadow-color: var(--sg-light-text);
 }
 
 .sg-button-group > .btn-light {
@@ -3643,16 +3797,15 @@ legend {
 }
 
 .sg-button-dark {
-  --text-color: white;
-  --bg-color: #212529;
-  --border-color: #212529;
-  --bg-hover-color: #1c1f23;
-  --border-hover-color: #1c1f23;
-  --bg-active-color: #1a1e21;
-  --border-active-color: #1a1e21;
-  --focus-visible-border-color: white;
-  --focus-visible-outline-color: #212529;
-  --focus-visible-boxshadow-color: white;
+  --text-color: var(--sg-dark-text);
+  --bg-color: var(--sg-dark);
+  --bg-hover-color: color-mix(in oklab, var(--sg-dark), var(--sg-dark-contrast) 15%);
+  --border-hover-color: color-mix(in oklab, var(--sg-dark), var(--sg-dark-contrast) 15%);
+  --bg-active-color: color-mix(in oklab, var(--sg-dark), var(--sg-dark-contrast) 20%);
+  --border-active-color: color-mix(in oklab, var(--sg-dark), var(--sg-dark-contrast) 20%);
+  --focus-visible-border-color: var(--sg-dark-text);
+  --focus-visible-outline-color: var(--sg-dark);
+  --focus-visible-boxshadow-color: var(--sg-dark-text);
 }
 
 .sg-button-group > .btn-dark {
@@ -3671,42 +3824,59 @@ legend {
   flex: 1 1 auto;
 }
 
-.sg-button-group > :not(.sg-button-check:first-child) + .sg-button, .sg-button-group > .sg-button-group:not(:first-child) {
-  margin-left: -1px;
-}
-.sg-button-group > .sg-button:not(:last-child), .sg-button-group > .sg-button-group:not(:last-child) > .sg-button {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.sg-button-group > .sg-button:nth-child(n+3), .sg-button-group > :not(.sg-button-check) + .sg-button, .sg-button-group > .sg-button-group:not(:first-child) > .sg-button {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+/*
+.sg-button-group {
+    // Prevent double borders when buttons are next to each other
+    > :not(.sg-button-check:first-child) + .sg-button, > .sg-button-group:not(:first-child) {
+        margin-left: -1px;
+    }
+
+    // Reset rounded corners
+    > .sg-button:not(:last-child), > .sg-button-group:not(:last-child) > .sg-button {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    // The left radius should be 0 if the button is:
+    // - the "third or more" child
+    // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+    // - part of a btn-group which isn't the first child
+    > .sg-button:nth-child(n + 3), > :not(.sg-button-check) + .sg-button, > .sg-button-group:not(:first-child) > .sg-button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
 }
 
 .sg-button-group-vertical {
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-}
-.sg-button-group-vertical > .sg-button,
-.sg-button-group-vertical > .sg-button-group {
-  width: 100%;
-}
-.sg-button-group-vertical > .sg-button:not(:first-child),
-.sg-button-group-vertical > .sg-button-group:not(:first-child) {
-  margin-top: -1px;
-}
-.sg-button-group-vertical > .sg-button:not(:last-child):not(.dropdown-toggle),
-.sg-button-group-vertical > .sg-button-group:not(:last-child) > .sg-button {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.sg-button-group-vertical > .sg-button ~ .sg-button,
-.sg-button-group-vertical > .sg-button-group:not(:first-child) > .sg-button {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+
+
+    > .sg-button,
+    > .sg-button-group {
+        width: 100%;
+    }
+
+    > .sg-button:not(:first-child),
+    > .sg-button-group:not(:first-child) {
+        margin-top: -1px;
+    }
 
+    // Reset rounded corners
+    > .sg-button:not(:last-child):not(.dropdown-toggle),
+    > .sg-button-group:not(:last-child) > .sg-button {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    > .sg-button ~ .sg-button,
+    > .sg-button-group:not(:first-child) > .sg-button {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+  }
+*/
 .dropup,
 .dropend,
 .dropdown,
@@ -3717,23 +3887,24 @@ legend {
 }
 
 .sg-dropdown {
-  --sg-dropdown-list-bg: ${$sg-dropdown-list-bg};
+  --dropdown-list-bg: var(--sg-dropdown-list-bg);
+  --dropdown-interaction-contrast: white;
 }
 
 .sg-dropdown-list {
-  --sg-dropdown-list-bg: #343a40;
+  --dropdown-list-bg: var(--sg-dropdown-list-bg);
   position: absolute;
-  z-index: 1020;
+  z-index: var(--sg-zindex-dropdown);
   display: none;
   min-width: 10rem;
   padding: 0;
   margin: 0;
   text-align: left;
   list-style: none;
-  background-color: #212529;
+  background-color: var(--sg-body-bg);
   color: white;
   background-clip: padding-box;
-  border: 2px outset color-mix(in oklab, #212529, white 60%);
+  border: 2px outset color-mix(in oklab, var(--sg-body-bg), currentColor 60%);
 }
 
 .sg-dropdown-list.show {
@@ -3804,11 +3975,8 @@ legend {
   color: inherit;
   border: 2px solid transparent;
 }
-.sg-dropdown-item.active, .sg-dropdown-item:active {
-  background-color: #2a2e33;
-}
 .sg-dropdown-item.disabled, .sg-dropdown-item:disabled {
-  background-color: #52585d;
+  background-color: color-mix(in oklab, var(--sg-dropdown-list-bg), currentColor 20%);
   opacity: 0.5;
 }
 .sg-dropdown-item.sg-dropdown-item-visual-focus {
@@ -3817,10 +3985,10 @@ legend {
   border-top: 1px solid white;
   border-bottom: 1px solid white;
   */
-  background-color: color-mix(in oklab, rgb(26, 27, 29), white 20%);
+  background-color: color-mix(in oklab, var(--sg-dropdown-list-bg), white 20%);
 }
 .sg-dropdown-item.sg-dropdown-item-visual-focus:active {
-  background-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  background-color: color-mix(in oklab, var(--sg-dropdown-list-bg), white 25%);
 }
 
 a.sg-dropdown-item {
@@ -3835,7 +4003,7 @@ a.sg-dropdown-item {
 .sg-form-floating {
   position: relative;
   --height: calc(3rem + 2px);
-  --text-color: white;
+  --text-color: var(--sg-input-text-color);
 }
 .sg-form-floating > .sg-form-control, .sg-form-floating > .sg-form-control-plaintext, .sg-form-floating > .sg-form-select, .sg-form-floating > .sg-form-select-tag {
   height: var(--height);
@@ -3883,12 +4051,12 @@ a.sg-dropdown-item {
 }
 
 .sg-form-check {
-  --input-background-color: rgb(26, 27, 29);
-  --input-border-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
-  --input-border-color-focus: rgb(252, 95, 95);
-  --input-border-color-invalid: hsl(48, 75%, 52%);
+  --input-background-color: var(--sg-input-background-color);
+  --input-border-color: color-mix(in oklab, var(--input-background-color), currentColor 25%);
+  --input-border-color-focus: var(--sg-input-border-color-focus);
+  --input-border-color-invalid: var(--sg-input-border-color-invalid);
   display: block;
-  min-height: 1.4em;
+  min-height: var(--sg-input-line-height);
   padding-bottom: 0.5rem;
 }
 .sg-form-check .sg-form-check-input {
@@ -3897,66 +4065,63 @@ a.sg-dropdown-item {
 
 .sg-form-check-reverse {
   display: block;
-  min-height: 1.4em;
-  padding-right: 1.4em;
+  min-height: var(--sg-input-line-height);
+  padding-right: var(--sg-input-line-height);
   padding-bottom: 0.5rem;
   text-align: right;
 }
 .sg-form-check-reverse .sg-form-check-input {
   float: right;
-  margin-right: -1.4em;
+  margin-right: calc(var(--sg-input-line-height) * -1);
   margin-left: 0;
 }
 
-/*
-@media (prefers-color-scheme: dark) {
-  .sg-form-check {
-    --input-background-color: #ffffff;
-    --input-border-color: color-mix(in oklab, white, rgb(26, 27, 29) 25%);
-    --input-border-color-focus: color-mix(in oklab, rgb(252, 95, 95), black 25%);
-    --input-border-color-invalid: color-mix(in oklab, hsl(48, 75%, 52%), black 25%);
-  }
-
-}
-  */
 .sg-form-check-input {
+  --size: calc(var(--sg-input-line-height) - 2px);
+  position: relative;
   margin-right: 1ch;
-  width: calc(1.4em - 2px);
-  height: calc(1.4em - 2px);
+  width: calc(var(--sg-input-line-height) - 2px);
+  height: calc(var(--sg-input-line-height) - 2px);
+  display: grid;
   background-color: var(--input-background-color);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   appearance: none;
   print-color-adjust: exact;
-  border: 2px outset var(--input-border-color);
+  border: var(--sg-input-border-width) var(--sg-input-border-style) var(--input-border-color);
+  --indicator: none;
+  --indicator-bg-color: var(--input-border-color-focus);
+  --indicator-height: 100%;
 }
 .sg-form-check-input[type=checkbox] {
-  border-radius: 0;
+  border-radius: var(--input-border-radius);
   background-clip: padding-box;
 }
 .sg-form-check-input[type=checkbox]:indeterminate {
-  background-color: var(--input-border-color-focus);
-  border-color: var(--input-border-color-focus);
-  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='rgb(26, 27, 29)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
+  --indicator: "";
+  --indicator-bg-color: var(--input-border-color-focus);
+  --indicator-height: 100%;
+  --clip-path: rect(34.375% 84.375% 65.625% 15.625%);
 }
 .sg-form-check-input[type=radio] {
   border-radius: 50%;
 }
 .sg-form-check-input[type=color] {
+  color: inherit;
   width: 3em;
-  height: calc(2.15em + 4px);
-  padding: 0.375em;
+  height: var(--sg-input-height);
+  padding: var(--sg-input-padding-x);
 }
 .sg-form-check-input[type=color]:not(:disabled):not([readonly]) {
   cursor: pointer;
 }
 .sg-form-check-input[type=color]::-moz-color-swatch {
-  border: 0 !important;
-  border-radius: 0;
+  border: 0;
+  border-radius: var(--sg-input-border-radius);
 }
 .sg-form-check-input[type=color]::-webkit-color-swatch {
-  border-radius: 0;
+  border-radius: var(--sg-input-border-radius);
 }
 .sg-form-check-input:active {
   filter: brightness(90%);
@@ -3966,18 +4131,43 @@ a.sg-dropdown-item {
   outline: 0;
   box-shadow: 0;
 }
+.sg-form-check-input::after {
+  content: var(--indicator);
+  box-sizing: border-box;
+  border-radius: inherit;
+  display: block;
+  position: absolute;
+  align-self: center;
+  justify-self: center;
+  height: var(--indicator-height);
+  aspect-ratio: 1;
+  background-color: var(--indicator-bg-color);
+  clip-path: var(--clip-path, circle(25% at 50% 50%));
+  transform-origin: center;
+}
+.sg-form-check-input:checked {
+  --indicator: "";
+}
 .sg-form-check-input:checked[type=checkbox] {
-  background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><polygon style='fill:rgb(252, 95, 95);' points='11.941,28.877 0,16.935 5.695,11.24 11.941,17.486 26.305,3.123 32,8.818'/></svg>");
+  --clip-path: shape(
+      from 3.125% 64.453%,
+      line to 40.625% 93.75%,
+      line to 96.875% 21.753%,
+      line to 79.638% 8.285%,
+      line to 36.856% 63.044%,
+      line to 16.594% 47.216%,
+  close);
 }
 .sg-form-check-input:checked[type=radio] {
-  background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='-4 -4 8 8'><circle r='2' fill='rgb(252, 95, 95)' /></svg>");
+  --clip-path: none;
+  --indicator-height: 70%;
 }
 .sg-form-check-input:disabled, .sg-form-check-input .disabled {
   --input-background-color: rgba(255, 255, 255, 0.04);
-  --input-text-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
+  --input-text-color: color-mix(in oklab, var(--sg-input-placeholder-color), white 40%);
   cursor: not-allowed;
   filter: none;
-  opacity: 0.5;
+  opacity: 1;
 }
 .sg-form-check-input[disabled] ~ .form-check-label, .sg-form-check-input:disabled ~ .form-check-label {
   cursor: default;
@@ -3995,21 +4185,27 @@ a.sg-dropdown-item {
 }
 
 .sg-form-switch .sg-form-check-input {
-  width: 2em;
+  width: var(--sg-form-switch-width);
   margin-right: 1ch;
-  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='color-mix(in oklab, rgb(26, 27, 29), white 25%)'/></svg>");
   background-position: left center;
-  border-radius: 2em;
-  transition: background-position 0.15s ease-in-out;
+  border-radius: var(--sg-form-switch-width);
+  --indicator: "";
 }
 .sg-form-switch .sg-form-check-input:focus-visible {
   border-color: var(--input-border-color-focus);
   outline: 0;
   box-shadow: 0;
 }
-.sg-form-switch .sg-form-check-input:checked {
-  background-position: right center;
-  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(252, 95, 95)'/></svg>");
+.sg-form-switch .sg-form-check-input::after {
+  transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
+  left: 10%;
+  --clip-path: none;
+  --indicator-bg-color: var(--input-border-color);
+  --indicator-height: 70%;
+}
+.sg-form-switch .sg-form-check-input:checked::after {
+  left: 50%;
+  --indicator-bg-color: var(--input-border-color-focus);
 }
 
 .sg-form-check-border {
@@ -4066,10 +4262,15 @@ a.sg-dropdown-item {
 }
 .sg-input-group-grid > .sg-form-check {
   position: relative;
+  flex: 0 0 auto;
+  padding-bottom: 0;
+  width: 1%;
+  min-width: fit-content;
   padding-bottom: 0;
 }
 .sg-input-group-grid > .sg-form-check > .sg-form-check-label {
-  display: block;
+  height: 100%;
+  grid-template-rows: 1fr;
 }
 .sg-input-group-grid > .sg-form-check .sg-form-check-input {
   margin: 0;
@@ -4078,41 +4279,44 @@ a.sg-dropdown-item {
   aspect-ratio: 1;
 }
 .sg-input-group-grid > .sg-form-check span {
+  scrollbar-gutter: stable;
   display: flex;
   flex: 0 1 auto;
   overflow: auto;
-  width: fit-content;
-  max-width: 8rem;
+  width: 100%;
+  min-width: 5em;
+  max-width: 9em;
   align-items: center;
   text-align: center;
   font-size: 0.85rem;
-  padding: 0.375em 0.5em;
+  padding: var(--sg-input-padding-x) var(--sg-input-padding-y);
   white-space: nowrap;
-  background-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
-  color: white;
-  border: 2px outset color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  background-color: var(--sg-input-border-color);
+  color: var(--sg-input-text-color);
+  border: var(--sg-input-border-width) var(--sg-input-border-style) var(--input-border-color);
   border-right-width: 0;
-  border-radius: 0;
+  border-radius: var(--sg-input-border-radius);
 }
 
 .sg-form-control {
-  --input-text-color: white;
-  --input-background-color: rgb(26, 27, 29);
-  --input-border-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
-  --input-border-color-focus: rgb(252, 95, 95);
-  --input-border-color-invalid: hsl(48, 75%, 52%);
-  --input-disabled-color: #e9ecef;
-  --input-placeholder-color: rgba(255, 255, 255, 0.336);
+  --input-text-color: currentColor;
+  --input-background-color: var(--sg-input-background-color);
+  --input-border-color: var(--sg-input-border-color);
+  --input-border-color-focus: var(--sg-input-border-color-focus);
+  --input-border-color-invalid: var(--sg-input-border-color-invalid);
+  --input-disabled-color: var(--sg-input-disabled-color);
+  --input-placeholder-color: var(--sg-input-placeholder-color);
+  line-height: var(--sg-input-line-height);
   position: relative;
   display: block;
   width: 100%;
   min-width: min(5rem, 100%);
-  padding: 0.375em 0.5em;
+  padding: var(--sg-input-padding-x) var(--sg-input-padding-y);
   color: var(--input-text-color);
   background-color: var(--input-background-color);
-  border: 2px outset var(--input-border-color);
+  border: var(--sg-input-border-width) var(--sg-input-border-style) var(--input-border-color);
   border-radius: 0;
-  caret-color: white;
+  caret-color: currentColor;
   transition: border-color 0.15s ease-in-out;
 }
 .sg-form-control[type=file] {
@@ -4127,7 +4331,7 @@ a.sg-dropdown-item {
   box-shadow: 0;
 }
 .sg-form-control::-webkit-date-and-time-value {
-  height: 1.4em;
+  height: var(--sg-input-line-height);
 }
 .sg-form-control::placeholder {
   color: var(--input-placeholder-color);
@@ -4135,20 +4339,20 @@ a.sg-dropdown-item {
 }
 .sg-form-control:disabled, .sg-form-control .disabled {
   --input-background-color: rgba(255, 255, 255, 0.04);
-  --input-placeholder-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
-  --input-text-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
+  --input-placeholder-color: color-mix(in oklab, var(--sg-input-placeholder-color), white 40%);
+  --input-text-color: color-mix(in oklab, var(--sg-input-placeholder-color), white 40%);
   cursor: not-allowed;
   opacity: 1;
 }
 .sg-form-control::file-selector-button {
-  padding: 0.375em 0.5em;
-  margin: -0.375em -0.5em;
-  margin-inline-end: 0.375em;
+  padding: var(--sg-input-padding-x) var(--sg-input-padding-y);
+  margin: calc(-1 * var(--sg-input-padding-x)) calc(-1 * var(--sg-input-padding-y));
+  margin-inline-end: var(--sg-input-padding-x);
   pointer-events: none;
   border-color: inherit;
   border-style: solid;
   border-width: 0;
-  border-inline-end-width: 2px;
+  border-inline-end-width: var(--sg-input-border-width);
   border-radius: 0;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
@@ -4163,16 +4367,16 @@ a.sg-dropdown-item {
 .sg-form-control-plaintext {
   display: block;
   width: 100%;
-  padding: 0.375em 0;
+  padding: var(--sg-input-padding-x) 0;
   margin-bottom: 0;
   color: var(--input-text-color);
   background-color: transparent;
   border: solid transparent;
-  border-width: 2px 0;
+  border-width: var(--sg-input-border-width) 0;
 }
 
 textarea.sg-form-control {
-  min-height: calc(2.15em + 4px);
+  min-height: var(--sg-input-height);
   margin: 0;
 }
 
@@ -4191,11 +4395,11 @@ textarea.sg-form-control {
 }
 
 .sg-form-control-error {
-  --text-color: hsl(48, 75%, 52%);
+  --text-color: var(--sg-input-border-color-invalid);
 }
 
 .sg-form-control-hint {
-  --text-color: white;
+  --text-color: var(--sg-input-text-color);
 }
 
 .sg-form-control-description {
@@ -4241,15 +4445,23 @@ textarea.sg-form-control {
 }
 
 .sg-form-slider {
-  --slider-height: 1.75rem;
-  --slider-filled-color: rgb(252, 95, 95);
-  --slider-filled-border-color: color-mix(in oklab, rgb(252, 95, 95), black 20%);
-  --slider-empty-color: rgb(26, 27, 29);
-  --slider-empty-border-color: color-mix(in oklab, color-mix(in oklab, rgb(26, 27, 29), white 25%), black 15%);
+  --slider-border-width: var(--sg-input-border-width);
+  --slider-border-style: var(--sg-input-border-style);
+  --slider-border-radius: var(--sg-input-border-radius);
+  --slider-height: var(--sg-slider-height);
+  --slider-thumb-width: var(--sg-slider-thumb-width);
+  --slider-thumb-height: var(--sg-slider-thumb-height);
+  --slider-filled-color: var(--sg-slider-filled-color);
+  --slider-filled-hover-color: color-mix(in oklab, var(--sg-slider-filled-color), black 15%);
+  --slider-filled-border-color: var(--sg-slider-filled-border-color);
+  --slider-filled-border-hover-color: color-mix(in oklab, var(--sg-slider-filled-color), black 35%);
+  --slider-empty-color: var(--sg-slider-empty-color);
+  --slider-empty-hover-color: color-mix(in oklab, var(--sg-slider-empty-color), black 15%);
+  --slider-empty-border-color: var(--sg-slider-empty-border-color);
+  --slider-empty-border-hover-color: color-mix(in oklab, var(--sg-slider-empty-border-color), black 25%);
   --padding-block-fraction: 1/3;
-  --slider-thumb-width: 1.5rem;
-  --slider-thumb-height: 0.5rem;
-  --slider-thumb-border-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  --slider-thumb-bg: var(--sg-input-border-color);
+  --slider-thumb-border-color: var(--sg-input-border-color);
   --filled: 40%;
   display: grid;
   grid-template-columns: var(--filled) auto calc(100% - var(--filled));
@@ -4259,15 +4471,15 @@ textarea.sg-form-control {
   padding-inline: calc(var(--slider-thumb-width) * 0.5);
 }
 .sg-form-slider:hover {
-  --slider-filled-color: color-mix(in oklab, rgb(252, 95, 95), black 15%);
-  --slider-filled-border-color: color-mix(in oklab, rgb(252, 95, 95), black 35%);
-  --slider-empty-color: color-mix(in oklab, rgb(26, 27, 29), black 15%);
-  --slider-empty-border-color: color-mix(in oklab, color-mix(in oklab, rgb(26, 27, 29), white 25%), black 25%);
+  --slider-filled-color: var(--slider-filled-hover-color);
+  --slider-filled-border-color: var(--slider-filled-border-hover-color);
+  --slider-empty-color: var(--slider-empty-hover-color);
+  --slider-empty-border-color: var(--slider-empty-border-hover-color);
 }
 .sg-form-slider .sg-form-slider-filled {
   display: block;
   background-color: var(--slider-filled-color);
-  border: 1px outset var(--slider-filled-border-color);
+  border: var(--slider-border-width) var(--slider-border-style) var(--slider-filled-border-color);
   border-left: none;
   border-right: none;
   height: 100%;
@@ -4282,8 +4494,10 @@ textarea.sg-form-control {
   height: calc(100% * var(--cap-height));
   width: calc(var(--slider-thumb-width) * 0.5);
   background-color: var(--slider-filled-color);
-  border: 1px outset var(--slider-filled-border-color);
+  border: var(--slider-border-width) var(--slider-border-style) var(--slider-filled-border-color);
   border-right: none;
+  border-top-left-radius: var(--slider-border-radius);
+  border-bottom-left-radius: var(--slider-border-radius);
   left: 0;
 }
 .sg-form-slider .sg-form-slider-thumb {
@@ -4296,7 +4510,7 @@ textarea.sg-form-control {
   cursor: grabbing;
 }
 .sg-form-slider .sg-form-slider-thumb:focus-visible {
-  --slider-thumb-border-color: white;
+  --slider-thumb-border-color: currentColor;
 }
 .sg-form-slider .sg-form-slider-thumb::before {
   content: "";
@@ -4306,18 +4520,14 @@ textarea.sg-form-control {
   top: calc(-1 * var(--padding-block-fraction) * 100%);
   height: calc((2 * var(--padding-block-fraction) + 1) * 100%);
   width: var(--slider-thumb-width);
-  background-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
-  border: 2px outset var(--slider-thumb-border-color);
-}
-.sg-form-slider .sg-form-slider-thumb:focus-visible {
-  --focus-outline: 2px outset $danger;
-  outline: 0;
-  box-shadow: none;
+  background-color: var(--slider-thumb-bg);
+  border: var(--slider-border-width) var(--slider-border-style) var(--slider-thumb-border-color);
+  border-radius: var(--slider-border-radius);
 }
 .sg-form-slider .sg-form-slider-empty {
   display: block;
   background-color: var(--slider-empty-color);
-  border: 1px outset var(--slider-empty-border-color);
+  border: var(--slider-border-width) var(--slider-border-style) var(--slider-empty-border-color);
   border-left: none;
   border-right: none;
   height: 100%;
@@ -4332,32 +4542,39 @@ textarea.sg-form-control {
   height: calc(100% * var(--cap-height));
   width: calc(var(--slider-thumb-width) * 0.5);
   background-color: var(--slider-empty-color);
-  border: 1px outset var(--slider-empty-border-color);
+  border: var(--slider-border-width) var(--slider-border-style) var(--slider-empty-border-color);
   border-left: none;
+  border-top-right-radius: var(--slider-border-radius);
+  border-bottom-right-radius: var(--slider-border-radius);
   right: 0;
   z-index: -1;
 }
 
 .sg-form-select-tag {
-  --input-text-color: white;
-  --input-background-color: rgb(26, 27, 29);
-  --input-border-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
-  --input-border-color-focus: rgb(252, 95, 95);
-  --input-border-color-invalid: hsl(48, 75%, 52%);
-  --input-disabled-color: #e9ecef;
+  --input-text-color: var(--sg-input-text-color);
+  --input-background-color: var(--sg-input-background-color);
+  --input-border-color: var(--sg-input-border-color);
+  --input-border-color-focus: var(--sg-input-border-color-focus);
+  --input-border-color-invalid: var(--sg-input-border-color-invalid);
+  --input-border-width: var(--sg-input-border-width);
+  --input-border-style: var(--sg-input-border-style);
+  --input-border-radius: var(--sg-input-border-radius);
+  --input-disabled-color: var(--sg-input-disabled-color);
+  --input-padding-x: var(--sg-input-padding-x);
+  --input-padding-y: var(--sg-input-padding-y);
   position: relative;
   display: block;
   width: 100%;
-  padding-block: 0.375em;
-  padding-inline: 0.5em 1.5em;
+  padding-block: var(--input-padding-x);
+  padding-inline: var(--input-padding-y) calc(3 * var(--input-padding-y));
   color: var(--input-text-color);
   background-color: var(--input-background-color);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
-  background-position: right 0.375em center;
+  background-position: right var(--input-padding-x) center;
   background-size: 1em 0.75em;
-  border: 2px outset var(--input-border-color);
-  border-radius: 0;
+  border: var(--input-border-width) var(--input-border-style) var(--input-border-color);
+  border-radius: var(--input-border-radius);
   appearance: none;
 }
 .sg-form-select-tag:focus-visible, .sg-form-select-tag:focus {
@@ -4366,13 +4583,13 @@ textarea.sg-form-control {
   box-shadow: 0;
 }
 .sg-form-select-tag[multiple], .sg-form-select-tag[size]:not([size="1"]) {
-  padding-right: 0.375em;
+  padding-right: var(--input-padding-x);
   background-image: none;
 }
 .sg-form-select-tag:disabled, .sg-form-select-tag .disabled {
   --input-background-color: rgba(255, 255, 255, 0.04);
-  --input-placeholder-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
-  --input-text-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
+  --input-placeholder-color: color-mix(in oklab, var(--input-placeholder-color), white 40%);
+  --input-text-color: color-mix(in oklab, var(--input-placeholder-color), white 40%);
   cursor: not-allowed;
   opacity: 1;
 }
@@ -4382,59 +4599,74 @@ textarea.sg-form-control {
 }
 
 .sg-form-select {
-  --input-text-color: white;
-  --input-background-color: rgb(26, 27, 29);
-  --input-border-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
-  --input-border-color-focus: rgb(252, 95, 95);
-  --input-border-color-invalid: hsl(48, 75%, 52%);
-  --input-border-width: 2px;
-  --input-disabled-color: #e9ecef;
+  --input-text-color: var(--sg-input-text-color);
+  --input-background-color: var(--sg-input-background-color);
+  --input-border-color: var(--sg-input-border-color);
+  --input-border-color-focus: var(--sg-input-border-color-focus);
+  --input-border-color-invalid: var(--sg-input-border-color-invalid);
+  --input-border-width: var(--sg-input-border-width);
+  --input-border-style: var(--sg-input-border-style);
+  --input-border-radius: var(--sg-input-border-radius);
+  --input-disabled-color: var(--sg-input-disabled-color);
+  --input-placeholder-color: var(--sg-input-placeholder-color);
+  --input-padding-x: var(--sg-input-padding-x);
+  --input-padding-y: var(--sg-input-padding-y);
   position: relative;
-  display: block;
-  height: calc(1.4rem + 0.375em + 0.375em);
-  min-width: min(12rem, 100%);
-  max-width: 15rem;
-  padding-block: 0.375em;
-  padding-inline: 0.5em 1.5em;
+  line-height: 1.4em;
+  min-width: min(12em, 100%);
+  max-width: 15em;
+  padding-block: var(--input-padding-x);
+  padding-inline: var(--input-padding-y) calc(3 * var(--input-padding-y));
   color: var(--input-text-color);
   background-color: var(--input-background-color);
+  /*
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%236e7b80ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2 5 6 6 6-6"/></svg>');
+  //background-image: ("./down_caret.svg");
   background-repeat: no-repeat;
-  background-position: right 0.375em center;
+  background-position: right $input-padding-x center;
   background-size: 1em 0.75em;
-  border: 2px outset var(--input-border-color);
-  border-radius: 0;
+  */
+  border: var(--input-border-width) var(--input-border-style) var(--input-border-color);
+  border-radius: var(--input-border-radius);
   font-size: 0.85rem;
-  line-height: 1.4;
 }
 .sg-form-select span {
   pointer-events: visible;
-  display: inline-block;
+  display: grid;
   width: 100%;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: inherit;
+  line-height: inherit;
+}
+.sg-form-select span::after {
+  content: "";
+  opacity: 0.75;
+  position: absolute;
+  right: var(--input-padding-x);
+  align-self: center;
+  display: block;
+  height: 1.25em;
+  width: 1.25em;
+  background-color: currentColor;
+  clip-path: shape(from 3.226% 43.032%, line to 51.613% 70.968%, line to 96.774% 43.032%, line to 88.71% 29.065%, line to 51.613% 52.903%, line to 11.29% 29.065%);
 }
 .sg-form-select:focus-within {
   border-color: var(--input-border-color-focus);
   outline: 0;
   box-shadow: 0;
 }
-.sg-form-select .disabled {
-  --input-background-color: rgba(255, 255, 255, 0.04);
-  --input-placeholder-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
-  --input-text-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
-}
 
 .sg-select-control {
   text-align: start;
   cursor: default;
 }
-.sg-select-control:disabled {
+.sg-select-control:disabled, .sg-select-control .disabled {
   --input-background-color: rgba(255, 255, 255, 0.04);
-  --input-placeholder-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
-  --input-text-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
+  --input-placeholder-color: color-mix(in oklab, var(--input-placeholder-color), white 40%);
+  --input-text-color: color-mix(in oklab, var(--input-placeholder-color), white 40%);
   cursor: not-allowed;
   opacity: 1;
 }
@@ -4450,7 +4682,7 @@ textarea.sg-form-control {
   color: inherit;
 }
 .sg-select-input[multiple], .sg-select-input[size]:not([size="1"]) {
-  padding-right: 0.375em;
+  padding-right: var(--input-padding-x);
   background-image: none;
 }
 .sg-select-input:disabled {
@@ -4463,37 +4695,37 @@ textarea.sg-form-control {
   outline: none;
 }
 .sg-select-input::placeholder {
-  color: rgba(255, 255, 255, 0.336);
+  color: var(--input-placeholder-color);
   opacity: 1;
 }
 
 .sg-select-list {
-  --input-text-color: white;
-  --input-background-color: rgb(26, 27, 29);
-  --input-border-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
-  --input-border-color-focus: rgb(252, 95, 95);
-  --input-border-color-invalid: hsl(48, 75%, 52%);
-  --input-border-width: 2px;
-  --input-disabled-color: #e9ecef;
-  --bg-color: rgb(26, 27, 29);
-  --txt-color: black;
-  --z-index: 1020;
+  --input-text-color: var(--sg-input-text-color);
+  --input-background-color: var(--sg-input-background-color);
+  --input-border-color: var(--sg-input-border-color);
+  --input-border-color-focus: var(--sg-input-border-color-focus);
+  --input-border-color-invalid: var(--sg-input-border-color-invalid);
+  --input-border-width: var(--sg-input-border-width);
+  --input-border-style: var(--sg-input-border-style);
+  --input-border-radius: var(--sg-input-border-radius);
+  --input-disabled-color: var(--sg-input-disabled-color);
+  --input-placeholder-color: var(--sg-input-placeholder-color);
+  --input-padding-x: var(--sg-input-padding-x);
+  --input-padding-y: var(--sg-input-padding-y);
+  --z-index: var(--sg-zindex-dropdown);
   overflow-y: auto;
-  background-color: var(--bg-color);
-  color: inherit;
+  background-color: var(--input-background-color);
+  color: var(--input-text-color);
   position: absolute;
-  top: calc(100% + var(--input-border-width) * 1px);
-  left: 0;
-  width: 100%;
   padding: 0;
-  border-radius: 0;
-  border: 2px outset color-mix(in oklab, #212529, white 60%);
+  border-radius: var(--input-border-radius);
+  border: var(--input-border-width) var(--input-border-style) color-mix(in oklab, var(--input-border-color), white 40%);
   list-style-type: none;
   z-index: var(--z-index);
 }
 
 .sg-select-list-item {
-  --z-index: 1020;
+  --z-index: var(--sg-zindex-dropdown);
   --padding-right: 3ex;
   position: relative;
   padding: 0.25rem 0.5rem;
@@ -5388,18 +5620,18 @@ textarea.sg-form-control {
   align-items: center;
   text-align: center;
   font-size: 0.85rem;
-  padding: 0.375em 0.5em;
+  padding: var(--sg-input-padding-x) var(--sg-input-padding-y);
   white-space: nowrap;
-  background-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
-  color: white;
-  border: 2px outset color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  background-color: var(--sg-input-border-color);
+  color: var(--sg-input-text-color);
+  border: var(--sg-input-border-width) outset var(--sg-input-border-color);
   border-right-width: 0;
-  border-radius: 0;
+  border-radius: var(--sg-input-border-radius);
 }
 
 .sg-form-control + .sg-input-group-text {
   border-left-width: 0;
-  border-right-width: 2px;
+  border-right-width: var(--sg-input-border-width);
 }
 
 .sg-input-group-grid {
@@ -5471,7 +5703,7 @@ textarea.sg-form-control {
   }
 }
 .sg-modal-tag::backdrop {
-  z-index: 1060;
+  z-index: var(--sg-zindex-modal);
   background: hsl(0, 0%, 0%);
   opacity: 0.5;
   animation-name: fade-in-backdrop;
@@ -5481,7 +5713,7 @@ textarea.sg-form-control {
 }
 
 .sg-modal-tag.close::backdrop {
-  z-index: 1060;
+  z-index: var(--sg-zindex-modal);
   background: transparent;
   opacity: 0;
   animation-name: fade-out-backdrop;
@@ -5508,17 +5740,17 @@ textarea.sg-form-control {
 }
 .sg-modal-tag {
   --height: fit-content;
-  z-index: 1061;
+  --background-color: var(--sg-body-bg);
+  z-index: calc(var(--sg-zindex-modal) + 1);
   padding: 0;
   top: 10%;
   height: var(--height);
   max-height: 80%;
   margin-right: auto;
   margin-left: auto;
-  color: white;
-  background-color: #212529;
+  background-color: var(--background-color);
   background-clip: padding-box;
-  border: 2px outset color-mix(in oklab, #212529, currentColor 60%);
+  border: 2px outset color-mix(in oklab, var(--background-color), currentColor 60%);
   flex-direction: column;
   overflow: auto;
 }
@@ -5582,7 +5814,7 @@ textarea.sg-form-control {
 }
 .sg-modal-header .sg-button-close {
   padding: 0.5rem 0.5rem;
-  margin: -0.25rem -0.25rem -0.25rem auto;
+  align-self: flex-start;
 }
 
 .sg-modal-title {
@@ -5593,7 +5825,7 @@ textarea.sg-form-control {
   grid-row: body;
   position: relative;
   padding: 1rem;
-  background-color: color-mix(in oklab, #212529, currentColor 5%);
+  background-color: color-mix(in oklab, var(--background-color), currentColor 5%);
   min-height: fit-content;
   overflow: auto;
 }
@@ -5609,82 +5841,45 @@ textarea.sg-form-control {
   align-items: center;
   justify-content: flex-end;
   padding: 0.75rem;
-  background-color: #212529;
+  background-color: var(--background-color);
   gap: 0.5rem;
 }
 
 .sg-modal-sm {
-  max-width: 300px;
+  max-width: 17rem;
 }
 
 .sg-modal-md {
-  max-width: 500px;
+  max-width: 28rem;
 }
 
 .sg-modal-lg {
-  max-width: 700px;
+  max-width: 39rem;
 }
 
-@media (max-width: 324px) {
+@media (max-width: 18rem) {
   .sg-modal-tag {
     margin: auto;
     top: 0;
     width: 100%;
   }
 }
-@media (min-width: 325px) and (max-width: 575px) {
+@media (min-width: 18.001em) and (max-width: 32rem) {
   .sg-modal-md, .sg-modal-lg {
-    max-width: 300px;
+    max-width: 17rem;
   }
 }
-@media (min-width: 576px) and (max-width: 767px) {
+@media (min-width: 32.001rem) and (max-width: 43rem) {
   .sg-modal-lg {
-    max-width: 500px;
+    max-width: 28rem;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 43.001rem) {
   .sg-modal-lg {
-    max-width: 700px;
+    max-width: 39rem;
   }
 }
 /*
-@each $breakpoint, $value in $grid-breakpoints {
-  @if $breakpoint == "xs" {
-    @media (max-width: 575px) {
-      .sg-modal-tag {
-        margin: 0.5rem auto;
-      }
-    }
-  }
-  @if $breakpoint == "sm" {
-    @media (min-width: 576px) {
-      .sg-modal-tag {
-        max-width: 500px;
-        margin-right: auto;
-        margin-left: auto;
-      }
-      .sg-modal-sm {
-        max-width: 300px
-      }
-    }
-  }
-  @else if $breakpoint == "lg" {
-    @media (min-width: 992px) {
-      .modal-lg, .modal-xl {
-        max-width: 800px;
-      }
-    }
-  }
-  @else if $breakpoint == "xl" {
-    @media (min-width: 1200px) {
-      .modal-xl {
-        max-width: 1140px;
-      }
-    }
-  }
-}
-*/
-/*
 .sg-modal-open {
   overflow: hidden;
 }
@@ -5955,18 +6150,18 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 }
 
 .sg-navbar {
-  --sg-navbar-bg: rgb(26, 27, 29);
-  --sg-navbar-text-color: white;
-  --sg-navbar-link-color: rgb(252, 95, 95);
-  --sg-navbar-hover-color: white;
-  --sg-navbar-disabled-color: rgb(180, 180, 180);
-  --sg-navbar-active-color: white;
-  --sg-navbar-zindex: $zindex-navbar;
+  --sg-navbar-bg: var(--sg-nav-color);
+  --sg-navbar-text-color: var(--sg-link-hover-color);
+  --sg-navbar-link-color: var(--sg-link-color);
+  --sg-navbar-hover-color: var(--sg-link-hover-color);
+  --sg-navbar-disabled-color: var(--sg-link-disable-color);
+  --sg-navbar-active-color: var(--sg-link-hover-color);
+  --sg-navbar-zindex: var(--sg-zindex-navbar);
   background-color: var(--sg-navbar-bg);
   background: linear-gradient(71deg, var(--sg-navbar-bg), color-mix(in srgb, var(--sg-navbar-bg), var(--sg-navbar-hover-color) 5%), var(--sg-navbar-bg), color-mix(in srgb, var(--sg-navbar-bg), var(--sg-navbar-hover-color) 5%), var(--sg-navbar-bg));
   width: 100%;
   min-height: fit-content;
-  z-index: 1010;
+  z-index: var(--sg-zindex-navbar);
   box-sizing: border-box;
   border: 2px outset color-mix(in srgb, white 5%, var(--sg-navbar-bg));
   border-bottom: 2px solid var(--sg-navbar-link-color);
@@ -6007,9 +6202,9 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 .sg-navbar-nav {
   --nav-link-padding-x: 0;
   --nav-link-padding-y: 0.5rem;
-  --nav-link-color: $sg-link-color;
-  --nav-link-hover-color: $sg-link-hover-color;
-  --nav-link-disabled-color: $sg-link-disable-color;
+  --nav-link-color: var(--sg-link-color);
+  --nav-link-hover-color: var(--sg-link-hover-color);
+  --nav-link-disabled-color: var(--sg-link-disable-color);
   margin: 0;
   display: flex;
   flex-direction: row;
@@ -6080,7 +6275,7 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1050;
+  z-index: var(--sg-zindex-modal-backdrop);
   width: 100vw;
   height: 100vh;
   background-color: black;
@@ -6118,7 +6313,7 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1060;
+  z-index: var(--sg-zindex-modal);
   display: block;
   width: 100%;
   height: 100%;
@@ -6128,7 +6323,7 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 }
 
 .sg-offCanvas-dialog {
-  z-index: 1061;
+  z-index: calc(var(sg--zindex-modal) + 1);
   position: relative;
   width: auto;
   max-height: 100vh;
@@ -6171,9 +6366,8 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   flex-direction: column;
   max-width: 100%;
   max-height: 100%;
-  color: white;
   pointer-events: auto;
-  background-color: #2e3236;
+  background-color: var(--sg-offCanvas-background-color);
   background-clip: padding-box;
   outline: 0;
   transition: transform 0.3s ease-in-out;
@@ -6197,14 +6391,14 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   top: 0;
   left: 0;
   width: var(--sg-offcanvas-size);
-  border-right: 1px solid #2e3236;
+  border-right: 1px solid var(--sg-offCanvas-background-color);
   transform: translateX(-100%);
 }
 .sg-offCanvas-content.sg-offcanvas-end {
   top: 0;
   right: 0;
   width: var(--sg-offcanvas-size);
-  border-left: 1px solid #2e3236;
+  border-left: 1px solid var(--sg-offCanvas-background-color);
   transform: translateX(100%);
 }
 .sg-offCanvas-content.sg-offcanvas-top {
@@ -6213,7 +6407,7 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   left: 0;
   height: var(--sg-offcanvas-size);
   max-height: 100%;
-  border-bottom: 1px solid #2e3236;
+  border-bottom: 1px solid var(--sg-offCanvas-background-color);
   transform: translateY(-100%);
 }
 .sg-offCanvas-content.sg-offcanvas-bottom {
@@ -6221,7 +6415,7 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   left: 0;
   height: var(--sg-offcanvas-size);
   max-height: 100%;
-  border-top: 1px solid #2e3236;
+  border-top: 1px solid var(--sg-offCanvas-background-color);
   transform: translateY(100%);
 }
 .sg-offCanvas-content.sg-slide-in {
@@ -6239,8 +6433,8 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   padding: 1em;
 }
 .sg-offCanvas-content .sg-offCanvas-header .sg-button-close {
+  align-self: flex-start;
   padding: 0.5em 0.5em;
-  margin: -0.25em -0.25em -0.25em auto;
 }
 .sg-offCanvas-content .sg-offCanvas-title {
   margin-bottom: 0;
@@ -6249,72 +6443,29 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   position: relative;
   flex: 1 1 auto;
   padding: 1em;
-  background-color: #43474a;
+  background-color: color-mix(in oklab, var(--sg-offCanvas-background-color), white 10%);
   overflow: auto;
 }
 
-/*
-$offCanvas-lg: 800px !default;
-$offCanvas-xl: 1140px !default;
-
-$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px ) !default;
-$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
-
-@each $breakpoint, $value in $grid-breakpoints {
-  @if $breakpoint == "xs" {
-    @media (max-width: 575px) {
-      .sg-offCanvas-dialog {
-        margin: 0.5em;
-      }
-    }
-  }
-  @if $breakpoint == "sm" {
-    @media (min-width: 576px) {
-      .sg-offCanvas-dialog {
-        max-width: 500px;
-        margin-right: auto;
-        margin-left: auto;
-      }
-      .sg-offCanvas-sm {
-        max-width: 300px
-      }
-    }
-  }
-  @else if $breakpoint == "lg" {
-    @media (min-width: 992px) {
-      .offCanvas-lg, .offCanvas-xl {
-        max-width: 800px;
-      }
-    }
-  }
-  @else if $breakpoint == "xl" {
-    @media (min-width: 1200px) {
-      .offCanvas-xl {
-        max-width: 1140px;
-      }
-    }
-  }
-}
-*/
 .sg-overlay-wrapper {
   max-width: 100%;
   max-height: 100%;
-  z-index: 1020;
+  z-index: var(--sg-zindex-popover);
 }
 
 .sg-overlay-arrow {
   --width: 10px;
   --height: 20px;
-  --_arrow-border: white;
+  --_arrow-border: currentColor;
   --_arrow-border-stroke: 2;
-  --_arrow-fill: rgb(26, 27, 29);
+  --_arrow-fill: currentColor;
   overflow: hidden;
   position: relative;
   background-color: var(--_arrow-border);
   clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
   height: var(--height);
   width: var(--width);
-  z-index: 1020;
+  z-index: var(--sg-zindex-popover);
 }
 .sg-overlay-arrow.overlay-position-right {
   transform: rotate(180deg);
@@ -6339,23 +6490,23 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 }
 
 .sg-tooltip-arrow {
-  --_text-color: white;
+  --_text-color: currentColor;
   --_brightness-filter: brightness(66.666666%);
   --width: 10px;
   --height: 20px;
 }
 
 .sg-tooltip-wrapper {
-  --_text-color: white;
-  --_background-color: rgb(26, 27, 29);
+  --_text-color: currentColor;
+  --_background-color: var(--sg-nav-color);
   --_font-size: 0.75rem;
   --_max-width: 12rem;
   --_padding-x: 0.375em;
   --_padding-y: 0.5em;
-  --_border-radius: calc 0;
+  --_border-radius: 0;
   --_border-width: 2px;
   --_border-style: inset;
-  --_border-color: white;
+  --_border-color: var(--_text-color);
   font-size: var(--_font-size);
   display: flex;
   flex-wrap: wrap;
@@ -6364,11 +6515,12 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   color: var(--_text-color);
   background-color: var(--_background-color);
   border: var(--_border-width) var(--_border-style) var(--_border-color);
-  border-radius: --_border-radius;
+  border-radius: var(--_border-radius);
 }
 
 .sg-moveable-popout {
-  --popout-index: 1020;
+  --popout-index: var(--sg-zindex-popover);
+  --header-bg-color: color-mix(in oklab, currentColor 3%, var(--sg-body-bg));
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -6388,8 +6540,8 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   user-select: inherit;
   margin-bottom: 0;
   padding: 0.25em 0.5em;
-  background-color: color-mix(in hsl, white 3%, #212529);
-  border-bottom: 1px solid white;
+  background-color: var(--header-bg-color);
+  border-bottom: 1px solid currentColor;
 }
 .sg-moveable-popout .sg-popout-header > * {
   margin: 0;
@@ -6407,13 +6559,13 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   flex: 1 1 auto;
   padding: 0.5em;
   user-select: inherit;
-  background-color: color-mix(in srgb, white 4%, color-mix(in hsl, white 3%, #212529));
+  background-color: color-mix(in oklab, black 3%, var(--header-bg-color));
 }
 .sg-moveable-popout .sg-popout-footer {
   user-select: inherit;
   padding: 0.25em 0.5em;
-  background-color: color-mix(in hsl, white 3%, #212529);
-  border-top: 1px solid white;
+  background-color: var(--header-bg-color);
+  border-top: 1px solid currentColor;
 }
 .sg-moveable-popout .sg-popout-footer:last-child {
   border-radius: 0 0 0.375em 0.375em;
@@ -6519,7 +6671,7 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   }
 }
 .sg-table {
-  --sg-table-padding: $sg-table-padding;
+  --sg-table-padding: 0.5rem;
   width: 100%;
   margin-bottom: 1rem;
   color: black;
@@ -6527,7 +6679,7 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   border-color: black;
 }
 .sg-table > :not(caption) > * > * {
-  padding: 0.5rem 0.5rem;
+  padding: var(--sg-table-padding);
   background-color: transparent;
   border-bottom-width: 1px;
   box-shadow: inset 0 0 0 9999px transparent;
@@ -6543,14 +6695,14 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   caption-side: top;
 }
 
-.sg-table-sm > :not(caption) > * > * {
-  padding: 0.25rem 0.25rem;
+.sg-table-sm {
+  --sg-table-padding: 0.25rem;
 }
 
 .sg-tabs {
   width: 100%;
   display: grid;
-  grid-template-rows: [control-start] auto [control-end page-start] 100% [page-end];
+  grid-template-rows: [control-start] max-content [control-end page-start] 100% [page-end];
 }
 
 .sg-tabs-controls {
@@ -6560,8 +6712,7 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   position: relative;
   display: flex;
   flex-direction: row;
-  background-color: #212529;
-  height: 2rem;
+  background-color: var(--sg-tab-controls-bg);
   overflow-x: auto;
   scrollbar-width: none;
 }
@@ -6583,11 +6734,11 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 }
 
 .sg-tabs-button {
-  --border-color: #212529;
-  --text-color: rgb(252, 95, 95);
-  --background-color: #212529;
-  --hover-background-color: color-mix(in srgb, black 15%, #212529);
-  --active-background-color: color-mix(in srgb, black 25%, #212529);
+  --border-color: var(--sg-tab-controls-bg);
+  --text-color: var(--sg-tab-button-color);
+  --background-color: var(--sg-tab-controls-bg);
+  --hover-background-color: color-mix(in oklab, black 15%, var(--background-color));
+  --active-background-color: color-mix(in oklab, black 15%, var(--background-color));
   position: relative;
   display: block;
   color: var(--text-color);