@wwtdev/bsds-css 2.7.0 → 2.7.1

package/dist/wwt-bsds.css

@@ -285,8 +285,8 @@ button {
   --bs-bg-light-to-base: var(--bs-gray-50);
   --bs-bg-medium: var(--bs-gray-100);
   --bs-bg-medium-to-light: var(--bs-gray-100);
-  --bs-bg-invert-base: var(--bs-navy-500);
-  --bs-bg-invert-medium: var(--bs-navy-400);
+  --bs-bg-invert-to-base: var(--bs-navy-500);
+  --bs-bg-invert-to-medium: var(--bs-navy-400);
   --bs-bg-disabled: var(--bs-gray-200);
 
   --bs-hyperlink: var(--bs-purple-400);
@@ -296,7 +296,7 @@ button {
   --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);
+  --bs-ink-invert-to-medium: var(--bs-gray-200);
   --bs-ink-invert-light: var(--bs-gray-300);
   --bs-ink-medium: var(--bs-gray-500);
 
@@ -364,6 +364,7 @@ button {
   --bs-content-max-width: 72rem;
 
   /* Type */
+  --bs-font-light: 300;
   --bs-font-normal: 400;
   --bs-font-bold: 600;
 
@@ -389,8 +390,8 @@ button {
   --bs-bg-light-to-base: var(--bs-navy-600);
   --bs-bg-medium: var(--bs-navy-400);
   --bs-bg-medium-to-light: var(--bs-navy-500);
-  --bs-bg-invert-base: var(--bs-gray-100);
-  --bs-bg-invert-medium: var(--bs-gray-50);
+  --bs-bg-invert-to-base: var(--bs-gray-100);
+  --bs-bg-invert-to-medium: var(--bs-gray-50);
   --bs-bg-disabled: var(--bs-gray-500);
 
   --bs-hyperlink: var(--bs-purple-200);
@@ -609,6 +610,10 @@ h6,
 [data-weight^='400'] {
   font-weight: 400;
 }
+[data-weight^='light'],
+[data-weight^='300'] {
+  font-weight: 300;
+}
 [data-weight^='bold'],
 [data-weight^='600'] {
   font-weight: 600;
@@ -865,6 +870,439 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 *:where([data-scroll="false"]) {
   overflow: hidden;
 }
+/* Color Utilities */
+.bs-bg-base {
+  background-color: var(--bs-bg-base);
+}
+.bs-bg-base-to-light {
+  background-color: var(--bs-bg-base-to-light);
+}
+.bs-bg-base-to-medium {
+  background-color: var(--bs-bg-base-to-medium);
+}
+.bs-bg-light {
+  background-color: var(--bs-bg-light);
+}
+.bs-bg-light-to-base {
+  background-color: var(--bs-bg-light-to-base);
+}
+.bs-bg-medium {
+  background-color: var(--bs-bg-medium);
+}
+.bs-bg-medium-to-light {
+  background-color: var(--bs-bg-medium-to-light);
+}
+.bs-bg-disabled {
+  background-color: var(--bs-bg-disabled);
+}
+.bs-bg-invert-to-medium {
+  background-color: var(--bs-bg-invert-to-medium);
+}
+.bs-bg-invert-to-base {
+  background-color: var(--bs-bg-invert-to-base);
+}
+.bs-border-light {
+  border-color: var(--bs-border-light);
+}
+.bs-border-medium {
+  border-color: var(--bs-border-medium);
+}
+.bs-border-base {
+  border-color: var(--bs-border-base);
+}
+.bs-border-dark {
+  border-color: var(--bs-border-dark);
+}
+.bs-text-ink-light {
+  color: var(--bs-ink-light);
+}
+.bs-bg-ink-light {
+  background-color: var(--bs-ink-light);
+}
+.bs-text-ink-disabled {
+  color: var(--bs-ink-disabled);
+}
+.bs-bg-ink-disabled {
+  background-color: var(--bs-ink-disabled);
+}
+.bs-text-ink-medium {
+  color: var(--bs-ink-medium);
+}
+.bs-bg-ink-medium {
+  background-color: var(--bs-ink-medium);
+}
+.bs-text-ink-base {
+  color: var(--bs-ink-base);
+}
+.bs-bg-ink-base {
+  background-color: var(--bs-ink-base);
+}
+.bs-text-ink-invert-base {
+  color: var(--bs-ink-invert-base);
+}
+.bs-bg-ink-invert-base {
+  background-color: var(--bs-ink-invert-base);
+}
+.bs-text-ink-invert-medium {
+  color: var(--bs-ink-invert-medium);
+}
+.bs-bg-ink-invert-medium {
+  background-color: var(--bs-ink-invert-medium);
+}
+.bs-text-ink-invert-light {
+  color: var(--bs-ink-invert-light);
+}
+.bs-bg-ink-invert-light {
+  background-color: var(--bs-ink-invert-light);
+}
+.bs-text-ink-accent {
+  color: var(--bs-ink-accent);
+}
+.bs-bg-ink-accent {
+  background-color: var(--bs-ink-accent);
+}
+.bs-text-ink-blue {
+  color: var(--bs-ink-blue);
+}
+.bs-bg-ink-blue {
+  background-color: var(--bs-ink-blue);
+}
+.bs-text-ink-red {
+  color: var(--bs-ink-red);
+}
+.bs-bg-ink-red {
+  background-color: var(--bs-ink-red);
+}
+.bs-text-ink-pink {
+  color: var(--bs-ink-pink);
+}
+.bs-bg-ink-pink {
+  background-color: var(--bs-ink-pink);
+}
+.bs-text-ink-orange {
+  color: var(--bs-ink-orange);
+}
+.bs-bg-ink-orange {
+  background-color: var(--bs-ink-orange);
+}
+.bs-text-ink-purple {
+  color: var(--bs-ink-purple);
+}
+.bs-bg-ink-purple {
+  background-color: var(--bs-ink-purple);
+}
+.bs-text-ink-royal {
+  color: var(--bs-ink-royal);
+}
+.bs-bg-ink-royal {
+  background-color: var(--bs-ink-royal);
+}
+.bs-text-ink-plum {
+  color: var(--bs-ink-plum);
+}
+.bs-bg-ink-plum {
+  background-color: var(--bs-ink-plum);
+}
+.bs-text-ink-violet {
+  color: var(--bs-ink-violet);
+}
+.bs-bg-ink-violet {
+  background-color: var(--bs-ink-violet);
+}
+.bs-text-ink-white {
+  color: var(--bs-ink-white);
+}
+.bs-bg-ink-white {
+  background-color: var(--bs-ink-white);
+}
+.bs-text-red-lightest {
+  color: var(--bs-red-lightest);
+}
+.bs-bg-red-lightest {
+  background-color: var(--bs-red-lightest);
+}
+.bs-text-red-light {
+  color: var(--bs-red-light);
+}
+.bs-bg-red-light {
+  background-color: var(--bs-red-light);
+}
+.bs-text-red-medium {
+  color: var(--bs-red-medium);
+}
+.bs-bg-red-medium {
+  background-color: var(--bs-red-medium);
+}
+.bs-text-red-base {
+  color: var(--bs-red-base);
+}
+.bs-bg-red-base {
+  background-color: var(--bs-red-base);
+}
+.bs-text-purple-lightest {
+  color: var(--bs-purple-lightest);
+}
+.bs-bg-purple-lightest {
+  background-color: var(--bs-purple-lightest);
+}
+.bs-text-purple-light {
+  color: var(--bs-purple-light);
+}
+.bs-bg-purple-light {
+  background-color: var(--bs-purple-light);
+}
+.bs-text-purple-medium {
+  color: var(--bs-purple-medium);
+}
+.bs-bg-purple-medium {
+  background-color: var(--bs-purple-medium);
+}
+.bs-text-purple-base {
+  color: var(--bs-purple-base);
+}
+.bs-bg-purple-base {
+  background-color: var(--bs-purple-base);
+}
+.bs-text-blue-lightest {
+  color: var(--bs-blue-lightest);
+}
+.bs-bg-blue-lightest {
+  background-color: var(--bs-blue-lightest);
+}
+.bs-text-blue-light {
+  color: var(--bs-blue-light);
+}
+.bs-bg-blue-light {
+  background-color: var(--bs-blue-light);
+}
+.bs-text-blue-medium {
+  color: var(--bs-blue-medium);
+}
+.bs-bg-blue-medium {
+  background-color: var(--bs-blue-medium);
+}
+.bs-text-blue-base {
+  color: var(--bs-blue-base);
+}
+.bs-bg-blue-base {
+  background-color: var(--bs-blue-base);
+}
+.bs-text-red-lightest {
+  color: var(--bs-red-lightest);
+}
+.bs-bg-red-lightest {
+  background-color: var(--bs-red-lightest);
+}
+.bs-text-red-light {
+  color: var(--bs-red-light);
+}
+.bs-bg-red-light {
+  background-color: var(--bs-red-light);
+}
+.bs-text-red-medium {
+  color: var(--bs-red-medium);
+}
+.bs-bg-red-medium {
+  background-color: var(--bs-red-medium);
+}
+.bs-text-red-base {
+  color: var(--bs-red-base);
+}
+.bs-bg-red-base {
+  background-color: var(--bs-red-base);
+}
+.bs-text-plum-lightest {
+  color: var(--bs-plum-lightest);
+}
+.bs-bg-plum-lightest {
+  background-color: var(--bs-plum-lightest);
+}
+.bs-text-plum-light {
+  color: var(--bs-plum-light);
+}
+.bs-bg-plum-light {
+  background-color: var(--bs-plum-light);
+}
+.bs-text-plum-medium {
+  color: var(--bs-plum-medium);
+}
+.bs-bg-plum-medium {
+  background-color: var(--bs-plum-medium);
+}
+.bs-text-plum-base {
+  color: var(--bs-plum-base);
+}
+.bs-bg-plum-base {
+  background-color: var(--bs-plum-base);
+}
+.bs-text-white {
+  color: var(--bs-white);
+}
+.bs-bg-white {
+  background-color: var(--bs-white);
+}
+.bs-text-royal-lightest {
+  color: var(--bs-royal-lightest);
+}
+.bs-bg-royal-lightest {
+  background-color: var(--bs-royal-lightest);
+}
+.bs-text-royal-light {
+  color: var(--bs-royal-light);
+}
+.bs-bg-royal-light {
+  background-color: var(--bs-royal-light);
+}
+.bs-text-royal-medium {
+  color: var(--bs-royal-medium);
+}
+.bs-bg-royal-medium {
+  background-color: var(--bs-royal-medium);
+}
+.bs-text-royal-base {
+  color: var(--bs-royal-base);
+}
+.bs-bg-royal-base {
+  background-color: var(--bs-royal-base);
+}
+.bs-text-violet-lightest {
+  color: var(--bs-violet-lightest);
+}
+.bs-bg-violet-lightest {
+  background-color: var(--bs-violet-lightest);
+}
+.bs-text-violet-light {
+  color: var(--bs-violet-light);
+}
+.bs-bg-violet-light {
+  background-color: var(--bs-violet-light);
+}
+.bs-text-violet-medium {
+  color: var(--bs-violet-medium);
+}
+.bs-bg-violet-medium {
+  background-color: var(--bs-violet-medium);
+}
+.bs-text-violet-base {
+  color: var(--bs-violet-base);
+}
+.bs-bg-violet-base {
+  background-color: var(--bs-violet-base);
+}
+.bs-text-navy-lightest {
+  color: var(--bs-navy-lightest);
+}
+.bs-bg-navy-lightest {
+  background-color: var(--bs-navy-lightest);
+}
+.bs-text-navy-light {
+  color: var(--bs-navy-light);
+}
+.bs-bg-navy-light {
+  background-color: var(--bs-navy-light);
+}
+.bs-text-navy-medium {
+  color: var(--bs-navy-medium);
+}
+.bs-bg-navy-medium {
+  background-color: var(--bs-navy-medium);
+}
+.bs-text-navy-base {
+  color: var(--bs-navy-base);
+}
+.bs-bg-navy-base {
+  background-color: var(--bs-navy-base);
+}
+.bs-text-orange-lightest {
+  color: var(--bs-orange-lightest);
+}
+.bs-bg-orange-lightest {
+  background-color: var(--bs-orange-lightest);
+}
+.bs-text-orange-light {
+  color: var(--bs-orange-light);
+}
+.bs-bg-orange-light {
+  background-color: var(--bs-orange-light);
+}
+.bs-text-orange-medium {
+  color: var(--bs-orange-medium);
+}
+.bs-bg-orange-medium {
+  background-color: var(--bs-orange-medium);
+}
+.bs-text-orange-base {
+  color: var(--bs-orange-base);
+}
+.bs-bg-orange-base {
+  background-color: var(--bs-orange-base);
+}
+.bs-text-pink-lightest {
+  color: var(--bs-pink-lightest);
+}
+.bs-bg-pink-lightest {
+  background-color: var(--bs-pink-lightest);
+}
+.bs-text-pink-light {
+  color: var(--bs-pink-light);
+}
+.bs-bg-pink-light {
+  background-color: var(--bs-pink-light);
+}
+.bs-text-pink-medium {
+  color: var(--bs-pink-medium);
+}
+.bs-bg-pink-medium {
+  background-color: var(--bs-pink-medium);
+}
+.bs-text-pink-base {
+  color: var(--bs-pink-base);
+}
+.bs-bg-pink-base {
+  background-color: var(--bs-pink-base);
+}
+.bs-text-gray-lightest {
+  color: var(--bs-gray-lightest);
+}
+.bs-bg-gray-lightest {
+  background-color: var(--bs-gray-lightest);
+}
+.bs-text-gray-light {
+  color: var(--bs-gray-light);
+}
+.bs-bg-gray-light {
+  background-color: var(--bs-gray-light);
+}
+.bs-text-gray-medium {
+  color: var(--bs-gray-medium);
+}
+.bs-bg-gray-medium {
+  background-color: var(--bs-gray-medium);
+}
+.bs-text-gray-base {
+  color: var(--bs-gray-base);
+}
+.bs-bg-gray-base {
+  background-color: var(--bs-gray-base);
+}
+.bs-text-gray-dark {
+  color: var(--bs-gray-dark);
+}
+.bs-bg-gray-dark {
+  background-color: var(--bs-gray-dark);
+}
+.bs-text-black {
+  color: var(--bs-black);
+}
+.bs-bg-black {
+  background-color: var(--bs-black);
+}
+.bs-text-warning {
+  color: var(--bs-warning);
+}
+.bs-bg-warning {
+  background-color: var(--bs-warning);
+}
 /* Component Styles */
 .bs-accordion {
   --accordion-link-color: var(--bs-purple-400);
@@ -1077,6 +1515,158 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
     display: inline-flex;
   }
 }
+.bs-chart {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+.bs-chart :where(figure) {
+  -moz-column-gap: 2.5rem;
+       column-gap: 2.5rem;
+  display: grid;
+  font-size: .875rem;
+  grid-template-areas: var(--chart-gridareas, "chart" "legend");
+  grid-template-columns: var(--chart-gridcols, 100%);
+  grid-template-rows: var(--chart-gridrows, minmax(0px, auto) minmax(0px, min-content));
+  height: 100%;
+  margin-block: unset;
+  margin-inline: unset;
+  position: relative;
+  width: 100%;
+}
+.bs-chart :where(figure > :first-child) {
+  grid-area: chart;
+}
+.bs-chart :where(figure > :last-child) {
+  grid-area: legend;
+}
+.bs-chart :where(figure > div) {
+  min-width: 100%;
+  width: 100%;
+}
+.bs-chart :where(canvas) {
+  width: 100%;
+}
+/* --------- Legend Styles --------- */
+.bs-chart :where(figcaption) {
+  background-color: var(--legend-bg-color, transparent);
+  border-radius: .5rem;
+  border: 1px solid var(--legend-border-color, transparent);
+  -webkit-clip-path: var(--legend-clip-path, none);
+          clip-path: var(--legend-clip-path, none);
+  max-height: var(--legend-max-height, 100%);
+  overflow-y: var(--legend-overflow-y, hidden);
+}
+.bs-chart :where(figcaption[data-hidden="true"]) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.bs-chart :where(ul) {
+  align-items: var(--legend-flexalign, center);
+  display: flex;
+  -moz-column-gap: 2.5rem;
+       column-gap: 2.5rem;
+  flex-direction: var(--legend-flexdir, row);
+  flex-wrap: var(--legend-flexwrap, wrap);
+  padding-block: var(--legend-padding-block, .25rem);
+  /* cjs-legend-padding is set dynamically by chart.js for bar charts */
+  padding-inline: var(--legend-padding-inline, var(--cjs-legend-padding-inline, 2.5rem));
+  row-gap: .75rem;
+}
+.bs-chart :where(li, li:focus, li:active, li:focus-visible) {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  outline: 0;
+  position: relative;
+  width: var(--legend-item-width, auto);
+}
+.bs-chart :where(li)::after {
+  border: solid var(--focus-color, transparent) 2px;
+  border-radius: 0.25rem;
+  content: '';
+  display: block;
+  inset: -.25rem;
+  position: absolute;
+}
+.bs-chart :where(li:focus-visible) {
+  --focus-color: var(--bs-blue-base);
+}
+.bs-chart :where(li span) {
+  background: var(--legend-item-box-fill);
+  border-color: var(--legend-item-box-stroke);
+  border-radius: var(--legend-item-swatch-radius, 3px);
+  display: inline-block;
+  height: var(--bs-text-f-md);
+  margin-right: 10px;
+  width: var(--bs-text-f-md);
+}
+.bs-chart :where(li p) {
+  color: var(--legend-item-text-color);
+  font-size: var(--bs-text-f-md);
+  margin: 0;
+  padding: 0;
+  -webkit-text-decoration: var(--legend-item-text-decoration);
+          text-decoration: var(--legend-item-text-decoration);
+}
+/* --------- Chart Layout Variants --------- */
+/*
+For now, per design team instructions, these are NOT responsive as we're only to expose these
+variants for a very specific, single use-case that involves horizontal scroll...
+If we want to make these responsive in the future, can wrap in media query.
+*/
+.bs-chart:where([data-layout="chart-right"], [data-layout="chart-left"]) {
+  --chart-gridrows: minmax(0px, auto);
+  --legend-bg-color: var(--bs-bg-base);
+  --legend-border-color: var(--bs-gray-light);
+  --legend-clip-path: border-box;
+  --legend-flexalign: start;
+  --legend-flexdir: column;
+  --legend-flexwrap: nowrap;
+  --legend-item-width: 100%;
+  --legend-max-height: 17.1875rem;
+  --legend-overflow-y: auto;
+  --legend-padding-block: .75rem;
+  --legend-padding-inline: .75rem;
+}
+.bs-chart:where([data-layout="chart-left"]) {
+  --chart-gridareas: "chart legend";
+  --chart-gridcols: auto minmax(150px, auto);
+}
+.bs-chart:where([data-layout="chart-right"]) {
+  --chart-gridareas: "legend chart";
+  --chart-gridcols: minmax(150px, auto) auto;
+}
+.bs-chart-table {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+/*
+uncomment to make visible when testing
+.bs-chart-table {
+  clip: none;
+  overflow: auto;
+  height: auto;
+  position: relative;
+  width: auto;
+}
+
+*/
 /* Parent */
 .bs-dropdown-parent {
   display: inline-block;
@@ -1442,7 +2032,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 }
 :where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible),
 :where(.box[data-invert]) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
-  --offset-color: var(--bs-bg-invert-base);
+  --offset-color: var(--bs-bg-invert-to-base);
 }
 /* Errors and Messages */
 :is(input, select, textarea):where([data-error]:not([data-error="false"])),
@@ -2219,7 +2809,7 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
 }
 :where(.box[data-invert]) .bs-switch :where(input:focus-visible) + :where(span),
 :where(.box[data-invert]) .bs-switch:where(:focus-visible) :where(button span) {
-  --offset-color: var(--bs-bg-invert-base);
+  --offset-color: var(--bs-bg-invert-to-base);
 }
 /* Disabled state */
 .bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]),
@@ -3192,7 +3782,7 @@ button:where(.bs-filter-button) {
   --pill-background: var(--bs-bg-base);
 }
 :where(.box[data-invert]) .bs-pill {
-  --pill-background: var(--bs-bg-invert-base-subtle);
+  --pill-background: var(--bs-bg-invert-to-base-subtle);
   --pill-text: var(--bs-gray-100);
 }
 :where(.box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {