@wwtdev/bsds-css 2.5.1 → 2.6.0

package/dist/components/circle-buttons.css

@@ -1,23 +1,48 @@
-.bs-circle-button {
-  --btn-main: var(--bs-blue-base);
-  --btn-secondary: var(--bs-blue-medium);
-  --btn-highlight: var(--bs-blue-lightest);
+/*
+Properties : Defaults // Description
+====================================
+--btn-icon-bg-color: var(--btn-main); // icon bg color (base state)
+--btn-icon-padding: .75rem; // padding around icon svg
+--btn-icon-size: 1.5rem; // svg width and height
+--btn-icon-stroke-color: var(--bs-white);
+--btn-main: var(--bs-blue-base); // many things... should probably break this up
+--btn-text-color: var(--bs-ink-base);
+--btn-text-size: var(--bs-text-md);
+
+--btn-border-color: transparent;  //  focus state outline color - transparent base state, --btn-main base focus state
+--btn-border-color-focused: var(--btn-main); // focus state ring color set on variants
+--btn-secondary: var(--bs-blue-medium); // hover state icon bg
+--btn-shadow-color-active: var(--btn-main); // active state shadow color (icon bg)
+--btn-text-color-hovered: var(--bs-ink-base); // hover state text color
+*/
+
+:where(.bs-circle-button) {
+  --btn-border-color-focused: var(--btn-main);
   --btn-border-color: transparent;
-  --btn-border-radius: 50%;
+  --btn-focus-inset: -0.25rem;
+  --btn-gap: .5rem;
   --btn-icon-bg-color: var(--btn-main);
   --btn-icon-padding: .75rem;
   --btn-icon-size: 1.5rem;
   --btn-icon-stroke-color: var(--bs-white);
+  --btn-main: var(--bs-blue-base);
+  --btn-secondary: var(--bs-blue-medium);
+  --btn-shadow-color-active: var(--btn-main);
+  --btn-text-color-hovered: var(--bs-ink-base);
   --btn-text-color: var(--bs-ink-base);
-  --btn-text-size: var(--bs-text-md);
+  --btn-text-size: 1.125rem;
+  --btn-text-weight: 400;
+}
+
+.bs-circle-button {
   align-items: center;
   background-color: transparent;
-  border-radius: var(--btn-border-radius);
   color: var(--btn-text-color);
   cursor: pointer;
   display: inline-flex;
   font-size: var(--btn-text-size);
-  gap: .5rem;
+  font-weight: var(--btn-text-weight);
+  gap: var(--btn-gap);
   outline: none;
   position: relative;
   vertical-align: middle;
@@ -30,18 +55,6 @@ a.bs-circle-button {
   text-decoration: none;
 }
 
-.bs-circle-button :where(.bs-circle-button-icon)::before {
-  border-color: var(--btn-border-color);
-  border-radius: var(--btn-border-radius);
-  border-style: solid;
-  border-width: 0.125rem;
-  height: calc(100% + 0.5rem);
-  inset: -0.25rem;
-  position: absolute;
-  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
-  width: calc(100% + 0.5rem);
-}
-
 .bs-circle-button :where(.bs-circle-button-icon) {
   align-items: center;
   background-color: var(--btn-icon-bg-color);
@@ -56,6 +69,17 @@ a.bs-circle-button {
   transition: all 100ms ease-in-out;
 }
 
+.bs-circle-button :where(.bs-circle-button-icon)::before {
+  border-color: var(--btn-border-color);
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 0.125rem;
+  content: '';
+  inset: var(--btn-focus-inset);
+  position: absolute;
+  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
+}
+
 .bs-circle-button :where(.bs-circle-button-icon) :where(.bs-icon) {
   --icon-size: var(--btn-icon-size);
 }
@@ -75,27 +99,21 @@ a.bs-circle-button {
 
 /* Ghost Buttons */
 .bs-circle-button:where([data-ghost]:not([data-ghost="false"])) {
+  --btn-icon-bg-color: transparent;
   --btn-icon-stroke-color: var(--btn-main);
   --btn-light: var(--bs-blue-10);
   --btn-secondary: var(--bs-blue-10);
 }
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])) :where(.bs-circle-button-icon) {
-  background-color: transparent;
-  box-shadow: inset 0 0 0 1px transparent;
-  color: var(--btn-icon-stroke-color);
-}
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])) :where(.bs-circle-button-icon)::before {
-  border-radius: 50%;
-}
 
 /* Active, Hover, Focus states */
 .bs-circle-button:active, .bs-circle-button:hover {
   --btn-icon-bg-color: var(--btn-secondary);
+  --btn-text-color: var(--btn-text-color-hovered);
 }
 .bs-circle-button:active :where(.bs-circle-button-icon) {
-  transform: scale(0.97);
+  box-shadow: inset 0px 0px 4px 1px var(--btn-shadow-color-active);
   transform-origin: center;
-  box-shadow: inset 0px 0px 4px 1px var(--btn-main);
+  transform: scale(0.97);
 }
 
 .bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon),
