@wwtdev/bsds-css 1.0.1 → 1.1.0

package/README.md

@@ -28,14 +28,15 @@ module.exports = {
 
 ### 2. Tailwind CSS Directives
 
-Because our CSS Framework includes its own reset and default styles, you will only need to include the `utilities` directive.
+To prevent conflicts with our CSS Framework, only include the `base` and `utilities` directives.
+
+Since our CSS has its own reset and default styles, we prevent Tailwind's `base` reset styles from loading, via a setting in our WWT Preset. The only styles that will be used from `base` are Tailwind CSS variables, which are needed in order to ensure all Tailwind classes work as expected.
 
 ```css
+@tailwind base;
 @tailwind utilities;
 ```
 
-> Tailwind's base and component directives will cause conflicts with the CSS Framework.
-
 Once you have completed the Tailwind installation steps, you can use the classes generated from the preset.
 
 ### Browser Support

package/dist/components/_accordions.scss

@@ -0,0 +1,111 @@
+@mixin accordions() {
+  .bs-accordion {
+  --accordion-link-color: var(--bs-purple-400);
+  --accordion-link-outline-color: var(--bs-blue-400);
+  --accordion-outline-color: transparent;
+  --accordion-padding-inline: 0;
+  --accordion-text-size: var(--bs-text-sm);
+  border-block: 1px solid var(--bs-border);
+  display: block;
+}
+
+@media (min-width: 957px) {
+  .bs-accordion {
+    --accordion-padding-inline: var(--bs-space-2);
+    --accordion-text-size: var(--bs-text-base);
+  }
+}
+
+/* Accordion Panel (Icon, Title, Caret) */
+
+.bs-accordion :where(header button) {
+  align-items: center;
+  background-color: var(--bs-bg-base);
+  border: 0px solid transparent;
+  border-radius: .25rem;
+  color: var(--bs-ink-base);
+  cursor: pointer;
+  display: grid;
+  font-size: var(--accordion-text-size);
+  font-weight: var(--bs-font-normal);
+  grid-template-columns: minmax(0px, auto) minmax(0px, 1fr) minmax(0px, auto);
+  grid-template-areas: "start main end";
+  line-height: 1.5;
+  outline: 2px solid var(--accordion-outline-color);
+  padding-block: var(--bs-space-f-2);
+  padding-inline: var(--accordion-padding-inline);
+  width: 100%;
+}
+
+.bs-accordion :where(header button:focus-visible) {
+  --accordion-outline-color: var(--bs-blue-400);
+}
+
+.bs-accordion :where(header button) > * {
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.bs-accordion :where(header button) :where([data-position]) {
+  width: var(--accordion-text-size);
+}
+
+.bs-accordion :where(header button) > :where([data-position="start"]) {
+  grid-area: start;
+  margin-right: var(--bs-space-2);
+}
+
+.bs-accordion :where(header button) > :where([data-position="end"]) {
+  grid-area: end;
+  transform: rotate(0);
+  transition: transform 250ms ease-out;
+}
+
+.bs-accordion :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
+  transform: rotate(180deg);
+}
+
+.bs-accordion :where(header button) > :where(h2, h3, h4, h5) {
+  grid-area: main;
+  margin-right: var(--bs-space-2);
+  text-align: left;
+}
+
+.bs-accordion :where(header button) > :where(h2, h3, h4, h5) :where(*) {
+  vertical-align: middle;
+}
+
+@media (min-width: 957px) {
+  .bs-accordion :where(header button) > :where(h2, h3, h4, h5) {
+    margin-right: var(--bs-space-3);
+  }
+}
+
+/* Accordion Content (the collapsible / expandible part) */
+
+.bs-accordion :where(.bs-accordion-content) {
+  display: grid;
+  font-size: var(--accordion-text-size);
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  padding-inline: var(--accordion-padding-inline);
+  transition: grid-template-rows 250ms ease-out;
+}
+
+.bs-accordion :where(.bs-accordion-content) > :where(:first-child) {
+  overflow: hidden;
+}
+
+.bs-accordion :where(.bs-accordion-content[data-open]:not([data-open="false"])) {
+  grid-template-rows: 1fr;
+  padding-block-end: var(--bs-space-f-2);
+}
+
+/* Accordion Group */
+:where(.bs-accordion[data-stacked]) + .bs-accordion:where([data-stacked]) {
+  border-block-start-color: transparent;
+}
+
+  }
+  

package/dist/components/_banner.scss

@@ -0,0 +1,66 @@
+@mixin banner() {
+  .bs-banner {
+  background-color: var(--bs-bg-invert-subtle);
+  color: var(--bs-gray-100);
+  display: flex;
+  justify-content: center;
+  padding-bottom: 1rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 1rem;
+}
+
+.bs-banner:where([data-dismissed]) {
+  display: none;
+}
+
+:where(.dark) .bs-banner {
+  color: var(--bs-black);
+}
+
+.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 warning icon on smaller screens */
+  display: none;
+  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) {
+  color: var(--bs-pink-200);
+  text-decoration: none;
+}
+
+:where(.dark) .bs-banner :where(.bs-banner-content p a) {
+  color: var(--bs-pink-500);
+}
+
+.bs-banner :where(.bs-banner-content p a:hover) {
+  text-decoration: underline;
+}
+
+.bs-banner :where(.bs-banner-content button) {
+  background-color: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+@media (min-width: 957px) {
+  .bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
+    display: inline-flex;
+  }
+}
+
+  }
+  

