clairity.css 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '03182618c372285ec43b03d258e897e30bd664e63c7a6fb1233ee03bd17d2b4c'
-  data.tar.gz: 040110db6d633bbef9bf3d7afc77f6dd72e808e26ecb251bbe39f57645aac97f
+  metadata.gz: 7fc66e74a6d2155fe9f589d0b4b32ab365b6ac466c9319c8ddda90528d11e8c1
+  data.tar.gz: ef0b2fad496abd68562f0fa8cc45e25e003aba4e375b784f33cfab29bd22bbe3
 SHA512:
-  metadata.gz: 04f1f1637aad3a420dba9a51e226484001f117f404d19f353c90729dde1058c6a73fb4120bd07dbfe2316294a42c60d8c524ce4f4236e1ac8383a79e0504f84a
-  data.tar.gz: 8ac5c4c0462ac43df99c4312e6856b6a73e13973b504c9ad5ade8ed656c563d21dfa2a32ef65ce96e295d9d100a5bc18994b157d90256cd8eba2f56bd0eaf47c
+  metadata.gz: 54dc10253e7948c79ad1ae98e41bdac13c5ce2d11debb74228f340be56cb00df640c481e0ac0e326b7c398de8015a306781f2fdb7f98436f9645f3e2a84e3b42
+  data.tar.gz: b7b019ee3a275e1514edec06ac4ddff518dc644cb599c8b17abd507d01968aead9740aad7e21bd1b5f7ac6a9591f5e413d9d707674ff72fc2f1f91dd35580718

data/CHANGELOG.md

@@ -9,6 +9,8 @@ Expect pre-v1.0 releases to have many backwards incompatible changes, being prim
 
 This section is for recording changes committed since the last release.
 
+### General
+
 
 ### `clairity.basic.css`
 
@@ -50,12 +52,75 @@ This section is for recording changes committed since the last release.
 
 
 
