@0001-labs/design-system-1 0.0.0-stage → 0.3.0-alpha.13

package/DS1/1-root/one.semantic.css

@@ -0,0 +1,683 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap");
+
+/* DS1 — version 0.3.0-alpha.13 */
+/* A classless stylesheet for native HTML. No JavaScript is required. */
+
+/* Root
+   Global color, type, spacing, and component tokens.
+   The workbench edits these values without changing semantic markup. */
+
+:root {
+  color-scheme: light dark;
+
+  --one-color-white:   #ffffff;
+  --one-color-black:   #2a2a2a;
+  --one-color-slate:   #1e1e1e;
+  --one-color-slate-light:   #e6e6e6;
+  --one-color-slate-dark:   #3c3c3c;
+  --one-color-muted:   #797979;
+  --one-color-focus:   #594dff;
+  --one-color-warning:   #d92d20;
+  --one-accent-color:   #0066ff;
+  --one-button-primary-background:   var(--one-accent-color);
+  --one-button-primary-background-hover:   color-mix(in srgb, var(--one-accent-color) 88%, black);
+  --one-button-primary-border:   var(--one-accent-color);
+  --one-button-primary-text:   #f5f5f5;
+  --one-button-neutral-background:   #e3e3e3;
+  --one-button-neutral-background-hover:   #cdcdcd;
+  --one-button-neutral-border:   #767676;
+  --one-button-neutral-text:   #1e1e1e;
+  --one-button-subtle-border-hover:   #d9d9d9;
+  --one-button-subtle-text:   #303030;
+  --one-button-subtle-text-hover:   #1e1e1e;
+  --one-button-danger-background:   #ec221f;
+  --one-button-danger-background-hover:   #c00f0c;
+  --one-button-danger-border:   #c00f0c;
+  --one-button-danger-border-hover:   #900b09;
+  --one-button-danger-text:   #fee9e7;
+  --one-button-danger-subtle-background-hover:   #fdd3d0;
+  --one-button-danger-subtle-text:   #900b09;
+  --one-button-disabled-background:   #d9d9d9;
+  --one-button-disabled-border:   #b3b3b3;
+  --one-button-disabled-text:   #b3b3b3;
+  --one-icon-button-size: 40px;
+  --one-icon-button-small-size: 32px;
+  --one-icon-button-icon-size: 20px;
+  --one-icon-button-neutral-background:   #f5f5f5;
+  --one-icon-button-neutral-background-hover:   #e6e6e6;
+  --one-icon-button-neutral-border:   #d9d9d9;
+  --one-icon-button-subtle-background-hover:   #f5f5f5;
+  --one-input-background:   #ffffff;
+  --one-input-border:   #d9d9d9;
+  --one-input-text:   #1e1e1e;
+  --one-input-placeholder:   #b3b3b3;
+  --one-input-disabled-background:   #d9d9d9;
+  --one-input-disabled-border:   #b3b3b3;
+  --one-input-disabled-text:   #b3b3b3;
+  --one-input-error-border:   #900b09;
+  --one-input-description:   #757575;
+
+  --one-background: light-dark(var(--one-color-white), var(--one-color-black));
+  --one-surface: light-dark(#f4f4f2, var(--one-color-slate-dark));
+  --one-text: light-dark(var(--one-color-black), var(--one-color-white));
+  --one-text-muted: light-dark(var(--one-color-muted), var(--one-color-slate-light));
+  --one-border: light-dark(#d8d8d5, #555555);
+
+  /* Palette: written by scripts/write-palette-css.ts from DS1/1-root/palette.ts. */
+  --one-red-for-blood: light-dark(#de0331, #9c374c);
+  --one-red-for-blood-pastel: light-dark(#fecdd7, #4b1b25);
+  --one-dark-red-variant: light-dark(#c50124, #d20126);
+  --one-dark-red-variant-pastel: light-dark(#ffccd5, #4c1a23);
+  --one-tuned-red: light-dark(#ff5f5f, #9d3636);
+  --one-tuned-red-pastel: light-dark(#ffcccc, #4c1a1a);
+  --one-signal-red: light-dark(#ff4438, #9d3c36);
+  --one-signal-red-pastel: light-dark(#ffcfcc, #4c1d1a);
+  --one-sand: light-dark(#dbc88f, #84774f);
+  --one-sand-pastel: light-dark(#f3ecd8, #403926);
+  --one-orange: light-dark(#fec20d, #9d8336);
+  --one-orange-pastel: light-dark(#fff2cc, #4c3f1a);
+  --one-old-gold: light-dark(#b69e55, #7e7455);
+  --one-old-gold-pastel: light-dark(#f0ebdb, #3d3829);
+  --one-drip-yellow: light-dark(#fde70c, #9c9337);
+  --one-drip-yellow-pastel: light-dark(#fffacc, #4c471a);
+  --one-every-green: light-dark(#979441, #7e7d55);
+  --one-every-green-pastel: light-dark(#f0efdb, #3d3c29);
+  --one-yellow: light-dark(#eaff00, #959d36);
+  --one-yellow-pastel: light-dark(#fbffcc, #484c1a);
+  --one-chartreuse: light-dark(#ccff4d, #809d36);
+  --one-chartreuse-pastel: light-dark(#f2ffcf, #3e4c1a);
+  --one-comfortable-green: var(--one-chartreuse-pastel);
+  --one-apple-green: light-dark(#99ff73, #529d36);
+  --one-apple-green-pastel: light-dark(#daffcc, #284c1a);
+  --one-metal-green: light-dark(#026d5b, #04cfad);
+  --one-metal-green-pastel: light-dark(#cdfef6, #1b4b43);
+  --one-hysteric-blue: light-dark(#69d8fb, #39839b);
+  --one-hysteric-blue-pastel: light-dark(#cdf2fe, #1b3f4b);
+  --one-winning-blue: light-dark(#0275fa, #37669c);
+  --one-winning-blue-pastel: light-dark(#cce4ff, #1a314c);
+  --one-sharp-blue: light-dark(#594dff, #3d369d);
+  --one-sharp-blue-pastel: light-dark(#ccccff, #1d1a4c);
+  --one-zenith-blue: var(--one-sharp-blue-pastel);
+  --one-purple: light-dark(#e63aaf, #924178);
+  --one-purple-pastel: light-dark(#f9d2ed, #46203a);
+  --one-pink: light-dark(#f5aad1, #92416b);
+  --one-pink-pastel: light-dark(#fad1e6, #471f34);
+  --one-white: light-dark(#ffffff, #1f1f1f);
+  --one-egg: light-dark(#f9f6ef, #392e15);
+  --one-light-grey: light-dark(#e8e8e8, #303030);
+  --one-slate-light: light-dark(#e6e6e6, #323232);
+  --one-darker-grey: light-dark(#797979, #848484);
+  --one-stealth: light-dark(#554455, #b09cb0);
+  --one-slate-dark: light-dark(#3c3c3c, #b3b3b3);
+  --one-ink: light-dark(#2c2c2b, #c0c0bf);
+  --one-black: light-dark(#2a2a2a, #c0c0c0);
+  --one-slate: light-dark(#1e1e1e, #cacaca);
+  /* Palette: end */
+
+  --one-font: Arial, Helvetica, sans-serif;
+  --one-font-medium: Arial, Helvetica, sans-serif;
+  --one-font-display: Georgia, "Times New Roman", serif;
+  --one-font-mono: "Courier New", Courier, monospace;
+
+  --one-font-size: 16px;
+  --one-font-size-small: 11px;
+  --one-line-height: 1.45;
+  --one-radius: 8px;
+  --one-unit: 20px;
+  --one-page-width: 72rem;
+
+  --one-text-padding-block: 0px;
+  --one-text-padding-inline: 0px;
+  --one-link-padding-block: 0px;
+  --one-link-padding-inline: 0px;
+  --one-button-padding-block: 12px;
+  --one-button-padding-inline: 12px;
+  --one-button-small-min-height: 32px;
+  --one-button-small-padding-block: 8px;
+  --one-button-small-padding-inline: 8px;
+  --one-input-padding-block: 12px;
+  --one-input-padding-inline: 16px;
+  --one-input-gap: 8px;
+  --one-blockquote-padding-block: 0px;
+  --one-blockquote-padding-inline: 20px;
+  --one-details-padding-block: 12px;
+  --one-details-padding-inline: 0px;
+  --one-section-padding-block: 24px;
+  --one-section-padding-inline: 24px;
+  --one-section-gap: 12px;
+  --one-table-cell-padding-block: 12px;
+  --one-table-cell-padding-inline: 12px;
+  --one-code-padding-block: 2px;
+  --one-code-padding-inline: 5px;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Reset
+   Predictable sizing while keeping browser-native behavior. */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  background: var(--one-background);
+  color: var(--one-text);
+  font-family: var(--one-font);
+  font-size: var(--one-font-size);
+  line-height: var(--one-line-height);
+}
+
+img,
+svg,
+video,
+canvas {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Layout
+   Header, main, and footer become centered semantic containers. */
+
+body > header,
+body > main,
+body > footer {
+  width: min(100% - 2rem, var(--one-page-width));
+  margin-inline: auto;
+}
+
+body > header,
+body > footer {
+  padding-block: var(--one-unit);
+}
+
+body > main {
+  padding-block: calc(var(--one-unit) * 2);
+}
+
+section + section {
+  margin-block-start: calc(var(--one-unit) * 2);
+}
+
+/* Typography
+   Headings and text work directly from their native elements. */
+
+:where(h1, h2, h3, h4, h5, h6, p, small) {
+  margin-block: 0;
+  padding-block: var(--one-text-padding-block);
+  padding-inline: var(--one-text-padding-inline);
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  color: var(--one-text);
+  font-family: var(--one-font-medium);
+  font-weight: 500;
+  line-height: 1.15;
+}
+
+h1 {
+  font-size: clamp(2rem, 5vw, 4.5rem);
+}
+
+h2 {
+  font-size: clamp(1.35rem, 3vw, 2.25rem);
+}
+
+h3 {
+  font-size: 1.125rem;
+}
+
+p + p {
+  margin-block-start: 1em;
+}
+
+small {
+  color: var(--one-text-muted);
+  font-size: var(--one-font-size-small);
+}
+
+:where(strong, b) {
+  font-family: var(--one-font-medium);
+  font-weight: 500;
+}
+
+a {
+  display: inline-block;
+  padding-block: var(--one-link-padding-block);
+  padding-inline: var(--one-link-padding-inline);
+  color: inherit;
+  text-decoration-color: var(--one-accent-color);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 0.2em;
+}
+
+a:hover {
+  text-decoration-thickness: 4px;
+}
+
+/* Buttons
+   A native button is the primary action. No component class is needed.
+   Neutral and other weights use the variant attribute, mirroring how
+   input uses type — variant="neutral" instead of a component class. */
+
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+) {
+  appearance: none;
+  min-height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--one-button-primary-border);
+  border-radius: var(--one-radius);
+  padding-block: var(--one-button-padding-block);
+  padding-inline: var(--one-button-padding-inline);
+  background: var(--one-button-primary-background);
+  color: var(--one-button-primary-text);
+  cursor: pointer;
+  font-family: Inter, var(--one-font);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+:where(
+  button[variant="neutral"],
+  input[variant="neutral"]
+) {
+  border-color: var(--one-button-neutral-border);
+  background: var(--one-button-neutral-background);
+  color: var(--one-button-neutral-text);
+}
+
+:where(
+  button[small],
+  input[small][type="button"],
+  input[small][type="submit"],
+  input[small][type="reset"]
+) {
+  min-height: var(--one-button-small-min-height);
+  padding-block: var(--one-button-small-padding-block);
+  padding-inline: var(--one-button-small-padding-inline);
+}
+
+:where(
+  button[variant="subtle"],
+  input[variant="subtle"]
+) {
+  border-color: transparent;
+  background: transparent;
+  color: var(--one-button-subtle-text);
+}
+
+:where(
+  button[variant="warning"],
+  input[variant="warning"]
+) {
+  background: var(--one-color-warning);
+  color: var(--one-color-white);
+}
+
+:where(
+  button[variant="danger"],
+  input[variant="danger"]
+) {
+  border-color: var(--one-button-danger-border);
+  background: var(--one-button-danger-background);
+  color: var(--one-button-danger-text);
+}
+
+:where(
+  button[variant="danger-subtle"],
+  input[variant="danger-subtle"]
+) {
+  border-color: transparent;
+  background: transparent;
+  color: var(--one-button-danger-subtle-text);
+}
+
+:where(button:has(> ds-icon:only-child)) {
+  width: var(--one-icon-button-size);
+  min-width: var(--one-icon-button-size);
+  height: var(--one-icon-button-size);
+  min-height: var(--one-icon-button-size);
+  flex: none;
+  border-radius: 50%;
+  padding: 0;
+}
+
+:where(button[small]:has(> ds-icon:only-child)) {
+  width: var(--one-icon-button-small-size);
+  min-width: var(--one-icon-button-small-size);
+  height: var(--one-icon-button-small-size);
+  min-height: var(--one-icon-button-small-size);
+  padding: 0;
+}
+
+:where(button:has(> ds-icon:only-child) > ds-icon) {
+  --sf: 1.428571;
+
+  flex: none;
+}
+
+:where(button[variant="neutral"]:has(> ds-icon:only-child)) {
+  border-color: var(--one-icon-button-neutral-border);
+  background: var(--one-icon-button-neutral-background);
+}
+
+:where(button[variant="subtle"]:has(> ds-icon:only-child)) {
+  color: var(--one-button-neutral-text);
+}
+
+:where(
+    button:not([variant]),
+    input[type="button"]:not([variant]),
+    input[type="submit"]:not([variant]),
+    input[type="reset"]:not([variant])
+  ):hover:not(:disabled) {
+  background: var(--one-button-primary-background-hover);
+}
+
+:where(
+    button[variant="neutral"],
+    input[variant="neutral"]
+  ):hover:not(:disabled) {
+  background: var(--one-button-neutral-background-hover);
+}
+
+:where(
+    button[variant="subtle"],
+    input[variant="subtle"]
+  ):hover:not(:disabled) {
+  border-color: var(--one-button-subtle-border-hover);
+  color: var(--one-button-subtle-text-hover);
+}
+
+:where(
+    button[variant="warning"],
+    input[variant="warning"]
+  ):hover:not(:disabled) {
+  filter: brightness(0.9);
+}
+
+:where(
+    button[variant="danger"],
+    input[variant="danger"]
+  ):hover:not(:disabled) {
+  border-color: var(--one-button-danger-border-hover);
+  background: var(--one-button-danger-background-hover);
+}
+
+:where(
+    button[variant="danger-subtle"],
+    input[variant="danger-subtle"]
+  ):hover:not(:disabled) {
+  border-color: var(--one-button-danger-border-hover);
+  background: var(--one-button-danger-subtle-background-hover);
+}
+
+:where(
+    button[variant="neutral"]:has(> ds-icon:only-child)
+  ):hover:not(:disabled) {
+  border-color: var(--one-icon-button-neutral-border);
+  background: var(--one-icon-button-neutral-background-hover);
+}
+
+:where(
+    button[variant="subtle"]:has(> ds-icon:only-child)
+  ):hover:not(:disabled) {
+  border-color: transparent;
+  background: var(--one-icon-button-subtle-background-hover);
+}
+
+:where(
+    button,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]
+  ):active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+:where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+):disabled {
+  border-color: var(--one-button-disabled-border);
+  background: var(--one-button-disabled-background);
+  color: var(--one-button-disabled-text);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+/* Forms
+   Labels, inputs, selects, and textareas use their semantic relationship. */
+
+form {
+  display: grid;
+  gap: var(--one-unit);
+}
+
+fieldset {
+  display: grid;
+  gap: var(--one-unit);
+  border: 1px solid var(--one-border);
+  padding: var(--one-unit);
+}
+
+legend {
+  padding-inline: 0.5rem;
+  font-family: var(--one-font-medium);
+}
+
+label {
+  display: grid;
+  gap: var(--one-input-gap);
+  color: var(--one-text);
+  font-family: Inter, var(--one-font);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: 0;
+}
+
+:where(
+  input:not(
+    [type="button"],
+    [type="submit"],
+    [type="reset"],
+    [type="checkbox"],
+    [type="radio"]
+  ),
+  select,
+  textarea
+) {
+  appearance: none;
+  width: 100%;
+  min-width: 120px;
+  min-height: 40px;
+  border: 1px solid var(--one-input-border);
+  border-radius: var(--one-radius);
+  padding-block: var(--one-input-padding-block);
+  padding-inline: var(--one-input-padding-inline);
+  background: var(--one-input-background);
+  color: var(--one-input-text);
+  font-family: Inter, var(--one-font);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+input[aria-invalid="true"] {
+  border-color: var(--one-input-error-border);
+}
+
+input:disabled {
+  border-color: var(--one-input-disabled-border);
+  background: var(--one-input-disabled-background);
+  color: var(--one-input-disabled-text);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+label:has(input:disabled) > span {
+  color: var(--one-input-disabled-text);
+}
+
+textarea {
+  min-height: 8rem;
+  resize: vertical;
+}
+
+::placeholder {
+  color: var(--one-input-placeholder);
+  opacity: 1;
+}
+
+:where(input, select, textarea, button):focus-visible {
+  outline: 2px solid var(--one-color-focus);
+  outline-offset: 2px;
+}
+
+/* Sections
+   A semantic section is the default content surface or card. */
+
+section {
+  display: grid;
+  gap: var(--one-section-gap);
+  border: 1px solid var(--one-border);
+  border-radius: var(--one-radius);
+  padding-block: var(--one-section-padding-block);
+  padding-inline: var(--one-section-padding-inline);
+  background: var(--one-background);
+  color: var(--one-text);
+}
+
+section > header,
+section > footer {
+  padding: 0;
+  background: transparent;
+}
+
+blockquote {
+  margin-inline: 0;
+  border-inline-start: 4px solid var(--one-accent-color);
+  padding-block: var(--one-blockquote-padding-block);
+  padding-inline: var(--one-blockquote-padding-inline);
+  color: var(--one-text-muted);
+}
+
+details {
+  border-block: 1px solid var(--one-border);
+  padding-block: var(--one-details-padding-block);
+  padding-inline: var(--one-details-padding-inline);
+}
+
+summary {
+  cursor: pointer;
+  font-family: var(--one-font-medium);
+}
+
+dialog {
+  max-width: min(36rem, calc(100% - 2rem));
+  border: 1px solid var(--one-border);
+  border-radius: var(--one-radius);
+  padding: var(--one-unit);
+  background: var(--one-background);
+  color: var(--one-text);
+}
+
+dialog::backdrop {
+  background: rgb(0 0 0 / 50%);
+}
+
+/* Tables
+   Native table structure receives readable defaults. */
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+
+:where(th, td) {
+  border-bottom: 1px solid var(--one-border);
+  padding-block: var(--one-table-cell-padding-block);
+  padding-inline: var(--one-table-cell-padding-inline);
+  text-align: start;
+}
+
+th {
+  font-family: var(--one-font-medium);
+  font-weight: 500;
+}
+
+tbody tr:hover {
+  background: var(--one-surface);
+}
+
+/* Code
+   Inline and block code share the same monospace language. */
+
+:where(code, kbd, samp, pre) {
+  font-family: var(--one-font-mono);
+}
+
+:where(code, kbd) {
+  padding-block: var(--one-code-padding-block);
+  padding-inline: var(--one-code-padding-inline);
+  background: var(--one-surface);
+  font-size: 0.9em;
+}
+
+pre {
+  overflow: auto;
+  padding: var(--one-unit);
+  background: var(--one-color-slate);
+  color: var(--one-color-white);
+}
+
+pre code {
+  padding: 0;
+  background: transparent;
+}
+
+/* Feedback
+   Native progress and horizontal rules inherit the theme. */
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--one-border);
+}
+
+progress {
+  width: 100%;
+  accent-color: var(--one-accent-color);
+}
+
+/* Motion
+   Respect reduced-motion preferences. */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}