trace-css 0.0.0-stage → 0.1.0

package/src/forms/select.css

@@ -0,0 +1,160 @@
+@layer trace.elements {
+  :where(:root) {
+    --trace-select-font-size: 1rem;
+    --trace-select-line-height: 1.5rem;
+    --trace-select-padding-block: 0.375rem;
+    --trace-select-padding-inline: 0.625rem;
+    --trace-select-radius: var(--trace-radius-control);
+    --trace-select-text: var(--trace-text);
+    --trace-select-border: light-dark(
+      var(--trace-primary),
+      var(--trace-secondary)
+    );
+    --trace-select-focus: light-dark(
+      var(--trace-primary-light),
+      var(--trace-secondary-light)
+    );
+    --trace-select-error: var(--trace-danger);
+    --trace-select-shadow: var(--trace-shadow);
+    --trace-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646b79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    --trace-select-arrow-offset: var(--trace-select-padding-inline);
+    --trace-select-arrow-size: 1.25em;
+  }
+
+  :where(select) {
+    --_trace-select-border: var(--trace-select-border);
+    display: block;
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--trace-select-padding-block)
+      var(--trace-select-padding-inline);
+    border: 2px solid var(--_trace-select-border);
+    border-radius: var(--trace-select-radius);
+    background: var(--trace-select-bg, var(--trace-control-bg));
+    color: var(--trace-select-text);
+    font-family: var(--trace-font-body);
+    font-size: var(--trace-select-font-size);
+    line-height: var(--trace-select-line-height);
+    text-align: start;
+    appearance: auto;
+    cursor: pointer;
+    transition:
+      border-color 200ms ease-in-out,
+      box-shadow 200ms ease-in-out;
+
+    &:hover:not(:disabled):not(:focus) {
+      box-shadow: var(--trace-select-shadow);
+    }
+
+    &:focus {
+      --_trace-select-border: var(--trace-select-focus);
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+      box-shadow: 0 0 0 4px
+        color-mix(in srgb, var(--trace-select-focus), transparent 70%);
+    }
+
+    &[aria-invalid="true"] {
+      --_trace-select-border: var(--trace-select-error);
+    }
+
+    &:user-invalid {
+      --_trace-select-border: var(--trace-select-error);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+  :where(
+    select:not([multiple]):not([size]),
+    select:not([multiple])[size="0"],
+    select:not([multiple])[size="1"]
+  ) {
+    appearance: none;
+    padding-inline-end: calc(
+      var(--trace-select-arrow-offset) + var(--trace-select-arrow-size) +
+        var(--trace-select-padding-inline)
+    );
+    background-image: var(--trace-select-arrow);
+    background-repeat: no-repeat;
+    background-size: var(--trace-select-arrow-size)
+      var(--trace-select-arrow-size);
+    background-position: right var(--trace-select-arrow-offset) center;
+
+    &:dir(rtl) {
+      background-position: left var(--trace-select-arrow-offset) center;
+    }
+
+    @media (forced-colors: active) {
+      appearance: auto;
+      background-image: none;
+    }
+  }
+  :where(select option, select optgroup) {
+    background-color: var(--trace-select-bg, var(--trace-control-bg));
+    color: var(--trace-select-text);
+  }
+
+  :where(select[multiple], select[size]:not([size="1"])) {
+    cursor: default;
+  }
+
+  :where(label:has(> select)) {
+    display: grid;
+    gap: 0.25rem;
+    min-inline-size: 0;
+
+    color: var(--trace-select-text);
+    cursor: pointer;
+
+    & > small {
+      margin: 0;
+      line-height: 1.5;
+    }
+
+    &:has(> select:disabled) {
+      color: color-mix(in srgb, var(--trace-select-text), transparent 50%);
+      cursor: not-allowed;
+    }
+
+    &:has(> select[aria-invalid="true"]) > small:last-child {
+      color: var(--trace-select-error);
+    }
+
+    &:has(> select:user-invalid) > small:last-child {
+      color: var(--trace-select-error);
+    }
+  }
+
+  :where(label:has(> select) + small) {
+    display: block;
+    margin-block-start: 0.25rem;
+    line-height: 1.5;
+  }
+
+  :where(label:has(> select[aria-invalid="true"]) + small) {
+    color: var(--trace-select-error);
+  }
+
+  :where(label:has(> select:user-invalid) + small) {
+    color: var(--trace-select-error);
+  }
+
+  :where(label[for]:has(+ select:disabled)) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :where(select[aria-invalid="true"] + small, select:user-invalid + small) {
+    color: var(--trace-select-error);
+  }
+}

package/src/forms/select.extensions.css

@@ -0,0 +1,107 @@
+@layer trace.extensions {
+  :where(label:has(> .trace-select > select)) {
+    display: grid;
+    gap: 0.25rem;
+    min-inline-size: 0;
+    color: var(--trace-select-text);
+    cursor: pointer;
+    & > small {
+      margin: 0;
+      line-height: 1.5;
+    }
+    &:has(> .trace-select > select:disabled) {
+      color: color-mix(in srgb, var(--trace-select-text), transparent 50%);
+      cursor: not-allowed;
+    }
+    &:has(
+        > .trace-select > select[aria-invalid="true"],
+        > .trace-select > select:user-invalid
+      )
+      > small:last-child {
+      color: var(--trace-select-error);
+    }
+  }
+  :where(label:has(> .trace-select > select) + small) {
+    display: block;
+    margin-block-start: 0.25rem;
+    line-height: 1.5;
+  }
+  :where(
+    label:has(
+        > .trace-select > select[aria-invalid="true"],
+        > .trace-select > select:user-invalid
+      )
+      + small
+  ) {
+    color: var(--trace-select-error);
+  }
+  :where(.trace-select) {
+    --_trace-select-arrow-color: var(--trace-select-border);
+    position: relative;
+    display: grid;
+    min-inline-size: 0;
+    font-size: var(--trace-select-font-size);
+
+    &:has(> select.trace-small) {
+      --trace-select-padding-inline: 0.5rem;
+      font-size: 0.875rem;
+    }
+
+    &:has(> select.trace-large) {
+      --trace-select-padding-inline: 0.75rem;
+      font-size: 1.125rem;
+    }
+
+    &:has(> select:focus) {
+      --_trace-select-arrow-color: var(--trace-select-focus);
+    }
+
+    &:has(> select[aria-invalid="true"], > select:user-invalid) {
+      --_trace-select-arrow-color: var(--trace-select-error);
+    }
+  }
+
+  :where(
+    .trace-select:has(> select:not([multiple]):not([size])),
+    .trace-select:has(> select:not([multiple])[size="0"]),
+    .trace-select:has(> select:not([multiple])[size="1"])
+  )::after {
+    content: "";
+    position: absolute;
+    inset-inline-end: var(--trace-select-arrow-offset);
+    inset-block: 0;
+    margin-block: auto;
+    inline-size: var(--trace-select-arrow-size);
+    block-size: var(--trace-select-arrow-size);
+    background-color: var(--_trace-select-arrow-color);
+    mask: var(--trace-select-arrow) center / contain no-repeat;
+    pointer-events: none;
+  }
+
+  :where(.trace-select > select) {
+    background-image: none;
+  }
+
+  :where(.trace-select:has(> select:disabled))::after {
+    opacity: 0.5;
+  }
+
+  @media (forced-colors: active) {
+    :where(.trace-select)::after {
+      display: none;
+    }
+  }
+  :where(select.trace-small) {
+    --trace-select-font-size: 0.875rem;
+    --trace-select-line-height: 1.25rem;
+    --trace-select-padding-block: 0.25rem;
+    --trace-select-padding-inline: 0.5rem;
+  }
+
+  :where(select.trace-large) {
+    --trace-select-font-size: 1.125rem;
+    --trace-select-line-height: 1.75rem;
+    --trace-select-padding-block: 0.5rem;
+    --trace-select-padding-inline: 0.75rem;
+  }
+}

package/src/forms/switch.css

@@ -0,0 +1,156 @@
+@layer trace.elements {
+  :where(:root) {
+    --trace-switch-width: 2.125rem;
+    --trace-switch-height: 1.25rem;
+    --trace-switch-dot-size: 0.75rem;
+    --trace-switch-dot-active-size: 0.875rem;
+    --trace-switch-padding: 0.125rem;
+    --trace-switch-color: light-dark(
+      var(--trace-primary),
+      var(--trace-secondary)
+    );
+    --trace-switch-radius: var(--trace-radius-sm);
+  }
+
+  :where(input[type="checkbox"][role="switch"]) {
+    appearance: none;
+    -webkit-appearance: none;
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    inline-size: var(--trace-switch-width);
+    block-size: var(--trace-switch-height);
+    margin: 2px;
+    padding: var(--trace-switch-padding);
+    border: 2px solid var(--trace-switch-color);
+    border-radius: var(--trace-switch-radius);
+    background-color: var(--trace-switch-bg, var(--trace-control-bg));
+    background-image: radial-gradient(
+      ellipse at center,
+      var(--trace-switch-color) 50%,
+      transparent 50%
+    );
+    background-repeat: no-repeat;
+    background-size: 200% 300%;
+    background-position: right -100% top 50%;
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: pointer;
+    transition:
+      transform 250ms ease-in-out,
+      background-position 250ms ease-in-out;
+  }
+
+  :where(input[type="checkbox"][role="switch"])::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: var(--trace-switch-padding);
+    inset-block-start: var(--trace-switch-padding);
+    inline-size: var(--trace-switch-dot-size);
+    block-size: var(--trace-switch-dot-size);
+    border-radius: 2px;
+    background-color: var(--trace-switch-color);
+    transition:
+      inset-inline-start 200ms ease-in-out,
+      inline-size 200ms ease-in-out,
+      background-color 200ms ease-in-out;
+  }
+
+  :where(input[type="checkbox"][role="switch"]:checked) {
+    background-position: right 40% top 50%;
+  }
+
+  :where(input[type="checkbox"][role="switch"]:checked)::before {
+    inset-inline-start: calc(
+      100% - var(--trace-switch-dot-size) - var(--trace-switch-padding)
+    );
+    background-color: var(
+      --trace-switch-dot-checked,
+      var(--trace-switch-bg, var(--trace-control-bg))
+    );
+  }
+
+  :where(input[type="checkbox"][role="switch"]:dir(rtl)) {
+    background-position: left -100% top 50%;
+  }
+
+  :where(input[type="checkbox"][role="switch"]:dir(rtl):checked) {
+    background-position: left 40% top 50%;
+  }
+
+  :where(input[type="checkbox"][role="switch"]:focus-visible) {
+    outline: 2px solid var(--trace-switch-color);
+    outline-offset: 2px;
+  }
+
+  :where(label:has(> input[type="checkbox"][role="switch"])) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+  }
+
+  :where(
+    input[type="checkbox"][role="switch"]:active:not(:disabled),
+    label:active > input[type="checkbox"][role="switch"]:not(:disabled)
+  ) {
+    transform: scale(0.9);
+  }
+
+  :where(
+    input[type="checkbox"][role="switch"]:active:not(:disabled),
+    label:active > input[type="checkbox"][role="switch"]:not(:disabled)
+  )::before {
+    inline-size: var(--trace-switch-dot-active-size);
+  }
+
+  :where(
+    input[type="checkbox"][role="switch"]:active:checked:not(:disabled),
+    label:active > input[type="checkbox"][role="switch"]:checked:not(:disabled)
+  )::before {
+    inset-inline-start: calc(
+      100% - var(--trace-switch-dot-active-size) - var(--trace-switch-padding)
+    );
+  }
+
+  :where(input[type="checkbox"][role="switch"]:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :where(label:has(> input[type="checkbox"][role="switch"]:disabled)) {
+    cursor: not-allowed;
+  }
+
+  :where(label > input[type="checkbox"][role="switch"]:disabled ~ span) {
+    opacity: 0.5;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(input[type="checkbox"][role="switch"]) {
+      transition: none;
+      transform: none;
+    }
+
+    :where(input[type="checkbox"][role="switch"])::before {
+      transition: none;
+      transform: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(input[type="checkbox"][role="switch"]) {
+      appearance: auto;
+      -webkit-appearance: auto;
+      background: none;
+    }
+
+    :where(input[type="checkbox"][role="switch"])::before {
+      content: none;
+    }
+  }
+  :where(input[type="checkbox"][role="switch"][aria-invalid="true"]) {
+    --trace-switch-color: var(--trace-danger);
+  }
+}

package/src/forms/switch.extensions.css

@@ -0,0 +1,122 @@
+@layer trace.extensions {
+  :where(label:has(> .trace-switch > input[type="checkbox"][role="switch"])) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+  }
+
+  :where(
+    label:has(> .trace-switch > input[type="checkbox"][role="switch"]:disabled)
+  ) {
+    cursor: not-allowed;
+  }
+
+  :where(.trace-switch) {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    vertical-align: middle;
+    transition: transform 250ms ease-in-out;
+  }
+
+  :where(.trace-switch > .trace-icon) {
+    --trace-icon-size: var(--trace-switch-icon-size, 0.75rem);
+    position: absolute;
+    inset-inline-end: calc(4px + var(--trace-switch-padding));
+    inset-block: 0;
+    margin-block: auto;
+    color: var(--trace-switch-color);
+    pointer-events: none;
+    transition: color 200ms ease-in-out;
+  }
+
+  :where(.trace-switch:has(> input:checked) > .trace-icon) {
+    inset-inline-start: calc(4px + var(--trace-switch-padding));
+    inset-inline-end: auto;
+    color: var(
+      --trace-switch-dot-checked,
+      var(--trace-switch-bg, var(--trace-control-bg))
+    );
+  }
+
+  :where(
+    .trace-switch:has(> input:disabled) > .trace-icon,
+    label > .trace-switch:has(> input:disabled) ~ span
+  ) {
+    opacity: 0.5;
+  }
+
+  :where(.trace-switch:has(> input:disabled)) {
+    cursor: not-allowed;
+  }
+
+  :where(.trace-switch > input[type="checkbox"][role="switch"]) {
+    transform: none;
+  }
+
+  :where(
+    .trace-switch:has(> input:active:not(:disabled)),
+    label:active > .trace-switch:has(> input:not(:disabled))
+  ) {
+    transform: scale(0.9);
+  }
+
+  :where(
+    label:active > .trace-switch > input[role="switch"]:not(:disabled)
+  )::before {
+    inline-size: var(--trace-switch-dot-active-size);
+  }
+
+  :where(
+    label:active > .trace-switch > input[role="switch"]:checked:not(:disabled)
+  )::before {
+    inset-inline-start: calc(
+      100% - var(--trace-switch-dot-active-size) - var(--trace-switch-padding)
+    );
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.trace-switch) {
+      transition: none;
+      transform: none;
+    }
+
+    :where(.trace-switch > .trace-icon) {
+      transition: none;
+      transform: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.trace-switch > .trace-icon) {
+      display: none;
+    }
+  }
+
+  :where(.trace-switch:has(> input[aria-invalid="true"])) {
+    --trace-switch-color: var(--trace-danger);
+  }
+
+  :where(.trace-switch:has(> input.trace-small) > .trace-icon) {
+    display: none;
+  }
+
+  :where(.trace-switch:has(> input.trace-large)) {
+    --trace-switch-icon-size: 1rem;
+  }
+
+  :where(input[type="checkbox"][role="switch"].trace-small) {
+    --trace-switch-width: 1.75rem;
+    --trace-switch-height: 1rem;
+    --trace-switch-dot-size: 0.5rem;
+    --trace-switch-dot-active-size: 0.625rem;
+  }
+
+  :where(input[type="checkbox"][role="switch"].trace-large) {
+    --trace-switch-width: 2.625rem;
+    --trace-switch-height: 1.5rem;
+    --trace-switch-dot-size: 1rem;
+    --trace-switch-dot-active-size: 1.125rem;
+  }
+}

package/src/forms/textarea.css

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

package/src/forms/textarea.extensions.css

@@ -0,0 +1,15 @@
+@layer trace.extensions {
+  :where(textarea.trace-small) {
+    --trace-textarea-font-size: 0.875rem;
+    --trace-textarea-line-height: 1.25rem;
+    --trace-textarea-padding-block: 0.25rem;
+    --trace-textarea-padding-inline: 0.5rem;
+  }
+
+  :where(textarea.trace-large) {
+    --trace-textarea-font-size: 1.125rem;
+    --trace-textarea-line-height: 1.75rem;
+    --trace-textarea-padding-block: 0.5rem;
+    --trace-textarea-padding-inline: 0.75rem;
+  }
+}