v.5.3.6

Author: SimonPadbury

CHANGELOG.md

@@ -2,7 +2,11 @@
 
 <!-- Note: update version numbers need updating every time in `metadata.json`, `package.json`, `package-lock.json` (×2), `README.md`, `CHANGELOG.md`, and `codebase.scss` -->
 
-## 28 Nov 2025 -- v.5.3.5
+## 19 Mar 2025 -- v.5.3.6
+
+* Changed utility classes `t-no-underline` to `t-underline-none` and `links-no-underline` and `links-underline-none`.
+
+## 28 Nov 2024 -- v.5.3.5
 
 * Added table modifier class `--t-lined`
 * Variable `--line-detail` renamed as `--line` throughout.
@@ -13,8 +17,8 @@
 * Color variable outputs changed to the OKLAB color space. (Tried the OKLCH color space, but this  distorted the lightness levels, especially of the lighter greens coming out as orange.)
 * Accessibility: focus state styling now based on that of the design systems of the NHS.co.uk and GOV.UK.
 * Improved `t-link-inside` and renamed as `panel-link` (old name is still present for backgards compatability).
-* Improved link variations: `t-no-underline` / `t-underline-hover-only`
-* Added link groups (for menus): `links-no-underline` / `links-underline-hover-only`
+* Improved link variations: `t-underline-none` / `t-underline-hover-only`
+* Added link groups (for menus): `links-underline-none` / `links-underline-hover-only`
 
 ## 19 Nov 2024 -- v.5.3.3
 
@@ -43,7 +47,7 @@
 * Simplified heading sizes (ems equivalent of 16px, 18px, 20px, 24px, 30px, 36px, as usually specified in WYSIWYG editors). Also, simplified by removing heading size bump for MD screens (use the responsive `clamp()` controled `t-long-read` or `t-display` in those situations where you need bigger text).
 * All Heading tags and heading utility classes now have built-in `margin-top`. As margin-block controlled by a variable. (Use `mt-0` to override.)
 * "Heading sizes" utility classes now only change text sizes. They do not affect margins offont weights.
-* Improved `.t-no-underline` and `.t-link-inside` (panel links).
+* Improved `.t-underline-none` and `.t-link-inside` (panel links).
 * All tables now need the `.table` class.
 * Paddings utility `.p-block` renamed `.p-cell` (alias `.p-block` is still available.)
 * Removed `-webkit-overflow-scrolling: touch;` from the body tag.

README.md

@@ -20,7 +20,7 @@ Install via Git: https://github.com/codebase-frontend-library/codebase-5.git
 
 ***
 
-* Current version: 5.3.5 -- see [changelog](https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md)
+* Current version: 5.3.6 -- see [changelog](https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md)
 * CSS file size: 96 KB
 * Licence: MIT
 * Developer: Simon Padbury

docs/dist/codebase.css

@@ -8,7 +8,7 @@
   <title>Accessibility - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.3.5" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.3.6" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -239,7 +239,7 @@
     <div class="px-1">
       <a
         id="site-title"
-        class="flex flex-middle gap-1 h6 my-0 pl-1 t-no-underline t-white hover:t-white"
+        class="flex flex-middle gap-1 h6 my-0 pl-1 t-underline-none t-white hover:t-white"
         :class="scrollAtTop ? 'enlarged' : ''"
         href="/codebase-5/"
         tabindex="1"
@@ -248,13 +248,13 @@
         <svg viewBox="0 0 340 180" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="2">
           <path d="M195.956 115.956c14.059-14.059 36.853-14.059 50.912 0 14.058 14.059 14.058 36.853 0 50.912L323.235 90.5l-76.367-76.368c14.058 14.059 14.058 36.853 0 50.912-14.059 14.059-36.853 14.059-50.912 0-14.059-14.059-36.853-14.059-50.912 0-14.059 14.059-14.059 36.853 0 50.912 14.059 14.059 36.853 14.059 50.912 0M17.765 90.5l76.367-76.368c-42.176 42.177-42.176 110.559 0 152.736L17.765 90.5z" fill-rule="nonzero" fill="currentColor" stroke="currentColor" stroke-width="10"></path>
         </svg>
