clairity.css 0.1.2 → 0.2.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 +4 -4
- data/CHANGELOG.md +227 -45
- data/README.md +5 -5
- data/lib/assets/css/clairity/base.css +13 -6
- data/lib/assets/css/clairity/classes.css +42 -104
- data/lib/assets/css/clairity/components.css +74 -45
- data/lib/assets/css/clairity/cosmetic.css +359 -5
- data/lib/assets/css/clairity/legacy.css +65 -0
- data/lib/assets/css/clairity/palette.css +308 -225
- data/lib/assets/css/clairity/states.css +3 -295
- data/lib/assets/css/clairity/utilities.css +39 -7
- data/lib/assets/css/clairity.css +4 -1
- data/lib/assets/images/fiery_sunburst.jpg +0 -0
- data/lib/clairity.css/version.rb +1 -1
- metadata +4 -2
|
@@ -2,34 +2,117 @@
|
|
|
2
2
|
PALETTE - this is where we define the overall color palette. This file can be
|
|
3
3
|
entirely replaced to customize the color palette of a site. In doing
|
|
4
4
|
so, be mindful of defining at least the base hues and the primary,
|
|
5
|
-
complementary, and perhaps the secondary colors.
|
|
6
|
-
|
|
5
|
+
complementary, and perhaps the secondary colors.
|
|
6
|
+
|
|
7
|
+
We set variables on :root so other doc types like svg can inherit
|
|
8
|
+
these variables. We'll use HSL by default, and override HSL values
|
|
9
|
+
with okLCH values for browsers that support the newer color space,
|
|
10
|
+
via an @supports query. For why we prefer okLCH where available:
|
|
11
|
+
https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
|
|
12
|
+
|
|
13
|
+
First we define scales for each color component: hue, lightness, and
|
|
14
|
+
alpha in common, saturation just for HSL, and chroma just for okLCH.
|
|
15
|
+
15 semantically-named core hues define our color palette, though not
|
|
16
|
+
all need be used. We deliberately name our hue variables with color
|
|
17
|
+
names to preclude their use in the utility style as opposed to the
|
|
18
|
+
semantic style we prefer.
|
|
19
|
+
|
|
20
|
+
HSL and okLCH hues differ, so we override the hues in the okLCH
|
|
21
|
+
section to visually match the HSL hues. You can also change or
|
|
22
|
+
override these hues to suit your own taste and needs.
|
|
23
|
+
|
|
24
|
+
We then map up to 9 of the palette hues (2 is recommended) to ranked
|
|
25
|
+
theme *hue* variables, --1st through --9th, which are in turn used
|
|
26
|
+
to create our theme *color* variables. --1st should map to the
|
|
27
|
+
primary theme *hue* (--blue by default) and will be used to
|
|
28
|
+
programmatically create complementary hues (e.g., --complement,
|
|
29
|
+
--triad, --tetrad). --2nd provides the secondary (accent) theme hue.
|
|
30
|
+
|
|
31
|
+
These hues are used to create 9 semantic color variables, --primary,
|
|
32
|
+
--secondary, etc. as well as 5 complementary color variables,
|
|
33
|
+
--complementary, --triadic, etc. Most sites will only use the
|
|
34
|
+
--primary color, with sparing use of --secondary and/or
|
|
35
|
+
--complementary, if at all. Only complex or extensive sites will
|
|
36
|
+
need more than these three core theme colors (beyond the included
|
|
37
|
+
grayscale and semantic messaging/state colors).
|
|
38
|
+
|
|
39
|
+
Finally, we create color scales for each core theme color. In the
|
|
40
|
+
future, we hope CSS Relative Color syntax will allow us to skip this
|
|
41
|
+
step of creating color scales, and just directly apply color
|
|
42
|
+
component scales on the base color as needed. As noted, we also
|
|
43
|
+
provide a neutral/gray scale and a few semantic color sets (--error,
|
|
44
|
+
--warning, --success, --info, --valid, --invalid, --unknown) too.
|
|
45
|
+
|
|
7
46
|
\******************************************************************************/
|
|
8
47
|
|
|
9
|
-
/* we use :root here so other doc types like svg can inherit these variables */
|
|
10
48
|
:root {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
49
|
+
|
|
50
|
+
/* -----------------------------------------------------------------------------
|
|
51
|
+
// Color component scales - standardized variations of each color component
|
|
52
|
+
// -------------------------------------------------------------------------- */
|
|
53
|
+
|
|
54
|
+
/* Palette Hues (HSL) - brand-consistent hues - range: [0, 360]
|
|
55
|
+
// .......................................................................... */
|
|
16
56
|
--red: 4; /* dark red / error color / secondary */
|
|
17
|
-
--brown: 20;
|
|
18
|
-
--orange: 30;
|
|
57
|
+
--brown: 20;
|
|
58
|
+
--orange: 30;
|
|
19
59
|
--yellow: 55; /* warning color */
|
|
20
|
-
--lime: 80;
|
|
60
|
+
--lime: 80;
|
|
21
61
|
--green: 100; /* success color */
|
|
22
|
-
--aqua: 160;
|
|
23
|
-
--cyan: 175;
|
|
24
|
-
--azure: 190;
|
|
62
|
+
--aqua: 160;
|
|
63
|
+
--cyan: 175;
|
|
64
|
+
--azure: 190;
|
|
25
65
|
--blue: 210; /* slate blue / info color / primary */
|
|
26
|
-
--indigo: 260;
|
|
27
|
-
--purple: 270;
|
|
28
|
-
--violet: 280;
|
|
29
|
-
--magenta: 300;
|
|
30
|
-
--pink: 330;
|
|
31
|
-
|
|
66
|
+
--indigo: 260;
|
|
67
|
+
--purple: 270;
|
|
68
|
+
--violet: 280;
|
|
69
|
+
--magenta: 300;
|
|
70
|
+
--pink: 330;
|
|
32
71
|
|
|
72
|
+
|
|
73
|
+
/* Saturation scale (HSL) - range: [0%, 100%]
|
|
74
|
+
// .......................................................................... */
|
|
75
|
+
--s0: 0%;
|
|
76
|
+
--s4: 40%; /* less saturated */
|
|
77
|
+
--s5: 55%; /* default saturation level */
|
|
78
|
+
--s6: 60%;
|
|
79
|
+
--s7: 70%; /* more saturated */
|
|
80
|
+
--s8: 80%;
|
|
81
|
+
--s9: 90%;
|
|
82
|
+
--s10: 100%; /* completely saturated */
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
/* Lightness scale */
|
|
86
|
+
--l1: 99.9%;
|
|
87
|
+
--l5: 99%;
|
|
88
|
+
--l10: 96%;
|
|
89
|
+
--l15: 92%; /* brighten */
|
|
90
|
+
--l20: 90%;
|
|
91
|
+
--l25: 85%;
|
|
92
|
+
--l30: 80%;
|
|
93
|
+
--l35: 75%;
|
|
94
|
+
--l40: 70%;
|
|
95
|
+
--l45: 67%; /* lighten */
|
|
96
|
+
--l50: 60%; /* default */
|
|
97
|
+
--l54: 53%;
|
|
98
|
+
--l55: 52%; /* darken */
|
|
99
|
+
--l60: 50%;
|
|
100
|
+
--l65: 45%;
|
|
101
|
+
--l70: 40%;
|
|
102
|
+
--l75: 35%;
|
|
103
|
+
--l80: 30%;
|
|
104
|
+
--l85: 25%;
|
|
105
|
+
--l90: 20%;
|
|
106
|
+
--l95: 10%;
|
|
107
|
+
--l99: 5%;
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
/* Transparency (alpha) scale - range: [0, 1] or [0%, 100%] */
|
|
111
|
+
--a0: 0.05; /* more transparent */
|
|
112
|
+
--a1: 0.1; /* default for nearly transparent bg's */
|
|
113
|
+
--a2: 0.2;
|
|
114
|
+
|
|
115
|
+
|
|
33
116
|
/* Theme Hues - map the above hues to a palette order here, with primary being
|
|
34
117
|
first, secondary being second, etc., to palettize your theme. You can pick
|
|
35
118
|
hues as primary, secondary, etc. or use complementary colors based off the
|
|
@@ -43,174 +126,155 @@
|
|
|
43
126
|
--7th: var(--purple);
|
|
44
127
|
--8th: var(--magenta);
|
|
45
128
|
--9th: var(--pink);
|
|
46
|
-
|
|
129
|
+
|
|
47
130
|
/* programmatically specified colors based off primary - EXPERIMENTAL */
|
|
48
131
|
--complement: calc(var(--1st) + 180); /* also a tetrad */
|
|
49
132
|
--triad: calc(var(--1st) + 120);
|
|
50
133
|
--cotriad: calc(var(--1st) + 240);
|
|
51
134
|
--tetrad: calc(var(--1st) + 90);
|
|
52
135
|
--cotetrad: calc(var(--1st) + 270);
|
|
53
|
-
|
|
54
|
-
/*
|
|
55
|
-
--
|
|
56
|
-
--s5
|
|
57
|
-
--
|
|
58
|
-
--
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
--
|
|
62
|
-
--
|
|
63
|
-
--
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
--
|
|
68
|
-
--
|
|
69
|
-
--
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
/* Named flash/form message colors - highlights are more extreme & lowlights
|
|
73
|
-
less extreme versions of the base color, relative to the color scheme */
|
|
74
|
-
--error: hsl(var(--red) 100% 43%);
|
|
75
|
-
--error-high: hsl(var(--red) 100% 80%);
|
|
76
|
-
--error-low: hsl(var(--red) 60% 38%);
|
|
77
|
-
--bg-error: hsl(var(--red) 60% 92%);
|
|
78
|
-
|
|
79
|
-
--warning: hsl(var(--yellow) 100% 40%);
|
|
80
|
-
--warning-high: hsl(var(--yellow) 100% 47%);
|
|
81
|
-
--warning-low: hsl(var(--yellow) 60% 40%);
|
|
82
|
-
--bg-warning: hsl(var(--yellow) 60% 92%);
|
|
83
|
-
|
|
84
|
-
--success: hsl(var(--green) 100% 35%);
|
|
85
|
-
--success-high: hsl(var(--green) 100% 45%);
|
|
86
|
-
--success-low: hsl(var(--green) 60% 25%);
|
|
87
|
-
--bg-success: hsl(var(--green) 60% 92%);
|
|
88
|
-
|
|
89
|
-
--info: hsl(var(--blue) 100% 45%);
|
|
90
|
-
--info-high: hsl(var(--blue) 100% 65%);
|
|
91
|
-
--info-low: hsl(var(--blue) 60% 35%);
|
|
92
|
-
--bg-info: hsl(var(--blue) 60% 92%);
|
|
93
|
-
|
|
94
|
-
/* Named (icon) state colors - highlights are more extreme & lowlights
|
|
95
|
-
less extreme versions of the base color, relative to the color scheme */
|
|
96
|
-
|
|
97
|
-
--valid: hsl(var(--green) 70% 30%);
|
|
98
|
-
--valid-high: hsl(var(--green) 80% 40%);
|
|
99
|
-
--valid-low: hsl(var(--green) 70% 25%);
|
|
100
|
-
--bg-valid: hsl(var(--green) 60% 92%);
|
|
101
|
-
|
|
102
|
-
--invalid: hsl(var(--red) 80% 35%);
|
|
103
|
-
--invalid-high: hsl(var(--red) 90% 42%);
|
|
104
|
-
--invalid-low: hsl(var(--red) 70% 30%);
|
|
105
|
-
--bg-invalid: hsl(var(--red) 60% 92%);
|
|
106
|
-
|
|
107
|
-
--unknown: hsl(var(--yellow) 100% 40%);
|
|
108
|
-
--unknown-high: hsl(var(--yellow) 100% 47%);
|
|
109
|
-
--unknown-low: hsl(var(--yellow) 60% 40%);
|
|
110
|
-
--bg-unknown: hsl(var(--yellow) 60% 92%);
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
/* Neutrals / Grayscale - use the black/white keywords for pure black/white.
|
|
114
|
-
we have two extra levels at each of the scale for greater flexibility in
|
|
115
|
-
developing shadows and highlights */
|
|
116
|
-
--10: hsl(0 0% 99%); /* effectively white */
|
|
117
|
-
--50: hsl(0 0% 97%);
|
|
118
|
-
--100: hsl(0 0% 95%);
|
|
119
|
-
--200: hsl(0 0% 86%);
|
|
120
|
-
--300: hsl(0 0% 77%);
|
|
121
|
-
--400: hsl(0 0% 68%);
|
|
122
|
-
--500: hsl(0 0% 59%);
|
|
123
|
-
--neutral: hsl(0 0% 50%);
|
|
124
|
-
--600: hsl(0 0% 41%);
|
|
125
|
-
--700: hsl(0 0% 32%);
|
|
126
|
-
--800: hsl(0 0% 23%);
|
|
127
|
-
--900: hsl(0 0% 16%);
|
|
128
|
-
--950: hsl(0 0% 10%);
|
|
129
|
-
--990: hsl(0 0% 5%); /* effectively black */
|
|
130
|
-
|
|
131
|
-
/* Primary colors */
|
|
132
|
-
--primary: hsl(var(--1st) var(--s5) var(--l5));
|
|
133
|
-
--secondary: hsl(var(--2nd) var(--s5) var(--l5));
|
|
134
|
-
--tertiary: hsl(var(--3rd) var(--s5) var(--l5));
|
|
135
|
-
|
|
136
|
-
/* Complementary colors */
|
|
137
|
-
--complementary: hsl(var(--complement) var(--s5) var(--l5));
|
|
138
|
-
--triadic: hsl(var(--triad) var(--s5) var(--l5));
|
|
139
|
-
--cotriadic: hsl(var(--cotriad) var(--s5) var(--l5));
|
|
140
|
-
--tetradic: hsl(var(--tetrad) var(--s5) var(--l5));
|
|
141
|
-
--cotetradic: hsl(var(--cotetrad) var(--s5) var(--l5));
|
|
142
|
-
|
|
143
|
-
|
|
136
|
+
|
|
137
|
+
/* Primary colors (HSL) */
|
|
138
|
+
--primary: hsl(var(--1st) var(--s5) var(--l65));
|
|
139
|
+
--secondary: hsl(var(--2nd) var(--s5) var(--l65));
|
|
140
|
+
--tertiary: hsl(var(--3rd) var(--s5) var(--l65));
|
|
141
|
+
--quaternary: hsl(var(--4th) var(--s5) var(--l65));
|
|
142
|
+
--quinary: hsl(var(--5th) var(--s5) var(--l65));
|
|
143
|
+
--senary: hsl(var(--6th) var(--s5) var(--l65));
|
|
144
|
+
--septenary: hsl(var(--7th) var(--s5) var(--l65));
|
|
145
|
+
--octonary: hsl(var(--8th) var(--s5) var(--l65));
|
|
146
|
+
--nonary: hsl(var(--9th) var(--s5) var(--l65));
|
|
147
|
+
|
|
148
|
+
--complementary: hsl(var(--complement) var(--s5) var(--l65));
|
|
149
|
+
--triadic: hsl(var(--triad) var(--s5) var(--l65));
|
|
150
|
+
--cotriadic: hsl(var(--cotriad) var(--s5) var(--l65));
|
|
151
|
+
--tetradic: hsl(var(--tetrad) var(--s5) var(--l65));
|
|
152
|
+
--cotetradic: hsl(var(--cotetrad) var(--s5) var(--l65));
|
|
153
|
+
|
|
154
|
+
|
|
144
155
|
/* Color scales */
|
|
145
156
|
/* HSL is not perceptually uniform, so using the same S & L values won't
|
|
146
157
|
provide natural cohesiveness to these generated colors as LCH would. */
|
|
147
|
-
--primary-100: hsl(var(--1st) var(--s5)
|
|
148
|
-
--primary-200: hsl(var(--1st) var(--s5)
|
|
149
|
-
--primary-300: hsl(var(--1st) var(--s5)
|
|
150
|
-
--primary-400: hsl(var(--1st) var(--s5)
|
|
151
|
-
--primary-500: hsl(var(--1st) var(--s5)
|
|
152
|
-
--primary-600: hsl(var(--1st) var(--s5)
|
|
153
|
-
--primary-700: hsl(var(--1st) var(--s5)
|
|
154
|
-
--primary-800: hsl(var(--1st) var(--s5)
|
|
155
|
-
--primary-900: hsl(var(--1st) var(--s5)
|
|
156
|
-
--primary-950: hsl(var(--1st) var(--s5)
|
|
157
|
-
--primary-bright: hsl(var(--1st) var(--s7) var(--
|
|
158
|
-
--primary-transparent: hsl(var(--1st) var(--s5) var(--
|
|
159
|
-
|
|
158
|
+
--primary-100: hsl(var(--1st) var(--s5) var(--l10));
|
|
159
|
+
--primary-200: hsl(var(--1st) var(--s5) var(--l20));
|
|
160
|
+
--primary-300: hsl(var(--1st) var(--s5) var(--l30));
|
|
161
|
+
--primary-400: hsl(var(--1st) var(--s5) var(--l40));
|
|
162
|
+
--primary-500: hsl(var(--1st) var(--s5) var(--l50));
|
|
163
|
+
--primary-600: hsl(var(--1st) var(--s5) var(--l60));
|
|
164
|
+
--primary-700: hsl(var(--1st) var(--s5) var(--l70));
|
|
165
|
+
--primary-800: hsl(var(--1st) var(--s5) var(--l80));
|
|
166
|
+
--primary-900: hsl(var(--1st) var(--s5) var(--l90));
|
|
167
|
+
--primary-950: hsl(var(--1st) var(--s5) var(--l95));
|
|
168
|
+
--primary-bright: hsl(var(--1st) var(--s7) var(--l70));
|
|
169
|
+
--primary-transparent: hsl(var(--1st) var(--s5) var(--l65) / var(--a1));
|
|
170
|
+
|
|
160
171
|
/* Complementary color */
|
|
161
|
-
--complementary-100: hsl(var(--complement) var(--s5)
|
|
162
|
-
--complementary-200: hsl(var(--complement) var(--s5)
|
|
163
|
-
--complementary-300: hsl(var(--complement) var(--s5)
|
|
164
|
-
--complementary-400: hsl(var(--complement) var(--s5)
|
|
165
|
-
--complementary-500: hsl(var(--complement) var(--s5)
|
|
166
|
-
--complementary-600: hsl(var(--complement) var(--s5)
|
|
167
|
-
--complementary-700: hsl(var(--complement) var(--s5)
|
|
168
|
-
--complementary-800: hsl(var(--complement) var(--s5)
|
|
169
|
-
--complementary-900: hsl(var(--complement) var(--s5)
|
|
172
|
+
--complementary-100: hsl(var(--complement) var(--s5) var(--l10));
|
|
173
|
+
--complementary-200: hsl(var(--complement) var(--s5) var(--l20));
|
|
174
|
+
--complementary-300: hsl(var(--complement) var(--s5) var(--l30));
|
|
175
|
+
--complementary-400: hsl(var(--complement) var(--s5) var(--l40));
|
|
176
|
+
--complementary-500: hsl(var(--complement) var(--s5) var(--l50));
|
|
177
|
+
--complementary-600: hsl(var(--complement) var(--s5) var(--l60));
|
|
178
|
+
--complementary-700: hsl(var(--complement) var(--s5) var(--l70));
|
|
179
|
+
--complementary-800: hsl(var(--complement) var(--s5) var(--l80));
|
|
180
|
+
--complementary-900: hsl(var(--complement) var(--s5) var(--l90));
|
|
170
181
|
|
|
171
182
|
/* Secondary color */
|
|
172
|
-
--secondary-100: hsl(var(--2nd) var(--s5)
|
|
173
|
-
--secondary-200: hsl(var(--2nd) var(--s5)
|
|
174
|
-
--secondary-300: hsl(var(--2nd) var(--s5)
|
|
175
|
-
--secondary-400: hsl(var(--2nd) var(--s5)
|
|
176
|
-
--secondary-500: hsl(var(--2nd) var(--s5)
|
|
177
|
-
--secondary-600: hsl(var(--2nd) var(--s5)
|
|
178
|
-
--secondary-700: hsl(var(--2nd) var(--s5)
|
|
179
|
-
--secondary-800: hsl(var(--2nd) var(--s5)
|
|
180
|
-
--secondary-900: hsl(var(--2nd) var(--s5)
|
|
181
|
-
--secondary-bright: hsl(var(--2nd) var(--s7) var(--
|
|
183
|
+
--secondary-100: hsl(var(--2nd) var(--s5) var(--l10));
|
|
184
|
+
--secondary-200: hsl(var(--2nd) var(--s5) var(--l20));
|
|
185
|
+
--secondary-300: hsl(var(--2nd) var(--s5) var(--l30));
|
|
186
|
+
--secondary-400: hsl(var(--2nd) var(--s5) var(--l40));
|
|
187
|
+
--secondary-500: hsl(var(--2nd) var(--s5) var(--l50));
|
|
188
|
+
--secondary-600: hsl(var(--2nd) var(--s5) var(--l60));
|
|
189
|
+
--secondary-700: hsl(var(--2nd) var(--s5) var(--l70));
|
|
190
|
+
--secondary-800: hsl(var(--2nd) var(--s5) var(--l80));
|
|
191
|
+
--secondary-900: hsl(var(--2nd) var(--s5) var(--l90));
|
|
192
|
+
--secondary-bright: hsl(var(--2nd) var(--s7) var(--l70));
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
/* Neutrals / Grayscale - use the black/white keywords for pure black/white.
|
|
196
|
+
we have two extra levels at each of the scale for greater flexibility in
|
|
197
|
+
developing shadows and highlights */
|
|
198
|
+
--10: hsl( 0 var(--s0) 99% ); /* effectively white */
|
|
199
|
+
--50: hsl( 0 var(--s0) 97% );
|
|
200
|
+
--100: hsl( 0 var(--s0) 95% );
|
|
201
|
+
--200: hsl( 0 var(--s0) 86% );
|
|
202
|
+
--300: hsl( 0 var(--s0) 77% );
|
|
203
|
+
--400: hsl( 0 var(--s0) 68% );
|
|
204
|
+
--500: hsl( 0 var(--s0) 59% );
|
|
205
|
+
--neutral: hsl( 0 var(--s0) 50% );
|
|
206
|
+
--600: hsl( 0 var(--s0) 41% );
|
|
207
|
+
--700: hsl( 0 var(--s0) 32% );
|
|
208
|
+
--800: hsl( 0 var(--s0) 23% );
|
|
209
|
+
--900: hsl( 0 var(--s0) 16% );
|
|
210
|
+
--950: hsl( 0 var(--s0) 10% );
|
|
211
|
+
--990: hsl( 0 var(--s0) 5% ); /* effectively black */
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
/* Named flash/form message colors - highlights are more extreme & lowlights
|
|
215
|
+
less extreme versions of the base color, relative to the color scheme */
|
|
216
|
+
--error: hsl(var(--red) var(--s10) var(--l40)); /* 43% */
|
|
217
|
+
--error-high: hsl(var(--red) var(--s10) var(--l80)); /* 80% */
|
|
218
|
+
--error-low: hsl(var(--red) var(--s6) var(--l30)); /* 38% */
|
|
219
|
+
--bg-error: hsl(var(--red) var(--s6) var(--l90)); /* 92% */
|
|
220
|
+
|
|
221
|
+
--warning: hsl(var(--yellow) var(--s10) var(--l40)); /* 40% */
|
|
222
|
+
--warning-high: hsl(var(--yellow) var(--s10) var(--l50)); /* 47% */
|
|
223
|
+
--warning-low: hsl(var(--yellow) var(--s6) var(--l40)); /* 40% */
|
|
224
|
+
--bg-warning: hsl(var(--yellow) var(--s6) var(--l90)); /* 92% */
|
|
225
|
+
|
|
226
|
+
--success: hsl(var(--green) var(--s10) var(--l35)); /* 35% */
|
|
227
|
+
--success-high: hsl(var(--green) var(--s10) var(--l45)); /* 45% */
|
|
228
|
+
--success-low: hsl(var(--green) var(--s6) var(--l25)); /* 25% */
|
|
229
|
+
--bg-success: hsl(var(--green) var(--s6) var(--l90)); /* 92% */
|
|
230
|
+
|
|
231
|
+
--info: hsl(var(--blue) var(--s10) var(--l45)); /* 45% */
|
|
232
|
+
--info-high: hsl(var(--blue) var(--s10) var(--l65)); /* 65% */
|
|
233
|
+
--info-low: hsl(var(--blue) var(--s6) var(--l35)); /* 35% */
|
|
234
|
+
--bg-info: hsl(var(--blue) var(--s6) var(--l90)); /* 92% */
|
|
235
|
+
|
|
236
|
+
/* Named (icon) state colors - highlights are more extreme & lowlights
|
|
237
|
+
less extreme versions of the base color, relative to the color scheme */
|
|
238
|
+
|
|
239
|
+
--valid: hsl(var(--green) var(--s7) var(--l30)); /* 30% */
|
|
240
|
+
--valid-high: hsl(var(--green) var(--s8) var(--l40)); /* 40% */
|
|
241
|
+
--valid-low: hsl(var(--green) var(--s7) var(--l25)); /* 25% */
|
|
242
|
+
--bg-valid: hsl(var(--green) var(--s6) var(--l90)); /* 92% */
|
|
243
|
+
|
|
244
|
+
--invalid: hsl(var(--red) var(--s8) var(--l35)); /* 35% */
|
|
245
|
+
--invalid-high: hsl(var(--red) var(--s9) var(--l40)); /* 42% */
|
|
246
|
+
--invalid-low: hsl(var(--red) var(--s7) var(--l30)); /* 30% */
|
|
247
|
+
--bg-invalid: hsl(var(--red) var(--s6) var(--l90)); /* 92% */
|
|
248
|
+
|
|
249
|
+
--unknown: hsl(var(--yellow) var(--s10) var(--l40)); /* 40% */
|
|
250
|
+
--unknown-high: hsl(var(--yellow) var(--s10) var(--l45)); /* 47% */
|
|
251
|
+
--unknown-low: hsl(var(--yellow) var(--s6) var(--l40)); /* 40% */
|
|
252
|
+
--bg-unknown: hsl(var(--yellow) var(--s6) var(--l90)); /* 92% */
|
|
253
|
+
|
|
182
254
|
}
|
|
183
255
|
|
|
184
|
-
/*
|
|
256
|
+
/* okLCH version for browsers that support it - chrome/safari only for now */
|
|
185
257
|
@supports (color: oklch(1% 1 1)) {
|
|
186
258
|
:root {
|
|
259
|
+
|
|
260
|
+
/* okLCH hues */
|
|
187
261
|
--red: 26; /* dark red / error color */
|
|
188
262
|
--brown: 45;
|
|
189
263
|
--orange: 63;
|
|
190
264
|
--yellow: 104; /* warning color */
|
|
191
|
-
--lime: 126;
|
|
265
|
+
--lime: 126;
|
|
192
266
|
--green: 137; /* success color */
|
|
193
|
-
--aqua: 190;
|
|
194
|
-
--cyan: 205;
|
|
195
|
-
--azure: 214;
|
|
267
|
+
--aqua: 190;
|
|
268
|
+
--cyan: 205;
|
|
269
|
+
--azure: 214;
|
|
196
270
|
--blue: 251; /* slate blue / info / default primary*/
|
|
197
|
-
--indigo: 292;
|
|
198
|
-
--purple: 302;
|
|
199
|
-
--violet: 312;
|
|
200
|
-
--magenta: 328;
|
|
201
|
-
--pink: 354;
|
|
202
|
-
|
|
203
|
-
/*
|
|
204
|
-
would clamp chroma to these ranges, but is not yet implemented in safari */
|
|
205
|
-
--dullest: 0.05;
|
|
206
|
-
--duller: 0.08;
|
|
207
|
-
--dull: 0.10;
|
|
208
|
-
--chroma: 0.12; /* default */
|
|
209
|
-
--rich: 0.15;
|
|
210
|
-
--richer: 0.18;
|
|
211
|
-
--richest: 0.23;
|
|
212
|
-
|
|
213
|
-
/* chroma scale */
|
|
271
|
+
--indigo: 292;
|
|
272
|
+
--purple: 302;
|
|
273
|
+
--violet: 312;
|
|
274
|
+
--magenta: 328;
|
|
275
|
+
--pink: 354;
|
|
276
|
+
|
|
277
|
+
/* okLCH chroma scale */
|
|
214
278
|
--c0: 0.010;
|
|
215
279
|
--c1: 0.030;
|
|
216
280
|
--c2: 0.050; /* dullest */
|
|
@@ -221,41 +285,10 @@
|
|
|
221
285
|
--c7: 0.180; /* richer */
|
|
222
286
|
--c8: 0.190;
|
|
223
287
|
--c9: 0.230; /* richest */
|
|
224
|
-
|
|
225
|
-
/*
|
|
226
|
-
will clamp lightness to these ranges, and is implemented in safari */
|
|
227
|
-
--darken: 52%;
|
|
228
|
-
--lightness: 60%; /* default */
|
|
229
|
-
--lighten: 67%;
|
|
230
|
-
--brighten: 92%;
|
|
231
|
-
|
|
232
|
-
/* lightness scale for deriving primary color scales */
|
|
233
|
-
--l1: 99.9%;
|
|
234
|
-
--l5: 99%;
|
|
235
|
-
--l10: 96%;
|
|
236
|
-
--l15: 92%; /* brighten */
|
|
237
|
-
--l20: 90%;
|
|
238
|
-
--l25: 85%;
|
|
239
|
-
--l30: 80%;
|
|
240
|
-
--l40: 70%;
|
|
241
|
-
--l45: 67%; /* lighten */
|
|
242
|
-
--l50: 60%; /* default */
|
|
243
|
-
--l54: 53%;
|
|
244
|
-
--l55: 52%; /* darken */
|
|
245
|
-
--l60: 50%;
|
|
246
|
-
--l65: 45%;
|
|
247
|
-
--l70: 40%;
|
|
248
|
-
--l80: 30%;
|
|
249
|
-
--l90: 20%;
|
|
250
|
-
--l95: 10%;
|
|
251
|
-
--l99: 5%;
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
/* Base Color Palette - no need for color scales with okLCH since it's support
|
|
255
|
-
implies support for CSS relative colors, so variations can be created on
|
|
256
|
-
the fly */
|
|
288
|
+
|
|
289
|
+
/* Primary colors (okLCH) */
|
|
257
290
|
--primary: oklch(var(--l60) var(--c4) var(--1st));
|
|
258
|
-
--secondary: oklch(var(--l54) var(--
|
|
291
|
+
--secondary: oklch(var(--l54) var(--c6) var(--2nd));
|
|
259
292
|
--tertiary: oklch(var(--l50) var(--c5) var(--3rd));
|
|
260
293
|
--quaternary: oklch(var(--l50) var(--c6) var(--4th));
|
|
261
294
|
--quinary: oklch(var(--l50) var(--c7) var(--5th));
|
|
@@ -263,13 +296,16 @@
|
|
|
263
296
|
--septenary: oklch(var(--l50) var(--c5) var(--7th));
|
|
264
297
|
--octonary: oklch(var(--l50) var(--c6) var(--8th));
|
|
265
298
|
--nonary: oklch(var(--l50) var(--c7) var(--9th));
|
|
266
|
-
|
|
299
|
+
|
|
300
|
+
/* Complementary colors (okLCH) */
|
|
267
301
|
--complementary: oklch(var(--l50) var(--c7) var(--complement) );
|
|
268
302
|
--triadic: oklch(var(--l50) var(--c7) var(--triad) );
|
|
269
303
|
--cotriadic: oklch(var(--l50) var(--c7) var(--cotriad) );
|
|
270
304
|
--tetradic: oklch(var(--l50) var(--c7) var(--tetrad) );
|
|
271
305
|
--cotetradic: oklch(var(--l50) var(--c7) var(--cotetrad) );
|
|
272
306
|
|
|
307
|
+
/* Color scales - with relative colors, we shouldn't need color scales; just
|
|
308
|
+
apply the desired lightness, chroma, alpha scale value to the base color */
|
|
273
309
|
--primary-100: oklch(var(--l20) var(--c2) var(--1st));
|
|
274
310
|
--primary-200: oklch(var(--l25) var(--c4) var(--1st));
|
|
275
311
|
--primary-300: oklch(var(--l40) var(--c4) var(--1st));
|
|
@@ -281,50 +317,97 @@
|
|
|
281
317
|
--primary-900: oklch(var(--l90) var(--c4) var(--1st));
|
|
282
318
|
--primary-bright: oklch(var(--l55) var(--c6) var(--1st));
|
|
283
319
|
--primary-transparent: oklch(var(--l60) var(--c6) var(--1st) / var(--a2));
|
|
284
|
-
|
|
320
|
+
|
|
285
321
|
/* CSS Color Level 5 Relative Color Syntax not supported in firefox yet,
|
|
286
322
|
see: https://bugzilla.mozilla.org/show_bug.cgi?id=1701488 */
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
323
|
+
/*--primary-transparent: oklch(from var(--primary) l var(--c6) h / var(--a1));*/
|
|
324
|
+
|
|
325
|
+
|
|
326
|
+
/* Secondary color (okLCH) - brand color differentiated from primary */
|
|
327
|
+
--secondary-100: oklch(var(--l10) var(--c4) var(--2nd));
|
|
328
|
+
--secondary-200: oklch(var(--l20) var(--c4) var(--2nd));
|
|
329
|
+
--secondary-300: oklch(var(--l30) var(--c4) var(--2nd));
|
|
330
|
+
--secondary-400: oklch(var(--l40) var(--c4) var(--2nd));
|
|
331
|
+
--secondary-500: oklch(var(--l50) var(--c4) var(--2nd));
|
|
332
|
+
--secondary-600: oklch(var(--l60) var(--c4) var(--2nd));
|
|
333
|
+
--secondary-700: oklch(var(--l70) var(--c4) var(--2nd));
|
|
334
|
+
--secondary-800: oklch(var(--l80) var(--c4) var(--2nd));
|
|
335
|
+
--secondary-900: oklch(var(--l90) var(--c4) var(--2nd));
|
|
336
|
+
--secondary-bright: oklch(var(--l55) var(--c6) var(--2nd));
|
|
337
|
+
--secondary-transparent:oklch(var(--l30) var(--c6) var(--2nd) / var(--a2));
|
|
338
|
+
|
|
339
|
+
|
|
340
|
+
/* Complementary color (okLCH) - meant to be used next to primary */
|
|
341
|
+
--complementary-100: oklch(var(--l20) var(--c2) var(--complement));
|
|
342
|
+
--complementary-200: oklch(var(--l25) var(--c4) var(--complement));
|
|
343
|
+
--complementary-300: oklch(var(--l40) var(--c4) var(--complement));
|
|
344
|
+
--complementary-400: oklch(var(--l50) var(--c4) var(--complement));
|
|
345
|
+
--complementary-500: oklch(var(--l55) var(--c4) var(--complement));
|
|
346
|
+
--complementary-600: oklch(var(--l65) var(--c4) var(--complement));
|
|
347
|
+
--complementary-700: oklch(var(--l70) var(--c4) var(--complement));
|
|
348
|
+
--complementary-800: oklch(var(--l80) var(--c4) var(--complement));
|
|
349
|
+
--complementary-900: oklch(var(--l90) var(--c4) var(--complement));
|
|
350
|
+
--complementary-bright: oklch(var(--l55) var(--c6) var(--complement));
|
|
351
|
+
--complementary-transparent:oklch(var(--l55) var(--c6) var(--complement) / var(--a2));
|
|
352
|
+
|
|
353
|
+
|
|
354
|
+
/* Neutrals / Grayscale */
|
|
355
|
+
--10: oklch(var(--l1) 0 0); /* nearly white */
|
|
356
|
+
--50: oklch(var(--l5) 0 0);
|
|
357
|
+
--100: oklch(var(--l10) 0 0);
|
|
358
|
+
--200: oklch(var(--l20) 0 0);
|
|
359
|
+
--300: oklch(var(--l30) 0 0);
|
|
360
|
+
--400: oklch(var(--l40) 0 0);
|
|
361
|
+
--500: oklch(var(--l50) 0 0);
|
|
362
|
+
--neutral: oklch(var(--l50) 0 0);
|
|
363
|
+
--600: oklch(var(--l60) 0 0);
|
|
364
|
+
--700: oklch(var(--l70) 0 0);
|
|
365
|
+
--800: oklch(var(--l80) 0 0);
|
|
366
|
+
--900: oklch(var(--l90) 0 0);
|
|
367
|
+
--950: oklch(var(--l95) 0 0);
|
|
368
|
+
--990: oklch(var(--l99) 0 0); /* nearly black */
|
|
369
|
+
|
|
290
370
|
/* Named flash/form message colors - highlights are more extreme & lowlights
|
|
291
371
|
less extreme versions of the base color, relative to the color scheme */
|
|
292
372
|
--info: oklch(var(--l50) var(--c5) var(--blue));
|
|
293
373
|
--info-high: oklch(var(--l45) var(--c5) var(--blue));
|
|
294
374
|
--info-low: oklch(var(--l55) var(--c6) var(--blue));
|
|
295
375
|
--bg-info: oklch(var(--l15) var(--c3) var(--blue));
|
|
296
|
-
|
|
376
|
+
|
|
297
377
|
--success: oklch(var(--l50) var(--c6) var(--green));
|
|
298
378
|
--success-high: oklch(var(--l45) var(--c6) var(--green));
|
|
299
379
|
--success-low: oklch(var(--l55) var(--c6) var(--green));
|
|
300
380
|
--bg-success: oklch(var(--l15) var(--c3) var(--green));
|
|
301
|
-
|
|
381
|
+
|
|
302
382
|
--warning: oklch(var(--l50) var(--c5) var(--yellow));
|
|
303
383
|
--warning-high: oklch(var(--l45) var(--c5) var(--yellow));
|
|
304
384
|
--warning-low: oklch(var(--l55) var(--c5) var(--yellow));
|
|
305
385
|
--bg-warning: oklch(var(--l15) var(--c3) var(--yellow));
|
|
306
|
-
|
|
386
|
+
|
|
307
387
|
--error: oklch(var(--l50) var(--c4) var(--red));
|
|
308
388
|
--error-high: oklch(var(--l45) var(--c5) var(--red));
|
|
309
389
|
--error-low: oklch(var(--l55) var(--c5) var(--red));
|
|
310
390
|
--bg-error: oklch(var(--l15) var(--c3) var(--red));
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
--
|
|
317
|
-
--
|
|
318
|
-
--
|
|
319
|
-
--
|
|
320
|
-
|
|
321
|
-
--
|
|
322
|
-
--
|
|
323
|
-
--
|
|
324
|
-
--
|
|
325
|
-
|
|
326
|
-
--
|
|
327
|
-
|
|
391
|
+
|
|
392
|
+
|
|
393
|
+
/* Named (icon) state colors - highlights are more extreme & lowlights
|
|
394
|
+
less extreme versions of the base color, relative to the color scheme */
|
|
395
|
+
|
|
396
|
+
--valid: oklch(var(--l55) var(--c7) var(--green));
|
|
397
|
+
--valid-high: oklch(var(--l45) var(--c8) var(--green));
|
|
398
|
+
--valid-low: oklch(var(--l55) var(--c6) var(--green));
|
|
399
|
+
--bg-valid: oklch(var(--l65) var(--c9) var(--green));
|
|
400
|
+
|
|
401
|
+
--invalid: oklch(var(--l55) var(--c5) var(--red));
|
|
402
|
+
--invalid-high: oklch(var(--l45) var(--c6) var(--red));
|
|
403
|
+
--invalid-low: oklch(var(--l65) var(--c4) var(--red));
|
|
404
|
+
--bg-invalid: oklch(var(--l75) var(--c8) var(--red));
|
|
405
|
+
|
|
406
|
+
--unknown: oklch(var(--l20) var(--c6) var(--yellow));
|
|
407
|
+
--unknown-high: oklch(var(--l20) var(--c7) var(--yellow));
|
|
408
|
+
--unknown-low: oklch(var(--l60) var(--c5) var(--yellow));
|
|
409
|
+
--bg-unknown: oklch(var(--l60) var(--c9) var(--yellow));
|
|
410
|
+
|
|
328
411
|
}}
|
|
329
412
|
|
|
330
413
|
|