@wwtdev/bsds-css 3.3.0 → 3.4.0-rc.0

package/dist/wwt-bsds.css

@@ -25,12 +25,11 @@
   --bs-cobalt-200: #948be1;
   --bs-cobalt-300: #5f52d3;
   --bs-cobalt-400: #2918c4;
-  --bs-gold-10: rgba(235, 223, 212, 0.1);
-  --bs-gold-100: #f9f5f1;
-  --bs-gold-200: #ebdfd4;
-  --bs-gold-300: #e0c7ac;
-  --bs-gold-400: #cca175;
-  --bs-gold-500: #997958;
+  --bs-gold-10: rgba(224, 199, 172, 0.1);
+  --bs-gold-100: #ebdfd4;
+  --bs-gold-200: #e0c7ac;
+  --bs-gold-300: #cca175;
+  --bs-gold-400: #997958;
   --bs-gray-50: #f7f7fc;
   --bs-gray-100: #f0f0fa;
   --bs-gray-150: #dcdde9;
@@ -44,7 +43,7 @@
   --bs-green-300: #39a283;
   --bs-green-400: #008b5d;
   --bs-green-500: #00744d;
-  --bs-maroon-10: rgba(195, 91, 91, 0.1);
+  --bs-maroon-10: rgba(215, 145, 145, 0.1);
   --bs-maroon-100: #ebc8c8;
   --bs-maroon-200: #d79191;
   --bs-maroon-300: #c35b5b;
@@ -64,7 +63,7 @@
   --bs-orange-100: #f3c4a8;
   --bs-orange-200: #f7a17b;
   --bs-orange-300: #f97c4c;
-  --bs-orange-400: #fb550e;
+  --bs-orange-400: #ed5615;
   --bs-orange-500: #c33d04;
   --bs-orange-brand: #ff5100;
   --bs-orchid-10: rgba(190, 128, 255, 0.1);
@@ -232,13 +231,37 @@
   --bs-space-2: calc(var(--bs-space) * 2);
   --bs-space-3: calc(var(--bs-space) * 3);
   --bs-space-4: calc(var(--bs-space) * 4);
+  --bs-space-5: calc(var(--bs-space) * 5);
   --bs-space-6: calc(var(--bs-space) * 6);
+  --bs-space-7: calc(var(--bs-space) * 7);
   --bs-space-8: calc(var(--bs-space) * 8);
+  --bs-space-9: calc(var(--bs-space) * 9);
+  --bs-space-10: calc(var(--bs-space) * 10);
+  --bs-space-11: calc(var(--bs-space) * 11);
   --bs-space-12: calc(var(--bs-space) * 12);
+  --bs-space-14: calc(var(--bs-space) * 14);
   --bs-space-16: calc(var(--bs-space) * 16);
+  --bs-space-20: calc(var(--bs-space) * 20);
   --bs-space-24: calc(var(--bs-space) * 24);
+  --bs-space-28: calc(var(--bs-space) * 28);
   --bs-space-32: calc(var(--bs-space) * 32);
+  --bs-space-36: calc(var(--bs-space) * 36);
+  --bs-space-40: calc(var(--bs-space) * 40);
+  --bs-space-44: calc(var(--bs-space) * 44);
+  --bs-space-48: calc(var(--bs-space) * 48);
+  --bs-space-52: calc(var(--bs-space) * 52);
+  --bs-space-56: calc(var(--bs-space) * 56);
+  --bs-space-60: calc(var(--bs-space) * 60);
+  --bs-space-64: calc(var(--bs-space) * 64);
+  --bs-space-72: calc(var(--bs-space) * 72);
+  --bs-space-80: calc(var(--bs-space) * 80);
+  --bs-space-96: calc(var(--bs-space) * 96);
   --bs-space: 0.25rem;
+  --bs-space-px: 1px;
+  --bs-space-0_5: calc(var(--bs-space) * 0.5);
+  --bs-space-1_5: calc(var(--bs-space) * 1.5);
+  --bs-space-2_5: calc(var(--bs-space) * 2.5);
+  --bs-space-3_5: calc(var(--bs-space) * 3.5);
   --bs-space-none: var(--bs-space-0);
   --bs-space-3xs: var(--bs-space-1);
   --bs-space-2xs: var(--bs-space-2);
