trace-css 0.0.0-stage → 0.1.0

package/src/forms/input.css

@@ -0,0 +1,199 @@
+@layer trace.elements {
+  :where(:root) {
+    --trace-input-font-size: 1rem;
+    --trace-input-line-height: 1.5rem;
+    --trace-input-padding-block: 0.375rem;
+    --trace-input-padding-inline: 0.625rem;
+    --trace-input-radius: var(--trace-radius-control);
+    --trace-input-text: var(--trace-text);
+    --trace-input-border: light-dark(
+      var(--trace-primary),
+      var(--trace-secondary)
+    );
+    --trace-input-focus: light-dark(
+      var(--trace-primary-light),
+      var(--trace-secondary-light)
+    );
+    --trace-input-placeholder: light-dark(
+      var(--trace-neutral),
+      var(--trace-neutral-light)
+    );
+    --trace-input-error: var(--trace-danger);
+    --trace-input-shadow: var(--trace-shadow);
+  }
+  :where(
+    input:not([type]),
+    input:is(
+      [type="text"],
+      [type="search"],
+      [type="email"],
+      [type="url"],
+      [type="tel"],
+      [type="password"],
+      [type="number"],
+      [type="date"],
+      [type="datetime-local"],
+      [type="month"],
+      [type="week"],
+      [type="time"],
+      [type="color"],
+      [type="file"]
+    )
+  ) {
+    --_trace-input-border: var(--trace-input-border);
+    display: block;
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--trace-input-padding-block) var(--trace-input-padding-inline);
+    border: 2px solid var(--_trace-input-border);
+    border-radius: var(--trace-input-radius);
+    background-color: var(--trace-input-bg, var(--trace-control-bg));
+    color: var(--trace-input-text);
+    caret-color: var(--trace-input-focus);
+    font-family: var(--trace-font-body);
+    font-size: var(--trace-input-font-size);
+    line-height: var(--trace-input-line-height);
+    text-align: start;
+    cursor: text;
+    transition:
+      border-color 200ms ease-in-out,
+      box-shadow 200ms ease-in-out;
+
+    &::placeholder {
+      color: var(--trace-input-placeholder);
+      opacity: 1;
+    }
+
+    &:hover:not(:disabled):not([readonly]):not(:focus) {
+      box-shadow: var(--trace-input-shadow);
+    }
+
+    &:focus {
+      --_trace-input-border: var(--trace-input-focus);
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+      box-shadow: 0 0 0 4px
+        color-mix(in srgb, var(--trace-input-focus), transparent 70%);
+    }
+
+    &[readonly] {
+      cursor: default;
+    }
+
+    &[aria-invalid="true"] {
+      --_trace-input-border: var(--trace-input-error);
+    }
+
+    &:user-invalid {
+      --_trace-input-border: var(--trace-input-error);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  :where(input[type="color"]) {
+    block-size: calc(
+      var(--trace-input-line-height) + var(--trace-input-padding-block) * 2 +
+        4px
+    );
+    padding: 0.25rem;
+    cursor: pointer;
+  }
+
+  :where(input[type="color"])::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  :where(input[type="color"])::-webkit-color-swatch {
+    border: 0;
+    border-radius: 1px;
+  }
+
+  :where(input[type="color"])::-moz-color-swatch {
+    border: 0;
+    border-radius: 1px;
+  }
+
+  :where(
+    label:has(
+      > input:not([type]),
+      > input:is(
+          [type="text"],
+          [type="search"],
+          [type="email"],
+          [type="url"],
+          [type="tel"],
+          [type="password"],
+          [type="number"],
+          [type="date"],
+          [type="datetime-local"],
+          [type="month"],
+          [type="week"],
+          [type="time"],
+          [type="color"],
+          [type="file"]
+        )
+    )
+  ) {
+    display: grid;
+    gap: 0.25rem;
+    min-inline-size: 0;
+
+    cursor: pointer;
+    color: var(--trace-input-text);
+
+    &:has(> input[aria-invalid="true"]) > small:last-child {
+      color: var(--trace-input-error);
+    }
+
+    &:has(> input:user-invalid) > small:last-child {
+      color: var(--trace-input-error);
+    }
+
+    &:has(> input:disabled) {
+      color: color-mix(in srgb, var(--trace-input-text), transparent 50%);
+      cursor: not-allowed;
+    }
+
+    & > small {
+      margin: 0;
+      line-height: 1.5;
+    }
+  }
+
+  :where(label:has(input) + small) {
+    display: block;
+    margin-block-start: 0.25rem;
+    line-height: 1.5;
+  }
+
+  :where(label:has(input[aria-invalid="true"], input:user-invalid) + small) {
+    color: var(--trace-input-error);
+  }
+
+  :where(label[for]:not(:has(input))) {
+    display: inline-block;
+    margin-block-end: 0.25rem;
+    cursor: pointer;
+    color: var(--trace-input-text);
+  }
+
+  :where(input[aria-invalid="true"] + small, input:user-invalid + small) {
+    color: var(--trace-input-error);
+  }
+
+  :where(label[for]:has(+ input:disabled)) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/src/forms/input.extensions.css

@@ -0,0 +1,171 @@
+@layer trace.extensions {
+  :where(label:has(> .trace-input-wrap > input)) {
+    display: grid;
+    gap: 0.25rem;
+    min-inline-size: 0;
+    color: var(--trace-input-text);
+    cursor: pointer;
+    & > small {
+      margin: 0;
+      line-height: 1.5;
+    }
+    &:has(> .trace-input-wrap > input:disabled) {
+      color: color-mix(in srgb, var(--trace-input-text), transparent 50%);
+      cursor: not-allowed;
+    }
+    &:has(
+        > .trace-input-wrap > input[aria-invalid="true"],
+        > .trace-input-wrap > input:user-invalid
+      )
+      > small:last-child {
+      color: var(--trace-input-error);
+    }
+  }
+
+  :where(.trace-input-wrap) {
+    --trace-input-icon-size: 1.25rem;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    position: relative;
+    min-inline-size: 0;
+  }
+
+  :where(.trace-input-wrap > input) {
+    grid-area: 1 / 1 / 2 / 4;
+  }
+  :where(
+    .trace-input-wrap > .trace-input-icon-start,
+    .trace-input-wrap > .trace-input-icon-end
+  ) {
+    --trace-icon-size: var(--trace-input-icon-size);
+    position: relative;
+    grid-row: 1;
+    align-self: center;
+    margin-inline: calc(2px + var(--trace-input-padding-inline));
+    color: var(--trace-input-border);
+    pointer-events: none;
+  }
+
+  :where(.trace-input-wrap > .trace-input-icon-start) {
+    grid-column: 1;
+  }
+
+  :where(.trace-input-wrap > .trace-input-icon-end) {
+    grid-column: 3;
+  }
+
+  :where(.trace-input-wrap:has(> .trace-input-icon-start) > input) {
+    padding-inline-start: calc(
+      var(--trace-input-padding-inline) + var(--trace-input-icon-size) + 0.5rem
+    );
+  }
+
+  :where(.trace-input-wrap:has(> .trace-input-icon-end) > input) {
+    padding-inline-end: calc(
+      var(--trace-input-padding-inline) + var(--trace-input-icon-size) + 0.5rem
+    );
+  }
+
+  :where(.trace-input-wrap:has(> input:focus) > .trace-icon) {
+    color: var(--trace-input-focus);
+  }
+
+  :where(
+    .trace-input-wrap:has(> input[aria-invalid="true"], > input:user-invalid)
+      > .trace-icon
+  ) {
+    color: var(--trace-input-error);
+  }
+
+  :where(.trace-input-wrap:has(> input:disabled) > .trace-icon) {
+    opacity: 0.5;
+  }
+
+  :where(.trace-input-wrap:has(> button) > input) {
+    padding-inline-end: calc(var(--trace-input-padding-inline) + 2rem);
+  }
+
+  :where(.trace-input-wrap > button) {
+    position: absolute;
+    inset-inline-end: 0.5rem;
+    inset-block: 0;
+    margin-block: auto;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--trace-radius-sm);
+    background: transparent;
+    color: var(--trace-input-border);
+    box-shadow: none;
+    --trace-button-outline-color: var(--trace-input-focus);
+  }
+
+  :where(.trace-input-wrap > button:hover:not(:disabled)) {
+    color: var(--trace-input-focus);
+    box-shadow: none;
+  }
+
+  :where(.trace-input-wrap > button:active:not(:disabled)) {
+    transform: scale(0.9);
+    box-shadow: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.trace-input-wrap > button) {
+      transition: none;
+      transform: none;
+    }
+  }
+
+  :where(.trace-input-wrap > button > .trace-icon) {
+    --trace-icon-size: 1.25rem;
+  }
+  :where(.trace-input-wrap:has(> input.trace-small)) {
+    --trace-input-padding-inline: 0.5rem;
+    --trace-input-icon-size: 1rem;
+  }
+
+  :where(.trace-input-wrap:has(> input.trace-large)) {
+    --trace-input-padding-inline: 0.75rem;
+    --trace-input-icon-size: 1.5rem;
+  }
+
+  :where(input.trace-small:not([type="checkbox"]):not([type="radio"])) {
+    --trace-input-font-size: 0.875rem;
+    --trace-input-line-height: 1.25rem;
+    --trace-input-padding-block: 0.25rem;
+    --trace-input-padding-inline: 0.5rem;
+  }
+
+  :where(input.trace-large:not([type="checkbox"]):not([type="radio"])) {
+    --trace-input-font-size: 1.125rem;
+    --trace-input-line-height: 1.75rem;
+    --trace-input-padding-block: 0.5rem;
+    --trace-input-padding-inline: 0.75rem;
+  }
+
+  /* Keep loading states above the embedded button's layout and interactions. */
+  :where(.trace-input-wrap > button[aria-busy="true"]) {
+    position: absolute;
+    cursor: wait;
+    opacity: 1;
+    box-shadow: none;
+    transform: none;
+  }
+
+  :where(
+    .trace-input-wrap > button[aria-busy="true"]:not(:has(> span.trace-icon))
+  ) {
+    color: transparent;
+  }
+
+  @media (forced-colors: active) {
+    :where(
+      .trace-input-wrap > button[aria-busy="true"]:not(:has(> span.trace-icon))
+    ) {
+      background-color: ButtonFace;
+      border-color: ButtonText;
+    }
+  }
+}

