trace-css 0.0.0-stage → 0.1.1

package/src/elements/button.css

@@ -0,0 +1,168 @@
+@layer trace.elements {
+  :where(:root) {
+    --trace-button-color: light-dark(
+      var(--trace-primary-darker),
+      var(--trace-secondary)
+    );
+    --trace-button-contrast: light-dark(
+      var(--trace-secondary),
+      var(--trace-primary-dark)
+    );
+    --trace-button-outline-color: var(--trace-button-color);
+    --trace-button-radius: var(--trace-radius-control);
+    --trace-button-font-size: 1rem;
+    --trace-button-line-height: 1.5rem;
+    --trace-button-padding-block: 0.375rem;
+    --trace-button-padding-inline: 0.75rem;
+    --trace-button-box-shadow: var(--trace-shadow);
+    --trace-button-icon-gap: 0.5em;
+  }
+
+  :where(button[type="reset"], input[type="reset"]) {
+    --trace-button-color: var(--trace-primary-light);
+    --trace-button-contrast: var(--trace-secondary-lighter);
+    --trace-button-outline-color: var(--trace-button-color);
+  }
+
+  :where(
+    button,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]
+  ) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--trace-button-icon-gap);
+    box-sizing: border-box;
+    padding: var(--trace-button-padding-block)
+      var(--trace-button-padding-inline);
+    border: 2px solid var(--trace-button-border, var(--trace-button-color));
+    border-radius: var(--trace-button-radius);
+    background-color: var(--trace-button-bg, var(--trace-button-color));
+    color: var(--trace-button-text, var(--trace-button-contrast));
+    font-size: var(--trace-button-font-size);
+    font-weight: 400;
+    line-height: var(--trace-button-line-height);
+    text-align: center;
+    cursor: pointer;
+    transition:
+      background-color 200ms ease-in-out,
+      color 200ms ease-in-out,
+      border-color 200ms ease-in-out,
+      box-shadow 200ms ease-in-out,
+      transform 200ms ease-in-out;
+  }
+
+  :where(
+    button:hover:not(:disabled),
+    input[type="button"]:hover:not(:disabled),
+    input[type="submit"]:hover:not(:disabled),
+    input[type="reset"]:hover:not(:disabled)
+  ) {
+    box-shadow: var(--trace-button-box-shadow);
+  }
+
+  :where(
+    button:active:not(:disabled),
+    input[type="button"]:active:not(:disabled),
+    input[type="submit"]:active:not(:disabled),
+    input[type="reset"]:active:not(:disabled)
+  ) {
+    transform: scale(0.95);
+    box-shadow: var(--trace-button-box-shadow);
+  }
+
+  :where(
+    button:focus-visible,
+    input[type="button"]:focus-visible,
+    input[type="submit"]:focus-visible,
+    input[type="reset"]:focus-visible
+  ) {
+    outline: 2px solid var(--trace-button-outline-color);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  :where(
+    button:disabled,
+    input[type="button"]:disabled,
+    input[type="submit"]:disabled,
+    input[type="reset"]:disabled
+  ) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :where(button[aria-busy="true"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    inline-size: var(--trace-loader-size, 1em);
+    block-size: var(--trace-loader-size, 1em);
+    border-radius: var(--trace-loader-radius, 2px);
+    background-color: var(
+      --trace-button-loader-color,
+      var(--trace-button-text, var(--trace-button-contrast))
+    );
+    animation: trace-square-rotate var(--trace-loader-duration, 3s) ease-in-out
+      infinite;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(
+      button,
+      input[type="button"],
+      input[type="submit"],
+      input[type="reset"]
+    ) {
+      transition: none;
+      transform: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(
+      button:disabled,
+      input[type="button"]:disabled,
+      input[type="submit"]:disabled,
+      input[type="reset"]:disabled
+    ) {
+      opacity: 1;
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+  :where(button[aria-busy="true"]) {
+    position: relative;
+    cursor: wait;
+    opacity: 1;
+    box-shadow: none;
+    transform: none;
+    color: transparent;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(button[aria-busy="true"])::after {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(button[aria-busy="true"]) {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      border-color: ButtonText;
+    }
+
+    :where(button[aria-busy="true"])::after {
+      background-color: ButtonText;
+    }
+  }
+
+  :where(button[aria-busy="true"] > *) {
+    opacity: 0;
+  }
+}

package/src/elements/button.extensions.css

@@ -0,0 +1,171 @@
+@layer trace.extensions {
+  :where(button > .trace-icon) {
+    --trace-icon-size: var(--trace-button-line-height);
+  }
+
+  :where(button[aria-busy="true"] > span.trace-icon) {
+    position: relative;
+  }
+
+  :where(button[aria-busy="true"] > span.trace-icon > *) {
+    opacity: 0;
+  }
+
+  :where(button[aria-busy="true"] > span.trace-icon)::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    inline-size: var(--trace-loader-size, 1em);
+    block-size: var(--trace-loader-size, 1em);
+    border-radius: var(--trace-loader-radius, 2px);
+    background-color: var(
+      --trace-button-loader-color,
+      var(--trace-button-text, var(--trace-button-contrast))
+    );
+    animation: trace-square-rotate var(--trace-loader-duration, 3s) ease-in-out
+      infinite;
+    pointer-events: none;
+  }
+
+  :where(button.trace-icon-only) {
+    padding-inline: var(--trace-button-padding-block);
+    aspect-ratio: 1;
+  }
+
+  :where(
+    button.trace-small,
+    input[type="button"].trace-small,
+    input[type="submit"].trace-small,
+    input[type="reset"].trace-small
+  ) {
+    --trace-button-font-size: 0.875rem;
+    --trace-button-line-height: 1.25rem;
+    --trace-button-padding-block: 0.25rem;
+    --trace-button-padding-inline: 0.5rem;
+  }
+
+  :where(
+    button.trace-large,
+    input[type="button"].trace-large,
+    input[type="submit"].trace-large,
+    input[type="reset"].trace-large
+  ) {
+    --trace-button-font-size: 1.125rem;
+    --trace-button-line-height: 1.75rem;
+    --trace-button-padding-block: 0.5rem;
+    --trace-button-padding-inline: 1rem;
+  }
+
+  :where(
+    button.trace-primary,
+    input[type="button"].trace-primary,
+    input[type="submit"].trace-primary,
+    input[type="reset"].trace-primary
+  ) {
+    --trace-button-color: light-dark(
+      var(--trace-primary-darker),
+      var(--trace-secondary)
+    );
+    --trace-button-contrast: light-dark(
+      var(--trace-secondary),
+      var(--trace-primary-dark)
+    );
+    --trace-button-outline-color: var(--trace-button-color);
+  }
+
+  :where(
+    button.trace-secondary,
+    input[type="button"].trace-secondary,
+    input[type="submit"].trace-secondary,
+    input[type="reset"].trace-secondary
+  ) {
+    --trace-button-color: var(--trace-primary-light);
+    --trace-button-contrast: var(--trace-secondary-lighter);
+    --trace-button-outline-color: var(--trace-button-color);
+  }
+
+  :where(
+    button.trace-danger,
+    input[type="button"].trace-danger,
+    input[type="submit"].trace-danger,
+    input[type="reset"].trace-danger
+  ) {
+    --trace-button-color: var(--trace-danger);
+    --trace-button-contrast: var(--trace-neutral-lighter);
+    --trace-button-outline-color: var(--trace-button-color);
+  }
+
+  :where(
+    button.trace-outline,
+    input[type="button"].trace-outline,
+    input[type="submit"].trace-outline,
+    input[type="reset"].trace-outline
+  ) {
+    --trace-button-bg: transparent;
+    --trace-button-text: var(--trace-button-outline-color);
+    --trace-button-border: var(--trace-button-outline-color);
+  }
+
+  :where(
+    button.trace-outline:hover:not(:disabled):not([aria-busy="true"]),
+    input[type="button"].trace-outline:hover:not(:disabled),
+    input[type="submit"].trace-outline:hover:not(:disabled),
+    input[type="reset"].trace-outline:hover:not(:disabled),
+    button.trace-outline:active:not(:disabled):not([aria-busy="true"]),
+    input[type="button"].trace-outline:active:not(:disabled),
+    input[type="submit"].trace-outline:active:not(:disabled),
+    input[type="reset"].trace-outline:active:not(:disabled),
+    button.trace-outline[aria-busy="true"]
+  ) {
+    background-color: var(--trace-button-color);
+    color: var(--trace-button-contrast);
+    border-color: var(--trace-button-color);
+  }
+
+  :where(button.trace-outline[aria-busy="true"]) {
+    --trace-button-text: var(--trace-button-contrast);
+    --trace-button-loader-color: var(--trace-button-contrast);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(button[aria-busy="true"] > span.trace-icon)::after {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(button[aria-busy="true"] > span.trace-icon)::after {
+      background-color: ButtonText;
+    }
+  }
+  :where(button[aria-busy="true"]:has(> span.trace-icon)) {
+    color: var(--trace-button-text, var(--trace-button-contrast));
+  }
+  :where(button[aria-busy="true"]:has(> span.trace-icon))::after {
+    content: none;
+  }
+  :where(button[aria-busy="true"]:has(> span.trace-icon) > *) {
+    opacity: 1;
+  }
+  :where(button.trace-outline[aria-busy="true"]:not(:has(> span.trace-icon))) {
+    color: transparent;
+  }
+
+  @media (forced-colors: active) {
+    :where(button[aria-busy="true"]:has(> span.trace-icon):disabled) {
+      border-color: GrayText;
+    }
+
+    :where(button[aria-busy="true"]:has(> span.trace-icon)) {
+      forced-color-adjust: auto;
+    }
+
+    :where(
+      button.trace-outline[aria-busy="true"]:not(:has(> span.trace-icon))
+    ) {
+      background-color: ButtonFace;
+      border-color: ButtonText;
+    }
+  }
+}

package/src/elements/icon.extensions.css

@@ -0,0 +1,22 @@
+@layer trace.extensions {
+  :where(.trace-icon) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--trace-icon-size, 1em);
+    block-size: var(--trace-icon-size, 1em);
+    flex-shrink: 0;
+    vertical-align: middle;
+    line-height: 1;
+  }
+
+  :where(.trace-icon > svg, .trace-icon > img) {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: contain;
+  }
+  :where(.trace-icon-directional:dir(rtl)) {
+    transform: scaleX(-1);
+  }
+}

package/src/elements/loader.css

@@ -0,0 +1,73 @@
+@layer trace.elements {
+  @keyframes trace-square-rotate {
+    0% {
+      transform: rotateX(0deg) rotateY(0deg);
+    }
+    25% {
+      transform: rotateX(180deg) rotateY(0deg);
+    }
+    50% {
+      transform: rotateX(180deg) rotateY(180deg);
+    }
+    75% {
+      transform: rotateX(0deg) rotateY(180deg);
+    }
+    100% {
+      transform: rotateX(0deg) rotateY(0deg);
+    }
+  }
+
+  :where(
+    div,
+    section,
+    article,
+    main,
+    aside,
+    nav,
+    header,
+    footer,
+    form,
+    fieldset,
+    figure
+  ):where([aria-busy="true"]) {
+    position: relative;
+    isolation: isolate;
+    cursor: wait;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      border-radius: inherit;
+      background: var(
+        --trace-loader-overlay,
+        color-mix(in srgb, var(--trace-bg), transparent 30%)
+      );
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      margin: auto;
+      inline-size: var(--trace-loader-size, 2rem);
+      block-size: var(--trace-loader-size, 2rem);
+      border-radius: var(--trace-loader-radius, 2px);
+      background-color: var(
+        --trace-loader-color,
+        light-dark(var(--trace-primary), var(--trace-secondary))
+      );
+      animation: trace-square-rotate var(--trace-loader-duration, 3s)
+        ease-in-out infinite;
+      pointer-events: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &::after {
+        animation: none;
+      }
+    }
+  }
+}

package/src/elements/loader.extensions.css

@@ -0,0 +1,27 @@
+@layer trace.extensions {
+  :where(.trace-loader) {
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--trace-loader-size, 1em);
+    block-size: var(--trace-loader-size, 1em);
+    flex-shrink: 0;
+    vertical-align: middle;
+  }
+
+  :where(.trace-loader)::before {
+    content: "";
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: var(--trace-loader-radius, 2px);
+    background-color: var(--trace-loader-color, var(--trace-primary));
+    animation: trace-square-rotate var(--trace-loader-duration, 3s) ease-in-out
+      infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.trace-loader)::before {
+      animation: none;
+      transform: none;
+    }
+  }
+}

