@wwtdev/bsds-css 2.18.0 → 2.19.0

package/dist/components/banner.css

@@ -1,12 +1,18 @@
+:where(.bs-banner) {
+  --banner-bg: var(--bs-royal-400);
+  --banner-icon-display: none;
+  --banner-padding: var(--banner-padding-m);
+  --banner-padding-m: 1rem 1.5rem;
+  --banner-padding-dt: .5rem 2.25rem;
+}
+
 .bs-banner {
-  background-color: var(--bs-royal-400);
-  color: var(--bs-gray-100);
+  background-color: var(--banner-bg);
+  color: var(--bs-ink-white);
   display: flex;
   justify-content: center;
-  padding-bottom: 1rem;
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  padding-top: 1rem;
+  min-height: 3rem;
+  padding: var(--banner-padding);
 }
 
 .bs-banner:where([data-dismissed]:not([data-dismissed="false"])) {
@@ -23,7 +29,7 @@
 
 .bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
   /* Do not display icon on smaller screens */
-  display: none;
+  display: var(--banner-icon-display);
   margin-right: 0.625rem;
 }
 
@@ -33,18 +39,26 @@
 }
 
 .bs-banner :where(.bs-banner-content p a) {
-  color: var(--bs-blue-lightest);
   text-decoration: underline;
 }
 
+.bs-banner :where(a:hover) {
+  color: rgba(255, 255, 255, 0.8);
+}
+
 .bs-banner :where(.bs-banner-content button) {
   background-color: inherit;
   color: inherit;
   cursor: pointer;
 }
 
+.bs-banner:where([data-variant="negative"]) {
+  --banner-bg: var(--bs-red-300);
+}
+
 @media (min-width: 957px) {
-  .bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
-    display: inline-flex;
+  .bs-banner {
+    --banner-icon-display: inline-flex;
+    --banner-padding: var(--banner-padding-dt);
   }
 }

package/dist/components/circle-buttons.css

@@ -196,6 +196,12 @@ a.bs-circle-button {
   --btn-text-color-hovered: var(--bs-pink-base);
 }
 
+.bs-circle-button:where([data-variant="color-orange"]) {
+  --btn-border-color-focused: var(--bs-ink-orange);
+  --btn-text-color: var(--bs-ink-orange);
+  --btn-text-color-hovered: var(--bs-orange-base);
+}
+
 .bs-circle-button:where([data-variant="color-red"]) {
   --btn-border-color-focused: var(--bs-ink-red);
   --btn-text-color: var(--bs-ink-red);

package/dist/components/form-field-details.css

@@ -3,7 +3,6 @@
   justify-content: space-between;
   align-items: flex-start;
   gap: var(--bs-space-2);
-  padding: 0 0.75rem;
   margin-top: 0.5rem;
 }
 

package/dist/components/form-input-composite.css

@@ -4,9 +4,9 @@
 }
 
 .bs-input-addon {
-  --input-border: var(--bs-violet-300);
+  --input-border: var(--bs-border-input);
   align-items: center;
-  background-color: var(--input-bg, transparent);
+  background-color: var(--input-bg, var(--bs-bg-base));
   border-radius: .25rem;
   color: var(--bs-ink-base);
   display: flex;
@@ -17,13 +17,17 @@
   position: relative;
 }
 
+:where(.dark) .bs-input-addon {
+  background-color: var(--input-bg, transparent);
+}
+
 .bs-input-addon * {
   background-color: transparent;
 }
 
 /* Fix issue in Windows, where <select> options would be invisible, due to background-color: transparent */
 .bs-input-addon :where(.bs-select, select) {
-  background-color: var(--bs-bg-base);
+  background-color: var(--input-bg, var(--bs-bg-base));
 }
 
 /**
@@ -49,11 +53,16 @@ and issues with box-sizing
 }
 
 .bs-input-addon::after {
+  border-color: var(--input-border);
   border-radius: .25rem;
-  border: 1px solid var(--input-border);
+  border-style: solid;
+  border-width: var(--input-border-width, 1px);
 }
+
 .bs-input-addon :where(.bs-input-addon)::after {
-  border: 1px solid var(--input-addon-nested-border);
+  border-color: var(--input-addon-nested-border);
+  border-style: solid;
+  border-width: var(--input-border-width, 1px);
 }
 
 .bs-input-addon > * {
@@ -111,7 +120,7 @@ and issues with box-sizing
 /** Inner borders should be straight; shown only if variant: "inner-bordered" */
 
 .bs-input-addon:where([data-variant="inner-bordered"]) {
-  --input-addon-nested-border: var(--bs-violet-lightest);
+  --input-addon-nested-border: var(--bs-violet-200);
 }
 
 .bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within, [data-part="right"])),
@@ -176,13 +185,6 @@ and issues with box-sizing
   width: 1rem;
 }
 
-/* -------- Hover styles -------- */
-.bs-input-addon:hover,
-:where(label):hover + .bs-input-addon,
-:where(label):hover + * .bs-input-addon:where(:not(label .bs-input-addon, label + .bs-input-addon)) {
-  --input-bg: var(--bs-bg-input-hover);
-}
-
 /* -------- Focus styles -------- */
 .bs-input-addon {
   --focus-border: var(--bs-blue-base);
@@ -247,6 +249,15 @@ and issues with box-sizing
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
   pointer-events: none;
 }
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"]))::after,
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"]))::before,
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])):where([data-variant="inner-bordered"]) {
+  --input-border-width: 0;
+}
+
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])):where([data-variant="inner-bordered"]) > :where(:not(:focus, :focus-within))::after {
+  border-right-width: 0;
+}
 
 /* -------- Error styles -------- */
 .bs-input-addon:where([data-error]:not([data-error="false"])),