@@ -107,22 +125,12 @@ a.bs-circle-button {
   transform: translateX(-.25rem);
 }
 
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):hover :where(.bs-circle-button-icon) {
-  background-color: var(--btn-light);
-}
-
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):active {
-  box-shadow:
-    inset 0 0 0 1px var(--btn-main),
-    inset 0px 0px 4px 1px var(--btn-highlight);
+.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):hover {
+  --btn-icon-bg-color: var(--btn-light);
 }
 
 .bs-circle-button:where(:focus-visible) {
-  --btn-border-color: var(--btn-main);
-}
-
-.bs-circle-button:where(:focus-visible) :where(.bs-circle-button-icon)::before {
-  content: '';
+  --btn-border-color: var(--btn-border-color-focused);
 }
 
 /* Disabled State */
@@ -131,26 +139,77 @@ a.bs-circle-button {
   --btn-text-color: var(--bs-ink-disabled);
   pointer-events: none;
 }
-.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) :where(.bs-circle-button-icon) {
-  background-color: var(--bs-bg-disabled);
+.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
+  --btn-icon-bg-color: var(--bs-bg-disabled);
 }
 
-
 /* Button Size */
 .bs-circle-button:where([data-size^='sm']) {
   --btn-icon-padding: .375rem;
   --btn-icon-size: .75rem;
-  --btn-text-size: var(--bs-text-sm);
+  --btn-text-size: .875rem;
 }
 
 .bs-circle-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
   --btn-icon-padding: .3125rem;
   --btn-icon-size: .625rem;
-  --btn-text-size: var(--bs-text-base);
+  --btn-text-size: 1rem;
 }
 
 .bs-circle-button:where([data-size='xs'][data-text]:not([data-text="false"])) {
   --btn-icon-padding: .25rem;
   --btn-icon-size: .5rem;
-  --btn-text-size: var(--bs-text-sm);
+  --btn-text-size: .875rem;
+}
+
+/* Color Variants */
+.bs-circle-button:where([data-variant^="color"]) {
+  --btn-focus-inset: .125rem;
+  --btn-gap: 0;
+  --btn-icon-bg-color: transparent;
+  --btn-icon-padding: .5rem;
+  --btn-icon-size: .75rem; /* stays the same for all sizes */
+  --btn-icon-stroke-color: var(--btn-text-color);
+  --btn-secondary: transparent;
+  --btn-shadow-color-active: transparent;
+}
+.bs-circle-button:where([data-variant="color-blue"]) {
+  --btn-border-color-focused: var(--bs-ink-blue);
+  --btn-text-color: var(--bs-ink-blue);
+  --btn-text-color-hovered: var(--bs-blue-base);
+}
+
+.bs-circle-button:where([data-variant="color-royal"]) {
+  --btn-border-color-focused: var(--bs-ink-royal);
+  --btn-text-color: var(--bs-ink-royal);
+  --btn-text-color-hovered: var(--bs-royal-medium);
+}
+
+.bs-circle-button:where([data-variant="color-purple"]) {
+  --btn-border-color-focused: var(--bs-purple-400);
+  --btn-text-color: var(--bs-ink-purple);
+  --btn-text-color-hovered: var(--bs-purple-medium);
+}
+
+.bs-circle-button:where([data-variant="color-pink"]) {
+  --btn-border-color-focused: var(--bs-pink-400);
+  --btn-text-color: var(--bs-ink-pink);
+  --btn-text-color-hovered: var(--bs-pink-base);
+}
+
+.bs-circle-button:where([data-variant="color-red"]) {
+  --btn-border-color-focused: var(--bs-ink-red);
+  --btn-text-color: var(--bs-ink-red);
+  --btn-text-color-hovered: var(--bs-red-base);
+}
+
+.bs-circle-button:where([data-variant^="color"]):where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
+  --btn-icon-bg-color: transparent;
+  --btn-text-color: var(--bs-ink-disabled);
+}
+
+/* size XXS only supported for color variants */
+.bs-circle-button:where([data-variant^="color"]):where([data-size='xxs'][data-text]:not([data-text="false"])) {
+  --btn-text-size: .75rem;
+  --btn-text-weight: 600;
 }