package/src/forms/radio.css

@@ -0,0 +1,112 @@
+@layer trace.elements {
+  :where(:root) {
+    --trace-radio-size: 1.25rem;
+    --trace-radio-color: light-dark(
+      var(--trace-primary),
+      var(--trace-secondary)
+    );
+  }
+
+  :where(input[type="radio"]) {
+    appearance: none;
+    -webkit-appearance: none;
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    inline-size: var(--trace-radio-size);
+    block-size: var(--trace-radio-size);
+    margin: 2px;
+    padding: 0;
+    border: 2px solid var(--trace-radio-color);
+    border-radius: 50%;
+    background: var(--trace-radio-bg, var(--trace-control-bg));
+    vertical-align: middle;
+    cursor: pointer;
+    transition:
+      transform 250ms ease-in-out,
+      border-color 250ms ease-in-out;
+  }
+
+  :where(input[type="radio"])::before {
+    content: "";
+    position: absolute;
+    inset: -2px;
+    box-sizing: border-box;
+    border: 2px solid var(--trace-radio-color);
+    border-radius: 50%;
+    background-color: transparent;
+    transition:
+      border-color 250ms ease-in-out,
+      background-color 250ms ease-in-out,
+      transform 250ms ease-in-out;
+  }
+
+  :where(input[type="radio"]:checked)::before {
+    background-color: var(--trace-radio-color);
+    transform: scale(0.6);
+  }
+
+  :where(input[type="radio"]:focus-visible) {
+    outline: 2px solid var(--trace-radio-color);
+    outline-offset: 2px;
+  }
+
+  :where(label:has(> input[type="radio"])) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+  }
+
+  :where(
+    input[type="radio"]:active:not(:disabled),
+    label:active > input[type="radio"]:not(:disabled)
+  ) {
+    transform: scale(0.9);
+  }
+
+  :where(input[type="radio"]:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :where(label:has(> input[type="radio"]:disabled)) {
+    cursor: not-allowed;
+  }
+
+  :where(label > input[type="radio"]:disabled ~ span) {
+    opacity: 0.5;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(input[type="radio"]) {
+      transition: none;
+      transform: none;
+    }
+
+    :where(input[type="radio"])::before {
+      transition: none;
+      transform: none;
+    }
+
+    :where(input[type="radio"]:checked)::before {
+      transform: scale(0.6);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(input[type="radio"]) {
+      appearance: auto;
+      -webkit-appearance: auto;
+    }
+
+    :where(input[type="radio"])::before {
+      content: none;
+    }
+  }
+
+  :where(input[type="radio"][aria-invalid="true"]) {
+    --trace-radio-color: var(--trace-danger);
+  }
+}

package/src/forms/radio.extensions.css

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

package/src/forms/range.css

@@ -0,0 +1,170 @@
+@layer trace.elements {
+  :where(:root) {
+    --trace-range-color: light-dark(
+      var(--trace-primary),
+      var(--trace-secondary)
+    );
+    --trace-range-track-color: light-dark(
+      var(--trace-primary-light),
+      var(--trace-secondary-dark)
+    );
+    --trace-range-error: var(--trace-danger);
+    --trace-range-track-size: 0.375rem;
+    --trace-range-thumb-size: 1.25rem;
+    --trace-range-height: 2rem;
+    --trace-range-active-scale: 1.15;
+    --trace-range-duration: 150ms;
+  }
+
+  :where(input[type="range"]) {
+    appearance: none;
+    -webkit-appearance: none;
+    display: block;
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    block-size: var(--trace-range-height);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--trace-range-color);
+    accent-color: var(--trace-range-color);
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--trace-range-color);
+      outline-offset: 2px;
+      border-radius: var(--trace-radius-control);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &[aria-invalid="true"] {
+      --trace-range-color: var(--trace-range-error);
+      --trace-range-track-color: color-mix(
+        in srgb,
+        var(--trace-range-error),
+        transparent 70%
+      );
+    }
+  }
+
+  :where(input[type="range"])::-webkit-slider-runnable-track {
+    box-sizing: border-box;
+    block-size: var(--trace-range-track-size);
+    border: 0;
+    border-radius: 999px;
+    background: var(--trace-range-track-color);
+  }
+
+  :where(input[type="range"])::-moz-range-track {
+    box-sizing: border-box;
+    block-size: var(--trace-range-track-size);
+    border: 0;
+    border-radius: 999px;
+    background: var(--trace-range-track-color);
+  }
+
+  :where(input[type="range"])::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    inline-size: var(--trace-range-thumb-size);
+    block-size: var(--trace-range-thumb-size);
+    margin-block-start: calc(
+      (var(--trace-range-track-size) - var(--trace-range-thumb-size)) / 2
+    );
+    border: 2px solid var(--trace-range-color);
+    border-radius: 50%;
+    background: var(--trace-range-color);
+    transition:
+      transform var(--trace-range-duration) ease-out,
+      box-shadow 200ms ease-in-out;
+  }
+
+  :where(input[type="range"])::-moz-range-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    inline-size: var(--trace-range-thumb-size);
+    block-size: var(--trace-range-thumb-size);
+    border: 2px solid var(--trace-range-color);
+    border-radius: 50%;
+    background: var(--trace-range-color);
+    transition:
+      transform var(--trace-range-duration) ease-out,
+      box-shadow 200ms ease-in-out;
+  }
+
+  :where(input[type="range"]:focus:not(:disabled))::-webkit-slider-thumb {
+    box-shadow: 0 0 0 4px
+      color-mix(in srgb, var(--trace-range-color), transparent 70%);
+  }
+
+  :where(input[type="range"]:focus:not(:disabled))::-moz-range-thumb {
+    box-shadow: 0 0 0 4px
+      color-mix(in srgb, var(--trace-range-color), transparent 70%);
+  }
+
+  :where(input[type="range"]:active:not(:disabled))::-webkit-slider-thumb {
+    transform: scale(var(--trace-range-active-scale));
+  }
+
+  :where(input[type="range"]:active:not(:disabled))::-moz-range-thumb {
+    transform: scale(var(--trace-range-active-scale));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(input[type="range"])::-webkit-slider-thumb {
+      transition: none;
+      transform: none;
+    }
+
+    :where(input[type="range"]:active:not(:disabled))::-webkit-slider-thumb {
+      transition: none;
+      transform: none;
+    }
+    :where(input[type="range"])::-moz-range-thumb {
+      transition: none;
+      transform: none;
+    }
+
+    :where(input[type="range"]:active:not(:disabled))::-moz-range-thumb {
+      transition: none;
+      transform: none;
+    }
+  }
+
+  :where(label:has(> input[type="range"])) {
+    display: grid;
+    gap: 0.25rem;
+    min-inline-size: 0;
+    color: var(--trace-text);
+    cursor: pointer;
+
+    & > small {
+      margin: 0;
+      line-height: 1.5;
+    }
+
+    &:has(> input[aria-invalid="true"]) > small:last-child {
+      color: var(--trace-range-error);
+    }
+
+    &:has(> input:disabled) {
+      cursor: not-allowed;
+      color: color-mix(in srgb, var(--trace-text), transparent 50%);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(input[type="range"]) {
+      --trace-range-color: ButtonText;
+      --trace-range-track-color: GrayText;
+    }
+  }
+}

package/src/forms/range.extensions.css

@@ -0,0 +1,13 @@
+@layer trace.extensions {
+  :where(input[type="range"].trace-small) {
+    --trace-range-thumb-size: 1rem;
+    --trace-range-track-size: 0.25rem;
+    --trace-range-height: 1.75rem;
+  }
+
+  :where(input[type="range"].trace-large) {
+    --trace-range-thumb-size: 1.5rem;
+    --trace-range-track-size: 0.5rem;
+    --trace-range-height: 2.5rem;
+  }
+}