-        <span class="t-loose t-semibold">Codebase CSS</span> <span class="ml-1 t-sm t-gray-400">v.5.3.5</span>
+        <span class="t-loose t-semibold">Codebase CSS</span> <span class="ml-1 t-sm t-gray-400">v.5.3.6</span>
       </a>
     </div>
 
     <div class="grow">
-      <div class="menu pr-1 flex flex-end sm:hidden-below links-no-underline">
-        <div class="p-cell"><a class="t-gray-100 hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.5">Download CSS</a></div>
+      <div class="menu pr-1 flex flex-end sm:hidden-below links-underline-none">
+        <div class="p-cell"><a class="t-gray-100 hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.6">Download CSS</a></div>
         <div class="p-cell"><a class="t-gray-100 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
         <div class="p-cell"><a class="t-gray-100 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md">Changelog</a></div>
       </div>  
@@ -310,7 +310,7 @@
       <div id="side-menu-wrap" class="p-2 md:pt-4 pb-6">
 
         <div class="mb-3 sm:hidden">
-          <div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.5">Download</a></div>
+          <div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.6">Download</a></div>
           <div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
         </div>
 
@@ -700,7 +700,7 @@ <h3 id="apps-and-browser-extensions" tabindex="-1">Apps and browser extensions</
 
 <footer class="relative py-3 bg-gray-900 t-center t-gray-500">
   <p class="sm:mt-3">
-    <a id="site-footer-title" class="h3 inline-block t-no-underline t-white hover:t-white" href="/codebase-5/">
+    <a id="site-footer-title" class="h3 inline-block t-underline-none t-white hover:t-white" href="/codebase-5/">
       <span class="inline-flex flex-column flex-middle flex-center">
         <!-- Codebase logo -->
         <svg style="height: 60px;" viewBox="0 0 340 180" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="2"><path d="M195.956 115.956c14.059-14.059 36.853-14.059 50.912 0 14.058 14.059 14.058 36.853 0 50.912L323.235 90.5l-76.367-76.368c14.058 14.059 14.058 36.853 0 50.912-14.059 14.059-36.853 14.059-50.912 0-14.059-14.059-36.853-14.059-50.912 0-14.059 14.059-14.059 36.853 0 50.912 14.059 14.059 36.853 14.059 50.912 0M17.765 90.5l76.367-76.368c-42.176 42.177-42.176 110.559 0 152.736L17.765 90.5z" fill-rule="nonzero" fill="currentColor" stroke="currentColor" stroke-width="10"></path></svg>
@@ -711,8 +711,8 @@ <h3 id="apps-and-browser-extensions" tabindex="-1">Apps and browser extensions</
     </a>
   </p>
 
-  <menu class="container-lg py-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
-    <div>Version: 5.3.5</div>
+  <menu class="container-lg pt-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
+    <div>Version: 5.3.6</div>
     <div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
     <div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
     <div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="/codebase-5/dist/codebase.css">CSS (minified)</a> 96 KB</div>

docs/dist/codebase.css.map

@@ -8,7 +8,7 @@
   <title>CSS Variables - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.3.5" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.3.6" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -239,7 +239,7 @@
     <div class="px-1">
       <a
         id="site-title"
-        class="flex flex-middle gap-1 h6 my-0 pl-1 t-no-underline t-white hover:t-white"
+        class="flex flex-middle gap-1 h6 my-0 pl-1 t-underline-none t-white hover:t-white"
         :class="scrollAtTop ? 'enlarged' : ''"
         href="/codebase-5/"
         tabindex="1"
