@qrsln/lootstrap 24.3.9-beta.0 → 24.3.15-beta.0

package/dist/css/lootstrap.css

@@ -1,8 +1,8 @@
 @charset "UTF-8";
 /*!
- * CSS Compiled on: 2024-03-09
+ * CSS Compiled on: 2024-03-15
  *
- * Lootstrap v24.3.9-beta.0 (https://github.com/krsln/Lootstrap/)
+ * Lootstrap v24.3.15-beta.0 (https://github.com/krsln/Lootstrap/)
  * Copyright 2024 Qrsln.
  * Licensed under MIT (https://github.com/krsln/Lootstrap/blob/master/LICENSE)
 */
@@ -748,17 +748,19 @@ progress {
   --ls-bg-accent-hsl: 217deg,96%,52%;
   --ls-bg-accent: hsl(217, 96%, 52%);
   --ls-fg-accent: hsl(0, 0%, 100%);
-  --ls-bg-surface: hsl(0, 0%, 100%);
-  --ls-fg-surface: hsl(0, 0%, 0%);
+  --ls-fg-default: hsl(0, 0%, 0%);
+  --ls-fg-muted: hsl(213, 11%, 69%);
+  --ls-fg-link: hsl(217, 96%, 52%);
   --ls-bg-body: #f9fafb;
+  --ls-bg-surface: hsl(0, 0%, 100%);
+  --ls-bg-secondary: #fcfcfc;
+  --ls-bg-foremost: #f7f7f7;
+  --ls-bg-header: #f2f2f2;
+  --ls-bg-sub-header: #ededed;
   --ls-border-hsl: 0deg,0%,88%;
   --ls-shadow-hsl: 240deg,7%,18%;
-  --ls-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0))
-}
-.Accent-light {
-  --ls-bg-accent-hsl: 217deg,96%,52%;
-  --ls-bg-accent: hsl(217, 96%, 52%);
-  --ls-fg-accent: hsl(0, 0%, 100%)
+  --ls-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0));
+  color-scheme: light
 }
 .Theme-dark {
   --ls-contrast-hsl: 0deg,0%,100%;
@@ -768,21 +770,23 @@ progress {
   --ls-bg-accent-hsl: 217deg,97%,76%;
   --ls-bg-accent: #87b4fd;
   --ls-fg-accent: hsl(0, 0%, 0%);
-  --ls-bg-surface: hsl(240, 7%, 18%);
-  --ls-fg-surface: hsl(0, 0%, 100%);
+  --ls-fg-default: hsl(0, 0%, 100%);
+  --ls-fg-muted: hsl(213, 11%, 69%);
+  --ls-fg-link: #87b4fd;
   --ls-bg-body: #1c1c21;
+  --ls-bg-surface: hsl(240, 7%, 18%);
+  --ls-bg-secondary: #26262c;
+  --ls-bg-foremost: #212126;
+  --ls-bg-header: #3e3e47;
+  --ls-bg-sub-header: #474752;
   --ls-border-hsl: 240deg,7%,28%;
   --ls-shadow-hsl: 0deg,0%,7%;
-  --ls-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0))
+  --ls-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0));
+  color-scheme: dark
 }
 .Theme-dark .Btn-close {
   filter: invert(1) grayscale(100%) brightness(200%)
 }
-.Accent-dark {
-  --ls-bg-accent-hsl: 217deg,97%,76%;
-  --ls-bg-accent: #87b4fd;
-  --ls-fg-accent: hsl(0, 0%, 0%)
-}
 .Theme-night {
   --ls-contrast-hsl: 0deg,0%,100%;
   --ls-bg-hue-hsl: 0deg,0%,7%;
@@ -791,21 +795,38 @@ progress {
   --ls-bg-accent-hsl: 217deg,97%,76%;
   --ls-bg-accent: #87b4fd;
   --ls-fg-accent: hsl(0, 0%, 0%);
-  --ls-bg-surface: hsl(0, 0%, 7%);
-  --ls-fg-surface: hsl(0, 0%, 100%);
+  --ls-fg-default: hsl(0, 0%, 100%);
+  --ls-fg-muted: hsl(213, 11%, 69%);
+  --ls-fg-link: #87b4fd;
   --ls-bg-body: #030303;
+  --ls-bg-surface: hsl(0, 0%, 7%);
+  --ls-bg-secondary: #0d0d0d;
+  --ls-bg-foremost: #080808;
+  --ls-bg-header: #262626;
+  --ls-bg-sub-header: #303030;
   --ls-border-hsl: 0deg,0%,17%;
   --ls-shadow-hsl: 0deg,0%,0%;
-  --ls-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0))
+  --ls-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0));
+  color-scheme: normal
 }
 .Theme-night .Btn-close {
   filter: invert(1) grayscale(100%) brightness(200%)
 }
