clairity.css 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.
- checksums.yaml +7 -0
- data/.github/workflows/main.yml +27 -0
- data/.gitignore +66 -0
- data/CHANGELOG.md +423 -0
- data/Gemfile +5 -0
- data/LICENSE.txt +373 -0
- data/README.md +170 -0
- data/Rakefile +12 -0
- data/bin/console +11 -0
- data/bin/setup +8 -0
- data/clairity.css.gemspec +51 -0
- data/lib/assets/css/clairity/base.css +951 -0
- data/lib/assets/css/clairity/classes.css +264 -0
- data/lib/assets/css/clairity/components.css +946 -0
- data/lib/assets/css/clairity/cosmetic.css +157 -0
- data/lib/assets/css/clairity/functions.css +46 -0
- data/lib/assets/css/clairity/icons.css +44 -0
- data/lib/assets/css/clairity/normalize.css +239 -0
- data/lib/assets/css/clairity/palette.css +329 -0
- data/lib/assets/css/clairity/shims.css +20 -0
- data/lib/assets/css/clairity/states.css +756 -0
- data/lib/assets/css/clairity/utilities.css +68 -0
- data/lib/assets/css/clairity/variables.css +301 -0
- data/lib/assets/css/clairity.basic.css +28 -0
- data/lib/assets/css/clairity.classless.css +50 -0
- data/lib/assets/css/clairity.css +109 -0
- data/lib/assets/images/input-image.png +0 -0
- data/lib/assets/images/logo.png +0 -0
- data/lib/assets/images/profile-avatar.png +0 -0
- data/lib/assets/js/clairity.css.js +6 -0
- data/lib/assets/media/t-rex_roar.mp3 +0 -0
- data/lib/clairity.css/version.rb +5 -0
- data/lib/clairity.css.rb +10 -0
- data/sig/clairity.css.rbs +4 -0
- data/test/test_clairity_css.rb +17 -0
- data/test/test_helper.rb +5 -0
- metadata +128 -0
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
/******************************************************************************\
|
|
2
|
+
PALETTE - this is where we define the overall color palette. This file can be
|
|
3
|
+
entirely replaced to customize the color palette of a site. In doing
|
|
4
|
+
so, be mindful of defining at least the base hues and the primary,
|
|
5
|
+
complementary, and perhaps the secondary colors.
|
|
6
|
+
|
|
7
|
+
\******************************************************************************/
|
|
8
|
+
|
|
9
|
+
/* we use :root here so other doc types like svg can inherit these variables */
|
|
10
|
+
:root {
|
|
11
|
+
/* Palette Hues - define HSL (eventually okLCH) hues in the following broad
|
|
12
|
+
categorical color names that will be used for primary, secondary, & accent
|
|
13
|
+
colors. Not all need to be defined or used. okLCH versions of these hues
|
|
14
|
+
are currently defined behind an @supports rule below. range: [0, 360] */
|
|
15
|
+
--red: 4; /* dark red / error color / secondary */
|
|
16
|
+
--brown: 20;
|
|
17
|
+
--orange: 30;
|
|
18
|
+
--yellow: 55; /* warning color */
|
|
19
|
+
--lime: 80;
|
|
20
|
+
--green: 100; /* success color */
|
|
21
|
+
--aqua: 160;
|
|
22
|
+
--cyan: 175;
|
|
23
|
+
--azure: 190;
|
|
24
|
+
--blue: 210; /* slate blue / info color / primary */
|
|
25
|
+
--indigo: 260;
|
|
26
|
+
--purple: 270;
|
|
27
|
+
--violet: 280;
|
|
28
|
+
--magenta: 300;
|
|
29
|
+
--pink: 330;
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
/* Theme Hues - map the above hues to a palette order here, with primary being
|
|
33
|
+
first, secondary being second, etc., to palettize your theme. You can pick
|
|
34
|
+
hues as primary, secondary, etc. or use complementary colors based off the
|
|
35
|
+
primary hue. */
|
|
36
|
+
--1st: var(--blue);
|
|
37
|
+
--2nd: var(--red);
|
|
38
|
+
--3rd: var(--aqua);
|
|
39
|
+
--4th: var(--orange);
|
|
40
|
+
--5th: var(--yellow);
|
|
41
|
+
--6th: var(--green);
|
|
42
|
+
--7th: var(--purple);
|
|
43
|
+
--8th: var(--magenta);
|
|
44
|
+
--9th: var(--pink);
|
|
45
|
+
|
|
46
|
+
/* programmatically specified colors based off primary - EXPERIMENTAL */
|
|
47
|
+
--complement: calc(var(--1st) + 180); /* also a tetrad */
|
|
48
|
+
--triad: calc(var(--1st) + 120);
|
|
49
|
+
--cotriad: calc(var(--1st) + 240);
|
|
50
|
+
--tetrad: calc(var(--1st) + 90);
|
|
51
|
+
--cotetrad: calc(var(--1st) + 270);
|
|
52
|
+
|
|
53
|
+
/* HSL saturations - range: [0%, 100%] */
|
|
54
|
+
--s4: 40%; /* less saturated */
|
|
55
|
+
--s5: 55%; /* default saturation level */
|
|
56
|
+
--s7: 70%; /* more saturated */
|
|
57
|
+
--s10: 100%; /* completely saturated */
|
|
58
|
+
|
|
59
|
+
/* HSL lightnesses - range: [0%, 100%] */
|
|
60
|
+
--l4: 40%; /* darker lightness */
|
|
61
|
+
--l5: 45%; /* default lightness level */
|
|
62
|
+
--l6: 50%; /* lighter lightness */
|
|
63
|
+
--l7: 67%;
|
|
64
|
+
|
|
65
|
+
/* Alpha transparency values - range: [0, 1] or [0%, 100%] */
|
|
66
|
+
--a0: 0.05; /* more transparent */
|
|
67
|
+
--a1: 0.1; /* default for nearly transparent bg's */
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
/* Named flash/form message colors - highlights are more extreme & lowlights
|
|
71
|
+
less extreme versions of the base color, relative to the color scheme */
|
|
72
|
+
--error: hsl(var(--red) 100% 43%);
|
|
73
|
+
--error-high: hsl(var(--red) 100% 80%);
|
|
74
|
+
--error-low: hsl(var(--red) 60% 38%);
|
|
75
|
+
--bg-error: hsl(var(--red) 60% 92%);
|
|
76
|
+
|
|
77
|
+
--warning: hsl(var(--yellow) 100% 40%);
|
|
78
|
+
--warning-high: hsl(var(--yellow) 100% 47%);
|
|
79
|
+
--warning-low: hsl(var(--yellow) 60% 40%);
|
|
80
|
+
--bg-warning: hsl(var(--yellow) 60% 92%);
|
|
81
|
+
|
|
82
|
+
--success: hsl(var(--green) 100% 35%);
|
|
83
|
+
--success-high: hsl(var(--green) 100% 45%);
|
|
84
|
+
--success-low: hsl(var(--green) 60% 25%);
|
|
85
|
+
--bg-success: hsl(var(--green) 60% 92%);
|
|
86
|
+
|
|
87
|
+
--info: hsl(var(--blue) 100% 45%);
|
|
88
|
+
--info-high: hsl(var(--blue) 100% 65%);
|
|
89
|
+
--info-low: hsl(var(--blue) 60% 35%);
|
|
90
|
+
--bg-info: hsl(var(--blue) 60% 92%);
|
|
91
|
+
|
|
92
|
+
/* Named (icon) state colors - highlights are more extreme & lowlights
|
|
93
|
+
less extreme versions of the base color, relative to the color scheme */
|
|
94
|
+
|
|
95
|
+
--valid: hsl(var(--green) 70% 30%);
|
|
96
|
+
--valid-high: hsl(var(--green) 80% 40%);
|
|
97
|
+
--valid-low: hsl(var(--green) 70% 25%);
|
|
98
|
+
--bg-valid: hsl(var(--green) 60% 92%);
|
|
99
|
+
|
|
100
|
+
--invalid: hsl(var(--red) 80% 35%);
|
|
101
|
+
--invalid-high: hsl(var(--red) 90% 42%);
|
|
102
|
+
--invalid-low: hsl(var(--red) 70% 30%);
|
|
103
|
+
--bg-invalid: hsl(var(--red) 60% 92%);
|
|
104
|
+
|
|
105
|
+
--unknown: hsl(var(--yellow) 100% 40%);
|
|
106
|
+
--unknown-high: hsl(var(--yellow) 100% 47%);
|
|
107
|
+
--unknown-low: hsl(var(--yellow) 60% 40%);
|
|
108
|
+
--bg-unknown: hsl(var(--yellow) 60% 92%);
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
/* Neutrals / Grayscale - use the black/white keywords for pure black/white.
|
|
112
|
+
we have two extra levels at each of the scale for greater flexibility in
|
|
113
|
+
developing shadows and highlights */
|
|
114
|
+
--10: hsl(0 0% 99%); /* effectively white */
|
|
115
|
+
--50: hsl(0 0% 97%);
|
|
116
|
+
--100: hsl(0 0% 95%);
|
|
117
|
+
--200: hsl(0 0% 86%);
|
|
118
|
+
--300: hsl(0 0% 77%);
|
|
119
|
+
--400: hsl(0 0% 68%);
|
|
120
|
+
--500: hsl(0 0% 59%);
|
|
121
|
+
--neutral: hsl(0 0% 50%);
|
|
122
|
+
--600: hsl(0 0% 41%);
|
|
123
|
+
--700: hsl(0 0% 32%);
|
|
124
|
+
--800: hsl(0 0% 23%);
|
|
125
|
+
--900: hsl(0 0% 16%);
|
|
126
|
+
--950: hsl(0 0% 10%);
|
|
127
|
+
--990: hsl(0 0% 5%); /* effectively black */
|
|
128
|
+
|
|
129
|
+
/* Primary colors */
|
|
130
|
+
--primary: hsl(var(--1st) var(--s5) var(--l5));
|
|
131
|
+
--secondary: hsl(var(--2nd) var(--s5) var(--l5));
|
|
132
|
+
--tertiary: hsl(var(--3rd) var(--s5) var(--l5));
|
|
133
|
+
|
|
134
|
+
/* Complementary colors */
|
|
135
|
+
--complementary: hsl(var(--complement) var(--s5) var(--l5));
|
|
136
|
+
--triadic: hsl(var(--triad) var(--s5) var(--l5));
|
|
137
|
+
--cotriadic: hsl(var(--cotriad) var(--s5) var(--l5));
|
|
138
|
+
--tetradic: hsl(var(--tetrad) var(--s5) var(--l5));
|
|
139
|
+
--cotetradic: hsl(var(--cotetrad) var(--s5) var(--l5));
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
/* Color scales */
|
|
143
|
+
/* HSL is not perceptually uniform, so using the same S & L values won't
|
|
144
|
+
provide natural cohesiveness to these generated colors as LCH would. */
|
|
145
|
+
--primary-100: hsl(var(--1st) var(--s5) 96%);
|
|
146
|
+
--primary-200: hsl(var(--1st) var(--s5) 90%);
|
|
147
|
+
--primary-300: hsl(var(--1st) var(--s5) 80%);
|
|
148
|
+
--primary-400: hsl(var(--1st) var(--s5) 70%);
|
|
149
|
+
--primary-500: hsl(var(--1st) var(--s5) 60%);
|
|
150
|
+
--primary-600: hsl(var(--1st) var(--s5) 50%);
|
|
151
|
+
--primary-700: hsl(var(--1st) var(--s5) 40%);
|
|
152
|
+
--primary-800: hsl(var(--1st) var(--s5) 30%);
|
|
153
|
+
--primary-900: hsl(var(--1st) var(--s5) 20%);
|
|
154
|
+
--primary-950: hsl(var(--1st) var(--s5) 10%);
|
|
155
|
+
--primary-bright: hsl(var(--1st) var(--s7) var(--l4));
|
|
156
|
+
--primary-transparent: hsl(var(--1st) var(--s5) var(--l5) / var(--a1));
|
|
157
|
+
|
|
158
|
+
/* Complementary color */
|
|
159
|
+
--complementary-100: hsl(var(--complement) var(--s5) 96%);
|
|
160
|
+
--complementary-200: hsl(var(--complement) var(--s5) 90%);
|
|
161
|
+
--complementary-300: hsl(var(--complement) var(--s5) 80%);
|
|
162
|
+
--complementary-400: hsl(var(--complement) var(--s5) 70%);
|
|
163
|
+
--complementary-500: hsl(var(--complement) var(--s5) 60%);
|
|
164
|
+
--complementary-600: hsl(var(--complement) var(--s5) 50%);
|
|
165
|
+
--complementary-700: hsl(var(--complement) var(--s5) 40%);
|
|
166
|
+
--complementary-800: hsl(var(--complement) var(--s5) 30%);
|
|
167
|
+
--complementary-900: hsl(var(--complement) var(--s5) 20%);
|
|
168
|
+
|
|
169
|
+
/* Secondary color */
|
|
170
|
+
--secondary-100: hsl(var(--2nd) var(--s5) 96%);
|
|
171
|
+
--secondary-200: hsl(var(--2nd) var(--s5) 90%);
|
|
172
|
+
--secondary-300: hsl(var(--2nd) var(--s5) 80%);
|
|
173
|
+
--secondary-400: hsl(var(--2nd) var(--s5) 70%);
|
|
174
|
+
--secondary-500: hsl(var(--2nd) var(--s5) 60%);
|
|
175
|
+
--secondary-600: hsl(var(--2nd) var(--s5) 50%);
|
|
176
|
+
--secondary-700: hsl(var(--2nd) var(--s5) 40%);
|
|
177
|
+
--secondary-800: hsl(var(--2nd) var(--s5) 30%);
|
|
178
|
+
--secondary-900: hsl(var(--2nd) var(--s5) 20%);
|
|
179
|
+
--secondary-bright: hsl(var(--2nd) var(--s7) var(--l4));
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* INCOMPLETE - LCH version for browsers that support it - safari only for now*/
|
|
183
|
+
@supports (color: oklch(1% 1 1)) {
|
|
184
|
+
:root {
|
|
185
|
+
--red: 26; /* dark red / error color */
|
|
186
|
+
--brown: 45;
|
|
187
|
+
--orange: 63;
|
|
188
|
+
--yellow: 104; /* warning color */
|
|
189
|
+
--lime: 126;
|
|
190
|
+
--green: 137; /* success color */
|
|
191
|
+
--aqua: 190;
|
|
192
|
+
--cyan: 205;
|
|
193
|
+
--azure: 214;
|
|
194
|
+
--blue: 251; /* slate blue / info / default primary*/
|
|
195
|
+
--indigo: 292;
|
|
196
|
+
--purple: 302;
|
|
197
|
+
--violet: 312;
|
|
198
|
+
--magenta: 328;
|
|
199
|
+
--pink: 354;
|
|
200
|
+
|
|
201
|
+
/* useful chroma in LCH is ~[0, 150]; in OKLCH, it's ~[0, 0.4] - percentages
|
|
202
|
+
would clamp chroma to these ranges, but is not yet implemented in safari */
|
|
203
|
+
--dullest: 0.05;
|
|
204
|
+
--duller: 0.08;
|
|
205
|
+
--dull: 0.10;
|
|
206
|
+
--chroma: 0.12; /* default */
|
|
207
|
+
--rich: 0.15;
|
|
208
|
+
--richer: 0.18;
|
|
209
|
+
--richest: 0.23;
|
|
210
|
+
|
|
211
|
+
/* chroma scale */
|
|
212
|
+
--c0: 0.010;
|
|
213
|
+
--c1: 0.030;
|
|
214
|
+
--c2: 0.050; /* dullest */
|
|
215
|
+
--c3: 0.080; /* duller */
|
|
216
|
+
--c4: 0.100; /* dull */
|
|
217
|
+
--c5: 0.120; /* default */
|
|
218
|
+
--c6: 0.150; /* rich */
|
|
219
|
+
--c7: 0.180; /* richer */
|
|
220
|
+
--c8: 0.190;
|
|
221
|
+
--c9: 0.230; /* richest */
|
|
222
|
+
|
|
223
|
+
/* lightness in LCH ranges [0, 100]; in OKLCH, it's [0, 1.0] - percentages
|
|
224
|
+
will clamp lightness to these ranges, and is implemented in safari */
|
|
225
|
+
--darken: 52%;
|
|
226
|
+
--lightness: 60%; /* default */
|
|
227
|
+
--lighten: 67%;
|
|
228
|
+
--brighten: 92%;
|
|
229
|
+
|
|
230
|
+
/* lightness scale for deriving primary color scales */
|
|
231
|
+
--l1: 99.9%;
|
|
232
|
+
--l5: 99%;
|
|
233
|
+
--l10: 96%;
|
|
234
|
+
--l15: 92%; /* brighten */
|
|
235
|
+
--l20: 90%;
|
|
236
|
+
--l30: 80%;
|
|
237
|
+
--l40: 70%;
|
|
238
|
+
--l45: 67%; /* lighten */
|
|
239
|
+
--l50: 60%; /* default */
|
|
240
|
+
--l54: 53%;
|
|
241
|
+
--l55: 52%; /* darken */
|
|
242
|
+
--l60: 50%;
|
|
243
|
+
--l65: 45%;
|
|
244
|
+
--l70: 40%;
|
|
245
|
+
--l80: 30%;
|
|
246
|
+
--l90: 20%;
|
|
247
|
+
--l95: 10%;
|
|
248
|
+
--l99: 5%;
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
/* Base Color Palette - no need for color scales with okLCH since it's support
|
|
252
|
+
implies support for CSS relative colors, so variations can be created on
|
|
253
|
+
the fly */
|
|
254
|
+
--primary: oklch(var(--l60) var(--c4) var(--1st));
|
|
255
|
+
--secondary: oklch(var(--l54) var(--c7) var(--2nd));
|
|
256
|
+
--tertiary: oklch(var(--l50) var(--c5) var(--3rd));
|
|
257
|
+
--quaternary: oklch(var(--l50) var(--c6) var(--4th));
|
|
258
|
+
--quinary: oklch(var(--l50) var(--c7) var(--5th));
|
|
259
|
+
--senary: oklch(var(--l50) var(--c7) var(--6th));
|
|
260
|
+
--septenary: oklch(var(--l50) var(--c5) var(--7th));
|
|
261
|
+
--octonary: oklch(var(--l50) var(--c6) var(--8th));
|
|
262
|
+
--nonary: oklch(var(--l50) var(--c7) var(--9th));
|
|
263
|
+
|
|
264
|
+
--complementary: oklch(var(--l50) var(--c7) var(--complement) );
|
|
265
|
+
--triadic: oklch(var(--l50) var(--c7) var(--triad) );
|
|
266
|
+
--cotriadic: oklch(var(--l50) var(--c7) var(--cotriad) );
|
|
267
|
+
--tetradic: oklch(var(--l50) var(--c7) var(--tetrad) );
|
|
268
|
+
--cotetradic: oklch(var(--l50) var(--c7) var(--cotetrad) );
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
/* Named flash/form message colors - highlights are more extreme & lowlights
|
|
272
|
+
less extreme versions of the base color, relative to the color scheme */
|
|
273
|
+
--info: oklch(var(--l50) var(--c5) var(--blue));
|
|
274
|
+
--info-high: oklch(var(--l45) var(--c5) var(--blue));
|
|
275
|
+
--info-low: oklch(var(--l55) var(--c6) var(--blue));
|
|
276
|
+
--bg-info: oklch(var(--l15) var(--c3) var(--blue));
|
|
277
|
+
|
|
278
|
+
--success: oklch(var(--l50) var(--c6) var(--green));
|
|
279
|
+
--success-high: oklch(var(--l45) var(--c6) var(--green));
|
|
280
|
+
--success-low: oklch(var(--l55) var(--c6) var(--green));
|
|
281
|
+
--bg-success: oklch(var(--l15) var(--c3) var(--green));
|
|
282
|
+
|
|
283
|
+
--warning: oklch(var(--l50) var(--c5) var(--yellow));
|
|
284
|
+
--warning-high: oklch(var(--l45) var(--c5) var(--yellow));
|
|
285
|
+
--warning-low: oklch(var(--l55) var(--c5) var(--yellow));
|
|
286
|
+
--bg-warning: oklch(var(--l15) var(--c3) var(--yellow));
|
|
287
|
+
|
|
288
|
+
--error: oklch(var(--l50) var(--c4) var(--red));
|
|
289
|
+
--error-high: oklch(var(--l45) var(--c5) var(--red));
|
|
290
|
+
--error-low: oklch(var(--l55) var(--c5) var(--red));
|
|
291
|
+
--bg-error: oklch(var(--l15) var(--c3) var(--red));
|
|
292
|
+
|
|
293
|
+
/* Neutrals / Grayscale */
|
|
294
|
+
--10: oklch(var(--l1) 0 0); /* nearly white */
|
|
295
|
+
--50: oklch(var(--l5) 0 0);
|
|
296
|
+
--100: oklch(var(--l10) 0 0);
|
|
297
|
+
--200: oklch(var(--l20) 0 0);
|
|
298
|
+
--300: oklch(var(--l30) 0 0);
|
|
299
|
+
--400: oklch(var(--l40) 0 0);
|
|
300
|
+
--500: oklch(var(--l50) 0 0);
|
|
301
|
+
--neutral: oklch(var(--l50) 0 0);
|
|
302
|
+
--600: oklch(var(--l60) 0 0);
|
|
303
|
+
--700: oklch(var(--l70) 0 0);
|
|
304
|
+
--800: oklch(var(--l80) 0 0);
|
|
305
|
+
--900: oklch(var(--l90) 0 0);
|
|
306
|
+
--950: oklch(var(--l95) 0 0);
|
|
307
|
+
--990: oklch(var(--l99) 0 0); /* nearly black */
|
|
308
|
+
|
|
309
|
+
}}
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
@media (prefers-color-scheme: dark) {
|
|
313
|
+
:root {
|
|
314
|
+
/* Calculated colors */
|
|
315
|
+
/* CSS relative colors, once implemented, can be used to generate these */
|
|
316
|
+
--error-high: hsl(var(--red) var(--s10) var(--l7));
|
|
317
|
+
--error-low: hsl(var(--red) var(--s10) var(--l4));
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
@supports (color: oklch(1% 1 1)) {
|
|
321
|
+
:root {
|
|
322
|
+
/* Calculated colors */
|
|
323
|
+
/* CSS relative colors, once implemented, can be used to generate these */
|
|
324
|
+
--error: oklch(var(--l55) var(--c7) var(--red));
|
|
325
|
+
--error-high: oklch(var(--l40) var(--c8) var(--red));
|
|
326
|
+
--error-low: oklch(var(--l65) var(--c8) var(--red));
|
|
327
|
+
}}
|
|
328
|
+
|
|
329
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/******************************************************************************\
|
|
2
|
+
SHIMS - shims are designed for less semantic but still common or workable
|
|
3
|
+
markup, which is especially useful when applying clairity.css to
|
|
4
|
+
existing websites, rather than newly built ones.
|
|
5
|
+
\******************************************************************************/
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
/* -----------------------------------------------------------------------------
|
|
10
|
+
// #card - add class-based versions of cards
|
|
11
|
+
// -------------------------------------------------------------------------- */
|
|
12
|
+
|
|
13
|
+
/* in most cases .cards should contain a set of articles, otherwise use .card */
|
|
14
|
+
.card {
|
|
15
|
+
flex: 1 0 calc((11rem - 100%) * 999);
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
column-gap: var(--m); /* gap only for side-by-side placement */
|
|
19
|
+
margin: var(--m) 0;
|
|
20
|
+
}
|