v.3.4.0

SimonPadbury · Nov 27, 2024 · 59fe64f · 59fe64f
1 parent 73a1254
commit 59fe64f
Show file tree

Hide file tree

Showing 41 changed files with 6,209 additions and 6,484 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,4 @@
-<!-- 
+<!--
 • Increment version control numbers in
   README.md, baselayer.css, metadata.json,
   package.json, package-lock.json (x2), and
@@ -9,10 +9,23 @@
 
 # Baselayer 3 changelog
 
+## v.3.4.0 -- 27 November 2024
+
+* Focus styling is now based on NHS.uk / GOV.UK design systems
+* Everything is in a _container_, since the BODY tag now has `container-type: inline-size;`
+* Decoration: removed viewport-width dependant spacing (paddings, margins & gaps).
+* Utilities: `.h1` through `.h6` now only affect font-size. They do not include margins and font-weights.
+* Font weights `t-lighter` and `t-bolder` renamed as `t-thin` and `t-heavy`.
+* Text size modifiers: `{base} / t-sm / t-lg / t-long-read / t-display`
+* Colors improved. Codebase swatches. OKLAB color space. Shades now have their white or black color mix built into their shade variables, thereby making downstream color coding easier.
+* Removed: colors no longer have the built-in slight darkening for dark mode.
+* Light and dark mode now using `light-dark()`.
+* Margins, paddings, gaps, and border radius now use the same spacing variables
+
 ## v.3.3.0 -- 9 March 2024
 
