@wwtdev/bsds-css 0.1.0 → 0.2.0

package/dist/components/badge.css

@@ -1,58 +0,0 @@
-.badge[data-position^='left']::before,
-.badge:where(:not([data-position^='left']))::after {
-  align-items: center;
-  background: var(--bs-red-500);
-  border-radius: 0.5rem;
-  content: '';
-  display: inline-flex;
-  font-size: 0.8125rem;
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-  height: 6px;
-  justify-content: center;
-  line-height: 1;
-  position: relative;
-  vertical-align: top;
-  width: 6px;
-}
-
-.pill .badge::before,
-.pill .badge::after {
-  font-size: 0.8125em;
-}
-
-.badge[data-count]:where([data-position^='left'])::before,
-.badge[data-count]:where(:not([data-position^='left']))::after {
-  color: white;
-  content: attr(data-count);
-  min-height: 1rem;
-  min-width: 1rem;
-  padding: 0 4px;
-  top: -0.0625rem;
-  vertical-align: unset;
-  width: auto;
-}
-
-.badge[data-count]::before {
-  margin-right: 0.25rem;
-}
-
-.badge[data-count]::after {
-  margin-left: 0.25rem;
-}
-
-.badge[data-count='0']::before,
-.badge[data-count='0']::after {
-  display: none;
-}
-
-.badge[data-badge-color^='blue']::before,
-.badge[data-badge-color^='blue']::after {
-  background: var(--bs-blue-500);
-}
-
-.badge[data-badge-color^='white']::before,
-.badge[data-badge-color^='white']::after {
-  background: white;
-  color: var(--badge-text, var(--bs-black));
-}

package/dist/components/buttons.css

