@wwtdev/bsds-css 2.5.1 → 2.6.0

package/dist/components/_form-booleans.scss

@@ -9,8 +9,8 @@
 }
 
 .bs-boolean:where([data-size='sm']) input {
-  width: var(--bs-text-xs);
-  height: var(--bs-text-xs);
+  height: .75rem;
+  width: .75rem;
 }
 
 .bs-boolean label {
@@ -39,11 +39,8 @@
 
 :where(input[type='checkbox'], input[type='radio']),
 :is(.bs-boolean :where(input), .bs-checkbox) {  /* .bs-checkbox added to accommodate 'fake' cbs */
-  --box-shadow: var(--bs-ink-base);
-
   appearance: none;
-  background-color: var(--bs-bg-base);
-  box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
+  box-shadow: inset 0 0 0 0.125rem var(--box-shadow, var(--bs-ink-base));
   cursor: pointer;
   display: grid;
   height: 1rem;
@@ -71,79 +68,73 @@
   border-radius: 50%;
 }
 
-/* Checkbox's checkmark  */
+/* Checkbox's checkbox, checkmark.  Checkmark is hidden unless checked/indeterminate. */
 input:where([type='checkbox'])::before,
 :is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
-  --filled-size: 1rem;
-  --check-fill-color: var(--bs-blue-base);
-
+  --cb-filled-size: var(--filled-size, 1rem);
   content: '';
   border-radius: 0.125rem;
-  box-shadow: inset var(--filled-size) var(--filled-size) var(--check-fill-color);
-  height: var(--filled-size);
+  box-shadow: inset var(--cb-filled-size) var(--cb-filled-size) var(--fill-bg-color, var(--bs-blue-base));
+  height: var(--cb-filled-size);
   visibility: hidden;
-  width: var(--filled-size);
+  width: var(--cb-filled-size);
 }
 
 input:where([type='checkbox'])::after,
 :is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
-  border: solid var(--bs-white);
+  border: solid var(--bs-bg-base);
   border-width: 0 0.125rem 0.125rem 0;
   content: '';
-  height: 0.75em;
+  height: var(--inner-check-height, 0.75em);
   left: 50%;
   position: absolute;
   top: 50%;
   transform-origin: center;
   transform: translate(-50%, -60%) rotate(45deg);
   visibility: hidden;
-  width: 0.375em;
+  width: var(--inner-check-width, 0.375em);
 }
 
 input:where([type='checkbox']):where(:indeterminate)::after,
 .bs-boolean :where([type="checkbox"]):where(:indeterminate)::after,
 .bs-checkbox:where([data-indeterminate="true"], :indeterminate)::after {
   border: none;
-  background-color: var(--bs-white);
-  height: 0.125rem;
+  background-color: var(--bs-bg-base);
+  height: var(--inner-dash-height, 0.125rem);
   transform: translate(-50%, -0.0625rem) rotate(0deg);
-  width: 0.625em;
+  width: var(--inner-dash-width, 0.625em);
 }
 
-/* Radio's dot */
+/* Radio outer circle, Radio dot.  Dot is hidden unless checked. */
 input:where([type='radio'])::before,
 .bs-boolean :where([type="radio"])::before {
-  --filled-size: 1rem;
-  --radio-fill-color: var(--bs-blue-base);
-
-  background-color: var(--radio-fill-color);
+  --radio-filled-size: var(--filled-size, 1rem);
+  background-color: var(--fill-bg-color, var(--bs-blue-base));
   border-radius: 50%;
   box-sizing: content-box;
   content: '';
-  height: var(--filled-size);
+  height: var(--radio-filled-size);
   visibility: hidden;
-  width: var(--filled-size);
+  width: var(--radio-filled-size);
 }
 
 input:where([type='radio'])::after,
 .bs-boolean :where([type="radio"])::after {
-  --inner-size: 0.375rem;
-  --inner-fill-color: var(--bs-white);
-
-  background-color: var(--inner-fill-color);
+  background-color: var(--bs-bg-base);
   border-radius: 50%;
   box-sizing: content-box;
   content: '';
-  height: var(--inner-size);
+  height: var(--inner-dot-size, 0.375rem);
   left: 50%;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   visibility: hidden;
-  width: var(--inner-size);
+  width: var(--inner-dot-size, 0.375rem);
 }
 
 /* Show checkmark, indeterminate mark, or radio dot */
+
 .bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::before,
 .bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::after,
 input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
@@ -153,61 +144,35 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
   visibility: visible;
 }
 