@@ -397,6 +420,202 @@
   --bs-border-active: var(--bs-cobalt-400);
   --bs-border-error: var(--bs-maroon-500);
 }
+html:where(:has([data-theme="softchoice-dark"])),
+[data-theme="softchoice-dark"] {
+  color-scheme: dark;
+}
+[data-theme="softchoice-dark"] {
+  /* Ink */
+  --bs-ink-base: var(--bs-white);
+  --bs-ink-medium: var(--bs-gray-100);
+  --bs-ink-light: var(--bs-gray-150);
+  --bs-ink-disabled: rgba(163, 164, 183, 0.7); /* gray-300 at 70% */
+  --bs-ink-invert-base: var(--bs-black);
+  --bs-ink-invert-medium: var(--bs-gray-500);
+  --bs-ink-invert-light: var(--bs-gray-400);
+  --bs-ink-primary: var(--bs-cobalt-100);
+  --bs-ink-secondary: var(--bs-orange-200);
+  --bs-ink-accent-1: var(--bs-midnight-100);
+  --bs-ink-accent-2: var(--bs-violet-100);
+  --bs-ink-accent-3: var(--bs-pink-200);
+  --bs-ink-accent-4: var(--bs-orchid-200);
+  --bs-ink-positive: var(--bs-green-200);
+  --bs-ink-warning: var(--bs-yellow-300);
+  --bs-ink-negative: var(--bs-maroon-200);
+
+  /* Primary */
+  --bs-primary-base-fixed: var(--bs-cobalt-400);
+  --bs-primary-base: var(--bs-cobalt-300);
+  --bs-primary-medium: var(--bs-cobalt-200);
+  --bs-primary-light: var(--bs-cobalt-200);
+  --bs-primary-lightest: var(--bs-cobalt-100);
+  --bs-primary-highlight: var(--bs-cobalt-10);
+
+  /* Secondary */
+  --bs-secondary-base-fixed: var(--bs-orange-400);
+  --bs-secondary-base: var(--bs-orange-300);
+  --bs-secondary-medium: var(--bs-orange-200);
+  --bs-secondary-light: var(--bs-orange-200);
+  --bs-secondary-lightest: var(--bs-orange-100);
+  --bs-secondary-highlight: var(--bs-orange-10);
+
+  /* Accent 1 */
+  --bs-accent-1-base-fixed: var(--bs-midnight-400);
+  --bs-accent-1-base: var(--bs-midnight-300);
+  --bs-accent-1-medium: var(--bs-midnight-200);
+  --bs-accent-1-light: var(--bs-midnight-200);
+  --bs-accent-1-lightest: var(--bs-midnight-100);
+  --bs-accent-1-highlight: var(--bs-midnight-10);
+
+  /* Accent 2 */
+  --bs-accent-2-base: var(--bs-violet-300);
+  --bs-accent-2-medium: var(--bs-violet-200);
+  --bs-accent-2-light: var(--bs-violet-200);
+
+  /* Accent 3 */
+  --bs-accent-3-base: var(--bs-pink-300);
+  --bs-accent-3-medium: var(--bs-pink-200);
+
+  /* Accent 4 */
+  --bs-accent-4-base-fixed: var(--bs-orchid-400);
+  --bs-accent-4-base: var(--bs-orchid-300);
+  --bs-accent-4-medium: var(--bs-orchid-200);
+  --bs-accent-4-light: var(--bs-orchid-200);
+  --bs-accent-4-lightest: var(--bs-orchid-100);
+  --bs-accent-4-highlight: var(--bs-orchid-10);
+
+  /* Accent 5 */
+  --bs-accent-5-base: var(--bs-gold-300);
+  --bs-accent-5-medium: var(--bs-gold-200);
+  --bs-accent-5-light: var(--bs-gold-200);
+  --bs-accent-5-lightest: var(--bs-gold-100);
+  --bs-accent-5-highlight: var(--bs-gold-10);
+
+  /* Accent 6 */
+  --bs-accent-6-base: var(--bs-red-300);
+
+  /* Accent 7 */
+  --bs-accent-7-base: var(--bs-navy-300);
+  --bs-accent-7-medium: var(--bs-navy-200);
+
+  /* Neutral */
+  --bs-neutral-dark: var(--bs-charcoal-100);
+  --bs-neutral-base: var(--bs-charcoal-200);
+  --bs-neutral-medium: var(--bs-charcoal-300);
+  --bs-neutral-light: var(--bs-charcoal-400);
+  --bs-neutral-lightest: var(--bs-charcoal-500);
+
+  /* Warning */
+  --bs-warning-base: var(--bs-yellow-400);
+  --bs-warning-medium: var(--bs-yellow-300);
+  --bs-warning-highlight: var(--bs-yellow-10);
+
+  /* Negative */
+  --bs-negative-base: var(--bs-maroon-300);
+  --bs-negative-medium: var(--bs-maroon-200);
+  --bs-negative-highlight: var(--bs-maroon-10);
+
+  /* Background */
+  --bs-bg-base: var(--bs-slate-600);
+  --bs-bg-light: var(--bs-slate-500);
+  --bs-bg-medium: var(--bs-slate-400);
+  --bs-bg-disabled: rgba(78, 79, 95, 0.3); /* gray-400 at 30% */
+  --bs-bg-invert-base: var(--bs-white);
+  --bs-bg-invert-light: var(--bs-charcoal-100);
+  --bs-bg-invert-medium: var(--bs-charcoal-200);
+  --bs-bg-base-to-light: var(--bs-slate-500);
+  --bs-bg-base-to-medium: var(--bs-slate-400);
+  --bs-bg-medium-to-base: var(--bs-slate-600);
+  --bs-bg-medium-to-light: var(--bs-slate-500);
+  --bs-bg-light-to-base: var(--bs-slate-600);
+  --bs-bg-light-to-medium: var(--bs-slate-400);
+
+  /* Borders */
+  --bs-border-base: rgba(163, 164, 183, 0.7); /* gray-300 at 70% */
+  --bs-border-medium: var(--bs-gray-400);
+  --bs-border-light: rgba(78, 79, 95, 0.5); /* gray-400 at 50% */
+  --bs-border-medium-to-light: rgba(78, 79, 95, 0.5); /* gray-400 at 50% */
+  --bs-border-input: var(--bs-violet-200);
+  --bs-border-active: var(--bs-cobalt-300);
+  --bs-border-error: var(--bs-maroon-200);
+
+  /* Atom gradients */
+  --bs-gradient-atom-ai-bg: conic-gradient(from 180deg at 50% 50%, rgba(83, 101, 196, 0.2) -96.8deg, rgba(228, 94, 155, 0.2) 74.2deg, rgba(51, 158, 238, 0.2) 98.8deg, rgba(249, 124, 76, 0.2) 259.6deg, rgba(83, 101, 196, 0.2) 283.2deg, rgba(228, 94, 155, 0.2) 414.4deg);
+  --bs-gradient-atom-ai-border: conic-gradient(from 180deg at 50% 50%, var(--bs-royal-300) -96.8deg, var(--bs-pink-300) 74.2deg, var(--bs-blue-300) 98.8deg, var(--bs-orange-300) 259.6deg, var(--bs-royal-300) 283.2deg, var(--bs-pink-300) 414.4deg);
+
+  /* Shadows */
+  --bs-shadow-secondary: rgba(10, 11, 25, 0.60);
+  --bs-shadow-dark: -16px 20px 40px 0 #000;
+  --bs-shadow-contentLow: var(--bs-shadow-dark);
+  --bs-shadow-contentLowCenter: var(--bs-shadow-dark);
+  --bs-shadow-contentMedium: var(--bs-shadow-dark);
+  --bs-shadow-contentHigh: var(--bs-shadow-dark);
+  --bs-shadow-drawerLeft: var(--bs-shadow-dark);
+  --bs-shadow-drawerRight: 16px 20px 40px 0 #000;
+  --bs-shadow-profilePhoto: inset 0px 0px 0.5em var(--bs-shadow-secondary);
+
+  /* -------------- Deprecated Color Tokens -------------- */
+ /* Ink */
+  --bs-ink-blue: var(--bs-cobalt-100); /* replaced by Ink Primary */
+  --bs-ink-orange: var(--bs-yellow-300); /* replaced by Ink Warning */
+  --bs-ink-pink: var(--bs-pink-200); /* replaced by Ink Accent 3 */
+  --bs-ink-plum: var(--bs-orange-200); /* replaced by Ink Secondary */
+  --bs-ink-purple: var(--bs-orchid-200); /* replaced by Ink Accent 4 */
+  --bs-ink-red: var(--bs-maroon-200); /* replaced by Ink Negative */
+  --bs-ink-royal: var(--bs-midnight-100); /* replaced by Ink Accent 1 */
+  --bs-ink-violet: var(--bs-violet-100); /* replaced by Ink Accent 2 */
+  --bs-bg-invert-to-medium: var(--bs-gray-500); /* removed in v3 */
+  --bs-ink-accent: var(--bs-orange-200); /* removed in v3 */
+
+  /* Blue (replaced by Primary) */
+  --bs-blue-base: var(--bs-cobalt-300);
+  --bs-blue-medium: var(--bs-cobalt-200);
+  --bs-blue-light: var(--bs-cobalt-200);
+  --bs-blue-lightest: var(--bs-cobalt-100);
+
+  /* Gray (replaced by Neutral) */
+  --bs-gray-dark: var(--bs-charcoal-100);
+  --bs-gray-base: var(--bs-charcoal-200);
+  --bs-gray-medium: var(--bs-charcoal-300);
+  --bs-gray-light: var(--bs-charcoal-400);
+  --bs-gray-lightest: var(--bs-charcoal-500);
+
+  /* Navy (replaced by Accent 7) */
+  --bs-navy-base: var(--bs-navy-300);
+  --bs-navy-medium: var(--bs-navy-200);
+
+  /* Orange (replaced by Warning) */
+  --bs-warning: var(--bs-yellow-400);
+  --bs-orange-base: var(--bs-yellow-300);
+
+  /* Pink (replaced by Accent 3) */
+  --bs-pink-base: var(--bs-pink-300);
+  --bs-pink-medium: var(--bs-pink-200);
+
+  /* Plum (replaced by Secondary) */
+  --bs-plum-base: var(--bs-orange-300);
+  --bs-plum-medium: var(--bs-orange-200);
+
+  /* Purple (replaced by Accent 4) */
+  --bs-purple-base: var(--bs-orchid-300);
+  --bs-purple-medium: var(--bs-orchid-200);
+  --bs-purple-light: var(--bs-orchid-200);
+  --bs-purple-lightest: var(--bs-orchid-100);
+
+  /* Red (replaced by Negative) */
+  --bs-red-base: var(--bs-maroon-300);
+  --bs-red-medium: var(--bs-maroon-200);
+
+  /* Royal Blue (replaced by Accent 1) */
+  --bs-royal-base: var(--bs-midnight-300);
+  --bs-royal-medium: var(--bs-midnight-200);
+  --bs-royal-light: var(--bs-midnight-200);
+  --bs-royal-lightest: var(--bs-midnight-100);
+
+  /* Violet (replaced by Accent 2) */
+  --bs-violet-base: var(--bs-violet-300);
+  --bs-violet-medium: var(--bs-violet-200);
+}
 /* put browser scrollbars into dark mode */
 /* html selector needed since data-theme gets added to body, but scrolling may be on <html> */
 html:where(:has(.dark, [data-theme="wwt-dark"])),
@@ -4779,6 +4998,12 @@ data-autosize-icons="true" - see above
   grid-template-columns: auto 1fr auto auto;
   align-items: center;
   cursor: pointer;
+
+  &:where([data-show-pill-group="true"]) {
+    --input-height: auto;
+    --input-padding-block: var(--bs-space-2);
+    min-height: var(--bs-space-10);
+  }
 }
 /* -- Multiselect Count -- */
 .bs-input-button-count {