Using color-scheme and light-dark() to implement dark mode (#154)

* Lint fixes.

* Implement light-dark().

* Lint css with biome, remove stylelint.

* Biome lint fixes.

* Dark mode adjustments.

* Style bug fixes.

* Colour adjustments.

* Move header and footer styles to base.

* Site header adjustments.

* Removing jQuery and umbrella libs. They where great but not needed anymore.

* Add colorScheme to optionally lock light/dark.

* Update README.

* Biome adjustments.

.pre-commit-config.yaml

@@ -1,16 +1,7 @@
 repos:
-  - repo: https://github.com/awebdeveloper/pre-commit-stylelint
-    rev: "0.0.2"
-    hooks:
-      - id: stylelint
-        files: assets/css/.*\.css$
-        additional_dependencies:
-          - "stylelint@17.4.0"
-          - "stylelint-config-standard@40.0.0"
   - repo: https://github.com/biomejs/pre-commit
-    rev: "v2.4.6"
+    rev: "v2.4.15"
     hooks:
       - id: biome-check
-        files: assets/js/.*\.js$
         additional_dependencies:
-          - "@biomejs/biome@2.4.6"
+          - "@biomejs/biome@2.4.15"

.stylelintignore

@@ -1 +0,0 @@
-libs/

.stylelintrc.yaml

@@ -1,24 +0,0 @@
-extends:
-  - stylelint-config-standard
-rules:
-  alpha-value-notation: number
-  block-no-empty: null
-  declaration-block-no-redundant-longhand-properties: null
-  declaration-empty-line-before: null
-  comment-empty-line-before:
-    - always
-    - except:
-        - first-nested
-      ignore:
-        - stylelint-commands
-        - after-comment
-  hue-degree-notation: number
-  import-notation: null
-  keyframes-name-pattern:
-    - "--.+"
-    - message: Keyframe name should be written as <dashed-ident>
-  media-feature-range-notation: prefix
-  no-descending-specificity: null
-  selector-class-pattern:
-    - "^[a-z0-9\\-\\_]+$"
-    - message: Selector should be written in lowercase with hyphens or underscore (selector-class-pattern)

README.md

@@ -42,7 +42,6 @@ Quickstart a new site with the Zen theme by using the [Zen demo repo as a templa
 * [Podcast](#podcast)
 * [Shortcodes](#shortcodes)
 * [Content security policy headers](#Content-security-policy-headers)
-* [Use npm to lint CSS and JavaScript](#use-npm-to-lint-css-and-javascript)
 * [Repository links](#repository-links)
 * [Math typesetting with KaTeX](#math-typesetting-with-katex)
 * [Getting help](#getting-help)
@@ -58,6 +57,7 @@ Quickstart a new site with the Zen theme by using the [Zen demo repo as a templa
 * Commands for linting of css and js
 * Contact form (PHP)
 * CSS grid and flex throughout
+* Dark and light mode
 * HTML5
 * Hugo Pipes for images, js and css
 * Math typesetting with KaTeX
@@ -245,8 +245,8 @@ hugo server --themesDir ../..
 Performance should be excellent.
 
 * Minimal and compliant HTML5
-* Styles 23,2 kB (6,7 kB when gzipped)
+* Styles 28 kB (8 kB when gzipped)
-* JavaScript 1 kB (with only mobile menu active, 4 Kb with all features active)
+* JavaScript 6 kB (with everything active, otherwise near zero)
 * All scripts loaded in head with "defer"
 * Optimised for HTTP/2
 
@@ -292,6 +292,7 @@ params:
     - section2              # in the <schema.org> `JSON+LD` in the page's `<head>`.
     - section3              # This theme requires Hugo `v0.109.0` or higher to
                             # generate the `BreadcrumbListing`.
+  colorScheme: "light"      # "light/dark" to lock, omit for user system preference.
   cookieConsent: true       # Show cookie consent form, default false.
   contact: "info@example.org"
   dateformat: ""            # Set the date format, default to "2 January, 2006"
@@ -303,7 +304,6 @@ params:
   image: ""                 # Relative path to site image in JSON-LD, no leading slash.
   imageMaxWidth: ""         # Max width for images added via figure shortcode.
   internalPagination: true  # Use Hugo's internal pagination template, default false.
-  jquery: true              # Add jQuery, default false.
   languageDir: ""           # Set ltr or rtl, defaults to ltr.
   logo: false               # Turn off the logo, defaults to true.
   logoPath:                 # Relative path to site logo, defaults to "images/logo.png", no leading slash.
@@ -329,7 +329,6 @@ params:
   siteName: false           # Hide the site name (visually-hidden), default true.
   submitted: true           # Show author and date information for a post.
   themeColor:               # Hex color value, used in meta tags, default "#ffffff".
-  umbrella: true            # Add Umbrella JS, default false.
 
   podcast:
     title:                  # * Feed title, defaults to site title (iTunes).
@@ -374,7 +373,7 @@ They are found in the theme `assets/css/_colors.css` and `assets/css/_variables.
 
 In most cases you likely only need to override a few values and then it is easier to set these in the custom css files.
 
-Root `assets/css/_custom.css`: Loaded last so use to override css variables and add any custom styles you need.
+Root `assets/css/_custom.css`: Loaded last so use it to override css variables and add any custom styles you need.
 
 
 ### Logo
@@ -390,13 +389,11 @@ Upload your image to [RealFaviconGenerator](https://realfavicongenerator.net/) t
 The theme will autodetect them and add the needed code.
 
 
-### Head and footer partials
+### Dark and light mode
 
-If you create partials named `head/extra.html` and/or `footer.html` they will be used. They do not exist or are empty in the theme but are supported as a convenience.
+Colors are set with the css function `light-dark()`. The first colour is used in light mode and the other colour is used in dark mode. See `assets/css/_colors.css`.
 
-Content in the "head/extra" partial will be added to the end of the "head" tag, perhaps some extra css or javascript.
+Use the param `colorScheme` to lock your site to either light or dark mode. By default the mode will follow the users system preferences.
-
-Content in the "footer" partial will replace all the default content in the "footer" tag.
 
 
 ### Layouts
@@ -432,10 +429,6 @@ There is an `assets/css/_custom.css` file meant for your custom styles. Copy it
 
 The default styles in `assets/css/_zen.css` are boring but functional. You can easily override them completely by placing an empty file named "_zen.css" in root assets/css directory.
 
-The css files are by default built for production, compressed with fingerprint.
-
-By setting the Hugo environment variable to "development" (default when running `hugo server`) they will instead be nested with sourcemaps.
-
 
 ## Render hook templates
 
@@ -835,27 +828,6 @@ The **content** that should be wrapped. Some more content.
 Includes tracking code for Matomo or Google in a way that supports Content security policy headers. Read more in my blog post [Content security policy headers when using Matomo or Google analytics](https://xdeb.org/post/2020/01/14/content-security-policy-headers-when-using-matomo-or-google-analytics/).
 
 
-## Use npm to lint CSS and JavaScript
-
-* Lint your CSS using stylelint.
-* Lint your JavaScript using biome.
-* Can lint files in the theme as well as the project assets directory.
-
-Set up your front-end development build tools:
-
-1. Install Node.js and npm, the Node.js package manager.
-2. The package.json file in your new sub-theme contains the versions of all the
-Node.js software you need. To install them run:
-
-        npm install
-
-3. Run the following commands to lint your theme and projects CSS and JavaScript code.
-
-        npm run lint-theme
-        npm run lint-project
-        nmp run lint (project + theme)
-
-
 ## Repository links
 
 Add view and edit repo links on your post. Activates when you add repository settings, see example for GitHub below. See more in the partial `repository-links.html`.

assets/css/_colors.css

@@ -1,97 +1,152 @@
+/* biome-ignore-all format: aligned columns for readability */
+
 /* Theme colours. */
 
 /* Override css variables in "assets/css/_custom.css" */
 
 :root {
+  /* Brand colours. */
+  --color-brand:                  var(--color-grey-900);
+  --color-brand-alt:              var(--color-grey-500);
+
+  /* Brand variations */
+  --color-brand-900:              oklch(from var(--color-brand) calc(l - 0.5) c h);
+  --color-brand-800:              oklch(from var(--color-brand) calc(l - 0.4) c h);
+  --color-brand-700:              oklch(from var(--color-brand) calc(l - 0.3) c h);
+  --color-brand-600:              oklch(from var(--color-brand) calc(l - 0.2) c h);
+  --color-brand-500:              oklch(from var(--color-brand) calc(l - 0.1) c h);
+  --color-brand-400:              oklch(from var(--color-brand) l c h);
+  --color-brand-300:              oklch(from var(--color-brand) calc(l + 0.1) c h);
+  --color-brand-200:              oklch(from var(--color-brand) calc(l + 0.2) c h);
+  --color-brand-100:              oklch(from var(--color-brand) calc(l + 0.3) c h);
+
+  /* Brand alt variations */
+  --color-brand-alt-900:          oklch(from var(--color-brand-alt) calc(l - 0.5) c h);
+  --color-brand-alt-800:          oklch(from var(--color-brand-alt) calc(l - 0.4) c h);
+  --color-brand-alt-700:          oklch(from var(--color-brand-alt) calc(l - 0.3) c h);
+  --color-brand-alt-600:          oklch(from var(--color-brand-alt) calc(l - 0.2) c h);
+  --color-brand-alt-500:          oklch(from var(--color-brand-alt) calc(l - 0.1) c h);
+  --color-brand-alt-400:          oklch(from var(--color-brand-alt) l c h);
+  --color-brand-alt-300:          oklch(from var(--color-brand-alt) calc(l + 0.1) c h);
+  --color-brand-alt-200:          oklch(from var(--color-brand-alt) calc(l + 0.2) c h);
+  --color-brand-alt-100:          oklch(from var(--color-brand-alt) calc(l + 0.3) c h);
+
   /* Base colours. */
   --color-black:                  oklch(1% 0.01 0);
-  --color-nearblack:              oklch(25% 0.01 0);
+  --color-grey-900:               oklch(21% 0.01 0);
-  --color-grey-700:               oklch(38% 0 0);
+  --color-grey-800:               oklch(28% 0.01 0);
-  --color-grey-600:               oklch(49% 0 0);
+  --color-grey-700:               oklch(37% 0.01 0);
-  --color-grey-500:               oklch(60% 0 0);
+  --color-grey-600:               oklch(45% 0.01 0);
-  --color-grey-400:               oklch(71% 0 0);
+  --color-grey-500:               oklch(55% 0.01 0);
-  --color-grey-300:               oklch(80% 0 0);
+  --color-grey-400:               oklch(71% 0.01 0);
-  --color-grey-200:               oklch(89% 0 0);
+  --color-grey-300:               oklch(87% 0.01 0);
+  --color-grey-200:               oklch(93% 0.01 0);
   --color-grey-100:               oklch(95% 0 0);
-  --color-nearwhite:              oklch(98% 0 0);
+  --color-white:                  oklch(99% 0 0);
-  --color-white:                  oklch(100% 0 0);
   --color-red:                    oklch(65% 0.2 24);
   --color-yellow:                 oklch(65% 0.12 80);
   --color-green:                  oklch(65% 0.19 138);
   --color-blue:                   oklch(65% 0.16 247);
 
   /* Transparent colours. */
-  --color-black-60:               oklch(0% 0 0 / 0.6);
+  --color-black-90:               oklch(1% 0.01 0 / 0.9);
-  --color-black-40:               oklch(0% 0 0 / 0.4);
+  --color-black-80:               oklch(1% 0.01 0 / 0.8);
-  --color-black-20:               oklch(0% 0 0 / 0.2);
+  --color-black-70:               oklch(1% 0.01 0 / 0.7);
-  --color-black-10:               oklch(0% 0 0 / 0.1);
+  --color-black-60:               oklch(1% 0.01 0 / 0.6);
-  --color-white-20:               oklch(100% 0 0 / 0.2);
+  --color-black-50:               oklch(1% 0.01 0 / 0.5);
-  --color-white-10:               oklch(100% 0 0 / 0.1);
+  --color-black-40:               oklch(1% 0.01 0 / 0.4);
-
+  --color-black-30:               oklch(1% 0.01 0 / 0.3);
-  /* Brand colours. */
+  --color-black-20:               oklch(1% 0.01 0 / 0.2);
-  --color-brand:                  var(--color-nearblack);
+  --color-black-10:               oklch(1% 0.01 0 / 0.1);
-  --color-brand-alt:              var(--color-grey-500);
+  --color-white-20:               oklch(99% 0 0 / 0.2);
-  --color-brand-light:            var(--color-grey-300);
+  --color-white-10:               oklch(99% 0 0 / 0.1);
-  --color-brand-dark:             var(--color-grey-700);
 
   /* Text colours. */
-  --color-text:                   var(--color-black);
+  --color-text:                   light-dark(var(--color-black), var(--color-white));
-  --color-text-bg:                var(--color-white);
+  --color-text-bg:                light-dark(var(--color-white), var(--color-black));
-  --color-text-meta:              var(--color-grey-600);
+  --color-text-meta:              light-dark(var(--color-grey-600), var(--color-grey-300));
-  --color-headings:               var(--color-nearblack);
+  --color-headings:               light-dark(var(--color-grey-900), var(--color-grey-100));
-  --color-code:                   var(--color-nearblack);
+  --color-code:                   light-dark(var(--color-grey-900), var(--color-grey-100));
 
   /* Link colours. */
-  --color-link:                   var(--color-brand);
+  --color-link:                   light-dark(var(--color-brand-500), var(--color-grey-100));
-  --color-link-visited:           var(--color-brand);
+  --color-link-visited:           light-dark(var(--color-brand-500), var(--color-grey-100));
-  --color-link-hover:             var(--color-brand-alt);
+  --color-link-hover:             light-dark(var(--color-brand-200), var(--color-brand-400));
-  --color-link-active:            var(--color-red);
+  --color-link-active:            light-dark(var(--color-red), var(--color-red));
-  --color-link-inverted:          var(--color-white);
-  --color-link-visited-inverted:  var(--color-white);
-  --color-link-hover-inverted:    var(--color-white);
-  --color-link-active-inverted:   var(--color-red);
 
   /* Button colours. */
-  --color-button:                 var(--color-brand);
+  --color-button:                 light-dark(var(--color-brand-400), var(--color-brand-100));
-  --color-button-hover:           var(--color-brand-alt);
+  --color-button-text:            light-dark(var(--color-white), var(--color-white));
-  --color-button-text:            var(--color-white);
+  --color-button-hover:           light-dark(var(--color-brand-200), var(--color-brand-300));
-  --color-button-text-hover:      var(--color-white);
+  --color-button-text-hover:      light-dark(var(--color-white), var(--color-white));
-  --color-button-disabled:        var(--color-grey-400);
+
+  /* Disabled colours. */
+  --color-disabled:               light-dark(var(--color-grey-400), var(--color-grey-600));
+  --color-disabled-alt:           light-dark(var(--color-grey-100), var(--color-grey-800));
 
   /* Border colours. */
-  --color-border:                 var(--color-brand);
+  --color-border:                 light-dark(var(--color-brand-400), var(--color-brand-200));
-  --color-border-light:           var(--color-brand-light);
+  --color-border-light:           light-dark(var(--color-brand-200), var(--color-brand-400));
-  --color-border-dark:            var(--color-brand-dark);
+  --color-border-dark:            light-dark(var(--color-brand-600), var(--color-brand-300));
 
   /* Background colours. */
-  --color-header-bg:              var(--color-white);
+  --color-body-bg:                light-dark(var(--color-white), var(--color-black));
-  --color-body-bg:                var(--color-white);
+  --color-page-bg:                light-dark(transparent, transparent);
-  --color-footer-bg:              var(--color-white);
+  --color-header-bg:              light-dark(transparent, transparent);
-  --color-backdrop:               var(--color-grey-100);
+  --color-footer-bg:              light-dark(transparent, transparent);
+  --color-backdrop:               light-dark(var(--color-black-60), var(--color-black-80));
 
   /* Mobil menu colours. */
-  --color-mobile-menu:            var(--color-brand);
+  --color-mobile-menu:            light-dark(var(--color-brand-400), var(--color-brand-400));
-  --color-mobile-menu-cover:      var(--color-black-20);
+  --color-mobile-menu-cover:      light-dark(var(--color-black-20), var(--color-black-20));
 
   /* Form colours. */
-  --color-accent:                 var(--color-brand);
+  --color-accent:                 light-dark(var(--color-brand-400), var(--color-brand-200));
 
   /* Row (e.g. in table) colours. */
-  --color-row-header:             transparent;
+  --color-row-header:             light-dark(transparent, transparent);
-  --color-row-odd:                var(--color-nearwhite);
+  --color-row-odd:                light-dark(var(--color-grey-100), var(--color-grey-900));
-  --color-row-even:               transparent;
+  --color-row-even:               light-dark(transparent, transparent);
+
+  /* Highlight colours. */
+  --color-highlight:              light-dark(var(--color-brand-400), var(--color-brand-100));
+  --color-mark-highlight:         light-dark(var(--color-red), var(--color-red));
 
   /* Status colours. */
   --color-info:                   var(--color-blue);
-  --color-info-bg:                oklch(from var(--color-blue) 100% 0.03 h);
+  --color-success:                var(--color-green);
-  --color-success:                 var(--color-green);
-  --color-success-bg:              oklch(from var(--color-green) 100% 0.03 h);
   --color-warning:                var(--color-yellow);
-  --color-warning-bg:             oklch(from var(--color-yellow) 100% 0.03 h);
   --color-error:                  var(--color-red);
-  --color-error-bg:               oklch(from var(--color-red) 100% 0.03 h);
 
-  /* Highlight colours. */
+
-  --color-highlight:              var(--color-brand-alt);
+
-  --color-mark-highlight:         var(--color-red);
+  /* Follow user system dark/light setting. */
+  color-scheme: light dark;
+
+  /* Initialize the theme variable */
+  --theme: light;
+
+  @media (prefers-color-scheme: dark) {
+    --theme: dark;
+  }
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+@container style(--theme: light) {
+  [data-theme="inverted"] {
+    color-scheme: dark;
+  }
+}
+
+@container style(--theme: dark) {
+  [data-theme="inverted"] {
+    color-scheme: light;
+  }
 }

assets/css/_variables.css

@@ -1,3 +1,5 @@
+/* biome-ignore-all format: aligned columns for readability */
+
 :root {
   /* Set theme css variables.
   Override css variables in "assets/css/_custom.css" */
@@ -39,8 +41,6 @@
   monospace) hints at what type of font to use if the web browser doesn't
   find any of the fonts in the list. */
 
-  /* stylelint-disable value-keyword-case */
-
   /* Emojis font stack. Add to end of other stacks when needed. */
   --emojis:         'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
@@ -69,7 +69,6 @@
 
   /* Monospace font stacks. */
   --ui-monospace:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-  /* stylelint-enable value-keyword-case */
 
   /* Font family. */
   --ff-body: var(--ui-serif);

assets/css/_zen.css

@@ -2,14 +2,6 @@
 
 /* Page */
 
-body {
-  background-color: var(--color-backdrop);
-}
-
-.page {
-  background-color: var(--color-body-bg);
-}
-
 .footer {
   border-block-start: 2px solid var(--color-border);
 }

assets/css/base/_document.css

@@ -1,21 +1,31 @@
 /* Document */
 
 html {
-  /* Change the default font family in all browsers. */
-  font-family: var(--ff-body);
-
   /* Set base font size in percent. */
   font-size: calc(var(--base-font-size) / 16 * 100%);
-
-  /* Set text colour. */
-  color: var(--color-text);
 }
 
 body {
+  /* Change the default font family in all browsers. */
+  font-family: var(--ff-body);
+
   /* Correct the line height in all browsers. */
   line-height: var(--base-line-height);
 
+  /* Set text colour. */
+  color: var(--color-text);
+
   /* Accent colour for forms. */
   accent-color: var(--color-accent);
+
+  /* Set background colour. */
+  background-color: var(--color-body-bg);
 }
 
+.page {
+  background-color: var(--color-page-bg);
+}
+
+::backdrop {
+  background-color: var(--color-backdrop);
+}

assets/css/base/_footer.css

@@ -0,0 +1,11 @@
+/* Branding footer */
+
+.footer {
+  padding-block: var(--gutters);
+  background-color: var(--color-footer-bg);
+  text-align: center;
+
+  p {
+    margin: 0;
+  }
+}

assets/css/base/_forms.css

@@ -16,7 +16,7 @@ label {
 
   /* Display as block if before input. */
   &:has(+ input),
-  &:has(+ textarea){
+  &:has(+ textarea) {
     display: block;
   }
 

assets/css/base/_header.css

@@ -0,0 +1,55 @@
+/* Branding header */
+
+.header {
+  --header-gap: var(--spacing-s);
+
+  padding-block: min(var(--gutters), var(--spacing-m));
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--header-gap);
+  background-color: var(--color-header-bg);
+
+  @media (min-width: 666px) {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+/* Wrapping link for logo. */
+.header__logo {
+  width: fit-content;
+}
+
+/* Logo image. */
+.header__logo-image {
+  vertical-align: bottom;
+  min-width: 32px;
+}
+
+/* The name of the website. */
+.header__site-name {
+  margin: 0;
+  line-height: 1;
+}
+
+/* The link around the name of the website. */
+.header__site-link {
+  &:link,
+  &:visited {
+    color: var(--color-text);
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
+/* Wrapper for any blocks placed in the header region. */
+.header__region {
+  @media (min-width: 666px) {
+    margin-inline-start: auto;
+  }
+}

assets/css/base/_headings.css

@@ -8,7 +8,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin-block: 1.5em .5em;
+  margin-block: 1.5em 0.5em;
   color: var(--color-headings);
   font-family: var(--ff-headings);
   font-weight: var(--fw-headings);
@@ -17,7 +17,7 @@ h6 {
 
   /* Smaller margin when a headeing is right after another heading. */
   & + & {
-    margin-block-start: .75em;
+    margin-block-start: 0.75em;
   }
 
   /* Set max text line width in main for readability. */
@@ -31,17 +31,17 @@ h1 {
   margin-block-start: var(--spacing-m);
   margin-block-end: var(--spacing-xs);
   font-size: var(--fs-xxl);
-  letter-spacing: -.01em;
+  letter-spacing: -0.01em;
 }
 
 h2 {
   font-size: var(--fs-xl);
-  letter-spacing: -.01em;
+  letter-spacing: -0.01em;
 }
 
 h3 {
   font-size: var(--fs-l);
-  letter-spacing: -.01em;
+  letter-spacing: -0.01em;
 }
 
 h4 {

assets/css/base/_images.css

@@ -3,7 +3,7 @@
 figure,
 img {
   &.image {
-    --image-padding: .75rem;
+    --image-padding: 0.75rem;
 
     @media (min-width: 666px) {
       &.center {

assets/css/base/_links.css

@@ -55,25 +55,3 @@ a:active {
     }
   }
 }
-
-/* Inverted links, for dark backgrounds. */
-.link-inverted {
-  a {
-    &:link {
-      color: var(--color-link-inverted);
-    }
-
-    &:visited {
-      color: var(--color-link-visited-inverted);
-    }
-
-    &:hover,
-    &:focus {
-      color: var(--color-link-hover-inverted);
-    }
-
-    &:active {
-      color: var(--color-link-active-inverted);
-    }
-  }
-}

assets/css/components/_anchor.css

@@ -1,8 +1,8 @@
 /* Anchor */
 
 .anchor {
-  --anchor-gap: .5rem;
+  --anchor-gap: 0.5rem;
-  --anchor-opacity: .4;
+  --anchor-opacity: 0.4;
 
   display: grid;
   grid-template-columns: auto auto;

assets/css/components/_box.css

@@ -33,32 +33,3 @@
 .box--gutter {
   padding-inline: var(--gutters);
 }
-
-.box--inverted {
-  background: var(--color-border);
-  color: var(--color-text-bg);
-
-  /* Make sure headings etc. also gets inverted. */
-  * {
-    color: var(--color-text-bg);
-  }
-
-  a {
-    &:link {
-      color: var(--color-link-inverted);
-    }
-
-    &:visited {
-      color: var(--color-link-visited-inverted);
-    }
-
-    &:hover,
-    &:focus {
-      color: var(--color-link-hover-inverted);
-    }
-
-    &:active {
-      color: var(--color-link-active-inverted);
-    }
-  }
-}

assets/css/components/_button.css

@@ -1,5 +1,3 @@
-/* stylelint-disable no-duplicate-selectors */
-
 /* Button */
 
 .button,
@@ -11,7 +9,7 @@
   text-decoration: none;
   text-align: center;
   width: fit-content;
-  padding: .2rem 1rem;
+  padding: 0.2rem 1rem;
 
   /* Improve usability and consistency of cursor style between image-type `input` and others. */
   cursor: pointer;
@@ -36,7 +34,7 @@
 
 .button--small {
   font-size: var(--fs-xs);
-  padding: .2rem .75rem;
+  padding: 0.2rem 0.75rem;
 }
 
 .button--alt {
@@ -65,7 +63,7 @@
   &:active {
     color: var(--color-button-text);
     background: var(--color-success);
-}
+  }
 }
 
 .button--decline {
@@ -98,18 +96,19 @@ other variations. */
 [type='button'],
 [type='submit'] {
   &:disabled {
-    background-color: var(--color-grey-200);
+    color: var(--color-disabled);
-    border: 1px solid var(--color-button-disabled);
+    background-color: var(--color-disabled-alt);
+    border: 1px solid var(--color-disabled);
     background-image: none;
     text-shadow: none;
     cursor: default;
-    color: var(--color-button-disabled);
 
     &:hover,
     &:focus,
     &:active {
       /* Override any link underlines and color changes. */
-      color: var(--color-button-disabled);
+      color: var(--color-disabled);
+      background-color: var(--color-disabled-alt);
       text-decoration: none;
     }
   }
@@ -127,7 +126,7 @@ textarea {
 @media (min-width: 666px) {
   input:only-of-type {
     &:has(+ [type='submit']) {
-      margin-inline-end: .5rem;
+      margin-inline-end: 0.5rem;
     }
   }
 }

assets/css/components/_cards.css

@@ -42,27 +42,3 @@ A simple cards style. */
 .card--gutter {
   padding-inline: var(--gutters);
 }
-
-.card--inverted {
-  background: var(--color-border);
-  color: var(--color-text-bg);
-
-  a {
-    &:link {
-      color: var(--color-link-inverted);
-    }
-
-    &:visited {
-      color: var(--color-link-visited-inverted);
-    }
-
-    &:hover,
-    &:focus {
-      color: var(--color-link-hover-inverted);
-    }
-
-    &:active {
-      color: var(--color-link-active-inverted);
-    }
-  }
-}

assets/css/components/_cookieconsent.css

@@ -4,7 +4,7 @@
   display: flex;
   flex-flow: wrap;
   justify-content: center;
-  gap: .5rem;
+  gap: 0.5rem;
   position: sticky;
   bottom: 0;
   width: 100%;
@@ -19,7 +19,7 @@
 
   .cookieconsent__actions {
     display: flex;
-    gap: .5rem;
+    gap: 0.5rem;
   }
 
   &[hidden] {

assets/css/components/_disabled.css

@@ -1,13 +1,13 @@
 .disabled {
   /* Re-set default cursor for disabled elements. */
   cursor: default;
-  color: var(--color-button-disabled);
+  color: var(--color-disabled);
 
   &:hover,
   &:focus,
   &:active {
     /* Override any link underlines and color changes. */
-    color: var(--color-button-disabled);
+    color: var(--color-disabled);
     text-decoration: none;
   }
 }