@scttlnd/fintech-design-system 0.0.0-stage → 0.3.0

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);
+  }
+}

package/styles/components.css

@@ -0,0 +1,11 @@
+@import "./components/eyebrow.css";
+@import "./components/panel.css";
+@import "./components/tone.css";
+@import "./components/metric.css";
+@import "./components/badge.css";
+@import "./components/notice.css";
+@import "./components/empty-state.css";
+@import "./components/field.css";
+@import "./components/meter.css";
+@import "./components/menu.css";
+@import "./components/button.css";

package/styles/index.css

@@ -0,0 +1,4 @@
+@layer fds;
+@import "./tokens.css";
+@import "./components.css";
+@import "./components/grain.css";

package/styles/themes/funder.css

@@ -0,0 +1,77 @@
+@layer fds {
+  :root,
+  [data-fds-theme="funder"] {
+    color-scheme: dark;
+    --fds-background: #08090b;
+    --fds-foreground: #f4f4f5;
+    --fds-accent: #7dd3fc;
+    --fds-accent-strong: #38bdf8;
+    --fds-on-accent: #08090b;
+  }
+
+  /* Phase 0 foundations. Spacing retains the retired showcase's 4px scale. */
+  :root,
+  [data-fds-theme="funder"] {
+    --fds-space-1: 4px;
+    --fds-space-2: 8px;
+    --fds-space-3: 12px;
+    --fds-space-4: 16px;
+    --fds-space-5: 20px;
+    --fds-space-6: 24px;
+    --fds-space-7: 28px;
+    --fds-space-8: 32px;
+    --fds-text-xs: 0.75rem;
+    --fds-text-sm: 0.875rem;
+    --fds-text-base: 1rem;
+    --fds-text-lg: 1.125rem;
+    --fds-text-xl: 1.25rem;
+    --fds-text-2xl: 1.5rem;
+    --fds-leading-tight: 1.25;
+    --fds-leading-normal: 1.5;
+    --fds-leading-relaxed: 1.75;
+    --fds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --fds-numeric: tabular-nums;
+    --fds-control-h: 2.75rem;
+    --fds-control-h-sm: 2.75rem;
+    --fds-focus-ring: var(--fds-accent);
+    --fds-shadow-popover: 0 10px 30px rgb(0 0 0 / 0.25);
+    --fds-shadow-dialog: 0 24px 64px rgb(0 0 0 / 0.4);
+    --fds-overlay: rgb(0 0 0 / 0.6);
+    --fds-z-dropdown: 30;
+    --fds-z-sticky: 20;
+    --fds-z-overlay: 40;
+    --fds-z-modal: 50;
+    --fds-z-toast: 60;
+    --fds-z-tooltip: 70;
+    --fds-duration-fast: 0.15s;
+    --fds-duration-base: 0.2s;
+    --fds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --fds-on-danger: var(--fds-background);
+    --fds-on-success: var(--fds-background);
+    --fds-chart-1: #7dd3fc;
+    --fds-chart-2: #c4b5fd;
+    --fds-chart-3: #fbbf24;
+    --fds-chart-4: #fda4af;
+    --fds-chart-5: #86efac;
+    --fds-chart-6: #67e8f9;
+    --fds-chart-grid: #71717a;
+    --fds-chart-positive: var(--fds-success);
+    --fds-chart-negative: var(--fds-danger);
+  }
+
+  @media (min-width: 640px) and (pointer: fine) {
+    :root,
+    [data-fds-theme="funder"] {
+      --fds-control-h: 2.25rem;
+      --fds-control-h-sm: 2rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root,
+    [data-fds-theme="funder"] {
+      --fds-duration-fast: 0s;
+      --fds-duration-base: 0s;
+    }
+  }
+}

package/styles/themes/investor.css

@@ -0,0 +1,77 @@
+@layer fds {
+  :root,
+  [data-fds-theme="investor"] {
+    color-scheme: dark;
+    --fds-background: #08090b;
+    --fds-foreground: #f4f4f5;
+    --fds-accent: #7dd3fc;
+    --fds-accent-strong: #38bdf8;
+    --fds-on-accent: #08090b;
+  }
+
+  /* Phase 0 foundations. Spacing retains the retired showcase's 4px scale. */
+  :root,
+  [data-fds-theme="investor"] {
+    --fds-space-1: 4px;
+    --fds-space-2: 8px;
+    --fds-space-3: 12px;
+    --fds-space-4: 16px;
+    --fds-space-5: 20px;
+    --fds-space-6: 24px;
+    --fds-space-7: 28px;
+    --fds-space-8: 32px;
+    --fds-text-xs: 0.75rem;
+    --fds-text-sm: 0.875rem;
+    --fds-text-base: 1rem;
+    --fds-text-lg: 1.125rem;
+    --fds-text-xl: 1.25rem;
+    --fds-text-2xl: 1.5rem;
+    --fds-leading-tight: 1.25;
+    --fds-leading-normal: 1.5;
+    --fds-leading-relaxed: 1.75;
+    --fds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --fds-numeric: tabular-nums;
+    --fds-control-h: 2.75rem;
+    --fds-control-h-sm: 2.75rem;
+    --fds-focus-ring: var(--fds-accent);
+    --fds-shadow-popover: 0 10px 30px rgb(0 0 0 / 0.25);
+    --fds-shadow-dialog: 0 24px 64px rgb(0 0 0 / 0.4);
+    --fds-overlay: rgb(0 0 0 / 0.6);
+    --fds-z-dropdown: 30;
+    --fds-z-sticky: 20;
+    --fds-z-overlay: 40;
+    --fds-z-modal: 50;
+    --fds-z-toast: 60;
+    --fds-z-tooltip: 70;
+    --fds-duration-fast: 0.15s;
+    --fds-duration-base: 0.2s;
+    --fds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --fds-on-danger: var(--fds-background);
+    --fds-on-success: var(--fds-background);
+    --fds-chart-1: #7dd3fc;
+    --fds-chart-2: #c4b5fd;
+    --fds-chart-3: #fbbf24;
+    --fds-chart-4: #fda4af;
+    --fds-chart-5: #86efac;
+    --fds-chart-6: #67e8f9;
+    --fds-chart-grid: #71717a;
+    --fds-chart-positive: var(--fds-success);
+    --fds-chart-negative: var(--fds-danger);
+  }
+
+  @media (min-width: 640px) and (pointer: fine) {
+    :root,
+    [data-fds-theme="investor"] {
+      --fds-control-h: 2.25rem;
+      --fds-control-h-sm: 2rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root,
+    [data-fds-theme="investor"] {
+      --fds-duration-fast: 0s;
+      --fds-duration-base: 0s;
+    }
+  }
+}

package/styles/themes/portare.css

@@ -0,0 +1,92 @@
+@layer fds {
+  :root,
+  [data-fds-theme="portare"] {
+    color-scheme: light;
+    --fds-background: #fafbfc;
+    --fds-foreground: #111827;
+    --fds-muted: #525b6b;
+    --fds-panel: #fff;
+    --fds-panel-raised: #f3f5f8;
+    --fds-line: #d8dee7;
+    --fds-accent: #075e7c;
+    --fds-accent-strong: #064c66;
+    --fds-on-accent: #fff;
+  }
+
+  /* Semantic and secondary surface tokens: the base (dark) values fail contrast on a light surface. */
+  :root,
+  [data-fds-theme="portare"] {
+    --fds-muted-strong: #374151;
+    --fds-line-soft: #e5e9f0;
+    --fds-panel-soft: #f8fafc;
+    --fds-success: #1f6f4a;
+    --fds-warn: #8a5a00;
+    --fds-danger: #b3261e;
+  }
+
+  /* Phase 0 foundations. Spacing retains the retired showcase's 4px scale. */
+  :root,
+  [data-fds-theme="portare"] {
+    --fds-space-1: 4px;
+    --fds-space-2: 8px;
+    --fds-space-3: 12px;
+    --fds-space-4: 16px;
+    --fds-space-5: 20px;
+    --fds-space-6: 24px;
+    --fds-space-7: 28px;
+    --fds-space-8: 32px;
+    --fds-text-xs: 0.75rem;
+    --fds-text-sm: 0.875rem;
+    --fds-text-base: 1rem;
+    --fds-text-lg: 1.125rem;
+    --fds-text-xl: 1.25rem;
+    --fds-text-2xl: 1.5rem;
+    --fds-leading-tight: 1.25;
+    --fds-leading-normal: 1.5;
+    --fds-leading-relaxed: 1.75;
+    --fds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --fds-numeric: tabular-nums;
+    --fds-control-h: 2.75rem;
+    --fds-control-h-sm: 2.75rem;
+    --fds-focus-ring: var(--fds-accent);
+    --fds-shadow-popover: 0 10px 30px rgb(0 0 0 / 0.15);
+    --fds-shadow-dialog: 0 24px 64px rgb(0 0 0 / 0.25);
+    --fds-overlay: rgb(0 0 0 / 0.5);
+    --fds-z-dropdown: 30;
+    --fds-z-sticky: 20;
+    --fds-z-overlay: 40;
+    --fds-z-modal: 50;
+    --fds-z-toast: 60;
+    --fds-z-tooltip: 70;
+    --fds-duration-fast: 0.15s;
+    --fds-duration-base: 0.2s;
+    --fds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --fds-on-danger: #fff;
+    --fds-on-success: #fff;
+    --fds-chart-1: #075e7c;
+    --fds-chart-2: #6941a5;
+    --fds-chart-3: #8a5a00;
+    --fds-chart-4: #b3261e;
+    --fds-chart-5: #1f6f4a;
+    --fds-chart-6: #0e6574;
+    --fds-chart-grid: #667085;
+    --fds-chart-positive: var(--fds-success);
+    --fds-chart-negative: var(--fds-danger);
+  }
+
+  @media (min-width: 640px) and (pointer: fine) {
+    :root,
+    [data-fds-theme="portare"] {
+      --fds-control-h: 2.25rem;
+      --fds-control-h-sm: 2rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root,
+    [data-fds-theme="portare"] {
+      --fds-duration-fast: 0s;
+      --fds-duration-base: 0s;
+    }
+  }
+}

package/styles/tokens.css

@@ -0,0 +1,90 @@
+@layer fds {
+  :root {
+    --fds-background: #08090b;
+    --fds-foreground: #f4f4f5;
+    --fds-muted: #a1a1aa;
+    --fds-muted-strong: #d4d4d8;
+    --fds-line: #27272a;
+    --fds-line-soft: #1b1b1f;
+    --fds-panel: #101114;
+    --fds-panel-raised: #15161a;
+    --fds-panel-soft: #0c0d10;
+    --fds-accent: #7dd3fc;
+    --fds-accent-strong: #38bdf8;
+    --fds-on-accent: #08090b;
+    --fds-success: #86efac;
+    --fds-warn: #fbbf24;
+    --fds-danger: #fda4af;
+    --fds-radius-md: 0.625rem;
+    --fds-font-sans:
+      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  :root {
+    --fds-radius-lg: 0.75rem;
+    --fds-radius-sm: 0.375rem;
+  }
+
+  /* Phase 0 foundations. Spacing retains the retired showcase's 4px scale. */
+  :root {
+    --fds-space-1: 4px;
+    --fds-space-2: 8px;
+    --fds-space-3: 12px;
+    --fds-space-4: 16px;
+    --fds-space-5: 20px;
+    --fds-space-6: 24px;
+    --fds-space-7: 28px;
+    --fds-space-8: 32px;
+    --fds-text-xs: 0.75rem;
+    --fds-text-sm: 0.875rem;
+    --fds-text-base: 1rem;
+    --fds-text-lg: 1.125rem;
+    --fds-text-xl: 1.25rem;
+    --fds-text-2xl: 1.5rem;
+    --fds-leading-tight: 1.25;
+    --fds-leading-normal: 1.5;
+    --fds-leading-relaxed: 1.75;
+    --fds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --fds-numeric: tabular-nums;
+    --fds-control-h: 2.75rem;
+    --fds-control-h-sm: 2.75rem;
+    --fds-focus-ring: var(--fds-accent);
+    --fds-shadow-popover: 0 10px 30px rgb(0 0 0 / 0.25);
+    --fds-shadow-dialog: 0 24px 64px rgb(0 0 0 / 0.4);
+    --fds-overlay: rgb(0 0 0 / 0.6);
+    --fds-z-dropdown: 30;
+    --fds-z-sticky: 20;
+    --fds-z-overlay: 40;
+    --fds-z-modal: 50;
+    --fds-z-toast: 60;
+    --fds-z-tooltip: 70;
+    --fds-duration-fast: 0.15s;
+    --fds-duration-base: 0.2s;
+    --fds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --fds-on-danger: var(--fds-background);
+    --fds-on-success: var(--fds-background);
+    --fds-chart-1: #7dd3fc;
+    --fds-chart-2: #c4b5fd;
+    --fds-chart-3: #fbbf24;
+    --fds-chart-4: #fda4af;
+    --fds-chart-5: #86efac;
+    --fds-chart-6: #67e8f9;
+    --fds-chart-grid: #71717a;
+    --fds-chart-positive: var(--fds-success);
+    --fds-chart-negative: var(--fds-danger);
+  }
+
+  @media (min-width: 640px) and (pointer: fine) {
+    :root {
+      --fds-control-h: 2.25rem;
+      --fds-control-h-sm: 2rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --fds-duration-fast: 0s;
+      --fds-duration-base: 0s;
+    }
+  }
+}