@scttlnd/fintech-design-system 0.2.0 → 0.3.0

package/styles/components/button.css

@@ -0,0 +1,45 @@
+@layer fds {
+  .fds-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: var(--fds-control-h);
+    padding: 0.55rem 1rem;
+    border-radius: var(--fds-radius-md);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+    transition:
+      background-color var(--fds-duration-fast) var(--fds-ease-out),
+      border-color var(--fds-duration-fast) var(--fds-ease-out);
+  }
+  .fds-button:focus-visible {
+    outline: 2px solid var(--fds-focus-ring);
+    outline-offset: 2px;
+  }
+  .fds-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .fds-button--primary {
+    background: var(--fds-accent);
+    color: var(--fds-on-accent);
+    border: 1px solid transparent;
+  }
+  .fds-button--secondary {
+    background: var(--fds-panel-raised);
+    color: var(--fds-foreground);
+    border: 1px solid var(--fds-line);
+  }
+  .fds-button--ghost {
+    background: transparent;
+    color: var(--fds-foreground);
+    border: 1px solid transparent;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fds-button {
+      transition: none;
+    }
+  }
+}

package/styles/components/empty-state.css

@@ -0,0 +1,20 @@
+@layer fds {
+  /* Empty state */
+  .fds-empty {
+    padding: 2rem 1rem;
+    text-align: center;
+  }
+  .fds-empty__title {
+    margin: 0;
+    font-weight: 600;
+  }
+  .fds-empty__description {
+    margin: 0.5rem auto 0;
+    max-width: 45ch;
+    font-size: 0.875rem;
+    color: var(--fds-muted);
+  }
+  .fds-empty__action {
+    margin-top: 1rem;
+  }
+}

package/styles/components/eyebrow.css

@@ -0,0 +1,11 @@
+@layer fds {
+  /* Shared primitives. Only --fds-* tokens; tones are derived with color-mix so every theme works. */
+
+  .fds-eyebrow {
+    margin: 0;
+    font-size: 0.75rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--fds-muted);
+  }
+}

package/styles/components/field.css

@@ -0,0 +1,59 @@
+@layer fds {
+  /* Form controls: 44px targets on touch / small screens, 16px font to stop iOS zoom. */
+  .fds-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+  .fds-field__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+  .fds-field__hint,
+  .fds-field__error {
+    margin: 0;
+    font-size: 0.8125rem;
+  }
+  .fds-field__hint {
+    color: var(--fds-muted);
+  }
+  .fds-field__error {
+    color: var(--fds-danger);
+  }
+  .fds-control {
+    width: 100%;
+    min-height: 2.75rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--fds-line);
+    border-radius: var(--fds-radius-md);
+    background: var(--fds-panel-soft, var(--fds-panel));
+    color: var(--fds-foreground);
+    font: inherit;
+    font-size: 1rem;
+  }
+  .fds-control--multiline {
+    min-height: 6rem;
+    resize: vertical;
+  }
+  .fds-control:focus-visible {
+    outline: 2px solid var(--fds-focus-ring);
+    outline-offset: 2px;
+    border-color: var(--fds-accent);
+  }
+  .fds-control[aria-invalid="true"] {
+    border-color: var(--fds-danger);
+  }
+  .fds-control:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  @media (min-width: 640px) and (pointer: fine) {
+    .fds-control {
+      min-height: 2.25rem;
+      font-size: 0.875rem;
+    }
+    .fds-control--multiline {
+      min-height: 6rem;
+    }
+  }
+}

package/styles/components/grain.css