package/dist/components/_buttons.scss

@@ -135,9 +135,13 @@
   line-height: 150%;
 }
 .bs-button:where([data-text]):hover {
+  color: var(--bs-blue-400);
   background-color: transparent;
   text-decoration: underline;
 }
+.bs-button:where([data-text]):has(svg):hover {
+  text-decoration: none;
+}
 .bs-button:where([data-text]):active {
   box-shadow: none;
 }

package/dist/components/_form-booleans.scss

@@ -5,7 +5,6 @@
   align-items: center;
   font-size: var(--bs-text-base);
   font-weight: 400;
-  gap: 0.5em;
   line-height: 115%;
 }
 
@@ -21,6 +20,15 @@
   width: auto;
 }
 
+/* not using gap on .bs-boolean due to dead click zone */
+.bs-boolean label {
+  padding-inline-end: 0.5em;
+}
+
+.bs-boolean input + label {
+  padding-inline: 0.5em 0;
+}
+
 .bs-boolean:where([data-size='sm']),
 .bs-boolean:where([data-size='sm']) label {
   font-size: var(--bs-text-xs);
@@ -29,7 +37,7 @@
 
 /* Checkbox & Radio Input */
 
-:where(input[type^='checkbox'], input[type^='radio']) {
+:where(input[type='checkbox'], input[type='radio']) {
   --box-shadow: var(--bs-ink-base);
 
   appearance: none;
@@ -43,20 +51,22 @@
   width: 1rem;
 }
 
-:where(input[type^='checkbox'], input[type^='radio']):focus {
+:where(input[type='checkbox'], input[type='radio']):focus-visible {
   box-shadow: inset 0 0 0 0.125rem var(--box-shadow),
     0 0 0 2px var(--offset-color, var(--bs-bg-base)),
     0 0 0 4px var(--outline-color, var(--bs-blue-400));
+    outline: 2px solid transparent;
 }
 
-:where(input[type^='checkbox']) {
+:where(input[type='checkbox']) {
   border-radius: 0.125rem;
 }
 
-:where(input[type^='radio']) {
+:where(input[type='radio']) {
   border-radius: 50%;
 }
 
+/* Checkbox's checkmark  */
 input:where([type='checkbox'])::before {
   --filled-size: 1rem;
   --check-fill-color: var(--bs-blue-400);
@@ -69,7 +79,7 @@ input:where([type='checkbox'])::before {
   width: var(--filled-size);
 }
 
-input:where([type^='checkbox'])::after {
+input:where([type='checkbox'])::after {
   border: solid var(--bs-white);
   border-width: 0 0.125rem 0.125rem 0;
   content: '';
@@ -83,6 +93,15 @@ input:where([type^='checkbox'])::after {
   width: 0.375em;
 }
 
+input:where([type='checkbox']):where(:indeterminate)::after {
+  border: none;
+  background-color: var(--bs-white);
+  height: 0.125rem;
+  transform: translate(-50%, -0.0625rem) rotate(0deg);
+  width: 0.625em;
+}
+
+/* Radio's dot */
 input:where([type='radio'])::before {
   --filled-size: 1rem;
   --radio-fill-color: var(--bs-blue-400);
@@ -113,8 +132,8 @@ input:where([type='radio'])::after {
   width: var(--inner-size);
 }
 
-input:where([type='checkbox']:checked, [type='radio']:checked)::before,
-input:where([type='checkbox']:checked, [type='radio']:checked)::after {
+input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
+input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after {
   visibility: visible;
 }
 
@@ -127,6 +146,11 @@ input:where([type='checkbox']:checked, [type='radio']:checked)::after {
   width: 0.3125rem;
 }
 
+.bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after  {
+  height: 0.125rem;
+  width: .75em;
+}
+
 .bs-boolean:where([data-size='sm']) input[type='radio']::after {
   --inner-size: 0.25rem;
 }
@@ -139,7 +163,8 @@ input:where([type='checkbox'], [type='radio']):disabled {
   background-color: transparent;
 }
 
-input:where([type='checkbox']):checked:disabled::before {
+input:where([type='checkbox']):checked:disabled::before,
+input:where([type='checkbox']):indeterminate:disabled::before {
   --check-fill-color: var(--bs-gray-400);
 }
 
@@ -150,7 +175,7 @@ input:where([type='radio']):checked:disabled::before {
 
 /* Error state */
 
-input:where([type^='checkbox'], [type^='radio'])[data-error] {
+input:where([type='checkbox'], [type='radio'])[data-error] {
   --box-shadow: var(--bs-red-400);
 }
 

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

@@ -4,6 +4,7 @@
   font-size: var(--bs-text-xs);
   font-weight: 400;
   text-align: right;
+  white-space: nowrap;
 }
 
 :where([disabled], [data-disabled]) + .bs-character-count,

package/dist/components/_form-elements.scss

@@ -1,19 +1,20 @@
 @mixin form-elements() {
   :where([data-required]) {
-  color: var(--bs-red-400);
+  color: var(--bs-red-500);
+  font-weight: var(--bs-font-bold, 600);
 }
 
 :where([data-disabled], [data-disabled] [data-required]) {
   color: var(--bs-gray-400);
 }
 
-:where(label + input, label > input):not([type^='checkbox'], [type^='radio']),
+:where(label + input, label > input):where(:not([type='checkbox'], [type='radio'])),
 :where(label + textarea, label > textarea),
 :where(label + select, label > select) {
   margin-top: 0.25rem;
 }
 
-input:not([type^='checkbox'], [type^='radio'], [type^='file'], [type^='range']),
+input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea, select {
   appearance: none;
   background-color: var(--input-bg, var(--bs-bg-base));
@@ -22,27 +23,35 @@ textarea, select {
   color: var(--bs-ink-base);
   font-size: var(--bs-text-base);
   font-weight: 400;
+  height: 2.5rem;
   line-height: var(--bs-leading-base);
-  min-height: 40px;
-  padding: 0.5rem 0.75rem;
+  min-height: 2.5rem;
+  padding-inline: 0.75rem;
   width: 100%;
 }
 
+textarea {
+  height: auto;
+  padding-block: 0.5rem;
+  resize: vertical;
+}
+
 /* Generally applicable (all input types) */
 :is(input, textarea, select)::placeholder {
   color: var(--bs-violet-200);
   opacity: 1;
 }
 
-:is(input, textarea, select):focus {
+
+:is(input:where(:not([type='checkbox'], [type='radio']), textarea, select):where(:focus)) {
   box-shadow: 0 0 0 2px var(--offset-color, var(--bs-bg-base)),
     0 0 0 4px var(--outline-color, var(--bs-blue-400));
   outline: 2px solid transparent;
 }
-:where(.box) :is(input, textarea, select):focus {
+:where(.box) :is(input, textarea, select):where(:focus) {
   --offset-color: var(--bs-bg-subtle);
 }
-:where(.box[data-invert]) :is(input, textarea, select):focus {
+:where(.box[data-invert]) :is(input, textarea, select):where(:focus) {
   --offset-color: var(--bs-bg-invert);
 }
 
@@ -50,7 +59,7 @@ textarea, select {
   --outline-color: var(--bs-red-200);
 }
 
-:is(input, textarea, select):disabled {
+:is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled) {
   background-color: var(--bs-gray-200);
   border-color: var(--bs-gray-400);
   color: var(--bs-gray-400);

package/dist/components/_form-field-details.scss

@@ -2,7 +2,8 @@
   .bs-field-details {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+  gap: var(--bs-space-2);
   padding: 0 0.75rem;
   margin-top: 0.5rem;
 }

package/dist/components/_form-labels.scss

@@ -11,7 +11,7 @@
 }
 
 :where([data-required]) {
-  color: var(--bs-red-400);
+  color: var(--bs-red-500);
 }
 
 :where(label[data-disabled], [data-disabled] [data-required], [data-disabled] label) {

package/dist/components/_form-switches.scss

@@ -21,10 +21,6 @@
   --inner-text-padding: 0.375rem;
 }
 
-:where(.dark) .bs-switch:where(:not([data-disabled])) {
-  --switch-background: var(--bs-blue-400);
-}
-
 .bs-switch input,
 .bs-switch:where([data-size="sm"]) input {
   cursor: pointer;
@@ -48,6 +44,11 @@
   height: calc(var(--ball-diameter) + var(--offset) * 2);
 }
 
+.bs-switch input:where(:checked) ~ span,
+.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span {
+  --switch-background: var(--bs-blue-400);
+}
+
 /* Toggle "ball" */
 .bs-switch span::before {
   background-color: var(--ball-background);
@@ -69,7 +70,6 @@
   transform: translate(var(--ball-diameter), -50%);
 }
 
-
 .bs-switch input:where(:checked) ~ span:where([data-inner-on-label][data-inner-off-label])::before,
 .bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span:where([data-inner-on-label][data-inner-off-label])::before {
   transform: translate(calc(var(--ball-diameter) + var(--inner-text-width)), -50%);
@@ -110,15 +110,15 @@
 
 /* Focus state */
 
-.bs-switch:where(:focus-within) span {
+.bs-switch :where(input:focus-visible) + span {
   box-shadow: 0 0 0 2px var(--offset-color, var(--bs-bg-base)),
     0 0 0 4px var(--outline-color, var(--bs-blue-400));
   outline: 2px solid transparent;
 }
-:where(.box) .bs-switch:where(:focus-within) span {
+:where(.box) .bs-switch :where(input:focus-visible) + span {
   --offset-color: var(--bs-bg-subtle);
 }
-:where(.box[data-invert]) .bs-switch:where(:focus-within) span {
+:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + span {
   --offset-color: var(--bs-bg-invert);
 }
 

package/dist/components/_toast.scss

@@ -0,0 +1,204 @@
+@mixin toast() {
+  /* Base Toast Styles */
+.bs-toast {
+    background-color: var(--bs-white);
+    border-top: 4px solid var(--bs-blue-400);
+    bottom: 1.5rem;
+    box-shadow: var(--bs-shadow-contentMedium);
+    left: 0;
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+    opacity: 0;
+    position: fixed;
+    right: 0;
+    transform: translateY(calc(100% + 1.5rem));
+    /* Clamp width for mobile -> full screen */
+    width: clamp(17rem, calc(100vw - 3rem), 25rem);
+    z-index: 999;
+}
+
+.bs-toast[data-stacked] {
+    bottom: auto;
+    left: auto;
+    position: static;
+    right: auto;
+    z-index: auto;
+}
+
+/* Mobile - Toast comes up from bottom */
+@keyframes slideDown {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(calc(100% + 1.5rem));
+    }
+}
+
+@keyframes slideUp {
+    0% {
+        opacity: 0;
+        transform: translateY(calc(100% + 1.5rem));
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Dark mode toast */
+:where(.dark) .bs-toast {
+    background-color: var(--bs-navy-400);
+}
+
+.bs-toast:where([data-shown]) {
+    /* Small delay on load to alow for HTML element to exist */
+    animation-delay: 10ms;
+    animation-duration: 200ms;
+    animation-fill-mode: forwards;
+    animation-name: slideUp;
+    animation-timing-function: ease;
+}
+
+.bs-toast:where([data-dismissed]) {
+    animation-duration: 200ms; 
+    animation-fill-mode: forwards;
+    animation-name: slideDown;
+    animation-timing-function: ease;
+}
+
+.bs-toast :where(.bs-toast-header) {
+    align-items: center;
+    color: var(--bs-ink-base);
+    display: flex;
+    gap: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 1rem;
+}
+
+.bs-toast :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-blue-400);
+}
+
+.bs-toast :where(h5) {
+    font-weight: 400;
+}
+
+.bs-toast :where(.bs-toast-content) {
+    border-bottom: 1px solid var(--bs-border);
+    color: var(--bs-ink-light);
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.25rem;
+}
+
+.bs-toast :where(.bs-toast-actions) {
+    /* Mobile - Buttons will be stacked */
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 1rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.5rem;
+}
+
+/* Warning Toast Styles */
+.bs-toast:where([data-variant^='warning']) {
+    border-top: 4px solid var(--bs-orange-warning);
+}
+
+.bs-toast:where([data-variant^='warning']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-orange-warning);
+}
+
+/* Positive Toast Styles */
+.bs-toast:where([data-variant^='positive']) {
+    border-top: 4px solid var(--bs-purple-400);
+}
+
+.bs-toast:where([data-variant^='positive']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-purple-400);
+}
+
+:where(.dark) .bs-toast:where([data-variant^='positive']) {
+    border-top: 4px solid var(--bs-purple-200);
+}
+
+:where(.dark) .bs-toast:where([data-variant^='positive']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-purple-200);
+}
+
+/* Negative Toast Styles */
+.bs-toast:where([data-variant^='negative']) {
+    border-top: 4px solid var(--bs-red-400);
+}
+
+.bs-toast:where([data-variant^='negative']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-red-400);
+}
+
+@media (min-width: 440px) {
+
+    .bs-toast {
+        left: auto;
+        margin-left: 0;
+        margin-right: 0;
+        opacity: 0;
+        right: 1.5rem;
+        transform: translateX(calc(100% + 1.5rem));
+    }
+
+    .bs-toast:where([data-shown]) {
+        /* Small delay on load to alow for HTML element to exist */
+        animation-delay: 10ms;
+        animation-duration: 200ms;
+        animation-fill-mode: forwards;
+        animation-name: slideLeft;
+        animation-timing-function: ease;
+    }
+
+    .bs-toast:where([data-dismissed]) {
+        animation-duration: 200ms; 
+        animation-fill-mode: forwards;
+        animation-name: slideRight;
+        animation-timing-function: ease;
+    }
+
+    /* Non-mobile toasts come in from the right */
+    @keyframes slideRight {
+        0% {
+            opacity: 1;
+            transform: translateX(0);
+        }
+        100% {
+            opacity: 0;
+            transform: translateX(calc(100% + 1.5rem));
+        }
+    }
+    
+    @keyframes slideLeft {
+        0% {
+            opacity: 0;
+            transform: translateX(calc(100% + 1.5rem));
+        }
+        100% {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    .bs-toast :where(.bs-toast-actions) {
+        /* Non-mobile - Buttons will be side-by-side */
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+
+}
+
+  }
+