package/src/forms/checkbox.css

@@ -0,0 +1,146 @@
+@layer trace.elements {
+  :where(:root) {
+    --trace-checkbox-size: 1.25rem;
+    --trace-checkbox-radius: var(--trace-radius-control);
+    --trace-checkbox-color: light-dark(
+      var(--trace-primary),
+      var(--trace-secondary)
+    );
+    --trace-checkbox-mark: light-dark(
+      var(--trace-neutral-lighter),
+      var(--trace-primary-dark)
+    );
+  }
+
+  :where(input[type="checkbox"]:not([role="switch"])) {
+    appearance: none;
+    -webkit-appearance: none;
+    position: relative;
+    isolation: isolate;
+    display: inline-block;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    inline-size: var(--trace-checkbox-size);
+    block-size: var(--trace-checkbox-size);
+    margin: 2px;
+    padding: 0;
+    border: 2px solid var(--trace-checkbox-color);
+    border-radius: var(--trace-checkbox-radius);
+    background-color: var(--trace-checkbox-bg, var(--trace-control-bg));
+    vertical-align: middle;
+    cursor: pointer;
+    transition:
+      transform 200ms ease-in-out,
+      border-color 200ms ease-in-out;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 10%;
+      z-index: 1;
+      background: var(--trace-checkbox-mark);
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4 10-10' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+        center / contain no-repeat;
+      opacity: 0;
+      transform: scale(0.6);
+      transition:
+        opacity 180ms ease-in-out,
+        transform 180ms ease-in-out;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      border-radius: max(0px, calc(var(--trace-checkbox-radius) - 2px));
+      background-color: var(--trace-checkbox-color);
+      opacity: 0;
+      transform: scale(0.6);
+      transition:
+        opacity 180ms ease-in-out,
+        transform 180ms ease-in-out;
+    }
+
+    &:checked::after,
+    &:indeterminate::after {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    &:checked::before {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    &:indeterminate::before {
+      opacity: 1;
+      transform: scale(1);
+      inset: 0;
+      margin: auto;
+      inline-size: 60%;
+      block-size: 2px;
+      border-radius: 1px;
+      mask: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--trace-checkbox-color);
+      outline-offset: 2px;
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(0.9);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &[aria-invalid="true"] {
+      --trace-checkbox-color: var(--trace-danger);
+      --trace-checkbox-mark: var(--trace-neutral-lighter);
+    }
+
+    &:user-invalid {
+      --trace-checkbox-color: var(--trace-danger);
+      --trace-checkbox-mark: var(--trace-neutral-lighter);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+      transform: none;
+
+      &::before,
+      &::after {
+        transition: none;
+        transform: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      appearance: auto;
+      -webkit-appearance: auto;
+      background: none;
+
+      &::before,
+      &::after {
+        content: none;
+      }
+    }
+  }
+
+  :where(label:has(> input[type="checkbox"]:not([role="switch"]))) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--trace-text);
+    cursor: pointer;
+
+    &:has(> input:disabled) {
+      color: color-mix(in srgb, var(--trace-text), transparent 50%);
+      cursor: not-allowed;
+    }
+  }
+}