@@ -0,0 +1,245 @@
+@layer fds {
+  /*
+   * Grain surfaces: a quiet, hairline-bordered surface with a soft two-colour glow and fine film grain.
+   * On by default for every .fds-panel; opt out with data-fds-grain="off" on the element or any ancestor
+   * (for example <html>). Vivid, hero and the other modifiers are explicit classes on .fds-grain.
+   * Colours derive from the active theme (accent, panel, line), so every theme works. `light-dark()`
+   * follows the theme's `color-scheme`, so no per-theme overrides are needed.
+   */
+  /* Browsers without light-dark() keep the plain panel instead of an invalid background. */
+  @supports (color: light-dark(#000, #fff)) {
+    :root,
+    [data-fds-theme] {
+      --fds-glow-a: var(--fds-accent-strong);
+      --fds-glow-b: light-dark(#6941a5, #a78bfa);
+      --fds-glow-warm-a: var(--fds-warn);
+      --fds-glow-warm-b: var(--fds-danger);
+      /* Glow share (light / dark scheme). Kept low so text contrast is unaffected. */
+      --fds-glow-l: 16%;
+      --fds-glow-d: 26%;
+      /* Grain alpha (light / dark scheme). Grain is a tinted alpha mask: dark specks on light, light on dark. */
+      --fds-grain-l: 0.16;
+      --fds-grain-d: 0.09;
+      --fds-grain-size: 160px;
+      --fds-grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.9 -.55'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
+      /* Vivid hues: saturated colour fields with light streaks. Decoration only; put content on a stage. */
+      --fds-vivid-indigo-1: #4f30e8;
+      --fds-vivid-indigo-2: #8b8ffb;
+      --fds-vivid-teal-1: #0d9488;
+      --fds-vivid-teal-2: #5eead4;
+      --fds-vivid-green-1: #15803d;
+      --fds-vivid-green-2: #86efac;
+      --fds-vivid-ember-1: #c2410c;
+      --fds-vivid-ember-2: #fdba74;
+      --fds-stage-bg: #0d0e12;
+      --fds-stage-fg: #f4f4f5;
+      --fds-stage-muted: #a1a1aa;
+      --fds-stage-line: #26272d;
+    }
+
+    .fds-grain:not(:where([data-fds-grain="off"], [data-fds-grain="off"] *)),
+    .fds-panel:not(:where([data-fds-grain="off"], [data-fds-grain="off"] *)) {
+      position: relative;
+      isolation: isolate;
+      border: 1px solid var(--fds-line);
+      border-radius: var(--fds-radius-lg);
+      color: var(--fds-foreground);
+      --fds-tint-1: light-dark(
+        color-mix(in oklab, var(--fds-glow-1, var(--fds-glow-a)) var(--fds-glow-l), transparent),
+        color-mix(in oklab, var(--fds-glow-1, var(--fds-glow-a)) var(--fds-glow-d), transparent)
+      );
+      --fds-tint-2: light-dark(
+        color-mix(in oklab, var(--fds-glow-2, var(--fds-glow-b)) var(--fds-glow-l), transparent),
+        color-mix(in oklab, var(--fds-glow-2, var(--fds-glow-b)) var(--fds-glow-d), transparent)
+      );
+      background:
+        radial-gradient(120% 100% at 0% 0%, var(--fds-tint-1), transparent 62%),
+        radial-gradient(100% 90% at 100% 100%, var(--fds-tint-2), transparent 58%), var(--fds-panel);
+    }
+
+    /* Grain sits above the gradient and below the content, so text stays crisp. */
+    .fds-grain:not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))::before,
+    .fds-panel:not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      border-radius: inherit;
+      pointer-events: none;
+      background: light-dark(
+        rgb(0 0 0 / var(--fds-grain-l)),
+        rgb(255 255 255 / var(--fds-grain-d))
+      );
+      -webkit-mask-image: var(--fds-grain-image);
+      mask-image: var(--fds-grain-image);
+      -webkit-mask-size: var(--fds-grain-size) var(--fds-grain-size);
+      mask-size: var(--fds-grain-size) var(--fds-grain-size);
+    }
+
+    .fds-grain--warm {
+      --fds-glow-1: var(--fds-glow-warm-a);
+      --fds-glow-2: var(--fds-glow-warm-b);
+    }
+    .fds-grain--subtle {
+      --fds-glow-l: 8%;
+      --fds-glow-d: 14%;
+      --fds-grain-l: 0.1;
+      --fds-grain-d: 0.05;
+    }
+    .fds-grain--hero {
+      --fds-glow-l: 20%;
+      --fds-glow-d: 34%;
+      padding: clamp(1.5rem, 5vw, 3.5rem);
+      border-radius: calc(var(--fds-radius-lg) * 1.5);
+    }
+
+    /*
+     * Vivid: a saturated colour field with diagonal light streaks and strong grain, for hero bands and
+     * feature panels. Text must sit on a .fds-grain__stage (a near-black inset) so contrast never depends
+     * on the gradient. Hues: --indigo (default), --teal, --green, --ember.
+     */
+    .fds-grain--vivid {
+      --fds-v1: var(--fds-vivid-indigo-1);
+      --fds-v2: var(--fds-vivid-indigo-2);
+      --fds-grain-l: 0.3;
+      --fds-grain-d: 0.3;
+      padding: clamp(1rem, 4vw, 2.5rem);
+      border-color: transparent;
+      background:
+        linear-gradient(118deg, transparent 30%, rgb(255 255 255 / 0.28) 30.4%, transparent 31.6%),
+        linear-gradient(118deg, transparent 52%, rgb(255 255 255 / 0.18) 52.3%, transparent 53.2%),
+        linear-gradient(62deg, transparent 64%, rgb(255 255 255 / 0.22) 64.4%, transparent 65.6%),
+        radial-gradient(90% 80% at 15% 10%, var(--fds-v2), transparent 60%),
+        radial-gradient(
+          80% 90% at 90% 95%,
+          color-mix(in oklab, var(--fds-v2) 70%, black),
+          transparent 65%
+        ),
+        linear-gradient(160deg, var(--fds-v1), color-mix(in oklab, var(--fds-v1) 55%, black));
+    }
+    .fds-panel.fds-grain--vivid {
+      padding: clamp(1rem, 4vw, 2.5rem);
+    }
+    .fds-grain--teal {
+      --fds-v1: var(--fds-vivid-teal-1);
+      --fds-v2: var(--fds-vivid-teal-2);
+    }
+    .fds-grain--green {
+      --fds-v1: var(--fds-vivid-green-1);
+      --fds-v2: var(--fds-vivid-green-2);
+    }
+    .fds-grain--ember {
+      --fds-v1: var(--fds-vivid-ember-1);
+      --fds-v2: var(--fds-vivid-ember-2);
+    }
+
+    /* Near-black inset that carries the content on a vivid field. Same colours in every theme. */
+    .fds-grain__stage {
+      padding: var(--fds-space-6);
+      border: 1px solid var(--fds-stage-line);
+      border-radius: var(--fds-radius-md);
+      background: var(--fds-stage-bg);
+      color: var(--fds-stage-fg);
+      font-family: var(--fds-font-mono);
+      font-size: var(--fds-text-sm);
+      line-height: var(--fds-leading-relaxed);
+      box-shadow: 0 18px 48px rgb(0 0 0 / 0.35);
+    }
+    .fds-grain__stage .fds-eyebrow,
+    .fds-grain__stage p {
+      color: var(--fds-stage-muted);
+    }
+
+    /* Flat hairline cells: dividers instead of shadowed cards. */
+    .fds-cells {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+      gap: 1px;
+      border-block: 1px solid var(--fds-line);
+      background: var(--fds-line);
+    }
+    .fds-cells > * {
+      padding: var(--fds-space-6);
+      background: var(--fds-background);
+    }
+
+    /* Inline mono chip for commands and identifiers. */
+    .fds-code {
+      padding: 0.1em 0.45em;
+      border: 1px solid var(--fds-line);
+      border-radius: var(--fds-radius-sm);
+      background: var(--fds-panel-soft);
+      font-family: var(--fds-font-mono);
+      font-size: 0.875em;
+    }
+
+    /*
+     * Components sit on top of the grain: it is background only. Any component fill that is translucent
+     * would let the grain show through, so inside a grain surface those fills are mixed with the panel
+     * colour instead of transparent. The result matches the flat-panel look, but is opaque.
+     */
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      .fds-badge {
+      background: color-mix(in srgb, var(--fds-badge-color) 12%, var(--fds-panel));
+      border-color: color-mix(in srgb, var(--fds-badge-color) 30%, var(--fds-panel));
+    }
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      .fds-notice {
+      background: color-mix(in srgb, var(--fds-notice-color) 10%, var(--fds-panel));
+      border-color: color-mix(in srgb, var(--fds-notice-color) 35%, var(--fds-panel));
+    }
+    /* Disabled controls use opacity: 0.5, which is see-through. Reproduce it as opaque mixes instead. */
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      :is(.fds-button, .fds-control):disabled {
+      opacity: 1;
+    }
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      .fds-button--primary:disabled {
+      background: color-mix(in srgb, var(--fds-accent) 50%, var(--fds-panel));
+      color: color-mix(in srgb, var(--fds-on-accent) 50%, var(--fds-panel));
+    }
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      .fds-button--secondary:disabled {
+      background: color-mix(in srgb, var(--fds-panel-raised) 50%, var(--fds-panel));
+      border-color: color-mix(in srgb, var(--fds-line) 50%, var(--fds-panel));
+      color: color-mix(in srgb, var(--fds-foreground) 50%, var(--fds-panel));
+    }
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      .fds-button--ghost:disabled {
+      color: color-mix(in srgb, var(--fds-foreground) 50%, var(--fds-panel));
+    }
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      .fds-control:disabled {
+      background: color-mix(in srgb, var(--fds-panel-soft, var(--fds-panel)) 50%, var(--fds-panel));
+      border-color: color-mix(in srgb, var(--fds-line) 50%, var(--fds-panel));
+      color: color-mix(in srgb, var(--fds-foreground) 50%, var(--fds-panel));
+    }
+
+    /* Quiet, technical labelling inside grain surfaces. */
+    .fds-grain .fds-eyebrow,
+    .fds-panel:not(:where([data-fds-grain="off"], [data-fds-grain="off"] *)) .fds-eyebrow {
+      font-family: var(--fds-font-mono);
+      letter-spacing: 0.08em;
+    }
+
+    /* Decoration only: drop it where it cannot help. */
+    @media (forced-colors: active) {
+      .fds-grain,
+      .fds-panel.fds-grain {
+        background: Canvas;
+      }
+      .fds-grain::before {
+        display: none;
+      }
+    }
+    @media print {
+      .fds-grain,
+      .fds-panel.fds-grain {
+        background: none;
+      }
+      .fds-grain::before {
+        display: none;
+      }
+    }
+  }
+}