-* Changed the version number `v.1` to `v.3` to prevent confusion. This is now Baselayer 3.3.0, not v.1.3.0). (From now on, the docs refer back to v.3.1.x, v.3.2.x etc.)
-* Colour styles refactored to use Hex (#) and `color-mix()` for shades, instead of OKLCH and lightness channels. Color utility classes are mostly unchanged (orange is now amber). The OKLCH color system is still available in this repository as `colors.oklch.css` but it is no loonger used.
+* Changed the version number `v.1` to `v.3` to prevent confusion. This is now Baselayer 3.3.0, not Baselayer 3 v.1.3.0). (From now on, the docs refer back to v.3.1.x, v.3.2.x etc.)
+* Colour styles refactored to use Hex (#) and `color-mix()` for shades, instead of OKLAB and lightness channels. Color utility classes are mostly unchanged (orange is now amber).
 * Form input indicators (e.g. date icon, time icon) are now visible (white) in the dark theme.
 * Removed `:active` from buttons.
 * Added `t-balance` for `text-wrap: balance` on e.g. titles.
@@ -25,20 +38,20 @@
 
 ## v.1.2.4 -- 17 Jan 2024
 
-* Increased upper wrapper of `.t-long-read` to 1.375rem (22px). 
+* Increased upper wrapper of `.t-long-read` to 1.375rem (22px).
 
 ## v.1.2.3 -- 10 Jan 2024
 
 * Improved `box-sizing: border-box`.
 * Transparent 1px solid border on buttons (previously `border: 0`).
-* Added `!important` to typography utilities `t-small` and `t-big`.
+* Added `!important` to typography utilities `t-sm` and `t-lg`.
 * Changed min-height to height on buttons (and `.btn` utility).
 
 ## v.1.2.2 -- 5 Jan 2024
 
 * Minor typographic improvements.
 * Adjusted the orange hue.
- 
+
 ## v.1.2.1 -- 13 Dec 2023
 
 * Improved native font stacks.
@@ -59,7 +72,7 @@ _The big **container query** upgrade._
 * Darkened the dark theme `<body>` element so that `bg-gray bg-900` doesn’t disappear into the page background
 * Removed `t-loose` and `t-tight` as unrequired for a _baselayer_ stylesheet.
 * Removed colors [teal, purple, brown, coolgray, warmgray] -- commented out but retained as examples for inspiration.
-* Added OKLCH lightness `--l1000` variable for use on the dark theme background color.
+* Added OKLAB lightness `--l1000` variable for use on the dark theme background color.
 * Added `font-style: normal; font-style: normal;` to `code`, `kbd`, `samp`, and `pre` tags, so that these classes could be used within italic and bold text without being affected.
 * Removed the NPM package `postcss-custom-media` because it does not work for container queries (only media queries).
 
@@ -89,8 +102,8 @@ _The big **container query** upgrade._
 
 ## v.1.0.0 -- 09 Oct 2023
 
-* A total reinvention of the Baselayer project. Not backwards compatible. 
-* Class names now contain hyphens. 
+* A total reinvention of the Baselayer project. Not backwards compatible.
+* Class names now contain hyphens.
 * New grid system.
-* OKLCH colors for theme and utility classes. A simple grayscale hex (#) fallback for pre-OKLCH browsers.
-* `baselayer.css` is less than 22 KB.
+* OKLAB colors for theme and utility classes. A simple grayscale hex (#) fallback for pre-OKLAB browsers.
+* `baselayer.css` is less than 22 KB.
diff --git a/README.md b/README.md
@@ -1,27 +1,23 @@
 ## Baselayer 3
 
-v.3.3.0 • 22.5 KB (minified) • MIT licence.
-
-A modern starter CSS library with container queries, a real CSS grid system, clamp() powered typography and spacing sizes, color-mix() color utilities, and custom properties.
+v.3.4.0 • 22 KB (minified) • MIT licence.
 
 Designed as a good place to start, Baselayer may be all you need — for small web projects. Or you may use it as a _baselayer_ to quick-start your mega project.
 
 Ready to use as-is, Baselayer gives you all this and more:
 
 * A modern CSS reset
 * Foundational accessibility features
-* A lightweight system of utility classes for controlling dimensions, positioning, spacing, borders, text, images, and colors
 * Container-responsive typography and spacing
 * Container query responsive layouts using grid and flexbox
 * Styled form elements and buttons
-* A color system based on `color-mix()` shades for for text, borders, and backgrounds
+* A lightweight system of utility classes for controlling dimensions, positioning, spacing, borders, text, images, and colors
+* A color system based on `color-mix( in OKLCH)` shades for for text, borders, and backgrounds
 * Built-in dark mode (requires a simple JavaScript theme toggler — example provided)
 * Control of many of these things using CSS variables (custom properties)
 
-Baselayer uses some modern web technologies such as CSS Grid, CSS math functions (e.g. clamp), CSS variables, CSS cascade layers, and the color-mix function. Therefore it supports only up-to-date (2023 forward) evergreen web browsers (Safari, Firefox, Chrome, Edge, etc.).
-
-(If you would rather use media queries instead of media queries, or if you need to support older browsers a while longer, all you need to do is search-and-replace `@container` → `@media`.)
+Baselayer uses modern CSS technologies such as grid, functions (e.g. `clamp()`, `color-mix()`, `light-dark()`), `var()` custom properties, and CSS class nesting. Therefore it supports only “Baseline: Widely available” (2023 forward) web browsers such as Safari, Firefox, Chrome, Edge, etc. — see [MDN: Basline compatibility](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility).
 
 **Documentation:** [https://simonpadbury.github.io/baselayer-3/](https://simonpadbury.github.io/baselayer-3/)
 
-**Changelog:** [https://github.com/SimonPadbury/baselayer-3/blob/main/README.md](https://github.com/baselayer/blob/main/CHANGELOG.md)
+**Changelog:** [https://github.com/SimonPadbury/baselayer-3/blob/main/README.md](https://github.com/baselayer/blob/main/CHANGELOG.md)
diff --git a/_src/buttons.md b/_src/buttons.md
@@ -8,15 +8,15 @@ nextPage: "/examples/"
 nextLink: "Examples"
 ---
 
-Baselayer form elements have simple background, hovers and focus styling (border is set to `1px solid transparent`). 
+Baselayer form elements have simple background, hovers and focus styling (border is set to `1px solid transparent`).
 
 ### Button types and link “pseudo-buttons”
 
 <form class="mt-2 mb-3">
   <button type="button" name="button">Button</button>
   <input type="button" name="input" value="Input Button">
-  <input type="submit" name="submit" value="Submit Button">
-  <input type="reset" name="reset" value="Reset Button">
+  <input type="submit" name="submit" value="Submit">
+  <input type="reset" name="reset" value="Reset">
   <a class="btn" href="">Link “button”</a>
 </form>
 
@@ -40,7 +40,7 @@ Baselayer form elements have simple background, hovers and focus styling (border
 
 ## Full-width buttons
 
-In Baselayer, buttons are pre-styled with `display: inline-flex` and centering and middling flexbox alignment. 
+In Baselayer, buttons are pre-styled with `display: inline-flex` and centering and middling flexbox alignment.
 
 So, if you want a button to stretch full-width, you can add `class="w100%"` or you can override the inline-flex by adding `class="flex"`. (Do not use `class="block"` on a button (or `.btn`) because that will override its inline flexbox.)
 
@@ -64,7 +64,8 @@ For example, here’s a full-width button with a down-caret icon and spacing con
 ```
 <button class="flex-space-between" type="button" name="button">
   Button
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></polyline></svg>
+  <!-- Icon -->
+  <svg>...</svg>
 </button>
 ```
 
@@ -78,16 +79,16 @@ Border, background, and text color utilities can be used.
 
 <form class="mt-2 mb-3">
   <label for="example-input-text">Label</label>
-  <input class="b-2 b-red" type="text" id="example-input-text" placeholder="Enter some text here">
-  <input class="b-2 b-green" type="text" id="example-input-text" placeholder="Enter some text here">
+  <input class="b-thick b-red" type="text" id="example-input-text" placeholder="Enter some text here">
+  <input class="b-thick b-green" type="text" id="example-input-text" placeholder="Enter some text here">
 </form>
 
 ```
 <label for="example-input-text">Label</label>
 
-<input class="b-2 b-red" type="text" id="example-input-text" placeholder="Enter some text here">
+<input class="b-thick b-red" type="text" id="example-input-text" placeholder="Enter some text here">
 
-<input class="b-2 b-green" type="text" id="example-input-text" placeholder="Enter some text here">
+<input class="b-thick b-green" type="text" id="example-input-text" placeholder="Enter some text here">
 ```
 
 When colorizing buttons, remember to set their `hover:` hover state shades too.
@@ -97,7 +98,7 @@ When colorizing buttons, remember to set their `hover:` hover state shades too.
     <button type="button" name="button">Button</button>
     <button class="bg-blue bg-600 hover:bg-700" type="button" name="button">Button</button>
     <button class="t-black hover:t-black bg-amber bg-400 hover:bg-500" type="button" name="button">Button</button>
-    <a class="btn b-green hover:b-700 bg-transparent bg-600 t-green t-600 hover:t-white hover:bg-green hover:bg-700" href="#/">Link “button”</a>
+    <a class="btn b-green bg-transparent t-green hover:t-white hover:bg-green" href="#/">Link “button”</a>
   </p>
 </form>
 
@@ -112,7 +113,8 @@ When colorizing buttons, remember to set their `hover:` hover state shades too.
 <button class="t-black hover:t-black bg-amber bg-400 hover:bg-500" type="button" name="button">Button</button>
 
 <!-- Green outline (a.k.a. ghost) link “button” -->
-<a class="btn b-green hover:b-700 bg-transparent bg-600 t-green t-600 hover:t-white hover:bg-green hover:bg-700" href="#/">Link “button”</a>
+
+<a class="btn b-green bg-transparent t-green hover:t-white hover:bg-green" href="#/">Link “button”</a>
 ```
 
 ## Buttons with icons
@@ -157,55 +159,40 @@ The `r-pill` class on a square icon button will make it circular. (See [decorati
 
 <form>
   <p class="flex flex-middle">
-    <button class="r-pill" type="button" name="button">Button</button>&nbsp;
-    <button class="btn-icon r-pill" type="button" name="button">
+    <button class="rad rad-pill" type="button" name="button">Button</button>&nbsp;
+    <button class="btn-icon rad rad-pill" type="button" name="button">
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></line><polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></polyline></svg>
     </button>
   </p>
 </form>
 
 ```
-<button class="r-pill" type="button" name="button">Button</button>
+<button class="rad rad-pill" type="button" name="button">Button</button>
 
-<button class="btn-icon r-pill" type="button" name="button">I</button>
+<button class="btn-icon rad rad-pill" type="button" name="button">I</button>
 ```
 
 ## Button sizes
 
 Buttons (and the `btn` utility) will resize according to the font-size of the block that they are inside.
 
-You can also use the typographic size classes `t-small` and `t-big` to modify buttons directly.
+You can also use the typographic size classes `t-sm` and `t-lg` to modify buttons directly.
 
 <form class="mt-2 mb-3 flex flex-middle gap-1">
-  <button type="button" name="button" class="t-small">Button</button>
+  <button type="button" name="button" class="t-sm">Button</button>
   <button type="button" name="button">Button</button>
-  <button type="button" name="button" class="t-big">Button</button>
+  <button type="button" name="button" class="t-lg">Button</button>
 </form>
 
 ```
 <form class="flex flex-middle gap-1">
-  <button type="button" name="button" class="t-small">Button</button>
+  <button type="button" name="button" class="t-sm">Button</button>
   <button type="button" name="button">Button</button>
-  <button type="button" name="button" class="t-big">Button</button>
+  <button type="button" name="button" class="t-lg">Button</button>
 </form>
 ```
 
-Button x-axis padding is `1em`, so that it will also respond to the text size of the button.
-
-## Stretch buttons
-
-You can increase the x-axis padding (using the responsive `px-2` or `px-3`) to make a button more impressive:
+Notes on buttons:
 
-<form class="mt-2 mb-3 flex flex-middle gap-1">
-  <button type="button" name="button">Button</button>
-  <button class="px-2" type="button" name="button">Button</button>
-  <button class="px-3" type="button" name="button">Button</button>
-</form>
-
-```
-<button type="button" name="button">Button</button>
-
-<button class="px-2" type="button" name="button">Button</button>
-
-<button class="px-3" type="button" name="button">Button</button>
-```
+1. Button x-axis padding is `1em`, so that it will also respond to the text size of the button.
+2. Buttons have the same min-height as form input fields, so that they can be used in combination.