@adminiumjs/tokens 0.1.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/LICENSE +661 -0
  2. package/LICENSES/FONTS.md +17 -0
  3. package/dist/index.d.ts +66 -0
  4. package/dist/index.d.ts.map +1 -0
  5. package/dist/index.js +68 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/pre-hydration.d.ts +15 -0
  8. package/dist/pre-hydration.d.ts.map +1 -0
  9. package/dist/pre-hydration.js +24 -0
  10. package/dist/pre-hydration.js.map +1 -0
  11. package/package.json +44 -0
  12. package/src/accents.css +24 -0
  13. package/src/density.css +16 -0
  14. package/src/exceptions.css +64 -0
  15. package/src/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-400-normal.woff2 +0 -0
  16. package/src/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-500-normal.woff2 +0 -0
  17. package/src/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-600-normal.woff2 +0 -0
  18. package/src/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-700-normal.woff2 +0 -0
  19. package/src/fonts/jetbrains-mono/jetbrains-mono-latin-ext-wght-italic.woff2 +0 -0
  20. package/src/fonts/jetbrains-mono/jetbrains-mono-latin-ext-wght-normal.woff2 +0 -0
  21. package/src/fonts/jetbrains-mono/jetbrains-mono-latin-wght-italic.woff2 +0 -0
  22. package/src/fonts/jetbrains-mono/jetbrains-mono-latin-wght-normal.woff2 +0 -0
  23. package/src/fonts/manrope/manrope-latin-ext-wght-normal.woff2 +0 -0
  24. package/src/fonts/manrope/manrope-latin-wght-normal.woff2 +0 -0
  25. package/src/fonts.css +106 -0
  26. package/src/index.css +9 -0
  27. package/src/index.ts +84 -0
  28. package/src/motion.css +174 -0
  29. package/src/pre-hydration.ts +24 -0
  30. package/src/tailwind.css +63 -0
  31. package/src/tokens.css +55 -0
  32. package/src/viz.css +27 -0