@@ -248,13 +248,13 @@
         <svg viewBox="0 0 340 180" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="2">
           <path d="M195.956 115.956c14.059-14.059 36.853-14.059 50.912 0 14.058 14.059 14.058 36.853 0 50.912L323.235 90.5l-76.367-76.368c14.058 14.059 14.058 36.853 0 50.912-14.059 14.059-36.853 14.059-50.912 0-14.059-14.059-36.853-14.059-50.912 0-14.059 14.059-14.059 36.853 0 50.912 14.059 14.059 36.853 14.059 50.912 0M17.765 90.5l76.367-76.368c-42.176 42.177-42.176 110.559 0 152.736L17.765 90.5z" fill-rule="nonzero" fill="currentColor" stroke="currentColor" stroke-width="10"></path>
         </svg>
-        <span class="t-loose t-semibold">Codebase CSS</span> <span class="ml-1 t-sm t-gray-400">v.5.3.5</span>
+        <span class="t-loose t-semibold">Codebase CSS</span> <span class="ml-1 t-sm t-gray-400">v.5.3.6</span>
       </a>
     </div>
 
     <div class="grow">
-      <div class="menu pr-1 flex flex-end sm:hidden-below links-no-underline">
-        <div class="p-cell"><a class="t-gray-100 hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.5">Download CSS</a></div>
+      <div class="menu pr-1 flex flex-end sm:hidden-below links-underline-none">
+        <div class="p-cell"><a class="t-gray-100 hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.6">Download CSS</a></div>
         <div class="p-cell"><a class="t-gray-100 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
         <div class="p-cell"><a class="t-gray-100 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md">Changelog</a></div>
       </div>  
@@ -310,7 +310,7 @@
       <div id="side-menu-wrap" class="p-2 md:pt-4 pb-6">
 
         <div class="mb-3 sm:hidden">
-          <div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.5">Download</a></div>
+          <div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.6">Download</a></div>
           <div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
         </div>
 
@@ -590,7 +590,7 @@ <h3 id="example%3A-how-codebase-uses-color-variables" tabindex="-1">Example: How
 
 <footer class="relative py-3 bg-gray-900 t-center t-gray-500">
   <p class="sm:mt-3">
-    <a id="site-footer-title" class="h3 inline-block t-no-underline t-white hover:t-white" href="/codebase-5/">
+    <a id="site-footer-title" class="h3 inline-block t-underline-none t-white hover:t-white" href="/codebase-5/">
       <span class="inline-flex flex-column flex-middle flex-center">
         <!-- Codebase logo -->
         <svg style="height: 60px;" viewBox="0 0 340 180" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="2"><path d="M195.956 115.956c14.059-14.059 36.853-14.059 50.912 0 14.058 14.059 14.058 36.853 0 50.912L323.235 90.5l-76.367-76.368c14.058 14.059 14.058 36.853 0 50.912-14.059 14.059-36.853 14.059-50.912 0-14.059-14.059-36.853-14.059-50.912 0-14.059 14.059-14.059 36.853 0 50.912 14.059 14.059 36.853 14.059 50.912 0M17.765 90.5l76.367-76.368c-42.176 42.177-42.176 110.559 0 152.736L17.765 90.5z" fill-rule="nonzero" fill="currentColor" stroke="currentColor" stroke-width="10"></path></svg>
@@ -601,8 +601,8 @@ <h3 id="example%3A-how-codebase-uses-color-variables" tabindex="-1">Example: How
     </a>
   </p>
 
-  <menu class="container-lg py-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
-    <div>Version: 5.3.5</div>
+  <menu class="container-lg pt-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
+    <div>Version: 5.3.6</div>
     <div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
     <div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
     <div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="/codebase-5/dist/codebase.css">CSS (minified)</a> 96 KB</div>

docs/docs/1-getting-started/accessibility/index.html

@@ -8,7 +8,7 @@
   <title>Element grid - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.3.5" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.3.6" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -239,7 +239,7 @@
     <div class="px-1">
       <a
         id="site-title"