-.bs-boolean:where([data-size='sm']) input::before,
-.bs-checkbox:where([data-size="sm"])::before {
-  --filled-size: var(--bs-text-xs);
-}
+/* ---------- Sizes ----------- */
 
-.bs-boolean:where([data-size='sm']) input[type='checkbox']::after,
-.bs-checkbox:where([data-size="sm"])::after {
-  height: 0.5625rem;
-  width: 0.3125rem;
+.bs-boolean:where([data-size="sm"]),
+.bs-checkbox:where([data-size="sm"]) {
+  --filled-size: 0.75rem;
+  --inner-check-height: 0.5625rem;
+  --inner-check-width: 0.3125rem;
+  --inner-dash-height: 0.125rem;
+  --inner-dash-width: .75em;
+  --inner-dot-size: 0.25rem;
 }
 
-.bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after,
-.bs-checkbox:where([data-size="sm"][data-indeterminate="true"], [data-size="sm"]:indeterminate)::after  {
-  height: 0.125rem;
-  width: .75em;
-}
+/* ---------- Disabled State ----------- */
 
-.bs-boolean:where([data-size='sm']) input[type='radio']::after {
-  --inner-size: 0.25rem;
-}
-
-
-/* Disabled State */
-
-input:where([type='checkbox'], [type='radio']):disabled,
-.bs-boolean :where(input):disabled,
-.bs-checkbox:is([data-disabled="true"], :disabled) {
-  --box-shadow: var(--bs-bg-disabled);
+:where(input[type="checkbox"], input[type="radio"]):disabled,
+.bs-boolean:where([data-disabled="true"]),
+.bs-checkbox:where([data-disabled="true"]) {
+  --box-shadow: var(--bs-ink-disabled);
+  --fill-bg-color: var(--bs-ink-disabled);
   background-color: transparent;
   cursor: default;
-}
-
-.bs-checkbox:where([data-disabled="true"]:not(input)) {
   pointer-events: none;
 }
 
-input:where([type='checkbox']):checked:disabled::before,
-input:where([type='checkbox']):indeterminate:disabled::before,
-.bs-boolean :where(input[type="checkbox"]):checked:disabled::before,
-.bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before,
-.bs-checkbox:where([data-checked="true"][data-disabled="true"], :checked:disabled)::before,
-.bs-checkbox:where([data-indeterminate="true"][data-disabled="true"], :indeterminate:disabled)::before {
-  --check-fill-color: var(--bs-bg-disabled);
-}
-
-input:where([type='radio']):checked:disabled::before,
-.bs-boolean :where(input[type="radio"]):checked:disabled::before {
-  --radio-fill-color: var(--bs-bg-disabled);
-}
-
-
-/* Error state */
+/* ---------- Error state ----------- */
 
 input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
-.bs-boolean :where(input[data-error="true"]),
+.bs-boolean :where(input[data-error="true"]), /* deprecate this one in favor of next line */
+.bs-boolean:where([data-error="true"]),
 .bs-checkbox:where([data-error="true"]) {
   --box-shadow: var(--bs-red-base);
   --outline-color: var(--bs-red-base);

package/dist/components/_form-character-count.scss

@@ -10,7 +10,7 @@
 :where(:disabled, [data-disabled="true"]) + .bs-character-count,
 :where(:disabled, [data-disabled="true"]) .bs-character-count,
 .bs-character-count:where([data-disabled="true"]) {
-  color: var(--bs-ink-disabled);
+  visibility: hidden;
 }
 
 .bs-character-count:where([data-error="true"]) {

package/dist/components/_form-hints.scss

@@ -1,18 +1,22 @@
 @mixin form-hints() {
   .bs-hint {
   --hint-color: var(--bs-ink-light);
-  min-width: 0;
   color: var(--hint-color);
   font-size: var(--bs-text-xs);
-  padding: 0;
-  margin: 0;
   list-style: none;
+  margin: 0;
+  min-width: 0;
   overflow-wrap: break-word;
+  padding: 0;
 }
 
 .bs-hint:where([data-error]:not([data-error="false"])) {
   --hint-color: var(--bs-ink-red);
 }
 
+:where(:disabled, [data-disabled="true"]) .bs-hint {
+  --hint-color: var(--bs-ink-disabled);
+}
+
   }
   

package/dist/components/_form-input-composite.scss

@@ -7,7 +7,7 @@
 .bs-input-addon {
   --input-border: var(--bs-violet-300);
   align-items: center;
-  background-color: var(--input-bg, var(--bs-bg-base));
+  background-color: var(--input-bg, transparent);
   border-radius: .25rem;
   color: var(--bs-ink-base);
   display: flex;

package/dist/components/_form-text-fields.scss

@@ -22,7 +22,7 @@ textarea,
 select,
 :is(.bs-input, .bs-select, .bs-textarea) {
   appearance: none;
-  background-color: var(--input-bg, var(--bs-bg-base));
+  background-color: var(--input-bg, transparent);
   border-color: var(--input-border, var(--bs-violet-medium));
   border-radius: 0.25rem;
   border-style: solid;

package/dist/components/_modal.scss

@@ -1,6 +1,6 @@
 @mixin modal() {
   .bs-modal {
-  background-color: var(--bs-bg-base-elevated);
+  background-color: var(--bs-bg-base-to-medium);
   border-radius: 4px;
   box-shadow: var(--bs-shadow-contentHigh);
   left: 1.5rem;
@@ -55,5 +55,6 @@
     width: 35rem;
   }
 }
+
   }
   

package/dist/components/_timeline.scss

@@ -22,7 +22,7 @@
 
 .bs-timeline :where(.bs-step-item) {
   align-items: center;
-  color: var(--step-color, var(--bs-ink-disabled));
+  color: var(--step-color, var(--bs-ink-light));
   display: flex;
   flex-direction: column;
   padding-inline: 1rem;

package/dist/components/badge.css

@@ -1,5 +1,5 @@
 .bs-badge {
-  --badge-bg: var(--bs-red-base);
+  --badge-bg: var(--bs-red-400);
   --badge-text: var(--bs-white);
   display: inline-block;
 }

package/dist/components/banner.css

@@ -33,7 +33,7 @@
 }
 
 .bs-banner :where(.bs-banner-content p a) {
-  color: var(--bs-pink-light);
+  color: var(--bs-blue-lightest);
   text-decoration: underline;
 }
 

package/dist/components/buttons.css

@@ -1,21 +1,47 @@
+/*
+--btn-main:  (this is doing too much.. look into backwards-compatible way to break this up)
+    background color (base)
+    focus ring color
+
+background colors:
+--btn-secondary: background color (active, hover)
+--btn-light: background color (ghost hover, ghost focus)
+
+border / box-shadow:
+--btn-ghost-ink: the box shadow color for ghost buttons is synced to ink
+--btn-highlight: box shadow color (w/ --btn-main) (active)
+
+padding:
+--btn-padding: padding (changes by size, and on text btns)
+
+text color:
+--btn-ink: text color
+--btn-ghost-ink: text color (ghost)
+
+*/
+
 .bs-button {
-  --btn-main: var(--bs-blue-400);
-  --btn-secondary: var(--bs-blue-medium);
-  --btn-highlight: var(--bs-blue-100);
-  --btn-padding: .25rem .75rem;
   --btn-focus-pseudo-width: calc(100% + 0.5rem);
   --btn-ghost-ink: var(--bs-ink-blue);
+  --btn-highlight: var(--bs-blue-100);
   --btn-ink: var(--bs-white);
+  --btn-main: var(--bs-blue-400);
+  --btn-padding: .25rem .75rem;
+  --btn-secondary: var(--bs-blue-medium);
+  --btn-text-size: var(--bs-text-md);
+  --btn-weight: 600;
+  --btn-height: 2.5rem;
   align-items: center;
   background-color: var(--btn-main);
   border: none;
   border-radius: 0.25rem;
   color: var(--btn-ink);
+  column-gap: var(--bs-space-2);
   cursor: pointer;
   display: inline-flex;
-  font-size: var(--btn-text-size, var(--bs-text-md));
-  font-weight: var(--btn-weight, 600);
-  height: var(--btn-height, 2.5rem);
+  font-size: var(--btn-text-size);
+  font-weight: var(--btn-weight);
+  height: var(--btn-height);
   justify-content: center;
   line-height: 1.5;
   outline: 2px solid transparent;
@@ -32,9 +58,9 @@
 
 .bs-button:active {
   background-color: var(--btn-secondary);
-  transform: scale(0.97);
-  transform-origin: center;
   box-shadow: inset 0px 0px 4px 1px var(--btn-main);
+  transform-origin: center;
+  transform: scale(0.97);
 }
 
 /* ------------ Focus Styles ------------ */
@@ -73,7 +99,7 @@
   --btn-light: var(--bs-blue-10);
   --btn-secondary: var(--bs-blue-10);
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--btn-main);
+  box-shadow: inset 0 0 0 1px var(--btn-ghost-ink);
 }
 .bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
   border-radius: 0.4375rem;
@@ -90,46 +116,73 @@
 
 /* ------------ VARIANTS ------------ */
 .bs-button:where([data-variant^='secondary']) {
+  --btn-ghost-ink: var(--bs-ink-plum);
+  --btn-highlight: var(--bs-plum-100);
+  --btn-light: var(--bs-plum-10);
   --btn-main: var(--bs-plum-400);
   --btn-secondary: var(--bs-plum-medium);
-  --btn-light: var(--bs-plum-10);
-  --btn-highlight: var(--bs-plum-100);
-  --btn-ghost-ink: var(--bs-ink-plum);
 }
 .dark .bs-button:where([data-variant^='secondary']) {
+  --btn-highlight: var(--bs-plum-400);
+  --btn-light: var(--bs-navy-400);
   --btn-main: var(--bs-plum-200);
   --btn-secondary: var(--bs-plum-300);
-  --btn-light: var(--bs-navy-400);
-  --btn-highlight: var(--bs-plum-400);
 }
 .bs-button:where([data-variant^='positive']) {
+  --btn-ghost-ink: var(--bs-ink-purple);
+  --btn-highlight: var(--bs-purple-100);
+  --btn-light: var(--bs-purple-10);
   --btn-main: var(--bs-purple-400);
   --btn-secondary: var(--bs-purple-medium);
-  --btn-light: var(--bs-purple-10);
-  --btn-highlight: var(--bs-purple-100);
-  --btn-ghost-ink: var(--bs-ink-purple);
 }
 .bs-button:where([data-variant^='warning']) {
+  --btn-ghost-ink: var(--bs-ink-orange);
+  --btn-highlight: var(--bs-orange-100);
+  --btn-light: var(--bs-orange-10);
   --btn-main: var(--bs-orange-warning);
   --btn-secondary: var(--bs-orange-base);
-  --btn-light: var(--bs-orange-10);
-  --btn-highlight: var(--bs-orange-100);
-  --btn-ghost-ink: var(--bs-ink-orange);
 }
 .bs-button:where([data-variant^='negative']) {
+  --btn-ghost-ink: var(--bs-ink-red);
+  --btn-highlight: var(--bs-red-100);
+  --btn-light: var(--bs-red-10);
   --btn-main: var(--bs-red-400);
   --btn-secondary: var(--bs-red-medium);
-  --btn-light: var(--bs-red-10);
-  --btn-highlight: var(--bs-red-100);
-  --btn-ghost-ink: var(--bs-ink-red);
+}
+
+/* pink variant */
+.bs-button:where([data-variant^='pink']) {
+  --btn-ghost-ink: var(--bs-ink-pink);
+  --btn-highlight: var(--bs-pink-400);
+  --btn-light: var(--bs-pink-10);
+  --btn-main: var(--bs-pink-400);
+  --btn-secondary: var(--bs-pink-300);
+}
+
+/* royal blue variant */
+.bs-button:where([data-variant^='royal']) {
+  --btn-ghost-ink: var(--bs-ink-royal);
+  --btn-highlight: var(--bs-royal-400);
+  --btn-light: var(--bs-royal-10);
+  --btn-main: var(--bs-royal-400);
+  --btn-secondary: var(--bs-royal-300);
+}
+
+/* white variant - for dark backgrounds + ghost btn only */
+.bs-button:where([data-variant^='white'][data-ghost]:not([data-ghost="false"])) {
+  --btn-ghost-ink: var(--bs-ink-white);
+  --btn-highlight: var(--bs-ink-white);
+  --btn-light: var(--bs-white-10);
+  --btn-main: var(--bs-ink-white);
 }
 
 /* ------------ Text Button ------------ */
 .bs-button:where([data-text]:not([data-text="false"])) {
+  --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
   --btn-height: auto;
   --btn-ink: var(--bs-ink-blue);
   --btn-padding: 0;
-  --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
+  --btn-secondary: transparent;
   --btn-text-size: var(--bs-text-md);
   --btn-weight: 400;
   background-color: transparent;
@@ -149,6 +202,11 @@
   transform: none;
 }
 
+.bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])),
+.bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])):hover {
+  --btn-ink: var(--bs-ink-red);
+}
+
 /* ------------ Button Sizes, Media-based Text Sizing -------------- */
 /* Std button: Mobile text size, DT text size */
 .bs-button {
@@ -204,7 +262,7 @@
 
 .bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
 .bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
-  box-shadow: inset 0 0 0 1px var(--bs-gray-400);
+  --btn-ghost-ink: var(--bs-ink-disabled);
 }
 
 .bs-button:where([data-text]:not([data-text="false"])):disabled,