@rcnr/theme 1.0.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/index.css +175 -0
- package/package.json +22 -0
package/index.css
ADDED
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
/* @rcnr/theme v1.0.0
|
|
2
|
+
RCNR Brand Foundation — tokens, grid, components, scrollbars
|
|
3
|
+
|
|
4
|
+
Usage (Tailwind 4):
|
|
5
|
+
@import "tailwindcss";
|
|
6
|
+
@import "@rcnr/theme";
|
|
7
|
+
|
|
8
|
+
Usage (Tailwind 3):
|
|
9
|
+
@tailwind base;
|
|
10
|
+
@tailwind components;
|
|
11
|
+
@tailwind utilities;
|
|
12
|
+
@import "@rcnr/theme";
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/* --- Tailwind 4 theme tokens ---
|
|
16
|
+
Generates utility classes: bg-brand, text-surface, bg-midnight, etc.
|
|
17
|
+
Tailwind 3 consumers: this block is harmlessly ignored. */
|
|
18
|
+
@theme {
|
|
19
|
+
--font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
20
|
+
--font-serif: "Instrument Serif", ui-serif, Georgia, serif;
|
|
21
|
+
|
|
22
|
+
--color-brand: #99d9d9;
|
|
23
|
+
--color-brand-dark: #68A2B9;
|
|
24
|
+
--color-brand-glow: rgba(153, 217, 217, 0.15);
|
|
25
|
+
|
|
26
|
+
--color-amber: #F5A623;
|
|
27
|
+
--color-amber-hover: #FFB84D;
|
|
28
|
+
|
|
29
|
+
--color-rose: #FB7185;
|
|
30
|
+
|
|
31
|
+
--color-surface: #001628;
|
|
32
|
+
--color-surface-light: #002040;
|
|
33
|
+
--color-surface-lighter: #003058;
|
|
34
|
+
--color-midnight: #000C17;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* --- CSS custom properties (universal) ---
|
|
38
|
+
Works in Tailwind 3, Tailwind 4, and non-Tailwind contexts.
|
|
39
|
+
Shorthand names matching rcnr-site conventions. */
|
|
40
|
+
:root {
|
|
41
|
+
--deep-sea: #001628;
|
|
42
|
+
--midnight: #000C17;
|
|
43
|
+
--ice: #99D9D9;
|
|
44
|
+
--ice-muted: #68A2B9;
|
|
45
|
+
--ice-glow: rgba(153, 217, 217, 0.15);
|
|
46
|
+
--ice-subtle: #0A1E2E;
|
|
47
|
+
--amber: #F5A623;
|
|
48
|
+
--amber-hover: #FFB84D;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* --- Body: grid background --- */
|
|
52
|
+
body {
|
|
53
|
+
margin: 0;
|
|
54
|
+
color: white;
|
|
55
|
+
font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
56
|
+
-webkit-font-smoothing: antialiased;
|
|
57
|
+
-moz-osx-font-smoothing: grayscale;
|
|
58
|
+
background:
|
|
59
|
+
linear-gradient(rgba(153, 217, 217, 0.05) 1px, transparent 1px),
|
|
60
|
+
linear-gradient(90deg, rgba(153, 217, 217, 0.05) 1px, transparent 1px),
|
|
61
|
+
#001628;
|
|
62
|
+
background-size: 60px 60px, 60px 60px, auto;
|
|
63
|
+
background-attachment: fixed;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* --- Root container --- */
|
|
67
|
+
#root,
|
|
68
|
+
#__next {
|
|
69
|
+
min-height: 100vh;
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-direction: column;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* --- Glass card --- */
|
|
75
|
+
.glass-card {
|
|
76
|
+
background: #0A1E2E;
|
|
77
|
+
backdrop-filter: blur(12px);
|
|
78
|
+
-webkit-backdrop-filter: blur(12px);
|
|
79
|
+
border: 1px solid rgba(153, 217, 217, 0.15);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* --- Ice button --- */
|
|
83
|
+
.btn-ice {
|
|
84
|
+
background: linear-gradient(135deg, #99d9d9 0%, #68A2B9 100%);
|
|
85
|
+
color: #001628;
|
|
86
|
+
font-weight: 600;
|
|
87
|
+
transition: all 0.2s ease;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.btn-ice:hover {
|
|
91
|
+
box-shadow: 0 0 20px rgba(153, 217, 217, 0.4);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* --- Amber CTA button --- */
|
|
95
|
+
.btn-amber {
|
|
96
|
+
display: inline-flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
gap: 0.5rem;
|
|
99
|
+
padding: 0.625rem 1.25rem;
|
|
100
|
+
background: #F5A623;
|
|
101
|
+
border: none;
|
|
102
|
+
border-radius: 8px;
|
|
103
|
+
color: #000C17;
|
|
104
|
+
font-weight: 600;
|
|
105
|
+
font-size: 0.9rem;
|
|
106
|
+
text-decoration: none;
|
|
107
|
+
cursor: pointer;
|
|
108
|
+
transition: all 0.2s ease;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.btn-amber:hover {
|
|
112
|
+
background: #FFB84D;
|
|
113
|
+
box-shadow: 0 0 20px rgba(245, 166, 35, 0.3);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.btn-amber:disabled {
|
|
117
|
+
background: #5F6368;
|
|
118
|
+
color: #9AA0A6;
|
|
119
|
+
cursor: not-allowed;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.btn-amber:disabled:hover {
|
|
123
|
+
background: #5F6368;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* --- Ghost button (secondary) --- */
|
|
127
|
+
.btn-ghost {
|
|
128
|
+
display: inline-flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
gap: 0.4rem;
|
|
131
|
+
padding: 0.625rem 1rem;
|
|
132
|
+
background: transparent;
|
|
133
|
+
border: 1px solid rgba(153, 217, 217, 0.2);
|
|
134
|
+
border-radius: 8px;
|
|
135
|
+
color: #9AA0A6;
|
|
136
|
+
font-size: 0.85rem;
|
|
137
|
+
cursor: pointer;
|
|
138
|
+
transition: all 0.2s ease;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.btn-ghost:hover {
|
|
142
|
+
border-color: #68A2B9;
|
|
143
|
+
color: #99d9d9;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* --- Scrollbar --- */
|
|
147
|
+
::-webkit-scrollbar {
|
|
148
|
+
width: 8px;
|
|
149
|
+
height: 8px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
::-webkit-scrollbar-track {
|
|
153
|
+
background: rgba(0, 22, 40, 0.5);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
::-webkit-scrollbar-thumb {
|
|
157
|
+
background: rgba(153, 217, 217, 0.3);
|
|
158
|
+
border-radius: 4px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
::-webkit-scrollbar-thumb:hover {
|
|
162
|
+
background: rgba(153, 217, 217, 0.5);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* --- Focus ring --- */
|
|
166
|
+
*:focus-visible {
|
|
167
|
+
outline: 2px solid #99d9d9;
|
|
168
|
+
outline-offset: 2px;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* --- Fade-in animation --- */
|
|
172
|
+
@keyframes fadeIn {
|
|
173
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
174
|
+
to { opacity: 1; transform: translateY(0); }
|
|
175
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@rcnr/theme",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Shared RCNR brand CSS: tokens, glass cards, buttons, grid, scrollbars",
|
|
5
|
+
"main": "index.css",
|
|
6
|
+
"style": "index.css",
|
|
7
|
+
"files": [
|
|
8
|
+
"index.css"
|
|
9
|
+
],
|
|
10
|
+
"keywords": [
|
|
11
|
+
"rcnr",
|
|
12
|
+
"theme",
|
|
13
|
+
"css",
|
|
14
|
+
"tailwind"
|
|
15
|
+
],
|
|
16
|
+
"author": "Ryan-RCNR",
|
|
17
|
+
"license": "MIT",
|
|
18
|
+
"repository": {
|
|
19
|
+
"type": "git",
|
|
20
|
+
"url": "https://github.com/Ryan-RCNR/rcnr-theme.git"
|
|
21
|
+
}
|
|
22
|
+
}
|