package/dist/index.d.ts ADDED
@@ -0,0 +1,66 @@
1
+ /**
2
+ * @adminium/tokens — JS-side constants for the four theming axes plus the pre-hydration
3
+ * script. CSS custom properties live in the sibling .css files; these exports exist so
4
+ * ThemeProvider, Storybook toolbars, charts and the desktop shell never hard-code axis
5
+ * values. See workplan/02-design-system.md §2.5.
6
+ */
7
+ /** Theme axis. `system` resolves via `matchMedia("(prefers-color-scheme: dark)")`. */
8
+ export declare const THEMES: readonly ["light", "dark", "system"];
9
+ export type ThemePref = (typeof THEMES)[number];
10
+ /** A resolved theme as stamped on `<html data-theme>`. */
11
+ export type ResolvedTheme = Exclude<ThemePref, "system">;
12
+ /** Accent axis: the 8 switchable palettes (`data-accent`), name → hex. */
13
+ export declare const ACCENTS: {
14
+ readonly indigo: "#4f46e5";
15
+ readonly blue: "#2563eb";
16
+ readonly teal: "#0d9488";
17
+ readonly violet: "#7c3aed";
18
+ readonly rose: "#e11d48";
19
+ readonly red: "#e5484d";
20
+ readonly orange: "#ea580c";
21
+ readonly black: "#111111";
22
+ };
23
+ /** `indigo` is the default. */
24
+ export type Accent = keyof typeof ACCENTS;
25
+ /** Density axis (`data-density`). */
26
+ export declare const DENSITIES: readonly ["comfortable", "compact"];
27
+ export type Density = (typeof DENSITIES)[number];
28
+ /** Text direction axis (`dir` on `<html>`). `rtl` iff locale is `ar_EG`. */
29
+ export declare const DIRS: readonly ["ltr", "rtl"];
30
+ export type Dir = (typeof DIRS)[number];
31
+ /** Fixed 8-color categorical viz palette; series `i` gets `VIZ_PALETTE[i % 8]`. */
32
+ export declare const VIZ_PALETTE: readonly ["#4f46e5", "#0ea5e9", "#14b8a6", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899", "#22c55e"];
33
+ /** Sequential accent-ramp alphas → `--viz-ramp-1` … `--viz-ramp-6`. */
34
+ export declare const VIZ_RAMP_ALPHAS: readonly [0.12, 0.28, 0.45, 0.65, 0.85, 1];
35
+ /**
36
+ * DOM attributes stamped on `document.documentElement` — by the pre-hydration script
37
+ * before first paint and by ThemeProvider afterwards. The only place theming
38
+ * attributes are ever set.
39
+ */
40
+ export declare const THEME_ATTRIBUTES: {
41
+ readonly theme: "data-theme";
42
+ readonly accent: "data-accent";
43
+ readonly density: "data-density";
44
+ readonly dir: "dir";
45
+ readonly lang: "lang";
46
+ };
47
+ /**
48
+ * localStorage keys — a pre-paint cache of the last *resolved* values, never a
49
+ * preference source. `adminium-theme`/`adminium-dir` match the comps' own persistence.
50
+ */
51
+ export declare const STORAGE_KEYS: {
52
+ readonly theme: "adminium-theme";
53
+ readonly accent: "adminium-accent";
54
+ readonly density: "adminium-density";
55
+ readonly locale: "adminium-locale";
56
+ readonly dir: "adminium-dir";
57
+ };
58
+ /** Baseline of the preference resolution order (BRIEF §7). */
59
+ export declare const DEFAULT_PREFS: {
60
+ readonly theme: "system";
61
+ readonly accent: "indigo";
62
+ readonly density: "comfortable";
63
+ readonly locale: "en_US";
64
+ };
65
+ export { preHydrationScript } from "./pre-hydration.js";
66
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,sFAAsF;AACtF,eAAO,MAAM,MAAM,sCAAuC,CAAC;AAC3D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAChD,0DAA0D;AAC1D,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAEzD,0EAA0E;AAC1E,eAAO,MAAM,OAAO;;;;;;;;;CASV,CAAC;AACX,+BAA+B;AAC/B,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,OAAO,CAAC;AAE1C,qCAAqC;AACrC,eAAO,MAAM,SAAS,qCAAsC,CAAC;AAC7D,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD,4EAA4E;AAC5E,eAAO,MAAM,IAAI,yBAA0B,CAAC;AAC5C,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;AAExC,mFAAmF;AACnF,eAAO,MAAM,WAAW,mGASd,CAAC;AAEX,uEAAuE;AACvE,eAAO,MAAM,eAAe,4CAA6C,CAAC;AAE1E;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,8DAA8D;AAC9D,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,68 @@
1
+ /**
2
+ * @adminium/tokens — JS-side constants for the four theming axes plus the pre-hydration
3
+ * script. CSS custom properties live in the sibling .css files; these exports exist so
4
+ * ThemeProvider, Storybook toolbars, charts and the desktop shell never hard-code axis
5
+ * values. See workplan/02-design-system.md §2.5.
6
+ */
7
+ /** Theme axis. `system` resolves via `matchMedia("(prefers-color-scheme: dark)")`. */
8
+ export const THEMES = ["light", "dark", "system"];
9
+ /** Accent axis: the 8 switchable palettes (`data-accent`), name → hex. */
10
+ export const ACCENTS = {
11
+ indigo: "#4f46e5",
12
+ blue: "#2563eb",
13
+ teal: "#0d9488",
14
+ violet: "#7c3aed",
15
+ rose: "#e11d48",
16
+ red: "#e5484d",
17
+ orange: "#ea580c",
18
+ black: "#111111",
19
+ };
20
+ /** Density axis (`data-density`). */
21
+ export const DENSITIES = ["comfortable", "compact"];
22
+ /** Text direction axis (`dir` on `<html>`). `rtl` iff locale is `ar_EG`. */
23
+ export const DIRS = ["ltr", "rtl"];
24
+ /** Fixed 8-color categorical viz palette; series `i` gets `VIZ_PALETTE[i % 8]`. */
25
+ export const VIZ_PALETTE = [
26
+ "#4f46e5",
27
+ "#0ea5e9",
28
+ "#14b8a6",
29
+ "#f59e0b",
30
+ "#ef4444",
31
+ "#8b5cf6",
32
+ "#ec4899",
33
+ "#22c55e",
34
+ ];
35
+ /** Sequential accent-ramp alphas → `--viz-ramp-1` … `--viz-ramp-6`. */
36
+ export const VIZ_RAMP_ALPHAS = [0.12, 0.28, 0.45, 0.65, 0.85, 1];
37
+ /**
38
+ * DOM attributes stamped on `document.documentElement` — by the pre-hydration script
39
+ * before first paint and by ThemeProvider afterwards. The only place theming
40
+ * attributes are ever set.
41
+ */
42
+ export const THEME_ATTRIBUTES = {
43
+ theme: "data-theme",
44
+ accent: "data-accent",
45
+ density: "data-density",
46
+ dir: "dir",
47
+ lang: "lang",
48
+ };
49
+ /**
50
+ * localStorage keys — a pre-paint cache of the last *resolved* values, never a
51
+ * preference source. `adminium-theme`/`adminium-dir` match the comps' own persistence.
52
+ */
53
+ export const STORAGE_KEYS = {
54
+ theme: "adminium-theme",
55
+ accent: "adminium-accent",
56
+ density: "adminium-density",
57
+ locale: "adminium-locale",
58
+ dir: "adminium-dir",
59
+ };
60
+ /** Baseline of the preference resolution order (BRIEF §7). */
61
+ export const DEFAULT_PREFS = {
62
+ theme: "system",
63
+ accent: "indigo",
64
+ density: "comfortable",
65
+ locale: "en_US",
66
+ };
67
+ export { preHydrationScript } from "./pre-hydration.js";
68
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,sFAAsF;AACtF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAU,CAAC;AAK3D,0EAA0E;AAC1E,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,SAAS;IACd,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACR,CAAC;AAIX,qCAAqC;AACrC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,aAAa,EAAE,SAAS,CAAU,CAAC;AAG7D,4EAA4E;AAC5E,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,KAAK,CAAU,CAAC;AAG5C,mFAAmF;AACnF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACD,CAAC;AAEX,uEAAuE;AACvE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAU,CAAC;AAE1E;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,aAAa;IACrB,OAAO,EAAE,cAAc;IACvB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,gBAAgB;IACvB,MAAM,EAAE,iBAAiB;IACzB,OAAO,EAAE,kBAAkB;IAC3B,MAAM,EAAE,iBAAiB;IACzB,GAAG,EAAE,cAAc;CACX,CAAC;AAEX,8DAA8D;AAC9D,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,OAAO;CACP,CAAC;AAEX,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}
package/dist/pre-hydration.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Pre-hydration script — flash prevention. See workplan/02-design-system.md §4.3.
3
+ *
4
+ * Inlined (as a string) as the FIRST <script> in <head> of apps/dashboard/index.html,
5
+ * the Electron renderer HTML and Storybook's preview-head.html, before any stylesheet
6
+ * paints content. It reads the localStorage pre-paint cache and stamps data-theme /
7
+ * data-accent / data-density / dir / lang on <html>, resolving theme "system" via
8
+ * prefers-color-scheme. On any storage failure (private mode) it leaves the baseline paint.
9
+ *
10
+ * The storage keys and fallbacks are intentionally written out as literals so the string
11
+ * is self-contained and inline-able; test/pre-hydration.test.ts asserts they stay in
12
+ * sync with STORAGE_KEYS / DEFAULT_PREFS from ./index.js.
13
+ */
14
+ export declare const preHydrationScript: string;
15
+ //# sourceMappingURL=pre-hydration.d.ts.map
package/dist/pre-hydration.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pre-hydration.d.ts","sourceRoot":"","sources":["../src/pre-hydration.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,QAUmC,CAAC"}
package/dist/pre-hydration.js ADDED
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Pre-hydration script — flash prevention. See workplan/02-design-system.md §4.3.
3
+ *
4
+ * Inlined (as a string) as the FIRST <script> in <head> of apps/dashboard/index.html,
5
+ * the Electron renderer HTML and Storybook's preview-head.html, before any stylesheet
6
+ * paints content. It reads the localStorage pre-paint cache and stamps data-theme /
7
+ * data-accent / data-density / dir / lang on <html>, resolving theme "system" via
8
+ * prefers-color-scheme. On any storage failure (private mode) it leaves the baseline paint.
9
+ *
10
+ * The storage keys and fallbacks are intentionally written out as literals so the string
11
+ * is self-contained and inline-able; test/pre-hydration.test.ts asserts they stay in
12
+ * sync with STORAGE_KEYS / DEFAULT_PREFS from ./index.js.
13
+ */
14
+ export const preHydrationScript = '(function(){try{var d=document.documentElement,s=localStorage;' +
15
+ 'var t=s.getItem("adminium-theme")||"system";' +
16
+ 'if(t==="system")t=matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";' +
17
+ 'd.setAttribute("data-theme",t);' +
18
+ 'd.setAttribute("data-accent",s.getItem("adminium-accent")||"indigo");' +
19
+ 'd.setAttribute("data-density",s.getItem("adminium-density")||"comfortable");' +
20
+ 'var r=s.getItem("adminium-dir");' +
21
+ 'if(r==="rtl")d.setAttribute("dir","rtl");' +
22
+ 'var l=s.getItem("adminium-locale");' +
23
+ 'if(l)d.setAttribute("lang",l.replace("_","-"))}catch(e){}})();';
24
+ //# sourceMappingURL=pre-hydration.js.map
package/dist/pre-hydration.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pre-hydration.js","sourceRoot":"","sources":["../src/pre-hydration.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAC7B,gEAAgE;IAChE,8CAA8C;IAC9C,sFAAsF;IACtF,iCAAiC;IACjC,uEAAuE;IACvE,8EAA8E;IAC9E,kCAAkC;IAClC,2CAA2C;IAC3C,qCAAqC;IACrC,gEAAgE,CAAC"}
package/package.json ADDED
@@ -0,0 +1,44 @@
1
+ {
2
+ "name": "@adminiumjs/tokens",
3
+ "version": "0.1.0-rc.1",
4
+ "license": "AGPL-3.0-only",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "git+https://github.com/MoSofi/Adminium.git",
8
+ "directory": "packages/tokens"
9
+ },
10
+ "homepage": "https://adminium.dev",
11
+ "bugs": "https://github.com/MoSofi/Adminium/issues",
12
+ "type": "module",
13
+ "description": "Design tokens: CSS custom properties, accent palettes, density axis, viz palette, fonts, motion, Tailwind v4 theme mapping",
14
+ "main": "./dist/index.js",
15
+ "types": "./dist/index.d.ts",
16
+ "sideEffects": [
17
+ "*.css"
18
+ ],
19
+ "exports": {
20
+ ".": {
21
+ "types": "./dist/index.d.ts",
22
+ "default": "./dist/index.js"
23
+ },
24
+ "./pre-hydration": {
25
+ "types": "./dist/pre-hydration.d.ts",
26
+ "default": "./dist/pre-hydration.js"
27
+ },
28
+ "./index.css": "./src/index.css",
29
+ "./tokens.css": "./src/tokens.css",
30
+ "./accents.css": "./src/accents.css",
31
+ "./density.css": "./src/density.css",
32
+ "./viz.css": "./src/viz.css",
33
+ "./fonts.css": "./src/fonts.css",
34
+ "./motion.css": "./src/motion.css",
35
+ "./exceptions.css": "./src/exceptions.css",
36
+ "./tailwind.css": "./src/tailwind.css",
37
+ "./fonts/*": "./src/fonts/*"
38
+ },
39
+ "files": [
40
+ "dist",
41
+ "src",
42
+ "LICENSES"
43
+ ]
44
+ }
package/src/accents.css ADDED
@@ -0,0 +1,24 @@
1
+ /* @adminium/tokens — accent palettes + derived accent tokens. See workplan/02-design-system.md §1.2/§2.3.
2
+ Everything accent-derived is computed from the single --accent hex; switching data-accent
3
+ changes exactly one value. Derivation recipes are defined here once, never re-derived in components. */
4
+ :root,
5
+ [data-accent="indigo"] { --accent: #4f46e5; }
6
+ [data-accent="blue"] { --accent: #2563eb; }
7
+ [data-accent="teal"] { --accent: #0d9488; }
8
+ [data-accent="violet"] { --accent: #7c3aed; }
9
+ [data-accent="rose"] { --accent: #e11d48; }
10
+ [data-accent="red"] { --accent: #e5484d; }
11
+ [data-accent="orange"] { --accent: #ea580c; }
12
+ [data-accent="black"] { --accent: #111111; }
13
+
14
+ :root {
15
+ --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
16
+ --accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
17
+ --accent-selection: color-mix(in srgb, var(--accent) 22%, transparent);
18
+ --accent-border: color-mix(in srgb, var(--accent) 25%, transparent);
19
+ --accent-glow: 0 2px 8px color-mix(in srgb, var(--accent) 36%, transparent);
20
+ }
21
+
22
+ [data-theme="dark"] {
23
+ --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
24
+ }
package/src/density.css ADDED
@@ -0,0 +1,16 @@
1
+ /* @adminium/tokens — density axis (data-density). See workplan/02-design-system.md §1.8.
2
+ Two canonical densities; the comps' third "power" density is deliberately dropped. */
3
+ :root,
4
+ [data-density="comfortable"] {
5
+ --row-py: 13px;
6
+ --cell-fs: 13px;
7
+ --card-pad: 20px;
8
+ --main-pad: 26px 28px 40px;
9
+ }
10
+
11
+ [data-density="compact"] {
12
+ --row-py: 7px;
13
+ --cell-fs: 12px;
14
+ --card-pad: 16px;
15
+ --main-pad: 16px 20px 30px;
16
+ }
package/src/exceptions.css ADDED
@@ -0,0 +1,64 @@
1
+ /* @adminium/tokens — canonical theming exceptions. See workplan/02-design-system.md §6.
2
+ Two deliberate breaks from the active theme, implemented as scope classes that re-declare
3
+ the full token set on a subtree (token cascade does the rest — children need no changes).
4
+ These scopes copy canonical hand-tuned values; they do not derive them. */
5
+
6
+ /* Code/terminal surfaces are ALWAYS dark, both themes:
7
+ CodeBlock, Terminal, JsonViewer, LogBox, connection-string previews */
8
+ .adm-always-dark {
9
+ color-scheme: dark;
10
+ --bg: #0e0e13;
11
+ --surface: #0f0f14;
12
+ --surface-2: #1a1a20;
13
+ --surface-3: #24242c;
14
+ --border: rgba(255,255,255,.07);
15
+ --border-strong: rgba(255,255,255,.13);
16
+ --fg: #f4f4f6;
17
+ --fg-muted: #9a9aa6;
18
+ --fg-subtle: #6a6a76;
19
+ --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
20
+ --pos: #3ecf8e;
21
+ --pos-soft: rgba(62,207,142,.14);
22
+ --warn: #e0a458;
23
+ --warn-soft: rgba(224,164,88,.14);
24
+ --danger: #ff6b6b;
25
+ --danger-soft: rgba(255,107,107,.14);
26
+ --info: #6ea8ff;
27
+ --info-soft: rgba(110,168,255,.14);
28
+ --shadow: 0 1px 2px rgba(0,0,0,.4);
29
+ --shadow-md: 0 6px 20px rgba(0,0,0,.5);
30
+ --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
31
+ /* JSON syntax tokens (fixed, never themed) */
32
+ --code-blue: #7cc5ff;
33
+ --code-green: #8fe388;
34
+ --code-orange: #e6b673;
35
+ --code-purple: #c8a6ff;
36
+ --code-gray: #7d7d8a;
37
+ }
38
+
39
+ /* Email previews and QR tiles are ALWAYS light, both themes
40
+ (emails render in clients we don't control; QR needs dark-on-light contrast) */
41
+ .adm-always-light {
42
+ color-scheme: light;
43
+ --bg: #f6f6f8;
44
+ --surface: #ffffff;
45
+ --surface-2: #fafafa;
46
+ --surface-3: #f1f1f4;
47
+ --border: #ececef;
48
+ --border-strong: #e2e2e8;
49
+ --fg: #191920;
50
+ --fg-muted: #6b6b76;
51
+ --fg-subtle: #9a9aa5;
52
+ --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
53
+ --pos: #12805c;
54
+ --pos-soft: #e6f5ee;
55
+ --warn: #b25e09;
56
+ --warn-soft: #fbf0e2;
57
+ --danger: #d1293d;
58
+ --danger-soft: #fdecec;
59
+ --info: #2563eb;
60
+ --info-soft: #e7edfd;
61
+ --shadow: 0 1px 2px rgba(20,20,35,.04), 0 1px 3px rgba(20,20,35,.05);
62
+ --shadow-md: 0 4px 14px rgba(20,20,35,.09);
63
+ --shadow-lg: 0 12px 34px rgba(20,20,35,.13);
64
+ }
package/src/fonts.css ADDED
@@ -0,0 +1,106 @@
1
+ /* @adminium/tokens — @font-face + per-locale family stacks. See workplan/02-design-system.md §2.4.
2
+ Font binaries are unmodified upstream builds vendored from @fontsource packages into ./fonts/
3
+ by scripts/copy-fonts.mjs (never subset locally — "Plex" is an OFL Reserved Font Name).
4
+ CJK is not self-hosted; zh_CN/zh_TW use system fallback stacks (v1 policy). */
5
+
6
+ /* Manrope — variable, 400–800, all UI text */
7
+ @font-face {
8
+ font-family: "Manrope";
9
+ font-style: normal;
10
+ font-weight: 400 800;
11
+ font-display: swap;
12
+ src: url("./fonts/manrope/manrope-latin-wght-normal.woff2") format("woff2");
13
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
14
+ }
15
+ @font-face {
16
+ font-family: "Manrope";
17
+ font-style: normal;
18
+ font-weight: 400 800;
19
+ font-display: swap;
20
+ src: url("./fonts/manrope/manrope-latin-ext-wght-normal.woff2") format("woff2");
21
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
22
+ }
23
+
24
+ /* JetBrains Mono — variable + variable italic, 400–700, all numerals/code/IDs */
25
+ @font-face {
26
+ font-family: "JetBrains Mono";
27
+ font-style: normal;
28
+ font-weight: 400 700;
29
+ font-display: swap;
30
+ src: url("./fonts/jetbrains-mono/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
31
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
32
+ }
33
+ @font-face {
34
+ font-family: "JetBrains Mono";
35
+ font-style: normal;
36
+ font-weight: 400 700;
37
+ font-display: swap;
38
+ src: url("./fonts/jetbrains-mono/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
39
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
40
+ }
41
+ @font-face {
42
+ font-family: "JetBrains Mono";
43
+ font-style: italic;
44
+ font-weight: 400 700;
45
+ font-display: swap;
46
+ src: url("./fonts/jetbrains-mono/jetbrains-mono-latin-wght-italic.woff2") format("woff2");
47
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
48
+ }
49
+ @font-face {
50
+ font-family: "JetBrains Mono";
51
+ font-style: italic;
52
+ font-weight: 400 700;
53
+ font-display: swap;
54
+ src: url("./fonts/jetbrains-mono/jetbrains-mono-latin-ext-wght-italic.woff2") format("woff2");
55
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
56
+ }
57
+
58
+ /* IBM Plex Sans Arabic — static 400/500/600/700, Arabic script only (Latin falls back to Manrope) */
59
+ @font-face {
60
+ font-family: "IBM Plex Sans Arabic";
61
+ font-style: normal;
62
+ font-weight: 400;
63
+ font-display: swap;
64
+ src: url("./fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
65
+ unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
66
+ }
67
+ @font-face {
68
+ font-family: "IBM Plex Sans Arabic";
69
+ font-style: normal;
70
+ font-weight: 500;
71
+ font-display: swap;
72
+ src: url("./fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
73
+ unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
74
+ }
75
+ @font-face {
76
+ font-family: "IBM Plex Sans Arabic";
77
+ font-style: normal;
78
+ font-weight: 600;
79
+ font-display: swap;
80
+ src: url("./fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
81
+ unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
82
+ }
83
+ @font-face {
84
+ font-family: "IBM Plex Sans Arabic";
85
+ font-style: normal;
86
+ font-weight: 700;
87
+ font-display: swap;
88
+ src: url("./fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
89
+ unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
90
+ }
91
+
92
+ :root {
93
+ --font-sans: "Manrope", system-ui, sans-serif;
94
+ --font-mono: "JetBrains Mono", ui-monospace, monospace;
95
+ --font-arabic: "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif;
96
+ }
97
+
98
+ body {
99
+ font-family: var(--font-sans);
100
+ -webkit-font-smoothing: antialiased;
101
+ }
102
+
103
+ /* Locale-driven family stacks (lang attribute is set by ThemeProvider, BCP-47 form) */
104
+ html[lang="ar-EG"] body { font-family: var(--font-arabic); }
105
+ html[lang="zh-CN"] body { font-family: "Manrope", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; }
106
+ html[lang="zh-TW"] body { font-family: "Manrope", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; }
package/src/index.css ADDED
@@ -0,0 +1,9 @@
1
+ /* @adminium/tokens — convenience entrypoint: everything except the Tailwind theme mapping.
2
+ Tailwind consumers additionally import "@adminium/tokens/tailwind.css" AFTER this file. */
3
+ @import "./tokens.css";
4
+ @import "./accents.css";
5
+ @import "./density.css";
6
+ @import "./viz.css";
7
+ @import "./fonts.css";
8
+ @import "./motion.css";
9
+ @import "./exceptions.css";
package/src/index.ts ADDED
@@ -0,0 +1,84 @@
1
+ /**
2
+ * @adminium/tokens — JS-side constants for the four theming axes plus the pre-hydration
3
+ * script. CSS custom properties live in the sibling .css files; these exports exist so
4
+ * ThemeProvider, Storybook toolbars, charts and the desktop shell never hard-code axis
5
+ * values. See workplan/02-design-system.md §2.5.
6
+ */
7
+
8
+ /** Theme axis. `system` resolves via `matchMedia("(prefers-color-scheme: dark)")`. */
9
+ export const THEMES = ["light", "dark", "system"] as const;
10
+ export type ThemePref = (typeof THEMES)[number];
11
+ /** A resolved theme as stamped on `<html data-theme>`. */
12
+ export type ResolvedTheme = Exclude<ThemePref, "system">;
13
+
14
+ /** Accent axis: the 8 switchable palettes (`data-accent`), name → hex. */
15
+ export const ACCENTS = {
16
+ indigo: "#4f46e5",
17
+ blue: "#2563eb",
18
+ teal: "#0d9488",
19
+ violet: "#7c3aed",
20
+ rose: "#e11d48",
21
+ red: "#e5484d",
22
+ orange: "#ea580c",
23
+ black: "#111111",
24
+ } as const;
25
+ /** `indigo` is the default. */
26
+ export type Accent = keyof typeof ACCENTS;
27
+
28
+ /** Density axis (`data-density`). */
29
+ export const DENSITIES = ["comfortable", "compact"] as const;
30
+ export type Density = (typeof DENSITIES)[number];
31
+
32
+ /** Text direction axis (`dir` on `<html>`). `rtl` iff locale is `ar_EG`. */
33
+ export const DIRS = ["ltr", "rtl"] as const;
34
+ export type Dir = (typeof DIRS)[number];
35
+
36
+ /** Fixed 8-color categorical viz palette; series `i` gets `VIZ_PALETTE[i % 8]`. */
37
+ export const VIZ_PALETTE = [
38
+ "#4f46e5",
39
+ "#0ea5e9",
40
+ "#14b8a6",
41
+ "#f59e0b",
42
+ "#ef4444",
43
+ "#8b5cf6",
44
+ "#ec4899",
45
+ "#22c55e",
46
+ ] as const;
47
+
48
+ /** Sequential accent-ramp alphas → `--viz-ramp-1` … `--viz-ramp-6`. */
49
+ export const VIZ_RAMP_ALPHAS = [0.12, 0.28, 0.45, 0.65, 0.85, 1] as const;
50
+
51
+ /**
52
+ * DOM attributes stamped on `document.documentElement` — by the pre-hydration script
53
+ * before first paint and by ThemeProvider afterwards. The only place theming
54
+ * attributes are ever set.
55
+ */
56
+ export const THEME_ATTRIBUTES = {
57
+ theme: "data-theme",
58
+ accent: "data-accent",
59
+ density: "data-density",
60
+ dir: "dir",
61
+ lang: "lang",
62
+ } as const;
63
+
64
+ /**
65
+ * localStorage keys — a pre-paint cache of the last *resolved* values, never a
66
+ * preference source. `adminium-theme`/`adminium-dir` match the comps' own persistence.
67
+ */
68
+ export const STORAGE_KEYS = {
69
+ theme: "adminium-theme",
70
+ accent: "adminium-accent",
71
+ density: "adminium-density",
72
+ locale: "adminium-locale",
73
+ dir: "adminium-dir",
74
+ } as const;
75
+
76
+ /** Baseline of the preference resolution order (BRIEF §7). */
77
+ export const DEFAULT_PREFS = {
78
+ theme: "system",
79
+ accent: "indigo",
80
+ density: "comfortable",
81
+ locale: "en_US",
82
+ } as const;
83
+
84
+ export { preHydrationScript } from "./pre-hydration.js";