@jrgermain/stylesheet 0.0.3

package/src/styles/components/_layout.scss

@@ -0,0 +1,85 @@
+%flex-layout {
+  display: flex;
+  gap: var(--space-s);
+
+  &.densest {
+    gap: var(--space-3xs);
+  }
+
+  &.denser {
+    gap: var(--space-2xs);
+  }
+
+  &.dense {
+    gap: var(--space-xs);
+  }
+
+  &.sparse {
+    gap: var(--space-m);
+  }
+
+  &.sparser {
+    gap: var(--space-l);
+  }
+
+  &.sparsest {
+    gap: var(--space-xl);
+  }
+
+  &.horizontal,
+  &.horizontally {
+    flex-direction: row;
+  }
+
+  &.vertical,
+  &.vertically {
+    flex-direction: column;
+  }
+}
+
+.flow {
+  @extend %flex-layout;
+
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: start;
+}
+
+.stack {
+  @extend %flex-layout;
+
+  flex-wrap: nowrap;
+  align-items: stretch;
+  justify-content: start;
+}
+
+.separate {
+  @extend %flex-layout;
+
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.space {
+  @extend %flex-layout;
+
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-around;
+}
+
+:is(form, .form, .text-container):not(.no-max-width) {
+  max-width: 60ch;
+}
+
+%visually-hidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}

package/src/styles/components/_progress-meter.scss

@@ -0,0 +1,149 @@
+@mixin background {
+  border-radius: var(--radius-s);
+  border: 0;
+  display: block;
+  inline-size: 100%;
+  block-size: 1em;
+  box-shadow: inset 0 0 0 var(--border-s) var(--color-gray-7);
+  background: var(--color-gray-8);
+  box-sizing: border-box;
+  overflow: clip;
+}
+
+@mixin value {
+  border-radius: var(--radius-s);
+  border: var(--border-s) solid transparent;
+  box-sizing: border-box;
+}
+
+@mixin value-good {
+  background: var(--color-green-6);
+  border-color: var(--color-green-5);
+}
+
+@mixin value-ok {
+  background: var(--color-yellow-7);
+  border-color: var(--color-yellow-6);
+
+  @media (prefers-color-scheme: dark) {
+    background: var(--color-yellow-4);
+    border-color: var(--color-yellow-3);
+  }
+}
+
+@mixin value-bad {
+  background: var(--color-red-6);
+  border-color: var(--color-red-5);
+}
+
+@mixin value-neutral {
+  background: var(--color-blue-6);
+  border-color: var(--color-blue-5);
+}
+
+@mixin value-indeterminate {
+  @include value-neutral;
+
+  opacity: 0.5;
+  inline-size: 100% !important;
+  animation: indeterminate-progress 1s linear infinite alternate;
+}
+
+@keyframes indeterminate-progress {
+  from {
+    opacity: 0.2;
+  }
+
+  to {
+    opacity: 0.8;
+  }
+}
+
+meter {
+  appearance: none;
+  inline-size: 100%;
+  block-size: 1em;
+}
+
+@supports selector(::-moz-meter-bar) {
+  meter {
+    @include background;
+  }
+}
+
+::-webkit-meter-bar {
+  @include background;
+}
+
+::-webkit-meter-optimum-value,
+::-webkit-meter-suboptimum-value,
+::-webkit-meter-even-less-good-value {
+  @include value;
+}
+
+::-webkit-meter-inner-element {
+  display: inline-block;
+  position: relative;
+}
+
+::-moz-meter-bar {
+  @include value;
+}
+
+::-webkit-meter-optimum-value {
+  @include value-good;
+}
+
+:-moz-meter-optimum::-moz-meter-bar {
+  @include value-good;
+}
+
+::-webkit-meter-suboptimum-value {
+  @include value-ok;
+}
+
+:-moz-meter-sub-optimum::-moz-meter-bar {
+  @include value-ok;
+}
+
+::-webkit-meter-even-less-good-value {
+  @include value-bad;
+}
+
+:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  @include value-bad;
+}
+
+progress {
+  appearance: none;
+  inline-size: 100%;
+  block-size: 1em;
+}
+
+@supports selector(::-moz-progress-bar) {
+  progress {
+    @include background;
+  }
+}
+
+::-webkit-progress-bar {
+  @include background;
+}
+
+::-webkit-progress-value {
+  @include value;
+  @include value-neutral;
+}
+
+::-moz-progress-bar {
+  @include value;
+  @include value-neutral;
+}
+
+:indeterminate::-webkit-progress-value {
+  @include value-indeterminate;
+}
+
+:indeterminate::-moz-progress-bar {
+  @include value-indeterminate;
+}

