@tailor-platform/app-shell 1.4.0 → 1.5.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.
- package/dist/app-shell.css +1 -1
- package/dist/app-shell.d.ts +51 -15
- package/dist/app-shell.js +3234 -3044
- package/dist/theme.css +42 -78
- package/dist/themes/_template.css +116 -0
- package/dist/themes/bloom.css +159 -0
- package/dist/themes/cream.css +159 -0
- package/dist/themes/default.css +162 -0
- package/package.json +4 -3
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Default palette — base `:root` tokens.
|
|
3
|
+
*
|
|
4
|
+
* All palettes inherit shared aliases + semantic tokens from here.
|
|
5
|
+
* Branded palettes override only palette-specific tokens; see ./_template.css.
|
|
6
|
+
*/
|
|
7
|
+
:root {
|
|
8
|
+
color-scheme: light;
|
|
9
|
+
|
|
10
|
+
/* ── 1. BRAND ─────────────────────────────────────────────────────────── */
|
|
11
|
+
--primary: rgba(23, 23, 23, 1);
|
|
12
|
+
--primary-foreground: rgba(250, 250, 250, 1);
|
|
13
|
+
--secondary: rgba(245, 245, 245, 1);
|
|
14
|
+
--secondary-foreground: rgba(23, 23, 23, 1);
|
|
15
|
+
--accent: rgb(237, 237, 237);
|
|
16
|
+
--accent-foreground: rgba(10, 10, 10, 1);
|
|
17
|
+
|
|
18
|
+
/* ── 2. SHELL GRADIENT — not used (flat palette) ──────────────────────── */
|
|
19
|
+
|
|
20
|
+
/* ── 3. SHARED ALIASES — inherited by palettes; usually leave as-is ───── */
|
|
21
|
+
--ring: color-mix(in srgb, var(--primary) 45%, transparent);
|
|
22
|
+
--sidebar-primary: var(--primary);
|
|
23
|
+
--sidebar-primary-foreground: var(--primary-foreground);
|
|
24
|
+
--sidebar-accent: var(--accent);
|
|
25
|
+
--sidebar-accent-foreground: var(--accent-foreground);
|
|
26
|
+
--sidebar-ring: var(--ring);
|
|
27
|
+
|
|
28
|
+
/* ── 4. SYSTEM ────────────────────────────────────────────────────────── */
|
|
29
|
+
--background: rgba(250, 250, 250, 1);
|
|
30
|
+
--foreground: rgba(10, 10, 10, 1);
|
|
31
|
+
--card: rgba(255, 255, 255, 1);
|
|
32
|
+
--card-foreground: rgba(10, 10, 10, 1);
|
|
33
|
+
--popover: rgba(255, 255, 255, 1);
|
|
34
|
+
--popover-foreground: rgba(10, 10, 10, 1);
|
|
35
|
+
--muted: rgba(245, 245, 245, 1);
|
|
36
|
+
--muted-foreground: rgba(115, 115, 115, 1);
|
|
37
|
+
--border: rgba(229, 229, 229, 1);
|
|
38
|
+
--input: rgba(229, 229, 229, 1);
|
|
39
|
+
--sidebar: rgba(250, 250, 250, 1);
|
|
40
|
+
--sidebar-foreground: rgba(10, 10, 10, 1);
|
|
41
|
+
--sidebar-border: rgba(229, 229, 229, 1);
|
|
42
|
+
|
|
43
|
+
/* ── 5. PALETTE ───────────────────────────────────────────────────────── */
|
|
44
|
+
--destructive: rgba(220, 38, 38, 1);
|
|
45
|
+
--destructive-foreground: rgba(254, 242, 242, 1);
|
|
46
|
+
--radius: 0.625rem;
|
|
47
|
+
--chart-1: rgba(234, 88, 12, 1);
|
|
48
|
+
--chart-2: rgba(13, 148, 136, 1);
|
|
49
|
+
--chart-3: rgba(22, 78, 99, 1);
|
|
50
|
+
--chart-4: rgba(251, 191, 36, 1);
|
|
51
|
+
--chart-5: rgba(245, 158, 11, 1);
|
|
52
|
+
--semantic-shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.06);
|
|
53
|
+
--semantic-shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.08);
|
|
54
|
+
--semantic-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.09), 0 2px 4px -2px rgb(15 23 42 / 0.06);
|
|
55
|
+
--semantic-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.12), 0 4px 6px -4px rgb(15 23 42 / 0.09);
|
|
56
|
+
|
|
57
|
+
/* ── 6. SEMANTIC — product-wide; inherited by all palettes, do not override */
|
|
58
|
+
--status-default: #737373;
|
|
59
|
+
--status-neutral: #0ea5e9;
|
|
60
|
+
--status-completed: #22c55e;
|
|
61
|
+
--status-attention: #f59e0b;
|
|
62
|
+
--status-danger: #ef4444;
|
|
63
|
+
--alert-neutral-background: var(--muted);
|
|
64
|
+
--alert-neutral-foreground: var(--foreground);
|
|
65
|
+
--alert-neutral-foreground-muted: var(--muted-foreground);
|
|
66
|
+
--alert-neutral-border: var(--border);
|
|
67
|
+
--alert-success-foreground: #15803d;
|
|
68
|
+
--alert-success-foreground-muted: color-mix(
|
|
69
|
+
in srgb,
|
|
70
|
+
var(--alert-success-foreground) 80%,
|
|
71
|
+
transparent
|
|
72
|
+
);
|
|
73
|
+
--alert-success-background: color-mix(in srgb, #22c55e 10%, transparent);
|
|
74
|
+
--alert-success-border: color-mix(in srgb, #22c55e 20%, transparent);
|
|
75
|
+
--alert-warning-foreground: #a16207;
|
|
76
|
+
--alert-warning-foreground-muted: color-mix(
|
|
77
|
+
in srgb,
|
|
78
|
+
var(--alert-warning-foreground) 80%,
|
|
79
|
+
transparent
|
|
80
|
+
);
|
|
81
|
+
--alert-warning-background: color-mix(in srgb, #eab308 10%, transparent);
|
|
82
|
+
--alert-warning-border: color-mix(in srgb, #eab308 20%, transparent);
|
|
83
|
+
--alert-error-foreground: var(--destructive);
|
|
84
|
+
--alert-error-foreground-muted: color-mix(
|
|
85
|
+
in srgb,
|
|
86
|
+
var(--alert-error-foreground) 80%,
|
|
87
|
+
transparent
|
|
88
|
+
);
|
|
89
|
+
--alert-error-background: color-mix(in srgb, var(--destructive) 10%, transparent);
|
|
90
|
+
--alert-error-border: color-mix(in srgb, var(--destructive) 20%, transparent);
|
|
91
|
+
--alert-info-foreground: #1d4ed8;
|
|
92
|
+
--alert-info-foreground-muted: color-mix(in srgb, var(--alert-info-foreground) 80%, transparent);
|
|
93
|
+
--alert-info-background: color-mix(in srgb, #3b82f6 10%, transparent);
|
|
94
|
+
--alert-info-border: color-mix(in srgb, #3b82f6 20%, transparent);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/*
|
|
98
|
+
* Dark variant. Overrides BRAND + SYSTEM (+ semantic foregrounds that differ).
|
|
99
|
+
* Shared aliases/ring re-resolve when BRAND changes; `--radius` and `--status-*`
|
|
100
|
+
* inherit from the light block.
|
|
101
|
+
*/
|
|
102
|
+
.dark {
|
|
103
|
+
color-scheme: dark;
|
|
104
|
+
|
|
105
|
+
/* ── 1. BRAND (dark) ──────────────────────────────────────────────────── */
|
|
106
|
+
--primary: rgba(229, 229, 229, 1);
|
|
107
|
+
--primary-foreground: rgba(23, 23, 23, 1);
|
|
108
|
+
--secondary: rgba(38, 38, 38, 1);
|
|
109
|
+
--secondary-foreground: rgba(250, 250, 250, 1);
|
|
110
|
+
--accent: rgb(48, 48, 48);
|
|
111
|
+
--accent-foreground: rgba(250, 250, 250, 1);
|
|
112
|
+
|
|
113
|
+
/* ── 4. SYSTEM (dark) ─────────────────────────────────────────────────── */
|
|
114
|
+
--background: rgba(10, 10, 10, 1);
|
|
115
|
+
--foreground: rgba(250, 250, 250, 1);
|
|
116
|
+
--card: rgba(23, 23, 23, 1);
|
|
117
|
+
--card-foreground: rgba(250, 250, 250, 1);
|
|
118
|
+
--popover: rgba(38, 38, 38, 1);
|
|
119
|
+
--popover-foreground: rgba(250, 250, 250, 1);
|
|
120
|
+
--muted: rgba(38, 38, 38, 1);
|
|
121
|
+
--muted-foreground: rgba(163, 163, 163, 1);
|
|
122
|
+
--border: rgba(255, 255, 255, 0.1);
|
|
123
|
+
--input: rgba(255, 255, 255, 0.15);
|
|
124
|
+
--sidebar: rgba(10, 10, 10, 1);
|
|
125
|
+
--sidebar-foreground: rgba(250, 250, 250, 1);
|
|
126
|
+
--sidebar-border: rgba(255, 255, 255, 0.1);
|
|
127
|
+
|
|
128
|
+
/* ── 5. PALETTE (dark) ────────────────────────────────────────────────── */
|
|
129
|
+
--destructive: rgba(248, 113, 113, 1);
|
|
130
|
+
--destructive-foreground: rgba(254, 242, 242, 1);
|
|
131
|
+
--chart-1: rgba(29, 78, 216, 1);
|
|
132
|
+
--chart-2: rgba(16, 185, 129, 1);
|
|
133
|
+
--chart-3: rgba(245, 158, 11, 1);
|
|
134
|
+
--chart-4: rgba(168, 85, 247, 1);
|
|
135
|
+
--chart-5: rgba(244, 63, 94, 1);
|
|
136
|
+
--semantic-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
|
|
137
|
+
--semantic-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.38), 0 1px 2px -1px rgb(0 0 0 / 0.32);
|
|
138
|
+
--semantic-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.28);
|
|
139
|
+
--semantic-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.42), 0 4px 6px -4px rgb(0 0 0 / 0.35);
|
|
140
|
+
|
|
141
|
+
/* ── 6. SEMANTIC (dark foreground adjustments) ──────────────────────── */
|
|
142
|
+
--alert-success-foreground: #86efac;
|
|
143
|
+
--alert-success-foreground-muted: color-mix(
|
|
144
|
+
in srgb,
|
|
145
|
+
var(--alert-success-foreground) 85%,
|
|
146
|
+
transparent
|
|
147
|
+
);
|
|
148
|
+
--alert-warning-foreground: #fde047;
|
|
149
|
+
--alert-warning-foreground-muted: color-mix(
|
|
150
|
+
in srgb,
|
|
151
|
+
var(--alert-warning-foreground) 85%,
|
|
152
|
+
transparent
|
|
153
|
+
);
|
|
154
|
+
--alert-error-foreground: #fca5a5;
|
|
155
|
+
--alert-error-foreground-muted: color-mix(
|
|
156
|
+
in srgb,
|
|
157
|
+
var(--alert-error-foreground) 85%,
|
|
158
|
+
transparent
|
|
159
|
+
);
|
|
160
|
+
--alert-info-foreground: #93c5fd;
|
|
161
|
+
--alert-info-foreground-muted: color-mix(in srgb, var(--alert-info-foreground) 85%, transparent);
|
|
162
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tailor-platform/app-shell",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "An opinionated React application framework for building ERP applications on Tailor Platform",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"app-shell",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"type": "module",
|
|
29
29
|
"exports": {
|
|
30
30
|
"./styles": "./dist/app-shell.css",
|
|
31
|
-
"./
|
|
31
|
+
"./themes/*": "./dist/themes/*.css",
|
|
32
32
|
".": {
|
|
33
33
|
"types": "./dist/app-shell.d.ts",
|
|
34
34
|
"default": "./dist/app-shell.js"
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@base-ui/react": "^1.5.0",
|
|
46
|
+
"@fontsource-variable/inter": "^5.0.0",
|
|
46
47
|
"@standard-schema/spec": "^1.1.0",
|
|
47
48
|
"@tailor-platform/auth-public-client": "^0.5.0",
|
|
48
49
|
"change-case": "^5.4.4",
|
|
@@ -54,7 +55,7 @@
|
|
|
54
55
|
"react-router": "^7.14.1",
|
|
55
56
|
"sonner": "^2.0.7",
|
|
56
57
|
"tailwind-merge": "^3.6.0",
|
|
57
|
-
"@tailor-platform/app-shell-vite-plugin": "0.2.
|
|
58
|
+
"@tailor-platform/app-shell-vite-plugin": "0.2.3"
|
|
58
59
|
},
|
|
59
60
|
"devDependencies": {
|
|
60
61
|
"@tailwindcss/postcss": "^4.3.0",
|