diff --git a/package-lock.json b/package-lock.json
index 66773723..6e7025cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
"@vitejs/plugin-vue": "6.0.10",
"@vitest/coverage-v8": "5.0.5",
"@vue/test-utils": "2.5.1",
- "jsdom": "30.1.3",
+ "jsdom": "31.0.0",
"serve": "14.2.6",
"vite": "8.3.5",
"vitest": "5.0.5"
@@ -99,39 +99,6 @@
"dev": true,
"license": "MIT"
},
- "node_modules/@asamuzakjp/css-color": {
- "version": "7.1.9",
- "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-7.1.9.tgz",
- "integrity": "sha512-vZ6JQVq8Ivgz6b/IBlAf90wZviXdluY13cQOPO+nJHbmXwGrPl2GcpqUY7a55/8ZVdfONXpCFMpRijOBCHNlcQ==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@csstools/css-calc": "^3.4.3",
- "@csstools/css-color-parser": "^4.2.6",
- "@csstools/css-parser-algorithms": "^4.0.2",
- "@csstools/css-tokenizer": "^4.0.2",
- "lru-cache": "^11.5.3"
- },
- "engines": {
- "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
- }
- },
- "node_modules/@asamuzakjp/dom-selector": {
- "version": "10.0.5",
- "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-10.0.5.tgz",
- "integrity": "sha512-EgmJ7oEaGQECTn3H3wmnQpEy4hKY66VvM7VQndwPIQob3p877BgbyOUE3EX0LgXQCciF2H8KMdR+RznqjMNOLw==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "bidi-js": "^1.1.0",
- "css-tree": "^3.2.1",
- "is-potential-custom-element-name": "^1.0.1",
- "lru-cache": "^11.5.3"
- },
- "engines": {
- "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
- }
- },
"node_modules/@babel/helper-string-parser": {
"version": "7.29.11",
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.11.tgz",
@@ -188,19 +155,6 @@
"node": ">=18"
}
},
- "node_modules/@bramus/specificity": {
- "version": "2.4.3",
- "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.3.tgz",
- "integrity": "sha512-0GEz8qJWokkUVYQYRukmkSHIFNoBH8QTreeHrAFbvz1XFYc3Y+puhMs8PQ5x8GNugiC2l5jvDBXKLbBIByeSBw==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "css-tree": "^3.2.1"
- },
- "bin": {
- "specificity": "bin/cli.js"
- }
- },
"node_modules/@codecov/bundler-plugin-core": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@codecov/bundler-plugin-core/-/bundler-plugin-core-2.0.1.tgz",
@@ -236,146 +190,6 @@
"vite": "4.x || 5.x || 6.x"
}
},
- "node_modules/@csstools/color-helpers": {
- "version": "6.1.2",
- "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.2.tgz",
- "integrity": "sha512-grhRy3OKmniaAEKXMjua5z/EODX0MSqBGjunw8+j/3HQjOnahs2AGhvEOIYVUWcU6ScApbhLhVrQTX8XqrMrow==",
- "dev": true,
- "funding": [
- {
- "type": "github",
- "url": "https://github.com/sponsors/csstools"
- },
- {
- "type": "opencollective",
- "url": "https://opencollective.com/csstools"
- }
- ],
- "license": "MIT-0",
- "engines": {
- "node": ">=20.19.0"
- }
- },
- "node_modules/@csstools/css-calc": {
- "version": "3.4.3",
- "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.4.3.tgz",
- "integrity": "sha512-iex20d8CHVkyvg6B7UKV7uHnI2Bqo9g+EFfT9E0y+GvTvhZ/DwONJ+9aKb1dlqm0ZiGsL5RXjp0fCoJYnkeDjA==",
- "dev": true,
- "funding": [
- {
- "type": "github",
- "url": "https://github.com/sponsors/csstools"
- },
- {
- "type": "opencollective",
- "url": "https://opencollective.com/csstools"
- }
- ],
- "license": "MIT",
- "engines": {
- "node": ">=20.19.0"
- },
- "peerDependencies": {
- "@csstools/css-parser-algorithms": "^4.0.2",
- "@csstools/css-tokenizer": "^4.0.2"
- }
- },
- "node_modules/@csstools/css-color-parser": {
- "version": "4.2.7",
- "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.2.7.tgz",
- "integrity": "sha512-zgm9yjQz5iJB4VL8RyVwd71TWB8Q89FSxt/NzXoWqPSkEBOVtn9L6vAPtSc9hpKfB0Awo/AL2VKFHjYetBLFHQ==",
- "dev": true,
- "funding": [
- {
- "type": "github",
- "url": "https://github.com/sponsors/csstools"
- },
- {
- "type": "opencollective",
- "url": "https://opencollective.com/csstools"
- }
- ],
- "license": "MIT",
- "dependencies": {
- "@csstools/color-helpers": "^6.1.2",
- "@csstools/css-calc": "^3.4.3"
- },
- "engines": {
- "node": ">=20.19.0"
- },
- "peerDependencies": {
- "@csstools/css-parser-algorithms": "^4.0.2",
- "@csstools/css-tokenizer": "^4.0.2"
- }
- },
- "node_modules/@csstools/css-parser-algorithms": {
- "version": "4.0.2",
- "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.2.tgz",
- "integrity": "sha512-40cSKyMvK+tq4qz6Awrlye2WGuOKt3FwPgtGg6KTfbHOWNw+Rk1rzbAtZnZ6IBhsY491HLRnDXwoyBAijmmILA==",
- "dev": true,
- "funding": [
- {
- "type": "github",
- "url": "https://github.com/sponsors/csstools"
- },
- {
- "type": "opencollective",
- "url": "https://opencollective.com/csstools"
- }
- ],
- "license": "MIT",
- "engines": {
- "node": ">=20.19.0"
- },
- "peerDependencies": {
- "@csstools/css-tokenizer": "^4.0.2"
- }
- },
- "node_modules/@csstools/css-syntax-patches-for-csstree": {
- "version": "1.1.16",
- "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.16.tgz",
- "integrity": "sha512-LsDbJPP/B8cPasUJyTA5S99F7C4G93ngW8hUluXz8CFeOaaRnBPtBiIlvgcPYU0HmHNz8CXg+1vwFrIB4F6Dgw==",
- "dev": true,
- "funding": [
- {
- "type": "github",
- "url": "https://github.com/sponsors/csstools"
- },
- {
- "type": "opencollective",
- "url": "https://opencollective.com/csstools"
- }
- ],
- "license": "MIT-0",
- "peerDependencies": {
- "css-tree": "^3.2.1"
- },
- "peerDependenciesMeta": {
- "css-tree": {
- "optional": true
- }
- }
- },
- "node_modules/@csstools/css-tokenizer": {
- "version": "4.0.2",
- "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.2.tgz",
- "integrity": "sha512-OoKoR0f76dCY666JlcbhmVTs2drYj1GUXZTYTcbUgJjh9Nv41aFfZ21bPQTERm5+L5cBDo466NltB2lplS5GBw==",
- "dev": true,
- "funding": [
- {
- "type": "github",
- "url": "https://github.com/sponsors/csstools"
- },
- {
- "type": "opencollective",
- "url": "https://opencollective.com/csstools"
- }
- ],
- "license": "MIT",
- "engines": {
- "node": ">=20.19.0"
- }
- },
"node_modules/@exodus/bytes": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.16.0.tgz",
@@ -1598,6 +1412,33 @@
"node": "18 || 20 || >=22"
}
},
+ "node_modules/bcp-47": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-2.1.2.tgz",
+ "integrity": "sha512-wsv86UuNFuPnVieKLyECTT+CP1WSAHeoIg5P3xu2kA9Z+7fVPoKt7dxzSeEhtJel0AI+NW3fIW3KtTKQKUCngg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "is-alphabetical": "^2.0.0",
+ "is-alphanumerical": "^2.0.0",
+ "is-decimal": "^2.0.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/bcp-47-match": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz",
+ "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==",
+ "dev": true,
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
"node_modules/before-after-hook": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz",
@@ -1605,16 +1446,6 @@
"dev": true,
"license": "Apache-2.0"
},
- "node_modules/bidi-js": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.1.0.tgz",
- "integrity": "sha512-fX1Onk0tdVPC7obPWB5EbJ1z7NVhLq4m2xZLq2YXBkxzMXIGRpNMU88n0EPgWseKl12J7zXs7qrDxPK4sRs2fg==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "require-from-string": "^2.0.2"
- }
- },
"node_modules/birpc": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
@@ -1929,20 +1760,6 @@
"node": ">= 8"
}
},
- "node_modules/css-tree": {
- "version": "3.2.1",
- "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
- "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "mdn-data": "2.27.1",
- "source-map-js": "^1.2.1"
- },
- "engines": {
- "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
- }
- },
"node_modules/csstype": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -2240,6 +2057,43 @@
"dev": true,
"license": "ISC"
},
+ "node_modules/is-alphabetical": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+ "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+ "dev": true,
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/is-alphanumerical": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+ "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "is-alphabetical": "^2.0.0",
+ "is-decimal": "^2.0.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/is-decimal": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+ "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+ "dev": true,
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
"node_modules/is-docker": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -2356,49 +2210,47 @@
"license": "MIT"
},
"node_modules/jsdom": {
- "version": "30.1.3",
- "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-30.1.3.tgz",
- "integrity": "sha512-hQMUPvRgN7KxsfIytDQji7bimuJeRQa6Qo5+iuiZQk5CafeRxLIA10/cG5YCBFNpD9RO3oqIiN4CO1Y44kxqXg==",
+ "version": "31.0.0",
+ "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-31.0.0.tgz",
+ "integrity": "sha512-xAkhD9z1eyFC5+QUi9K24CaZJgdCQ2GOGLW1GdVDoQvkp/AxEH9TQ0pAplPOlIiV92hfcgnFOADZypbjgbBT6Q==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@asamuzakjp/css-color": "^7.1.3",
- "@asamuzakjp/dom-selector": "^10.0.3",
- "@bramus/specificity": "^2.4.2",
- "@csstools/css-syntax-patches-for-csstree": "^1.1.15",
"@exodus/bytes": "^1.16.0",
- "css-tree": "^3.2.1",
+ "bcp-47": "^2.1.2",
+ "bcp-47-match": "^2.0.3",
"data-urls": "^8.0.0",
"decimal.js": "^10.6.0",
"html-encoding-sniffer": "^7.0.0",
"is-potential-custom-element-name": "^1.0.1",
"lru-cache": "^11.5.3",
- "parse5": "^8.0.1",
+ "parse5": "^8.1.0",
+ "parse5-parser-stream": "^8.1.0",
"saxes": "^6.0.0",
"tough-cookie": "^6.0.2",
- "undici": "^8.12.1",
+ "undici": "^8.12.3",
"w3c-xmlserializer": "^6.0.0",
"webidl-conversions": "^8.0.1",
"whatwg-mimetype": "^5.0.0",
- "whatwg-url": "^17.2.0",
+ "whatwg-url": "^17.3.0",
"xml-name-validator": "^5.0.0"
},
"engines": {
"node": "^22.22.2 || ^24.15.0 || >=26.0.0"
},
"peerDependencies": {
- "canvas": "^3.2.3"
+ "@napi-rs/canvas": "^1.0.13"
},
"peerDependenciesMeta": {
- "canvas": {
+ "@napi-rs/canvas": {
"optional": true
}
}
},
"node_modules/jsdom/node_modules/undici": {
- "version": "8.12.3",
- "resolved": "https://registry.npmjs.org/undici/-/undici-8.12.3.tgz",
- "integrity": "sha512-+fdndUTwBP86cVjihTp21hZHo7d6oj1c/47XPA3lL8mM0XHs+C4EkcjmgRsFnFk2f/UONGDy9ItBItmXsLOQHw==",
+ "version": "8.12.4",
+ "resolved": "https://registry.npmjs.org/undici/-/undici-8.12.4.tgz",
+ "integrity": "sha512-8Mx+uNKKER2bA4AdtedkqRbwUCIJFr2nJckXRe5yrDqzePqwLP7VNcctN8/XdmDSbF7mS+jJKIszlL+vbam1VA==",
"dev": true,
"license": "MIT",
"engines": {
@@ -2765,13 +2617,6 @@
"node": ">= 20"
}
},
- "node_modules/mdn-data": {
- "version": "2.27.1",
- "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
- "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
- "dev": true,
- "license": "CC0-1.0"
- },
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -3016,6 +2861,19 @@
"url": "https://github.com/inikulin/parse5?sponsor=1"
}
},
+ "node_modules/parse5-parser-stream": {
+ "version": "8.1.0",
+ "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-8.1.0.tgz",
+ "integrity": "sha512-58MPfNTA+DsIzro41rU94xghnu/h2N4yEPdPdGPlZVHM/QvA5jlVGYVo7IzlHbFLHYx3cZUnr9s9HBrA0tEYyw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "parse5": "^8.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/inikulin/parse5?sponsor=1"
+ }
+ },
"node_modules/parse5/node_modules/entities": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-9.0.0.tgz",
diff --git a/package.json b/package.json
index 1f94cdb2..a7265bdc 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
"@vitejs/plugin-vue": "6.0.10",
"@vitest/coverage-v8": "5.0.5",
"@vue/test-utils": "2.5.1",
- "jsdom": "30.1.3",
+ "jsdom": "31.0.0",
"serve": "14.2.6",
"vite": "8.3.5",
"vitest": "5.0.5"
diff --git a/tests/web/sunshine_styles.test.js b/tests/web/sunshine_styles.test.js
index afe8d862..d9844166 100644
--- a/tests/web/sunshine_styles.test.js
+++ b/tests/web/sunshine_styles.test.js
@@ -43,7 +43,7 @@ afterAll(() => {
*
* @param {string} markup Component markup to insert into the document.
* @param {string} selector Element whose computed styles should be returned.
- * @returns {CSSStyleDeclaration} Computed style, including unresolved theme variables in jsdom.
+ * @returns {CSSStyleDeclaration} Computed style with CSS custom properties resolved by jsdom.
*/
function componentStyle(markup, selector) {
document.body.innerHTML = markup
@@ -69,49 +69,89 @@ async function mountFeatured(directory) {
return wrapper
}
-const componentCases = [
- ['body', '', 'body', { backgroundColor: 'var(--color-bg-base)', color: 'var(--color-text-base)' }],
- ['card', '', '.card', { backgroundColor: 'var(--color-surface)', color: 'var(--color-text-base)' }],
- ['card header', '', '.card-header', { backgroundColor: 'var(--color-bg-subtle)', color: 'var(--color-text-base)' }],
- ['card footer', '', '.card-footer', { backgroundColor: 'var(--color-bg-subtle)' }],
- ['modal', '', '.modal-content', { backgroundColor: 'var(--color-surface)' }],
- ['modal header', '', '.modal-header', { backgroundColor: 'var(--color-surface-raised)' }],
- ['modal footer', '', '.modal-footer', { backgroundColor: 'var(--color-surface-raised)' }],
- ['list item', '', '.list-group-item', { backgroundColor: 'var(--color-surface)', color: 'var(--color-text-base)' }],
- ['accordion', '', '.accordion-item', { backgroundColor: 'var(--color-surface)' }],
- ['collapsed accordion button', '', 'button', { backgroundColor: 'var(--color-bg-subtle)', color: 'var(--color-text-base)' }],
- ['expanded accordion button', '', 'button', { backgroundColor: 'var(--color-bg-muted)', color: 'var(--color-text-base)' }],
- ['offcanvas', '', '.offcanvas', { backgroundColor: 'var(--color-surface)' }],
- ['offcanvas header', '', '.offcanvas-header', { color: 'var(--color-text-base)' }],
- ['offcanvas body', '', '.offcanvas-body', { color: 'var(--color-text-base)' }],
- ['toast', '', '.toast', { backgroundColor: 'var(--color-surface)' }],
- ['toast header', '', '.toast-header', { backgroundColor: 'var(--color-bg-subtle)', color: 'var(--color-text-base)' }],
- ['toast body', '', '.toast-body', { color: 'var(--color-text-base)' }],
- ['popover', '', '.popover', { backgroundColor: 'var(--color-surface)' }],
- ['popover header', '', '.popover-header', { backgroundColor: 'var(--color-bg-subtle)', color: 'var(--color-text-base)' }],
- ['popover body', '', '.popover-body', { color: 'var(--color-text-base)' }],
- ['tooltip', '', '.tooltip-inner', { backgroundColor: 'var(--color-bg-muted)', color: 'var(--color-text-base)' }],
- ['breadcrumb', '
', '.breadcrumb', { backgroundColor: 'var(--color-bg-subtle)' }],
- ['breadcrumb link', '- Page
', 'a', { color: 'var(--color-primary)' }],
- ['active breadcrumb', '- Page
', '.breadcrumb-item', { color: 'var(--color-text-muted)' }],
- ['page link', '', '.page-link', { color: 'var(--color-text-base)' }],
- ['navbar link', '', '.nav-link', { color: 'var(--navbar-text-muted)', paddingTop: '8px', paddingRight: '16px', paddingBottom: '8px', paddingLeft: '16px' }],
- ['simple navbar theme control', '', 'button', { color: 'var(--navbar-text-muted)', paddingTop: '8px', paddingRight: '16px', paddingBottom: '8px', paddingLeft: '16px' }],
- ['active navbar link', '', '.nav-link', { color: 'var(--navbar-text)' }],
- ['open navbar dropdown', '', 'button', { color: 'var(--navbar-text)' }],
- ['navbar toggler', '', 'button', { color: 'var(--navbar-text)', borderTopColor: 'rgba(255, 255, 255, 0.2)' }],
- ['disabled button', '', 'button', { transform: 'none' }],
- ['busy cover', '', 'button', { cursor: 'wait', pointerEvents: 'none' }],
- ['release notes', '', '.release-notes', { columnCount: '1', display: 'block' }],
- ['dropdown', '', '.dropdown-menu', { backgroundColor: 'var(--color-surface)' }],
- ['dropdown item', '', 'button', { color: 'var(--color-text-base)' }],
- ['active dropdown item', '', 'button', { color: 'var(--color-text-base)' }],
- ['dropdown divider', '', 'hr', { opacity: '1' }],
- ['featured icon', '', 'img', { maxWidth: '64px', maxHeight: '64px' }],
- ['screenshot', '', 'img', { height: '120px', maxWidth: '200px' }],
-]
+/** @brief Expected computed colors, independent of the stylesheet under test. */
+const themeColors = {
+ light: {
+ background: 'rgb(255, 255, 255)',
+ subtle: 'rgb(248, 249, 250)',
+ muted: 'rgb(233, 236, 239)',
+ surface: 'rgb(255, 255, 255)',
+ surfaceRaised: 'rgb(255, 255, 255)',
+ text: 'rgb(33, 37, 41)',
+ textMuted: 'rgb(108, 117, 125)',
+ primary: 'rgb(13, 110, 253)',
+ onPrimary: 'rgb(255, 255, 255)',
+ navbarText: 'rgb(89, 68, 0)',
+ navbarTextMuted: 'rgb(127, 97, 0)',
+ },
+ dark: {
+ background: 'rgb(33, 37, 41)',
+ subtle: 'rgb(44, 48, 52)',
+ muted: 'rgb(56, 61, 65)',
+ surface: 'rgb(44, 48, 52)',
+ surfaceRaised: 'rgb(56, 61, 65)',
+ text: 'rgb(248, 249, 250)',
+ textMuted: 'rgb(173, 181, 189)',
+ primary: 'rgb(13, 110, 253)',
+ onPrimary: 'rgb(255, 255, 255)',
+ navbarText: 'rgb(89, 68, 0)',
+ navbarTextMuted: 'rgb(127, 97, 0)',
+ },
+}
+
+/**
+ * @brief Define component expectations using resolved theme colors.
+ *
+ * @param {object} colors Expected computed colors for the selected theme.
+ * @returns {Array} Component markup, selectors, and expected computed styles.
+ */
+function componentCases(colors) {
+ return [
+ ['body', '', 'body', { backgroundColor: colors.background, color: colors.text }],
+ ['card', '', '.card', { backgroundColor: colors.surface, color: colors.text }],
+ ['card header', '', '.card-header', { backgroundColor: colors.subtle, color: colors.text }],
+ ['card footer', '', '.card-footer', { backgroundColor: colors.subtle }],
+ ['modal', '', '.modal-content', { backgroundColor: colors.surface }],
+ ['modal header', '', '.modal-header', { backgroundColor: colors.surfaceRaised }],
+ ['modal footer', '', '.modal-footer', { backgroundColor: colors.surfaceRaised }],
+ ['list item', '', '.list-group-item', { backgroundColor: colors.surface, color: colors.text }],
+ ['accordion', '', '.accordion-item', { backgroundColor: colors.surface }],
+ ['collapsed accordion button', '', 'button', { backgroundColor: colors.subtle, color: colors.text }],
+ ['expanded accordion button', '', 'button', { backgroundColor: colors.muted, color: colors.text }],
+ ['offcanvas', '', '.offcanvas', { backgroundColor: colors.surface }],
+ ['offcanvas header', '', '.offcanvas-header', { color: colors.text }],
+ ['offcanvas body', '', '.offcanvas-body', { color: colors.text }],
+ ['toast', '', '.toast', { backgroundColor: colors.surface }],
+ ['toast header', '', '.toast-header', { backgroundColor: colors.subtle, color: colors.text }],
+ ['toast body', '', '.toast-body', { color: colors.text }],
+ ['popover', '', '.popover', { backgroundColor: colors.surface }],
+ ['popover header', '', '.popover-header', { backgroundColor: colors.subtle, color: colors.text }],
+ ['popover body', '', '.popover-body', { color: colors.text }],
+ ['tooltip', '', '.tooltip-inner', { backgroundColor: colors.muted, color: colors.text }],
+ ['breadcrumb', '
', '.breadcrumb', { backgroundColor: colors.subtle }],
+ ['breadcrumb link', '- Page
', 'a', { color: colors.primary }],
+ ['active breadcrumb', '- Page
', '.breadcrumb-item', { color: colors.textMuted }],
+ ['page link', '', '.page-link', { color: colors.text }],
+ ['navbar link', '', '.nav-link', { color: colors.navbarTextMuted, paddingTop: '8px', paddingRight: '16px', paddingBottom: '8px', paddingLeft: '16px' }],
+ ['simple navbar theme control', '', 'button', { color: colors.navbarTextMuted, paddingTop: '8px', paddingRight: '16px', paddingBottom: '8px', paddingLeft: '16px' }],
+ ['active navbar link', '', '.nav-link', { color: colors.navbarText }],
+ ['open navbar dropdown', '', 'button', { color: colors.navbarText }],
+ ['navbar toggler', '', 'button', { color: colors.navbarText, borderTopColor: 'rgba(255, 255, 255, 0.2)' }],
+ ['disabled button', '', 'button', { transform: 'none' }],
+ ['busy cover', '', 'button', { cursor: 'wait', pointerEvents: 'none' }],
+ ['release notes', '', '.release-notes', { columnCount: '1', display: 'block' }],
+ ['dropdown', '', '.dropdown-menu', { backgroundColor: colors.surface }],
+ ['dropdown item', '', 'button', { color: colors.text }],
+ ['active dropdown item', '', 'button', { color: colors.text }],
+ ['dropdown divider', '', 'hr', { opacity: '1' }],
+ ['featured icon', '', 'img', { maxWidth: '64px', maxHeight: '64px' }],
+ ['screenshot', '', 'img', { height: '120px', maxWidth: '200px' }],
+ ]
+}
describe.each(['light', 'dark'])('%s theme cascade', theme => {
+ const colors = themeColors[theme]
+
it.each([0, 1, 2])('rounds the outside category filter corners with %i categories', async categoryCount => {
document.documentElement.dataset.theme = theme
document.documentElement.dataset.bsTheme = theme
@@ -161,7 +201,7 @@ describe.each(['light', 'dark'])('%s theme cascade', theme => {
}
})
- it.each(componentCases)('preserves %s styles', (_name, markup, selector, expected) => {
+ it.each(componentCases(colors))('preserves %s styles', (_name, markup, selector, expected) => {
document.documentElement.dataset.theme = theme
document.documentElement.dataset.bsTheme = theme
const style = componentStyle(markup, selector)
@@ -176,9 +216,9 @@ describe.each(['light', 'dark'])('%s theme cascade', theme => {
await mountFeatured({ apps: [{ id: 'sample', name: 'Sample App', official: true, platforms: ['linux'] }] })
const [official, platform] = wrapper.findAll('.badge')
- expect(getComputedStyle(official.element).backgroundColor).toBe('var(--color-primary)')
- expect(getComputedStyle(official.element).color).toBe('var(--color-on-primary)')
- expect(getComputedStyle(platform.element).backgroundColor).toBe('var(--color-bg-muted)')
- expect(getComputedStyle(platform.element).color).toBe('var(--color-text-base)')
+ expect(getComputedStyle(official.element).backgroundColor).toBe(colors.primary)
+ expect(getComputedStyle(official.element).color).toBe(colors.onPrimary)
+ expect(getComputedStyle(platform.element).backgroundColor).toBe(colors.muted)
+ expect(getComputedStyle(platform.element).color).toBe(colors.text)
})
})