@@ -1,188 +0,0 @@
-:where(button) {
-  background-color: inherit;
-  border-color: transparent;
-  color: inherit;
-  font-size: var(--bs-text-base);
-  position: relative;
-  padding: var(--bs-space-0);
-  text-decoration: none;
-}
-
-.button {
-  --btn-main: var(--bs-blue-400);
-  --btn-secondary: var(--bs-blue-300);
-  --btn-highlight: var(--bs-blue-100);
-  align-items: center;
-  background-color: var(--btn-main);
-  border: none;
-  border-radius: 0.25rem;
-  color: var(--bs-white);
-  cursor: pointer;
-  display: inline-flex;
-  font-size: var(--bs-text-md);
-  font-weight: 600;
-  line-height: 1.5;
-  outline: 2px solid transparent;
-  padding: var(--bs-space-1) var(--bs-space-4) calc(var(--bs-space-1) * 1.5);
-  position: relative;
-  text-decoration: none;
-  transition: all 100ms ease-in-out;
-  vertical-align: middle;
-}
-
-
-.button:hover {
-  background-color: var(--btn-secondary);
-}
-
-.button:active {
-  background-color: var(--btn-secondary);
-  transform: scale(0.97);
-  transform-origin: center;
-  box-shadow: inset 0px 0px 4px 1px var(--btn-main);
-}
-
-/* Button Focus Styles */
-.button::before {
-  border-color: transparent;
-  border-radius: 0.5rem;
-  border-style: solid;
-  border-width: 0.125rem;
-  content: '';
-  height: calc(100% + 0.5rem);
-  inset: -0.25rem;
-  position: absolute;
-  transition: border-color 0.125s ease-in-out;
-  width: calc(100% + 0.5rem);
-}
-
-.button:focus::before {
-  border-color: var(--btn-main);
-}
-
-.button:focus-visible::before {
-  border-color: var(--btn-main);
-  box-shadow: none;
-}
-
-.button:focus:not(:focus-visible)::before {
-  border-color: transparent;
-  box-shadow: none;
-}
-
-/* Ghost Buttons */
-.button:where([data-ghost]) {
-  --btn-light: var(--bs-blue-10);
-  --btn-secondary: var(--bs-blue-10);
-  background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--btn-main);
-  color: var(--btn-main);
-}
-.button:where([data-ghost])::before {
-  border-radius: 0.4375rem;
-}
-.button:where([data-ghost]):hover,
-.button:where([data-ghost]):focus {
-  background-color: var(--btn-light);
-}
-.button:where([data-ghost]):active {
-  box-shadow:
-    inset 0 0 0 1px var(--btn-main),
-    inset 0px 0px 4px 1px var(--btn-highlight);
-}
-
-/* Button type */
-.button:where([data-variant^='secondary']) {
-  --btn-main: var(--bs-plum-400);
-  --btn-secondary: var(--bs-plum-300);
-  --btn-light: var(--bs-plum-10);
-  --btn-highlight: var(--bs-plum-100);
-}
-.dark .button:where([data-variant^='secondary']) {
-  --btn-main: var(--bs-plum-200);
-  --btn-secondary: var(--bs-plum-300);
-  --btn-light: var(--bs-navy-400);
-  --btn-highlight: var(--bs-plum-400);
-}
-.button:where([data-variant^='positive']) {
-  --btn-main: var(--bs-purple-400);
-  --btn-secondary: var(--bs-purple-300);
-  --btn-light: var(--bs-purple-10);
-  --btn-highlight: var(--bs-purple-100);
-}
-.button:where([data-variant^='warning']) {
-  --btn-main: var(--bs-orange-warning);
-  --btn-secondary: var(--bs-orange-300);
-  --btn-light: var(--bs-orange-10);
-  --btn-highlight: var(--bs-orange-100);
-}
-.button:where([data-variant^='negative']) {
-  --btn-main: var(--bs-red-400);
-  --btn-secondary: var(--bs-red-300);
-  --btn-light: var(--bs-red-10);
-  --btn-highlight: var(--bs-red-100);
-}
-
-/* Text Button */
-.button:where([data-text]) {
-  background-color: transparent;
-  color: var(--bs-blue-500);
-  cursor: pointer;
-  font-size: var(--bs-text-md);
-  font-weight: 400;
-  line-height: 150%;
-}
-.button:where([data-text]):hover {
-  background-color: transparent;
-  text-decoration: underline;
-}
-.button:where([data-text]):active {
-  box-shadow: none;
-}
-
-/* Button Size */
-.button:where([data-size^='sm']) {
-  font-size: var(--bs-text-sm);
-}
-.button:where([data-text][data-size^='sm']) {
-  font-size: var(--bs-text-base);
-}
-
-/* Disabled Styling */
-:where(button:disabled),
-.button:where([aria-disabled='true']) /* for links as buttons */ {
-  pointer-events: none;
-}
-.button:where(:disabled),
-.button:where([aria-disabled='true']) {
-  color: var(--bs-gray-400);
-  background-color: var(--bs-gray-200);
-}
-
-.button:where([data-ghost]):disabled,
-.button:where([data-ghost])[aria-disabled='true'] {
-  box-shadow: inset 0 0 0 1px var(--bs-gray-400);
-}
-
-.button:where([data-text]):disabled,
-.button:where([data-text][aria-disabled='true']) {
-  background-color: transparent;
-}
-
-/* Icon Height */
-.button :where(svg:not([height])) {
-  height: var(--bs-text-base);
-}
-
-.button:where([data-size^='sm']) :where(svg:not([height])) {
-  height: var(--bs-text-xs);
-}
-
-/* links as buttons */
-a.button {
-  align-items: center;
-  display: inline-flex;
-  outline: none;
-  vertical-align: middle;
-}
-

package/dist/components/form-elements.css

