@scalio-cloud/ui 0.0.0-stage → 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## 0.1.1
+- Published publicly on npmjs.com instead of GitHub Packages (no token needed to install). Content unchanged.
+
+## 0.1.0
+- First version: Control Room tokens (light/dark, taken 1:1 from Scalio Nexus), Tailwind preset, self-hosted
+  fonts Chivo / IBM Plex Sans / JetBrains Mono. Compiled against Nexus it gives the same CSS as Nexus's own config.

package/README.md

@@ -1,3 +1,56 @@
-# Temporary Holding Version
+# @scalio-cloud/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Shared look and feel for the Scalio apps (Nexus, Compass, Rosetta, Citadel, later Foundry and Pulse):
+the "Control Room" design tokens, a Tailwind preset and the fonts, served from the app itself.
+Spec: `spezifikation/UISPEC.md` in `Scalio-Cloud/scalio-rosetta`.
+
+| File | What it is |
+|---|---|
+| `tokens.css` | shadcn/ui CSS variables, light on `:root`, dark on `.dark` (Klein Blue `#002FA7`, radius 4px) |
+| `fonts.css` | `@font-face` for Chivo, IBM Plex Sans, JetBrains Mono (woff2, latin, SIL OFL 1.1). No Google Fonts request |
+| `base.css` | body / heading / code font families |
+| `index.css` | all three in one import |
+| `tailwind-preset.js` | colors, fonts, radius, accordion animation, `brand` colors, `h-switcher`, `h-header`, `w-sidebar` |
+| `tokens.js` | raw values for code without CSS (charts, e-mails, PDFs) |
+
+## Use it in an app (CRA/craco or Vite)
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require("@scalio-cloud/ui/tailwind-preset")],
+  content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
+  plugins: [require("tailwindcss-animate")],
+};
+```
+
+```css
+/* src/index.css, first line */
+@import "@scalio-cloud/ui/index.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Then remove the app's own `:root { --... }` / `.dark { --... }` blocks and the Google Fonts `@import` / `<link>`.
+Classes like `bg-primary`, `rounded-sm`, `font-display` keep working unchanged.
+
+## Installing
+
+Public on npmjs.com, no token needed: `yarn add @scalio-cloud/ui` (pin the exact version).
+The package holds only design values and fonts under the SIL OFL, nothing confidential.
+
+## License
+
+Design tokens and preset: (c) Scalio Cloud LLC, free to use in Scalio apps. Fonts: SIL Open Font License 1.1,
+see `fonts/licenses/`.
+
+## Release
+
+1. Change the files, add a line to `CHANGELOG.md`, bump `version` in `package.json` (semver; tag without `v`).
+2. Merge to `main`, then create the tag (e.g. `0.1.1`, GitHub Releases or `git push origin <tag>`). The `publish`
+   workflow tests and publishes that version to npmjs.com (secret `NPM_TOKEN`, npm org `scalio-cloud`).
+3. Apps update with `yarn upgrade @scalio-cloud/ui@<version>` in their own PR.
+
+`npm test` checks: light/dark variables match, the preset only uses defined variables, all font files exist,
+nothing is loaded from the network.

package/base.css

