@wwtdev/bsds-css 2.28.0 → 3.0.0-rc.21

package/dist/components/badge.css

@@ -1,91 +0,0 @@
-.bs-badge {
-  --badge-bg: var(--bs-red-400);
-  --badge-text: var(--bs-white);
-  display: inline-block;
-}
-
-/* ------ Badge wrapped around text ------ */
-
-/* Badge DOT */
-.bs-badge:where([data-position^='left'])::before,
-.bs-badge:where(:not([data-position^='left']))::after {
-  align-items: center;
-  background: var(--badge-bg);
-  border-radius: 0.5rem;
-  content: '';
-  display: inline-flex;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  height: 6px;
-  justify-content: center;
-  line-height: 1.25;
-  position: relative;
-  vertical-align: top;
-  width: 6px;
-}
-
-.bs-pill .bs-badge::before,
-.bs-pill .bs-badge::after {
-  font-size: 0.8125em;
-}
-
-/* Badge COUNT */
-
-.bs-badge:where([data-count][data-position^='left'])::before,
-.bs-badge:where([data-count]:not([data-position^='left']))::after {
-  color: var(--badge-text);
-  content: attr(data-count);
-  height: 1rem;
-  min-width: 1rem;
-  padding: 0 4px;
-  top: -0.0625rem;
-  vertical-align: unset;
-  width: auto;
-}
-
-.bs-badge:where([data-count='0'])::before,
-.bs-badge:where([data-count='0'])::after {
-  display: none;
-}
-
-.bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::before,
-.bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::after {
-  display: inline-flex;
-}
-
-/* Badge SPACING against wrapped text */
-
-.bs-badge::before {
-  margin-right: 0.25rem;
-}
-
-.bs-badge::after {
-  margin-left: 0.25rem;
-}
-
-/* Badge COLORS */
-
-.bs-badge:where([data-badge-color^='blue']) {
-  --badge-bg: var(--bs-blue-base);
-}
-.bs-badge:where([data-badge-color^='white']) {
-  --badge-bg: var(--bs-white);
-  --badge-text: var(--bs-black);
-}
-
-/* ------ Standalone Badge (not wrapped around text) ------ */
-.bs-badge:where([data-variant="notext"]) {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-}
-
-.bs-badge:where([data-variant="notext"]) {
-  line-height: 1;
-}
-
-.bs-badge:where([data-variant="notext"])::after,
-.bs-badge:where([data-variant="notext"])::before {
-  margin: 0;
-  top: unset;
-}

package/dist/components/banner.css

@@ -1,64 +0,0 @@
-: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(--banner-bg);
-  color: var(--bs-ink-white);
-  display: flex;
-  justify-content: center;
-  min-height: 3rem;
-  padding: var(--banner-padding);
-}
-
-.bs-banner:where([data-dismissed]:not([data-dismissed="false"])) {
-  display: none;
-}
-
-.bs-banner :where(.bs-banner-content) {
-  align-items: center;
-  display: flex;
-  /* Content locks at globally configured width */
-  max-width: var(--bs-content-max-width);
-  width: 100%;
-}
-
-.bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
-  /* Do not display icon on smaller screens */
-  display: var(--banner-icon-display);
-  margin-right: 0.625rem;
-}
-
-.bs-banner :where(.bs-banner-content p) {
-  flex-grow: 1;
-  padding-right: 1.25rem;
-}
-
-.bs-banner :where(.bs-banner-content p a) {
-  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 {
-    --banner-icon-display: inline-flex;
-    --banner-padding: var(--banner-padding-dt);
-  }
-}

package/dist/components/buttons.css