@@ -1,255 +0,0 @@
-:where(.required) {
-  color: var(--bs-red-400);
-}
-
-:where([data-disabled], [data-disabled] .required) {
-  color: var(--bs-gray-400);
-}
-
-:where(label + input, label > input):not([type^='checkbox'], [type^='radio']),
-:where(label + textarea, label > textarea),
-:where(label + select, label > select) {
-  margin-top: 0.25rem;
-}
-
-:where(input):not([type^='checkbox'], [type^='radio'], [type^='file'], [type^='range']),
-:where(textarea, select) {
-  appearance: none;
-  background-color: var(--input-bg, var(--bs-bg-base));
-  border: 1px solid var(--input-border, var(--bs-violet-300));
-  border-radius: 0.25rem;
-  color: var(--bs-ink-base);
-  font-size: var(--bs-text-base);
-  font-weight: 400;
-  line-height: var(--bs-leading-base);
-  min-height: 40px;
-  padding: 0.5rem 0.75rem;
-  width: 100%;
-}
-
-:where(input, textarea, select)::placeholder {
-  color: var(--bs-violet-200);
-  opacity: 1;
-}
-
-:where(input, textarea, select):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) :where(input, textarea, select):focus {
-  --offset-color: var(--bs-bg-subtle);
-}
-:where(.box[data-invert]) :where(input, textarea, select):focus {
-  --offset-color: var(--bs-bg-invert);
-}
-
-:where(input, textarea, select)[required]:focus,
-:where(input, textarea, select).error {
-  --outline-color: var(--bs-red-200);
-}
-
-:where(input, textarea, select):disabled {
-  background-color: var(--bs-gray-200);
-  border-color: var(--bs-gray-400);
-  color: var(--bs-gray-400);
-}
-
-/* chrome user agent styling was applying opacity: 0.7 */
-:where(select:disabled) {
-  opacity: 1;
-}
-
-:where(input, textarea, select):disabled::placeholder,
-:where(input, textarea, select)[disabled]::placeholder {
-  color: var(--bs-gray-400);
-  opacity: 1;
-}
-
-/* Character Counter for Textarea */
-:where(textarea + .character-count) {
-  color: var(--bs-ink-base);
-  font-size: var(--bs-text-xs);
-  font-weight: 400;
-  text-align: right;
-}
-
-:where(textarea[disabled] + .character-count) {
-  color: var(--bs-gray-400);
-}
-
-/* Select */
-
-:where(select) {
-  /* URL Encoded SVG dropdown caret so there is something there */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230A0B19' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
-  background-position: right 0.75rem center;
-  background-repeat: no-repeat;
-  background-size: 1em 1em;
-}
-.dark :where(select) {
-  /* URL Encoded SVG dropdown caret so there is something there */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
-}
-
-/* Checkboxes & Radios */
-:where(.checkbox, .radio) {
-  display: flex;
-  align-items: center;
-  font-size: var(--bs-text-base);
-  font-weight: 400;
-  gap: 0.5em;
-  line-height: 115%;
-}
-:where(.checkbox, .radio) label {
-  font-size: var(--bs-text-base);
-  font-weight: 400;
-  line-height: 115%;
-  width: auto;
-}
-
-:where(input[type^='checkbox'], input[type^='radio']) {
-  --box-shadow: var(--bs-ink-base);
-
-  appearance: none;
-  background-color: var(--bg-base);
-  box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
-  display: grid;
-  height: 1rem;
-  margin: 0;
-  place-content: center;
-  position: relative;
-  width: 1rem;
-}
-:where(input[type^='checkbox'], input[type^='radio']):focus {
-  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));
-}
-
-:where(input[type^='checkbox'], input[type^='radio'])[data-error] {
-  --box-shadow: var(--bs-red-400);
-}
-
-:where(input[type^='checkbox']) {
-  border-radius: 0.125rem;
-}
-
-:where(input[type^='radio']) {
-  border-radius: 50%;
-}
-
-:where(.checkbox, .radio)[data-size='sm'],
-:where(.checkbox, .radio)[data-size='sm'] label {
-  font-size: var(--bs-text-sm);
-  line-height: 100%;
-}
-
-:where(.checkbox, .radio)[data-size='sm'] input {
-  width: var(--bs-text-xs);
-  height: var(--bs-text-xs);
-}
-
-:where(input[type='checkbox'])::before {
-  --filled-size: 1rem;
-  --check-fill-color: var(--bs-blue-400);
-
-  content: '';
-  border-radius: 0.125rem;
-  box-shadow: inset var(--filled-size) var(--filled-size) var(--check-fill-color);
-  height: var(--filled-size);
-  visibility: hidden;
-  width: var(--filled-size);
-}
-
-:where(input[type^='checkbox'])::after {
-  border: solid var(--bs-white);
-  border-width: 0 0.125rem 0.125rem 0;
-  content: '';
-  height: 0.75em;
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform-origin: center;
-  transform: translate(-50%, -60%) rotate(45deg);
-  visibility: hidden;
-  width: 0.375em;
-}
-
-:where(input[type='radio'])::before {
-  --filled-size: 1rem;
-  --radio-fill-color: var(--bs-blue-400);
-
-  background-color: var(--radio-fill-color);
-  border-radius: 50%;
-  box-sizing: content-box;
-  content: '';
-  height: var(--filled-size);
-  visibility: hidden;
-  width: var(--filled-size);
-}
-
-:where(input[type='radio'])::after {
-  --inner-size: 0.375rem;
-  --inner-fill-color: var(--bs-white);
-
-  background-color: var(--inner-fill-color);
-  border-radius: 50%;
-  box-sizing: content-box;
-  content: '';
-  height: var(--inner-size);
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  visibility: hidden;
-  width: var(--inner-size);
-}
-
-:where(input[type='checkbox']:checked, input[type='radio']:checked)::before,
-:where(input[type='checkbox']:checked, input[type='radio']:checked)::after {
-  visibility: visible;
-}
-
-:where(.checkbox, .radio)[data-size='sm'] input::before {
-  --filled-size: var(--bs-text-xs);
-}
-
-:where(.checkbox[data-size='sm'] input[type='checkbox'])::after {
-  height: 0.5625;
-  width: 0.3125;
-}
-
-:where(.radio[data-size='sm'] input[type='radio'])::after {
-  --inner-size: 0.25rem;
-}
-
-:where(input[type='checkbox'], input[type='radio']):disabled {
-  --box-shadow: var(--bs-gray-400);
-  background-color: transparent;
-}
-
-:where(input[type='checkbox']):checked:disabled:before {
-  --check-fill-color: var(--bs-gray-400);
-}
-
-:where(input[type='radio']):checked:disabled:before {
-  --radio-fill-color: var(--bs-gray-400);
-}
-
-/* Errors and Messages */
-:where(input)[data-error] {
-  border-color: var(--bs-red-400);
-}
-
-/* Fieldset */
-:where(fieldset) {
-  border: none;
-  margin-left: 0;
-  margin-right: 0;
-  padding: 0;
-}
-:where(fieldset legend) {
-  margin-bottom: 0.25rem;
-  padding: 0;
-}

package/dist/components/form-hints.css

@@ -1,10 +0,0 @@
-:where(.hints) {
-  color: var(--bs-ink-light);
-  font-size: var(--bs-text-xs);
-  padding: 0.5rem 0.75rem 0 0.75rem;
-  margin: 0;
-  list-style: none;
-}
-:where(.hints[data-error]) {
-  color: var(--bs-red-400);
-}

package/dist/components/form-labels.css

@@ -1,16 +0,0 @@
-:where(label, legend) {
-  color: var(--bs-ink-base);
-  display: inline-block;
-  font-size: var(--bs-text-sm);
-  font-weight: 600;
-  line-height: var(--bs-leading-base);
-  width: 100%;
-}
-
-:where(.required) {
-  color: var(--bs-red-400);
-}
-
-:where([data-disabled], [data-disabled] .required, [data-disabled] label) {
-  color: var(--bs-gray-400);
-}