Merge branch 'dev' into dev-css-props

.changeset/cold-months-sing.md

@@ -0,0 +1,5 @@
+---
+
+---
+
+Add Playwright configuration and visual regression tests

.github/workflows/playwright.yml

@@ -0,0 +1,62 @@
+name: Playwright Tests
+
+on:
+  push: 
+    branches:
+      - dev
+  pull_request: 
+    paths:
+      - 'preview/**'
+      - 'core/**'
+
+env:
+  NODE: 20
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v4
+
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with: 
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "${{ env.NODE }}"
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@v4
+
+      - name: Get installed Playwright version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package.json').devDependencies['@playwright/test'])")" >> $GITHUB_ENV
+
+      - name: Cache playwright binaries
+        uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Install pnpm dependencies
+        run: pnpm install
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+      - name: Run Playwright tests
+        run: pnpm run playwright

core/scss/utils/_colors.scss

@@ -35,7 +35,7 @@
     background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 
-  .text-#{"" + $color}-fg {
+  .text-#{"" + $color} {
     color: $value !important;
   }
 }

package.json

@@ -9,13 +9,17 @@
     "bundlewatch": "turbo bundlewatch",
     "version": "changeset version",
     "publish": "changeset publish",
+    "playwright": "pnpm run build && pnpm run vt",
+    "vt": "playwright test tests",
     "reformat-mdx": "node build/reformat-mdx.mjs",
     "start": "pnpm dev"
   },
   "packageManager": "pnpm@9.15.4",
   "devDependencies": {
+    "@argos-ci/playwright": "^4.1.0",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.12",
+    "@playwright/test": "^1.50.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",

playwright.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig, devices } from "@playwright/test"
+
+export default defineConfig({
+	testDir: "./tests",
+	timeout: 10000,
+	fullyParallel: true,
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop Chrome"] },
+		},
+	],
+	use: {
+		trace: "on-first-retry",
+		screenshot: "only-on-failure",
+	},
+	reporter: [
+		process.env.CI ? ["dot"] : ["list"],
+		["@argos-ci/playwright/reporter", { uploadToArgos: !!process.env.CI }],
+	],
+})

pnpm-lock.yaml

@@ -8,12 +8,18 @@ importers:
 
   .:
     devDependencies:
+      '@argos-ci/playwright':
+        specifier: ^4.1.0
+        version: 4.1.0
       '@changesets/changelog-github':
         specifier: ^0.5.0
         version: 0.5.0
       '@changesets/cli':
         specifier: ^2.27.12
         version: 2.27.12
+      '@playwright/test':
+        specifier: ^1.50.1
+        version: 1.50.1
       '@rollup/plugin-babel':
         specifier: ^6.0.4
         version: 6.0.4(@babel/core@7.26.7)(rollup@4.34.4)
@@ -325,6 +331,55 @@ packages:
       '@jridgewell/trace-mapping': 0.3.25
     dev: true
 