package/src/styles/components/_range.scss

@@ -0,0 +1,96 @@
+@mixin track {
+  block-size: 0.25em;
+  inline-size: 100%;
+  border-radius: var(--radius-full);
+  background-color: var(--color-gray-8);
+  print-color-adjust: exact;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-gray-6);
+  }
+}
+
+@mixin thumb {
+  height: 1.25em;
+  width: 1.25em;
+  border-radius: var(--radius-full);
+  background-color: white;
+  box-shadow: var(--shadow-s);
+  border: var(--border-s) solid var(--color-outline);
+  transition-property: border-color, box-shadow, transform;
+  transition-duration: 200ms;
+  transition-timing-function: ease;
+}
+
+@mixin thumb-active {
+  border-color: var(--color-brand-5);
+
+  &:active {
+    @media screen and (resolution >= 2x) {
+      transform: scale(0.9);
+    }
+  }
+}
+
+@mixin thumb-focus {
+  border-color: var(--color-brand-5);
+  box-shadow: 0 0 0 0.2em var(--color-brand-transparent);
+}
+
+input[type="range"] {
+  font-size: 1rem;
+  block-size: 1.25em;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+
+  @media (pointer: coarse) {
+    font-size: 1.5rem;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 0;
+
+    &::-webkit-slider-thumb {
+      @include thumb-focus;
+    }
+
+    &::-moz-range-thumb {
+      @include thumb-focus;
+    }
+  }
+
+  &:enabled:active {
+    &::-webkit-slider-thumb {
+      @include thumb-active;
+    }
+
+    &::-moz-range-thumb {
+      @include thumb-active;
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    @include track;
+  }
+
+  &::-moz-range-track {
+    @include track;
+  }
+
+  &::-webkit-slider-thumb {
+    @include thumb;
+
+    appearance: none;
+    margin-block-start: -0.5em;
+  }
+
+  &::-moz-range-thumb {
+    @include thumb;
+  }
+}

package/src/styles/components/_skeleton.scss

@@ -0,0 +1,71 @@
+@keyframes skeleton-pulse-light {
+  from {
+    opacity: 0.14;
+  }
+
+  to {
+    opacity: 0.21;
+  }
+}
+
+@keyframes skeleton-pulse-dark {
+  from {
+    opacity: 0.28;
+  }
+
+  to {
+    opacity: 0.36;
+  }
+}
+
+.skeleton {
+  animation: skeleton-pulse-light 1s ease alternate 0s infinite !important;
+  border-radius: var(--radius-s) !important;
+  background-color: var(--color-gray-5) !important;
+  border: 0 !important;
+  outline: 0 !important;
+  box-shadow: 0 !important;
+  pointer-events: none !important;
+  color: transparent !important;
+  mask-image: none !important;
+  background-image: none !important;
+  print-color-adjust: exact;
+
+  &:is(p, .p, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
+    inline-size: 100%;
+  }
+
+  &:is(
+      p,
+      .p,
+      h1,
+      .h1,
+      h2,
+      .h2,
+      h3,
+      .h3,
+      h4,
+      .h4,
+      h5,
+      .h5,
+      h6,
+      .h6,
+      .chip
+    )::before {
+    content: ".";
+  }
+
+  &:is(button, .button, .chip):empty {
+    min-inline-size: 5em;
+  }
+
+  &::before,
+  &::after,
+  > * {
+    visibility: hidden !important;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    animation-name: skeleton-pulse-dark !important;
+  }
+}

package/src/styles/components/_switch.scss

@@ -0,0 +1,82 @@
+input[type="checkbox"].switch,
+label.switch input[type="checkbox"] {
+  font-size: 1rem;
+  print-color-adjust: exact;
+  appearance: none;
+  block-size: 1.8em;
+  inline-size: 3em;
+  border-radius: var(--radius-full);
+  background-color: var(--color-gray-8);
+  position: relative;
+  flex: none;
+  transition-property: background-color, box-shadow, border-color;
+  transition-duration: 200ms;
+  transition-timing-function: ease;
+  border: 0.1em solid var(--color-gray-7);
+  cursor: pointer;
+
+  &.small {
+    font-size: 0.8rem;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    height: 1.4em;
+    width: 1.4em;
+    background-color: white;
+    inset-inline-start: 0.1em;
+    inset-block-start: 0.1em;
+    border-radius: var(--radius-full);
+    box-shadow: var(--shadow-s);
+    transition-property: border-color, transform;
+    transition-duration: 200ms;
+    transition-timing-function: ease;
+    transform: translateX(0);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:is(:focus-visible, .focus) {
+    border-color: var(--color-gray-6);
+    box-shadow: 0 0 0 0.2em var(--color-gray-transparent);
+    outline: 0;
+  }
+
+  &:checked {
+    background-color: var(--color-brand-6);
+    border-color: var(--color-brand-5);
+
+    &::after {
+      transform: translateX(1.2em);
+    }
+
+    &:is(:focus-visible, .focus) {
+      box-shadow: 0 0 0 0.2em var(--color-brand-transparent);
+    }
+  }
+
+  &:dir(rtl):checked::after {
+    transform: translateX(-1.2em);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-gray-5);
+
+    &:checked {
+      background-color: var(--color-brand-5);
+    }
+  }
+}
+
+label.switch {
+  inline-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  font-weight: var(--font-weight-semibold);
+}

package/src/styles/components/_table.scss

@@ -0,0 +1,82 @@
+@use "./text";
+
+table {
+  --table-bg-odd: var(--color-body-alt);
+  --table-bg-even: var(--color-body);
+  --table-vertical-border: var(--border-s);
+
+  background-color: var(--color-body-alt);
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--font-size-m);
+  border: var(--border-s) solid var(--color-outline);
+  border-radius: var(--radius-s);
+  color: var(--color-body-text);
+
+  &.subtle {
+    --table-bg-odd: transparent;
+    --table-bg-even: transparent;
+    --table-vertical-border: 0;
+
+    border: 0;
+  }
+
+  &.dense :is(th, td) {
+    padding: var(--space-3xs) var(--space-2xs);
+  }
+
+  &.sparse :is(th, td) {
+    padding: var(--space-xs) var(--space-s);
+  }
+}
+
+caption {
+  @extend %h5;
+
+  text-align: unset;
+  margin: 0 0 var(--space-2xs);
+}
+
+th,
+td {
+  padding: var(--space-2xs) var(--space-xs);
+}
+
+th,
+tfoot td {
+  font-weight: var(--font-weight-bold);
+  text-align: center;
+}
+
+th {
+  border-block-end: var(--border-m) solid var(--color-outline);
+}
+
+tfoot td {
+  border-block-start: var(--border-m) solid var(--color-outline);
+}
+
+td {
+  text-align: unset;
+}
+
+:is(th, tfoot td):not(:last-of-type) {
+  border-inline-end: var(--table-vertical-border) dashed var(--color-outline);
+}
+
+td:not(tfoot td, :last-of-type) {
+  border-inline-end: var(--table-vertical-border) solid var(--color-outline);
+}
+
+tr:not(:last-of-type) td {
+  border-block-end: var(--border-s) solid var(--color-outline);
+}
+
+tbody tr:nth-child(odd),
+tbody:has(tr:last-of-type:nth-child(even)) + tfoot tr {
+  background-color: var(--table-bg-even);
+}
+
+tbody tr:nth-child(even) {
+  background-color: var(--table-bg-odd);
+}