package/styles/components/menu.css

@@ -0,0 +1,74 @@
+@layer fds {
+  /* Menu */
+  .fds-menu {
+    position: relative;
+    display: inline-block;
+  }
+  .fds-menu__trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    border: 1px solid var(--fds-line);
+    border-radius: var(--fds-radius-md);
+    background: var(--fds-panel-soft, var(--fds-panel));
+    color: var(--fds-muted);
+    cursor: pointer;
+  }
+  .fds-menu__trigger:hover {
+    border-color: var(--fds-accent);
+    color: var(--fds-foreground);
+  }
+  .fds-menu__trigger:focus-visible,
+  .fds-menu__item:focus-visible {
+    outline: 2px solid var(--fds-focus-ring);
+    outline-offset: 2px;
+  }
+  .fds-menu__list {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: var(--fds-z-dropdown);
+    min-width: 11rem;
+    margin-top: 0.25rem;
+    padding: 0.25rem 0;
+    overflow: hidden;
+    border: 1px solid var(--fds-line);
+    border-radius: var(--fds-radius-md);
+    background: var(--fds-panel);
+    box-shadow: var(--fds-shadow-popover);
+  }
+  .fds-menu__item {
+    display: block;
+    width: 100%;
+    min-height: 2.75rem;
+    padding: 0.5rem 0.75rem;
+    border: 0;
+    background: transparent;
+    color: var(--fds-foreground);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+  .fds-menu__item:hover,
+  .fds-menu__item:focus-visible {
+    background: var(--fds-panel-raised);
+  }
+  .fds-menu__item--danger {
+    color: var(--fds-danger);
+  }
+  .fds-menu__item:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  @media (min-width: 640px) and (pointer: fine) {
+    .fds-menu__trigger {
+      width: 2.25rem;
+      height: 2.25rem;
+    }
+    .fds-menu__item {
+      min-height: 2.25rem;
+    }
+  }
+}