package/dist/components/dropdown-options.css

@@ -95,7 +95,7 @@
 /* Hover or data-selected */
 .bs-dropdown-options :where(li:not([role="separator"]):hover),
 .bs-dropdown-options :where(li[data-selected]) {
-  background-color: var(--bs-bg-medium);
+  background-color: var(--bs-bg-medium-to-light);
   border-left: 4px solid var(--bs-ink-blue);
   color: var(--bs-ink-blue);
   outline: none;

package/dist/components/dropdown.css

@@ -27,7 +27,7 @@
   --dropdown-width: 100%;
   --dropdown-transform: translate(0, 100%);
 
-  background-color: var(--bs-bg-base-elevated);
+  background-color: var(--bs-bg-base-to-medium);
   border-radius: 4px;
   bottom: var(--dropdown-bottom);
   box-shadow: var(--bs-shadow-contentMedium);

package/dist/components/filter-buttons.css

@@ -10,25 +10,32 @@ custom properties:
 */
 
 button:where(.bs-filter-button) {
+  --filterbtn-caret-size: 1rem;
+  --filterbtn-caret-transform: rotate(0deg);
+  --filterbtn-color: var(--bs-ink-blue);
+  --filterbtn-focus-color: transparent;
+  --filterbtn-height: 1.5rem;
+  --filterbtn-text-size: var(--bs-text-base);
+  --filterbtn-weight: 400;
   flex-shrink: 0;
   position: relative;
 }
 
 .bs-filter-button {
   align-items: center;
-  color: var(--filterbtn-color, var(--bs-ink-blue));
+  color: var(--filterbtn-color);
   column-gap: 0.5rem;
   cursor: pointer;
   display: inline-flex;
-  font-size: var(--filterbtn-text-size, var(--bs-text-base));
-  font-weight: var(--filterbtn-weight, 400);
-  height: var(--filterbtn-height, 1.5rem);
+  font-size: var(--filterbtn-text-size);
+  font-weight: var(--filterbtn-weight);
+  height: var(--filterbtn-height);
   line-height: 1.5;
   transition: outline-color 100ms ease-in-out;
   width: max-content;
 }
 .bs-filter-button::after {
-  border: solid var(--filterbtn-focus-color, transparent) 2px;
+  border: solid var(--filterbtn-focus-color) 2px;
   border-radius: 0.25rem;
   content: '';
   display: block;
@@ -41,12 +48,12 @@ button:where(.bs-filter-button) {
 .bs-filter-button :where(.bs-icon),
 .bs-filter-button :where(span:has(svg:only-child)) {
   display: block;
-  height: var(--filterbtn-caret-size, 1rem);
+  height: var(--filterbtn-caret-size);
   line-height: 1;
-  transform: var(--filterbtn-caret-transform, rotate(0deg));
+  transform: var(--filterbtn-caret-transform);
   transform-origin: center;
   transition: var(--bs-trans-rotate180);
-  width: var(--filterbtn-caret-size, 1rem);
+  width: var(--filterbtn-caret-size);
 }
 
 .bs-filter-button:where([data-size="sm"],[data-size="xs"]) {

package/dist/components/form-booleans.css

@@ -8,8 +8,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 {
@@ -38,11 +38,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;
@@ -70,79 +67,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,
@@ -152,61 +143,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.css

@@ -9,7 +9,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.css

@@ -1,14 +1,18 @@
 .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.css

@@ -6,7 +6,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.css

@@ -21,7 +21,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.css

@@ -1,5 +1,5 @@
 .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;
@@ -53,4 +53,4 @@
     transform: translate(-50%, -50%);
     width: 35rem;
   }
-}
+}

package/dist/components/timeline.css

@@ -21,7 +21,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/wwt-bsds-preset.js

@@ -16,6 +16,7 @@ module.exports = {
       inherit: 'inherit',
       current: 'currentColor',
       white: "#FFFFFF",
+      "white-10": "rgba(255, 255, 255, 0.1)",
       black: "#0A0B19",
       blue: {
         10: "rgba(0, 134, 234, 0.1)",
@@ -41,6 +42,7 @@ module.exports = {
         400: "#1C0087"
       },
       royal: {
+        10: "rgba(22, 47, 180, 0.1)",
         100: "#C5CCEB",
         200: "#7585D1",
         300: "#5365C4",
@@ -69,6 +71,7 @@ module.exports = {
         500: "#C33D04"
       },
       pink: {
+        10: "rgba(227, 28, 121, 0.1)",
         100: "#F6CBE0",
         200: "#EB7EAF",
         300: "#E45E9B",

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

@@ -6,6 +6,7 @@
   --bs-inherit: inherit;
   --bs-current: currentColor;
   --bs-white: #ffffff;
+  --bs-white-10: rgba(255, 255, 255, 0.1);
   --bs-black: #0a0b19;
   --bs-blue-10: rgba(0, 134, 234, 0.1);
   --bs-blue-100: #99cff7;
@@ -24,6 +25,7 @@
   --bs-plum-200: #7766b7;
   --bs-plum-300: #49339f;
   --bs-plum-400: #1c0087;
+  --bs-royal-10: rgba(22, 47, 180, 0.1);
   --bs-royal-100: #c5cceb;
   --bs-royal-200: #7585d1;
   --bs-royal-300: #5365c4;
@@ -44,6 +46,7 @@
   --bs-orange-300: #f97c4c;
   --bs-orange-400: #fb550e;
   --bs-orange-500: #c33d04;
+  --bs-pink-10: rgba(227, 28, 121, 0.1);
   --bs-pink-100: #f6cbe0;
   --bs-pink-200: #eb7eaf;
   --bs-pink-300: #e45e9b;
@@ -311,7 +314,7 @@ button {
 
   --bs-ink-accent: var(--bs-plum-400);
   --bs-ink-base: var(--bs-black);
-  --bs-ink-disabled: var(--bs-gray-400);
+  --bs-ink-disabled: rgba(78, 79, 95, 0.6); /* --bs-gray-400 at .6 */
   --bs-ink-light: var(--bs-gray-400);
   --bs-ink-invert-base: var(--bs-gray-100);
   --bs-ink-invert-medium: var(--bs-gray-200);
@@ -416,7 +419,7 @@ button {
 
   --bs-ink-accent: var(--bs-gray-100);
   --bs-ink-base: var(--bs-gray-100);
-  --bs-ink-disabled: var(--bs-gray-300);
+  --bs-ink-disabled: rgba(163, 164, 183, 0.6); /* --bs-gray-300 at .6 opacity */
   --bs-ink-invert-base: var(--bs-black);
   --bs-ink-invert-medium: var(--bs-gray-500);
   --bs-ink-invert-light: var(--bs-gray-400);