From 39ffcefe5a935c0b82d70989bb95ee60d5599bee Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Fri, 10 Jan 2025 13:24:11 +0100 Subject: [PATCH 1/4] refactor(Navbar) fix todo: implemented navbar class instead of targetting nav element #573 --- sass/components/_badges.scss | 2 +- sass/components/_navbar.scss | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/sass/components/_badges.scss b/sass/components/_badges.scss index d96fbf00d6..0d177cd0fd 100644 --- a/sass/components/_badges.scss +++ b/sass/components/_badges.scss @@ -37,7 +37,7 @@ span.badge { // Special cases -nav ul a span.badge { +.navbar ul a span.badge { display: inline-block; float: none; margin-left: 4px; diff --git a/sass/components/_navbar.scss b/sass/components/_navbar.scss index 1cc3e5672f..67b206bff6 100644 --- a/sass/components/_navbar.scss +++ b/sass/components/_navbar.scss @@ -1,10 +1,9 @@ -// TODO: Make better wrapper class like .navbar :root { --navbar-height: 64px; --navbar-height-mobile: 56px; } -nav { +.navbar { &.nav-extended { height: auto; @@ -211,7 +210,7 @@ nav { height: var(--navbar-height-mobile); z-index: 997; - nav { + .navbar { position: fixed; right: 0; } @@ -221,7 +220,7 @@ nav { nav.nav-extended .nav-wrapper { min-height: var(--navbar-height-mobile); } - nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i { + .nav, .navbar .nav-wrapper i, nav a.sidenav-trigger, .navbar a.sidenav-trigger i { height: var(--navbar-height); line-height: var(--navbar-height) } From 11d78e67166310bdccdc0a64c7e9f9571fead6ee Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Fri, 10 Jan 2025 13:25:34 +0100 Subject: [PATCH 2/4] fix(Navbar) make navbar item active and hover state respect theme colors #385 --- sass/components/_navbar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sass/components/_navbar.scss b/sass/components/_navbar.scss index 67b206bff6..6448aa0cc1 100644 --- a/sass/components/_navbar.scss +++ b/sass/components/_navbar.scss @@ -138,11 +138,11 @@ cursor: pointer; &.active { - background-color: var(--md-ref-palette-primary80); + background-color: var(--md-sys-color-primary-container-dark); } &:hover:not(.active) { - background-color: var(--md-ref-palette-primary70); + background-color: var(--md-sys-color-on-primary-dark); } &.btn, &.btn-large, &.btn-flat, &.btn-floating { From e5ecbdd09d0755ca98069c7909d9cc6df771b2fc Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Mon, 13 Jan 2025 20:30:11 +0100 Subject: [PATCH 3/4] 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', + }; +}; From 34805c94f54b9473b5ad1e3b56957a2d2ffe1c7b Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Thu, 30 Jan 2025 23:50:00 +0100 Subject: [PATCH 4/4] Delete sass/components/colors.module.scss --- sass/components/colors.module.scss | 74 ------------------------------ 1 file changed, 74 deletions(-) delete mode 100644 sass/components/colors.module.scss diff --git a/sass/components/colors.module.scss b/sass/components/colors.module.scss deleted file mode 100644 index 19bbc37767..0000000000 --- a/sass/components/colors.module.scss +++ /dev/null @@ -1,74 +0,0 @@ -.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) !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) !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) !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) !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) !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) !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) !important; } -.outline-text { color: var(--md-sys-color-outline) !important; } - -.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) !important; } -.inverse-surface-text { color: var(--md-sys-color-inverse-surface) !important; } - -.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) !important; } -.shadow-text { color: var(--md-sys-color-shadow) !important; } - -.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) !important; } -.outline-variant-text { color: var(--md-sys-color-outline-variant) !important; } - -.scrim { background-color: var(--md-sys-color-scrim) !important; } -.scrim-text { color: var(--md-sys-color-scrim) !important; }