+## v0.1.2 - 2023-04-21
+
+The big change here is fixing the color palette, which was left in an inconsistent state after attempting to use css relative color syntax, which is very much not ready for prime time. We also still need to fix accent coloring for differentiated text (e.g., `<code>`, `<var>`, `<pre>`, `<xmp>`, `<kbd>`) when using okLCH rather than HSL (TODO).
+
+Our experiment using the perceptually-uniform (but not volumetrically-uniform) okLCH color space to generate a palette programmatically has failed for the general case, as noted in our v0.0.3 release notes below (aka, the dark yellow problem). We'll need to decide whether to keep those artifacts around, move them into an optional css file, or remove them entirely.
+
+
+### General
+
+* TEMP: duplicate `assets` from `lib` into `docs` directory to render sample pages correctly; longer-term, need to find a better solution than duplicating files.
+* add `ruby` and `x86_64-linux` as platforms in `Gemfile.lock` via `bundle lock --add-platform ruby` and `bundle lock --add-platform x86_64-linux` to get github actions to stop failing the build job
+* add files from `public` to `docs` so they show up on the [<samp class="clairity">clairity.css</samp> home page](https://css.clairity.blog)
+* add spec page stylesheet (`clairity.html.css`) to show a full sample color palette in both hsl and oklch color spaces (most, if not all, sites will not have 9 brand colors, so we don't define all of these in the framework itself)
+
+
+### `variables.css`
+
+Note that `variables.css` defines logical/semantic colors to be used in sites/apps while `palette.css` defines the color palette to which logical colors are mapped, decoupling semantic meaning from the underlying color definition (we dove headlong into the naming things problem).
+
+* fix the `--contrast` color
+  * increase default contrast of the default (light mode) `--constrast` color
+  * for dark mode, use `--translucent` for the `--contrast` color, so as to cast a tint onto the background color, rather than changing the color (for slight contrast)
+* for dark mode, lighten the `--link` color a bit
+
+
+### `palette.css`
+
+
+* add `--a2` to alpha transparency scale (not sure if we need a full scale here or not)
+* add `--l25` to the okLCH lightness scale (TODO: use a single lightness scale for both HSL & okLCH)
+* add okLCH version of the `--primary` color scale (this fixes most of the mismatched/missing color problems when using okLCH)
+
+
+### `cosmetic.css`
+
+* links in headings shouldn't be differentiated by color, to reduce visual distraction
+  * set the `--heading` color explicitly on heading elements (an equivalent from for heading classes is set in `classes.css` to avoid violating our no classes rule for `cosmetic.css`)
+  * add the `:visited` state (which only applies to `<a>` and `<area>` elements that have an `href`) to the elements this rule applies to
+
+
+### `classes.css`
+
+* restore `width` and `margin-inline` on `100dvi` class to address the horizontal scrollbar issue (works in some cases, but not all)
+* as in `cosmetic.css` with heading elements, set the `--heading` color explicitly on unvisited and `:visited` links in heading classes
+
+
+### `components.css`
+
+* explicitly set `z-index` to `0` (creating a stacking context) on a `.banner` `.content` block, as safari uses source order otherwise, as a `.banner` hero image has a z-index of `-1` (and otherwise sits on top of `.content` if it comes before the image in the source)
+* remove the superfluous `a` designation on `:visited` in the rule to color `[aria-label="primary"]` and `nav menu li` links with the `--link` color, as it unnecessarily increases specificity and `:visited` only applies to `<a>` and `<area>` elements with an `href` anyway
+
+
+## v0.1.1 - 2023-04-19
+
+* github added `docs` directory with a `CNAME` file to deploy to github pages (the gemspec doesn't need this file, since it's for github only)
+* added sample `index.html` to docs directory to see it in action
+
 
 ## v0.1.0 - 2023-04-19
 
 These changes bring <samp class="clairity">clairity.css</samp> to present day, hence the bump to v0.1.0 rather than v0.0.4. This is also the first version to release on rubygems.
 
 
+### General
+* `README.md` release checklist
+  * update with correct `git` command to push commits with (annotated) tags
+  * note that `Gemfile.lock` might change, so `bundle` it again if need be
+
+
 ### `variables.css`
 
 * tweak the `--small` font size from `0.9rem` to `0.875rem` for more differentiation with `--medium`
@@ -101,7 +166,7 @@ Cosmetic adjustments typically tweak base styles for specific situations.
 
 ### `classes.css`
 
-* apply `width` and `margin-inline` on `100dvi` class to address the horizontal scrollbar issue (works in some cases, but not all)
+* temporarily remove `width` and `margin-inline` on `100dvi` class to address the horizontal scrollbar issue
 * add semantic state color classes `.valid`, `.invalid`, and `.unknown`
 * add `.i-home-edit`, `.i-mail-check`, `.i-mail-x`, `.i-send`, `.i-server-cog`, `.i-user-circle`, `.i-user-off` icon classes
 * add `.unadorned` class to remove `::before` and `::after` content, which is useful for adding a custom icon to an element that already has a default icon
@@ -146,7 +211,6 @@ The changes encompassed by this release were largely completed by about October
 
 ### General
 
-- in `README.md`, updated the release checklist with correct `git` command to push commits with (annotated) tags
 - added `icons.css` - a minimal set of svg icons exposed as CSS variables
 - emulating the nice developer ergonomics of icon fonts, we overhauled icons entirely so that we can
   - use css variables to define svg icons (rather than being inline defined)

data/README.md

@@ -138,18 +138,22 @@ To release a new version (for gem owners), follow the release checklist in the n
 To release this gem, follow these steps:
 
 0. make sure the git user/email, git credentials, and rubygems `~/.gem/credentials` are all set correctly to be able to push to github and rubygems (only gem owners can push to rubygems).
+1. make sure gems in the bundle are up-to-date (`bundle outdated` and `bundle update`) for minor version bumps (should test major bumps first)
 1. run the test suite via `rake test` and fix any issues
 1. update the docs (haha, are there any docs yet?)
+1. copy `assets` directory (or just changed css files as the case may be) from `lib` to `docs` (our symlink trick doesn't work on github, so we really need to automate this)
 1. make sure the `CHANGELOG.md` is up to date with a summary of the changes since the last release
 1. choose a version number `X.Y.Z` for the new release based on the magnitude of the changes and in accordance with semantic versioning (replace `X.Y.Z` with the actual version number here, and below, obviously)
 1. update the version number `X.Y.Z` in `lib/clairity.css/version.rb`
-1. update the `s.files` array in `clairity.css.gemspec` with any new files outside the main gem directories (such as `lib`)
-1. build the gem with `gem build clairity.css.gemspec`, which will place it in the `pkg` directory (might have to manually move it to the `pkg` directory)
+1. `Gemfile.lock` likely needs to be updated due to the version number change, so update it via `bundle && git add Gemfile.lock`
+1. update the `s.files` array in `clairity.css.gemspec` with any new files outside the main gem directories (such as `lib`) that need to be *packaged in the gem itself*
+1. build the gem with `gem build clairity.css.gemspec` (likely in the project root directory, but that's ok for now)
 1. (optional) confirm the gem contents by unpacking it with `gem unpack clairity.css-X.Y.Z.gem` in the `pkg` directory (and delete the resultant `clairity.css-X.Y.Z` folder when finished)
-1. `git commit -m "with a descriptive commit message here"`
+1. `git commit -m "with a descriptive commit message here"` (or using our standard shortcut, `git cm "message"`)
 1. tag the newly-created commit with an annotated tag `git tag vX.Y.Z -am "summary of the tag"` (calling `git tag` without a commit hash tags the last commit)
 1. push the commit *with annotated tags* to github: `git push --follow-tags` (check that git remote points to `origin` at `clairity/clairity.css` with `git remote -v`)
-1. push the gem to rubygems: `gem push clairity.css-X.Y.Z.gem`
+1. push the gem (sitting in the project root directory) to rubygems: `gem push clairity.css-X.Y.Z.gem`
+1. manually (as it doesn't do it automatically, despite what the docs say) move the gem package to the `pkg` directory: `mv clairity.css-X.Y.Z.gem pkg`
 
 
 ### Contributing

data/lib/assets/css/clairity/classes.css

@@ -43,9 +43,9 @@ body > *:not(.fluid) {
 
 /* #100dvi - dynamic full width of the viewport */
 ._100dvi, [class~="100dvi"] {
-  /*width:                  100dvi;*/
+  width:                  100dvi;
   max-width:              100dvi;    /* still has horizontal scrollbar issues */
-  /*margin-inline:          calc(50% - 50dvi - var(--xs));neg margin if needed*/
+  margin-inline:          calc(50% - 50dvi - var(--xs));/*neg margin if needed*/
 }
 
 
@@ -101,6 +101,13 @@ body > *:not(.fluid) {
 .h6 { --min-font: 1;      --max-font: 1.125;  }
 .h5, .h6 { font-weight:   var(--bold);        }
 
+/* dampen the prominence of links in headings; keep in sync with cosmetic.css */
+:where(.h1, .h2, .h3, .h4, .h5, .h6) :is(a, :visited) {
+  color:                  var(--heading);
+  font-weight:            unset;
+  text-decoration-style:  dotted;
+}
+
 /* text providing extra detail to a heading. p-subtitle is a microformat 
    (plaintext) alternative class name for .subtitle
 // .......................................................................... */

data/lib/assets/css/clairity/components.css

@@ -154,6 +154,7 @@ i[class^='i-'] {
 
 /* -----------------------------------------------------------------------------
 //  #banner - header that usually includes a hero image and perhaps a nav
+//            uses the grid `place-items: center` technique on all children
 // -------------------------------------------------------------------------- */
 
 .banner {
@@ -176,7 +177,10 @@ i[class^='i-'] {
 /*.banner menu { margin-block: var(--ml); }*/
 
 /* banner #content - constrain content width with a css variable set on parent*/
-.banner .content { width: var(--content-width); }
+.banner .content {
+  width:                  var(--content-width);
+  z-index:                0;            /* safari uses source order otherwise */
+}
 
 /* banner grid */
 .banner > * { grid-area:  banner; }
@@ -295,7 +299,7 @@ body > nav a, body > header > nav a {
   max-height:             2.75rem;
 }
 /* visited links in the nav menu shouldn't be different colors */
-:where([aria-label="primary"], nav menu li) a:visited { color: var(--link); }
+:where([aria-label="primary"], nav menu li) :visited { color: var(--link); }
 
 /*body > nav a.button, body > header > nav a.button {
   white-space:            nowrap;

data/lib/assets/css/clairity/cosmetic.css

@@ -46,7 +46,8 @@ nav > menu > li {    display: inline;        } /* only direct children, as menu
 }
 
 /* dampen the prominence of links in headings */
-:where(h1, h2, h3, h4, h5, h6) a {
+:where(h1, h2, h3, h4, h5, h6) :is(a, :visited) {
+  color:                  var(--heading);
   font-weight:            unset;
   text-decoration-style:  dotted;
 }

data/lib/assets/css/clairity/palette.css

@@ -10,8 +10,9 @@
 :root {
   /* Palette Hues - define HSL (eventually okLCH) hues in the following broad 
      categorical color names that will be used for primary, secondary, & accent 
-     colors. Not all need to be defined or used. okLCH versions of these hues 
-     are currently defined behind an @supports rule below. range: [0, 360] */
+     colors. Not all need to be defined or used. range: [0, 360]
+     okLCH versions of these hues are defined behind an @supports rule below. */
+
   --red:                  4;            /* dark red / error color / secondary */
   --brown:                20;    
   --orange:               30;    
@@ -65,6 +66,7 @@
   /* Alpha transparency values - range: [0, 1] or [0%, 100%] */
   --a0:                   0.05;                           /* more transparent */
   --a1:                   0.1;         /* default for nearly transparent bg's */
+  --a2:                   0.2;
 
 
   /* Named flash/form message colors - highlights are more extreme & lowlights 
@@ -233,6 +235,7 @@
   --l10:                  96%;
   --l15:                  92%;    /* brighten */
   --l20:                  90%;
+  --l25:                  85%;
   --l30:                  80%;
   --l40:                  70%;
   --l45:                  67%;    /* lighten  */
@@ -267,6 +270,22 @@
   --tetradic:             oklch(var(--l50)  var(--c7)   var(--tetrad)     );
   --cotetradic:           oklch(var(--l50)  var(--c7)   var(--cotetrad)   );
 
+  --primary-100:          oklch(var(--l20)  var(--c2)   var(--1st));
+  --primary-200:          oklch(var(--l25)  var(--c4)   var(--1st));
+  --primary-300:          oklch(var(--l40)  var(--c4)   var(--1st));
+  --primary-400:          oklch(var(--l50)  var(--c4)   var(--1st));
+  --primary-500:          oklch(var(--l55)  var(--c4)   var(--1st));
+  --primary-600:          oklch(var(--l65)  var(--c4)   var(--1st));
+  --primary-700:          oklch(var(--l70)  var(--c4)   var(--1st));
+  --primary-800:          oklch(var(--l80)  var(--c4)   var(--1st));
+  --primary-900:          oklch(var(--l90)  var(--c4)   var(--1st));
+  --primary-bright:       oklch(var(--l55)  var(--c6)   var(--1st));
+  --primary-transparent:  oklch(var(--l60)  var(--c6)   var(--1st) / var(--a2));
+
+  /* CSS Color Level 5 Relative Color Syntax not supported in firefox yet,
+     see: https://bugzilla.mozilla.org/show_bug.cgi?id=1701488                */
+  /*--primary-transparent:  oklch(from var(--primary)  l  var(--c6)  h / var(--a1));*/
+
 
   /* Named flash/form message colors - highlights are more extreme & lowlights 
      less extreme versions of the base color, relative to the color scheme */

data/lib/assets/css/clairity/variables.css

@@ -166,7 +166,7 @@
 
   /* transparencies - fallback to grayscale if primary is not set */
   --pale:                 var(--primary-200, hsl(210, 0%, 45%, 0.2) );
-  --translucent:          var(--primary-transparent,hsl(210, 0%, 45%, 0.1));
+  --translucent:          var(--primary-transparent, hsl(210, 0%, 45%, 0.1));
   --transparent:          hsl(0, 0%, 45%, 0.05);
   
   /* Absolute text colors - doesn't change with color scheme */
@@ -210,7 +210,7 @@
   --checked:              var(--foreground);            /* checked / selected */
   --unchecked:            var(--bg-field);           /* to ensure consistency */
   --deactivated:          var(--300, ButtonFace);   /* selected but unfocused */
-  --contrast:             var(--primary-200, azure);       /* slight contrast */
+  --contrast:             var(--primary-100, azure);       /* slight contrast */
 
   /* Logical background colors - prefixed with bg- to show strong relationship 
      with corresponding text color (i.e., they're meant to be used together)  */
@@ -264,13 +264,13 @@
   --inactive:             var(--600, ButtonText);
   --mark:                 var(--100, CanvasText);  /* MarkText is unsupported */
   /* Logical link colors - features our primary color because it's blue       */
-  --link:                 var(--primary-500, dodgerblue); /* LinkText is too
+  --link:                 var(--primary-400, dodgerblue); /* LinkText is too
                                                         dark on chrome/safari */
   --visited:              var(--primary-600, mediumorchid);
   --active:               var(--primary-400, ActiveText);
   --action:               ButtonText;
   /* Logical foreground colors */
-  --contrast:             var(--primary-900, GrayText); /* for inverted 
+  --contrast:             var(--translucent, GrayText); /* for inverted 
                                                                   hover/zebra */
   --deactivated:          var(--700);     /* disabled, selected checks/radios */
   /* Logical background colors */

data/lib/clairity.css/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clairity.css
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - clairity
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-04-19 00:00:00.000000000 Z
+date: 2023-04-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties