From e5ecbdd09d0755ca98069c7909d9cc6df771b2fc Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Mon, 13 Jan 2025 20:30:11 +0100 Subject: [PATCH] refactor(Navbar) color state specificy for elements on same specificity level --- sass/components/colors.module.scss | 120 ++++++++++++++--------------- wallaby.js | 18 +++++ 2 files changed, 78 insertions(+), 60 deletions(-) create mode 100644 wallaby.js diff --git a/sass/components/colors.module.scss b/sass/components/colors.module.scss index 34a9bf3265..19bbc37767 100644 --- a/sass/components/colors.module.scss +++ b/sass/components/colors.module.scss @@ -1,74 +1,74 @@ -.primary { background-color: var(--md-sys-color-primary); } -.primary-text { color: var(--md-sys-color-primary); } -.on-primary { background-color: var(--md-sys-color-on-primary); } -.on-primary-text { color: var(--md-sys-color-on-primary); } -.primary-container { background-color: var(--md-sys-color-primary-container); } -.primary-container-text { color: var(--md-sys-color-primary-container); } -.on-primary-container { background-color: var(--md-sys-color-on-primary-container); } -.on-primary-container-text { color: var(--md-sys-color-on-primary-container); } +.primary { background-color: var(--md-sys-color-primary) !important; } +.primary-text { color: var(--md-sys-color-primary) !important; } +.on-primary { background-color: var(--md-sys-color-on-primary) !important; } +.on-primary-text { color: var(--md-sys-color-on-primary) !important; } +.primary-container { background-color: var(--md-sys-color-primary-container) !important; } +.primary-container-text { color: var(--md-sys-color-primary-container) !important; } +.on-primary-container { background-color: var(--md-sys-color-on-primary-container) !important; } +.on-primary-container-text { color: var(--md-sys-color-on-primary-container) !important; } -.secondary { background-color: var(--md-sys-color-secondary); } -.secondary-text { color: var(--md-sys-color-secondary); } -.on-secondary { background-color: var(--md-sys-color-on-secondary); } -.on-secondary-text { color: var(--md-sys-color-on-secondary); } -.secondary-container { background-color: var(--md-sys-color-secondary-container); } -.secondary-container-text { color: var(--md-sys-color-secondary-container); } -.on-secondary-container { background-color: var(--md-sys-color-on-secondary-container); } -.on-secondary-container-text { color: var(--md-sys-color-on-secondary-container); } +.secondary { background-color: var(--md-sys-color-secondary) !important; } +.secondary-text { color: var(--md-sys-color-secondary) !important; } +.on-secondary { background-color: var(--md-sys-color-on-secondary) !important; } +.on-secondary-text { color: var(--md-sys-color-on-secondary) !important; } +.secondary-container { background-color: var(--md-sys-color-secondary-container) !important; } +.secondary-container-text { color: var(--md-sys-color-secondary-container) !important; } +.on-secondary-container { background-color: var(--md-sys-color-on-secondary-container) !important; } +.on-secondary-container-text { color: var(--md-sys-color-on-secondary-container) !important; } -.tertiary { background-color: var(--md-sys-color-tertiary); } -.tertiary-text { color: var(--md-sys-color-tertiary); } -.on-tertiary { background-color: var(--md-sys-color-on-tertiary); } -.on-tertiary-text { color: var(--md-sys-color-on-tertiary); } -.tertiary-container { background-color: var(--md-sys-color-tertiary-container); } -.tertiary-container-text { color: var(--md-sys-color-tertiary-container); } -.on-tertiary-container { background-color: var(--md-sys-color-on-tertiary-container); } -.on-tertiary-container-text { color: var(--md-sys-color-on-tertiary-container); } +.tertiary { background-color: var(--md-sys-color-tertiary) !important; } +.tertiary-text { color: var(--md-sys-color-tertiary) !important; } +.on-tertiary { background-color: var(--md-sys-color-on-tertiary) !important; } +.on-tertiary-text { color: var(--md-sys-color-on-tertiary) !important; } +.tertiary-container { background-color: var(--md-sys-color-tertiary-container) !important; } +.tertiary-container-text { color: var(--md-sys-color-tertiary-container) !important; } +.on-tertiary-container { background-color: var(--md-sys-color-on-tertiary-container) !important; } +.on-tertiary-container-text { color: var(--md-sys-color-on-tertiary-container) !important; } -.error { background-color: var(--md-sys-color-error); } -.error-text { color: var(--md-sys-color-error); } -.on-error { background-color: var(--md-sys-color-on-error); } -.on-error-text { color: var(--md-sys-color-on-error); } -.error-container { background-color: var(--md-sys-color-error-container); } -.error-container-text { color: var(--md-sys-color-error-container); } -.on-error-container { background-color: var(--md-sys-color-on-error-container); } -.on-error-container-text { color: var(--md-sys-color-on-error-container); } +.error { background-color: var(--md-sys-color-error) !important; } +.error-text { color: var(--md-sys-color-error) !important; } +.on-error { background-color: var(--md-sys-color-on-error) !important; } +.on-error-text { color: var(--md-sys-color-on-error) !important; } +.error-container { background-color: var(--md-sys-color-error-container) !important; } +.error-container-text { color: var(--md-sys-color-error-container) !important; } +.on-error-container { background-color: var(--md-sys-color-on-error-container) !important; } +.on-error-container-text { color: var(--md-sys-color-on-error-container) !important; } -.background { background-color: var(--md-sys-color-background); } -.background-text { color: var(--md-sys-color-background); } -.on-background { background-color: var(--md-sys-color-on-background); } -.on-background-text { color: var(--md-sys-color-on-background); } +.background { background-color: var(--md-sys-color-background) !important; } +.background-text { color: var(--md-sys-color-background) !important; } +.on-background { background-color: var(--md-sys-color-on-background) !important; } +.on-background-text { color: var(--md-sys-color-on-background) !important; } -.surface { background-color: var(--md-sys-color-surface); } -.surface-text { color: var(--md-sys-color-surface); } -.on-surface { background-color: var(--md-sys-color-on-surface); } -.on-surface-text { color: var(--md-sys-color-on-surface); } +.surface { background-color: var(--md-sys-color-surface) !important; } +.surface-text { color: var(--md-sys-color-surface) !important; } +.on-surface { background-color: var(--md-sys-color-on-surface) !important; } +.on-surface-text { color: var(--md-sys-color-on-surface) !important; } -.surface-variant { background-color: var(--md-sys-color-surface-variant); } -.surface-variant-text { color: var(--md-sys-color-surface-variant); } -.on-surface-variant { background-color: var(--md-sys-color-on-surface-variant); } -.on-surface-variant-text { color: var(--md-sys-color-on-surface-variant); } +.surface-variant { background-color: var(--md-sys-color-surface-variant) !important; } +.surface-variant-text { color: var(--md-sys-color-surface-variant) !important; } +.on-surface-variant { background-color: var(--md-sys-color-on-surface-variant) !important; } +.on-surface-variant-text { color: var(--md-sys-color-on-surface-variant) !important; } -.outline { background-color: var(--md-sys-color-outline); } -.outline-text { color: var(--md-sys-color-outline); } +.outline { background-color: var(--md-sys-color-outline) !important; } +.outline-text { color: var(--md-sys-color-outline) !important; } -.inverse-on-surface { background-color: var(--md-sys-color-inverse-on-surface); } -.inverse-on-surface-text { color: var(--md-sys-color-inverse-on-surface); } +.inverse-on-surface { background-color: var(--md-sys-color-inverse-on-surface) !important; } +.inverse-on-surface-text { color: var(--md-sys-color-inverse-on-surface) !important; } -.inverse-surface { background-color: var(--md-sys-color-inverse-surface); } -.inverse-surface-text { color: var(--md-sys-color-inverse-surface); } +.inverse-surface { background-color: var(--md-sys-color-inverse-surface) !important; } +.inverse-surface-text { color: var(--md-sys-color-inverse-surface) !important; } -.inverse-primary { background-color: var(--md-sys-color-inverse-primary); } -.inverse-primary-text { color: var(--md-sys-color-inverse-primary); } +.inverse-primary { background-color: var(--md-sys-color-inverse-primary) !important; } +.inverse-primary-text { color: var(--md-sys-color-inverse-primary) !important; } -.shadow { background-color: var(--md-sys-color-shadow); } -.shadow-text { color: var(--md-sys-color-shadow); } +.shadow { background-color: var(--md-sys-color-shadow) !important; } +.shadow-text { color: var(--md-sys-color-shadow) !important; } -.surface-tint { background-color: var(--md-sys-color-surface-tint); } -.surface-tint-text { color: var(--md-sys-color-surface-tint); } +.surface-tint { background-color: var(--md-sys-color-surface-tint) !important; } +.surface-tint-text { color: var(--md-sys-color-surface-tint) !important; } -.outline-variant { background-color: var(--md-sys-color-outline-variant); } -.outline-variant-text { color: var(--md-sys-color-outline-variant); } +.outline-variant { background-color: var(--md-sys-color-outline-variant) !important; } +.outline-variant-text { color: var(--md-sys-color-outline-variant) !important; } -.scrim { background-color: var(--md-sys-color-scrim); } -.scrim-text { color: var(--md-sys-color-scrim); } +.scrim { background-color: var(--md-sys-color-scrim) !important; } +.scrim-text { color: var(--md-sys-color-scrim) !important; } diff --git a/wallaby.js b/wallaby.js new file mode 100644 index 0000000000..996e290268 --- /dev/null +++ b/wallaby.js @@ -0,0 +1,18 @@ +module.exports = function () { + return { + files: [ + 'src/**/*.ts', + ], + + tests: [ + 'spec/tests/**/*.js', + ], + + env: { + type: 'node', + runner: 'npx jasmine-browser-runner runSpecs', + }, + + testFramework: 'jasmine', + }; +};