@qball-inc/tokens 0.1.0

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 (5) hide show
  1. package/colors_and_type.css +454 -0
  2. package/components.css +848 -0
  3. package/package.json +36 -0
  4. package/theme.css +121 -0
  5. package/tokens.json +93 -0
package/package.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "name": "@qball-inc/tokens",
3
+ "version": "0.1.0",
4
+ "description": "QBall Design System tokens — framework-agnostic CSS custom properties, component classes, and a DTCG/Style-Dictionary JSON mirror. Zero build step; public default display face is Fira Code (Berkeley Mono restored per README in private builds).",
5
+ "keywords": [
6
+ "design-tokens",
7
+ "design-system",
8
+ "css",
9
+ "css-variables",
10
+ "css-custom-properties",
11
+ "dtcg",
12
+ "style-dictionary",
13
+ "tokens",
14
+ "theme",
15
+ "monospace"
16
+ ],
17
+ "license": "Apache-2.0",
18
+ "private": false,
19
+ "publishConfig": {
20
+ "access": "public"
21
+ },
22
+ "type": "module",
23
+ "exports": {
24
+ ".": "./tokens.json",
25
+ "./theme.css": "./theme.css",
26
+ "./colors-and-type.css": "./colors_and_type.css",
27
+ "./components.css": "./components.css",
28
+ "./tokens.json": "./tokens.json"
29
+ },
30
+ "files": [
31
+ "theme.css",
32
+ "colors_and_type.css",
33
+ "components.css",
34
+ "tokens.json"
35
+ ]
36
+ }
package/theme.css ADDED
@@ -0,0 +1,121 @@
1
+ /* ============================================================
2
+ Ashay Kubal Design System — Tailwind v4 theme
3
+ Generated from colors_and_type.css (the canonical token source).
4
+ Values mirror it EXACTLY — never re-derive a color/spacing by eye.
5
+ Light is the default; [data-theme="dark"] flips the theme (same
6
+ mechanism the CSS source uses). `prefers-color-scheme: dark` is
7
+ honored too unless [data-theme="light"] is set.
8
+
9
+ Usage in a Vite + React + Tailwind app:
10
+ @import "tailwindcss";
11
+ @import "./tokens/theme.css";
12
+ @import "./colors_and_type.css"; // optional: brings the @font-face + element styles
13
+ Then: bg-bg, bg-surface, text-fg, text-signal, border-strong,
14
+ font-display, rounded-md, text-up/text-down, ease-out, etc.
15
+ ============================================================ */
16
+
17
+ @theme {
18
+ /* ----- font families ----- */
19
+ /* Ships as Fira Code in the public repo; intended face is Berkeley Mono
20
+ (commercial, https://usgraphics.com) — restore per README. */
21
+ --font-display: "Fira Code", "SF Mono", "Cascadia Code", monospace;
22
+ --font-heading: "Fira Code", "SF Mono", "Cascadia Code", monospace;
23
+ --font-body: "Syne", "Inter", system-ui, sans-serif;
24
+ --font-ui: "Fira Code", "SF Mono", monospace;
25
+ --font-quote: "Instrument Serif", "Georgia", serif;
26
+ --font-code: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
27
+
28
+ /* ----- type scale (px) ----- */
29
+ --text-h1: 56px; --text-h2: 36px; --text-h3: 24px; --text-h4: 18px;
30
+ --text-body: 16px; --text-quote: 20px; --text-code: 14px;
31
+ --text-caption: 12px; --text-tag: 11px; --text-button: 13px;
32
+
33
+ /* ----- color: light (default) ----- */
34
+ --color-bg: #F7F3EE; /* parchment */
35
+ --color-surface: #EDE8E1;
36
+ --color-fg: #141414; /* primary text (void) */
37
+ --color-fg-secondary: #57534E; /* earth */
38
+ --color-fg-muted: #78716C; /* stone */
39
+ --color-signal: #3F6B5B; /* sage — all wayfinding */
40
+ --color-highlight: #B45309; /* amber — featured/secondary */
41
+ --color-error: #991B1B;
42
+ --color-success: #3F6B5B;
43
+ --color-warning: #B45309;
44
+ --color-info: #78716C;
45
+ --color-border-default: rgba(0,0,0,0.06);
46
+ --color-border-strong: rgba(0,0,0,0.14);
47
+ --color-signal-bg: rgba(63,107,91,0.10);
48
+ --color-highlight-bg: rgba(180,83,9,0.10);
49
+ --color-scrim: rgba(20,20,20,0.45); /* modal/overlay scrim (theme-independent) */
50
+
51
+ /* finance / data palette — SEMANTICS ONLY, never wayfinding */
52
+ --color-up: #2E7D4F; --color-down: #B5342B; --color-warn: #9A7D0F;
53
+ --color-data-info: #2C6395; --color-flat: #78716C;
54
+ --color-up-bg: rgba(46,125,79,0.10);
55
+ --color-down-bg: rgba(181,52,43,0.10);
56
+ --color-warn-bg: rgba(154,125,15,0.12);
57
+ --color-data-info-bg: rgba(44,99,149,0.10);
58
+
59
+ /* grounding annotation — deliberately outside the finance palette */
60
+ --color-anno-source: #4E6577;
61
+ --color-anno-source-bg: rgba(78,101,119,0.12);
62
+
63
+ /* ----- radii ----- (never above lg; pills are off-brand) */
64
+ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
65
+
66
+ /* ----- spacing (8px base; do not invent intermediate steps) ----- */
67
+ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px;
68
+ --spacing-lg: 32px; --spacing-xl: 64px; --spacing-2xl: 128px;
69
+
70
+ /* ----- content widths ----- */
71
+ --container-body: 720px; --container-page: 1200px;
72
+ --container-code: 800px; --container-quote: 480px;
73
+
74
+ /* ----- motion ----- */
75
+ --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
76
+ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
77
+ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 360ms;
78
+ }
79
+
80
+ /* ----- color: dark (charcoal) — set data-theme="dark" on <html> ----- */
81
+ [data-theme="dark"] {
82
+ --color-bg: #1E1D1B;
83
+ --color-surface: #2A2826;
84
+ --color-fg: #E7E0D6; /* bone */
85
+ --color-fg-secondary: #A8A29E;
86
+ --color-fg-muted: #78716C;
87
+ --color-signal: #5B9E87;
88
+ --color-highlight: #D97706;
89
+ --color-error: #EF4444;
90
+ --color-success: #5B9E87;
91
+ --color-warning: #D97706;
92
+ --color-info: #A8A29E;
93
+ --color-border-default: rgba(255,255,255,0.06);
94
+ --color-border-strong: rgba(255,255,255,0.14);
95
+ --color-signal-bg: rgba(91,158,135,0.15);
96
+ --color-highlight-bg: rgba(217,119,6,0.15);
97
+ --color-up: #4FB07A; --color-down: #E2705F; --color-warn: #D9B43C;
98
+ --color-data-info: #5B9BD6; --color-flat: #A8A29E;
99
+ --color-up-bg: rgba(79,176,122,0.15);
100
+ --color-down-bg: rgba(226,112,95,0.15);
101
+ --color-warn-bg: rgba(217,180,60,0.16);
102
+ --color-data-info-bg: rgba(91,155,214,0.15);
103
+ --color-anno-source: #93A7B5;
104
+ --color-anno-source-bg: rgba(147,167,181,0.16);
105
+ }
106
+
107
+ /* Auto dark unless explicitly light — mirrors the CSS source */
108
+ @media (prefers-color-scheme: dark) {
109
+ :root:not([data-theme="light"]) {
110
+ --color-bg: #1E1D1B; --color-surface: #2A2826;
111
+ --color-fg: #E7E0D6; --color-fg-secondary: #A8A29E; --color-fg-muted: #78716C;
112
+ --color-signal: #5B9E87; --color-highlight: #D97706;
113
+ --color-error: #EF4444; --color-success: #5B9E87; --color-warning: #D97706; --color-info: #A8A29E;
114
+ --color-border-default: rgba(255,255,255,0.06); --color-border-strong: rgba(255,255,255,0.14);
115
+ --color-signal-bg: rgba(91,158,135,0.15); --color-highlight-bg: rgba(217,119,6,0.15);
116
+ --color-up: #4FB07A; --color-down: #E2705F; --color-warn: #D9B43C; --color-data-info: #5B9BD6; --color-flat: #A8A29E;
117
+ --color-up-bg: rgba(79,176,122,0.15); --color-down-bg: rgba(226,112,95,0.15);
118
+ --color-warn-bg: rgba(217,180,60,0.16); --color-data-info-bg: rgba(91,155,214,0.15);
119
+ --color-anno-source: #93A7B5; --color-anno-source-bg: rgba(147,167,181,0.16);
120
+ }
121
+ }
package/tokens.json ADDED
@@ -0,0 +1,93 @@
1
+ {
2
+ "$schema": "https://design-tokens.github.io/community-group/format/",
3
+ "$description": "Ashay Kubal Design System tokens — Style-Dictionary / DTCG shape. Generated from colors_and_type.css (canonical). Color tokens carry both light + dark values; consume via the mode that matches data-theme.",
4
+ "$version": "1.0.0",
5
+ "font": {
6
+ "display": { "$type": "fontFamily", "$value": ["Fira Code", "SF Mono", "Cascadia Code", "monospace"], "$description": "H1–H2, tickers, prices, all numerics (tabular). Public default is Fira Code; intended face is Berkeley Mono (commercial, https://usgraphics.com) — restore per README." },
7
+ "heading": { "$type": "fontFamily", "$value": ["Fira Code", "SF Mono", "Cascadia Code", "monospace"], "$description": "H3–H4, UI, nav, buttons, captions, metadata" },
8
+ "body": { "$type": "fontFamily", "$value": ["Syne", "Inter", "system-ui", "sans-serif"], "$description": "long-form body, 16px / 1.75" },
9
+ "ui": { "$type": "fontFamily", "$value": ["Fira Code", "SF Mono", "monospace"] },
10
+ "quote": { "$type": "fontFamily", "$value": ["Instrument Serif", "Georgia", "serif"], "$description": "pull quotes (italic), max 480px" },
11
+ "code": { "$type": "fontFamily", "$value": ["JetBrains Mono", "Fira Code", "SF Mono", "monospace"] }
12
+ },
13
+ "size": {
14
+ "h1": { "$type": "dimension", "$value": "56px" },
15
+ "h2": { "$type": "dimension", "$value": "36px" },
16
+ "h3": { "$type": "dimension", "$value": "24px" },
17
+ "h4": { "$type": "dimension", "$value": "18px" },
18
+ "body": { "$type": "dimension", "$value": "16px" },
19
+ "quote": { "$type": "dimension", "$value": "20px" },
20
+ "code": { "$type": "dimension", "$value": "14px" },
21
+ "caption": { "$type": "dimension", "$value": "12px" },
22
+ "tag": { "$type": "dimension", "$value": "11px" },
23
+ "button": { "$type": "dimension", "$value": "13px" }
24
+ },
25
+ "tracking": {
26
+ "h1": { "$type": "dimension", "$value": "-2px" },
27
+ "h2": { "$type": "dimension", "$value": "-1px" },
28
+ "h3": { "$type": "dimension", "$value": "-0.5px" },
29
+ "h4": { "$type": "dimension", "$value": "0px" },
30
+ "body": { "$type": "dimension", "$value": "0px" },
31
+ "caption": { "$type": "dimension", "$value": "1.25px", "$description": "uppercase eyebrow only" }
32
+ },
33
+ "color": {
34
+ "bg": { "$type": "color", "light": "#F7F3EE", "dark": "#1E1D1B", "$description": "page background — parchment / charcoal; never pure white/black" },
35
+ "surface": { "$type": "color", "light": "#EDE8E1", "dark": "#2A2826" },
36
+ "fg": { "$type": "color", "light": "#141414", "dark": "#E7E0D6" },
37
+ "fg-secondary": { "$type": "color", "light": "#57534E", "dark": "#A8A29E" },
38
+ "fg-muted": { "$type": "color", "light": "#78716C", "dark": "#78716C" },
39
+ "signal": { "$type": "color", "light": "#3F6B5B", "dark": "#5B9E87", "$description": "sage — ALL wayfinding (links, CTAs, active, focus)" },
40
+ "highlight": { "$type": "color", "light": "#B45309", "dark": "#D97706", "$description": "amber — featured/latest, secondary CTAs, [unverified]" },
41
+ "error": { "$type": "color", "light": "#991B1B", "dark": "#EF4444" },
42
+ "success": { "$type": "color", "light": "#3F6B5B", "dark": "#5B9E87" },
43
+ "warning": { "$type": "color", "light": "#B45309", "dark": "#D97706" },
44
+ "info": { "$type": "color", "light": "#78716C", "dark": "#A8A29E" },
45
+ "border-default":{ "$type": "color", "light": "rgba(0,0,0,0.06)", "dark": "rgba(255,255,255,0.06)" },
46
+ "border-strong": { "$type": "color", "light": "rgba(0,0,0,0.14)", "dark": "rgba(255,255,255,0.14)" },
47
+ "signal-bg": { "$type": "color", "light": "rgba(63,107,91,0.10)", "dark": "rgba(91,158,135,0.15)" },
48
+ "highlight-bg": { "$type": "color", "light": "rgba(180,83,9,0.10)", "dark": "rgba(217,119,6,0.15)" }
49
+ },
50
+ "data": {
51
+ "$description": "finance/data palette — SEMANTICS ONLY (gains/losses/caution/info). Never wayfinding. Always pair with a non-color cue (arrow/sign/label).",
52
+ "up": { "$type": "color", "light": "#2E7D4F", "dark": "#4FB07A" },
53
+ "down": { "$type": "color", "light": "#B5342B", "dark": "#E2705F" },
54
+ "warn": { "$type": "color", "light": "#9A7D0F", "dark": "#D9B43C" },
55
+ "info": { "$type": "color", "light": "#2C6395", "dark": "#5B9BD6" },
56
+ "flat": { "$type": "color", "light": "#78716C", "dark": "#A8A29E" },
57
+ "up-bg": { "$type": "color", "light": "rgba(46,125,79,0.10)", "dark": "rgba(79,176,122,0.15)" },
58
+ "down-bg":{ "$type": "color", "light": "rgba(181,52,43,0.10)", "dark": "rgba(226,112,95,0.15)" },
59
+ "warn-bg":{ "$type": "color", "light": "rgba(154,125,15,0.12)", "dark": "rgba(217,180,60,0.16)" },
60
+ "info-bg":{ "$type": "color", "light": "rgba(44,99,149,0.10)", "dark": "rgba(91,155,214,0.15)" }
61
+ },
62
+ "anno": {
63
+ "$description": "grounding annotation — outside the finance palette so a cited [source] never reads as a price. Unverified uses the amber highlight.",
64
+ "source": { "$type": "color", "light": "#4E6577", "dark": "#93A7B5" },
65
+ "source-bg": { "$type": "color", "light": "rgba(78,101,119,0.12)", "dark": "rgba(147,167,181,0.16)" }
66
+ },
67
+ "radius": {
68
+ "sm": { "$type": "dimension", "$value": "4px" },
69
+ "md": { "$type": "dimension", "$value": "8px" },
70
+ "lg": { "$type": "dimension", "$value": "12px", "$description": "max radius; pills (999px) are off-brand" }
71
+ },
72
+ "space": {
73
+ "xs": { "$type": "dimension", "$value": "4px" },
74
+ "sm": { "$type": "dimension", "$value": "8px" },
75
+ "md": { "$type": "dimension", "$value": "16px" },
76
+ "lg": { "$type": "dimension", "$value": "32px" },
77
+ "xl": { "$type": "dimension", "$value": "64px" },
78
+ "2xl": { "$type": "dimension", "$value": "128px" }
79
+ },
80
+ "width": {
81
+ "body": { "$type": "dimension", "$value": "720px" },
82
+ "page": { "$type": "dimension", "$value": "1200px" },
83
+ "code": { "$type": "dimension", "$value": "800px" },
84
+ "quote": { "$type": "dimension", "$value": "480px" }
85
+ },
86
+ "motion": {
87
+ "ease-out": { "$type": "cubicBezier", "$value": [0.22, 1, 0.36, 1] },
88
+ "ease-in-out": { "$type": "cubicBezier", "$value": [0.65, 0, 0.35, 1] },
89
+ "duration-fast": { "$type": "duration", "$value": "120ms" },
90
+ "duration-base": { "$type": "duration", "$value": "200ms" },
91
+ "duration-slow": { "$type": "duration", "$value": "360ms" }
92
+ }
93
+ }