@wwtdev/bsds-css 1.7.0 → 1.8.1

package/dist/components/loader.css

@@ -0,0 +1,85 @@
+.bs-loader {
+  --loader-dot-bg: var(--bs-blue-500); /* possibly add variants if requested */
+  --loader-dot-size: .75rem;
+  --loader-dot-top: 18px;
+  --loader-dot-top: calc(50% - var(--loader-dot-size)/2);
+  --loader-dot-translate: 1.75rem; /* i.e., calc(var(--loader-width)/2 - var(--loader-dot-size)/2); */
+  --loader-height: 3rem;
+  --loader-width: 4rem;
+  display: block;
+  height: var(--loader-height);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  position: relative;
+  width: var(--loader-width);
+}
+.bs-loader:where([data-size="sm"]) {
+  --loader-dot-size: .5rem;
+  --loader-dot-top: 0;
+  --loader-dot-translate: 1.125rem;
+  --loader-height: .5rem;
+  --loader-width: 3rem;
+}
+.bs-loader:where([data-size="lg"]) {
+  --loader-dot-size: 1rem;
+  --loader-dot-translate: 2.375rem;
+  --loader-height: 4rem;
+  --loader-width: 6rem;
+}
+
+/* ----- loader dots ----- */
+.bs-loader > :where(div) {
+  background-color: var(--loader-dot-bg);
+  border-radius: 50%;
+  height: var(--loader-dot-size);
+  position: absolute;
+  top: var(--loader-dot-top);
+  width: var(--loader-dot-size);
+}
+
+.bs-loader > :where(div) {
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.bs-loader > :where(div:nth-child(1)) {
+  animation: loading-1 0.6s infinite;
+  left: 0%;
+}
+.bs-loader > :where(div:nth-child(2)) {
+  animation: loading-2 0.6s infinite;
+  left: 0%;
+}
+.bs-loader > :where(div:nth-child(3)) {
+  animation: loading-2 0.6s infinite;
+  left: 40%;
+}
+.bs-loader > :where(div:nth-child(4)) {
+  animation: loading-3 0.6s infinite;
+  left: 80%;
+}
+
+@keyframes loading-1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes loading-2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(var(--loader-dot-translate), 0);
+  }
+}
+
+@keyframes loading-3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}

package/dist/components/modal.css

@@ -0,0 +1,32 @@
+.bs-modal {
+  background-color: var(--bs-bg-base-elevated);
+  border-radius: 4px;
+  box-shadow: var(--bs-shadow-contentHigh);
+  left: 1.5rem;
+  max-height: calc(100% - 3rem);
+  opacity: 0;
+  overflow: auto;
+  padding: 1.5rem;
+  position: fixed;
+  right: 1.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  transition-duration: 75ms;
+  transition-property: opacity;
+  transition-timing-function: ease-in-out;
+  z-index: 9999;
+}
+
+.bs-modal:where([data-shown]) {
+  opacity: 1;
+}
+
+@media (min-width: 752px) {
+  .bs-modal {
+    left: 50%;
+    margin: 0;
+    max-height: 40.625rem;
+    transform: translate(-50%, -50%);
+    width: 35rem;
+  }
+}

package/dist/components/overlay.css

@@ -0,0 +1,18 @@
+.bs-overlay {
+  backdrop-filter: blur(4px);
+  background: rgba(29, 30, 72, 0.05);
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition-duration: 75ms;
+  transition-property: opacity;
+  transition-timing-function: ease-in-out;
+  z-index: 9998;
+}
+
+.bs-overlay:where([data-shown]) {
+  opacity: 1;
+}

package/dist/components/pagination.css

