build: Provide combined CSS output file for distribution

.github/workflows/validate.yml

@@ -0,0 +1,24 @@
+name: Validate
+on:
+  pull_request:
+    branches:
+      - master
+      - beta
+jobs:
+  run-unit-tests:
+    name: Run unit tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install
+        run: yarn install --frozen-lockfile
+
+      - name: Run tests
+        run: npm test

.mocharc.js

@@ -0,0 +1,10 @@
+module.exports = {
+    parallel: true,
+    recursive: true,
+    require: ["tsx"],
+    spec: [
+      "scripts/**/*.spec.ts"
+    ],
+    extension: ['js', 'cjs', 'mjs', 'ts']
+  };
+

data/tokens/global/size.json

@@ -9,36 +9,6 @@
         "value": "{primitives.dimension.0}",
         "type": "sizing"
       },
-      "breakpoint": {
-        "none": {
-          "value": "{primitives.size.breakpoint.0}",
-          "type": "sizing"
-        },
-        "XXS": {
-          "value": "{primitives.size.breakpoint.320}",
-          "type": "sizing"
-        },
-        "XS": {
-          "value": "{primitives.size.breakpoint.480}",
-          "type": "sizing"
-        },
-        "S": {
-          "value": "{primitives.size.breakpoint.768}",
-          "type": "sizing"
-        },
-        "M": {
-          "value": "{primitives.size.breakpoint.1024}",
-          "type": "sizing"
-        },
-        "L": {
-          "value": "{primitives.size.breakpoint.1200}",
-          "type": "sizing"
-        },
-        "XL": {
-          "value": "{primitives.size.breakpoint.1920}",
-          "type": "sizing"
-        }
-      },
       "container": {
         "M": {
           "value": "{primitives.dimension.3600}",

data/tokens/screensize/large.json

@@ -1,5 +1,11 @@
 {
   "global": {
+    "size": {
+      "breakpoint-min-width": {
+        "value": "{primitives.size.breakpoint.1200}",
+        "type": "sizing"
+      }
+    },
     "space": {
       "macroScale": {
         "value": "1",

data/tokens/screensize/small.json

@@ -1,5 +1,11 @@
 {
   "global": {
+    "size": {
+      "breakpoint-min-width": {
+        "value": "{primitives.size.breakpoint.0}",
+        "type": "sizing"
+      }
+    },
     "space": {
       "macroScale": {
         "value": "0.8",

docs/usage/README.md

@@ -0,0 +1,23 @@
+# Usage
+The tokens are distributed in a number of different formats:
+- android
+- css
+- ios
+- js
+- json
+- scss
+
+There is also an assets directory distributed for any physical files that are common across any of the above formats.
+
+Most of these formats distribute tokens exactly as provided to the build process and can therefore be used by consuming tools and processes accordingly. Any exceptions to this are listed below.
+
+## CSS
+Due to the nature of CSS and the requirement for browsers to consume styles directly an additional all.css file has been exposed in addition to the standard files provided that match other formats. This all.css file provides the following features:
+
+- Media query for large screen tokens
+- Consolidation to remove any large screen tokens which are included and unchanged in the default small screen token set
+- Formatter to rename light/dark mode token to add a suffix and include the light-dark function where ever used. This will allow consumers to switch to light/dark mode (or device specified) on a page or section level using the [`color-scheme`](https://web.dev/articles/light-dark) css property.
+
+See the associated index.html files provided in each of the distributed brand directories for examples over how these tokens may be consumed.
+
+NOTE: Whilst there is good browser support for the [light-dark function](https://caniuse.com/?search=light-dark), you may want to use the [`postcss-preset-env`](https://www.npmjs.com/package/postcss-preset-env) postcss plugin alongside a [`.browserslistrc`](https://github.com/browserslist/browserslist) file to enhance support to the browsers required.

docs/usage/index.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="./all.css" />
+
+    <!-- Component library styles -->
+    <style>
+      body {
+        font: var(--page-typography-p-standard);
+        background: var(--page-color-standard-bg-default);
+        color: var(--page-color-standard-text-default);
+      }
+
+      p {
+        font: var(--page-typography-p-standard);
+      }
+
+      h1 {
+        font: var(--page-typography-h1);
+      }
+
+      h2 {
+        font: var(--page-typography-h2);
+      }
+
+      button {
+        background: var(--button-color-standard-typical-primary-bg-enabled);
+        padding: var(--button-space-primary-y-m) var(--button-space-primary-x-m);
+        gap: var(--button-space-primary-xg-m);
+        border-radius: var(--button-radius-primary-m);
+        border: none;
+        color: var(--button-color-standard-destructive-primary-label-enabled);
+        font: var(--button-typography-adaptive-primary-m);
+        cursor: pointer;
+
+        &.active {
+          background: var(--button-color-standard-typical-primary-bg-active);
+          color: var(--button-color-standard-typical-primary-label-active);
+        }
+      }
+
+      section {
+        background: var(--container-color-standard-interactive-bg-enabled);
+        border-radius: var(--container-radius-card-moderate);
+        box-shadow: var(--container-boxshadow-card-enabled);
+        padding: var(--container-space-generic-content-y-l)
+          var(--container-space-generic-content-x-l);
+
+        &.inverted {
+          background: var(--container-color-inverse-bg-default);
+
+          button {
+            background: var(--button-color-inverse-typical-primary-bg-enabled);
+            color: var(--button-color-inverse-typical-primary-label-enabled);
+          }
+        }
+      }
+    </style>
+
+    <!-- Application styles -->
+    <style>
+      body {
+        color-scheme: light dark; /* Device preference by default */
+      }
+
+      .mode-light,
+      .mode-dark {
+        background: var(--page-color-standard-bg-default);
+        color: var(--page-color-standard-text-default);
+      }
+
+      .mode-light {
+        color-scheme: only light;
+      }
+
+      .mode-dark {
+        color-scheme: only dark;
+      }
+
+      section {
+        + section {
+          margin-top: var(--page-space-y-l);
+        }
+      }
+
+      .inverted {
+        color: var(--page-color-inverse-text-default);
+      }
+    </style>
+
+    <script type="text/javascript">
+      function setMode(event, mode) {
+        const target = event.target;
+
+        document.querySelectorAll("button").forEach((button) => {
+          button.classList.remove("active");
+        });
+        target.classList.add("active");
+
+        document.body.classList.remove("mode-system");
+        document.body.classList.remove("mode-light");
+        document.body.classList.remove("mode-dark");
+        document.body.classList.add(mode);
+      }
+    </script>
+  </head>
+  <body>
+    <h1>Light/dark mode demonstration</h1>
+    <section>
+      <h2>User selection</h2>
+      <p>This section will change based on user preference.</p>
+      <button onclick="setMode(event, 'mode-system')" class="active">
+        System
+      </button>
+      <button onclick="setMode(event, 'mode-light')">Light</button>
+      <button onclick="setMode(event, 'mode-dark')">Dark</button>
+    </section>
+
+    <section class="mode-dark">
+      <h2>Always dark</h2>
+      <p>This section will always be dark.</p>
+      <button>Button</button>
+    </section>
+
+    <section class="mode-light">
+      <h2>Always light</h2>
+      <p>This section will always be light.</p>
+      <button>Button</button>
+    </section>
+
+    <section class="inverted">
+      <h2>Always inverted</h2>
+      <p>This section will always be inverted.</p>
+      <button>Button</button>
+    </section>
+  </body>
+</html>

package.json

@@ -19,9 +19,12 @@
     "design system"
   ],
   "scripts": {
-    "build": "node ./scripts/build.js",
+    "test": "mocha",
+    "test:watch": "npm test -- --watch",
+    "build": "node ./scripts/build.js && npm run post-process-css",
     "prebuild": "node ./scripts/prebuild.js",
     "postbuild": "node ./scripts/postbuild.js",
+    "post-process-css": "npx ts-node ./scripts/post-process-css",
     "dev:docs": "nodemon --watch \"./scripts/*\" --watch \"./templates/**/*\" --exec \"node ./scripts/tokens-documentation.js\"",
     "prepublishOnly": "node ./scripts/bump-main-package-version.js",
     "lint": "eslint .",
@@ -37,7 +40,11 @@
     "@semantic-release/npm": "^11.0.2",
     "@semantic-release/release-notes-generator": "^12.1.0",
     "@tokens-studio/sd-transforms": "^0.12.2",
+    "@tsconfig/strictest": "^2.0.5",
+    "@types/chai": "^4.3.19",
     "@types/glob": "^8.1.0",
+    "@types/mocha": "^10.0.8",
+    "chai": "^5.1.1",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",
     "eslint-config-standard": "^17.1.0",
@@ -51,6 +58,7 @@
     "glob": "^10.3.10",
     "less": "^4.2.0",
     "lodash": "^4.17.21",
+    "mocha": "^10.7.3",
     "node-fetch": "^2.7.0",
     "nodemon": "^3.0.2",
     "scss": "^0.2.4",
@@ -59,6 +67,8 @@
     "stylelint-config-standard": "^36.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "tinycolor2": "^1.6.0",
+    "ts-node": "^10.9.2",
+    "tsx": "^4.19.1",
     "typescript": "^5.3.3"
   }
 }