clairity.css 0.2.0 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 163be46874756a5231e475c95d45a25d38a8a885a37e310db7241f6a3e263afe
4
- data.tar.gz: a96f76cc8e47c0db378013e9c53e2fdbbb616a27d65bab50318eaba640b4e677
3
+ metadata.gz: 7b72fdbcec2b2d980f9a9c29277faebfd6b98e20723458f1938bd59fe01f25c8
4
+ data.tar.gz: 19cfbc2063ec59d6d405cb289205817193c9fd8f8947702cd54bdde74c5df1f3
5
5
  SHA512:
6
- metadata.gz: 10c2542beddd54bdb64cb7a7814a8ed7759c219ed3fc20805793f178918a6b22e29a29a4c18742304a23b8e96c5ea4f57d28cc4fb260fe9c857884bfe9ca56a4
7
- data.tar.gz: '073693dbf6e84957586a0bc2f05a562f4d3cc5ae9a6d1a0a6906565c93c2d9e8e35afbf35d2fd2f6c25e21577d0bcf3170a79956b785eae2a0d1d07a1cbe4c3c'
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.2.0...HEAD
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
- (TODO: put spec sheet online and link it here)
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
- .alert {
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
- .alert :where(h1,h2,h3,h4,h5,h6) {
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.alert {
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.alert {
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.alert {
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.alert :where(h1,h2,h3,h4,h5,h6) { color: var(--success-low); }
298
- .warning.alert :where(h1,h2,h3,h4,h5,h6) { color: var(--warning-low); }
299
- .error.alert :where(h1,h2,h3,h4,h5,h6) { color: var(--error-low); }
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 { /* [0011] / [0020] specificity */
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 { /* [0020] specificity */
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 { /* [0011] / [0020] specificity */
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 { /* [0020] specificity */
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);
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ClairityCss
4
- VERSION = '0.2.0'
4
+ VERSION = '0.3.0'
5
5
  end
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.2.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-05-04 00:00:00.000000000 Z
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.12
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