@@ -0,0 +1,12 @@
+/* Base typography of the Control Room style. Plain CSS, works with or without Tailwind. */
+body {
+  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+h1, h2, h3, h4, .font-display {
+  font-family: 'Chivo', 'IBM Plex Sans', sans-serif;
+}
+code, pre, kbd, .font-mono {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+}

package/fonts/licenses/chivo-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2019 The Chivo Project Authors (https://github.com/Omnibus-Type/Chivo) Chivo-Italic[wght].ttf: Copyright 2019 The Chivo Project Authors (https://github.com/Omnibus-Type/Chivo)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fonts/licenses/ibm-plex-sans-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2019 IBM Corp. All rights reserved. IBMPlexSans-Italic[wdth,wght].ttf: Copyright 2019 IBM Corp. All rights reserved.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fonts/licenses/jetbrains-mono-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) JetBrainsMono-Italic[wght].ttf: Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fonts.css

@@ -0,0 +1,71 @@
+/* Scalio fonts, served from the app itself (no Google Fonts request). Latin subset, SIL OFL 1.1 (see fonts/licenses). */
+@font-face {
+  font-family: 'Chivo';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./fonts/chivo-latin-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Chivo';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('./fonts/chivo-latin-700-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Chivo';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src: url('./fonts/chivo-latin-900-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url('./fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('./fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('./fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url('./fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('./fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');
+}

package/index.css

@@ -0,0 +1,4 @@
+/* Everything at once: fonts + tokens + base typography. */
+@import './fonts.css';
+@import './tokens.css';
+@import './base.css';

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Scalio Control Room design tokens, Tailwind preset and self-hosted fonts",
+  "license": "SEE LICENSE IN README.md",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Scalio-Cloud/scalio-ui.git"
+  },
+  "main": "tokens.js",
+  "exports": {
+    ".": "./tokens.js",
+    "./tokens": "./tokens.js",
+    "./tailwind-preset": "./tailwind-preset.js",
+    "./index.css": "./index.css",
+    "./tokens.css": "./tokens.css",
+    "./fonts.css": "./fonts.css",
+    "./base.css": "./base.css",
+    "./fonts/*": "./fonts/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "tokens.js",
+    "tailwind-preset.js",
+    "index.css",
+    "tokens.css",
+    "fonts.css",
+    "base.css",
+    "fonts/",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3.3 <4"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "test": "node --test test/*.test.js"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/tailwind-preset.js

@@ -0,0 +1,51 @@
+/**
+ * Tailwind preset for Scalio apps:
+ *   // tailwind.config.js
+ *   module.exports = { presets: [require("@scalio-cloud/ui/tailwind-preset")], content: [...] };
+ * Colors read the CSS variables from tokens.css, so light/dark follow the `.dark` class.
+ */
+const { brand, fonts } = require("./tokens");
+
+const v = (name) => `hsl(var(--${name}))`;
+const pair = (name) => ({ DEFAULT: v(name), foreground: v(`${name}-foreground`) });
+
+module.exports = {
+  darkMode: ["class"],
+  theme: {
+    extend: {
+      fontFamily: { ...fonts },
+      borderRadius: {
+        lg: "var(--radius)",
+        // Same steps as shadcn/ui and today's apps, so existing classes keep their look.
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      colors: {
+        background: v("background"),
+        foreground: v("foreground"),
+        card: pair("card"),
+        popover: pair("popover"),
+        primary: pair("primary"),
+        secondary: pair("secondary"),
+        muted: pair("muted"),
+        accent: pair("accent"),
+        destructive: pair("destructive"),
+        border: v("border"),
+        input: v("input"),
+        ring: v("ring"),
+        chart: { 1: v("chart-1"), 2: v("chart-2"), 3: v("chart-3"), 4: v("chart-4"), 5: v("chart-5") },
+        brand: { DEFAULT: brand.primary, hover: brand.primaryHover, danger: brand.danger },
+      },
+      height: { switcher: "var(--scalio-switcher-height)", header: "var(--scalio-header-height)" },
+      width: { sidebar: "var(--scalio-sidebar-width)" },
+      keyframes: {
+        "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" } },
+        "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" } },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+};

package/tokens.css

@@ -0,0 +1,58 @@
+/*
+ * Scalio "Control Room" design tokens (shadcn/ui CSS variables, HSL without hsl()).
+ * Source of truth: spezifikation/UISPEC.md in scalio-rosetta. Light on :root, dark on .dark.
+ * Apps import this once (before their own index.css) and drop their own :root/.dark blocks.
+ */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 240 6% 6%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 6% 6%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 6% 6%;
+  --primary: 223 100% 33%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 5% 96%;
+  --secondary-foreground: 240 6% 10%;
+  --muted: 240 5% 96%;
+  --muted-foreground: 240 4% 40%;
+  --accent: 240 5% 95%;
+  --accent-foreground: 240 6% 10%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 240 6% 90%;
+  --input: 240 6% 88%;
+  --ring: 223 100% 33%;
+  --chart-1: 223 100% 33%;
+  --chart-2: 160 84% 39%;
+  --chart-3: 38 92% 50%;
+  --chart-4: 0 72% 51%;
+  --chart-5: 262 60% 50%;
+  --radius: 0.25rem;
+  --scalio-switcher-height: 32px;
+  --scalio-header-height: 60px;
+  --scalio-sidebar-width: 240px;
+}
+
+.dark {
+  --background: 240 6% 7%;
+  --foreground: 0 0% 98%;
+  --card: 240 5% 11%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 6% 10%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 223 85% 62%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 4% 16%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 4% 16%;
+  --muted-foreground: 240 5% 65%;
+  --accent: 240 4% 18%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62% 50%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 240 4% 20%;
+  --input: 240 4% 22%;
+  --ring: 223 85% 62%;
+  color-scheme: dark;
+}

package/tokens.js

@@ -0,0 +1,18 @@
+/** Raw Scalio design values for code that cannot read CSS variables (charts, emails, PDFs). */
+const brand = {
+  primary: "#002FA7", // Klein Blue
+  primaryHover: "#002480",
+  danger: "#E53935",
+};
+
+const fonts = {
+  sans: ["IBM Plex Sans", "ui-sans-serif", "system-ui", "sans-serif"],
+  display: ["Chivo", "IBM Plex Sans", "ui-sans-serif", "sans-serif"],
+  mono: ["JetBrains Mono", "ui-monospace", "monospace"],
+};
+
+const radius = "0.25rem";
+
+const layout = { switcherHeight: 32, headerHeight: 60, sidebarWidth: 240 };
+
+module.exports = { brand, fonts, radius, layout };