package/src/forms/checkbox.extensions.css

@@ -0,0 +1,9 @@
+@layer trace.extensions {
+  :where(input[type="checkbox"]:not([role="switch"]).trace-small) {
+    --trace-checkbox-size: 1rem;
+  }
+
+  :where(input[type="checkbox"]:not([role="switch"]).trace-large) {
+    --trace-checkbox-size: 1.5rem;
+  }
+}

package/src/forms/file.css

@@ -0,0 +1,39 @@
+@layer trace.elements {
+  :where(:root) {
+    --trace-file-button-bg: var(--trace-primary-light);
+    --trace-file-button-text: var(--trace-secondary-lighter);
+  }
+
+  :where(input[type="file"]) {
+    padding-block: 0;
+    padding-inline-start: 0;
+    cursor: pointer;
+  }
+
+  :where(input[type="file"])::file-selector-button {
+    margin: 0;
+    margin-inline-end: var(--trace-input-padding-inline);
+    padding: var(--trace-input-padding-block) var(--trace-input-padding-inline);
+    border: 0;
+    border-radius: 0;
+    background: var(--trace-file-button-bg);
+    color: var(--trace-file-button-text);
+    font: inherit;
+    line-height: inherit;
+    cursor: pointer;
+  }
+
+  :where(input[type="file"]:hover:not(:disabled):not([readonly]):not(:focus)) {
+    box-shadow: none;
+  }
+
+  :where(input[type="file"]:disabled)::file-selector-button {
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    :where(input[type="file"])::file-selector-button {
+      border-inline-end: 1px solid ButtonText;
+    }
+  }
+}