-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(theming): add initial version for user-facing theming (#1239)
- Loading branch information
Showing
74 changed files
with
1,776 additions
and
1,420 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| @import '../core/core'; | ||
| @import '../button/button-theme'; | ||
| @import '../button-toggle/button-toggle-theme'; | ||
| @import '../card/card-theme'; | ||
| @import '../checkbox/checkbox-theme'; | ||
| @import '../dialog/dialog-theme'; | ||
| @import '../grid-list/grid-list-theme'; | ||
| @import '../icon/icon-theme'; | ||
| @import '../input/input-theme'; | ||
| @import '../list/list-theme'; | ||
| @import '../menu/menu-theme'; | ||
| @import '../progress-bar/progress-bar-theme'; | ||
| @import '../progress-circle/progress-circle-theme'; | ||
| @import '../radio/radio-theme'; | ||
| @import '../sidenav/sidenav-theme'; | ||
| @import '../slide-toggle/slide-toggle-theme'; | ||
| @import '../slider/slider-theme'; | ||
| @import '../tabs/tabs-theme'; | ||
| @import '../toolbar/toolbar-theme'; | ||
| @import '../tooltip/tooltip-theme'; | ||
|
|
||
|
|
||
| @mixin angular-material-theme($theme) { | ||
| @include md-core-theme($theme); | ||
| @include md-button-theme($theme); | ||
| @include md-button-toggle-theme($theme); | ||
| @include md-card-theme($theme); | ||
| @include md-checkbox-theme($theme); | ||
| @include md-dialog-theme($theme); | ||
| @include md-grid-list-theme($theme); | ||
| @include md-icon-theme($theme); | ||
| @include md-input-theme($theme); | ||
| @include md-list-theme($theme); | ||
| @include md-menu-theme($theme); | ||
| @include md-progress-bar-theme($theme); | ||
| @include md-progress-circle-theme($theme); | ||
| @include md-radio-theme($theme); | ||
| @include md-sidenav-theme($theme); | ||
| @include md-slide-toggle-theme($theme); | ||
| @include md-slider-theme($theme); | ||
| @include md-tabs-theme($theme); | ||
| @include md-toolbar-theme($theme); | ||
| @include md-tooltip-theme($theme); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| @import '../core/theming/palette'; | ||
| @import '../core/theming/theming'; | ||
|
|
||
|
|
||
| @mixin md-button-toggle-theme($theme) { | ||
| $foreground: map-get($theme, foreground); | ||
|
|
||
| .md-button-toggle-checked .md-button-toggle-label-content { | ||
| background-color: md-color($md-grey, 300); | ||
| } | ||
| .md-button-toggle-disabled .md-button-toggle-label-content { | ||
| background-color: md-color($foreground, disabled); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,85 @@ | ||
| /** Applies a property to an md-button element for each of the supported palettes. */ | ||
| @mixin md-button-theme($property, $color: 'default', $opacity: 1) { | ||
| @import '../core/theming/theming'; | ||
|
|
||
|
|
||
| // Applies a focus style to an md-button element for each of the supported palettes. | ||
| @mixin _md-button-focus-color($theme) { | ||
| $primary: map-get($theme, primary); | ||
| $accent: map-get($theme, accent); | ||
| $warn: map-get($theme, warn); | ||
|
|
||
| &.md-primary::after { | ||
| background-color: md-color($primary, 0.12); | ||
| } | ||
|
|
||
| &.md-accent::after { | ||
| background-color: md-color($accent, 0.12); | ||
| } | ||
|
|
||
| &.md-warn::after { | ||
| background-color: md-color($warn, 0.12); | ||
| } | ||
| } | ||
|
|
||
| // Applies a property to an md-button element for each of the supported palettes. | ||
| @mixin _md-button-theme-color($theme, $property, $color: 'default') { | ||
| $primary: map-get($theme, primary); | ||
| $accent: map-get($theme, accent); | ||
| $warn: map-get($theme, warn); | ||
| $background: map-get($theme, background); | ||
| $foreground: map-get($theme, foreground); | ||
|
|
||
| &.md-primary { | ||
| #{$property}: md-color($md-primary, $color, $opacity); | ||
| #{$property}: md-color($primary, $color); | ||
| } | ||
| &.md-accent { | ||
| #{$property}: md-color($md-accent, $color, $opacity); | ||
| #{$property}: md-color($accent, $color); | ||
| } | ||
| &.md-warn { | ||
| #{$property}: md-color($md-warn, $color, $opacity); | ||
| #{$property}: md-color($warn, $color); | ||
| } | ||
|
|
||
| &.md-primary, &.md-accent, &.md-warn, &[disabled] { | ||
| &[disabled] { | ||
| $palette: if($property == 'color', $md-foreground, $md-background); | ||
| $palette: if($property == 'color', $foreground, $background); | ||
| #{$property}: md-color($palette, disabled-button); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** Applies a focus style to an md-button element for each of the supported palettes. */ | ||
| @mixin md-button-focus { | ||
| &::after { | ||
| // The button spec calls for focus on raised buttons (and FABs) to be indicated with a | ||
| // black, 12% opacity shade over the normal color (for both light and dark themes). | ||
| // We do this by placing an :after psuedo-element with the appropriate shade over the button. | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| bottom: 0; | ||
| right: 0; | ||
| content: ''; | ||
| background-color: rgba(black, 0.12); | ||
| border-radius: inherit; | ||
| pointer-events: none; | ||
| @mixin md-button-theme($theme) { | ||
| $primary: map-get($theme, primary); | ||
| $accent: map-get($theme, accent); | ||
| $warn: map-get($theme, warn); | ||
| $background: map-get($theme, background); | ||
| $foreground: map-get($theme, foreground); | ||
|
|
||
| [md-button], [md-icon-button], [md-raised-button], [md-fab], [md-mini-fab] { | ||
| &.md-button-focus { | ||
| @include _md-button-focus-color($theme); | ||
| } | ||
| } | ||
|
|
||
| &.md-primary::after { | ||
| background-color: md-color($md-primary, 0.12); | ||
| [md-button], [md-icon-button] { | ||
| @include _md-button-theme-color($theme, 'color'); | ||
| background: transparent; | ||
|
|
||
| // Only flat buttons and icon buttons (not raised or fabs) have a hover style. | ||
| // Use the same visual treatment for hover as for focus. | ||
| &:hover { | ||
| @include _md-button-focus-color($theme); | ||
| } | ||
| } | ||
|
|
||
| &.md-accent::after { | ||
| background-color: md-color($md-accent, 0.12); | ||
| [md-raised-button], [md-fab], [md-mini-fab] { | ||
| @include _md-button-theme-color($theme, 'color', default-contrast); | ||
| @include _md-button-theme-color($theme, 'background-color'); | ||
| background-color: md-color($background, background); | ||
| } | ||
|
|
||
| &.md-warn::after { | ||
| background-color: md-color($md-warn, 0.12); | ||
| [md-fab], [md-mini-fab] { | ||
| background-color: md-color($accent); | ||
| color: md-color($accent, default-contrast); | ||
| } | ||
| } | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -33,8 +33,6 @@ | |
| } | ||
|
|
||
| [md-icon-button] { | ||
| @extend %md-button-base; | ||
|
|
||
| min-width: 0; | ||
| padding: 0; | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| @import '../core/theming/palette'; | ||
| @import '../core/theming/theming'; | ||
|
|
||
|
|
||
| @mixin md-card-theme($theme) { | ||
| $background: map-get($theme, background); | ||
| $foreground: map-get($theme, foreground); | ||
|
|
||
| md-card { | ||
| background: md-color($background, card); | ||
| color: md-color($foreground, base); | ||
| } | ||
|
|
||
| md-card-subtitle { | ||
| color: md-color($foreground, secondary-text); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.