@ttt-productions/theme-core 0.1.20 → 0.1.22
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/styles/base.css +8 -11
- package/dist/styles/components.css +530 -531
- package/dist/styles/contract.css +25 -25
- package/dist/styles/hooks.css +91 -92
- package/dist/styles/tokens.css +73 -74
- package/package.json +1 -1
package/dist/styles/contract.css
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
@layer base {
|
|
2
|
-
:root {
|
|
3
|
-
/* Loud fallbacks: if you see this, app did NOT define required brand tokens */
|
|
4
|
-
--brand-primary: 999 100% 50%;
|
|
5
|
-
--brand-secondary: 999 100% 50%;
|
|
6
|
-
--brand-accent: 999 100% 50%;
|
|
7
1
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
2
|
+
:root {
|
|
3
|
+
/* Loud fallbacks: if you see this, app did NOT define required brand tokens */
|
|
4
|
+
--brand-primary: 999 100% 50%;
|
|
5
|
+
--brand-secondary: 999 100% 50%;
|
|
6
|
+
--brand-accent: 999 100% 50%;
|
|
13
7
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
8
|
+
/* Status tokens: OPTIONAL (sane defaults) */
|
|
9
|
+
--status-success: 140 70% 45%;
|
|
10
|
+
--status-warning: 45 90% 50%;
|
|
11
|
+
--status-error: 0 84% 60%;
|
|
12
|
+
--status-info: 221 83% 53%;
|
|
18
13
|
|
|
19
|
-
/*
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
14
|
+
/* Neutrals */
|
|
15
|
+
--neutral-white: 0 0% 100%;
|
|
16
|
+
--neutral-black: 0 0% 0%;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* High contrast must be pure B/W: override brand + status tokens too (prevents bleed) */
|
|
20
|
+
.high-contrast {
|
|
21
|
+
--brand-primary: 0 0% 0%;
|
|
22
|
+
--brand-secondary: 0 0% 0%;
|
|
23
|
+
--brand-accent: 0 0% 100%;
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
25
|
+
--status-success: 0 0% 0%;
|
|
26
|
+
--status-warning: 0 0% 0%;
|
|
27
|
+
--status-error: 0 0% 0%;
|
|
28
|
+
--status-info: 0 0% 0%;
|
|
30
29
|
}
|
|
30
|
+
|
package/dist/styles/hooks.css
CHANGED
|
@@ -1,94 +1,93 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
2
|
+
|
|
3
|
+
/* ===================
|
|
4
|
+
BUTTONS
|
|
5
|
+
=================== */
|
|
6
|
+
.btn-destructive {
|
|
7
|
+
@apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* ===================
|
|
11
|
+
MESSAGE BUBBLES
|
|
12
|
+
=================== */
|
|
13
|
+
.msg-bubble {
|
|
14
|
+
@apply p-3 rounded-lg;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.msg-bubble--mine {
|
|
18
|
+
background-color: hsl(var(--primary) / 0.10);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.msg-bubble--theirs {
|
|
22
|
+
@apply bg-muted;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* ===================
|
|
26
|
+
STATUS PILLS
|
|
27
|
+
=================== */
|
|
28
|
+
.status-pill {
|
|
29
|
+
@apply text-xs-bold px-2 py-0.5 rounded-full;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* map to semantic tokens (no blue/yellow/green hardcodes) */
|
|
33
|
+
.status-pill--open-user {
|
|
34
|
+
background-color: hsl(var(--info) / 0.15);
|
|
35
|
+
color: hsl(var(--info-foreground));
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.status-pill--admin-reply {
|
|
39
|
+
background-color: hsl(var(--warning) / 0.20);
|
|
40
|
+
color: hsl(var(--warning-foreground));
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.status-pill--user-reply {
|
|
44
|
+
background-color: hsl(var(--success) / 0.18);
|
|
45
|
+
color: hsl(var(--success-foreground));
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.status-pill--closed {
|
|
49
|
+
@apply bg-muted text-muted-foreground;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.status-pill--default {
|
|
53
|
+
@apply bg-muted text-muted-foreground;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* ===================
|
|
57
|
+
STATUS ICONS
|
|
58
|
+
=================== */
|
|
59
|
+
.status-icon {
|
|
60
|
+
@apply h-5 w-5;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.status-icon--success { color: hsl(var(--success)); }
|
|
64
|
+
.status-icon--warning { color: hsl(var(--warning)); }
|
|
65
|
+
.status-icon--info { color: hsl(var(--info)); }
|
|
66
|
+
.status-icon--error { color: hsl(var(--destructive)); }
|
|
67
|
+
|
|
68
|
+
/* ===================
|
|
69
|
+
NOTIFICATIONS
|
|
70
|
+
=================== */
|
|
71
|
+
.notify-dot {
|
|
72
|
+
@apply absolute top-1 right-1 h-2 w-2 rounded-full;
|
|
73
|
+
background-color: hsl(var(--destructive));
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.notify-empty-icon {
|
|
77
|
+
color: hsl(var(--success));
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* ===================
|
|
81
|
+
MEDIA PREVIEW
|
|
82
|
+
=================== */
|
|
83
|
+
.media-preview {
|
|
84
|
+
@apply relative w-full h-full;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.media-preview--frame {
|
|
88
|
+
@apply w-full h-auto max-w-sm mx-auto;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.media-preview--fullwidth {
|
|
92
|
+
@apply w-full h-auto;
|
|
94
93
|
}
|
package/dist/styles/tokens.css
CHANGED
|
@@ -1,105 +1,104 @@
|
|
|
1
|
-
@layer base {
|
|
2
|
-
:root {
|
|
3
|
-
/* Semantic tokens (default = light) */
|
|
4
|
-
--background: var(--neutral-white);
|
|
5
|
-
--foreground: var(--neutral-black);
|
|
6
1
|
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
:root {
|
|
3
|
+
/* Semantic tokens (default = light) */
|
|
4
|
+
--background: var(--neutral-white);
|
|
5
|
+
--foreground: var(--neutral-black);
|
|
9
6
|
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
--card: var(--neutral-white);
|
|
8
|
+
--card-foreground: var(--neutral-black);
|
|
12
9
|
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
--popover: var(--neutral-white);
|
|
11
|
+
--popover-foreground: var(--neutral-black);
|
|
15
12
|
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
--muted: 0 0% 95%;
|
|
14
|
+
--muted-foreground: 0 0% 25%;
|
|
18
15
|
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
--accent: var(--brand-accent);
|
|
17
|
+
--accent-foreground: var(--neutral-black);
|
|
21
18
|
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
--primary: var(--brand-primary);
|
|
20
|
+
--primary-foreground: var(--neutral-white);
|
|
24
21
|
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
--secondary: var(--brand-secondary);
|
|
23
|
+
--secondary-foreground: var(--neutral-white);
|
|
27
24
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
--success-foreground: var(--neutral-white);
|
|
25
|
+
--destructive: var(--status-error);
|
|
26
|
+
--destructive-foreground: var(--neutral-white);
|
|
31
27
|
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
/* Extra semantic status colors (used by pills/toasts/etc.) */
|
|
29
|
+
--success: var(--status-success);
|
|
30
|
+
--success-foreground: var(--neutral-white);
|
|
34
31
|
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
--warning: var(--status-warning);
|
|
33
|
+
--warning-foreground: var(--neutral-black);
|
|
37
34
|
|
|
38
|
-
|
|
39
|
-
|
|
35
|
+
--info: var(--status-info);
|
|
36
|
+
--info-foreground: var(--neutral-white);
|
|
40
37
|
|
|
41
|
-
|
|
42
|
-
|
|
38
|
+
--border: var(--brand-primary);
|
|
39
|
+
--ring: var(--brand-primary);
|
|
43
40
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
41
|
+
--radius: 1rem;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.dark {
|
|
45
|
+
/* Dark base (brand tokens are still app-controlled) */
|
|
46
|
+
--background: 240 6% 10%;
|
|
47
|
+
--foreground: 0 0% 100%;
|
|
48
48
|
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
--card: 240 6% 12%;
|
|
50
|
+
--card-foreground: 0 0% 100%;
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
--popover: 240 6% 12%;
|
|
53
|
+
--popover-foreground: 0 0% 100%;
|
|
54
54
|
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
--muted: 240 4% 20%;
|
|
56
|
+
--muted-foreground: 0 0% 85%;
|
|
57
57
|
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
--border: 0 0% 100%;
|
|
59
|
+
--ring: 0 0% 100%;
|
|
60
60
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
/* status foregrounds still reasonable in dark */
|
|
62
|
+
--success-foreground: 0 0% 0%;
|
|
63
|
+
--warning-foreground: 0 0% 0%;
|
|
64
|
+
--info-foreground: 0 0% 0%;
|
|
65
|
+
}
|
|
66
66
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
67
|
+
.high-contrast {
|
|
68
|
+
/* Pure B/W semantic tokens */
|
|
69
|
+
--background: 0 0% 0%;
|
|
70
|
+
--foreground: 0 0% 100%;
|
|
71
71
|
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
--card: 0 0% 0%;
|
|
73
|
+
--card-foreground: 0 0% 100%;
|
|
74
74
|
|
|
75
|
-
|
|
76
|
-
|
|
75
|
+
--popover: 0 0% 0%;
|
|
76
|
+
--popover-foreground: 0 0% 100%;
|
|
77
77
|
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
--muted: 0 0% 0%;
|
|
79
|
+
--muted-foreground: 0 0% 100%;
|
|
80
80
|
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
--accent: 0 0% 0%;
|
|
82
|
+
--accent-foreground: 0 0% 100%;
|
|
83
83
|
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
--primary: 0 0% 100%;
|
|
85
|
+
--primary-foreground: 0 0% 0%;
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
|
|
87
|
+
--secondary: 0 0% 100%;
|
|
88
|
+
--secondary-foreground: 0 0% 0%;
|
|
89
89
|
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
--destructive: 0 0% 100%;
|
|
91
|
+
--destructive-foreground: 0 0% 0%;
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
|
|
93
|
+
--success: 0 0% 100%;
|
|
94
|
+
--success-foreground: 0 0% 0%;
|
|
95
95
|
|
|
96
|
-
|
|
97
|
-
|
|
96
|
+
--warning: 0 0% 100%;
|
|
97
|
+
--warning-foreground: 0 0% 0%;
|
|
98
98
|
|
|
99
|
-
|
|
100
|
-
|
|
99
|
+
--info: 0 0% 100%;
|
|
100
|
+
--info-foreground: 0 0% 0%;
|
|
101
101
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
}
|
|
102
|
+
--border: 0 0% 100%;
|
|
103
|
+
--ring: 0 0% 100%;
|
|
105
104
|
}
|