package/dist/components/form-input-phone.css

@@ -7,6 +7,11 @@
   min-width: 6rem;
   padding: 0 1rem;
 }
+
+.bs-input-phone .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) :where(button) :where(span) {
+  filter: grayscale(1);
+}
+
 .bs-input-phone ul:where(.bs-dropdown-options) {
   min-width: 7.5rem;
 }

package/dist/components/form-text-fields.css

@@ -21,8 +21,8 @@ textarea,
 select,
 :is(.bs-input, .bs-select, .bs-textarea) {
   appearance: none;
-  background-color: var(--input-bg, transparent);
-  border-color: var(--input-border, var(--bs-violet-medium));
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border-color: var(--input-border, var(--bs-border-input));
   border-radius: 0.25rem;
   border-style: solid;
   border-width: var(--input-border-width, 1px);
@@ -36,6 +36,13 @@ select,
   padding-inline: var(--input-padding-inline, 0.75rem);
 }
 
+:where(.dark) input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
+:where(.dark) textarea,
+:where(.dark) select,
+:where(.dark) :is(.bs-input, .bs-select, .bs-textarea) {
+  --input-bg: transparent;
+}
+
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea,
 select,
@@ -60,15 +67,21 @@ textarea {
 :is(input, textarea, select)::placeholder,
 :is(.bs-input, .bs-select, .bs-textarea)::placeholder,
 :is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
-  color: var(--input-placeholder, var(--bs-violet-lightest));
+  color: var(--input-placeholder, var(--bs-violet-100));
 }
+
+:where(.dark) :is(input, textarea, select)::placeholder,
+:where(.dark) :is(.bs-input, .bs-select, .bs-textarea)::placeholder,
+:where(.dark) :is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
+  --input-placeholder: var(--bs-violet-200);
+}
+
 :is(input, textarea, select):where(:focus-visible)::placeholder,
 :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::placeholder {
   opacity: 0;
 }
 
 /* FOCUS state */
-
 :is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible),
 :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible),
 :is(select, .bs-select):where(:focus) {
@@ -77,15 +90,7 @@ textarea {
   outline-width: 0px;
 }
 
-/* HOVER state */
-
-:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:hover),
-:is(.bs-input, .bs-select, .bs-textarea):where(:hover) {
-  --input-bg: var(--bs-bg-input-hover);
-}
-
 /* DISABLED state */
-
 :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
 :is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
   --input-border: var(--bs-ink-disabled);
@@ -94,7 +99,10 @@ textarea {
 }
 
 /* Text inputs should not have a border when disabled */
-:is(input:where(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="url"])):where(:disabled) {
+:is(input:where(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="url"])):where(:disabled),
+textarea:where(:disabled),
+select:where(:disabled),
+:is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
   --input-border-width: 0px;
 }
 
@@ -145,16 +153,10 @@ select[multiple],
 
 :where(.dark) select,
 :where(.dark) .bs-select {
-  --input-bg: var(--bs-bg-base);
   /* URL Encoded SVG dropdown caret so there is something there */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
 }
 
-:where(.dark .box) select,
-:where(.dark .box) .bs-select {
-  --input-bg: var(--bg-color, var(--bs-bg-subtle));
-}
-
 :where(.dark) select:where(:disabled),
 :where(.dark) .bs-select:where(:disabled) {
   /* URL Encoded SVG dropdown caret so there is something there */

package/dist/wwt-bsds-preset.js

@@ -171,7 +171,8 @@ module.exports = {
         "dark": "var(--bs-border-dark)",
         "base": "var(--bs-border-base)",
         "medium": "var(--bs-border-medium)",
-        "light": "var(--bs-border-light)"
+        "light": "var(--bs-border-light)",
+        "input": "var(--bs-border-input)",
       },
       borderRadius: {
         md: ".25rem"

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

@@ -387,6 +387,7 @@ button {
   --bs-border-base: var(--bs-gray-200);
   --bs-border-medium: var(--bs-gray-150);
   --bs-border-light: var(--bs-gray-100);
+  --bs-border-input: rgba(99, 66, 145, 0.75); /* --bs-violet-300 at .75 opacity */
 
   /* Spacing */
   --bs-content-top: 4rem;
@@ -447,7 +448,7 @@ button {
   --bs-ink-plum: var(--bs-plum-100);
   --bs-ink-purple: var(--bs-purple-200);
   --bs-ink-red: var(--bs-red-200);
-  --bs-ink-royal: var(--bs-royal-100);
+  --bs-ink-royal: var(--bs-royal-200);
   --bs-ink-violet: var(--bs-violet-200);
 
   --bs-blue-base: var(--bs-blue-300);
@@ -473,6 +474,7 @@ button {
   --bs-border-base: rgba(163, 164, 183, 0.7); /* --bs-gray-300 at .7 opacity */
   --bs-border-medium: var(--bs-gray-400);
   --bs-border-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
+  --bs-border-input: var(--bs-violet-200);
 
   --bs-shadow-base: rgba(0, 0, 0, 0.06);
   --bs-shadow-invert: rgba(10, 11, 25, 0.60);
@@ -891,7 +893,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 /* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
 
 .box {
-  background: var(--bg-color, var(--bs-bg-subtle));
+  background: var(--bg-color, var(--bs-bg-medium-to-light));
   border-radius: 0.25rem;
   padding: var(--box-space, var(--bs-space-6));
 }