@kiefer-tek/sophea-design-system 0.15.0

package/src/tokens/tokens.json

@@ -0,0 +1,384 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Sophea Design System — tokens (light values). See colors_and_type.css for full primitive + dark + semantic + accessibility-mode definitions.",
+  "$version": "1.0.0",
+  "color": {
+    "brand": {
+      "primary-04": {
+        "$value": "#5891D0",
+        "$type": "color",
+        "$description": "Hover"
+      },
+      "primary-05": {
+        "$value": "#2E6DAD",
+        "$type": "color",
+        "$description": "Idle — the Sophea brand"
+      },
+      "primary-06": {
+        "$value": "#1F4F7B",
+        "$type": "color",
+        "$description": "Pressed"
+      },
+      "ink-100": {
+        "$value": "#143656",
+        "$type": "color"
+      },
+      "ink-95": {
+        "$value": "#1F4F7B",
+        "$type": "color"
+      },
+      "ink-90": {
+        "$value": "#2E6DAD",
+        "$type": "color"
+      }
+    },
+    "fg": {
+      "text-05": {
+        "$value": "#0f172a",
+        "$type": "color",
+        "$description": "Strong"
+      },
+      "text-04": {
+        "$value": "#475569",
+        "$type": "color",
+        "$description": "Body (default)"
+      },
+      "text-03": {
+        "$value": "#5f6d82",
+        "$type": "color",
+        "$description": "Tertiary"
+      },
+      "text-02": {
+        "$value": "#94a3b8",
+        "$type": "color",
+        "$description": "Muted — large text only"
+      },
+      "text-01": {
+        "$value": "#cbd5e1",
+        "$type": "color",
+        "$description": "Disabled / decorative"
+      },
+      "inverted-05": {
+        "$value": "#ffffff",
+        "$type": "color"
+      }
+    },
+    "surface": {
+      "s1": {
+        "$value": "#eef3fa",
+        "$type": "color",
+        "$description": "App backdrop / shell frame"
+      },
+      "s2": {
+        "$value": "#ffffff",
+        "$type": "color",
+        "$description": "Panel — workhorse"
+      },
+      "s3": {
+        "$value": "#f4f7fb",
+        "$type": "color",
+        "$description": "Inset / inputs / hover"
+      },
+      "s4": {
+        "$value": "#e2e9f5",
+        "$type": "color",
+        "$description": "Active / selected"
+      }
+    },
+    "border": {
+      "01": {
+        "$value": "#f1f5f9",
+        "$type": "color"
+      },
+      "02": {
+        "$value": "#e2e8f0",
+        "$type": "color"
+      },
+      "03": {
+        "$value": "#cbd5e1",
+        "$type": "color"
+      },
+      "04": {
+        "$value": "#7f8da1",
+        "$type": "color",
+        "$description": "Interactive boundary"
+      },
+      "05": {
+        "$value": "#0f172a",
+        "$type": "color"
+      }
+    },
+    "action": {
+      "link-06": {
+        "$value": "#1F4F7B",
+        "$type": "color"
+      },
+      "link-05": {
+        "$value": "#2E6DAD",
+        "$type": "color"
+      },
+      "link-04": {
+        "$value": "#5891D0",
+        "$type": "color"
+      },
+      "link-02": {
+        "$value": "#E5EEF6",
+        "$type": "color",
+        "$description": "Selection wash"
+      },
+      "danger-06": {
+        "$value": "#991b1b",
+        "$type": "color"
+      },
+      "danger-05": {
+        "$value": "#dc2626",
+        "$type": "color"
+      },
+      "danger-04": {
+        "$value": "#ef4444",
+        "$type": "color"
+      }
+    },
+    "status": {
+      "success-05": {
+        "$value": "#00a43f",
+        "$type": "color"
+      },
+      "info-05": {
+        "$value": "#286df8",
+        "$type": "color"
+      },
+      "warning-05": {
+        "$value": "#ec5b13",
+        "$type": "color"
+      },
+      "error-05": {
+        "$value": "#dc2626",
+        "$type": "color"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$value": "#2E6DAD",
+        "$type": "color"
+      }
+    }
+  },
+  "space": {
+    "0": {
+      "$value": "0",
+      "$type": "dimension"
+    },
+    "1": {
+      "$value": "4px",
+      "$type": "dimension"
+    },
+    "2": {
+      "$value": "8px",
+      "$type": "dimension"
+    },
+    "3": {
+      "$value": "12px",
+      "$type": "dimension"
+    },
+    "4": {
+      "$value": "16px",
+      "$type": "dimension"
+    },
+    "5": {
+      "$value": "20px",
+      "$type": "dimension"
+    },
+    "6": {
+      "$value": "24px",
+      "$type": "dimension"
+    },
+    "8": {
+      "$value": "32px",
+      "$type": "dimension"
+    },
+    "10": {
+      "$value": "40px",
+      "$type": "dimension"
+    },
+    "12": {
+      "$value": "48px",
+      "$type": "dimension"
+    },
+    "16": {
+      "$value": "64px",
+      "$type": "dimension"
+    }
+  },
+  "radius": {
+    "sm": {
+      "$value": "4px",
+      "$type": "dimension"
+    },
+    "md": {
+      "$value": "8px",
+      "$type": "dimension"
+    },
+    "lg": {
+      "$value": "12px",
+      "$type": "dimension",
+      "$description": "Cards & surfaces"
+    },
+    "xl": {
+      "$value": "16px",
+      "$type": "dimension",
+      "$description": "Outer chrome"
+    },
+    "2xl": {
+      "$value": "24px",
+      "$type": "dimension"
+    },
+    "full": {
+      "$value": "9999px",
+      "$type": "dimension"
+    }
+  },
+  "density": {
+    "row-h": {
+      "$value": "36px",
+      "$type": "dimension",
+      "$description": "Comfortable (default)"
+    },
+    "row-h-compact": {
+      "$value": "30px",
+      "$type": "dimension"
+    }
+  },
+  "motion": {
+    "duration": {
+      "instant": {
+        "$value": "0ms",
+        "$type": "duration"
+      },
+      "fast": {
+        "$value": "120ms",
+        "$type": "duration"
+      },
+      "base": {
+        "$value": "200ms",
+        "$type": "duration"
+      },
+      "slow": {
+        "$value": "320ms",
+        "$type": "duration"
+      },
+      "deliberate": {
+        "$value": "480ms",
+        "$type": "duration"
+      }
+    },
+    "easing": {
+      "out": {
+        "$value": "cubic-bezier(0.22, 0.61, 0.36, 1)",
+        "$type": "cubicBezier"
+      },
+      "in-out": {
+        "$value": "cubic-bezier(0.45, 0,    0.55, 1)",
+        "$type": "cubicBezier"
+      },
+      "spring": {
+        "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+        "$type": "cubicBezier"
+      }
+    }
+  },
+  "font": {
+    "family": {
+      "sans": {
+        "$value": "Geist, Geist Variable, ui-sans-serif, system-ui, sans-serif",
+        "$type": "fontFamily"
+      },
+      "mono": {
+        "$value": "DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace",
+        "$type": "fontFamily"
+      }
+    },
+    "size": {
+      "xs": {
+        "$value": "12px",
+        "$type": "dimension"
+      },
+      "sm": {
+        "$value": "14px",
+        "$type": "dimension"
+      },
+      "base": {
+        "$value": "16px",
+        "$type": "dimension"
+      },
+      "lg": {
+        "$value": "18px",
+        "$type": "dimension"
+      },
+      "xl": {
+        "$value": "20px",
+        "$type": "dimension"
+      },
+      "2xl": {
+        "$value": "24px",
+        "$type": "dimension"
+      },
+      "3xl": {
+        "$value": "30px",
+        "$type": "dimension"
+      },
+      "4xl": {
+        "$value": "36px",
+        "$type": "dimension"
+      }
+    },
+    "weight": {
+      "regular": {
+        "$value": 400,
+        "$type": "fontWeight"
+      },
+      "medium": {
+        "$value": 500,
+        "$type": "fontWeight"
+      },
+      "semibold": {
+        "$value": 600,
+        "$type": "fontWeight"
+      },
+      "bold": {
+        "$value": 700,
+        "$type": "fontWeight"
+      }
+    }
+  },
+  "z": {
+    "base": {
+      "$value": 0,
+      "$type": "number"
+    },
+    "raised": {
+      "$value": 10,
+      "$type": "number"
+    },
+    "sticky": {
+      "$value": 20,
+      "$type": "number"
+    },
+    "popover": {
+      "$value": 40,
+      "$type": "number"
+    },
+    "modal": {
+      "$value": 50,
+      "$type": "number"
+    },
+    "toast": {
+      "$value": 60,
+      "$type": "number"
+    },
+    "tooltip": {
+      "$value": 70,
+      "$type": "number"
+    }
+  }
+}