From 299dd71594e60caecdf6b9d78fb5347a0cba7f9f Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Mon, 21 Oct 2024 12:41:26 -0600 Subject: [PATCH] use mat.theme --- scenes/src/styles.scss | 22 +++----- src/_app-theme.scss | 52 ------------------- .../_component-category-list-theme.scss | 25 --------- .../component-category-list.scss | 16 ++++++ .../_component-page-header-theme.scss | 7 --- .../component-page-header.scss | 1 + .../_component-sidenav-theme.scss | 28 ---------- .../component-sidenav/component-nav.html | 3 +- .../component-sidenav/component-sidenav.scss | 5 ++ .../_component-viewer-theme.scss | 12 ----- .../component-viewer/component-viewer.scss | 5 ++ .../pages/guide-list/_guide-list-theme.scss | 18 ------- src/app/pages/guide-list/guide-list.scss | 10 ++++ src/app/pages/homepage/_homepage-theme.scss | 30 ----------- src/app/pages/homepage/homepage.scss | 20 +++++++ src/app/pages/not-found/_not-found-theme.scss | 7 --- src/app/pages/not-found/not-found.scss | 4 ++ .../cookie-popup/_cookie-popup-theme.scss | 10 ---- src/app/shared/cookie-popup/cookie-popup.scss | 5 +- .../example-viewer/_example-viewer-theme.scss | 18 ------- .../shared/example-viewer/example-viewer.scss | 6 +++ src/app/shared/footer/_footer-theme.scss | 13 ----- src/app/shared/footer/footer.scss | 6 ++- src/app/shared/navbar/_navbar-theme.scss | 15 ------ src/app/shared/navbar/navbar.scss | 9 ++++ src/app/shared/support/support.scss | 5 ++ .../_table-of-contents-theme.scss | 16 ------ .../table-of-contents/table-of-contents.scss | 10 ++++ .../theme-picker/_theme-picker-theme.scss | 9 ---- src/app/shared/theme-picker/theme-picker.scss | 1 + src/assets/stack-blitz/src/styles.scss | 21 ++++---- src/index.html | 6 +++ src/styles.scss | 27 +++++----- src/styles/_api-theme.scss | 34 ------------ src/styles/_api.scss | 31 +++++++++++ src/styles/_markdown-theme.scss | 28 ---------- src/styles/_markdown.scss | 16 +++++- src/styles/_svg-theme.scss | 35 ------------- src/styles/_tables-theme.scss | 20 ------- src/styles/_tables.scss | 8 ++- src/styles/custom-themes/azure-blue.scss | 25 ++++----- src/styles/custom-themes/cyan-orange.scss | 24 ++++----- src/styles/custom-themes/magenta-violet.scss | 24 ++++----- src/styles/custom-themes/rose-red.scss | 24 ++++----- 44 files changed, 230 insertions(+), 481 deletions(-) delete mode 100644 src/_app-theme.scss delete mode 100644 src/app/pages/component-category-list/_component-category-list-theme.scss delete mode 100644 src/app/pages/component-page-header/_component-page-header-theme.scss delete mode 100644 src/app/pages/component-sidenav/_component-sidenav-theme.scss delete mode 100644 src/app/pages/component-viewer/_component-viewer-theme.scss delete mode 100644 src/app/pages/guide-list/_guide-list-theme.scss delete mode 100644 src/app/pages/homepage/_homepage-theme.scss delete mode 100644 src/app/pages/not-found/_not-found-theme.scss delete mode 100644 src/app/shared/cookie-popup/_cookie-popup-theme.scss delete mode 100644 src/app/shared/example-viewer/_example-viewer-theme.scss delete mode 100644 src/app/shared/footer/_footer-theme.scss delete mode 100644 src/app/shared/navbar/_navbar-theme.scss delete mode 100644 src/app/shared/table-of-contents/_table-of-contents-theme.scss delete mode 100644 src/app/shared/theme-picker/_theme-picker-theme.scss delete mode 100644 src/styles/_api-theme.scss delete mode 100644 src/styles/_markdown-theme.scss delete mode 100644 src/styles/_svg-theme.scss delete mode 100644 src/styles/_tables-theme.scss diff --git a/scenes/src/styles.scss b/scenes/src/styles.scss index f9148e8e4..480ec6602 100644 --- a/scenes/src/styles.scss +++ b/scenes/src/styles.scss @@ -1,20 +1,14 @@ @use 'sass:map'; @use '@angular/material' as mat; -@include mat.core(); - -$theme: mat.define-theme(( - color: ( - theme-type: light, - primary: mat.$red-palette, - ), - typography: ( - brand-family: 'Roboto', - ), -)); - html { font-family: 'Roboto'; - @include mat.all-component-themes($theme); - @include mat.icon-color($theme, $color-variant: primary); + @include mat.theme(( + color: ( + theme-type: light, + primary: mat.$red-palette, + ), + typography: Roboto, + density: 0, + )); } diff --git a/src/_app-theme.scss b/src/_app-theme.scss deleted file mode 100644 index 28c7f9bcd..000000000 --- a/src/_app-theme.scss +++ /dev/null @@ -1,52 +0,0 @@ -@use '@angular/material' as mat; - -@use './app/pages/component-category-list/component-category-list-theme'; -@use './app/pages/component-sidenav/component-sidenav-theme'; -@use './app/pages/component-viewer/component-viewer-theme'; -@use './app/pages/guide-list/guide-list-theme'; -@use './app/pages/homepage/homepage-theme'; -@use './app/pages/not-found/not-found-theme'; -@use './app/pages/component-page-header/component-page-header-theme'; -@use './app/shared/example-viewer/example-viewer-theme'; -@use './app/shared/footer/footer-theme'; -@use './app/shared/navbar/navbar-theme'; -@use './app/shared/table-of-contents/table-of-contents-theme'; -@use './app/shared/cookie-popup/cookie-popup-theme'; -@use './app/shared/theme-picker/theme-picker-theme'; -@use './styles/api-theme'; -@use './styles/markdown-theme'; -@use './styles/svg-theme'; -@use './styles/tables-theme'; - -// Styles for the docs app that are based on the current theme. -@mixin theme($theme) { - .docs-app-background { - background: mat.get-theme-color($theme, surface); - } - - .docs-help-support { - color: mat.get-theme-color($theme, on-surface); - - a { - color: mat.get-theme-color($theme, on-surface-variant); - } - } - - @include component-category-list-theme.theme($theme); - @include component-sidenav-theme.theme($theme); - @include component-viewer-theme.theme($theme); - @include api-theme.theme($theme); - @include markdown-theme.theme($theme); - @include svg-theme.theme($theme); - @include tables-theme.theme($theme); - @include example-viewer-theme.theme($theme); - @include footer-theme.theme($theme); - @include guide-list-theme.theme($theme); - @include homepage-theme.theme($theme); - @include not-found-theme.theme($theme); - @include navbar-theme.theme($theme); - @include table-of-contents-theme.theme($theme); - @include cookie-popup-theme.theme($theme); - @include theme-picker-theme.theme($theme); - @include component-page-header-theme.theme($theme); -} diff --git a/src/app/pages/component-category-list/_component-category-list-theme.scss b/src/app/pages/component-category-list/_component-category-list-theme.scss deleted file mode 100644 index ce68dd3ec..000000000 --- a/src/app/pages/component-category-list/_component-category-list-theme.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use '@angular/material' as mat; - -@mixin theme($theme) { - .docs-component-category-list-summary a { - color: mat.get-theme-color($theme, primary); - } - - .docs-component-category-list-card-title, - .docs-component-category-list-card-summary { - color: mat.get-theme-color($theme, on-surface-variant); - } - - .docs-component-category-list-card { - border: 1px solid mat.get-theme-color($theme, outline-variant); - border-radius: 12px; - } - - .docs-component-category-list-card:hover { - background: mat.get-theme-color($theme, surface-dim); - } - - .docs-component-category-list-card-image-wrapper { - border-bottom: 1px solid mat.get-theme-color($theme, outline-variant); - } -} diff --git a/src/app/pages/component-category-list/component-category-list.scss b/src/app/pages/component-category-list/component-category-list.scss index e893b8684..a627389f2 100644 --- a/src/app/pages/component-category-list/component-category-list.scss +++ b/src/app/pages/component-category-list/component-category-list.scss @@ -24,6 +24,15 @@ } } +.docs-component-category-list-summary a { + color: var(--mat-sys-primary); +} + +.docs-component-category-list-card-title, +.docs-component-category-list-card-summary { + color: var(--mat-sys-on-surface-variant); +} + .docs-component-category-list { display: flex; flex-wrap: wrap; @@ -53,10 +62,17 @@ .docs-component-category-list-card { overflow: hidden; transition: background 0.3s ease; + border: 1px solid var(--mat-sys-outline-variant); + border-radius: 12px; + + &:hover { + background: var(--mat-sys-surface-dim); + } } .docs-component-category-list-card-image-wrapper { height: 156px; + border-bottom: 1px solid var(--mat-sys-outline-variant); } .docs-component-category-list-card-summary { diff --git a/src/app/pages/component-page-header/_component-page-header-theme.scss b/src/app/pages/component-page-header/_component-page-header-theme.scss deleted file mode 100644 index a6e61ffd4..000000000 --- a/src/app/pages/component-page-header/_component-page-header-theme.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use '@angular/material' as mat; - -@mixin theme($theme) { - .docs-component-page-header { - background: mat.get-theme-color($theme, primary-container); - } -} diff --git a/src/app/pages/component-page-header/component-page-header.scss b/src/app/pages/component-page-header/component-page-header.scss index e89715d50..c99ba2da2 100644 --- a/src/app/pages/component-page-header/component-page-header.scss +++ b/src/app/pages/component-page-header/component-page-header.scss @@ -5,6 +5,7 @@ justify-content: center; align-items: center; min-height: 60px; + background: var(--mat-sys-primary-container); @media (max-width: constants.$small-breakpoint-width) { display: flex; diff --git a/src/app/pages/component-sidenav/_component-sidenav-theme.scss b/src/app/pages/component-sidenav/_component-sidenav-theme.scss deleted file mode 100644 index abdf84b79..000000000 --- a/src/app/pages/component-sidenav/_component-sidenav-theme.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use '@angular/material' as mat; -@use 'sass:color'; -@use '../../../styles/constants'; - -@mixin theme($theme) { - .docs-component-viewer-nav-content { - border-right: 1px solid mat.get-theme-color($theme, outline-variant); - - &::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, .26); - } - - a.docs-component-viewer-sidenav-item-selected { - background: rgba(mat.get-theme-color($theme, primary), 0.15); - - .mdc-list-item__primary-text { - color: color.adjust( - mat.get-theme-color($theme, primary), - $lightness: if(mat.get-theme-type($theme) == dark, 25%, 0%) - ); - } - - &:hover { - background: rgba(mat.get-theme-color($theme, primary), 0.25); - } - } - } -} diff --git a/src/app/pages/component-sidenav/component-nav.html b/src/app/pages/component-sidenav/component-nav.html index 4de58c659..0ad82b324 100644 --- a/src/app/pages/component-sidenav/component-nav.html +++ b/src/app/pages/component-sidenav/component-nav.html @@ -3,8 +3,9 @@
@for (component of docItems.getItems(section); track component) { - {{component.name}} diff --git a/src/app/pages/component-sidenav/component-sidenav.scss b/src/app/pages/component-sidenav/component-sidenav.scss index af452804c..4ac99781d 100644 --- a/src/app/pages/component-sidenav/component-sidenav.scss +++ b/src/app/pages/component-sidenav/component-sidenav.scss @@ -36,6 +36,7 @@ app-component-sidenav { top: 0; .docs-component-viewer-nav-content { + border-right: 1px solid var(--mat-sys-outline-variant); width: constants.$sidenav-width; padding: 16px 8px; height: calc(100vh - 75px); @@ -47,6 +48,10 @@ app-component-sidenav { width: 4px; } + &::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, .26); + } + ul { list-style-type: none; margin: 0 0 5px 0; diff --git a/src/app/pages/component-viewer/_component-viewer-theme.scss b/src/app/pages/component-viewer/_component-viewer-theme.scss deleted file mode 100644 index 644c4b25f..000000000 --- a/src/app/pages/component-viewer/_component-viewer-theme.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '@angular/material' as mat; - -@mixin theme($theme) { - guide-viewer, - app-component-viewer { - color: mat.get-theme-color($theme, on-surface); - } - - .docs-api-h3 { - border-bottom: 1px solid mat.get-theme-color($theme, outline-variant) - } -} diff --git a/src/app/pages/component-viewer/component-viewer.scss b/src/app/pages/component-viewer/component-viewer.scss index cd0b7c52c..7deb81857 100644 --- a/src/app/pages/component-viewer/component-viewer.scss +++ b/src/app/pages/component-viewer/component-viewer.scss @@ -1,5 +1,10 @@ @use '../../../styles/constants'; +guide-viewer, +app-component-viewer { + color: var(--mat-sys-on-surface); +} + app-component-viewer { font-weight: 400; width: calc(100% - #{constants.$sidenav-width + 1} - #{constants.$content-padding-sidenav * 2}); diff --git a/src/app/pages/guide-list/_guide-list-theme.scss b/src/app/pages/guide-list/_guide-list-theme.scss deleted file mode 100644 index 56481f758..000000000 --- a/src/app/pages/guide-list/_guide-list-theme.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use '@angular/material' as mat; - -@mixin theme($theme) { - .docs-guide-list .docs-guide-item { - color: mat.get-theme-color($theme, on-surface-variant); - } - - .docs-guide-item { - &:focus, - &:hover { - outline: none; - - .docs-guide-card { - background: mat.get-theme-color($theme, surface-dim); - } - } - } -} diff --git a/src/app/pages/guide-list/guide-list.scss b/src/app/pages/guide-list/guide-list.scss index a20a65cf6..e1e6a896b 100644 --- a/src/app/pages/guide-list/guide-list.scss +++ b/src/app/pages/guide-list/guide-list.scss @@ -15,9 +15,19 @@ } .docs-guide-item { + color: var(--mat-sys-on-surface-variant); text-decoration: none; display: flex; margin: 16px; + + &:focus, + &:hover { + outline: none; + + .docs-guide-card { + background: var(--mat-sys-surface-dim); + } + } } .docs-guide-card.mat-mdc-card { diff --git a/src/app/pages/homepage/_homepage-theme.scss b/src/app/pages/homepage/_homepage-theme.scss deleted file mode 100644 index 31954dfe9..000000000 --- a/src/app/pages/homepage/_homepage-theme.scss +++ /dev/null @@ -1,30 +0,0 @@ -@use '@angular/material' as mat; - -@mixin theme($theme) { - app-homepage { - .docs-header-background { - background: mat.get-theme-color($theme, primary-container); - } - - .docs-header-headline { - color: mat.get-theme-color($theme, on-primary-container); - } - - .docs-homepage-row, - .docs-homepage-carousel-row h2, - a.docs-featured-components-carousel-item, - .docs-homepage-guides-card, - a.docs-link:hover { - color: mat.get-theme-color($theme, on-surface-variant); - } - - [carousel-item]:hover, - [carousel-item]:focus { - outline: none; - - .docs-homepage-guides-card { - background: mat.get-theme-color($theme, surface-dim); - } - } - } -} diff --git a/src/app/pages/homepage/homepage.scss b/src/app/pages/homepage/homepage.scss index e29e282f3..109e9e677 100644 --- a/src/app/pages/homepage/homepage.scss +++ b/src/app/pages/homepage/homepage.scss @@ -6,6 +6,7 @@ $margin-promotion-sections-small: 15px; overflow: hidden; position: relative; height: 420px; + background: var(--mat-sys-primary-container); } .docs-homepage-logo { @@ -30,7 +31,17 @@ $margin-promotion-sections-small: 15px; transform: translate(-50%, -50%); } +.docs-homepage-row, +.docs-homepage-carousel-row h2, +a.docs-featured-components-carousel-item, +.docs-homepage-guides-card, +a.docs-link:hover { + color: var(--mat-sys-on-surface-variant); +} + .docs-header-headline { + color: var(--mat-sys-on-primary-container); + h1 { font-size: 56px; font-weight: 500; @@ -241,3 +252,12 @@ $margin-promotion-sections-small: 15px; margin: $margin-promotion-sections-small 0; } } + +[carousel-item]:hover, +[carousel-item]:focus { + outline: none; + + .docs-homepage-guides-card { + background: var(--mat-sys-surface-dim); + } +} diff --git a/src/app/pages/not-found/_not-found-theme.scss b/src/app/pages/not-found/_not-found-theme.scss deleted file mode 100644 index f947e7552..000000000 --- a/src/app/pages/not-found/_not-found-theme.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use '@angular/material' as mat; - -@mixin theme($theme) { - app-not-found { - color: mat.get-theme-color($theme, on-primary-container); - } -} diff --git a/src/app/pages/not-found/not-found.scss b/src/app/pages/not-found/not-found.scss index 98fabb632..81005c711 100644 --- a/src/app/pages/not-found/not-found.scss +++ b/src/app/pages/not-found/not-found.scss @@ -1,6 +1,10 @@ $vertical-spacing: 64px; $horizontal-spacing: 32px; +:host { + color: var(--mat-sys-on-primary-container); +} + main { min-height: 100vh; font-size: 1.25rem; diff --git a/src/app/shared/cookie-popup/_cookie-popup-theme.scss b/src/app/shared/cookie-popup/_cookie-popup-theme.scss deleted file mode 100644 index ef3431b09..000000000 --- a/src/app/shared/cookie-popup/_cookie-popup-theme.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use '@angular/material' as mat; - -@mixin theme($theme) { - app-cookie-popup { - .popup { - color: mat.get-theme-color($theme, on-surface); - background: mat.get-theme-color($theme, surface); - } - } -} diff --git a/src/app/shared/cookie-popup/cookie-popup.scss b/src/app/shared/cookie-popup/cookie-popup.scss index 3be7c3f86..7458fcda4 100644 --- a/src/app/shared/cookie-popup/cookie-popup.scss +++ b/src/app/shared/cookie-popup/cookie-popup.scss @@ -1,11 +1,12 @@ @use 'sass:math'; @use '@angular/cdk' as cdk; -@use '@angular/material' as mat; $_inner-spacing: 16px; .popup { - @include mat.elevation(2); + box-shadow: var(--mat-app-elevation-shadow-level-2); + color: var(--mat-sys-on-surface); + background: var(--mat-sys-surface); position: fixed; bottom: 0; left: 0; diff --git a/src/app/shared/example-viewer/_example-viewer-theme.scss b/src/app/shared/example-viewer/_example-viewer-theme.scss deleted file mode 100644 index ad6a1385d..000000000 --- a/src/app/shared/example-viewer/_example-viewer-theme.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use '@angular/material' as mat; - -@mixin theme($theme) { - example-viewer { - .docs-example-viewer-wrapper { - border: 1px solid mat.get-theme-color($theme, outline-variant); - } - - .docs-example-viewer-title { - color: mat.get-theme-color($theme, on-surface-variant); - } - - .docs-example-viewer-source code-snippet { - border-bottom: 1px solid mat.get-theme-color($theme, outline-variant); - } - } -} - diff --git a/src/app/shared/example-viewer/example-viewer.scss b/src/app/shared/example-viewer/example-viewer.scss index 83f3ed326..e6210b0c1 100644 --- a/src/app/shared/example-viewer/example-viewer.scss +++ b/src/app/shared/example-viewer/example-viewer.scss @@ -5,6 +5,7 @@ .docs-example-viewer-wrapper { border-radius: 12px; + border: 1px solid var(--mat-sys-outline-variant); h3 { margin-top: 10px; @@ -17,6 +18,11 @@ display: flex; justify-content: center; padding: 16px 16px 0 24px; + color: var(--mat-sys-on-surface-variant); +} + +.docs-example-viewer-source code-snippet { + border-bottom: 1px solid var(--mat-sys-outline-variant); } .docs-example-viewer-title-spacer { diff --git a/src/app/shared/footer/_footer-theme.scss b/src/app/shared/footer/_footer-theme.scss deleted file mode 100644 index 9a45762c7..000000000 --- a/src/app/shared/footer/_footer-theme.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use '@angular/material' as mat; - -@mixin theme($theme) { - app-footer { - footer { - border-top: solid 1px mat.get-theme-color($theme, outline-variant); - } - - &, a { - color: mat.get-theme-color($theme, on-surface-variant); - } - } -} diff --git a/src/app/shared/footer/footer.scss b/src/app/shared/footer/footer.scss index 109f9ce49..8c0c32c55 100644 --- a/src/app/shared/footer/footer.scss +++ b/src/app/shared/footer/footer.scss @@ -3,6 +3,10 @@ margin-top: 100px; } +footer { + border-top: solid 1px var(--mat-sys-outline-variant); +} + .docs-footer { padding: 12px; font-size: 12px; @@ -58,8 +62,8 @@ app-logo { } a { + color: var(--mat-sys-on-surface-variant); text-decoration: none; - color: inherit; &:hover, &:focus { diff --git a/src/app/shared/navbar/_navbar-theme.scss b/src/app/shared/navbar/_navbar-theme.scss deleted file mode 100644 index b71523a3a..000000000 --- a/src/app/shared/navbar/_navbar-theme.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '@angular/material' as mat; - -@mixin theme($theme) { - app-navbar { - color: mat.get-theme-color($theme, primary); - - .docs-navbar, .docs-navbar-header { - background: mat.get-theme-color($theme, primary-container); - - .docs-navbar-header-item-selected { - background: rgba(mat.get-theme-color($theme, primary), 0.1); - } - } - } -} diff --git a/src/app/shared/navbar/navbar.scss b/src/app/shared/navbar/navbar.scss index 64c964a10..4b4c041c8 100644 --- a/src/app/shared/navbar/navbar.scss +++ b/src/app/shared/navbar/navbar.scss @@ -1,4 +1,9 @@ +:host { + color: var(--mat-sys-primary); +} + .docs-navbar-header { + background: var(--mat-sys-primary-container); display: flex; flex-wrap: wrap; align-items: center; @@ -9,6 +14,10 @@ margin-left: auto; } } + + .docs-navbar-header-item-selected { + background: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent); + } } .mat-mdc-icon-button { diff --git a/src/app/shared/support/support.scss b/src/app/shared/support/support.scss index 6eeb6dc9c..20430b2c9 100644 --- a/src/app/shared/support/support.scss +++ b/src/app/shared/support/support.scss @@ -1,9 +1,14 @@ .docs-help-support { + color: var(--mat-sys-on-surface); width: 75%; margin: auto; padding: 20px 0; } +.docs-help-support a { + color: var(--mat-sys-on-surface-variant); +} + .docs-help-support ul { display: flex; justify-content: space-around; diff --git a/src/app/shared/table-of-contents/_table-of-contents-theme.scss b/src/app/shared/table-of-contents/_table-of-contents-theme.scss deleted file mode 100644 index ab1fdc018..000000000 --- a/src/app/shared/table-of-contents/_table-of-contents-theme.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use '@angular/material' as mat; - -@mixin theme($theme) { - .docs-toc-container { - border-left: solid 4px mat.get-theme-color($theme, primary-container); - - .docs-link { - color: mat.get-theme-color($theme, on-surface); - - &:hover, - &.docs-active { - color: mat.get-theme-color($theme, primary); - } - } - } -} diff --git a/src/app/shared/table-of-contents/table-of-contents.scss b/src/app/shared/table-of-contents/table-of-contents.scss index e7e9abd39..1eff9de44 100644 --- a/src/app/shared/table-of-contents/table-of-contents.scss +++ b/src/app/shared/table-of-contents/table-of-contents.scss @@ -13,6 +13,16 @@ } .docs-toc-container { + border-left: solid 4px var(--mat-sys-primary-container); + + .docs-link { + color: var(--mat-sys-on-surface); + + &:hover, + &.docs-active { + color: var(--mat-sys-primary); + } + } width: 100%; padding: 8px 0 8px 16px; box-sizing: border-box; diff --git a/src/app/shared/theme-picker/_theme-picker-theme.scss b/src/app/shared/theme-picker/_theme-picker-theme.scss deleted file mode 100644 index 539c4cc05..000000000 --- a/src/app/shared/theme-picker/_theme-picker-theme.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use '@angular/material' as mat; - -@mixin theme($theme) { - .docs-theme-picker-menu { - .theme-example-icon { - border: solid 1px rgba(mat.get-theme-color($theme, outline-variant), 0.5); - } - } -} diff --git a/src/app/shared/theme-picker/theme-picker.scss b/src/app/shared/theme-picker/theme-picker.scss index 6a2677474..5f015ebf3 100644 --- a/src/app/shared/theme-picker/theme-picker.scss +++ b/src/app/shared/theme-picker/theme-picker.scss @@ -11,6 +11,7 @@ button.docs-theme-picker-trigger { width: 24px; height: 24px; border-radius: 4px; + border: solid 1px color-mix(in srgb, var(--mat-sys-outline-variant) 50%, transparent); svg { vertical-align: middle; diff --git a/src/assets/stack-blitz/src/styles.scss b/src/assets/stack-blitz/src/styles.scss index c25b2117b..919446543 100644 --- a/src/assets/stack-blitz/src/styles.scss +++ b/src/assets/stack-blitz/src/styles.scss @@ -1,25 +1,22 @@ @use '@angular/material' as mat; -$theme: mat.define-theme(( - color: ( - theme-type: light, - primary: mat.$azure-palette, - tertiary: mat.$blue-palette, - ) -)); - body { font-family: Roboto, "Helvetica Neue", sans-serif; margin: 0; padding: 30px; height: 100%; - @include mat.all-component-themes($theme); + @include mat.theme(( + color: ( + theme-type: light, + primary: mat.$azure-palette, + tertiary: mat.$blue-palette, + ), + typography: Roboto, + density: 0, + )); } html { height: 100%; } - -@include mat.core(); -@include mat.color-variants-backwards-compatibility($theme); diff --git a/src/index.html b/src/index.html index a16708fab..52d600a08 100644 --- a/src/index.html +++ b/src/index.html @@ -73,6 +73,12 @@ } } + + diff --git a/src/styles.scss b/src/styles.scss index 91bbd5645..e4c7791e4 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,23 +1,20 @@ @use '@angular/material' as mat; -@use './app-theme'; +@use '@angular/cdk'; @use './styles/api'; @use './styles/markdown'; @use './styles/tables'; @use './styles/general'; -$theme: mat.define-theme(( - color: ( - theme-type: light, - primary: mat.$azure-palette, - tertiary: mat.$blue-palette, - ) -)); +html { + @include mat.theme(( + color: ( + theme-type: light, + primary: mat.$azure-palette, + tertiary: mat.$blue-palette, + ), + typography: Roboto, + density: 0, + )); -// Include material core styles. -@include mat.core(); -@include mat.color-variants-backwards-compatibility($theme); -@include app-theme.theme($theme); - -:root { - @include mat.all-component-themes($theme); + @include cdk.a11y-visually-hidden(); } diff --git a/src/styles/_api-theme.scss b/src/styles/_api-theme.scss deleted file mode 100644 index e3d182a00..000000000 --- a/src/styles/_api-theme.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '@angular/material' as mat; - -// Mixin to apply theme colors for generated API docs. -@mixin theme($theme) { - .docs-api-method-name-cell, - .docs-api-method-returns-type, - .docs-api-method-parameter-type, - .docs-api a { - color: mat.get-theme-color($theme, primary); - } - - .docs-api-modifier-method-marker { - background-color: mat.get-theme-color($theme, primary-container); - color: mat.get-theme-color($theme, on-primary-container); - } - - // Force the top-level API docs header to be hidden, since this is already - // captured in the top nav-bar. - .docs-api-h1 { - display: none !important; - } - - // Prevent p tags from not breaking, causing x axis overflows. - .docs-api > p { - word-break: break-word; - } - - .docs-api-class-name, - .docs-api-module-import, - .docs-api-class-selector-name, - .docs-api-class-export-name { - background: rgba(mat.get-theme-color($theme, primary-container), 0.25); - } -} diff --git a/src/styles/_api.scss b/src/styles/_api.scss index 0fa8b7e7a..6d59e3847 100644 --- a/src/styles/_api.scss +++ b/src/styles/_api.scss @@ -4,6 +4,36 @@ max-width: 100%; } +.docs-api-method-name-cell, +.docs-api-method-returns-type, +.docs-api-method-parameter-type, +.docs-api a { + color: var(--mat-sys-primary); +} + +.docs-api-modifier-method-marker { + background-color: var(--mat-sys-primary-container); + color: var(--mat-sys-on-primary-container); +} + +// Force the top-level API docs header to be hidden, since this is already +// captured in the top nav-bar. +.docs-api-h1 { + display: none !important; +} + +// Prevent p tags from not breaking, causing x axis overflows. +.docs-api > p { + word-break: break-word; +} + +.docs-api-class-name, +.docs-api-module-import, +.docs-api-class-selector-name, +.docs-api-class-export-name { + background: color-mix(in srgb, var(--mat-sys-primary-container) 25%, transparent); +} + // Top header, e.g., "API documentation for dialog". .docs-api-h2 { font-size: 30px; @@ -14,6 +44,7 @@ font-size: 24px; font-weight: 400; margin-top: 45px; + border-bottom: 1px solid var(--mat-sys-outline-variant) } .docs-api-h4 { diff --git a/src/styles/_markdown-theme.scss b/src/styles/_markdown-theme.scss deleted file mode 100644 index f043ef6c7..000000000 --- a/src/styles/_markdown-theme.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use '@angular/material' as mat; - -// Mixin to apply theme colors for docs generated from markdown files in the material2 repo. -@mixin theme($theme) { - .docs-markdown { - a:not(.mat-mdc-button-base) { - color: mat.get-theme-color($theme, primary); - } - - pre { - border: solid 1px mat.get-theme-color($theme, outline-variant); - border-radius: 12px; - - code { - background: transparent; - } - } - - h3 .material-icons, - h4 .material-icons { - color: mat.get-theme-color($theme, on-surface); - } - - code { - background: rgba(mat.get-theme-color($theme, primary-container), 0.25); - } - } -} diff --git a/src/styles/_markdown.scss b/src/styles/_markdown.scss index 5b1990473..b7a564f67 100644 --- a/src/styles/_markdown.scss +++ b/src/styles/_markdown.scss @@ -3,6 +3,10 @@ .docs-markdown { max-width: 100%; + a:not(.mat-mdc-button-base) { + color: var(--mat-sys-primary); + } + h1 { display: inline-block; font-size: 32px; @@ -18,7 +22,6 @@ h3 { font-size: 24px; - font-weight: 500; margin: 32px 0 16px; font-weight: 400; } @@ -29,6 +32,11 @@ font-weight: 400; } + h3 .material-icons, + h4 .material-icons { + color: var(--mat-sys-on-surface); + } + h5 { font-size: 18px; margin: 20px 0 10px; @@ -58,20 +66,24 @@ } pre { - border-radius: 5px; display: block; margin: 24px auto; overflow-x: auto; padding: 20px; white-space: pre-wrap; + border: solid 1px var(--mat-sys-outline-variant); + border-radius: 12px; + code { + background: transparent; padding: 0; font-size: 100%; } } code { + background: color-mix(in srgb, var(--mat-sys-primary-container) 25%, transparent); padding: 3px; } } diff --git a/src/styles/_svg-theme.scss b/src/styles/_svg-theme.scss deleted file mode 100644 index 36c80e63d..000000000 --- a/src/styles/_svg-theme.scss +++ /dev/null @@ -1,35 +0,0 @@ -@use 'sass:color'; -@use '@angular/material' as mat; - -// Mixin to create a css class for each fill, stroke, and stop-color for a given color. -@mixin _svgColorProperties($className, $color) { - .docs-svg-#{$className}-fill { - fill: $color; - } - - .docs-svg-#{$className}-stroke { - stroke: $color; - } - - .docs-svg-#{$className}-stop-color { - stop-color: $color; - } -} - -// Mixin to apply theme colors for generated API docs. -@mixin theme($theme) { - @include _svgColorProperties(primary, mat.get-theme-color($theme, primary)); - @include _svgColorProperties(accent, mat.get-theme-color($theme, secondary)); - - // Use sass's `lighten` and `darken` to create gradient colors for the docs SVGs. - // This is specifically tailored to the SVGs in this app and is not a general approach. - $base: mat.get-theme-color($theme, primary); - @include _svgColorProperties(primary-dark-30, color.scale($base, $lightness: -30%)); - @include _svgColorProperties(primary-dark-40, color.scale($base, $lightness: -40%)); - @include _svgColorProperties(primary-light-20, color.scale($base, $lightness: +20%)); - @include _svgColorProperties(primary-light-30, color.scale($base, $lightness: +30%)); - @include _svgColorProperties(primary-light-40, color.scale($base, $lightness: +40%)); - @include _svgColorProperties(primary-light-60, color.scale($base, $lightness: +60%)); - @include _svgColorProperties(primary-light-80, color.scale($base, $lightness: +80%)); - @include _svgColorProperties(primary-light-85, color.scale($base, $lightness: +85%)); -} diff --git a/src/styles/_tables-theme.scss b/src/styles/_tables-theme.scss deleted file mode 100644 index 3d87e7d88..000000000 --- a/src/styles/_tables-theme.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@angular/material' as mat; - -// Mixin to apply theme colors for both generated API docs and markdown docs (guides/overviews). -@mixin theme($theme) { - .docs-api table, - .docs-markdown > table { - color: mat.get-theme-color($theme, on-surface); - } - - .docs-api th, - .docs-markdown > table th { - font-weight: 500; - } - - .docs-api tr, - .docs-markdown > table tr { - border-bottom: 1px solid mat.get-theme-color($theme, outline-variant); - height: 56px; - } -} diff --git a/src/styles/_tables.scss b/src/styles/_tables.scss index 860edb847..e6765047a 100644 --- a/src/styles/_tables.scss +++ b/src/styles/_tables.scss @@ -2,6 +2,7 @@ .docs-api table, .docs-markdown > table { + color: var(--mat-sys-on-surface); border-collapse: collapse; border-spacing: 0; margin: 0 0 32px; @@ -22,10 +23,10 @@ .docs-api th, .docs-markdown > table th { - font-weight: 400; max-width: 100px; padding: 14px 16px; text-align: left; + font-weight: 500; } .docs-api td, @@ -44,6 +45,11 @@ } } +.docs-api tr, +.docs-markdown > table tr { + border-bottom: 1px solid var(--mat-sys-outline-variant); + height: 56px; +} @media (max-width: constants.$small-breakpoint-width) { .docs-api table, diff --git a/src/styles/custom-themes/azure-blue.scss b/src/styles/custom-themes/azure-blue.scss index 03149a018..9bc91568b 100644 --- a/src/styles/custom-themes/azure-blue.scss +++ b/src/styles/custom-themes/azure-blue.scss @@ -1,17 +1,14 @@ @use '@angular/material' as mat; -@use '../../app-theme'; -$theme: mat.define-theme(( - color: ( - theme-type: light, - primary: mat.$azure-palette, - tertiary: mat.$blue-palette, - ) -)); - -@include mat.color-variants-backwards-compatibility($theme); -@include app-theme.theme($theme); - -:root { - @include mat.all-component-themes($theme); +html { + @include mat.theme(( + color: ( + theme-type: light, + primary: mat.$azure-palette, + tertiary: mat.$blue-palette, + ), + typography: Roboto, + density: 0, + )); } + diff --git a/src/styles/custom-themes/cyan-orange.scss b/src/styles/custom-themes/cyan-orange.scss index 253bffd87..dadaaa38a 100644 --- a/src/styles/custom-themes/cyan-orange.scss +++ b/src/styles/custom-themes/cyan-orange.scss @@ -1,18 +1,14 @@ @use '@angular/material' as mat; -@use '../../app-theme'; @use '../../highlightjs/material-dark'; -$theme: mat.define-theme(( - color: ( - theme-type: dark, - primary: mat.$cyan-palette, - tertiary: mat.$orange-palette - ) -)); - -@include mat.color-variants-backwards-compatibility($theme); -@include app-theme.theme($theme); - -:root { - @include mat.all-component-themes($theme); +html { + @include mat.theme(( + color: ( + theme-type: dark, + primary: mat.$cyan-palette, + tertiary: mat.$orange-palette + ), + typography: Roboto, + density: 0, + )); } diff --git a/src/styles/custom-themes/magenta-violet.scss b/src/styles/custom-themes/magenta-violet.scss index 06e18d955..dd76bb4e3 100644 --- a/src/styles/custom-themes/magenta-violet.scss +++ b/src/styles/custom-themes/magenta-violet.scss @@ -1,18 +1,14 @@ @use '@angular/material' as mat; -@use '../../app-theme'; @use '../../highlightjs/material-dark'; -$theme: mat.define-theme(( - color: ( - theme-type: dark, - primary: mat.$magenta-palette, - tertiary: mat.$violet-palette, - ) -)); - -@include mat.color-variants-backwards-compatibility($theme); -@include app-theme.theme($theme); - -:root { - @include mat.all-component-themes($theme); +html { + @include mat.theme(( + color: ( + theme-type: dark, + primary: mat.$magenta-palette, + tertiary: mat.$violet-palette, + ), + typography: Roboto, + density: 0, + )); } diff --git a/src/styles/custom-themes/rose-red.scss b/src/styles/custom-themes/rose-red.scss index f3075b351..ab53f73ba 100644 --- a/src/styles/custom-themes/rose-red.scss +++ b/src/styles/custom-themes/rose-red.scss @@ -1,17 +1,13 @@ @use '@angular/material' as mat; -@use '../../app-theme'; -$theme: mat.define-theme(( - color: ( - theme-type: light, - primary: mat.$rose-palette, - tertiary: mat.$red-palette, - ) -)); - -@include mat.color-variants-backwards-compatibility($theme); -@include app-theme.theme($theme); - -:root { - @include mat.all-component-themes($theme); +html { + @include mat.theme(( + color: ( + theme-type: light, + primary: mat.$rose-palette, + tertiary: mat.$red-palette, + ), + typography: Roboto, + density: 0, + )); }