@scttlnd/fintech-design-system 0.2.0 → 0.3.0

package/styles/components.css

@@ -1,367 +1,11 @@
-/* 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);
-}
-
-/* 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;
-  }
-}
-
-/* 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);
-}
-
-/* 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;
-}
-
-/* Badge */
-.fds-badge {
-  --fds-badge-color: var(--fds-muted-strong, var(--fds-foreground));
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  min-height: 1.75rem;
-  padding: 0 0.5rem;
-  border: 1px solid color-mix(in srgb, var(--fds-badge-color) 30%, transparent);
-  border-radius: var(--fds-radius-sm);
-  background: color-mix(in srgb, var(--fds-badge-color) 12%, transparent);
-  color: var(--fds-badge-color);
-  font-size: 0.75rem;
-  font-weight: 500;
-  white-space: nowrap;
-}
-.fds-badge--accent {
-  --fds-badge-color: var(--fds-accent);
-}
-.fds-badge--success {
-  --fds-badge-color: var(--fds-success);
-}
-.fds-badge--warn {
-  --fds-badge-color: var(--fds-warn);
-}
-.fds-badge--danger {
-  --fds-badge-color: var(--fds-danger);
-}
-.fds-badge__icon {
-  display: inline-flex;
-}
-
-/* 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));
-}
-
-/* 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;
-}
-
-/* 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-accent);
-  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;
-  }
-}
-
-/* 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;
-}
-
-/* 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-accent);
-  outline-offset: 2px;
-}
-.fds-menu__list {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  z-index: 30;
-  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: 0 10px 30px rgb(0 0 0 / 0.25);
-}
-.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;
-  }
-}
+@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

@@ -1,45 +1,4 @@
+@layer fds;
 @import "./tokens.css";
 @import "./components.css";
-.fds-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  min-height: 2.5rem;
-  padding: 0.55rem 1rem;
-  border-radius: var(--fds-radius-md);
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    background-color 0.15s,
-    border-color 0.15s;
-}
-.fds-button:focus-visible {
-  outline: 2px solid var(--fds-accent);
-  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;
-  }
-}
+@import "./components/grain.css";

package/styles/themes/funder.css

@@ -1,9 +1,77 @@
-: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;
+@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

@@ -1,9 +1,77 @@
-: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;
+@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

@@ -1,24 +1,92 @@
-: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;
-}
+@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;
+    }
+  }
 
-/* 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;
+  @media (prefers-reduced-motion: reduce) {
+    :root,
+    [data-fds-theme="portare"] {
+      --fds-duration-fast: 0s;
+      --fds-duration-base: 0s;
+    }
+  }
 }