clairity.css 0.1.2 → 0.2.0

data/lib/assets/css/clairity/states.css

@@ -81,18 +81,6 @@ STATES - these are convenience styles that go beyond defining the base elements.
   text-decoration:        none;
 }
 
-/* #mailto #tel #sms #file #external #bookmark #download - special link icons -
-   this uses the svg mask technique to place & color icons on hover; as such, it
-   must be in a separate pseudo-element so masking doesn't bleed out to text  */
-/* #icons - set --icon to an svg from icons.css, set color with --icon-color  */
-[href^="tel:"]          { --icon: var(--i-phone);         }
-[href^="sms:"]          { --icon: var(--i-message-2);     }
-[href^="file:"]         { --icon: var(--i-file);          }
-[download]              { --icon: var(--i-file-download); }
-[href^="mailto:"]       { --icon: var(--i-mail);          }
-[rel~="external"]       { --icon: var(--i-external-link); }
-[rel~="bookmark"]       { --icon: var(--i-bookmark);      }
-
 /* chrome still needs prefixed -webkit-mask as of 20221001 */
 :where([href^="tel:"], [href^="sms:"], [href^="file:"], [download])::before, 
 :where([href^="mailto:"], [rel~="external"], [rel~="bookmark"])::after {
@@ -113,9 +101,6 @@ a:where([href^="mailto:"], [href^="tel:"], [href^="sms:"], [href^="file:"],
   --icon-color:           var(--active);
 }
 
-/* give followed fragment links some room at the top - [0010] specificity */
-[id] { scroll-margin-top: var(--l); }
-
 /* #:any-link matches both :link and :visited for anchors with an href; safari
    support is currently lagging, so don't use for now */
 :any-link {  }
@@ -126,56 +111,22 @@ a:where([href^="mailto:"], [href^="tel:"], [href^="sms:"], [href^="file:"],
 /* -----------------------------------------------------------------------------
 //  #lists - ordered and unordered lists of items
 // -------------------------------------------------------------------------- */
-/* #ul #ol - removes vertical gaps for lists within lists - uses :where() to get
-   [0001] specificity rather than [0002] */
-:where(ul, ol) :is(ul, ol) { margin: 0; }
 
 
 /* -----------------------------------------------------------------------------
 //  #tables - for tabular data
 // -------------------------------------------------------------------------- */
 
-/* makes the first column sticky                         - [0012] specificity */
-:not(tfoot) > tr th:first-of-type {
-  position:               sticky;    /* works best w/ <table> display ≅ block */
-  left:                   0;
-  background-color:       var(--background);      /* is transparent otherwise */
-}
-/* makes the table header row sticky                     - [0002] specificity */
-thead th {
-  position:               sticky;
-  top:                    0;
-  z-index:                1;  /* puts header row on top of tbody rows, including
-                                                                header column */
-  background-color:       var(--background);      /* is transparent otherwise */
-}
-/* sticks top left box on top of both header columns/rows - [0012] specificity*/
-thead th:first-child { z-index: 2; }
-
-/* zebra-striping of table rows                          - [0013] specificity */
-tbody tr:nth-child(even), tbody tr:nth-child(even) th {
-  background-color:       var(--bg-contrast);
-}
-/* this is more robust because it excludes hidden rows, but only safari and 
-   chrome support this syntax                            - [0023] specificity */
-@supports selector(:nth-child(even of :not([hidden]))) {
-tbody tr:where(:nth-child( even of :not([hidden]) )), 
-tbody tr:where(:nth-child( even of :not([hidden]) )) th {
-  background-color:       var(--bg-contrast);
-}}
-
 /* hover effect for table rows */
 tbody tr:hover, tbody tr:hover th {
   background-color:       var(--contrast);
 }
-/* adds sticky borders below thead and above tfoot */
-thead tr:last-of-type th {box-shadow: inset 0 -2px var(--secondary, --neutral);}
-tfoot :where(td, th)     {box-shadow: inset 0  2px var(--secondary, --neutral);}
 
 
 /* -----------------------------------------------------------------------------
 //  #forms - for submitting data to the server
 // -------------------------------------------------------------------------- */
+
 /* #form #fieldset #focus-within - highlight whole forms & fieldsets when one of
    its contained elements is focused - [0010] specificity */
 :where(form, fieldset):focus-within {
@@ -187,103 +138,11 @@ tfoot :where(td, th)     {box-shadow: inset 0  2px var(--secondary, --neutral);}
   border-color:           var(--border);
 }
 
-/* #form #ul - since lists in forms typically list out form controls, remove
-   the bullet styling from them - [0002] specificity */
-form ul { list-style:     none; }
-
-/* #form #section #p #div - subgrid is firefox 71+ & safari 16+ only 20221001 */
-@supports (grid-template-columns: subgrid) {
-  /* :where() can be used here, since @supports is also a recent addition */
-form :where(section, p, div) {                        /* [0001] specificity */
-  grid-column:            full;
-  display:                grid;
-  grid-template-columns:  subgrid;
-  gap:                    inherit;
-}}
-/*form section :where(h1,h2,h3,h4,h5,h6) + p { display: block; }*/
-
-/* chrome/edge doesn't support subgrid yet but does support :has() & :where() */
-@supports selector(:has(*)) {
-  fieldset:where(:has(label, input, button, textarea, select, fieldset)) {
-    margin:               0;
-    display:              grid;
-    grid-template-columns:[labels full-start] 3fr [elements] 7fr [full-end];
-    gap:                  var(--m);
-  }
-  fieldset:where(:has(p :is([type='checkbox'], [type='radio'])):not(:has(select,
-      textarea, [type="text"], [type="date"], [type="email"], [type="password"],
-      [type="datetime-local"], [type="search"]))) {
-    row-gap:              0;
-  }
-  /* since grid properties fall through p tags, assign margin-top to first child
-  elements to get a gap between paragraphs of different input types */
-  fieldset p:has([type='checkbox'], [type='radio']) + p:has([type='radio'], 
-      [type='checkbox']) :is([type='radio'], [type='checkbox'], 
-      label):first-of-type {
-    margin-top:           var(--m);
-  }
-  /* chrome/edge doesn't support subgrid, so pierce the grid barrier instead  */
-  fieldset :where(p:has(label, input, button, textarea, select, fieldset)) {
-    display:              contents;
-  }
-  /* labels go on the labels gridline */
-  :where(fieldset :is(p, div)) label {
-    grid-column:          labels;
-  }
-  /* lists that contain radios/checkboxes go on the elements gridline */
-  form:has(fieldset :where(select, textarea, [type="text"], [type="date"], 
-      [type="email"], [type="password"], [type="datetime-local"], 
-      [type="search"])) fieldset ul:has(li label :where([type='radio'], 
-      [type='checkbox'])) {
-    grid-column:          elements;
-  }
-
-  /* inputs on the elements gridline; pad right side away from fieldset line  */
-  :where(fieldset) :where(p):has(input, button, textarea, select, fieldset) 
-      :where(input:not(:is([type='checkbox'],[type='radio']), button, 
-      textarea, select, fieldset)) {
-    grid-column:          elements;
-    margin-right:         var(--m);
-  }
-  /* for radios & checks, invert the placement of the input and label */
-  :where(fieldset) :where(p):has(label) :where([type='checkbox'], 
-      [type='radio']):has(+ label) {
-    grid-column:          labels;
-    align-self:           center;
-    justify-self:         end;
-  }
-  :where(fieldset p:has(label) :is([type='checkbox'], 
-      [type='radio']):has(+ label)) + label {
-    grid-column:          elements;
-    justify-self:         start;
-  }
-  /* for paragraph tags that aren't form element containers, span the grid */
-  :where(fieldset) :where(p, div, h2, h3, h4, h5, h6):not(:has(label, input, 
-      button, textarea, select, fieldset)) {
-    display:              block;
-    grid-column:          full;
-  }
-}
-/*form :where(fieldset, input, select, button, input[type="button"]) { 
-  grid-column:            elements; 
-}*/
-
-fieldset > :last-child {
-  margin-bottom:          0;
-}
-
 
 /* -----------------------------------------------------------------------------
 //  #inputs - standard form input elements
 // -------------------------------------------------------------------------- */
 
-/* if [size] is set on an input, respect that choice - [0011] specificity */
-input[size] {
-  width:                  fit-content;
-  min-width:              unset;
-  max-width:              unset;
-}
-
 /* #input #optgroup #option #textarea #select #read-only #focus - bg field icons
    are Field system color by default, and --icon-color on focus/hover */
 :where(input, optgroup, option, textarea, select):focus {
@@ -291,48 +150,6 @@ input[size] {
   --icon-color:           var(--primary);
 }
 
-/* input images */
-[type="date"],   [type="time"],  [type="datetime"], [type="datetime-local"], 
-[type="month"],  [type="week"],  [type="url"],      [type="email"], 
-[type="number"], [type="tel"],   [type="password"], [type="search"] {
-  padding-left:           var(--height);
-  background-blend-mode:  var(--icon-blend-mode);
-}
-[type="date"], [type="month"], [type="week"] {
-                    background-image: var(--colorize-icon), var(--i-calendar); }
-[type="datetime"], [type="datetime-local"], [type="time"] {
-               background-image: var(--colorize-icon), var(--i-calendar-time); }
-[type="url"]     { background-image: var(--colorize-icon), var(--i-browser);   }
-[type="email"]   { background-image: var(--colorize-icon), var(--i-mail);      }
-[type="number"]  { background-image: var(--colorize-icon), var(--i-numbers);   }
-[type="tel"]     { background-image: var(--colorize-icon), var(--i-phone);     }
-[type="password"]{ background-image: var(--colorize-icon), var(--i-lock);      }
-[type="search"]  { background-image: var(--colorize-icon), var(--i-search);    }
-
-/*@media (prefers-color-scheme: dark) {
-[type="date"],   [type="time"],  [type="datetime"], [type="datetime-local"], 
-[type="week"],   [type="month"], [type="url"],      [type="email"], 
-[type="number"], [type="tel"],   [type="password"], [type="search"] {
-  mask:                   var(--icon) no-repeat center left / var(--field-icon);
-  background-color:       var(--icon-color);
-  mask-repeat:            no-repeat;
-  background-image:       unset;
-}
-[type="date"], [type="month"], [type="week"] { --icon: var(--i-calendar);  }
-[type="datetime"], [type="datetime-local"], [type="time"] {
-                   --icon: var(--i-calendar-time); }
-[type="url"]     { --icon: var(--i-browser);   }
-[type="email"]   { --icon: var(--i-mail);      }
-[type="number"]  { --icon: var(--i-numbers);   }
-[type="tel"]     { --icon: var(--i-phone);     }
-[type="password"]{ --icon: var(--i-lock);      }
-[type="search"]  { --icon: var(--i-search);    }
-}*/
-
-/* hide nav search's placeholder text if the background icon is present; opacity
-   is used here because other methods are disallowed on ::placeholder - [0001]*/
-:where(nav) :where([type="search"])::placeholder { opacity: 0; }
-
 :where(input, optgroup, option, textarea, select):required:is(:valid,:in-range){
   border-color:           var(--success-high, forestgreen);
 }
@@ -345,7 +162,7 @@ input[size] {
 :where(textarea, [type="text"], [type="date"], [type="time"], [type="datetime"],
       [type="datetime-local"],  [type="month"],[type="week"], [type="email"],
       [type="password"],        [type="url"],  [type="tel"],  [type="number"], 
-      [type="search"]):read-only:enabled {
+      [type="search"],          input:not([type])):read-only:enabled {
   border-style:           none;
 }
 
@@ -395,7 +212,7 @@ input[size] {
   border-color:               var(--highlighted);
 }
 */
-/* #:user-invalid - experimental - firefox only for now */
+/* #:user-invalid - firefox only for now                       - EXPERIMENTAL */
 :where(input, optgroup, option, textarea, select):user-invalid {
   border-color:           var(--error-high, firebrick);
 }
@@ -442,12 +259,6 @@ input[size] {
   background-color:       var(--deactivated);           /* greyed-out "check" */
 }
 
-/* if radios/checkboxes are inline, insert a gap between them for readability */
-:where([type="radio"] + label, [type="checkbox"] + label) +
-               :is([type="radio"], [type="checkbox"]) { /* [0010] specificity */
-  margin-left:            var(--m);
-}
-
 /* inputs are (somewhat unspecified as) "replaced elements" & therefore can't
    have ::before or ::after pseudo-elements on itself; use on label instead */
 /* mark required fields' labels; labels usually follow checkboxes & radios */
@@ -471,19 +282,6 @@ input[size] {
 }
 
 
-/* -----------------------------------------------------------------------------
-//  specialized inputs - #date #time #datetime-local #month #week #datetime 
-//                       #email #password #search #file #image #url #tel #color 
-//                       #range #number #hidden
-// -------------------------------------------------------------------------- */
-
-/* search decorations - [0011] specificity */
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  appearance:             none; /* needed? */
-}
-
-
 /* -----------------------------------------------------------------------------
 //  #buttons - <button>s and <input>s of type=button, reset, and submit
 // -------------------------------------------------------------------------- */
@@ -588,14 +386,6 @@ select:not(:disabled, [disabled]):hover, select:active { /* dropdown chevron  */
                     var(--checked, LinkText) 0%, var(--checked, LinkText) 100%);
 }
 
-/* #label for taller #multiple #textarea should align top - firefox 106 still 
-    doesn't properly support :has() with combinator selectors */
-@supports selector(:has(*)) {
-label:where(:has(+ [multiple],+ textarea,+ select[size])){/*[0001] specificity*/
-  vertical-align:         top;
-  align-self:             start;
-}}
-
 
 /* -----------------------------------------------------------------------------
 //  #outputs - informational output/display
@@ -613,34 +403,11 @@ progress:hover { border-color: revert; }
 //  #block text elements - elements that contain text blocks
 // -------------------------------------------------------------------------- */
 
-blockquote::before {         /* [0002] specificity is the least possible here */
-  content:                open-quote;
-  color:                  var(--pale);
-  font-size:              5rem;
-  font-family:            var(--serif);
-  left:                   var(--xs);
-  line-height:            1;
-  position:               absolute;
-  top:                    0;
-  z-index:                -1;
-}
-blockquote > :first-child {                             /* [0011] specificity */
-  margin-top:             0;
-  text-indent:            var(--m);
-}
-blockquote > :last-child {                              /* [0011] specificity */
-  margin-bottom:          0;
-}
-
 
 /* -----------------------------------------------------------------------------
 //  #inline elements - elements that occur principally within text blocks
 // -------------------------------------------------------------------------- */
 
-/* #q - inline quotations -note that you must add the closing smart quote as 
-   <q>'s automatic quotes are added via pseudo elements */
-q[cite]::after { content: "” (cf. " attr(cite) ") "; }
-
 /* #kbd #hover - remove default :hover styles - [0011] specificity */
 kbd:hover { border:       var(--solid) var(--distinguished); }
 
@@ -655,28 +422,6 @@ kbd:hover { border:       var(--solid) var(--distinguished); }
 
 /* #figure */
 figure:hover { border-color:  var(--border); }
-/* #figure #headings - #h1 #h2 #h3 #h4 #h5 #h6 ~*/
-figure > :where(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0; }
-
-/* #blockquote inside #figure - safari only for now - :where is older than :has
-   so it can be used here to reduce specificity          - [0001] specificity */
-figure:where(:has(blockquote)) {
-  background-color:       revert;
-}
-/* fix doubled margin of a blockquote in a figure        - [0002] specificity */
-figure > blockquote {
-  text-align:             start;
-  margin:                 var(--ms);
-  padding:                var(--ms);
-  max-width:              calc(var(--line-length) - (var(--ms) * 2));
-}
-
-/* #svg - [0001] specificity */
-svg:not(:where(:root)) {
-  width:                  var(--m);
-  /*max-width:              100%;*/
-  overflow:               hidden;
-}
 
 /* #audio - audio w/p controls shouldn't take up space   - [0011] specificity */
 audio:not([controls]) {
@@ -699,28 +444,6 @@ audio:not([controls]) {
 //  #interactive - built-in interactive components
 // -------------------------------------------------------------------------- */
 
-/* #dialog - built-in modal overlay - comes with 'Esc' support with no js! */
-/* wrap long dialogs in a container to scroll the body content sans button */
-dialog > :where(div, section, article) {
-  overflow-y:             auto;     /* scrolls as necessary w/ height set */
-  max-height:             calc(80vh * 0.8); /* container queries needed! */
-}
-
-dialog button {
-  margin-top:             var(--ms);
-}
-
-dialog :where(h1, h2, h3, h4, h5, h6) {
-  border-bottom:          var(--solid) var(--border);
-  border-radius:          var(--radius) var(--radius) 0 0;
-  color:                  var(--distinct);   /* differentiate dialog headings */
-  font-size:              var(--large); /* dialogs typically only need 1 heading
-                                          level, so make it all the same size */
-  margin:                 0 0 0 calc(-1 * var(--m)); /* negative left margin
-                                         lines up heading with paragraph text */
-  padding:                0 var(--m) var(--m); /* top padding provided by dialog
-                                                    padding so remove it here */
-}
 
 /* #details - an accordion-like widget for question & answer style layouts */
 /* #summary - the 'question' sub-element of details */
@@ -728,21 +451,6 @@ details:where([open]) summary {
   border-bottom:          var(--solid) var(--border);
 }
 
-details + details {
-  border-top:             0;
-  border-radius:          0;
-}
-
-details:first-of-type {
-  border-top-left-radius:     var(--radius);
-  border-top-right-radius:    var(--radius);
-}
-
-details:last-of-type {
-  border-bottom-left-radius:  var(--radius);
-  border-bottom-right-radius: var(--radius);
-}
-
 
 /* -----------------------------------------------------------------------------
 //  #breaks - spacing elements

data/lib/assets/css/clairity/utilities.css

@@ -7,7 +7,7 @@
 /* #visually-hidden - provide non-visual information semantically & accessibly*/
 /* :not() with a selection list has poor backwards compatibility as of 2022, so 
    use separate :not() clauses for now */
-.visually-hidden:not(:focus):not(:active):not(:focus-within) { /* ie9+ */
+.visually-hidden:not(:focus):not(:active):not(:focus-within) {        /* ie9+ */
   position:               absolute;
   width:                  1px;
   height:                 1px;
@@ -36,6 +36,8 @@
 /* override display mode to be block */
 .block { display:         block; }
 
+/*.center { margin-inline:  auto; }*/
+
 /* horizontally center text and menu items */
 .centered       { text-align:       center; }
 .centered menu  { justify-content:  center; }           /* [0011] specificity */
@@ -52,13 +54,22 @@
 .shadow { box-shadow:     var(--shadow) var(--300); }
 
 
-form.button_to {
-  width:                  min-content;
-}
+/* -----------------------------------------------------------------------------
+//  #colors - utility classes for setting the --color variable  - EXPERIMENTAL
+// -------------------------------------------------------------------------- */
+
+.red      { --color:      var(--error);   }
+.orange   { --color:      var(--error);   }
+.yellow   { --color:      var(--warning); }
+.lime     { --color:      var(--error);   }
+.green    { --color:      var(--success); }
+.aqua     { --color:      var(--error);   }
+.blue     { --color:      var(--info);    }
+.indigo   { --color:      var(--error);   }
+.purple   { --color:      var(--error);   }
+.violet   { --color:      var(--error);   }
+.magenta  { --color:      var(--error);   }
 
-form.button_to > [type="submit"] {
-  width:                  max-content;
-}
 
 /* -----------------------------------------------------------------------------
 //  #clairity - special font just for fun
@@ -66,3 +77,24 @@ form.button_to > [type="submit"] {
 .clairity { font-family:  Corbel, "Lucida Grande", "Lucida Sans Unicode", 
                           "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", 
                           "Liberation Sans", Verdana, "Verdana Ref",sans-serif;}
+
+
+/* -----------------------------------------------------------------------------
+//  #accessibility - support user accessibility preferences where feasible
+// -------------------------------------------------------------------------- */
+
+/* see https://css-tricks.com/a-complete-guide-to-css-media-queries/
+   and https://web.dev/prefers-reduced-motion/
+// .......................................................................... */
+@media screen and (prefers-reduced-motion: reduce) { 
+  *, ::before, ::after {
+    /* Very short durations means JavaScript that relies on events still works */
+    animation-delay:            1ms     !important;
+    animation-duration:         1ms     !important;
+    transition-delay:           1ms     !important;
+    transition-duration:        1ms     !important;
+    animation-iteration-count:  1       !important;
+    scroll-behavior:            auto    !important;
+    background-attachment:      initial !important;
+  }
+}

data/lib/assets/css/clairity.css

@@ -103,7 +103,10 @@
 
 /* shims - supports certain common markup patterns that are less semantic. 
            Import these when adding clairity.css to older sites. [OPTIONAL] */
-/*@import "clairity/shims.css" layer(clairity.utilities);*/
+@import "clairity/shims.css"/* layer(clairity.utilities);*/
 
 /* legacy - provides graceful degradation for older browsers. [OPTIONAL] */
 /*@import "clairity/legacy.css" layer(clairity.utilities);*/
+
+/* TODO: print - stylesheet for adjusting pages for print. [OPTIONAL] */
+/*@import "clairity/print.css" print;*/

data/lib/clairity.css/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ClairityCss
-  VERSION = '0.1.2'
+  VERSION = '0.2.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clairity.css
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.0
 platform: ruby
 authors:
 - clairity
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-04-21 00:00:00.000000000 Z
+date: 2023-05-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -81,12 +81,14 @@ files:
 - lib/assets/css/clairity/cosmetic.css
 - lib/assets/css/clairity/functions.css
 - lib/assets/css/clairity/icons.css
+- lib/assets/css/clairity/legacy.css
 - lib/assets/css/clairity/normalize.css
 - lib/assets/css/clairity/palette.css
 - lib/assets/css/clairity/shims.css
 - lib/assets/css/clairity/states.css
 - lib/assets/css/clairity/utilities.css
 - lib/assets/css/clairity/variables.css
+- lib/assets/images/fiery_sunburst.jpg
 - lib/assets/images/input-image.png
 - lib/assets/images/logo.png
 - lib/assets/images/profile-avatar.png