+  /@argos-ci/api-client@0.8.0:
+    resolution: {integrity: sha512-UHa1vAf8gwHVpkqM/RaSryrFe1juqWH6dHpPeMtT4e/ZMB9hNYwYFinaGq/KRWe88JEi2WeAu776YdoeUSZQkQ==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      debug: 4.4.0(supports-color@5.5.0)
+      openapi-fetch: 0.13.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@argos-ci/browser@3.0.1:
+    resolution: {integrity: sha512-dqRXWCllulbKlqzwNE2bjbCtNqxVnUUrYpI1iIJQCMvyStmPdGHOYD7BoQQQ2uNPT2pCHeDyysrxc5T3mDyScg==}
+    engines: {node: '>=18.0.0'}
+    dev: true
+
+  /@argos-ci/core@3.1.0:
+    resolution: {integrity: sha512-bo/pNKk6P0pz4NRdymgU1letwQrRbMPTeFyMsUEW8fhKNdesSFnFIWZBFGsGkkh05uw75PBjl2ZN4PvQ2TxSog==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      '@argos-ci/api-client': 0.8.0
+      '@argos-ci/util': 2.3.0
+      axios: 1.7.9(debug@4.4.0)
+      convict: 6.2.4
+      debug: 4.4.0(supports-color@5.5.0)
+      fast-glob: 3.3.3
+      sharp: 0.33.5
+      tmp: 0.2.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@argos-ci/playwright@4.1.0:
+    resolution: {integrity: sha512-7/6/fRQvs/ZObZG76qNVHRyv5nK21oBLxzzd8T1OmJMC/+UmV9omiuOO3x75H5kc5e3vlKsCc0hClFCqtbye7A==}
+    engines: {node: '>=18.16.0'}
+    dependencies:
+      '@argos-ci/browser': 3.0.1
+      '@argos-ci/core': 3.1.0
+      '@argos-ci/util': 2.3.0
+      chalk: 5.4.1
+      debug: 4.4.0(supports-color@5.5.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@argos-ci/util@2.3.0:
+    resolution: {integrity: sha512-tkxnCpaj7yN9nCFzo9MX0FJ5YjUepEOGYfdvF8COQqp+EdY1qubOPpc4Z0l1B60BlC8YtjQv/oRxHSh1XzxWFg==}
+    engines: {node: '>=18.0.0'}
+    dev: true
+
   /@babel/code-frame@7.26.2:
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
@@ -684,6 +739,194 @@ packages:
       prettier: 2.8.8
     dev: true
 
+  /@emnapi/runtime@1.3.1:
+    resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
+    requiresBuild: true
+    dependencies:
+      tslib: 2.8.1
+    dev: true
+    optional: true
+
+  /@img/sharp-darwin-arm64@0.33.5:
+    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+    dev: true
+    optional: true
+
+  /@img/sharp-darwin-x64@0.33.5:
+    resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+    dev: true
+    optional: true
+
+  /@img/sharp-libvips-darwin-arm64@1.0.4:
+    resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@img/sharp-libvips-darwin-x64@1.0.4:
+    resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@img/sharp-libvips-linux-arm64@1.0.4:
+    resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@img/sharp-libvips-linux-arm@1.0.5:
+    resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@img/sharp-libvips-linux-s390x@1.0.4:
+    resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@img/sharp-libvips-linux-x64@1.0.4:
+    resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@img/sharp-libvips-linuxmusl-arm64@1.0.4:
+    resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@img/sharp-libvips-linuxmusl-x64@1.0.4:
+    resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@img/sharp-linux-arm64@0.33.5:
+    resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+    dev: true
+    optional: true
+
+  /@img/sharp-linux-arm@0.33.5:
+    resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.0.5
+    dev: true
+    optional: true
+
+  /@img/sharp-linux-s390x@0.33.5:
+    resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+    dev: true
+    optional: true
+
+  /@img/sharp-linux-x64@0.33.5:
+    resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.0.4
+    dev: true
+    optional: true
+
+  /@img/sharp-linuxmusl-arm64@0.33.5:
+    resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+    dev: true
+    optional: true
+
+  /@img/sharp-linuxmusl-x64@0.33.5:
+    resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+    dev: true
+    optional: true
+
+  /@img/sharp-wasm32@0.33.5:
+    resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+    requiresBuild: true
+    dependencies:
+      '@emnapi/runtime': 1.3.1
+    dev: true
+    optional: true
+
+  /@img/sharp-win32-ia32@0.33.5:
+    resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@img/sharp-win32-x64@0.33.5:
+    resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@isaacs/cliui@8.0.2:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -799,6 +1042,14 @@ packages:
     dev: true
     optional: true
 
+  /@playwright/test@1.50.1:
+    resolution: {integrity: sha512-Jii3aBg+CEDpgnuDxEp/h7BimHcUTDlpEtce89xEumlJ5ef2hqepZ+PWp1DDpYC/VO9fmWVI1IlEaoI5fK9FXQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+    dependencies:
+      playwright: 1.50.1
+    dev: true
+
   /@popperjs/core@2.11.8:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
@@ -1292,7 +1543,17 @@ packages:
   /axios@0.28.1:
     resolution: {integrity: sha512-iUcGA5a7p0mVb4Gm/sy+FSECNkPFT4y7wt6OM/CDpO/OnNCvSs3PoMG8ibrC9jRoGYU0gUK5pXVC4NPXq6lHRQ==}
     dependencies:
-      follow-redirects: 1.15.9
+      follow-redirects: 1.15.9(debug@4.4.0)
+      form-data: 4.0.1
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: true
+
+  /axios@1.7.9(debug@4.4.0):
+    resolution: {integrity: sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==}
+    dependencies:
+      follow-redirects: 1.15.9(debug@4.4.0)
       form-data: 4.0.1
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -1423,6 +1684,11 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /chalk@5.4.1:
+    resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+    dev: true
+
   /chardet@0.7.0:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
     dev: true
@@ -1499,6 +1765,21 @@ packages:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
+  /color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    dev: true
+
+  /color@4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+    dev: true
+
   /combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -1563,6 +1844,14 @@ packages:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
     dev: true
 
+  /convict@6.2.4:
+    resolution: {integrity: sha512-qN60BAwdMVdofckX7AlohVJ2x9UvjTNoKVXCL2LxFk1l7757EJqf1nySdMkPQer0bt8kQ5lQiyZ9/2NvrFBuwQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      lodash.clonedeep: 4.5.0
+      yargs-parser: 20.2.9
+    dev: true
+
   /core-js-pure@3.40.0:
     resolution: {integrity: sha512-AtDzVIgRrmRKQai62yuSIN5vNiQjcJakJb4fbhVw3ehxx7Lohphvw9SGNWKhLFqSxC4ilD0g/L1huAYFQU3Q6A==}
     requiresBuild: true
@@ -1676,6 +1965,11 @@ packages:
     resolution: {integrity: sha512-dg5YBTJYvogK1+dA2mBUDKzOWfYZtHVba89SyZUhc4+e3i2tzgjANFg5lDRCd3UOtRcw00vUTMK8LELcMdicug==}
     dev: false
 
+  /detect-libc@2.0.3:
+    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /dev-ip@1.0.1:
     resolution: {integrity: sha512-LmVkry/oDShEgSZPNgqCIp2/TlqtExeGmymru3uCELnfyjY11IzpAproLYs+1X88fXO6DBoYP3ul2Xo2yz2j6A==}
     engines: {node: '>= 0.8.0'}
@@ -1963,7 +2257,7 @@ packages:
     resolution: {integrity: sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==}
     dev: false
 
-  /follow-redirects@1.15.9:
+  /follow-redirects@1.15.9(debug@4.4.0):
     resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
     engines: {node: '>=4.0'}
     peerDependencies:
@@ -1971,6 +2265,8 @@ packages:
     peerDependenciesMeta:
       debug:
         optional: true
+    dependencies:
+      debug: 4.4.0(supports-color@5.5.0)
     dev: true
 
   /foreground-child@3.3.0:
@@ -2043,6 +2339,14 @@ packages:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
 
+  /fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2331,6 +2635,10 @@ packages:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
     dev: true
 
+  /is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+    dev: true
+
   /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -2602,6 +2910,10 @@ packages:
       p-locate: 4.1.0
     dev: true
 
+  /lodash.clonedeep@4.5.0:
+    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
+    dev: true
+
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
@@ -2871,6 +3183,16 @@ packages:
       wrappy: 1.0.2
     dev: true
 
+  /openapi-fetch@0.13.4:
+    resolution: {integrity: sha512-JHX7UYjLEiHuQGCPxa3CCCIqe/nc4bTIF9c4UYVC8BegAbWoS3g4gJxKX5XcG7UtYQs2060kY6DH64KkvNZahg==}
+    dependencies:
+      openapi-typescript-helpers: 0.0.15
+    dev: true
+
+  /openapi-typescript-helpers@0.0.15:
+    resolution: {integrity: sha512-opyTPaunsklCBpTK8JGef6mfPhLSnyy5a0IN9vKtx3+4aExf+KxEqYwIy3hqkedXIB97u357uLMJsOnm3GVjsw==}
+    dev: true
+
   /os-tmpdir@1.0.2:
     resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
     engines: {node: '>=0.10.0'}
@@ -3011,6 +3333,22 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /playwright-core@1.50.1:
+    resolution: {integrity: sha512-ra9fsNWayuYumt+NiM069M6OkcRb1FZSK8bgi66AtpFoWkg2+y0bJSNmkFrWhMbEBbVKC/EruAHH3g0zmtwGmQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+    dev: true
+
+  /playwright@1.50.1:
+    resolution: {integrity: sha512-G8rwsOQJ63XG6BbKj2w5rHeavFjy5zynBA9zsJMMtBoe/Uf757oG12NXz6e6OirF7RCrTVAKFXbLmn1RbL7Qaw==}
+    engines: {node: '>=18'}
+    hasBin: true
+    dependencies:
+      playwright-core: 1.50.1
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /please-upgrade-node@3.2.0:
     resolution: {integrity: sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==}
     dependencies:
@@ -3444,6 +3782,36 @@ packages:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
     dev: true
 
+  /sharp@0.33.5:
+    resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    requiresBuild: true
+    dependencies:
+      color: 4.2.3
+      detect-libc: 2.0.3
+      semver: 7.6.3
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.33.5
+      '@img/sharp-darwin-x64': 0.33.5
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+      '@img/sharp-libvips-linux-arm': 1.0.5
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+      '@img/sharp-libvips-linux-x64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+      '@img/sharp-linux-arm': 0.33.5
+      '@img/sharp-linux-arm64': 0.33.5
+      '@img/sharp-linux-s390x': 0.33.5
+      '@img/sharp-linux-x64': 0.33.5
+      '@img/sharp-linuxmusl-arm64': 0.33.5
+      '@img/sharp-linuxmusl-x64': 0.33.5
+      '@img/sharp-wasm32': 0.33.5
+      '@img/sharp-win32-ia32': 0.33.5
+      '@img/sharp-win32-x64': 0.33.5
+    dev: true
+
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -3485,6 +3853,12 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+    dependencies:
+      is-arrayish: 0.3.2
+    dev: true
+
   /simple-update-notifier@2.0.0:
     resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
     engines: {node: '>=10'}
@@ -3704,6 +4078,11 @@ packages:
       os-tmpdir: 1.0.2
     dev: true
 
+  /tmp@0.2.3:
+    resolution: {integrity: sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==}
+    engines: {node: '>=14.14'}
+    dev: true
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -3977,6 +4356,11 @@ packages:
     hasBin: true
     dev: true
 
+  /yargs-parser@20.2.9:
+    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
+    engines: {node: '>=10'}
+    dev: true
+
   /yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}

preview/pages/_data/css-props.json

@@ -0,0 +1,356 @@
+{
+  "colors": [
+    {
+      "name": "Body",
+      "props": [
+        {
+          "classes": [
+            "text-body"
+          ],
+          "variable": "--tblr-body-color"
+        },
+        {
+          "classes": [
+            "bg-body"
+          ],
+          "variable": "--tblr-body-bg"
+        }
+      ]
+    },
+    {
+      "name": "Secondary",
+      "props": [
+        {
+          "classes": [
+            "text-body-secondary"
+          ],
+          "variable": "--tblr-secondary"
+        },
+        {
+          "classes": [
+            "bg-body-secondary"
+          ],
+          "variable": "--tblr-secondary-bg"
+        }
+      ]
+    },
+    {
+      "name": "Tertiary",
+      "props": [
+        {
+          "todo": true,
+          "classes": [
+            "text-body-tertiary"
+          ],
+          "variable": "--tblr-tertiary"
+        },
+        {
+          "todo": true,
+          "classes": [
+            "bg-body-tertiary"
+          ],
+          "variable": "--tblr-tertiary-bg"
+        }
+      ]
+    },
+    {
+      "name": "Quaternary",
+      "props": [
+        {
+          "todo": true,
+          "classes": [
+            "text-body-quaternary"
+          ],
+          "variable": "--tblr-quaternary"
+        },
+        {
+          "todo": true,
+          "classes": [
+            "bg-body-quaternary"
+          ],
+          "variable": "--tblr-quaternary-bg"
+        }
+      ]
+    },
+    {
+      "name": "Body-Highlight",
+      "props": [
+        {
+          "todo": true,
+          "classes": [
+            "text-highlight"
+          ],
+          "variable": "--tblr-body-highlight"
+        },
+        {
+          "todo": true,
+          "classes": [
+            "bg-highlight"
+          ],
+          "variable": "--tblr-body-highlight-bg"
+        }
+      ]
+    },
+    {
+      "name": "Emphasis",
+      "props": [
+        {
+          "classes": [
+            "text-emphasis"
+          ],
+          "variable": "--tblr-emphasis-color"
+        },
+        {
+          "todo": true,
+          "classes": [
+            "bg-emphasis"
+          ],
+          "variable": "--tblr-emphasis-bg"
+        }
+      ]
+    },
+    {
+      "name": "Primary",
+      "props": [
+        {
+          "classes": [
+            "text-info",
+            "bg-info",
+            "border-info"
+          ],
+          "variable": "--tblr-primary"
+        },
+        {
+          "classes": [
+            "bg-primary-lt"
+          ],
+          "variable": "--tblr-primary-lt"
+        }
+      ]
+    },
+    {
+      "name": "Info",
+      "props": [
+        {
+          "classes": [
+            "text-info",
+            "bg-info",
+            "border-info"
+          ],
+          "variable": "--tblr-info"
+        },
+        {
+          "classes": [
+            "text-info-emphasis"
+          ],
+          "variable": "--tblr-info-text-emphasis"
+        },
+        {
+          "classes": [
+            "bg-info-lt"
+          ],
+          "variable": "--tblr-info-lt"
+        }
+      ]
+    },
+    {
+      "name": "Danger",
+      "props": [
+        {
+          "classes": [
+            "text-danger",
+            "bg-danger"
+          ],
+          "variable": "--tblr-danger"
+        },
+        {
+          "classes": [
+            "text-danger-emphasis"
+          ],
+          "variable": "--tblr-danger-text-emphasis"
+        },
+        {
+          "classes": [
+            "text-danger-lt",
+            "bg-danger-lt",
+            "border-danger"
+          ],
+          "variable": "--tblr-danger-lt"
+        }
+      ]
+    },
+    {
+      "name": "Warning",
+      "props": [
+        {
+          "classes": [
+            "text-warning",
+            "bg-warning",
+            "border-warning"
+          ],
+          "variable": "--tblr-warning"
+        },
+        {
+          "classes": [
+            "text-warning-emphasis"
+          ],
+          "variable": "--tblr-warning-text-emphasis"
+        },
+        {
+          "classes": [
+            "bg-warning-lt"
+          ],
+          "variable": "--tblr-warning-lt"
+        }
+      ]
+    },
+    {
+      "name": "Success",
+      "props": [
+        {
+          "classes": [
+            "text-success",
+            "bg-success",
+            "border-success"
+          ],
+          "variable": "--tblr-success"
+        },
+        {
+          "classes": [
+            "text-success-emphasis"
+          ],
+          "variable": "--tblr-success-text-emphasis"
+        },
+        {
+          "classes": [
+            "bg-success-lt"
+          ],
+          "variable": "--tblr-success-lt"
+        }
+      ]
+    },
+    {
+      "name": "Dark",
+      "props": [
+        {
+          "classes": [
+            "text-dark",
+            "bg-dark"
+          ],
+          "variable": "--tblr-dark"
+        },
+        {
+          "classes": [
+            "text-dark-emphasis"
+          ],
+          "variable": "--tblr-dark-text-emphasis"
+        },
+        {
+          "classes": [
+            "bg-dark-lt"
+          ],
+          "variable": "--tblr-dark-lt"
+        }
+      ]
+    },
+    {
+      "name": "Light",
+      "props": [
+        {
+          "classes": [
+            "text-light",
+            "bg-light"
+          ],
+          "variable": "--tblr-light"
+        },
+        {
+          "classes": [
+            "text-light-emphasis"
+          ],
+          "variable": "--tblr-light-text-emphasis"
+        },
+        {
+          "classes": [
+            "bg-light-lt"
+          ],
+          "variable": "--tblr-light-lt"
+        }
+      ]
+    },
+    {
+      "name": "Gray",
+      "props": [
+        {
+          "classes": [
+            "text-gray-50",
+            "bg-gray-50"
+          ],
+          "variable": "--tblr-gray-50"
+        },
+        {
+          "classes": [
+            "text-gray-100",
+            "bg-gray-100"
+          ],
+          "variable": "--tblr-gray-100"
+        },
+        {
+          "classes": [
+            "text-gray-200",
+            "bg-gray-200"
+          ],
+          "variable": "--tblr-gray-200"
+        },
+        {
+          "classes": [
+            "text-gray-300",
+            "bg-gray-300"
+          ],
+          "variable": "--tblr-gray-300"
+        },
+        {
+          "classes": [
+            "text-gray-400",
+            "bg-gray-400"
+          ],
+          "variable": "--tblr-gray-400"
+        },
+        {
+          "classes": [
+            "text-gray-500",
+            "bg-gray-500"
+          ],
+          "variable": "--tblr-gray-500"
+        },
+        {
+          "classes": [
+            "text-gray-600",
+            "bg-gray-600"
+          ],
+          "variable": "--tblr-gray-600"
+        },
+        {
+          "classes": [
+            "text-gray-700",
+            "bg-gray-700"
+          ],
+          "variable": "--tblr-gray-700"
+        },
+        {
+          "classes": [
+            "text-gray-800",
+            "bg-gray-800"
+          ],
+          "variable": "--tblr-gray-800"
+        },
+        {
+          "classes": [
+            "text-gray-900",
+            "bg-gray-900"
+          ],
+          "variable": "--tblr-gray-900"
+        }
+      ]
+    }
+  ]
+}

preview/pages/colors.html

@@ -6,63 +6,51 @@ layout: default
 permalink: colors.html
 ---
 
-{% assign colors = '' | split: '' %}
-{% for color in site.colors %}
-{% assign colors = colors | push: color[0] %}
-{% endfor %}
-{% assign colors = colors | push: 'dark' %}
-{% assign colors = colors | push: 'muted' %}
-
 <div class="card">
 	<div class="card-body">
 		<div class="table-responsive">
-			<table class="table text-center">
+			<table class="table">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Swatch</th>
+						<th>CSS variables</th>
+						<th colspan="2">CSS class</th>
+					</tr>
+				</thead>
+				{% for category in css-props.colors %}
+				{% for prop in category.props %}
 				<tr>
-					{% for color in colors %}
+					{% if forloop.first %}
+					<th class="text-left" rowspan="{{ category.props | size }}">{{ category.name }}</th>
+					{% endif %}
 					<td>
-						<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }}
+						<div class="d-flex justify-content-center">
+							<div class="w-100 h-7 p-1 rounded border{% if prop.todo %} border-danger text-danger{% endif %}" style="background-color: var({{ prop.variable }})">{% if prop.todo %}{% include "ui/icon.html" icon="alert-square-rounded" type="filled" %}{% endif %}</div>
 						</div>
 					</td>
-					{% endfor %}
-				</tr>
-				<tr>
-					{% for color in colors %}
 					<td>
-						<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
+						<code>{{ prop.variable }}</code>
 					</td>
-					{% endfor %}
-				</tr>
-				<tr>
-					{% for color in colors %}
 					<td>
-						<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}</div>
+						<div class="space-y">
+						{% for class in prop.classes %}
+							<div><code>{{ class }}</code></div>
+						{% endfor %}
+						</div>
 					</td>
-					{% endfor %}
-				</tr>
-				<tr class="bg-light">
-					{% for color in colors %}
+					{% if environment == 'development' %}
 					<td>
-						<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}</div>
+						<div class="space-y">
+						{% for class in prop.classes %}
+							<div class="{{ class }} border p-2 rounded">123</div>
+						{% endfor %}
+						</div>
 					</td>
-					{% endfor %}
-				</tr>
-				<tr class="bg-dark text-white">
-					{% for color in colors %}
-					<td>
-						{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
-						<div class="avatar text-{{ c }} bg-transparent" data-demo-color>{{ c | slice: 0, 2 }}</div>
-					</td>
-					{% endfor %}
-				</tr>
-				<tr class="bg-dark text-white">
-					{% for color in colors %}
-					<td>
-						{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
-						<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
-						<div class="mt-2" data-demo-color-contrast></div>
-					</td>
-					{% endfor %}
+					{% endif %}
 				</tr>
+				{% endfor %}
+				{% endfor %}
 			</table>
 		</div>
 	</div>

tests/visual.test.ts

@@ -0,0 +1,16 @@
+import test, { expect } from '@playwright/test';
+import { argosScreenshot } from "@argos-ci/playwright"
+import fs from "fs"
+import path from "path"
+
+const previewDir = path.join(__dirname, "../preview/dist")
+
+const htmlFiles = fs.readdirSync(previewDir).filter((file) => file.endsWith(".html"))
+
+for (const file of htmlFiles.slice(0, 10)) {
+	test(`Compare ${file}`, async ({ page }) => {
+		await page.goto(`file://${path.join(previewDir, file)}`)
+		await page.waitForLoadState("networkidle")
+		await argosScreenshot(page, `${page}`)
+	})
+}