package/styles/components/meter.css

@@ -0,0 +1,62 @@
+@layer fds {
+  /* Meters */
+  .fds-meter {
+    height: 0.5rem;
+    overflow: hidden;
+    border-radius: 999px;
+    background: var(--fds-line);
+  }
+  .fds-meter--thin {
+    height: 0.375rem;
+  }
+  .fds-meter__fill {
+    height: 100%;
+    border-radius: inherit;
+    background: var(--fds-accent);
+  }
+  .fds-segmeter {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .fds-segmeter__segment {
+    width: 0.5rem;
+    height: 1rem;
+    border-radius: 2px;
+    background: var(--fds-line);
+  }
+  .fds-segmeter__segment--on {
+    background: var(--fds-accent);
+  }
+  .fds-distribution__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .fds-distribution__meta {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .fds-distribution__label {
+    color: var(--fds-muted-strong, var(--fds-foreground));
+  }
+  .fds-distribution__value {
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+  .fds-distribution__empty,
+  .fds-distribution__overflow {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--fds-muted);
+  }
+  .fds-distribution__overflow {
+    margin-top: 0.5rem;
+  }
+}

package/styles/components/metric.css

@@ -0,0 +1,28 @@
+@layer fds {
+  /* Metric / KeyValue */
+  .fds-metric,
+  .fds-keyvalue {
+    padding: 0.75rem;
+    border: 1px solid var(--fds-line);
+    border-radius: var(--fds-radius-md);
+    background: var(--fds-panel-soft, var(--fds-panel));
+  }
+  .fds-keyvalue {
+    border-color: var(--fds-line-soft, var(--fds-line));
+  }
+  .fds-metric__label {
+    margin: 0;
+    font-size: 0.75rem;
+    color: var(--fds-muted);
+  }
+  .fds-metric__value {
+    margin: 0.5rem 0 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+  .fds-keyvalue__value {
+    margin: 0.25rem 0 0;
+    font-weight: 500;
+  }
+}

package/styles/components/notice.css

@@ -0,0 +1,34 @@
+@layer fds {
+  /* Notice */
+  .fds-notice {
+    --fds-notice-color: var(--fds-accent);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    border: 1px solid color-mix(in srgb, var(--fds-notice-color) 35%, transparent);
+    border-left-width: 4px;
+    border-radius: var(--fds-radius-md);
+    background: color-mix(in srgb, var(--fds-notice-color) 10%, transparent);
+    color: var(--fds-foreground);
+  }
+  .fds-notice--success {
+    --fds-notice-color: var(--fds-success);
+  }
+  .fds-notice--warn {
+    --fds-notice-color: var(--fds-warn);
+  }
+  .fds-notice--danger {
+    --fds-notice-color: var(--fds-danger);
+  }
+  .fds-notice__title {
+    margin: 0;
+    font-weight: 600;
+  }
+  .fds-notice__text {
+    font-size: 0.875rem;
+    color: var(--fds-muted-strong, var(--fds-foreground));
+  }
+}

package/styles/components/panel.css

@@ -0,0 +1,42 @@
+@layer fds {
+  /* Panel */
+  .fds-panel {
+    padding: 1rem;
+    border: 1px solid var(--fds-line);
+    border-radius: var(--fds-radius-lg);
+    background: var(--fds-panel);
+    color: var(--fds-foreground);
+  }
+  .fds-panel__header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+  .fds-panel__heading {
+    min-width: 0;
+  }
+  .fds-panel__title {
+    margin: 0.25rem 0 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+  .fds-panel__help {
+    margin: 0.375rem 0 0;
+    max-width: 65ch;
+    font-size: 0.75rem;
+    line-height: 1.5;
+    color: var(--fds-muted);
+  }
+  @media (min-width: 640px) {
+    .fds-panel {
+      padding: 1.25rem;
+    }
+    .fds-panel__header {
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 1rem;
+    }
+  }
+}

package/styles/components/tone.css

@@ -0,0 +1,15 @@
+@layer fds {
+  /* Tones */
+  .fds-tone--accent {
+    color: var(--fds-accent);
+  }
+  .fds-tone--success {
+    color: var(--fds-success);
+  }
+  .fds-tone--warn {
+    color: var(--fds-warn);
+  }
+  .fds-tone--danger {
+    color: var(--fds-danger);
+  }
+}