clairity.css 0.2.0 → 0.3.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 +18 -1
- data/README.md +3 -1
- data/lib/assets/css/clairity/base.css +6 -0
- data/lib/assets/css/clairity/classes.css +1 -0
- data/lib/assets/css/clairity/components.css +14 -14
- data/lib/assets/css/clairity/cosmetic.css +10 -0
- data/lib/assets/css/clairity/icons.css +1 -0
- data/lib/assets/css/clairity/states.css +2 -2
- data/lib/clairity.css/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 7b72fdbcec2b2d980f9a9c29277faebfd6b98e20723458f1938bd59fe01f25c8
|
|
4
|
+
data.tar.gz: 19cfbc2063ec59d6d405cb289205817193c9fd8f8947702cd54bdde74c5df1f3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 339dd3bb5d0d7967915ca022093d19b6dff439fca037a36d41c605b055d0467430813fe945cbc580a656e11dd8f21a7438c0e9dfc00da6af63ec3e6e43a67e98
|
|
7
|
+
data.tar.gz: 4efc8f1596a4f9857168ba445d1fcf26db8ad530aa01aa1e24f0901585239b67ca8c62c25764fd69670cc3d98afb25ab15b9a2929edea8ca8fea88bf47c4712e
|
data/CHANGELOG.md
CHANGED
|
@@ -29,6 +29,21 @@ This section is for recording changes committed since the last release.
|
|
|
29
29
|
### Security
|
|
30
30
|
|
|
31
31
|
|
|
32
|
+
## [v0.3.0] - 20230617
|
|
33
|
+
|
|
34
|
+
### Added
|
|
35
|
+
|
|
36
|
+
* [icons.css]: `--i-settings` icon and the associated `.i-settings` icon class in [classes.css]
|
|
37
|
+
* [components.css]: added `.secondary` and `.tertiary` variations of the `::file-selector-button`, part of the `[type="file"]` input type
|
|
38
|
+
|
|
39
|
+
### Changed
|
|
40
|
+
|
|
41
|
+
* [base.css]: decreased height of `::file-selector-button` by `var(--xxs)` to better reflect relative weight of the file selector button in the form hierarchy
|
|
42
|
+
* also removed `padding-inline-start` from the `[type="file"]` input type to vertically line up with other fields in a form
|
|
43
|
+
* [components.css]: converted `.alert` class declarations into `[role="alert"]` attribute declarations to better reflect semantics and to be more accessible
|
|
44
|
+
* also updated `classes.html` alert box examples to use `[role="alert"]` rather than `.alert`
|
|
45
|
+
* [cosmetic.css]: make labels inline-grids so they take up the full row height - EXPERIMENTAL
|
|
46
|
+
|
|
32
47
|
|
|
33
48
|
## [v0.2.0] - 20230504
|
|
34
49
|
|
|
@@ -464,6 +479,7 @@ Eventually, we want to have a consistent set of svg icons that are uniform and p
|
|
|
464
479
|
- `<body>`: make the body fill the viewport height, if content is not enough by itself to do so
|
|
465
480
|
- `<hgroup>`: styled with a strong visual offset
|
|
466
481
|
- `<hgroup>` is deprecated but still useful for containing *just* heading elements, as opposed to all kinds elements, as `<header>` does)
|
|
482
|
+
- see https://www.tpgi.com/subheadings-subtitles-alternative-titles-and-taglines-in-html/
|
|
467
483
|
- `[href^="mailto:"], [href^="tel:"], [href^="sms:"], [href^="file:"], [rel~="external"], [rel~="bookmark"], [download]`: move automatically included icon to the right instead of the left for these link types
|
|
468
484
|
- `<menu>`: remove default left padding and list marker
|
|
469
485
|
- `<th>`, `<td>`: add small top padding
|
|
@@ -643,7 +659,8 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
|
|
|
643
659
|
- `palette.css` - separate out the color scheme into its own css file
|
|
644
660
|
|
|
645
661
|
|
|
646
|
-
[unreleased]: https://github.com/clairity/clairity.css/compare/v0.
|
|
662
|
+
[unreleased]: https://github.com/clairity/clairity.css/compare/v0.3.0...HEAD
|
|
663
|
+
[v0.3.0]: https://github.com/clairity/clairity.css/compare/v0.2.0...v0.3.0
|
|
647
664
|
[v0.2.0]: https://github.com/clairity/clairity.css/compare/v0.1.2...v0.2.0
|
|
648
665
|
[v0.1.2]: https://github.com/clairity/clairity.css/compare/v0.1.1...v0.1.2
|
|
649
666
|
[v0.1.1]: https://github.com/clairity/clairity.css/compare/v0.1.0...v0.1.1
|
data/README.md
CHANGED
|
@@ -63,7 +63,9 @@ Once the gem is installed, require <samp class="clairity">clairity.css</samp> in
|
|
|
63
63
|
*# require_self
|
|
64
64
|
*/
|
|
65
65
|
|
|
66
|
+
/* instead of the sprockets directive above, you can use a css @import directive: */
|
|
66
67
|
@import "clairity.css";
|
|
68
|
+
|
|
67
69
|
/* to get basic plus the palette, use two @import statements:
|
|
68
70
|
@import "clairity.basic.css";
|
|
69
71
|
@import "clairity/palette.css";
|
|
@@ -113,7 +115,7 @@ where the contents of `/lib/assets/css/` in the gem was placed in the `/assets/c
|
|
|
113
115
|
|
|
114
116
|
## Previewing <samp class="clairity">clairity.css</samp>
|
|
115
117
|
|
|
116
|
-
|
|
118
|
+
To preview <samp class="clairity">clairity.css</samp>, check out the [Spec Sheet](https://css.clairity.blog/clairity.html).
|
|
117
119
|
|
|
118
120
|
For a quick and dirty (and totally insecure) way of previewing <samp class="clairity">clairity.css</samp>, download (or clone the gem repo locally) and unpack the gem (`gem unpack clairity.css-X.Y.Z.gem`), and from within the gem directory, run a (single-line invocation) ruby web server[^webrick]:
|
|
119
121
|
|
|
@@ -420,6 +420,10 @@ button, [type="button"],[type="submit"],[type="reset"], ::file-selector-button {
|
|
|
420
420
|
border-color: var(--foreground);
|
|
421
421
|
}
|
|
422
422
|
|
|
423
|
+
::file-selector-button {
|
|
424
|
+
min-height: calc(var(--height) - var(--xs));
|
|
425
|
+
}
|
|
426
|
+
|
|
423
427
|
|
|
424
428
|
/* -----------------------------------------------------------------------------
|
|
425
429
|
// #selections - dropdown/selection form controls
|
|
@@ -528,6 +532,8 @@ select, optgroup, option {
|
|
|
528
532
|
border: none;
|
|
529
533
|
}
|
|
530
534
|
|
|
535
|
+
[type="file"] { padding-inline-start: 0; }
|
|
536
|
+
|
|
531
537
|
/* #::-webkit-calendar-picker-indicator -a webkit picker pseudo-element-[0001]*/
|
|
532
538
|
::-webkit-calendar-picker-indicator {
|
|
533
539
|
display: none;
|
|
@@ -198,6 +198,7 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
|
198
198
|
.i-mail-x { --icon: var(--i-mail-x); }
|
|
199
199
|
.i-send { --icon: var(--i-send); }
|
|
200
200
|
.i-server-cog { --icon: var(--i-server-cog); }
|
|
201
|
+
.i-settings { --icon: var(--i-settings); }
|
|
201
202
|
.i-trash { --icon: var(--i-trash); }
|
|
202
203
|
.i-user-circle { --icon: var(--i-user-circle); }
|
|
203
204
|
.i-user-off { --icon: var(--i-user-off); }
|
|
@@ -84,8 +84,7 @@ header:not(.banner) {
|
|
|
84
84
|
align-items: baseline; /* make sure flexed text lines up visually*/
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
header :where(h1,h2,h3,h4,h5,h6) {
|
|
88
|
-
}
|
|
87
|
+
/*header :where(h1,h2,h3,h4,h5,h6) { ??? }*/
|
|
89
88
|
|
|
90
89
|
/* use <span>, not <p>, for text that sits alongside a heading within a header*/
|
|
91
90
|
header :where(p, .subtitle) {
|
|
@@ -259,8 +258,9 @@ i[class^='i-'] {
|
|
|
259
258
|
// #alert - the alert flash message box for providing timely info to the user
|
|
260
259
|
// -------------------------------------------------------------------------- */
|
|
261
260
|
|
|
261
|
+
/* TODO: rather than an .alert class, use [role="alert"] by default */
|
|
262
262
|
/* #alert - the default alert box is an info box */
|
|
263
|
-
|
|
263
|
+
[role="alert"] {
|
|
264
264
|
color: var(--info);
|
|
265
265
|
background-color: var(--bg-info);
|
|
266
266
|
border: var(--solid) var(--info-low);
|
|
@@ -271,7 +271,7 @@ i[class^='i-'] {
|
|
|
271
271
|
}
|
|
272
272
|
|
|
273
273
|
/* #headers - a single header style since alerts only need 1 header typically */
|
|
274
|
-
|
|
274
|
+
[role="alert"] :where(h1,h2,h3,h4,h5,h6) {
|
|
275
275
|
color: var(--info-low);
|
|
276
276
|
font-size: var(--large);
|
|
277
277
|
font-weight: var(--bold);
|
|
@@ -279,24 +279,24 @@ i[class^='i-'] {
|
|
|
279
279
|
}
|
|
280
280
|
|
|
281
281
|
/* #success #warning #error #alert - other alert types get their own colors */
|
|
282
|
-
.success
|
|
282
|
+
[role="alert"].success {
|
|
283
283
|
color: var(--success);
|
|
284
284
|
background-color: var(--bg-success);
|
|
285
285
|
border: var(--solid) var(--success-low);
|
|
286
286
|
}
|
|
287
|
-
.warning
|
|
287
|
+
[role="alert"].warning {
|
|
288
288
|
color: var(--warning);
|
|
289
289
|
background-color: var(--bg-warning);
|
|
290
290
|
border: var(--solid) var(--warning-low);
|
|
291
291
|
}
|
|
292
|
-
.error
|
|
292
|
+
[role="alert"].error {
|
|
293
293
|
color: var(--error);
|
|
294
294
|
background-color: var(--bg-error);
|
|
295
295
|
border: var(--solid) var(--error-low);
|
|
296
296
|
}
|
|
297
|
-
.success
|
|
298
|
-
.warning
|
|
299
|
-
.error
|
|
297
|
+
[role="alert"].success :where(h1,h2,h3,h4,h5,h6) { color: var(--success-low); }
|
|
298
|
+
[role="alert"].warning :where(h1,h2,h3,h4,h5,h6) { color: var(--warning-low); }
|
|
299
|
+
[role="alert"].error :where(h1,h2,h3,h4,h5,h6) { color: var(--error-low); }
|
|
300
300
|
|
|
301
301
|
|
|
302
302
|
/* -----------------------------------------------------------------------------
|
|
@@ -497,26 +497,26 @@ menu > li > button, menu > li > button:hover {
|
|
|
497
497
|
/* #secondary #button - less emphasized than the standard button
|
|
498
498
|
// .......................................................................... */
|
|
499
499
|
|
|
500
|
-
button.secondary, .secondary.button {
|
|
500
|
+
button.secondary, .secondary.button, .secondary::file-selector-button { /* [0011] / [0020] specificity */
|
|
501
501
|
color: var(--foreground); /* invert foreground/background */
|
|
502
502
|
background-color: var(--background); /* invert foreground/background */
|
|
503
503
|
border-color: var(--foreground);
|
|
504
504
|
}
|
|
505
505
|
|
|
506
|
-
:where(button, .button).secondary:hover {
|
|
506
|
+
:where(button, .button).secondary:hover, .secondary::file-selector-button:hover { /* [0020] specificity */
|
|
507
507
|
background-color: var(--contrast); /* TODO: make grey in dark mode */
|
|
508
508
|
}
|
|
509
509
|
|
|
510
510
|
/* #tertiary #button - a link-like button
|
|
511
511
|
// .......................................................................... */
|
|
512
512
|
|
|
513
|
-
button.tertiary, .tertiary.button {
|
|
513
|
+
button.tertiary, .tertiary.button, .tertiary::file-selector-button { /* [0011] / [0020] specificity */
|
|
514
514
|
color: var(--foreground); /* invert foreground/background */
|
|
515
515
|
background-color: unset; /* border is transparent */
|
|
516
516
|
padding-inline: var(--xxs);
|
|
517
517
|
}
|
|
518
518
|
|
|
519
|
-
:where(button, .button).tertiary:hover {
|
|
519
|
+
:where(button, .button).tertiary:hover, .tertiary::file-selector-button:hover { /* [0020] specificity */
|
|
520
520
|
text-decoration: underline; /* TODO: make grey in dark mode */
|
|
521
521
|
border-color: var(--transparent);
|
|
522
522
|
}
|
|
@@ -177,6 +177,16 @@ form h2, form p { grid-column: full; }
|
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
179
|
|
|
180
|
+
/* #label becomes inline-grid to take full row --height - EXPERIMENTAL
|
|
181
|
+
// TODO: fix label-to-textarea baseline alignment, and radio/checkbox height
|
|
182
|
+
// .......................................................................... */
|
|
183
|
+
label {
|
|
184
|
+
display: inline-grid;
|
|
185
|
+
grid-auto-flow: column;
|
|
186
|
+
height: var(--height);
|
|
187
|
+
align-content: center;
|
|
188
|
+
}
|
|
189
|
+
|
|
180
190
|
/* TEMP: moved from states.css ++++++++++++++++++++++++++++++++++++++++++++++ */
|
|
181
191
|
/* #form #ul - since lists in forms typically list out form controls, remove
|
|
182
192
|
the bullet styling from them - [0002] specificity */
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
--i-phone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2' /></svg>");
|
|
39
39
|
--i-send: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>send</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><line x1='10' y1='14' x2='21' y2='3' /><path d='M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5' /></svg>");
|
|
40
40
|
--i-server-cog: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>server cog</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='3' y='4' width='18' height='8' rx='3' /><path d='M12 20h-6a3 3 0 0 1 -3 -3v-2a3 3 0 0 1 3 -3h10.5' /><circle cx='18.001' cy='18' r='2' /><path d='M18.001 14.5v1.5' /><path d='M18.001 20v1.5' /><path d='M21.032 16.25l-1.299 .75' /><path d='M16.27 19l-1.3 .75' /><path d='M14.97 16.25l1.3 .75' /><path d='M19.733 19l1.3 .75' /><path d='M7 8v.01' /><path d='M7 16v.01' /></svg>");
|
|
41
|
+
--i-settings: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>settings</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z' /><path d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0' /></svg>");
|
|
41
42
|
--i-trash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>delete</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><line x1='4' y1='7' x2='20' y2='7' /><line x1='10' y1='11' x2='10' y2='17' /><line x1='14' y1='11' x2='14' y2='17' /><path d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12' /><path d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3' /></svg>");
|
|
42
43
|
--i-user-circle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><circle cx='12' cy='12' r='9' /><circle cx='12' cy='10' r='3' /><path d='M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855' /></svg>");
|
|
43
44
|
--i-user-off: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>disable</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14.274 10.291a4 4 0 1 0 -5.554 -5.58m-.548 3.453a4.01 4.01 0 0 0 2.62 2.65' /><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 1.147 .167m2.685 2.681a4 4 0 0 1 .168 1.152v2' /><line x1='3' y1='3' x2='21' y2='21' /></svg>");
|
|
@@ -264,13 +264,13 @@ tbody tr:hover, tbody tr:hover th {
|
|
|
264
264
|
/* mark required fields' labels; labels usually follow checkboxes & radios */
|
|
265
265
|
/* :has() is only safari 16+ and chrome 105+ for now */
|
|
266
266
|
@supports selector(:has(*)) {
|
|
267
|
+
/* TODO: exclude case where a * is already present at the end of the label */
|
|
267
268
|
label:has(+ :is(input, select):not([type="checkbox"], [type="radio"]):required)::after,
|
|
268
269
|
input:where([type="checkbox"], [type="radio"]):required + label::after {
|
|
269
270
|
content: " *";
|
|
270
271
|
}
|
|
271
|
-
/* mark as successful the fieldset & legend borders for valid radio buttons */
|
|
272
|
-
/* :has() is safari only for now */
|
|
273
272
|
|
|
273
|
+
/* mark as successful the fieldset & legend borders for valid radio buttons */
|
|
274
274
|
fieldset:has([type="radio"]:required:checked),
|
|
275
275
|
fieldset:has([type="radio"]:required:checked) legend {
|
|
276
276
|
border-color: var(--success, forestgreen);
|
data/lib/clairity.css/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: clairity.css
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- clairity
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-
|
|
11
|
+
date: 2023-06-18 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: railties
|
|
@@ -122,7 +122,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
122
122
|
- !ruby/object:Gem::Version
|
|
123
123
|
version: '0'
|
|
124
124
|
requirements: []
|
|
125
|
-
rubygems_version: 3.4.
|
|
125
|
+
rubygems_version: 3.4.14
|
|
126
126
|
signing_key:
|
|
127
127
|
specification_version: 4
|
|
128
128
|
summary: clairity.css is a simple, semantic classless CSS framework and future HTML-first
|