-.Accent-night {
-  --ls-bg-accent-hsl: 217deg,97%,76%;
-  --ls-bg-accent: #87b4fd;
+.Accent-light {
+  --ls-bg-accent-hsl: 0deg,0%,98%;
+  --ls-bg-accent: hsl(0, 0%, 98%);
   --ls-fg-accent: hsl(0, 0%, 0%)
 }
+.Accent-dark {
+  --ls-bg-accent-hsl: 240deg,7%,18%;
+  --ls-bg-accent: hsl(240, 7%, 18%);
+  --ls-fg-accent: hsl(0, 0%, 100%)
+}
+.Accent-night {
+  --ls-bg-accent-hsl: 0deg,0%,7%;
+  --ls-bg-accent: hsl(0, 0%, 7%);
+  --ls-fg-accent: hsl(0, 0%, 100%)
+}
 .Accent-primary {
   --ls-bg-accent-hsl: 217deg,96%,52%;
   --ls-bg-accent: hsl(217, 96%, 52%);
@@ -1363,7 +1384,7 @@ progress {
   --ls-breadcrumb-margin-bottom: 0.5rem;
   --ls-breadcrumb-font-size: inherit;
   --ls-breadcrumb-bg: var(--ls-bg-surface);
-  --ls-breadcrumb-color: var(--ls-fg-surface);
+  --ls-breadcrumb-color: var(--ls-fg-default);
   --ls-breadcrumb-border: none;
   --ls-breadcrumb-border-radius: 0;
   --ls-breadcrumb-hover-border-color: hsla(var(--ls-bg-accent-hsl), 0.25);
@@ -2182,7 +2203,7 @@ fieldset:disabled .Btn {
   transition: 0s
 }
 .Calendar {
-  --ls-calendar-color: var(--ls-fg-surface);
+  --ls-calendar-color: var(--ls-fg-default);
   --ls-calendar-bg: var(--ls-bg-surface);
   --ls-calendar-border-width: 1px;
   --ls-calendar-border-color: hsla(var(--ls-border-hsl), var(--ls-border-alpha));
@@ -2357,7 +2378,7 @@ fieldset:disabled .Btn {
   word-wrap: break-word;
   overflow: visible;
   font-family: var(--ls-font-sans-serif);
-  color: var(--ls-fg-surface);
+  color: var(--ls-fg-default);
   background-color: var(--ls-bg-surface);
   background-clip: border-box;
   border: none;
@@ -2882,7 +2903,7 @@ fieldset:disabled .Btn {
   height: auto
 }
 .List {
-  --ls-list-color: var(--ls-fg-surface);
+  --ls-list-color: var(--ls-fg-default);
   --ls-list-bg: var(--ls-bg-surface);
   --ls-list-active-color: var(--ls-fg-accent);
   --ls-list-active-bg: var(--ls-bg-accent);
@@ -2892,8 +2913,8 @@ fieldset:disabled .Btn {
   --ls-list-border-radius: 0.25rem;
   --ls-list-item-padding-y: 0.5rem;
   --ls-list-item-padding-x: 1rem;
-  --ls-list-action-color: var(--ls-fg-surface);
-  --ls-list-action-hover-color: var(--ls-fg-surface);
+  --ls-list-action-color: var(--ls-fg-default);
+  --ls-list-action-hover-color: var(--ls-fg-default);
   --ls-list-action-hover-bg: hsla(var(--ls-bg-accent-hsl), 0.08);
   --ls-list-action-active-color: var(--ls-fg-accent);
   --ls-list-action-active-bg: var(--ls-bg-accent);
@@ -3272,7 +3293,7 @@ fieldset:disabled .Btn {
   --ls-modal-width: 500px;
   --ls-modal-padding: 0.75rem;
   --ls-modal-margin: 0.5rem;
-  --ls-modal-color: var(--ls-fg-surface);
+  --ls-modal-color: var(--ls-fg-default);
   --ls-modal-bg: var(--ls-bg-surface);
   --ls-modal-border-color: transparent;
   --ls-modal-border-width: 0;
@@ -3868,7 +3889,7 @@ fieldset:disabled .Btn {
 }
 .Nav-tabs-classic .Nav-item.Show .Nav-link,
 .Nav-tabs-classic .Nav-link.Active {
-  color: var(--ls-fg-surface);
+  color: var(--ls-fg-default);
   background-color: var(--ls-bg-surface);
   border-color: hsla(var(--ls-border-hsl),var(--ls-border-alpha)) hsla(var(--ls-border-hsl),var(--ls-border-alpha)) var(--ls-bg-surface)
 }
@@ -4035,7 +4056,7 @@ fieldset:disabled .Btn {
   clear: both
 }
 .Placeholder-paragraph .Placeholder:last-child {
-  width: 59%
+  width: 77%
 }
 .Placeholder-paragraph .Placeholder:nth-child(1n) {
   animation-delay: .7s
@@ -4071,16 +4092,16 @@ fieldset:disabled .Btn {
   background-color: transparent
 }
 .Placeholder-textual .Placeholder:nth-child(1n) {
-  background-image: linear-gradient(90deg,currentColor 17%,transparent calc(17% + 1px),transparent calc(17% + 6px),currentColor calc(17% + 6px),currentColor 39%,transparent calc(39% + 1px),transparent calc(39% + 6px),currentColor calc(39% + 6px),currentColor 67%,transparent calc(67% + 1px),transparent calc(67% + 6px),currentColor calc(67% + 6px),currentColor)
+  background-image: linear-gradient(90deg,currentColor 10%,transparent calc(10% + 1px),transparent calc(10% + 6px),currentColor calc(10% + 6px),currentColor 41%,transparent calc(41% + 1px),transparent calc(41% + 6px),currentColor calc(41% + 6px),currentColor 77%,transparent calc(77% + 1px),transparent calc(77% + 6px),currentColor calc(77% + 6px),currentColor)
 }
 .Placeholder-textual .Placeholder:nth-child(2n) {
-  background-image: linear-gradient(90deg,currentColor 28%,transparent calc(28% + 1px),transparent calc(28% + 6px),currentColor calc(28% + 6px),currentColor 67%,transparent calc(67% + 1px),transparent calc(67% + 6px),currentColor calc(67% + 6px),currentColor 85%,transparent calc(85% + 1px),transparent calc(85% + 6px),currentColor calc(85% + 6px),currentColor)
+  background-image: linear-gradient(90deg,currentColor 11%,transparent calc(11% + 1px),transparent calc(11% + 6px),currentColor calc(11% + 6px),currentColor 72%,transparent calc(72% + 1px),transparent calc(72% + 6px),currentColor calc(72% + 6px),currentColor 83%,transparent calc(83% + 1px),transparent calc(83% + 6px),currentColor calc(83% + 6px),currentColor)
 }
 .Placeholder-textual .Placeholder:nth-child(3n) {
-  background-image: linear-gradient(90deg,currentColor 26%,transparent calc(26% + 1px),transparent calc(26% + 6px),currentColor calc(26% + 6px),currentColor 77%,transparent calc(77% + 1px),transparent calc(77% + 6px),currentColor calc(77% + 6px),currentColor 82%,transparent calc(82% + 1px),transparent calc(82% + 6px),currentColor calc(82% + 6px),currentColor)
+  background-image: linear-gradient(90deg,currentColor 15%,transparent calc(15% + 1px),transparent calc(15% + 6px),currentColor calc(15% + 6px),currentColor 48%,transparent calc(48% + 1px),transparent calc(48% + 6px),currentColor calc(48% + 6px),currentColor 73%,transparent calc(73% + 1px),transparent calc(73% + 6px),currentColor calc(73% + 6px),currentColor)
 }
 .Placeholder-textual .Placeholder:nth-child(4n) {
-  background-image: linear-gradient(90deg,currentColor 17%,transparent calc(17% + 1px),transparent calc(17% + 6px),currentColor calc(17% + 6px),currentColor 60%,transparent calc(60% + 1px),transparent calc(60% + 6px),currentColor calc(60% + 6px),currentColor 80%,transparent calc(80% + 1px),transparent calc(80% + 6px),currentColor calc(80% + 6px),currentColor)
+  background-image: linear-gradient(90deg,currentColor 8%,transparent calc(8% + 1px),transparent calc(8% + 6px),currentColor calc(8% + 6px),currentColor 45%,transparent calc(45% + 1px),transparent calc(45% + 6px),currentColor calc(45% + 6px),currentColor 69%,transparent calc(69% + 1px),transparent calc(69% + 6px),currentColor calc(69% + 6px),currentColor)
 }
 .Placeholder-xs,
 .Placeholder-xs .Placeholder {
@@ -4177,6 +4198,7 @@ fieldset:disabled .Btn {
   --ls-rating-bg: whitesmoke;
   --ls-rating-active-color: var(--ls-fg-accent);
   --ls-rating-active-bg: var(--ls-bg-accent);
+  --ls-rating-gradient-id: "Gradient-test_1";
   --ls-rating-fraction-gradient: linear-gradient(to right, var(--ls-rating-active-bg) 0%, var(--ls-rating-bg) 100%);
   --ls-rating-fraction-color: hsla(var(--ls-contrast-hsl), 1);
   display: flex;
@@ -4247,6 +4269,116 @@ fieldset:disabled .Btn {
 .Rating .Centered:not(.Rating-value).Selected .Fraction svg path {
   fill: var(--ls-rating-gradient-id) hsla(var(--ls-contrast-hsl),0.5)
 }
+.Sidenav-transition .Sidenav-backdrop {
+  transition-duration: .4s;
+  transition-timing-function: cubic-bezier(0.25,0.8,0.25,1);
+  transition-property: background-color,visibility
+}
+.Sidenav-transition .Sidenav-content {
+  transition-duration: .4s;
+  transition-timing-function: cubic-bezier(0.25,0.8,0.25,1);
+  transition-property: transform,margin-left,margin-right
+}
+.Sidenav-container {
+  --ls-sidenav-width: 329px;
+  --ls-sidenav-border-radius: 0;
+  --ls-sidenav-divider-color: hsla(var(--ls-bg-accent-hsl), 0.25);
+  position: relative;
+  display: block;
+  overflow: hidden;
+  height: 100%;
+  color: var(--ls-fg-default);
+  background-color: var(--ls-bg-body);
+  box-sizing: border-box;
+  z-index: 1;
+  -webkit-overflow-scrolling: touch
+}
+.Sidenav-container.Opened .Sidenav-mode-side + .Sidenav-content {
+  margin-left: var(--ls-sidenav-width)
+}
+.Sidenav-container.Opened .Sidenav-mode-push + .Sidenav-content {
+  margin-left: var(--ls-sidenav-width);
+  margin-right: -328px
+}
+.Sidenav-container.Opened .Sidenav {
+  transform: none;
+  visibility: visible
+}
+.Sidenav-container:not(.Opened) .Sidenav {
+  box-shadow: none;
+  visibility: hidden;
+  display: none
+}
+.Sidenav-container .Sidenav-backdrop {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  visibility: hidden
+}
+.Sidenav-container .Sidenav-backdrop.Active {
+  visibility: visible;
+  background-color: hsla(var(--ls-contrast-hsl),.25)
+}
+.Sidenav-container .Sidenav {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: 0;
+  width: var(--ls-sidenav-width);
+  background-color: var(--ls-bg-surface);
+  box-shadow: 0 9px 21px hsla(var(--ls-shadow-hsl),.18),0 6px 6px hsla(var(--ls-shadow-hsl),.24);
+  border-top-right-radius: var(--ls-sidenav-border-radius);
+  border-bottom-right-radius: var(--ls-sidenav-border-radius);
+  z-index: 3;
+  outline: 0;
+  box-sizing: border-box;
+  overflow-y: auto;
+  transform: translate3d(-100%,0,0)
+}
+.Sidenav-container .Sidenav.Sidenav-mode-side {
+  z-index: 2;
+  box-shadow: none;
+  border-right-color: var(--ls-sidenav-divider-color);
+  border-right-width: 1px;
+  border-right-style: solid
+}
+.Sidenav-container .Sidenav .Sidenav-inner {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch
+}
+.Sidenav-container .Sidenav-content {
+  position: relative;
+  display: block;
+  height: 100%;
+  z-index: 1;
+  overflow: auto
+}
+.Sidenav-container[fullscreen] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0
+}
+.Sidenav-container[fullscreen].Opened {
+  overflow: hidden
+}
+[dir=rtl] .Sidenav-container .Sidenav {
+  border-radius: var(--ls-sidenav-border-radius) 0 0 var(--ls-sidenav-border-radius);
+  transform: translate3d(100%,0,0)
+}
+[dir=rtl] .Sidenav-container .Sidenav-mode-side {
+  border-left-color: var(--ls-sidenav-divider-color);
+  border-left-width: 1px;
+  border-left-style: solid;
+  border-right: none
+}
 .Scrollbar {
   --ls-scrollbar-width: 0.8rem;
   --ls-scrollbar-track-bg: hsla(var(--ls-bg-accent-hsl), 0.04);
@@ -4486,14 +4618,14 @@ fieldset:disabled .Btn {
 .Table {
   --ls-table-accent-bg: transparent;
   --ls-table-bg: transparent;
-  --ls-table-color: var(--ls-fg-surface);
+  --ls-table-color: var(--ls-fg-default);
   --ls-table-border-color: hsla(var(--ls-border-hsl), 1);
   --ls-table-striped-bg: rgba(0, 0, 0, 0.05);
-  --ls-table-striped-color: var(--ls-fg-surface);
+  --ls-table-striped-color: var(--ls-fg-default);
   --ls-table-active-bg: rgba(0, 0, 0, 0.1);
-  --ls-table-active-color: var(--ls-fg-surface);
+  --ls-table-active-color: var(--ls-fg-default);
   --ls-table-hover-bg: rgba(0, 0, 0, 0.075);
-  --ls-table-hover-color: var(--ls-fg-surface);
+  --ls-table-hover-color: var(--ls-fg-default);
   width: 100%;
   margin-bottom: 1rem;
   vertical-align: top;
@@ -4690,7 +4822,7 @@ fieldset:disabled .Btn {
   position: relative;
   font-family: var(--ls-font-sans-serif);
   min-width: 0;
-  color: var(--ls-fg-surface);
+  color: var(--ls-fg-default);
   background-color: var(--ls-bg-surface);
   background-clip: border-box;
   padding: 0;
@@ -4751,7 +4883,7 @@ fieldset:disabled .Btn {
   --ls-toast-min-width: 200px;
   --ls-toast-max-width: 350px;
   --ls-toast-font-size: 0.875rem;
-  --ls-toast-color: var(--ls-fg-surface);
+  --ls-toast-color: var(--ls-fg-default);
   --ls-toast-bg: var(--ls-bg-surface);
   --ls-toast-border-color: hsla(var(--ls-bg-accent-hsl), 0.25);
   --ls-toast-border-width: 1px;
@@ -4932,7 +5064,7 @@ fieldset:disabled .Btn {
 .Tooltip {
   --ls-tooltip-padding-y: 0.3125rem;
   --ls-tooltip-padding-x: 0.625rem;
-  --ls-tooltip-color: var(--ls-fg-surface);
+  --ls-tooltip-color: var(--ls-fg-default);
   --ls-tooltip-bg: var(--ls-bg-surface);
   --ls-tooltip-border-width: 1px;
   --ls-tooltip-border-color: hsla(var(--ls-border-hsl), var(--ls-border-alpha));
@@ -4950,7 +5082,7 @@ fieldset:disabled .Btn {
   box-shadow: var(--ls-tooltip-box-shadow)
 }
 .Tooltip.Tooltip-outline {
-  --ls-tooltip-color: var(--ls-fg-surface);
+  --ls-tooltip-color: var(--ls-fg-default);
   --ls-tooltip-bg: transparent;
   --ls-tooltip-border-color: hsla(var(--ls-border-hsl), var(--ls-border-alpha))
 }
@@ -6103,7 +6235,7 @@ fieldset:disabled .Btn {
 }
 .Form .Form-select > option,
 .Form-material .Form-select > option {
-  color: var(--ls-fg-surface);
+  color: var(--ls-fg-default);
   background: var(--ls-bg-surface);
   padding: .5rem;
   margin: 3px 0;
@@ -6118,7 +6250,7 @@ fieldset:disabled .Btn {
 .Form .Form-select > option:hover,
 .Form-material .Form-select > option:active,
 .Form-material .Form-select > option:hover {
-  color: var(--ls-fg-surface);
+  color: var(--ls-fg-default);
   background-color: var(--ls-bg-surface)
 }
 .Form .Form-select ~ .Form-label,
@@ -6342,7 +6474,7 @@ fieldset:disabled .Btn {
 }
 .Form-outline .Form-select > option:active,
 .Form-outline .Form-select > option:hover {
-  color: var(--ls-fg-surface);
+  color: var(--ls-fg-default);
   background-color: var(--ls-bg-surface)
 }
 .Form-outline .Form-select ~ .Form-label {
@@ -6379,7 +6511,7 @@ fieldset:disabled .Btn {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: var(--ls-fg-surface);
+  color: var(--ls-fg-default);
   background-color: var(--ls-bg-surface);
   background-clip: padding-box;
   border: 1px solid hsla(var(--ls-border-hsl),var(--ls-border-alpha));
@@ -6401,7 +6533,7 @@ fieldset:disabled .Btn {
   cursor: pointer
 }
 .Form-control:focus {
-  color: var(--ls-fg-surface);
+  color: var(--ls-fg-default);
   background-color: var(--ls-bg-surface);
   border-color: hsla(var(--ls-border-hsl),var(--ls-border-alpha));
   outline: 0;
@@ -6433,7 +6565,7 @@ fieldset:disabled .Btn {
   margin: -.375rem -.75rem;
   -webkit-margin-end: .75rem;
           margin-inline-end: .75rem;
-  color: var(--ls-fg-surface);
+  color: var(--ls-fg-default);
   background-color: var(--ls-bg-surface);
   pointer-events: none;
   border-color: inherit;
@@ -6449,7 +6581,7 @@ fieldset:disabled .Btn {
   margin: -.375rem -.75rem;
   -webkit-margin-end: .75rem;
           margin-inline-end: .75rem;
-  color: var(--ls-fg-surface);
+  color: var(--ls-fg-default);
   background-color: var(--ls-bg-surface);
   pointer-events: none;
   border-color: inherit;
@@ -6684,7 +6816,7 @@ textarea.Form-control-lg {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: var(--ls-fg-surface);
+  color: var(--ls-fg-default);
   background-color: var(--ls-bg-surface);
   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='hsl(213, 11%25, 69%25)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -6717,7 +6849,7 @@ textarea.Form-control-lg {
 }
 .Form-select:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 var(--ls-fg-surface)
+  text-shadow: 0 0 0 var(--ls-fg-default)
 }
 .Form-select-sm {
   padding-top: .25rem;
@@ -6855,7 +6987,7 @@ textarea.Form-control-lg {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: var(--ls-fg-surface);
+  color: var(--ls-fg-default);
   text-align: center;
   white-space: nowrap;
   background-color: var(--ls-bg-surface);
@@ -6899,7 +7031,7 @@ textarea.Form-control-lg {
 }
 .Form-label {
   margin-bottom: .5rem;
-  color: var(--ls-fg-surface)
+  color: var(--ls-fg-default)
 }
 .Col-form-label {
   padding-top: calc(.375rem + 1px);
@@ -6907,7 +7039,7 @@ textarea.Form-control-lg {
   margin-bottom: 0;
   font-size: inherit;
   line-height: 1.5;
-  color: var(--ls-fg-surface)
+  color: var(--ls-fg-default)
 }
 .Col-form-label-lg {
   padding-top: calc(.5rem + 1px);