RubyGems - clairity.css - Versions diffs - 0.1.0 → 0.2.0 - Mend

clairity.css 0.1.0 → 0.2.0

Files changed (16) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +285 -39
data/README.md +10 -6
data/lib/assets/css/clairity/base.css +13 -6
data/lib/assets/css/clairity/classes.css +50 -105
data/lib/assets/css/clairity/components.css +80 -47
data/lib/assets/css/clairity/cosmetic.css +361 -6
data/lib/assets/css/clairity/legacy.css +65 -0
data/lib/assets/css/clairity/palette.css +321 -219
data/lib/assets/css/clairity/states.css +3 -295
data/lib/assets/css/clairity/utilities.css +39 -7
data/lib/assets/css/clairity/variables.css +4 -4
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

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '03182618c372285ec43b03d258e897e30bd664e63c7a6fb1233ee03bd17d2b4c'
-  data.tar.gz: 040110db6d633bbef9bf3d7afc77f6dd72e808e26ecb251bbe39f57645aac97f
+  metadata.gz: 163be46874756a5231e475c95d45a25d38a8a885a37e310db7241f6a3e263afe
+  data.tar.gz: a96f76cc8e47c0db378013e9c53e2fdbbb616a27d65bab50318eaba640b4e677
 SHA512:
-  metadata.gz: 04f1f1637aad3a420dba9a51e226484001f117f404d19f353c90729dde1058c6a73fb4120bd07dbfe2316294a42c60d8c524ce4f4236e1ac8383a79e0504f84a
-  data.tar.gz: 8ac5c4c0462ac43df99c4312e6856b6a73e13973b504c9ad5ade8ed656c563d21dfa2a32ef65ce96e295d9d100a5bc18994b157d90256cd8eba2f56bd0eaf47c
+  metadata.gz: 10c2542beddd54bdb64cb7a7814a8ed7759c219ed3fc20805793f178918a6b22e29a29a4c18742304a23b8e96c5ea4f57d28cc4fb260fe9c857884bfe9ca56a4
+  data.tar.gz: '073693dbf6e84957586a0bc2f05a562f4d3cc5ae9a6d1a0a6906565c93c2d9e8e35afbf35d2fd2f6c25e21577d0bcf3170a79956b785eae2a0d1d07a1cbe4c3c'

data/CHANGELOG.md CHANGED Viewed

@@ -4,75 +4,296 @@ The early parts of this changelog are going to be a little ambiguous and incompl
 Expect pre-v1.0 releases to have many backwards incompatible changes, being primarily meant for testing and feedback as we experiment with different approaches to common challenges leading up to a production-ready release.
