@wwtdev/bsds-css 0.0.3

package/dist/wwt-bsds-wc-base.css

@@ -0,0 +1,753 @@
+/* VARIABLES GENERATED WITH TAILWIND CONFIG.
+    Tokens location: ./tailwind.config.js */
+
+:root {
+  --bs-transparent: transparent;
+  --bs-white: #ffffff;
+  --bs-black: #0a0b19;
+  --bs-blue-10: rgba(0, 134, 234, 0.1);
+  --bs-blue-100: #99cff7;
+  --bs-blue-200: #66b6f2;
+  --bs-blue-300: #339eee;
+  --bs-blue-400: #0086ea;
+  --bs-blue-500: #006dc7;
+  --bs-red-10: rgba(238, 40, 42, 0.1);
+  --bs-red-100: #f8a9aa;
+  --bs-red-200: #f57e7f;
+  --bs-red-300: #f15355;
+  --bs-red-400: #ee282a;
+  --bs-red-500: #d91214;
+  --bs-plum-10: rgba(28, 0, 135, 0.1);
+  --bs-plum-100: #a499cf;
+  --bs-plum-200: #7766b7;
+  --bs-plum-300: #49339f;
+  --bs-plum-400: #1c0087;
+  --bs-royal-100: #c5cceb;
+  --bs-royal-200: #7585d1;
+  --bs-royal-300: #5365c4;
+  --bs-royal-400: #162fb4;
+  --bs-violet-100: #cbc0da;
+  --bs-violet-200: #9983b6;
+  --bs-violet-300: #634291;
+  --bs-violet-400: #330072;
+  --bs-navy-100: #c6c6d1;
+  --bs-navy-200: #8d8ea1;
+  --bs-navy-300: #555775;
+  --bs-navy-400: #1d1e48;
+  --bs-navy-500: #131431;
+  --bs-orange-10: rgba(250, 70, 22, 0.1);
+  --bs-orange-100: #fed1c5;
+  --bs-orange-200: #fda58d;
+  --bs-orange-300: #fc7755;
+  --bs-orange-400: #fa4616;
+  --bs-orange-warning: #ea6712;
+  --bs-pink-100: #f6cbe0;
+  --bs-pink-200: #eb7eaf;
+  --bs-pink-300: #e45e9b;
+  --bs-pink-400: #e31c79;
+  --bs-pink-500: #d11a6f;
+  --bs-purple-10: rgba(130, 18, 196, 0.09);
+  --bs-purple-100: #e0c5ef;
+  --bs-purple-200: #bf8adf;
+  --bs-purple-300: #a154d0;
+  --bs-purple-400: #8212c4;
+  --bs-gray-100: #f0f0fa;
+  --bs-gray-200: #c9cad9;
+  --bs-gray-300: #a3a4b7;
+  --bs-gray-400: #4e4f5f;
+  --bs-gray-500: #292940;
+  --bs-gradient-dark: linear-gradient(
+    90deg,
+    #1c0087 0%,
+    #ee282a 35%,
+    #ffffff 50%,
+    #0086ea 65%,
+    #1c0087 100%
+  );
+  --bs-gradient-light: linear-gradient(
+    90deg,
+    #1c0087 0%,
+    #ee282a 35%,
+    #ffffff 50%,
+    #0086ea 65%,
+    #1c0087 100%
+  );
+  --bs-gradient-line: linear-gradient(
+    90deg,
+    #ee282a 0%,
+    #1c0087 50%,
+    #0086ea 100%
+  );
+  --bs-space-0: 0px;
+  --bs-space-1: 0.25rem;
+  --bs-space-2: 0.5rem;
+  --bs-space-3: 0.75rem;
+  --bs-space-4: 1rem;
+  --bs-space-5: 1.25rem;
+  --bs-space-6: 1.5rem;
+  --bs-space-7: 1.75rem;
+  --bs-space-8: 2rem;
+  --bs-space-9: 2.25rem;
+  --bs-space-10: 2.5rem;
+  --bs-space-11: 2.75rem;
+  --bs-space-12: 3rem;
+  --bs-space-14: 3.5rem;
+  --bs-space-16: 4rem;
+  --bs-space-20: 5rem;
+  --bs-space-24: 6rem;
+  --bs-space-28: 7rem;
+  --bs-space-32: 8rem;
+  --bs-space-36: 9rem;
+  --bs-space-40: 10rem;
+  --bs-space-44: 11rem;
+  --bs-space-48: 12rem;
+  --bs-space-52: 13rem;
+  --bs-space-56: 14rem;
+  --bs-space-60: 15rem;
+  --bs-space-64: 16rem;
+  --bs-space-72: 18rem;
+  --bs-space-80: 20rem;
+  --bs-space-96: 24rem;
+  --bs-space-px: 1px;
+  --bs-space-0-half: 0.125rem;
+  --bs-space-1-half: 0.375rem;
+  --bs-space-2-half: 0.625rem;
+  --bs-space-3-half: 0.875rem;
+  --bs-space-f-1: clamp(0.25rem, calc(0.13rem + 0.5vw), 0.5rem);
+  --bs-space-f-2: clamp(0.5rem, calc(0.38rem + 0.5vw), 0.75rem);
+  --bs-space-f-3: clamp(0.75rem, calc(0.63rem + 0.5vw), 1rem);
+  --bs-space-f-4: clamp(1rem, calc(0.75rem + 1vw), 1.5rem);
+  --bs-space-f-6: clamp(1.5rem, calc(1.25rem + 1vw), 2rem);
+  --bs-space-f-8: clamp(2rem, calc(1.5rem + 2vw), 3rem);
+  --bs-space-f-12: clamp(4rem, calc(3rem + 4vw), 6rem);
+  --bs-space-f-16: clamp(4rem, calc(3rem + 4vw), 6rem);
+  --bs-space-f-24: clamp(6rem, calc(5rem + 4vw), 8rem);
+  --bs-space-f-4to8: clamp(1rem, calc(0.5rem + 2vw), 2rem);
+  --bs-space-f-6to12: clamp(1.5rem, calc(0.75rem + 3vw), 3rem);
+  --bs-space-f-12to24: clamp(3rem, calc(1.5rem + 6vw), 6rem);
+  --bs-text-xs: 0.75rem;
+  --bs-text-sm: 0.875rem;
+  --bs-text-base: 1rem;
+  --bs-text-md: 1.125rem;
+  --bs-text-lg: 1.25rem;
+  --bs-text-xl: 1.5rem;
+  --bs-text-2xl: 2rem;
+  --bs-text-3xl: 2.25rem;
+  --bs-text-4xl: 3rem;
+  --bs-text-f-xs: clamp(0.69rem, calc(0.84rem + -0.19vw), 0.79rem);
+  --bs-text-f-sm: clamp(0.83rem, calc(0.92rem + -0.11vw), 0.89rem);
+  --bs-text-f-base: clamp(1rem, calc(1rem + 0vw), 1rem);
+  --bs-text-f-md: clamp(1rem, calc(0.94rem + 0.25vw), 1.125rem);
+  --bs-text-f-lg: clamp(1.125rem, calc(1.06rem + 0.25vw), 1.25rem);
+  --bs-text-f-xl: clamp(1.25rem, calc(1.13rem + 0.5vw), 1.5rem);
+  --bs-text-f-2xl: clamp(1.5rem, calc(1.25rem + 1vw), 2rem);
+  --bs-text-f-3xl: clamp(2rem, calc(1.88rem + 0.5vw), 2.25rem);
+  --bs-text-f-4xl: clamp(2.25rem, calc(1.88rem + 1.5vw), 3rem);
+  --bs-leading-sm: 115%;
+  --bs-leading-base: 150%;
+  --bs-shadow: -4px 4px 12px rgba(0, 0, 0, 0.06),
+    -8px 8px 16px rgba(28, 0, 135, 0.2);
+  --bs-shadow-contentLow: -4px 4px 12px rgba(0, 0, 0, 0.06),
+    -8px 8px 16px rgba(28, 0, 135, 0.2);
+  --bs-shadow-contentLowCenter: 0px 0px 12px rgba(0, 0, 0, 0.06),
+    0px 0px 16px rgba(28, 0, 135, 0.2);
+  --bs-shadow-contentMedium: -8px 8px 24px rgba(0, 0, 0, 0.06),
+    -16px 16px 32px rgba(28, 0, 135, 0.2);
+  --bs-shadow-contentHigh: 0px 16px 48px rgba(0, 0, 0, 0.06),
+    0px 32px 64px rgba(28, 0, 135, 0.2);
+  --bs-shadow-drawerLeft: -12px 12px 24px rgba(0, 0, 0, 0.06),
+    -16px 16px 32px rgba(28, 0, 135, 0.2);
+  --bs-shadow-drawerRight: -12px 12px 24px rgba(0, 0, 0, 0.06),
+    16px 16px 32px rgba(28, 0, 135, 0.2);
+  --bs-shadow-profilePhoto: inset 0px 0px 0.5em rgba(28, 0, 135, 0.25);
+}
+
+/* Box sizing rules */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+
+a:not([class]) {
+  -webkit-text-decoration-skip: ink;
+          text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs */
+
+:where(input, textarea, select) {
+  font: inherit;
+}
+
+button {
+  font-family: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+:root,
+:host {
+  --bs-bg-base: var(--bs-white);
+  --bs-bg-subtle: var(--bs-gray-100);
+  --bs-bg-invert: var(--bs-navy-500);
+  --bs-bg-invert-subtle: var(--bs-navy-400);
+  --bs-ink-base: var(--bs-black);
+  --bs-ink-medium: var(--bs-gray-500);
+  --bs-ink-light: var(--bs-gray-400);
+  --bs-ink-accent: var(--bs-plum-400);
+  --bs-ink-invert: var(--bs-white);
+  --bs-border: var(--bs-gray-200);
+
+  /* Spacing */
+  --bs-content-top: 4rem;
+
+  /* Type */
+  --bs-font-normal: 400;
+  --bs-font-bold: 600;
+}
+
+.dark,
+.dark :host {
+  --bs-bg-base: var(--bs-navy-500);
+  --bs-bg-subtle: #2F2F51;
+  --bs-bg-invert: var(--bs-white);
+  --bs-bg-invert-subtle: var(--bs-gray-100);
+  --bs-ink-base: var(--bs-white);
+  --bs-ink-medium: var(--bs-gray-100);
+  --bs-ink-light: var(--bs-gray-200);
+  --bs-ink-accent: var(--bs-plum-100);
+  --bs-ink-invert: var(--bs-black);
+  --bs-border: var(--bs-gray-400);
+}
+
+body,
+:host {
+  background-color: var(--bs-bg-base);
+  color: var(--bs-ink-light);
+}
+
+:target {
+  scroll-margin-top: var(--bs-content-top);
+}
+
+::-moz-selection {
+  background-color: var(--bs-royal-400);
+  color: var(--bs-white);
+}
+
+::selection {
+  background-color: var(--bs-royal-400);
+  color: var(--bs-white);
+}
+
+[hidden] {
+  display: none;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  background: var(--bs-border);
+}
+
+body {
+  font-weight: 400;
+  font-family: 'Roobert', sans-serif;
+  font-size: var(--bs-text-base);
+}
+
+/* Default Element/data-variant Styles */
+
+[data-variant^="heading-xl"] {
+  font-size: var(--bs-text-4xl);
+  font-weight: 400;
+  line-height: var(--bs-leading-sm);
+}
+
+h1, [data-variant^="heading-1"] {
+  font-size: var(--bs-text-3xl);
+  font-weight: 400;
+  line-height: var(--bs-leading-sm);
+}
+
+h2, [data-variant^="heading-2"] {
+  font-size: var(--bs-text-2xl);
+  font-weight: 600;
+  line-height: var(--bs-leading-sm);
+}
+
+h3, [data-variant^="heading-3"] {
+  font-size: var(--bs-text-xl);
+  font-weight: 600;
+  line-height: var(--bs-leading-sm);
+}
+
+h4, [data-variant^="heading-4"] {
+  font-size: var(--bs-text-lg);
+  font-weight: 600;
+}
+
+h5, [data-variant^="heading-5"] {
+  font-size: var(--bs-text-md);
+  font-weight: 600;
+}
+
+h6, [data-variant^="heading-6"] {
+  font-size: var(--bs-text-base);
+  font-weight: 600;
+}
+
+.prose {
+  font-size: var(--bs-text-md);
+  max-width: 70ch;
+}
+
+.prose :where(h1, h2, h3, h4, h5, h6):not([data-color]) {
+  color: var(--bs-ink-base);
+}
+
+[data-variant^="default"] {
+  font-size: var(--bs-text-base);
+}
+
+.bs-meta, [data-variant^="meta"] {
+  font-size: var(--bs-text-xs);
+  font-weight: 600;
+}
+
+:where(.prose blockquote) {
+  border-left: 4px solid var(--bs-plum-200);
+  color: var(--bs-plum-200);
+  font-style: italic;
+  font-weight: 400;
+  padding-left: var(--bs-space-4);
+}
+
+.prose:where([data-width="wide"]) {
+  max-width: 90%;
+}
+
+.prose:where([data-width="wide"]) > :is(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol) {
+  max-width: 48rem;
+}
+
+/* data-font-size Styles */
+
+:where([data-font-size^='4xl']) {
+  font-size: var(--bs-text-4xl);
+  line-height: var(--bs-leading-sm);
+}
+
+:where([data-font-size^='3xl']) {
+  font-size: var(--bs-text-3xl);
+  line-height: var(--bs-leading-sm);
+}
+
+:where([data-font-size^='2xl']) {
+  font-size: var(--bs-text-2xl);
+  line-height: var(--bs-leading-sm);
+}
+
+:where([data-font-size^='xl']) {
+  font-size: var(--bs-text-xl);
+  line-height: var(--bs-leading-sm);
+}
+
+:where([data-font-size^='lg']) {
+  font-size: var(--bs-text-lg);
+}
+
+:where([data-font-size^='md']) {
+  font-size: var(--bs-text-md);
+}
+
+:where([data-font-size^='base']) {
+  font-size: var(--bs-text-base);
+}
+
+:where([data-font-size^='sm']) {
+  font-size: var(--bs-text-sm);
+}
+
+:where([data-font-size^='xs']) {
+  font-size: var(--bs-text-xs);
+}
+
+/* data-color Styles */
+
+:where([data-color^='base']) {
+  color: var(--bs-ink-base);
+}
+
+:where([data-color^='medium']) {
+  color: var(--bs-ink-medium);
+}
+
+:where([data-color^='light']) {
+  color: var(--bs-ink-light);
+}
+
+:where([data-color^='accent']) {
+  color: var(--bs-ink-accent);
+}
+
+/* data-weight Styles */
+
+:where([data-weight^='normal'], [data-weight^='400']) {
+  font-weight: 400;
+}
+
+:where([data-weight^='bold'], [data-weight^='600']) {
+  font-weight: 600;
+}
+
+body:where(.fluid) {
+  font-size: var(--bs-text-f-md);
+}
+
+/* Defaults & Variants */
+
+:where(.fluid) h1,
+:where(.fluid) [data-variant^='heading-1'] {
+  font-size: var(--bs-text-f-3xl);
+}
+
+:where(.fluid) h2,
+:where(.fluid) [data-variant^='heading-2'] {
+  font-size: var(--bs-text-f-2xl);
+}
+
+:where(.fluid) h3,
+:where(.fluid) [data-variant^='heading-3'] {
+  font-size: var(--bs-text-f-xl);
+}
+
+:where(.fluid) h4,
+:where(.fluid) [data-variant^='heading-4'] {
+  font-size: var(--bs-text-f-lg);
+}
+
+:where(.fluid) h5,
+:where(.fluid) [data-variant^='heading-5'] {
+  font-size: var(--bs-text-f-md);
+}
+
+:where(.fluid) h6,
+:where(.fluid) [data-variant^='heading-6'] {
+  font-size: var(--bs-text-f-sm);
+}
+
+:where(.fluid).prose,
+:where(.fluid) .prose,
+:where(.fluid) [data-variant^='default'] {
+  font-size: var(--bs-text-f-md);
+}
+
+:where(.fluid) .bs-meta,
+:where(.fluid) [data-variant^='meta'] {
+  font-size: var(--bs-text-f-xs);
+}
+
+/* Fluid data-font-size Styles */
+
+:where(.fluid) [data-font-size^='4xl'] {
+  font-size: var(--bs-text-f-4xl);
+}
+
+:where(.fluid) [data-font-size^='3xl'] {
+  font-size: var(--bs-text-f-3xl);
+}
+
+:where(.fluid) [data-font-size^='2xl'] {
+  font-size: var(--bs-text-f-2xl);
+}
+
+:where(.fluid) [data-font-size^='xl'] {
+  font-size: var(--bs-text-f-xl);
+  line-height: var(--bs-leading-sm);
+}
+
+:where(.fluid) [data-font-size^='lg'] {
+  font-size: var(--bs-text-f-lg);
+}
+
+:where(.fluid) [data-font-size^='md'] {
+  font-size: var(--bs-text-f-md);
+}
+
+:where(.fluid) [data-font-size^='base'] {
+  font-size: var(--bs-text-f-base);
+}
+
+:where(.fluid) [data-font-size^='sm'] {
+  font-size: var(--bs-text-f-sm);
+}
+
+:where(.fluid) [data-font-size^='xs'] {
+  font-size: var(--bs-text-f-xs);
+}
+
+/* Using :where() here for no additional specificity */
+
+:where(.prose) a {
+  border-radius: 0.25rem; /* gives outlines rounded corners in modern browsers */
+  -webkit-box-decoration-break: clone;
+          box-decoration-break: clone;
+  color: var(--bs-purple-400);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: all 0.15s ease-in-out;
+  outline-color: var(--bs-blue-400);
+}
+
+:where(.prose) a:where(:not(.button)):hover,
+:where(.prose) a:where(:not(.button)):focus,
+:where(.prose) a:where(:not(.button)):focus-visible {
+  color: var(--bs-plum-400);
+  text-decoration-color: var(--bs-purple-400);
+}
+
+:where(.prose) a:focus-visible {
+  outline-offset: var(--bs-space-1);
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+:where(.prose) a:focus:where(:not(:focus-visible)) {
+  outline: none;
+}
+
+/* dark links still need .dark because we don't want them overwritten by the light theme link styles in applications */
+
+.dark :where(.prose) a:not(.button, .pill) {
+  color: var(--bs-purple-200);
+  outline-color: var(--bs-blue-300);
+}
+
+.dark :where(.prose) a:where(:not(.button)):hover,
+.dark :where(.prose) a:where(:not(.button)):focus,
+.dark :where(.prose) a:where(:not(.button)):focus-visible {
+  color: var(--bs-pink-300);
+  text-decoration-color: var(--bs-purple-200);
+}
+
+.dark :where(.prose) a:focus-visible {
+  outline-offset: var(--bs-space-1);
+}
+
+.dark :where(.prose) a:focus:where(:not(:focus-visible)) {
+  outline: none;
+}
+
+.box-shadow {
+  box-shadow: var(--bs-shadow);
+}
+
+.box-shadow:where([data-variant="center"]) {
+  box-shadow: var(--bs-shadow-contentLowCenter);
+}
+
+.box-shadow:where([data-variant="medium"]) {
+  box-shadow: var(--bs-shadow-contentMedium);
+}
+
+.box-shadow:where([data-variant="high"]) {
+  box-shadow: var(--bs-shadow-contentHigh);
+}
+
+.box-shadow:where([data-variant="left-panel"]) {
+  box-shadow: var(--bs-shadow-drawerLeft);
+}
+
+.box-shadow:where([data-variant="right-panel"]) {
+  box-shadow: var(--bs-shadow-drawerRight);
+}
+
+.box-shadow:where([data-variant="profile"]) {
+  box-shadow: var(--bs-shadow-profilePhoto);
+}
+
+.box {
+  background: var(--bg-color, var(--bs-bg-subtle));
+  border-radius: 0.25rem;
+  padding: var(--box-space, var(--bs-space-6));
+}
+
+.box[data-invert] {
+  --bg-color: var(--bs-bg-invert);
+  color: var(--bs-ink-invert);
+}
+
+:where(.fluid) .box {
+  padding: var(--box-space, var(--bs-space-f-6));
+}
+
+.cluster {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cluster-space, var(--bs-space-6));
+  justify-content: flex-start;
+}
+
+.cluster[data-gap="tight"] {
+  gap: var(--cluster-space, var(--bs-space-2));
+}
+
+:where(.fluid) .cluster {
+  gap: var(--cluster-space, var(--bs-space-f-6));
+}
+
+:where(.fluid) .cluster[data-gap="tight"] {
+  gap: var(--cluster-space, var(--bs-space-f-2));
+}
+
+.flow > * + * {
+  margin-top: var(--flow-space, 1.25em);
+}
+
+.flow > :is(h1, h2, h3, h4, h5, h6) {
+  --flow-space: 2em;
+}
+
+.flow > hr + * {
+  --flow-space: 1.5em;
+}
+
+.flow > :is(h1, h2, h3, h4, h5, h6) + * {
+  --flow-space: 0.5em;
+}
+
+.flow > :is(ul, ol) > li {
+  margin-top: var(--flow-space, 0.625em);
+}
+
+.region {
+  padding-block: var(--region-space, var(--bs-space-6));
+}
+
+.region[data-space^='sm'] {
+  padding-block: var(--bs-space-3);
+}
+
+.region[data-space^='lg'] {
+  padding-block: var(--bs-space-12);
+}
+
+:where(.fluid) .region {
+  padding-block: var(--region-space, var(--bs-space-f-6));
+}
+
+:where(.fluid) .region[data-space^='sm'] {
+  padding-block: var(--bs-space-f-3);
+}
+
+:where(.fluid) .region[data-space^='lg'] {
+  padding-block: var(--bs-space-f-12);
+}
+
+.wrapper {
+  margin-inline: auto;
+  max-width: var(--max-width, 75rem);
+  min-width: 0;
+  padding-inline: var(--wrapper-space, var(--bs-space-6));
+  position: relative;
+  width: 100%;
+}
+
+:where(.fluid) .wrapper {
+  padding-inline: var(--wrapper-space, var(--bs-space-f-6));
+}
+
+.wrapper[data-flush] {
+  padding-inline: 0;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.measure-compact {
+  max-width: 40ch;
+}
+
+.measure-short {
+  max-width: 50ch;
+}
+
+.measure-long {
+  max-width: 70ch;
+}