@jrgermain/stylesheet 0.2.0 → 0.3.0

package/src/styles/components/_chip.scss

@@ -1,151 +0,0 @@
-@use "../utils";
-
-$color-variants: (
-  "red",
-  "orange",
-  "yellow",
-  "green",
-  "sky",
-  "blue",
-  "purple",
-  "magenta",
-  "brand",
-  "gray"
-);
-
-.chip {
-  --chip-fg-color: white;
-
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--radius-full);
-  font-size: var(--font-size-s);
-  padding-block: var(--space-3xs);
-  padding-inline: var(--space-xs);
-  background-color: var(--chip-bg-color);
-  border: var(--border-s) solid var(--chip-border-color);
-  color: var(--chip-fg-color);
-  flex-shrink: 0;
-  cursor: default;
-  transition-property: box-shadow, background-color, border-color;
-  transition-duration: 200ms;
-  transition-timing-function: ease;
-  text-decoration: none;
-  appearance: none;
-  line-height: 1.2;
-
-  &:is(:focus-visible, .focus) {
-    box-shadow: 0 0 0 0.2em var(--chip-focus-color);
-  }
-
-  &.clickable {
-    cursor: pointer;
-    box-shadow: var(--shadow-s);
-
-    &:is(:focus-visible, .focus) {
-      outline: 0;
-      box-shadow:
-        var(--shadow-s),
-        0 0 0 0.2em var(--chip-focus-color);
-    }
-
-    &:is(:hover, .hover) {
-      background-color: var(--chip-border-color);
-    }
-
-    &:is(:active, .active) {
-      background-color: var(--chip-bg-color-active);
-      border-color: var(--chip-bg-color-active);
-    }
-  }
-
-  @each $color in $color-variants {
-    &.#{$color} {
-      --chip-bg-color: var(--color-#{$color}-6);
-      --chip-border-color: var(--color-#{$color}-7);
-      --chip-focus-color: var(--color-#{$color}-transparent);
-      --chip-bg-color-active: var(--color-#{$color}-5);
-    }
-  }
-
-  &.black {
-    --chip-bg-color: black;
-    --chip-border-color: var(--color-gray-4);
-    --chip-focus-color: var(--color-gray-transparent);
-    --chip-bg-color-active: var(--color-gray-1);
-  }
-
-  &.white {
-    --chip-fg-color: black;
-    --chip-bg-color: white;
-    --chip-border-color: var(--color-gray-8);
-    --chip-focus-color: var(--color-gray-transparent);
-    --chip-bg-color-active: var(--color-gray-7);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    @each $color in $color-variants {
-      &.#{$color} {
-        --chip-border-color: var(--color-#{$color}-5);
-        --chip-bg-color-active: var(--color-#{$color}-7);
-      }
-    }
-
-    &.black {
-      --chip-border-color: var(--color-gray-7);
-      --chip-bg-color-active: var(--color-gray-8);
-    }
-
-    &.white {
-      --chip-border-color: var(--color-gray-2);
-      --chip-bg-color-active: var(--color-gray-3);
-    }
-  }
-
-  .delete {
-    outline: 0;
-    margin-inline: var(--space-3xs) calc(-1 * var(--space-2xs));
-    font-size: 0.6em;
-    border: var(--border-s) solid var(--chip-border-color);
-    border-radius: var(--radius-full);
-    transition-property: background-color, border-color;
-    transition-duration: 200ms;
-    transition-timing-function: ease;
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    height: 2em;
-    width: 2em;
-    user-select: none;
-    background-color: #0002;
-    padding: 0;
-    display: inline-flex;
-    box-shadow: none;
-
-    &::after {
-      content: "";
-      width: 1.7em;
-      height: 1.7em;
-      mask-image: #{utils.svg-to-data-url(
-          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>'
-        )};
-      mask-size: contain;
-      mask-repeat: no-repeat;
-      mask-position: center;
-      background-color: var(--chip-fg-color);
-      margin: auto;
-    }
-
-    &:is(:focus-visible, .focus) {
-      border-color: var(--chip-fg-color);
-    }
-
-    &:is(:hover, .hover, :focus-visible, .focus) {
-      background-color: #0001;
-    }
-
-    &:is(:active, .active) {
-      background-color: #0003;
-    }
-  }
-}

package/src/styles/components/_dialog.scss

@@ -1,234 +0,0 @@
-@use "./text";
-@use "../utils";
-
-dialog,
-dialog::backdrop {
-  --dialog-starting-opacity: 0.25;
-  --dialog-starting-transform: translateY(8px);
-  --dialog-open-opacity: 1;
-  --dialog-open-transform: translate(0);
-  --dialog-ending-opacity: 0;
-  --dialog-ending-transform: translateY(-4px) scale(0.97);
-  --dialog-backdrop-starting-opacity: 0;
-  --dialog-backdrop-open-opacity: 0.75;
-  --dialog-backdrop-ending-opacity: 0;
-  --dialog-backdrop-color: var(--color-gray-2);
-
-  @media (prefers-reduced-motion) {
-    --dialog-starting-transform: translate(0);
-    --dialog-ending-transform: translate(0);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    --dialog-backdrop-color: var(--color-gray-8);
-    --dialog-backdrop-open-opacity: 0.85;
-  }
-}
-
-dialog {
-  box-shadow: var(--shadow-xl);
-  border: var(--border-s) solid var(--color-outline);
-  border-radius: var(--radius-l);
-  background-color: var(--color-body-alt);
-  color: var(--color-body-text);
-  padding: 0;
-  flex-direction: column;
-  gap: 0;
-
-  &::backdrop {
-    background-color: var(--dialog-backdrop-color);
-  }
-
-  &.drawer {
-    --dialog-starting-opacity: 0.5;
-
-    position: fixed;
-    inset: 0;
-    border-radius: 0;
-    margin: 0;
-    border: 0;
-    overflow: auto;
-
-    &.left {
-      right: auto;
-
-      @media (prefers-reduced-motion: no-preference) {
-        --dialog-starting-transform: translateX(-16px);
-        --dialog-ending-transform: translateX(-16px);
-      }
-    }
-
-    &.top {
-      bottom: auto;
-
-      @media (prefers-reduced-motion: no-preference) {
-        --dialog-starting-transform: translateY(-16px);
-        --dialog-ending-transform: translateY(-16px);
-      }
-    }
-
-    &.right {
-      left: auto;
-
-      @media (prefers-reduced-motion: no-preference) {
-        --dialog-starting-transform: translateX(16px);
-        --dialog-ending-transform: translateX(16px);
-      }
-    }
-
-    &.bottom {
-      top: auto;
-
-      @media (prefers-reduced-motion: no-preference) {
-        --dialog-starting-transform: translateY(16px);
-        --dialog-ending-transform: translateY(16px);
-      }
-    }
-
-    &.top,
-    &.bottom {
-      width: 100dvw;
-      max-width: unset;
-      height: auto;
-      max-height: 100dvh;
-      min-height: min(100dvh, 250px);
-
-      &.small {
-        max-height: min(100dvh, 300px);
-      }
-
-      &.medium {
-        max-height: min(100dvh, 450px);
-      }
-
-      &.large {
-        max-height: min(100dvh, 600px);
-      }
-    }
-
-    &.left,
-    &.right {
-      height: 100dvh;
-      max-height: unset;
-      width: auto;
-      min-width: min(100dvw, 300px);
-      max-width: 100dvw;
-
-      &.small {
-        max-width: min(100dvw, 350px);
-      }
-
-      &.medium {
-        max-width: min(100dvw, 450px);
-      }
-
-      &.large {
-        max-width: min(100dvw, 700px);
-      }
-    }
-  }
-
-  &:not(.drawer) {
-    --dialog-width: 9999px;
-
-    max-height: calc(100svh - 4 * var(--space-body));
-    max-width: min(calc(100svw - 4 * var(--space-body)), var(--dialog-width));
-
-    &.small {
-      --dialog-width: 400px;
-    }
-
-    &.medium {
-      --dialog-width: 650px;
-    }
-
-    &.large {
-      --dialog-width: 900px;
-    }
-  }
-
-  &[open] {
-    display: flex;
-  }
-}
-
-.dialog-header {
-  font-family: var(--font-family-heading);
-  font-size: var(--font-size-m);
-  font-weight: var(--font-weight-bold);
-  line-height: 1;
-  padding: var(--space-m);
-  padding-block-end: var(--space-xs);
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: var(--color-brand-3);
-  margin: 0;
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    margin: 0;
-  }
-
-  .button.close {
-    color: inherit;
-    margin: -0.5rem;
-    margin-inline-start: var(--space-3xs);
-
-    &::after {
-      content: "";
-      width: 1.8em;
-      height: 1.8em;
-      mask-image: #{utils.svg-to-data-url(
-          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>'
-        )};
-      mask-size: contain;
-      mask-repeat: no-repeat;
-      background-color: currentcolor;
-    }
-  }
-}
-
-.dialog-body {
-  padding: var(--space-m);
-  padding-block-start: var(--space-xs);
-  flex-shrink: 1;
-  display: block;
-  overflow: auto;
-  margin: 0;
-}
-
-.dialog-footer {
-  padding: var(--space-xs);
-  flex-shrink: 0;
-  display: flex;
-  gap: var(--space-2xs);
-  justify-content: flex-start;
-  background-color: var(--color-body);
-  border-block-start: var(--border-s) solid var(--color-outline);
-  margin: 0;
-
-  @media screen and (width <= 500px) {
-    flex-direction: column;
-    width: 100%;
-    justify-content: stretch;
-  }
-
-  .button:not(.small, .medium, .large) {
-    font-size: 0.9rem;
-  }
-}
-
-@supports (transition-behavior: allow-discrete) and (overlay: none) {
-  dialog {
-    animation: unset;
-  }
-}

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

@@ -1,149 +0,0 @@
-@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-outline);
-  background: var(--color-gray-9);
-  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

@@ -1,96 +0,0 @@
-@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/_table.scss

@@ -1,82 +0,0 @@
-@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);
-}