@comms-id/theme 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.
@@ -0,0 +1,157 @@
1
+ {
2
+ "colors": {
3
+ "light": {
4
+ "accent": "#f5f5f5",
5
+ "accent-foreground": "#171717",
6
+ "background": "#ffffff",
7
+ "border": "#e5e5e5",
8
+ "card": "#ffffff",
9
+ "card-foreground": "#0a0a0a",
10
+ "chart-1": "#8ec5ff",
11
+ "chart-2": "#2b7fff",
12
+ "chart-3": "#155dfc",
13
+ "chart-4": "#1447e6",
14
+ "chart-5": "#193cb8",
15
+ "code": "#f8f8f8",
16
+ "code-foreground": "#0a0a0a",
17
+ "code-highlight": "#f2f2f2",
18
+ "code-number": "#747474",
19
+ "destructive": "#e7000b",
20
+ "foreground": "#0a0a0a",
21
+ "input": "#e5e5e5",
22
+ "muted": "#f5f5f5",
23
+ "muted-foreground": "#737373",
24
+ "popover": "#ffffff",
25
+ "popover-foreground": "#0a0a0a",
26
+ "primary": "#171717",
27
+ "primary-foreground": "#fafafa",
28
+ "ring": "#a1a1a1",
29
+ "secondary": "#f5f5f5",
30
+ "secondary-foreground": "#171717",
31
+ "selection": "#0a0a0a",
32
+ "selection-foreground": "#ffffff",
33
+ "sidebar": "#fafafa",
34
+ "sidebar-accent": "#f5f5f5",
35
+ "sidebar-accent-foreground": "#171717",
36
+ "sidebar-border": "#e5e5e5",
37
+ "sidebar-foreground": "#0a0a0a",
38
+ "sidebar-primary": "#171717",
39
+ "sidebar-primary-foreground": "#fafafa",
40
+ "sidebar-ring": "#a1a1a1",
41
+ "surface": "#f8f8f8",
42
+ "surface-foreground": "#0a0a0a",
43
+ "focus": "#737373",
44
+ "control-border": "#737373",
45
+ "subtle-foreground": "#666666",
46
+ "success": "#15803d",
47
+ "warning": "#92400e",
48
+ "destructive-foreground": "#ffffff"
49
+ },
50
+ "dark": {
51
+ "accent": "#404040",
52
+ "accent-foreground": "#fafafa",
53
+ "background": "#0a0a0a",
54
+ "border": "#ffffff1a",
55
+ "card": "#171717",
56
+ "card-foreground": "#fafafa",
57
+ "chart-1": "#8ec5ff",
58
+ "chart-2": "#2b7fff",
59
+ "chart-3": "#155dfc",
60
+ "chart-4": "#1447e6",
61
+ "chart-5": "#193cb8",
62
+ "code": "#161616",
63
+ "code-foreground": "#a1a1a1",
64
+ "code-highlight": "#262626",
65
+ "code-number": "#a4a4a4",
66
+ "destructive": "#ff6467",
67
+ "foreground": "#fafafa",
68
+ "input": "#ffffff26",
69
+ "muted": "#262626",
70
+ "muted-foreground": "#a1a1a1",
71
+ "popover": "#262626",
72
+ "popover-foreground": "#fafafa",
73
+ "primary": "#e5e5e5",
74
+ "primary-foreground": "#171717",
75
+ "ring": "#737373",
76
+ "secondary": "#262626",
77
+ "secondary-foreground": "#fafafa",
78
+ "selection": "#e5e5e5",
79
+ "selection-foreground": "#171717",
80
+ "sidebar": "#171717",
81
+ "sidebar-accent": "#262626",
82
+ "sidebar-accent-foreground": "#fafafa",
83
+ "sidebar-border": "#ffffff1a",
84
+ "sidebar-foreground": "#fafafa",
85
+ "sidebar-primary": "#1447e6",
86
+ "sidebar-primary-foreground": "#fafafa",
87
+ "sidebar-ring": "#525252",
88
+ "surface": "#161616",
89
+ "surface-foreground": "#a1a1a1",
90
+ "focus": "#a1a1a1",
91
+ "control-border": "#a1a1a1",
92
+ "subtle-foreground": "#b3b3b3",
93
+ "success": "#4ade80",
94
+ "warning": "#fbbf24",
95
+ "destructive-foreground": "#171717"
96
+ }
97
+ },
98
+ "spacing": {
99
+ "none": 0,
100
+ "xs": 4,
101
+ "sm": 8,
102
+ "md": 12,
103
+ "lg": 16,
104
+ "xl": 24,
105
+ "2xl": 32,
106
+ "3xl": 48,
107
+ "4xl": 64
108
+ },
109
+ "radius": {
110
+ "none": 0,
111
+ "sm": 6,
112
+ "md": 8,
113
+ "lg": 10,
114
+ "xl": 14,
115
+ "full": 9999
116
+ },
117
+ "typography": {
118
+ "size": {
119
+ "xs": 12,
120
+ "sm": 14,
121
+ "base": 16,
122
+ "lg": 18,
123
+ "xl": 20,
124
+ "2xl": 24,
125
+ "3xl": 30,
126
+ "4xl": 36,
127
+ "5xl": 48
128
+ },
129
+ "weight": {
130
+ "regular": 400,
131
+ "medium": 500,
132
+ "semibold": 600,
133
+ "bold": 700
134
+ },
135
+ "lineHeight": {
136
+ "tight": 1.25,
137
+ "normal": 1.5,
138
+ "relaxed": 1.75
139
+ }
140
+ },
141
+ "motion": {
142
+ "fast": 100,
143
+ "normal": 150,
144
+ "slow": 300,
145
+ "reduced": 0,
146
+ "easing": "cubic-bezier(0.2, 0, 0, 1)"
147
+ },
148
+ "focus": {
149
+ "width": 2,
150
+ "offset": 2
151
+ },
152
+ "fonts": {
153
+ "sans": "Geist",
154
+ "mono": "Geist Mono",
155
+ "inter": "Inter"
156
+ }
157
+ }
@@ -0,0 +1,53 @@
1
+ /* Generated by @comms-id/theme. Edit src/index.ts, then rebuild. */
2
+ @import "./tokens.css";
3
+ :root, .light, .dark, [data-theme="light"], [data-theme="dark"] {
4
+ --accent: var(--comms-id-theme-accent);
5
+ --accent-foreground: var(--comms-id-theme-accent-foreground);
6
+ --background: var(--comms-id-theme-background);
7
+ --border: var(--comms-id-theme-border);
8
+ --card: var(--comms-id-theme-card);
9
+ --card-foreground: var(--comms-id-theme-card-foreground);
10
+ --chart-1: var(--comms-id-theme-chart-1);
11
+ --chart-2: var(--comms-id-theme-chart-2);
12
+ --chart-3: var(--comms-id-theme-chart-3);
13
+ --chart-4: var(--comms-id-theme-chart-4);
14
+ --chart-5: var(--comms-id-theme-chart-5);
15
+ --code: var(--comms-id-theme-code);
16
+ --code-foreground: var(--comms-id-theme-code-foreground);
17
+ --code-highlight: var(--comms-id-theme-code-highlight);
18
+ --code-number: var(--comms-id-theme-code-number);
19
+ --destructive: var(--comms-id-theme-destructive);
20
+ --foreground: var(--comms-id-theme-foreground);
21
+ --input: var(--comms-id-theme-input);
22
+ --muted: var(--comms-id-theme-muted);
23
+ --muted-foreground: var(--comms-id-theme-muted-foreground);
24
+ --popover: var(--comms-id-theme-popover);
25
+ --popover-foreground: var(--comms-id-theme-popover-foreground);
26
+ --primary: var(--comms-id-theme-primary);
27
+ --primary-foreground: var(--comms-id-theme-primary-foreground);
28
+ --ring: var(--comms-id-theme-ring);
29
+ --secondary: var(--comms-id-theme-secondary);
30
+ --secondary-foreground: var(--comms-id-theme-secondary-foreground);
31
+ --selection: var(--comms-id-theme-selection);
32
+ --selection-foreground: var(--comms-id-theme-selection-foreground);
33
+ --sidebar: var(--comms-id-theme-sidebar);
34
+ --sidebar-accent: var(--comms-id-theme-sidebar-accent);
35
+ --sidebar-accent-foreground: var(--comms-id-theme-sidebar-accent-foreground);
36
+ --sidebar-border: var(--comms-id-theme-sidebar-border);
37
+ --sidebar-foreground: var(--comms-id-theme-sidebar-foreground);
38
+ --sidebar-primary: var(--comms-id-theme-sidebar-primary);
39
+ --sidebar-primary-foreground: var(--comms-id-theme-sidebar-primary-foreground);
40
+ --sidebar-ring: var(--comms-id-theme-sidebar-ring);
41
+ --surface: var(--comms-id-theme-surface);
42
+ --surface-foreground: var(--comms-id-theme-surface-foreground);
43
+ --focus: var(--comms-id-theme-focus);
44
+ --control-border: var(--comms-id-theme-control-border);
45
+ --subtle-foreground: var(--comms-id-theme-subtle-foreground);
46
+ --success: var(--comms-id-theme-success);
47
+ --warning: var(--comms-id-theme-warning);
48
+ --destructive-foreground: var(--comms-id-theme-destructive-foreground);
49
+ --radius: var(--comms-id-theme-radius-lg);
50
+ --font-sans: var(--comms-id-theme-font-sans);
51
+ --font-mono: var(--comms-id-theme-font-mono);
52
+ --font-inter: var(--comms-id-theme-font-inter);
53
+ }
@@ -0,0 +1,57 @@
1
+ /* Generated by @comms-id/theme. Edit src/index.ts, then rebuild. */
2
+ @import "./shadcn.css";
3
+ @theme inline {
4
+ --color-accent: var(--accent);
5
+ --color-accent-foreground: var(--accent-foreground);
6
+ --color-background: var(--background);
7
+ --color-border: var(--border);
8
+ --color-card: var(--card);
9
+ --color-card-foreground: var(--card-foreground);
10
+ --color-chart-1: var(--chart-1);
11
+ --color-chart-2: var(--chart-2);
12
+ --color-chart-3: var(--chart-3);
13
+ --color-chart-4: var(--chart-4);
14
+ --color-chart-5: var(--chart-5);
15
+ --color-code: var(--code);
16
+ --color-code-foreground: var(--code-foreground);
17
+ --color-code-highlight: var(--code-highlight);
18
+ --color-code-number: var(--code-number);
19
+ --color-destructive: var(--destructive);
20
+ --color-foreground: var(--foreground);
21
+ --color-input: var(--input);
22
+ --color-muted: var(--muted);
23
+ --color-muted-foreground: var(--muted-foreground);
24
+ --color-popover: var(--popover);
25
+ --color-popover-foreground: var(--popover-foreground);
26
+ --color-primary: var(--primary);
27
+ --color-primary-foreground: var(--primary-foreground);
28
+ --color-ring: var(--ring);
29
+ --color-secondary: var(--secondary);
30
+ --color-secondary-foreground: var(--secondary-foreground);
31
+ --color-selection: var(--selection);
32
+ --color-selection-foreground: var(--selection-foreground);
33
+ --color-sidebar: var(--sidebar);
34
+ --color-sidebar-accent: var(--sidebar-accent);
35
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
36
+ --color-sidebar-border: var(--sidebar-border);
37
+ --color-sidebar-foreground: var(--sidebar-foreground);
38
+ --color-sidebar-primary: var(--sidebar-primary);
39
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
40
+ --color-sidebar-ring: var(--sidebar-ring);
41
+ --color-surface: var(--surface);
42
+ --color-surface-foreground: var(--surface-foreground);
43
+ --color-focus: var(--focus);
44
+ --color-control-border: var(--control-border);
45
+ --color-subtle-foreground: var(--subtle-foreground);
46
+ --color-success: var(--success);
47
+ --color-warning: var(--warning);
48
+ --color-destructive-foreground: var(--destructive-foreground);
49
+ --font-sans: var(--comms-id-theme-font-sans);
50
+ --font-mono: var(--comms-id-theme-font-mono);
51
+ --radius-none: var(--comms-id-theme-radius-none);
52
+ --radius-sm: var(--comms-id-theme-radius-sm);
53
+ --radius-md: var(--comms-id-theme-radius-md);
54
+ --radius-lg: var(--comms-id-theme-radius-lg);
55
+ --radius-xl: var(--comms-id-theme-radius-xl);
56
+ --radius-full: var(--comms-id-theme-radius-full);
57
+ }
@@ -0,0 +1,144 @@
1
+ /* Generated by @comms-id/theme. Edit src/index.ts, then rebuild. */
2
+ :root {
3
+ --comms-id-theme-font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
4
+ --comms-id-theme-font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;
5
+ --comms-id-theme-font-inter: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
6
+ --comms-id-theme-space-none: 0rem;
7
+ --comms-id-theme-space-xs: 0.25rem;
8
+ --comms-id-theme-space-sm: 0.5rem;
9
+ --comms-id-theme-space-md: 0.75rem;
10
+ --comms-id-theme-space-lg: 1rem;
11
+ --comms-id-theme-space-xl: 1.5rem;
12
+ --comms-id-theme-space-2xl: 2rem;
13
+ --comms-id-theme-space-3xl: 3rem;
14
+ --comms-id-theme-space-4xl: 4rem;
15
+ --comms-id-theme-radius-none: 0rem;
16
+ --comms-id-theme-radius-sm: 0.375rem;
17
+ --comms-id-theme-radius-md: 0.5rem;
18
+ --comms-id-theme-radius-lg: 0.625rem;
19
+ --comms-id-theme-radius-xl: 0.875rem;
20
+ --comms-id-theme-radius-full: 624.9375rem;
21
+ --comms-id-theme-text-xs: 0.75rem;
22
+ --comms-id-theme-text-sm: 0.875rem;
23
+ --comms-id-theme-text-base: 1rem;
24
+ --comms-id-theme-text-lg: 1.125rem;
25
+ --comms-id-theme-text-xl: 1.25rem;
26
+ --comms-id-theme-text-2xl: 1.5rem;
27
+ --comms-id-theme-text-3xl: 1.875rem;
28
+ --comms-id-theme-text-4xl: 2.25rem;
29
+ --comms-id-theme-text-5xl: 3rem;
30
+ --comms-id-theme-weight-regular: 400;
31
+ --comms-id-theme-weight-medium: 500;
32
+ --comms-id-theme-weight-semibold: 600;
33
+ --comms-id-theme-weight-bold: 700;
34
+ --comms-id-theme-leading-tight: 1.25;
35
+ --comms-id-theme-leading-normal: 1.5;
36
+ --comms-id-theme-leading-relaxed: 1.75;
37
+ --comms-id-theme-motion-fast: 100ms;
38
+ --comms-id-theme-motion-normal: 150ms;
39
+ --comms-id-theme-motion-slow: 300ms;
40
+ --comms-id-theme-motion-easing: cubic-bezier(0.2, 0, 0, 1);
41
+ --comms-id-theme-focus-width: 2px;
42
+ --comms-id-theme-focus-offset: 2px;
43
+ }
44
+ :root, .light, [data-theme="light"] {
45
+ --comms-id-theme-accent: #f5f5f5;
46
+ --comms-id-theme-accent-foreground: #171717;
47
+ --comms-id-theme-background: #ffffff;
48
+ --comms-id-theme-border: #e5e5e5;
49
+ --comms-id-theme-card: #ffffff;
50
+ --comms-id-theme-card-foreground: #0a0a0a;
51
+ --comms-id-theme-chart-1: #8ec5ff;
52
+ --comms-id-theme-chart-2: #2b7fff;
53
+ --comms-id-theme-chart-3: #155dfc;
54
+ --comms-id-theme-chart-4: #1447e6;
55
+ --comms-id-theme-chart-5: #193cb8;
56
+ --comms-id-theme-code: #f8f8f8;
57
+ --comms-id-theme-code-foreground: #0a0a0a;
58
+ --comms-id-theme-code-highlight: #f2f2f2;
59
+ --comms-id-theme-code-number: #747474;
60
+ --comms-id-theme-destructive: #e7000b;
61
+ --comms-id-theme-foreground: #0a0a0a;
62
+ --comms-id-theme-input: #e5e5e5;
63
+ --comms-id-theme-muted: #f5f5f5;
64
+ --comms-id-theme-muted-foreground: #737373;
65
+ --comms-id-theme-popover: #ffffff;
66
+ --comms-id-theme-popover-foreground: #0a0a0a;
67
+ --comms-id-theme-primary: #171717;
68
+ --comms-id-theme-primary-foreground: #fafafa;
69
+ --comms-id-theme-ring: #a1a1a1;
70
+ --comms-id-theme-secondary: #f5f5f5;
71
+ --comms-id-theme-secondary-foreground: #171717;
72
+ --comms-id-theme-selection: #0a0a0a;
73
+ --comms-id-theme-selection-foreground: #ffffff;
74
+ --comms-id-theme-sidebar: #fafafa;
75
+ --comms-id-theme-sidebar-accent: #f5f5f5;
76
+ --comms-id-theme-sidebar-accent-foreground: #171717;
77
+ --comms-id-theme-sidebar-border: #e5e5e5;
78
+ --comms-id-theme-sidebar-foreground: #0a0a0a;
79
+ --comms-id-theme-sidebar-primary: #171717;
80
+ --comms-id-theme-sidebar-primary-foreground: #fafafa;
81
+ --comms-id-theme-sidebar-ring: #a1a1a1;
82
+ --comms-id-theme-surface: #f8f8f8;
83
+ --comms-id-theme-surface-foreground: #0a0a0a;
84
+ --comms-id-theme-focus: #737373;
85
+ --comms-id-theme-control-border: #737373;
86
+ --comms-id-theme-subtle-foreground: #666666;
87
+ --comms-id-theme-success: #15803d;
88
+ --comms-id-theme-warning: #92400e;
89
+ --comms-id-theme-destructive-foreground: #ffffff;
90
+ }
91
+ .dark, [data-theme="dark"] {
92
+ --comms-id-theme-accent: #404040;
93
+ --comms-id-theme-accent-foreground: #fafafa;
94
+ --comms-id-theme-background: #0a0a0a;
95
+ --comms-id-theme-border: #ffffff1a;
96
+ --comms-id-theme-card: #171717;
97
+ --comms-id-theme-card-foreground: #fafafa;
98
+ --comms-id-theme-chart-1: #8ec5ff;
99
+ --comms-id-theme-chart-2: #2b7fff;
100
+ --comms-id-theme-chart-3: #155dfc;
101
+ --comms-id-theme-chart-4: #1447e6;
102
+ --comms-id-theme-chart-5: #193cb8;
103
+ --comms-id-theme-code: #161616;
104
+ --comms-id-theme-code-foreground: #a1a1a1;
105
+ --comms-id-theme-code-highlight: #262626;
106
+ --comms-id-theme-code-number: #a4a4a4;
107
+ --comms-id-theme-destructive: #ff6467;
108
+ --comms-id-theme-foreground: #fafafa;
109
+ --comms-id-theme-input: #ffffff26;
110
+ --comms-id-theme-muted: #262626;
111
+ --comms-id-theme-muted-foreground: #a1a1a1;
112
+ --comms-id-theme-popover: #262626;
113
+ --comms-id-theme-popover-foreground: #fafafa;
114
+ --comms-id-theme-primary: #e5e5e5;
115
+ --comms-id-theme-primary-foreground: #171717;
116
+ --comms-id-theme-ring: #737373;
117
+ --comms-id-theme-secondary: #262626;
118
+ --comms-id-theme-secondary-foreground: #fafafa;
119
+ --comms-id-theme-selection: #e5e5e5;
120
+ --comms-id-theme-selection-foreground: #171717;
121
+ --comms-id-theme-sidebar: #171717;
122
+ --comms-id-theme-sidebar-accent: #262626;
123
+ --comms-id-theme-sidebar-accent-foreground: #fafafa;
124
+ --comms-id-theme-sidebar-border: #ffffff1a;
125
+ --comms-id-theme-sidebar-foreground: #fafafa;
126
+ --comms-id-theme-sidebar-primary: #1447e6;
127
+ --comms-id-theme-sidebar-primary-foreground: #fafafa;
128
+ --comms-id-theme-sidebar-ring: #525252;
129
+ --comms-id-theme-surface: #161616;
130
+ --comms-id-theme-surface-foreground: #a1a1a1;
131
+ --comms-id-theme-focus: #a1a1a1;
132
+ --comms-id-theme-control-border: #a1a1a1;
133
+ --comms-id-theme-subtle-foreground: #b3b3b3;
134
+ --comms-id-theme-success: #4ade80;
135
+ --comms-id-theme-warning: #fbbf24;
136
+ --comms-id-theme-destructive-foreground: #171717;
137
+ }
138
+ @media (prefers-reduced-motion: reduce) {
139
+ :root, .light, .dark, [data-theme="light"], [data-theme="dark"] {
140
+ --comms-id-theme-motion-fast: 0ms;
141
+ --comms-id-theme-motion-normal: 0ms;
142
+ --comms-id-theme-motion-slow: 0ms;
143
+ }
144
+ }
package/package.json ADDED
@@ -0,0 +1,53 @@
1
+ {
2
+ "name": "@comms-id/theme",
3
+ "version": "0.1.0",
4
+ "description": "Shared Comms.ID theme: colours, typography, spacing and component defaults",
5
+ "homepage": "https://comms.id",
6
+ "license": "SEE LICENSE IN LICENSE",
7
+ "author": "COMMS.ID PTY LTD",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/comms-id/platform.git",
11
+ "directory": "packages/theme"
12
+ },
13
+ "files": [
14
+ "dist",
15
+ "LICENSE",
16
+ "README.md"
17
+ ],
18
+ "type": "module",
19
+ "sideEffects": [
20
+ "**/*.css"
21
+ ],
22
+ "main": "./dist/index.js",
23
+ "types": "./dist/index.d.ts",
24
+ "exports": {
25
+ ".": {
26
+ "types": "./dist/index.d.ts",
27
+ "default": "./dist/index.js"
28
+ },
29
+ "./tokens.css": "./dist/tokens.css",
30
+ "./shadcn.css": "./dist/shadcn.css",
31
+ "./tailwind.css": "./dist/tailwind.css",
32
+ "./blume.css": "./dist/blume.css",
33
+ "./fonts.css": "./dist/fonts.css",
34
+ "./native.json": "./dist/native.json",
35
+ "./fonts/*": "./dist/fonts/*"
36
+ },
37
+ "publishConfig": {
38
+ "access": "public",
39
+ "registry": "https://registry.npmjs.org"
40
+ },
41
+ "devDependencies": {
42
+ "@types/node": "24.19.1",
43
+ "typescript": "7.0.2",
44
+ "vitest": "5.0.3"
45
+ },
46
+ "scripts": {
47
+ "build": "tsc -p tsconfig.build.json && node scripts/build.mjs",
48
+ "check-types": "pnpm build && tsc -p tsconfig.json --noEmit",
49
+ "test": "pnpm build && vitest run",
50
+ "lint": "pnpm build && oxlint . && oxfmt --check .",
51
+ "format": "oxfmt --write ."
52
+ }
53
+ }