@elsapiens/styles 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.
- package/README.md +255 -0
- package/dist/backgrounds.css +892 -0
- package/dist/color-schemes.css +189 -0
- package/dist/components.css +1072 -0
- package/dist/index.css +888 -0
- package/dist/variables.css +796 -0
- package/package.json +33 -0
- package/tailwind-preset.js +130 -0
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
/* @elsapiens/sdk Color Schemes
|
|
2
|
+
*
|
|
3
|
+
* Professional color schemes inspired by popular design systems.
|
|
4
|
+
* Switch schemes by setting data-color-scheme on the html element:
|
|
5
|
+
* <html data-color-scheme="sapphire">
|
|
6
|
+
*
|
|
7
|
+
* Available schemes:
|
|
8
|
+
* - wisteria (default) - Blue-violet, professional and balanced
|
|
9
|
+
* - sapphire - Rich blue inspired by Stripe/Linear
|
|
10
|
+
* - emerald - Fresh green inspired by Spotify
|
|
11
|
+
* - amber - Warm orange-gold inspired by premium brands
|
|
12
|
+
* - rose - Elegant pink-red inspired by modern apps
|
|
13
|
+
* - slate - Neutral gray-blue for minimal interfaces
|
|
14
|
+
* - violet - Deep purple inspired by Notion/Figma
|
|
15
|
+
* - cyan - Teal-cyan inspired by Vercel/tech brands
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
/* ============================================
|
|
19
|
+
Default: Wisteria Blue
|
|
20
|
+
Professional blue-gray that's balanced and distinctive
|
|
21
|
+
Based on design system: #eef1f6 to #0c1018
|
|
22
|
+
============================================ */
|
|
23
|
+
:root,
|
|
24
|
+
[data-color-scheme="wisteria"] {
|
|
25
|
+
--wisteria-50: 218 31% 95%;
|
|
26
|
+
--wisteria-100: 218 31% 90%;
|
|
27
|
+
--wisteria-200: 218 32% 80%;
|
|
28
|
+
--wisteria-300: 218 34% 70%;
|
|
29
|
+
--wisteria-400: 218 34% 60%;
|
|
30
|
+
--wisteria-500: 218 33% 50%;
|
|
31
|
+
--wisteria-600: 218 33% 40%;
|
|
32
|
+
--wisteria-700: 218 33% 30%;
|
|
33
|
+
--wisteria-800: 218 33% 20%;
|
|
34
|
+
--wisteria-850: 218 33% 15%;
|
|
35
|
+
--wisteria-900: 218 33% 10%;
|
|
36
|
+
--wisteria-950: 220 33% 7%;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* ============================================
|
|
40
|
+
Sapphire - Rich Blue (Stripe/Linear inspired)
|
|
41
|
+
Professional, trustworthy, premium feel
|
|
42
|
+
============================================ */
|
|
43
|
+
[data-color-scheme="sapphire"] {
|
|
44
|
+
--wisteria-50: 214 100% 97%;
|
|
45
|
+
--wisteria-100: 214 95% 93%;
|
|
46
|
+
--wisteria-200: 213 97% 87%;
|
|
47
|
+
--wisteria-300: 212 96% 78%;
|
|
48
|
+
--wisteria-400: 213 94% 68%;
|
|
49
|
+
--wisteria-500: 217 91% 60%;
|
|
50
|
+
--wisteria-600: 221 83% 53%;
|
|
51
|
+
--wisteria-700: 224 76% 48%;
|
|
52
|
+
--wisteria-800: 226 71% 40%;
|
|
53
|
+
--wisteria-850: 225 68% 36%;
|
|
54
|
+
--wisteria-900: 224 64% 33%;
|
|
55
|
+
--wisteria-950: 226 57% 21%;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* ============================================
|
|
59
|
+
Emerald - Fresh Green (Spotify inspired)
|
|
60
|
+
Energetic, growth-oriented, natural
|
|
61
|
+
============================================ */
|
|
62
|
+
[data-color-scheme="emerald"] {
|
|
63
|
+
--wisteria-50: 152 81% 96%;
|
|
64
|
+
--wisteria-100: 149 80% 90%;
|
|
65
|
+
--wisteria-200: 152 76% 80%;
|
|
66
|
+
--wisteria-300: 156 72% 67%;
|
|
67
|
+
--wisteria-400: 158 64% 52%;
|
|
68
|
+
--wisteria-500: 160 84% 39%;
|
|
69
|
+
--wisteria-600: 161 94% 30%;
|
|
70
|
+
--wisteria-700: 163 94% 24%;
|
|
71
|
+
--wisteria-800: 163 88% 20%;
|
|
72
|
+
--wisteria-850: 164 87% 18%;
|
|
73
|
+
--wisteria-900: 164 86% 16%;
|
|
74
|
+
--wisteria-950: 166 91% 9%;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* ============================================
|
|
78
|
+
Amber - Warm Gold (Premium/Luxury inspired)
|
|
79
|
+
Warm, inviting, premium feel
|
|
80
|
+
============================================ */
|
|
81
|
+
[data-color-scheme="amber"] {
|
|
82
|
+
--wisteria-50: 48 100% 96%;
|
|
83
|
+
--wisteria-100: 48 96% 89%;
|
|
84
|
+
--wisteria-200: 48 97% 77%;
|
|
85
|
+
--wisteria-300: 46 97% 65%;
|
|
86
|
+
--wisteria-400: 43 96% 56%;
|
|
87
|
+
--wisteria-500: 38 92% 50%;
|
|
88
|
+
--wisteria-600: 32 95% 44%;
|
|
89
|
+
--wisteria-700: 26 90% 37%;
|
|
90
|
+
--wisteria-800: 23 83% 31%;
|
|
91
|
+
--wisteria-850: 22 80% 28%;
|
|
92
|
+
--wisteria-900: 22 78% 26%;
|
|
93
|
+
--wisteria-950: 21 80% 15%;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* ============================================
|
|
97
|
+
Rose - Elegant Pink (Modern apps inspired)
|
|
98
|
+
Bold, creative, contemporary
|
|
99
|
+
============================================ */
|
|
100
|
+
[data-color-scheme="rose"] {
|
|
101
|
+
--wisteria-50: 356 100% 97%;
|
|
102
|
+
--wisteria-100: 356 100% 95%;
|
|
103
|
+
--wisteria-200: 353 96% 90%;
|
|
104
|
+
--wisteria-300: 353 96% 82%;
|
|
105
|
+
--wisteria-400: 351 95% 71%;
|
|
106
|
+
--wisteria-500: 350 89% 60%;
|
|
107
|
+
--wisteria-600: 347 77% 50%;
|
|
108
|
+
--wisteria-700: 345 83% 41%;
|
|
109
|
+
--wisteria-800: 343 80% 35%;
|
|
110
|
+
--wisteria-850: 342 78% 32%;
|
|
111
|
+
--wisteria-900: 342 75% 30%;
|
|
112
|
+
--wisteria-950: 343 88% 16%;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* ============================================
|
|
116
|
+
Slate - Neutral Gray-Blue (GitHub inspired)
|
|
117
|
+
Minimal, professional, content-focused
|
|
118
|
+
============================================ */
|
|
119
|
+
[data-color-scheme="slate"] {
|
|
120
|
+
--wisteria-50: 210 40% 98%;
|
|
121
|
+
--wisteria-100: 210 40% 96%;
|
|
122
|
+
--wisteria-200: 214 32% 91%;
|
|
123
|
+
--wisteria-300: 213 27% 84%;
|
|
124
|
+
--wisteria-400: 215 20% 65%;
|
|
125
|
+
--wisteria-500: 215 16% 47%;
|
|
126
|
+
--wisteria-600: 215 19% 35%;
|
|
127
|
+
--wisteria-700: 215 25% 27%;
|
|
128
|
+
--wisteria-800: 217 33% 17%;
|
|
129
|
+
--wisteria-850: 220 40% 14%;
|
|
130
|
+
--wisteria-900: 222 47% 11%;
|
|
131
|
+
--wisteria-950: 229 84% 5%;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* ============================================
|
|
135
|
+
Violet - Deep Purple (Notion/Figma inspired)
|
|
136
|
+
Creative, innovative, design-forward
|
|
137
|
+
============================================ */
|
|
138
|
+
[data-color-scheme="violet"] {
|
|
139
|
+
--wisteria-50: 270 100% 98%;
|
|
140
|
+
--wisteria-100: 269 100% 95%;
|
|
141
|
+
--wisteria-200: 269 100% 92%;
|
|
142
|
+
--wisteria-300: 269 97% 85%;
|
|
143
|
+
--wisteria-400: 270 95% 75%;
|
|
144
|
+
--wisteria-500: 271 91% 65%;
|
|
145
|
+
--wisteria-600: 271 81% 56%;
|
|
146
|
+
--wisteria-700: 272 72% 47%;
|
|
147
|
+
--wisteria-800: 273 67% 39%;
|
|
148
|
+
--wisteria-850: 274 66% 35%;
|
|
149
|
+
--wisteria-900: 274 66% 32%;
|
|
150
|
+
--wisteria-950: 276 75% 18%;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* ============================================
|
|
154
|
+
Cyan - Teal (Vercel/Tech inspired)
|
|
155
|
+
Modern, tech-forward, clean
|
|
156
|
+
============================================ */
|
|
157
|
+
[data-color-scheme="cyan"] {
|
|
158
|
+
--wisteria-50: 183 100% 96%;
|
|
159
|
+
--wisteria-100: 185 96% 90%;
|
|
160
|
+
--wisteria-200: 186 94% 82%;
|
|
161
|
+
--wisteria-300: 187 92% 69%;
|
|
162
|
+
--wisteria-400: 188 86% 53%;
|
|
163
|
+
--wisteria-500: 189 94% 43%;
|
|
164
|
+
--wisteria-600: 192 91% 36%;
|
|
165
|
+
--wisteria-700: 193 82% 31%;
|
|
166
|
+
--wisteria-800: 194 70% 27%;
|
|
167
|
+
--wisteria-850: 195 67% 25%;
|
|
168
|
+
--wisteria-900: 196 64% 24%;
|
|
169
|
+
--wisteria-950: 197 79% 15%;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* ============================================
|
|
173
|
+
Indigo - Deep Blue-Purple (Discord inspired)
|
|
174
|
+
Immersive, engaging, community-oriented
|
|
175
|
+
============================================ */
|
|
176
|
+
[data-color-scheme="indigo"] {
|
|
177
|
+
--wisteria-50: 226 100% 97%;
|
|
178
|
+
--wisteria-100: 226 100% 94%;
|
|
179
|
+
--wisteria-200: 228 96% 89%;
|
|
180
|
+
--wisteria-300: 230 94% 82%;
|
|
181
|
+
--wisteria-400: 234 89% 74%;
|
|
182
|
+
--wisteria-500: 239 84% 67%;
|
|
183
|
+
--wisteria-600: 243 75% 59%;
|
|
184
|
+
--wisteria-700: 245 58% 51%;
|
|
185
|
+
--wisteria-800: 244 55% 41%;
|
|
186
|
+
--wisteria-850: 243 51% 37%;
|
|
187
|
+
--wisteria-900: 242 47% 34%;
|
|
188
|
+
--wisteria-950: 244 47% 20%;
|
|
189
|
+
}
|