@@ -0,0 +1,80 @@
+.bs-pagination {
+  background-color: var(--bs-bg-base);
+  color: var(--bs-ink-base);
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+.bs-pagination:where([data-variant="group"]) {
+  gap: 2.5rem;
+}
+
+.bs-pagination:where([data-variant="results"]) {
+  gap: 1rem;
+}
+
+.bs-pagination :where(button) {
+  align-items: center;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  min-height: 1.5rem;
+  justify-content: center;
+  outline: 2px solid transparent;
+  min-width: 1.5rem;
+}
+
+.bs-pagination button:where(:focus),
+.bs-pagination button:where(:focus-visible) {
+  outline: 2px solid var(--bs-blue-base);
+}
+
+.bs-pagination button:where(:focus:not(:focus-visible)) {
+  outline: 2px solid transparent;
+}
+
+.bs-pagination button:where(:disabled) {
+  color: var(--bs-ink-disabled);
+}
+
+.bs-pagination button:where([data-selected]) {
+  background-color: var(--bs-blue-base);
+  color: var(--bs-gray-50);
+}
+
+.bs-pagination:where([data-fixed]) {
+  background-color: var(--bs-bg-base-elevated);
+  bottom: 0;
+  left: 0;
+  padding: 1rem;
+  position: fixed;
+  width: 100%;
+}
+
+.bs-pagination :where(.bs-pagination-page-numbers) {
+  display: flex;
+  gap: 1rem;
+}
+
+.bs-pagination :where(.bs-pagination-carets) {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.bs-pagination :where(.bs-pagination-word-caret) {
+  align-items: center;
+  gap: 0.5rem;
+  width: auto;
+}
+
+.bs-pagination :where(.bs-pagination-results-numbers) {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.bs-pagination :where(.bs-pagination-results-numbers) button {
+  padding-left: 2px;
+  padding-right: 2px;
+  width: auto;
+}

package/dist/components/pills.css

@@ -1,7 +1,7 @@
 .bs-pill {
-  --pill-background: var(--bs-bg-subtle);
+  --pill-background: var(--bs-bg-medium);
   --pill-border: transparent;
-  --pill-text: var(--bs-royal-400);
+  --pill-text: var(--bs-royal-base);
   --pill-gap: var(--bs-space-2);
 
   align-items: center;
@@ -18,9 +18,7 @@
   text-decoration: none;
   vertical-align: middle;
 }
-:where(.dark) .bs-pill {
-  --pill-text: var(--bs-royal-100);
-}
+
 :where(.bs-pill > svg) {
   height: 1rem;
 }
@@ -46,7 +44,7 @@
   --pill-background: var(--bs-bg-base);
 }
 :where(.box[data-invert]) .bs-pill {
-  --pill-background: var(--bs-bg-invert-subtle);
+  --pill-background: var(--bs-bg-invert-base-subtle);
   --pill-text: var(--bs-gray-100);
 }
 :where(.box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
@@ -61,7 +59,7 @@
 
 /* ------------------------------ Status Styles ------------------------------ */
 .bs-pill:where([data-status]) {
-  --status-color: var(--bs-blue-400);
+  --status-color: var(--bs-blue-base);
 }
 .bs-pill:where([data-status])::before {
   background-color: var(--status-color);
@@ -73,7 +71,7 @@
 
 /* ----- Status Colors ----- */
 .bs-pill:where([data-status^="active"]) {
-  --status-color: var(--bs-blue-400);
+  --status-color: var(--bs-blue-base);
 }
 .bs-pill:where([data-status^="complete"]) {
   --status-color: var(--bs-purple-400);
@@ -135,7 +133,7 @@
 
 /* ----- Filter Active Styles ----- */
 .bs-pill:where([data-variant^="filter"][data-active]) {
-  --pill-background: var(--bs-blue-400);
+  --pill-background: var(--bs-blue-base);
   --pill-border: transparent;
   --pill-text: var(--bs-white);
 }
@@ -177,8 +175,8 @@
 /* ----- Disabled Styles ----- */
 .bs-pill:is(:disabled, [aria-disabled="true"]) {
   pointer-events: none;
-  color: var(--bs-gray-400);
-  background-color: var(--bs-gray-200);
+  color: var(--bs-ink-disabled);
+  background-color: var(--bs-bg-disabled);
 }
 
 .bs-pill:where([data-variant^="filter"]):not([data-active]):is(:disabled, [aria-disabled="true"]) {

package/dist/components/profile-layout.css

@@ -17,13 +17,9 @@ a.bs-profile:where([data-layout]) {
 }
 
 a.bs-profile:where([data-layout]) .bs-profile-details > *:first-child {
-  --profile-name-color: var(--bs-blue-500);
+  --profile-name-color: var(--bs-ink-blue);
 }
 
 a.bs-profile:where([data-layout]):hover .bs-profile-details > *:first-child {
   text-decoration: underline;
 }
-
-.dark a.bs-profile:where([data-layout]) .bs-profile-details > *:first-child {
-  --profile-name-color: var(--bs-blue-200);
-}

package/dist/components/tables.css

@@ -39,7 +39,7 @@ table[data-borders^="all"] th {
 
 /* Table Rows */
 table:where([data-rows^="striped"]) tbody > tr:nth-child(even) {
-  background-color: var(--bs-bg-subtle);
+  background-color: var(--bs-bg-medium);
 }
 
 /* Table Cells */

package/dist/components/toast.css

@@ -1,7 +1,7 @@
 /* Base Toast Styles */
 .bs-toast {
-    background-color: var(--bs-white);
-    border-top: 4px solid var(--bs-blue-400);
+    background-color: var(--bs-bg-base-elevated);
+    border-top: 4px solid var(--bs-blue-base);
     bottom: 1.5rem;
     box-shadow: var(--bs-shadow-contentMedium);
     left: 0;
@@ -47,11 +47,6 @@
     }
 }
 
-/* Dark mode toast */
-:where(.dark) .bs-toast {
-    background-color: var(--bs-navy-400);
-}
-
 .bs-toast:where([data-shown]) {
     /* Small delay on load to alow for HTML element to exist */
     animation-delay: 10ms;
@@ -77,7 +72,7 @@
 }
 
 .bs-toast-header :where(.bs-toast-header-icon) {
-    color: var(--bs-blue-400);
+    color: var(--bs-blue-base);
 }
 
 .bs-toast-header :where(h5) {

package/dist/components/tooltip.css

@@ -6,10 +6,10 @@
 
 .bs-tooltip :where(.bs-tooltip-text) {
   align-items: center;
-  background-color: var(--bs-bg-base);
+  background-color: var(--bs-bg-base-elevated);
   border-radius: 4px;
   box-shadow: var(--bs-shadow-contentLowCenter);
-  color: var(--bs-violet-400);
+  color: var(--bs-violet-base);
   display: flex;
   font-size: var(--bs-text-sm);
   justify-content: center;

package/dist/wwt-bsds-preset.js

@@ -56,7 +56,8 @@ module.exports = {
         200: "#8D8EA1",
         300: "#555775",
         400: "#1D1E48",
-        500: "#131431"
+        500: "#131431",
+        600: "#070822"
       },
       orange: {
         10: "rgba(250, 70, 22, 0.1)",
@@ -64,7 +65,8 @@ module.exports = {
         200: "#FDA58D",
         300: "#FC7755",
         400: "#FA4616",
-        warning: "#EA6712"
+        500: "#EA6712",
+        warning: "#EA6712" // leaving here for compatibility
       },
       pink: {
         100: "#F6CBE0",
@@ -81,6 +83,7 @@ module.exports = {
         400: "#8212C4"
       },
       gray: {
+        50:  "#F7F7FC",
         100: "#F0F0FA",
         200: "#C9CAD9",
         300: "#A3A4B7",

package/dist/wwt-bsds-wc-base.css

@@ -37,11 +37,13 @@
   --bs-navy-300: #555775;
   --bs-navy-400: #1d1e48;
   --bs-navy-500: #131431;
+  --bs-navy-600: #070822;
   --bs-orange-10: rgba(250, 70, 22, 0.1);
   --bs-orange-100: #fed1c5;
   --bs-orange-200: #fda58d;
   --bs-orange-300: #fc7755;
   --bs-orange-400: #fa4616;
+  --bs-orange-500: #ea6712;
   --bs-orange-warning: #ea6712;
   --bs-pink-100: #f6cbe0;
   --bs-pink-200: #eb7eaf;
@@ -53,6 +55,7 @@
   --bs-purple-200: #bf8adf;
   --bs-purple-300: #a154d0;
   --bs-purple-400: #8212c4;
+  --bs-gray-50: #f7f7fc;
   --bs-gray-100: #f0f0fa;
   --bs-gray-200: #c9cad9;
   --bs-gray-300: #a3a4b7;
@@ -279,15 +282,71 @@ button {
 :root,
 :host {
   --bs-bg-base: var(--bs-white);
-  --bs-bg-subtle: var(--bs-gray-100);
-  --bs-bg-invert: var(--bs-navy-500);
-  --bs-bg-invert-subtle: var(--bs-navy-400);
+  --bs-bg-base-elevated: var(--bs-white);
+  --bs-bg-light: var(--bs-gray-50);
+  --bs-bg-medium: var(--bs-gray-100);
+  --bs-bg-invert-base: var(--bs-navy-500);
+  --bs-bg-invert-medium: var(--bs-navy-400);
+  --bs-bg-disabled: var(--bs-gray-200);
+
   --bs-ink-base: var(--bs-black);
   --bs-ink-medium: var(--bs-gray-500);
   --bs-ink-light: var(--bs-gray-400);
   --bs-ink-accent: var(--bs-plum-400);
-  --bs-ink-invert: var(--bs-white);
-  --bs-border: var(--bs-gray-200);
+  --bs-ink-invert: var(--bs-gray-100);
+  --bs-ink-invert-medium: var(--bs-gray-200);
+  --bs-ink-blue: var(--bs-blue-500);
+  --bs-ink-red: var(--bs-red-500);
+  --bs-ink-pink: var(--bs-pink-500);
+  --bs-ink-orange: var(--bs-orange-500);
+  --bs-hyperlink: var(--bs-purple-400);
+  --bs-ink-disabled: var(--bs-gray-400);
+
+  --bs-blue-base: var(--bs-blue-400);
+  --bs-blue-medium: var(--bs-blue-300);
+  --bs-blue-light: var(--bs-blue-200);
+  --bs-blue-lightest: var(--bs-blue-100);
+  --bs-plum-base: var(--bs-plum-400);
+  --bs-plum-medium: var(--bs-plum-300);
+  --bs-plum-light: var(--bs-plum-200);
+  --bs-plum-lightest: var(--bs-plum-100);
+  --bs-red-base: var(--bs-red-400);
+  --bs-red-medium: var(--bs-red-300);
+  --bs-red-light: var(--bs-red-200);
+  --bs-red-lightest: var(--bs-red-100);
+  --bs-royal-base: var(--bs-royal-400);
+  --bs-royal-medium: var(--bs-royal-300);
+  --bs-royal-light: var(--bs-royal-200);
+  --bs-royal-lightest: var(--bs-royal-100);
+  --bs-navy-base: var(--bs-navy-400);
+  --bs-navy-medium: var(--bs-navy-300);
+  --bs-navy-light: var(--bs-navy-200);
+  --bs-navy-lightest: var(--bs-navy-100);
+  --bs-pink-base: var(--bs-pink-400);
+  --bs-pink-medium: var(--bs-pink-300);
+  --bs-pink-light: var(--bs-pink-200);
+  --bs-pink-lightest: var(--bs-pink-100);
+  --bs-violet-base: var(--bs-violet-400);
+  --bs-violet-medium: var(--bs-violet-300);
+  --bs-violet-light: var(--bs-violet-200);
+  --bs-violet-lightest: var(--bs-violet-100);
+  --bs-orange-base: var(--bs-orange-400);
+  --bs-orange-medium: var(--bs-orange-300);
+  --bs-orange-light: var(--bs-orange-200);
+  --bs-orange-lightest: var(--bs-orange-100);
+  --bs-purple-base: var(--bs-purple-400);
+  --bs-purple-medium: var(--bs-purple-300);
+  --bs-purple-light: var(--bs-purple-200);
+  --bs-purple-lightest: var(--bs-purple-100);
+  --bs-gray-dark: var(--bs-gray-500);
+  --bs-gray-base: var(--bs-gray-400);
+  --bs-gray-medium: var(--bs-gray-300);
+  --bs-gray-light: var(--bs-gray-200);
+  --bs-gray-lightest: var(--bs-gray-100);
+
+  --bs-border-dark: var(--bs-gray-400);
+  --bs-border-base: var(--bs-gray-200);
+  --bs-border-light: var(--bs-gray-100);
 
   /* Spacing */
   --bs-content-top: 4rem;
@@ -296,20 +355,50 @@ button {
   /* Type */
   --bs-font-normal: 400;
   --bs-font-bold: 600;
+
+  /* deprecate / phase out.. */
+  --bs-bg-subtle: var(--bs-gray-100);
+  --bs-bg-invert: var(--bs-navy-500);
+  --bs-bg-invert-subtle: var(--bs-navy-400);
+  --bs-border: var(--bs-gray-200);
 }
 
 .dark,
 .dark :where(:host) {
-  --bs-bg-base: var(--bs-navy-500);
-  --bs-bg-subtle: #2F2F51;
-  --bs-bg-invert: var(--bs-white);
-  --bs-bg-invert-subtle: var(--bs-gray-100);
-  --bs-ink-base: var(--bs-white);
-  --bs-ink-medium: var(--bs-gray-100);
-  --bs-ink-light: var(--bs-gray-200);
-  --bs-ink-accent: var(--bs-plum-100);
+  --bs-bg-base: var(--bs-navy-600);
+  --bs-bg-base-elevated: var(--bs-navy-500);
+  --bs-bg-light: var(--bs-navy-500);
+  --bs-bg-medium: var(--bs-navy-400);
+  --bs-bg-invert-base: var(--bs-gray-100);
+  --bs-bg-invert-medium: var(--bs-gray-50);
+  --bs-bg-disabled: var(--bs-gray-500);
+
+  --bs-ink-base: var(--bs-gray-100);
+  --bs-ink-medium: var(--bs-gray-200);
+  --bs-ink-light: var(--bs-gray-300);
+  --bs-ink-accent: var(--bs-gray-100);
   --bs-ink-invert: var(--bs-black);
-  --bs-border: var(--bs-gray-400);
+  --bs-ink-invert-medium: var(--bs-gray-500);
+  --bs-ink-blue: var(--bs-blue-200);
+  --bs-ink-red: var(--bs-red-100);
+  --bs-ink-pink: var(--bs-pink-200);
+  --bs-hyperlink: var(--bs-purple-200);
+  --bs-ink-disabled: var(--bs-gray-300);
+
+  --bs-navy-base: var(--bs-navy-200);
+  --bs-plum-base: var(--bs-plum-100);
+  --bs-purple-base: var(--bs-purple-200);
+  --bs-royal-base: var(--bs-royal-200);
+  --bs-violet-base: var(--bs-violet-200);
+  --bs-gray-dark: var(--bs-gray-100);
+  --bs-gray-base: var(--bs-gray-200);
+  --bs-gray-light: var(--bs-gray-400);
+  --bs-gray-lightest: var(--bs-gray-500);
+
+  --bs-border-dark: var(--bs-gray-400);
+  --bs-border-base: var(--bs-gray-200);
+  --bs-border-light: var(--bs-gray-100);
+
   --bs-shadow-base: rgba(0, 0, 0, 0.06);
   --bs-shadow-invert: rgba(10, 11, 25, 0.60);
   --bs-shadow: -4px 4px 12px var(--bs-shadow-base),
@@ -326,6 +415,12 @@ button {
     -16px 16px 32px var(--bs-shadow-invert);
   --bs-shadow-drawerRight: -12px 12px 24px var(--bs-shadow-base),
     16px 16px 32px var(--bs-shadow-invert);
+
+  /* deprecate / phase out.. */
+  --bs-bg-subtle: #2F2F51;
+  --bs-bg-invert: var(--bs-white);
+  --bs-bg-invert-subtle: var(--bs-gray-100);
+  --bs-border: var(--bs-gray-400);
 }
 
 body,
@@ -862,7 +957,7 @@ table[data-borders^="all"] th {
 /* Table Rows */
 
 table:where([data-rows^="striped"]) tbody > tr:nth-child(even) {
-  background-color: var(--bs-bg-subtle);
+  background-color: var(--bs-bg-medium);
 }
 
 /* Table Cells */