@@ -1,285 +0,0 @@
-/*
---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-focus-inset: -0.25rem;
-  --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);
-  font-weight: var(--btn-weight);
-  height: var(--btn-height);
-  justify-content: center;
-  line-height: 1.5;
-  outline: 2px solid transparent;
-  padding: var(--btn-padding);
-  position: relative;
-  text-decoration: none;
-  transition: all 100ms ease-in-out;
-  vertical-align: middle;
-}
-
-.bs-button:where(:not(:disabled):not([aria-disabled="true"]):hover) {
-  background-color: var(--btn-secondary);
-}
-
-.bs-button:where(:not(:disabled):not([aria-disabled="true"]):active) {
-  background-color: var(--btn-secondary);
-  box-shadow: inset 0px 0px 4px 1px var(--btn-main);
-  transform-origin: center;
-  transform: scale(0.97);
-}
-
-/* ------------ Focus Styles ------------ */
-.bs-button::before {
-  border-color: transparent;
-  border-radius: 0.5rem;
-  border-style: solid;
-  border-width: 0.125rem;
-  content: '';
-  height: calc(100% + 0.5rem);
-  inset: var(--btn-focus-inset);
-  position: absolute;
-  transition: border-color 0.125s ease-in-out;
-  width: var(--btn-focus-pseudo-width);
-}
-
-.bs-button:where(:focus:not(:disabled):not([aria-disabled="true"]))::before {
-  border-color: var(--btn-main);
-}
-
-.bs-button:where(:focus-visible:not(:disabled):not([aria-disabled="true"]))::before {
-  border-color: var(--btn-main);
-  box-shadow: none;
-}
-
-.bs-button:where(:focus:not(:focus-visible):not(:disabled):not([aria-disabled="true"]))::before {
-  border-color: transparent;
-  box-shadow: none;
-}
-
-/* ------------ Ghost Buttons ------------ */
-.bs-button:where([data-ghost]:not([data-ghost="false"])) {
-  --btn-ink: var(--btn-ghost-ink);
-  --btn-light: var(--bs-blue-10);
-  --btn-secondary: var(--bs-blue-10);
-  background-color: transparent;
-  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;
-}
-.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):hover),
-.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):focus) {
-  background-color: var(--btn-light);
-}
-.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):active) {
-  box-shadow:
-    inset 0 0 0 1px var(--btn-main),
-    inset 0px 0px 4px 1px var(--btn-highlight);
-}
-
-/* ------------ 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-base);
-  --btn-secondary: var(--bs-plum-medium);
-}
-.dark .bs-button:where([data-variant^='secondary']) {
-  --btn-highlight: var(--bs-plum-400);
-  --btn-light: var(--bs-navy-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);
-}
-.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);
-}
-.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);
-}
-
-/* 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 or text 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-inset: -0.25rem -0.5rem;
-  --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-secondary: transparent;
-  --btn-text-size: var(--bs-text-md);
-  --btn-weight: 400;
-  background-color: transparent;
-  cursor: pointer;
-  line-height: 150%;
-}
-.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
-  --btn-ink: var(--bs-blue-base);
-  background-color: transparent;
-  text-decoration: underline;
-}
-.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover):has(svg) {
-  text-decoration: none;
-}
-.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):active) {
-  box-shadow: none;
-  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"]):not(:disabled):not([aria-disabled="true"]):hover) {
-  --btn-ink: var(--bs-ink-red);
-}
-
-.bs-button:where([data-variant^='white'][data-text]:not([data-text="false"])),
-.bs-button:where([data-variant^='white'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
-  --btn-ink: var(--bs-ink-white);
-  --btn-main: var(--bs-ink-white);
-}
-
-/* ------------ Button Sizes, Media-based Text Sizing -------------- */
-/* Std button: Mobile text size, DT text size */
-.bs-button {
-  --btn-text-size: 1rem;
-}
-
-@media (min-width: 1166px) {
-  .bs-button {
-    --btn-text-size: 1.125rem;
-  }
-}
-
-.bs-button:where([data-size^='sm']) {
-  --btn-height: 1.75rem;
-  --btn-padding: .25rem .75rem .375rem;
-  /* Std button size="sm" text size is same across all media sizes */
-  --btn-text-size: var(--bs-text-sm);
-}
-
-/* Text buttons: For now, text size not dependent on media size */
-.bs-button:where([data-text]:not([data-text="false"])) {
-  --btn-height: auto;
-  --btn-padding: 0;
-  --btn-text-size: var(--bs-text-md);
-}
-
-.bs-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
-  --btn-text-size: var(--bs-text-base);
-}
-
-/* Size XS & XXS only applies to text buttons */
-.bs-button:where([data-size^='xs'][data-text]:not([data-text="false"])) {
-  --btn-text-size: var(--bs-text-sm);
-}
-
-.bs-button:where([data-size^='xxs'][data-text]:not([data-text="false"])) {
-  --btn-text-size: var(--bs-text-xs);
-  --btn-weight: 600;
-}
-
-
-/* ------------ Disabled Styling ------------ */
-:where(button:disabled),
-.bs-button:where(:disabled),
-.bs-button:where([aria-disabled="true"]) /* for links as buttons */ {
-  pointer-events: none;
-}
-.bs-button:where(:disabled),
-.bs-button:where([aria-disabled="true"]) {
-  --btn-ink: var(--bs-ink-disabled);
-  --btn-main: var(--bs-bg-disabled);
-  box-shadow: none;
-  transform: none;
-}
-
-.bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
-.bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
-  --btn-ghost-ink: var(--bs-ink-disabled);
-}
-
-.bs-button:where([data-text]:not([data-text="false"])):disabled,
-.bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
-  --btn-main: transparent;
-}
-
-/* ------------ links as buttons ------------ */
-a.bs-button {
-  align-items: center;
-  display: inline-flex;
-  outline: none;
-  vertical-align: middle;
-}

package/dist/components/chart.css

@@ -1,165 +0,0 @@
-.bs-chart {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-.bs-chart :where(figure) {
-  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);
-  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;
-  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;
-  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;
-}
-
-*/