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

package/dist/components/_buttons.scss

@@ -1,289 +0,0 @@
-@mixin buttons() {
-  /*
---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: max(fit-content, 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.scss

@@ -1,169 +0,0 @@
-@mixin chart() {
-  .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;
-}
-
-*/
-
-  }
-  

package/dist/components/_circle-buttons.scss

@@ -1,231 +0,0 @@
-@mixin circle-buttons() {
-  /*
-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-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: 1.125rem;
-  --btn-text-weight: 400;
-}
-
-.bs-circle-button {
-  align-items: center;
-  background-color: transparent;
-  color: var(--btn-text-color);
-  cursor: pointer;
-  display: inline-flex;
-  font-size: var(--btn-text-size);
-  font-weight: var(--btn-text-weight);
-  gap: var(--btn-gap);
-  outline: none;
-  position: relative;
-  vertical-align: middle;
-}
-
-a.bs-circle-button {
-  align-items: center;
-  display: inline-flex;
-  outline: none;
-  text-decoration: none;
-}
-
-.bs-circle-button :where(.bs-circle-button-icon) {
-  align-items: center;
-  background-color: var(--btn-icon-bg-color);
-  border: none;
-  border-radius: 50%;
-  color: var(--btn-icon-stroke-color);
-  display: inline-flex;
-  justify-content: center;
-  outline: 2px solid transparent;
-  padding: var(--btn-icon-padding);
-  position: relative;
-  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);
-}
-
-/* non-bs-icon svgs */
-.bs-circle-button :where(.bs-circle-button-icon) > :where(svg) {
-  height: var(--btn-icon-size);
-  width: var(--btn-icon-size);
-}
-
-/* Icon Buttons with Text */
-.bs-circle-button:where([data-text]:not([data-text="false"])) {
-  --btn-text-size: var(--bs-text-md);
-  --btn-icon-size: 0.75rem;
-  --btn-icon-padding: 0.375rem;
-}
-
-/* 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);
-}
-
-/* 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) {
-  box-shadow: inset 0px 0px 4px 1px var(--btn-shadow-color-active);
-  transform-origin: center;
-  transform: scale(0.97);
-}
-
-.bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon),
-.bs-circle-button:where([data-direction="right"]):hover::before {
-  transform: translateX(.25rem);
-}
-.bs-circle-button:where([data-direction="left"]):hover :where(.bs-circle-button-icon),
-.bs-circle-button:where([data-direction="left"]):hover::before {
-  transform: translateX(-.25rem);
-}
-
-.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-border-color-focused);
-}
-
-/* Disabled State */
-.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) /* for links as buttons */ {
-  --btn-icon-stroke-color: var(--bs-ink-disabled);
-  --btn-text-color: var(--bs-ink-disabled);
-  pointer-events: none;
-}
-.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: .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: 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: .875rem;
-}
-
-/* Color Variants */
-.bs-circle-button:where([data-variant^="color"]) {
-  --btn-gap: .5rem;
-  --btn-icon-bg-color: transparent;
-  --btn-icon-padding: 0;
-  --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-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);
-  --btn-text-color-hovered: var(--bs-red-base);
-}
-
-.bs-circle-button:where([data-variant="color-white"]) {
-  --btn-border-color-focused: var(--bs-ink-white);
-  --btn-text-color: var(--bs-ink-white);
-  /* 80% of --bs-white */
-  --btn-text-color-hovered: rgba(255, 255, 255, 0.8);
-}
-
-.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;
-}
-
-  }
-