-        class="flex flex-middle gap-1 h6 my-0 pl-1 t-no-underline t-white hover:t-white"
+        class="flex flex-middle gap-1 h6 my-0 pl-1 t-underline-none t-white hover:t-white"
         :class="scrollAtTop ? 'enlarged' : ''"
         href="/codebase-5/"
         tabindex="1"
@@ -248,13 +248,13 @@
         <svg viewBox="0 0 340 180" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="2">
           <path d="M195.956 115.956c14.059-14.059 36.853-14.059 50.912 0 14.058 14.059 14.058 36.853 0 50.912L323.235 90.5l-76.367-76.368c14.058 14.059 14.058 36.853 0 50.912-14.059 14.059-36.853 14.059-50.912 0-14.059-14.059-36.853-14.059-50.912 0-14.059 14.059-14.059 36.853 0 50.912 14.059 14.059 36.853 14.059 50.912 0M17.765 90.5l76.367-76.368c-42.176 42.177-42.176 110.559 0 152.736L17.765 90.5z" fill-rule="nonzero" fill="currentColor" stroke="currentColor" stroke-width="10"></path>
         </svg>
-        <span class="t-loose t-semibold">Codebase CSS</span> <span class="ml-1 t-sm t-gray-400">v.5.3.5</span>
+        <span class="t-loose t-semibold">Codebase CSS</span> <span class="ml-1 t-sm t-gray-400">v.5.3.6</span>
       </a>
     </div>
 
     <div class="grow">
-      <div class="menu pr-1 flex flex-end sm:hidden-below links-no-underline">
-        <div class="p-cell"><a class="t-gray-100 hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.5">Download CSS</a></div>
+      <div class="menu pr-1 flex flex-end sm:hidden-below links-underline-none">
+        <div class="p-cell"><a class="t-gray-100 hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.6">Download CSS</a></div>
         <div class="p-cell"><a class="t-gray-100 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
         <div class="p-cell"><a class="t-gray-100 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md">Changelog</a></div>
       </div>  
@@ -310,7 +310,7 @@
       <div id="side-menu-wrap" class="p-2 md:pt-4 pb-6">
 
         <div class="mb-3 sm:hidden">
-          <div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.5">Download</a></div>
+          <div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.6">Download</a></div>
           <div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
         </div>
 
@@ -618,7 +618,7 @@ <h2 id="utility-class-spacing" tabindex="-1">Utility class spacing</h2>
 
 <footer class="relative py-3 bg-gray-900 t-center t-gray-500">
   <p class="sm:mt-3">
-    <a id="site-footer-title" class="h3 inline-block t-no-underline t-white hover:t-white" href="/codebase-5/">
+    <a id="site-footer-title" class="h3 inline-block t-underline-none t-white hover:t-white" href="/codebase-5/">
       <span class="inline-flex flex-column flex-middle flex-center">
         <!-- Codebase logo -->
         <svg style="height: 60px;" viewBox="0 0 340 180" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="2"><path d="M195.956 115.956c14.059-14.059 36.853-14.059 50.912 0 14.058 14.059 14.058 36.853 0 50.912L323.235 90.5l-76.367-76.368c14.058 14.059 14.058 36.853 0 50.912-14.059 14.059-36.853 14.059-50.912 0-14.059-14.059-36.853-14.059-50.912 0-14.059 14.059-14.059 36.853 0 50.912 14.059 14.059 36.853 14.059 50.912 0M17.765 90.5l76.367-76.368c-42.176 42.177-42.176 110.559 0 152.736L17.765 90.5z" fill-rule="nonzero" fill="currentColor" stroke="currentColor" stroke-width="10"></path></svg>
@@ -629,8 +629,8 @@ <h2 id="utility-class-spacing" tabindex="-1">Utility class spacing</h2>
     </a>
   </p>
 
-  <menu class="container-lg py-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
-    <div>Version: 5.3.5</div>
+  <menu class="container-lg pt-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
+    <div>Version: 5.3.6</div>
     <div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
     <div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
     <div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="/codebase-5/dist/codebase.css">CSS (minified)</a> 96 KB</div>