@wwtdev/bsds-css 1.0.2 → 1.1.0

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

@@ -171,13 +171,15 @@
    https://tailwindcss.com/docs/preflight#border-styles-are-reset-globally
 */
 
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
+
 *,
 *::before,
 *::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
   border-color: currentColor; /* 2 */
+  border-style: solid; /* 2 */
+  border-width: 0; /* 2 */
+  box-sizing: border-box; /* 1 */
 }
 
 /* Remove default margin */
@@ -199,28 +201,28 @@ dd {
 
 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
 
-ul[role='list'],
-ol[role='list'] {
+ul:where([role='list']),
+ol:where([role='list']) {
   list-style: none;
 }
 
 /* Set core root defaults */
 
-html:focus-within {
+html:where(:focus-within) {
   scroll-behavior: smooth;
 }
 
 /* Set core body defaults */
 
 body {
+  line-height: 1.5;
   min-height: 100vh;
   text-rendering: optimizeSpeed;
-  line-height: 1.5;
 }
 
-/* A elements that don't have a class get default styles */
+/* Elements that don't have a class get default styles */
 
-a:not([class]) {
+a:where(:not([class])) {
   -webkit-text-decoration-skip: ink;
           text-decoration-skip-ink: auto;
 }
@@ -235,7 +237,9 @@ picture {
 
 /* Inherit fonts for inputs */
 
-:where(input, textarea, select) {
+input,
+textarea,
+select {
   font: inherit;
 }
 
@@ -246,7 +250,7 @@ button {
 /* Remove all animations and transitions for people that prefer not to see them */
 
 @media (prefers-reduced-motion: reduce) {
-  html:focus-within {
+  html:where(:focus-within) {
     scroll-behavior: auto;
   }
 
@@ -255,11 +259,13 @@ button {
   *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
   }
 }
 
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
+
 :root,
 :host {
   --bs-bg-base: var(--bs-white);
@@ -275,6 +281,7 @@ button {
 
   /* Spacing */
   --bs-content-top: 4rem;
+  --bs-content-max-width: 72rem;
 
   /* Type */
   --bs-font-normal: 400;
@@ -282,7 +289,7 @@ button {
 }
 
 .dark,
-.dark :host {
+.dark :where(:host) {
   --bs-bg-base: var(--bs-navy-500);
   --bs-bg-subtle: #2F2F51;
   --bs-bg-invert: var(--bs-white);
@@ -293,6 +300,22 @@ button {
   --bs-ink-accent: var(--bs-plum-100);
   --bs-ink-invert: var(--bs-black);
   --bs-border: var(--bs-gray-400);
+  --bs-shadow-base: rgba(0, 0, 0, 0.06);
+  --bs-shadow-invert: rgba(10, 11, 25, 0.60);
+  --bs-shadow: -4px 4px 12px var(--bs-shadow-base),
+    -8px 8px 16px var(--bs-shadow-invert);
+  --bs-shadow-contentLow: -4px 4px 12px var(--bs-shadow-base),
+    -8px 8px 16px var(--bs-shadow-invert);
+  --bs-shadow-contentLowCenter: 0px 0px 12px var(--bs-shadow-base),
+    0px 0px 16px var(--bs-shadow-invert);
+  --bs-shadow-contentMedium: -8px 8px 24px var(--bs-shadow-base),
+    -16px 16px 32px var(--bs-shadow-invert);
+  --bs-shadow-contentHigh: 0px 16px 48px var(--bs-shadow-base),
+    0px 32px 64px var(--bs-shadow-invert);
+  --bs-shadow-drawerLeft: -12px 12px 24px var(--bs-shadow-base),
+    -16px 16px 32px var(--bs-shadow-invert);
+  --bs-shadow-drawerRight: -12px 12px 24px var(--bs-shadow-base),
+    16px 16px 32px var(--bs-shadow-invert);
 }
 
 body,
@@ -320,15 +343,17 @@ body,
 }
 
 hr {
+  background: var(--bs-border);
   border: 0;
   height: 1px;
-  background: var(--bs-border);
 }
 
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
+
 body {
-  font-weight: 400;
   font-family: 'Roobert', sans-serif;
   font-size: var(--bs-text-base);
+  font-weight: 400;
 }
 
 /* Default Element/data-variant Styles */
@@ -339,35 +364,41 @@ body {
   line-height: var(--bs-leading-sm);
 }
 
-h1, [data-variant^="heading-1"] {
+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"] {
+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"] {
+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"] {
+h4,
+[data-variant^="heading-4"] {
   font-size: var(--bs-text-lg);
   font-weight: 600;
 }
 
-h5, [data-variant^="heading-5"] {
+h5,
+[data-variant^="heading-5"] {
   font-size: var(--bs-text-md);
   font-weight: 600;
 }
 
-h6, [data-variant^="heading-6"] {
+h6,
+[data-variant^="heading-6"] {
   font-size: var(--bs-text-base);
   font-weight: 600;
 }
@@ -377,7 +408,7 @@ h6, [data-variant^="heading-6"] {
   max-width: 70ch;
 }
 
-.prose :where(h1, h2, h3, h4, h5, h6):not([data-color]) {
+:where(.prose) :is(h1, h2, h3, h4, h5, h6):where(:not([data-color])) {
   color: var(--bs-ink-base);
 }
 
@@ -385,12 +416,13 @@ h6, [data-variant^="heading-6"] {
   font-size: var(--bs-text-base);
 }
 
-.bs-meta, [data-variant^="meta"] {
+.bs-meta,
+[data-variant^="meta"] {
   font-size: var(--bs-text-xs);
   font-weight: 600;
 }
 
-:where(.prose blockquote) {
+:where(.prose) blockquote {
   border-left: 4px solid var(--bs-plum-200);
   color: var(--bs-plum-200);
   font-style: italic;
@@ -402,217 +434,215 @@ h6, [data-variant^="heading-6"] {
   max-width: 90%;
 }
 
-.prose:where([data-width="wide"]) > :is(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol) {
+.prose:where([data-width="wide"]) > :where(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol) {
   max-width: 48rem;
 }
 
 /* data-font-size Styles */
 
-:where([data-font-size^='4xl']) {
+[data-font-size^='4xl'] {
   font-size: var(--bs-text-4xl);
   line-height: var(--bs-leading-sm);
 }
 
-:where([data-font-size^='3xl']) {
+[data-font-size^='3xl'] {
   font-size: var(--bs-text-3xl);
   line-height: var(--bs-leading-sm);
 }
 
-:where([data-font-size^='2xl']) {
+[data-font-size^='2xl'] {
   font-size: var(--bs-text-2xl);
   line-height: var(--bs-leading-sm);
 }
 
-:where([data-font-size^='xl']) {
+[data-font-size^='xl'] {
   font-size: var(--bs-text-xl);
   line-height: var(--bs-leading-sm);
 }
 
-:where([data-font-size^='lg']) {
+[data-font-size^='lg'] {
   font-size: var(--bs-text-lg);
 }
 
-:where([data-font-size^='md']) {
+[data-font-size^='md'] {
   font-size: var(--bs-text-md);
 }
 
-:where([data-font-size^='base']) {
+[data-font-size^='base'] {
   font-size: var(--bs-text-base);
 }
 
-:where([data-font-size^='sm']) {
+[data-font-size^='sm'] {
   font-size: var(--bs-text-sm);
 }
 
-:where([data-font-size^='xs']) {
+[data-font-size^='xs'] {
   font-size: var(--bs-text-xs);
 }
 
 /* data-color Styles */
 
-:where([data-color^='base']) {
+[data-color^='base'] {
   color: var(--bs-ink-base);
 }
 
-:where([data-color^='medium']) {
+[data-color^='medium'] {
   color: var(--bs-ink-medium);
 }
 
-:where([data-color^='light']) {
+[data-color^='light'] {
   color: var(--bs-ink-light);
 }
 
-:where([data-color^='accent']) {
+[data-color^='accent'] {
   color: var(--bs-ink-accent);
 }
 
 /* data-weight Styles */
 
-:where([data-weight^='normal'], [data-weight^='400']) {
+[data-weight^='normal'],
+[data-weight^='400'] {
   font-weight: 400;
 }
 
-:where([data-weight^='bold'], [data-weight^='600']) {
+[data-weight^='bold'],
+[data-weight^='600'] {
   font-weight: 600;
 }
 
-body:where(.fluid) {
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
+
+:where(body).fluid {
   font-size: var(--bs-text-f-md);
 }
 
 /* Defaults & Variants */
 
-:where(.fluid) h1,
-:where(.fluid) [data-variant^='heading-1'] {
+.fluid :where(h1),
+.fluid :where([data-variant^='heading-1']) {
   font-size: var(--bs-text-f-3xl);
 }
 
-:where(.fluid) h2,
-:where(.fluid) [data-variant^='heading-2'] {
+.fluid :where(h2),
+.fluid :where([data-variant^='heading-2']) {
   font-size: var(--bs-text-f-2xl);
 }
 
-:where(.fluid) h3,
-:where(.fluid) [data-variant^='heading-3'] {
+.fluid :where(h3),
+.fluid :where([data-variant^='heading-3']) {
   font-size: var(--bs-text-f-xl);
 }
 
-:where(.fluid) h4,
-:where(.fluid) [data-variant^='heading-4'] {
+.fluid :where(h4),
+.fluid :where([data-variant^='heading-4']) {
   font-size: var(--bs-text-f-lg);
 }
 
-:where(.fluid) h5,
-:where(.fluid) [data-variant^='heading-5'] {
+.fluid :where(h5),
+.fluid :where([data-variant^='heading-5']) {
   font-size: var(--bs-text-f-md);
 }
 
-:where(.fluid) h6,
-:where(.fluid) [data-variant^='heading-6'] {
+.fluid :where(h6),
+.fluid :where([data-variant^='heading-6']) {
   font-size: var(--bs-text-f-sm);
 }
 
-:where(.fluid).prose,
-:where(.fluid) .prose,
-:where(.fluid) [data-variant^='default'] {
+.fluid:where(.prose),
+.fluid :where(.prose),
+.fluid :where([data-variant^='default']) {
   font-size: var(--bs-text-f-md);
 }
 
-:where(.fluid) .bs-meta,
-:where(.fluid) [data-variant^='meta'] {
+.fluid :where(.bs-meta),
+.fluid :where([data-variant^='meta']) {
   font-size: var(--bs-text-f-xs);
 }
 
 /* Fluid data-font-size Styles */
 
-:where(.fluid) [data-font-size^='4xl'] {
+.fluid :where([data-font-size^='4xl']) {
   font-size: var(--bs-text-f-4xl);
 }
 
-:where(.fluid) [data-font-size^='3xl'] {
+.fluid :where([data-font-size^='3xl']) {
   font-size: var(--bs-text-f-3xl);
 }
 
-:where(.fluid) [data-font-size^='2xl'] {
+.fluid :where([data-font-size^='2xl']) {
   font-size: var(--bs-text-f-2xl);
 }
 
-:where(.fluid) [data-font-size^='xl'] {
+.fluid :where([data-font-size^='xl']) {
   font-size: var(--bs-text-f-xl);
   line-height: var(--bs-leading-sm);
 }
 
-:where(.fluid) [data-font-size^='lg'] {
+.fluid :where([data-font-size^='lg']) {
   font-size: var(--bs-text-f-lg);
 }
 
-:where(.fluid) [data-font-size^='md'] {
+.fluid :where([data-font-size^='md']) {
   font-size: var(--bs-text-f-md);
 }
 
-:where(.fluid) [data-font-size^='base'] {
+.fluid :where([data-font-size^='base']) {
   font-size: var(--bs-text-f-base);
 }
 
-:where(.fluid) [data-font-size^='sm'] {
+.fluid :where([data-font-size^='sm']) {
   font-size: var(--bs-text-f-sm);
 }
 
-:where(.fluid) [data-font-size^='xs'] {
+.fluid :where([data-font-size^='xs']) {
   font-size: var(--bs-text-f-xs);
 }
 
-/* Using :where() here for no additional specificity */
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
 
-:where(.prose) a {
+:where(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);
+  outline-color: var(--bs-blue-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 {
+:where(a:hover),
+:where(a:focus),
+:where(a:focus-visible) {
   color: var(--bs-plum-400);
   text-decoration-color: var(--bs-purple-400);
 }
 
-:where(.prose) a:focus-visible {
+:where(a:focus-visible) {
   outline-offset: var(--bs-space-1);
   outline-style: solid;
   outline-width: 2px;
 }
 
-:where(.prose) a:focus:where(:not(:focus-visible)) {
+:where(a:focus: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 mode styling */
 
-.dark :where(.prose) a:not(.button, .bs-pill) {
+:where(.dark a) {
   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 {
+:where(.dark a:hover),
+:where(.dark a:focus),
+:where(.dark a: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;
-}
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
 
 .box-shadow {
   box-shadow: var(--bs-shadow);
@@ -642,13 +672,15 @@ body:where(.fluid) {
   box-shadow: var(--bs-shadow-profilePhoto);
 }
 
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
+
 .box {
   background: var(--bg-color, var(--bs-bg-subtle));
   border-radius: 0.25rem;
   padding: var(--box-space, var(--bs-space-6));
 }
 
-.box[data-invert] {
+.box:where([data-invert]) {
   --bg-color: var(--bs-bg-invert);
   color: var(--bs-ink-invert);
 }
@@ -665,12 +697,12 @@ body:where(.fluid) {
   justify-content: flex-start;
 }
 
-:where(.cluster[data-variant^="brick"]) > * {
+.cluster:where([data-variant^="brick"]) > * {
   align-self: stretch;
   flex-grow: 1;
 }
 
-.cluster[data-gap="tight"] {
+.cluster:where([data-gap="tight"]) {
   gap: var(--cluster-space, var(--bs-space-2));
 }
 
@@ -678,7 +710,7 @@ body:where(.fluid) {
   gap: var(--cluster-space, var(--bs-space-f-6));
 }
 
-:where(.fluid) .cluster[data-gap="tight"] {
+:where(.fluid) .cluster:where([data-gap="tight"]) {
   gap: var(--cluster-space, var(--bs-space-f-2));
 }
 
@@ -686,19 +718,19 @@ body:where(.fluid) {
   margin-top: var(--flow-space, 1.25em);
 }
 
-.flow > :is(h1, h2, h3, h4, h5, h6) {
+.flow > :where(h1, h2, h3, h4, h5, h6) {
   --flow-space: 2em;
 }
 
-.flow > hr + * {
+.flow > :where(hr) + * {
   --flow-space: 1.5em;
 }
 
-.flow > :is(h1, h2, h3, h4, h5, h6) + * {
+.flow > :where(h1, h2, h3, h4, h5, h6) + * {
   --flow-space: 0.5em;
 }
 
-.flow > :is(ul, ol) > li {
+.flow > :where(ul, ol) > :where(li) {
   margin-top: var(--flow-space, 0.625em);
 }
 
@@ -706,11 +738,11 @@ body:where(.fluid) {
   padding-block: var(--region-space, var(--bs-space-6));
 }
 
-.region[data-space^='sm'] {
+.region:where([data-space^='sm']) {
   padding-block: var(--bs-space-3);
 }
 
-.region[data-space^='lg'] {
+.region:where([data-space^='lg']) {
   padding-block: var(--bs-space-12);
 }
 
@@ -718,11 +750,11 @@ body:where(.fluid) {
   padding-block: var(--region-space, var(--bs-space-f-6));
 }
 
-:where(.fluid) .region[data-space^='sm'] {
+:where(.fluid) .region:where([data-space^='sm']) {
   padding-block: var(--bs-space-f-3);
 }
 
-:where(.fluid) .region[data-space^='lg'] {
+:where(.fluid) .region:where([data-space^='lg']) {
   padding-block: var(--bs-space-f-12);
 }
 
@@ -739,10 +771,12 @@ body:where(.fluid) {
   padding-inline: var(--wrapper-space, var(--bs-space-f-6));
 }
 
-.wrapper[data-flush] {
+.wrapper:where([data-flush]) {
   padding-inline: 0;
 }
 
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
+
 .visually-hidden {
   border: 0;
   clip: rect(0 0 0 0);
@@ -751,8 +785,8 @@ body:where(.fluid) {
   overflow: hidden;
   padding: 0;
   position: absolute;
-  width: 1px;
   white-space: nowrap;
+  width: 1px;
 }
 
 .measure-compact {
@@ -766,3 +800,102 @@ body:where(.fluid) {
 .measure-long {
   max-width: 70ch;
 }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow-x: auto;
+  max-width: 100%;
+  width: 100%;
+}
+
+thead {
+  color: var(--bs-ink-base);
+  font-size: var(--bs-font-base);
+  font-weight: 600;
+}
+
+tbody {
+  color: var(--bs-ink-light);
+}
+
+th {
+  background: var(--bs-bg-base);
+}
+
+th, td {
+  border-bottom: 1px solid var(--bs-border);
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  padding: var(--bs-space-2);
+  text-align: left;
+}
+
+/* Table Borders */
+
+table[data-borders^="none"] {
+  border: 0;
+}
+
+table[data-borders^="all"] :where(th, td) {
+  border-left: 1px solid var(--bs-border);
+}
+
+table[data-borders^="all"] :where(th, td):last-child {
+  border-right: 1px solid var(--bs-border);
+}
+
+table[data-borders^="all"] th {
+  border-top: 1px solid var(--bs-border);
+}
+
+/* Table Rows */
+
+table:where([data-rows^="striped"]) tbody > tr:nth-child(even) {
+  background-color: var(--bs-bg-subtle);
+}
+
+/* Table Cells */
+
+table[data-cells^="fixed"] {
+  table-layout: fixed;
+}
+
+table:where([data-cells^="height"]) td {
+  height: 4.5rem;
+  vertical-align: middle;
+}
+
+/* Sticky Header */
+
+table:where([data-sticky]) {
+  isolation: isolate;
+}
+
+table:where([data-sticky^="top"]) td {
+  z-index: 1;
+}
+
+table:where([data-sticky^="top"]) {
+  border-collapse: separate;
+  overflow-y: unset; /* Will break sticky headers if removed */
+  position: relative;
+}
+
+table:where([data-sticky^="left"]) {
+  border-collapse: separate;
+  overflow-x: unset; /* Will break sticky headers if removed */
+  position: relative;
+}
+
+table:where([data-sticky^="top"]) th {
+  position: sticky;
+  top: var(--bs-content-top);
+  z-index: 2;
+}
+
+table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+}