+Going forward, this changelog will use the [keep a changelog](https://keepachangelog.com/) format and version according to [semantic versioning](https://semver.org/).
 ## [Unreleased]
 This section is for recording changes committed since the last release.
+### Added
+### Changed
+### Deprecated
+### Removed
+### Fixed
+### Security
+## [v0.2.0] - 20230504
+This release focused on three distinct improvements:
+  1. fixing/updating `palette.css` so that HSL and okLCH palette sets are harmonious and complete
+  1. fixing full-bleed layouts for hero headers and fat footers
+  1. adding documentation pages (all still very much works-in-progress) to flesh out both the content and structure of our fledgling documentation set
+One note related to the palette: okLCH officially lands in Firefox next week with [version 113](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/113) (the last major browser engine to do so), so we'll deprecate the HSL palette set in a year or so, and move on to primarily using okLCH then.
+### Added
+#### [clairity.css]
+* now importing `shims.css` in `clairity.css` by default (previously commented out) to be able to start moving css that is specifically meant to support non-semantic but common ("legacy") markup styles (like adding `<div>` tags around form inputs) there
+* added `legacy.css` for supporting legacy (prior to ~2020) browsers (as opposed to "legacy" markup, which is what `shims.css` adresses)
+* added future `print.css` `@import` line, as a TODO marker
+#### [palette.css]
+* better described the structure of `palette.css` in the opening comments
+* expanded the saturation scale (HSL only)
+* explicitly define the primary (9 colors) & complementary (5 colors) color sets for both HSL & okLCH
+* provide full color scales for `--primary`, `--complementary`, `--secondary`, and `--neutral` colors for both HSL & okLCH
+* provide semantic color sets for both HSL & okLCH
+  * messaging colors: `--info`, `--success`, `--warning`, `--error`
+  * state colors: `--valid`, `--invalid`, `--unknown`
+#### [base.css]
+* noted that a `<meta charset="utf-8">` declaration is needed to get certain non-Latin glyphs (like open-quote in blockquotes) to render correctly
+* added `form` as an element that gets a default `container-name` applied for `inline-size` containment/container queries
+#### [cosmetic.css]
+* make bare divs in the default body grid exclude the outermost columns (aka be "padded") by default
+* add a default `--l` (large) top margin to the site footer &mdash; that is, `footer:last-of-type` within the `<body>` element, which is not a perfect proxy for the site footer as it presumes a given html structure, but as close as we can get for now
+* rather than being confined to the `elements` grid column, let fieldsets span the `full` grid of a parent form container on narrower width viewports (`<= 35rem`), and give the legend a slightly de-emphasized treatment as well
+#### [states.css]
+* in accordance with other read-only input types, remove borders for `<input>` that don't have a `type` attribute if `:read-only` and `:enabled`
+#### [components.css]
+* added `HACK` to better contain `<footer>` elements that have the `.100dvi` class applied to them to create a full-bleed (fat) footer
+* added container query to add `--s` (small) `padding-inline` to non-`.hero`/`<img>` `.banner` elements at container sizes `<= 50rem` (800px @ 16px/rem), because there would be no inline padding/margin otherwise and content would abut the viewport edges
+* added a `max-width` to `search` inputs of `100cqi` (100% of container width) to keep it from breaking out of the containing form (this helps the `.button_to` mini-form component in particular)
+* added `.tag` class to `.tags > li` rule styling tags (this should probably be a separate rule in `classes.css` and kept in sync with `.tags > li` until css mixins become a reality, if ever)
+#### [utilities.css]
+* added a general `prefers-reduced-motion` rule [as recommended](https://css-tricks.com/a-complete-guide-to-css-media-queries/#aa-accessibility)
+#### Documentation
+* added `classes.html`, `components.html`, `grid.html`, and `palette.html` doc pages (still works in progress)
+* added `dropin.html` and `cssbed.html` sample pages, to showcase shimming for alternate html structures
+* added `site.webmanifest` to `docs` and `public` folders, mainly for [declaring favicons portably](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)
+* added a version of the Navier-Stokes equation (which describes fluid flows) to docs as another slightly more complicated example of MathML
+### Changed
-### `clairity.basic.css`
+#### [palette.css]
+* consolidated lightness scale for HSL & okLCH (using percentages)
+*
-### `clairity.classless.css`
+#### [cosmetic.css]
+* moved numerous non-state related css rules here from cosmetic.css
+  * icons for specialized links
+  * scroll-margin for elements with an `id` property
+  * removing vertical gaps between consecutive unordered/ordered lists
+  * sticky table styles for `<thead>`, `<tbody>`, and `<tfoot>`
+  * zebra striping for table rows
+  * unstyling unordered lists in forms (because they typically list out form controls like checkboxes/radio buttons rather than text)
+  * implementing the default form grid on `<fieldset>` elements
+  * extending grids into container subelements, `<section>`, `<p>`, and `<div>` (using `<p>` this way is un-semantic, but not uncommon), and fix the placement of checkboxes/radio buttons and their labels
+  * aligning labels to top for `<textarea>` and multiple `<select>` elements, which are typically multi-line in height
+  * respecting an `<input>` element's `size` property when set (we typically force form controls to fit the standard form grid)
+  * adding context icons for specialized form inputs
+  * adding gaps between inline radios/checkboxes for readability
+  * removing search decorations on search boxes
+  * styling `<blockquote>` elements
+  * adding context to `<q>` elements with a `cite` property (i.e., citations)
+  * adjustments for `<figure>` elements containing headings or blockquotes
+  * constraining non-root `<svg>` elements by default in a document
+  * styling `<dialog>` elements for better usability
+  * styling `<details>` elements in accordian configurations
+* for `<section>`, `<p>`, and `<div>` elements within forms, `display` is set to `contents` (which acts as if the container isn't there), so also unset the element's `container-type` so it can respond to container queries on the parent container (which should be the form itself in most cases)
-### `clairity.css`
+#### [states.css]
+* moved numerous non-state related css rules to cosmetic.css (see above)
-### `variables.css`
+#### [classes.css]
+* moved `body > *:not(.fluid)` rule to `legacy.css`
+* moved `.subgrid` alternative rules for browsers not supporting subgrid into `legacy.css`
+* moved experimental non-semantic color classes (like `.red`) to `utilities.css`
+* moved `.grid` and `.flex` layout classes into `components.css` as they're more component-like than simple class declarations
+* removed extra negative margin (`--xs` / `--s`) on `margin-inline` for the `.100vw` and `.100dvi` classes because it was causing centering and scrollbar issues at certain viewport widths
+* tentatively removed the `max-width: none;` declaration on the `.full` class because it interferes with applying `.full` within `.subgrid`
+* renamed the `.section` class to `.sectioning` to reduce confusion with the `<section>` element
-### `palette.css`
+#### [components.css]
+* moved `.grid` and `.flex` component layout classes here from `classes.css`
+* make `<header>` elements that don't have `.banner` applied align its items to the `baseline` so that flexed text in the header lines up visually
+* add `.subtitle` (along with `<p>`) to `<header>` subelements that flex to a full row, which forces a line wrap
+* `unset` `max-width` on `.banner` items to negate `<header>` `max-width` being set to `--line-length` by default in `cosmetic.css`
+* set `max-width` on `.content` and `<nav>` items in `.banner` to `100dvi` to keep `.content` and `<nav>` from overflowing the `.banner` in full-bleed situations
+* for `.banner` `<nav>` direct children, set `place-self` to `flex-start center` rather than `start center` to account for flex
+* moved `.button_to` mini-form (a rails-specific construct) rules here from `utilities.css`
+* moved `.card`/`.cards` media query rules for browsers that don't support container queries from here to `legacy.css`
+* moved `.tags + .buttons` rule for browsers that don't support `:has()` from here to `legacy.css`
+* moved `.dual-aside` class to `classes.css`
-### `functions.css`
+#### [utilities.css]
+* moved experimental non-semantic color classes (like `.red`) to here from `classes.css`
+* moved `.button_to` mini-form (a rails-specific construct) rules to `components.css`
-### `icons.css`
+#### Documentation
+* implement the [keep a changelog](https://keepachangelog.com/) format
+* rewrote the copy on the `index.html` page (still a work in progress) to be more generally descriptive of the <samp class="clairity">clairity.css</samp> framework
+* copied `index.html` and its sample hero image to the `public` folder, for parity with the `docs` folder (TODO: remove `public` in favor of `docs` for local testing)
+* in the `docs/css` folder, separated out of `clairity.html.css` the palette-related sample css into `palette.html.css` for reuse in the `palette.html` doc page while also remaining in `clairity.html.css` as an `@import`
+* updated header and footer links on existing docs/public pages (`index.html`, `about.html`, & `clairity.html`) to include newly added pages
-### `base.css`
-### `cosmetic.css`
+### Deprecated
-### `states.css`
+#### Documentation
+* deprecated the `public` folder for local testing, in favor of the `docs` folder, which also serves as the [docs site](https://css.clairity.blog) on github (TODO: still need to deal with symlinks for the `assets` and `css` directories, for serving local assets without duplication)
-### `classes.css`
+### Removed
-### `components.css`
+#### [palette.css]
+* removed non-numeric/semantic lightness and chroma scales in favor of uniform numeric scales (okLCH)
-### `utilities.css`
+#### [components.css]
+* removed `padding-inline` as a default from `footer` elements
+* removed unnecessary and funky `flex-basis` calculation on `<nav>` elements inside `.nav` containers that create odd wrapping situations on `<nav>` elements at certain larger viewport widths
+### Fixed
+#### [base.css]
-## v0.1.0 - 2023-04-19
+* put buttons (`button`, `[type="button"]`, `[type="submit"]`, `[type="reset"]`, and `::file-selector-button`) in the `elements` `grid-column` by default (forms default to 2-column grids), so they sit under form elements rather than under the labels
+#### Documentation
+* remove unused `.home` class on the `<body>` of `index.html`
+* remove unnecessary `.readable` class on the `<body>` and the `.full` class on `<main>` of `about.html`, which breaks the fat footer
+* removed unnecessary `.readable` class on the `<body>` of `clairity.html`, which breaks the fat footer
+* clarify in `README.md` when/why gem is moved to the `pkg` directory
+### Security
+## [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.
-### `variables.css`
+### 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`
 * add the `--field-max` variable, set to `min(47ch, 100%)`, so that form fields can stretch to a reasonable (but not unreadable) length on larger screens, but take as much space as available on small screens
-### `palette.css`
+### [palette.css]
 * similar to `--info`, `--success`, `--warning`, and `--error` semantic info colors, add semantic (icon) state colors `--valid` (green), `--invalid` (red) and `--unknown` (yellow), with `-high`, `-low` and `bg-` variants
-### `icons.css`
+### [icons.css]
 * add `--i-home-edit`, `--i-mail-check`, `--i-mail-x`, `--i-send`, `--i-server-cog`, `--i-user-circle`, `--i-user-off` icons from tabler
-### `base.css`
+### [base.css]
 Base acts like a css reset in that it (re-)defines the default styles of all html (pseudo-)elements.
@@ -82,14 +303,14 @@ Base acts like a css reset in that it (re-)defines the default styles of all htm
 * set `max-width` to `--field-max` on `<meter>` and `<progress>` elements as well
-### `cosmetic.css`
+### [cosmetic.css]
 Cosmetic adjustments typically tweak base styles for specific situations.
 * remove `<body>` grid from pages that don't have a `<main>` element but do have `<h1>` and/or `<p>` elements (aka, bare pages)
-### `states.css`
+### [states.css]
 * define link signifier `--icon`s on the element rather than its `::before` or `::after` pseudo-element, letting inheritance define it for the pseudos
 * move `mailto` link signifier icon to be `::after` the `href` link by default
@@ -99,15 +320,15 @@ Cosmetic adjustments typically tweak base styles for specific situations.
   * might want to move this base style to `cosmetic.css` (to allow it to remain part of the `classless` set of styles), or move the whole enchilada to `components.css` with the other button styles
-### `classes.css`
+### [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
-### `components.css`
+### [components.css]
 * remove top margin from the `:first-child` `<header>` in the `<body>`, typically because this header is meant to sit flush with the top of the page
   * removed the `[role=banner]` selector from this rule, because a banner may not necessarily always sit at the top of the page (even if they often do), as they could be placed inside another container
@@ -131,7 +352,7 @@ Cosmetic adjustments typically tweak base styles for specific situations.
   * firefox has limited support for `:has()` currently, and it is therefore [recommended](https://www.bram.us/2023/01/04/css-has-feature-detection-with-supportsselector-you-want-has-not-has/#the-problem) that it be unused on firefox, but we're pre-release, so leave this on for now so we can see how bad it is in firefox
-### `utilities.css`
+### [utilities.css]
 * *rails-specific*: rails adds the `.button_to` class to field-less forms it creates with the `:button_to` helper, and while this mini-form looks like a button, it tries to take up space like a form
   * taking advantage of this narrowly-targeted class, adjust widths on the form and its embedded `submit` button so it looks/behaves like other buttons
@@ -139,14 +360,13 @@ Cosmetic adjustments typically tweak base styles for specific situations.
-## v0.0.3 - 2023-04-18
+## [v0.0.3] - 2023-04-18
 The changes encompassed by this release were largely completed by about October 2022 (~6 months prior), but recorded (and released) here for posterity.
 ### 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)
@@ -163,12 +383,12 @@ The changes encompassed by this release were largely completed by about October
 - added block-style comments to css files to differentiate the different sections more easily
-### `clairity.css` file
+### [clairity.css]
 - experimented with the new `@layer` css cascade layers feature, but commented it out for now because it breaks firefox dev tools
-### `variables.css`
+### [variables.css]
 `variables.css` defines all the custom properties (css variables) used in <samp class="clairity">clairity.css</samp> other than the color palette, which is defined in `palette.css`.
@@ -197,7 +417,7 @@ The changes encompassed by this release were largely completed by about October
   - comment out the redefinition of `--action` (can't remember why)
-### `palette.css`
+### [palette.css]
 Note that the structure of the color palette, never mind the palette itself, is still very much in flux. Initially, we hoped that one of the new [LCH/okLCH color spaces](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl) would provide a nice perceptually uniform, rich palette that could be programmatically generated and also predictably transformable using css color functions for any color we desired. We wanted to have our cake and to eat it too. But alas, neither LCH or okLCH are truly capable of hands-off, mechanical palette generation and transformation for any set of colors, because of issues like [the dark yellow problem](https://uxdesign.cc/the-dark-yellow-problem-in-design-system-color-palettes-a0db1eedc99d?gi=971e71981fd1). We still like okLCH for its other qualities and will use it where we can, but our hopes of auto-paletting purely in css were but a childlike dream.
@@ -217,7 +437,7 @@ So with that said, the palette will probably move toward manually-adjusted sets
   - early indications are that this doesn't work nearly as well as we'd hoped
-### `functions.css`
+### [functions.css]
 - added `.h1, .h2, .h3, .h4, .h5, .h6` classes to fluid typography heading rule
 - removed experimental relative color scale variables (`--0` through `--15`)
@@ -229,7 +449,7 @@ So with that said, the palette will probably move toward manually-adjusted sets
   - this works in the common case but isn't quite as robust as we'd hoped (TODO: needs investigation)
-### `icons.css`
+### [icons.css]
 Eventually, we want to have a consistent set of svg icons that are uniform and pleasing, but for now, we grab whatever we can from existing sources, so that we can figure out what the minimal set of icons we need are.
@@ -237,7 +457,7 @@ Eventually, we want to have a consistent set of svg icons that are uniform and p
 - added 14 [tabler icons](https://tabler-icons.io/) as well (`--i-bookmark`, `--i-browser`, `--i-calendar`, `--i-calendar-time`, `--i-external-link`, `--i-edit`, `--i-file`, `--i-file-download`, `--i-lock`, `--i-mail`, `--i-message-2`, `--i-numbers`, `--i-phone`, `--i-trash`)
-### `base.css`
+### [base.css]
 - `*, *::before, *::after` (applies to all elements): moved non-essential defaults out of this rule (margin, padding, border, font-size, vertical-align), as `<svg>` documents can also fall under `*` (also `*` rules are less efficient, applying to everything, as it does, so minimize its use)
 - `<main>`, `<aside>`, `<article>`, `<nav>`, `<section>`, `<header>`, `<footer>`: EXPERIMENTAL - designate `inline-size` container name for these common container-type elements
@@ -256,7 +476,7 @@ Eventually, we want to have a consistent set of svg icons that are uniform and p
 - `<hr>`: make horizontal rules span the full width of a containing grid
-### `cosmetic.css`
+### [cosmetic.css]
 This file includes cosmetic adjustments to the base elements, typically via combo selectors, which don't fit the scope of `base.css`.
@@ -270,7 +490,7 @@ This file includes cosmetic adjustments to the base elements, typically via comb
 - put left-side labels for checkboxes in the `elements` grid column, left-justified
-### `states.css`
+### [states.css]
 The big change here is using css variables for svg masked icons rather than inlining them in the css, so that we can just set any icon to the `--icon` variable to get it to show up. Note that this uses a finicky masking technique that needs to be more fully documented (TODO), but we were able to support hover effects and to get it to support both light and dark modes with some mucking about with `--icon-blend-mode` (set in `variables.css`).
@@ -302,7 +522,7 @@ The big change here is using css variables for svg masked icons rather than inli
 - for non-root `<svg>` elements, lower the specificity using `:where()` and remove the max-width restriction
-### `classes.css`
+### [classes.css]
 `classes.css` encompasses mostly singular helper class rules, while `components.css` encompasses rules for multiple elements designed to work together. Meanwhile, `utilities.css` is for rules that proxy a single (or perhaps a couple related) underlying css declaration as a class.
@@ -334,7 +554,7 @@ The big change here is using css variables for svg masked icons rather than inli
   - these allow constructs like `<i class="i-burger"></i>` to show an svg icon, similar to what font icon libraries do (e.g., fontawesome)
-### `components.css`
+### [components.css]
 - `<body>` has a default grid applied here
   - rename `fullwidth` grid column name to just `full`
@@ -383,7 +603,7 @@ The big change here is using css variables for svg masked icons rather than inli
 - moved `<meter>` and `<progress>` pseudo-class definitions to `base.css` (which had the base element definitions already)
-### `utilities.css`
+### [utilities.css]
 - moved `.container` here from `classes.css`
 - moved `.block` here from `classes.css`
@@ -394,7 +614,7 @@ The big change here is using css variables for svg masked icons rather than inli
 - moved `.clairity` here from `classes.css`: sets a differentiating font for our favorite css framework!
-## v0.0.2 - 2023-04-15
+## [v0.0.2] - 2023-04-15
 After a number of diversions, including developing a (as yet unreleased) Jekyll theme for <samp class="clairity">clairity.css</samp>, our attention is back on the core css framework. This release packages <samp class="clairity">clairity.css</samp> as a Rails engine so we can use it in our Rails projects.
@@ -412,7 +632,7 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
 - `shims.css` - a place to put styles meant to support graceful degradation for older sites (not browsers, that goes in `legacy.css`)
-## v0.0.1 - 2022-06-24
+## [v0.0.1] - 2022-06-24
 <samp class="clairity">clairity.css</samp> was inspired by classless css libraries like `almond.css` and `sakura.css`, as well as a longing for a nice semantic, HTML-first css framework, like a modernized Semantic UI, but employing cutting-edge css features to remove the need for css tooling (i.e., Sass).
@@ -421,3 +641,29 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
 - `variables.css` - structure css variables (custom properties) for flexible theming
 - `base.css` - add styling block for every html element, even if empty
 - `palette.css` - separate out the color scheme into its own css file
+[unreleased]: https://github.com/clairity/clairity.css/compare/v0.2.0...HEAD
+[v0.2.0]: https://github.com/clairity/clairity.css/compare/v0.1.2...v0.2.0
+[v0.1.2]: https://github.com/clairity/clairity.css/compare/v0.1.1...v0.1.2
+[v0.1.1]: https://github.com/clairity/clairity.css/compare/v0.1.0...v0.1.1
+[v0.1.0]: https://github.com/clairity/clairity.css/compare/v0.0.3...v0.1.0
+[v0.0.3]: https://github.com/clairity/clairity.css/compare/v0.0.2...v0.0.3
+[v0.0.2]: https://github.com/clairity/clairity.css/compare/v0.0.1...v0.0.2
+[v0.0.1]: https://github.com/clairity/clairity.css/releases/tag/v0.0.1
+[clairity.basic.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity.basic.css
+[clairity.classless.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity.class.css
+[clairity.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity.css
+[variables.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/variables.css
+[palette.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/palette.css
+[functions.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/functions.css
+[icons.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/icons.css
+[base.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/base.css
+[cosmetic.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/cosmetic.css
+[states.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/states.css
+[classes.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/classes.css
+[components.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/components.css
+[utilities.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/utilities.css
+[shims.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/shims.css
+[legacy.css]: https://github.com/clairity/clairity.css/blob/master/lib/assets/css/clairity/legacy.css

data/README.md CHANGED Viewed

@@ -130,7 +130,8 @@ After checking out the repo, run `bin/setup` to install dependencies. Then, run
 To install this gem onto your local machine, run `bundle exec rake install`.
-To release a new version (for gem owners), follow the release checklist in the next section (i.e., don't `rake release` yet, until we have everything set up the way we like it).
+To release a new version (for gem owners), follow the release checklist in the next section (i.e., don't `rake release` yet, until we have everything set up the way we like it). TODO: consider automating using [release-please](https://dev.to/ajrom/release-please-ci-deployment-for-ruby-gems-4md6).
 ### Release Checklist
@@ -138,19 +139,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`
+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` (`pkg` is gitignored, so move the gem now to show a clean working directory)
 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 (from the `pkg` directory) to rubygems: `gem push clairity.css-X.Y.Z.gem`
 ### Contributing

data/lib/assets/css/clairity/base.css CHANGED Viewed

@@ -2,7 +2,7 @@
   BASE - these are the base styles for *all* elements and certain core pseudo-
          elments / -classes. for simple sites this stylesheet plus variables.css
          (where :root vars & color-scheme: light dark; are set) should suffice.
          Note that simple & full :is() support (without multiple declarations)
          only landed broadly in ~Jan 2020. With it came :where() support, and
          both now have forgiving selector lists. Since we're already implcitly
@@ -11,13 +11,17 @@
          specificity is a 4-element designation:
          [inline, #id, .class/[attr]/:pseudo-class, element/::pseudo-element]
          we'll generally shoot for [0001] specificity in this base.css file,
          with a few notable exceptions, like button-type input elements and
          [multiple] selects, and relegate higher specificity niceties to the
          states.css stylesheet. exceptions have [0010] or [0011] specificity.
-         Quickly search for elements using hashtag syntax, e.g., #a for anchors.
+         Quickly search for elements using hashtag syntax, e.g., #a for anchors,
+         reducing unwanted matches and better narrowing in on what you searched.
+         NOTE that a <meta charset="utf-8"> declaration is needed to get certain
+         non-Latin glyphs (like open-quote in blockquotes) to render correctly.
          A few key styles from normalize.css are repeated here, and marked as
          such via comments, in case normalize.css is not being used.
@@ -115,7 +119,7 @@ noscript {  }
 /* container queries - default names/types for common container elements -
     EXPERIMENTAL - only safari 16+ & chrome 93+ behind a flag for now
 // .......................................................................... */
-main, aside, article, nav, section, header, footer {
+main, aside, article, nav, section, form, header, footer {
   container-type:         inline-size;
   /*font-size:              clamp(1rem, 1rem + 1cqi, 2rem);*/
 }
@@ -124,6 +128,7 @@ aside     { container-name: aside;    }
 article   { container-name: article;  }
 nav       { container-name: nav;      }
 section   { container-name: section;  }
+form      { container-name: form;     }
 header    { container-name: header;   }
 footer    { container-name: footer;   }
@@ -404,7 +409,9 @@ button, [type="button"],[type="submit"],[type="reset"], ::file-selector-button {
   padding:                0 var(--m);
   border:                 var(--solid) var(--transparent);
   border-radius:          var(--radius);
   /*vertical-align:         bottom;*/
+  grid-column:            elements;
 }
 /* #reset */
 [type="reset"] {                                        /* [0010] specificity */
@@ -901,7 +908,7 @@ hr, hr:hover {
   margin:                 var(--l) auto;
   max-width:              var(--width);
   width:                  50%;
-  grid-column:            1 / -1;      /* span full width of a enclosing grid */
+  grid-column:            1 / -1;     /* span full width of an enclosing grid */
 }
 /* #disabled - needs to be last to "beat" the other [0010] specificity rules