Skip to content

Commit e0726e1

Browse files
jelbournjelbourn
authored
feat(theming): add initial version for user-facing theming (#1239)
1 parent cdd8e34 commit e0726e1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+1776
-1420
lines changed

‎src/demo-app/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<link rel="icon" type="image/x-icon" href="favicon.ico">
1010
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11-
<link href="@angular2-material/core/style/core.css" rel="stylesheet">
11+
<link href="@angular2-material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
1212

1313
<!-- FontAwesome for md-icon demo. -->
1414
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

‎src/e2e-app/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<link rel="icon" type="image/x-icon" href="favicon.ico">
1010
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11-
<link href="@angular2-material/core/style/core.css" rel="stylesheet">
11+
<link href="@angular2-material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
1212

1313
<!-- FontAwesome for md-icon demo. -->
1414
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

‎src/lib/all/_all-theme.scss

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@import '../core/core';
2+
@import '../button/button-theme';
3+
@import '../button-toggle/button-toggle-theme';
4+
@import '../card/card-theme';
5+
@import '../checkbox/checkbox-theme';
6+
@import '../dialog/dialog-theme';
7+
@import '../grid-list/grid-list-theme';
8+
@import '../icon/icon-theme';
9+
@import '../input/input-theme';
10+
@import '../list/list-theme';
11+
@import '../menu/menu-theme';
12+
@import '../progress-bar/progress-bar-theme';
13+
@import '../progress-circle/progress-circle-theme';
14+
@import '../radio/radio-theme';
15+
@import '../sidenav/sidenav-theme';
16+
@import '../slide-toggle/slide-toggle-theme';
17+
@import '../slider/slider-theme';
18+
@import '../tabs/tabs-theme';
19+
@import '../toolbar/toolbar-theme';
20+
@import '../tooltip/tooltip-theme';
21+
22+
23+
@mixin angular-material-theme($theme) {
24+
@include md-core-theme($theme);
25+
@include md-button-theme($theme);
26+
@include md-button-toggle-theme($theme);
27+
@include md-card-theme($theme);
28+
@include md-checkbox-theme($theme);
29+
@include md-dialog-theme($theme);
30+
@include md-grid-list-theme($theme);
31+
@include md-icon-theme($theme);
32+
@include md-input-theme($theme);
33+
@include md-list-theme($theme);
34+
@include md-menu-theme($theme);
35+
@include md-progress-bar-theme($theme);
36+
@include md-progress-circle-theme($theme);
37+
@include md-radio-theme($theme);
38+
@include md-sidenav-theme($theme);
39+
@include md-slide-toggle-theme($theme);
40+
@include md-slider-theme($theme);
41+
@include md-tabs-theme($theme);
42+
@include md-toolbar-theme($theme);
43+
@include md-tooltip-theme($theme);
44+
}

‎src/lib/button-toggle/_button-toggle-theme.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import '../core/theming/palette';
2+
@import '../core/theming/theming';
3+
4+
5+
@mixin md-button-toggle-theme($theme) {
6+
$foreground: map-get($theme, foreground);
7+
8+
.md-button-toggle-checked .md-button-toggle-label-content {
9+
background-color: md-color($md-grey, 300);
10+
}
11+
.md-button-toggle-disabled .md-button-toggle-label-content {
12+
background-color: md-color($foreground, disabled);
13+
}
14+
}

‎src/lib/button-toggle/button-toggle.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<label [attr.for]="inputId" class="md-button-toggle-label">
2-
<input #input class="md-button-toggle-input"
2+
<input #input class="md-button-toggle-input md-visually-hidden"
33
[type]="_type"
44
[id]="inputId"
55
[checked]="checked"

‎src/lib/button-toggle/button-toggle.scss

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
@import 'elevation';
2-
@import 'default-theme';
3-
@import 'palette';
4-
@import 'mixins';
1+
@import '../core/style/elevation';
2+
53

64
$md-button-toggle-padding: 0 16px !default;
75
$md-button-toggle-line-height: 36px !default;
@@ -16,24 +14,14 @@ md-button-toggle-group {
1614
white-space: nowrap;
1715
}
1816

19-
20-
.md-button-toggle-checked .md-button-toggle-label-content {
21-
background-color: md-color($md-grey, 300);
22-
}
23-
2417
.md-button-toggle-disabled .md-button-toggle-label-content {
25-
background-color: md-color($md-foreground, disabled);
26-
cursor: not-allowed;
18+
cursor: default;
2719
}
2820

2921
md-button-toggle {
3022
white-space: nowrap;
3123
}
3224

33-
.md-button-toggle-input {
34-
@include md-visually-hidden;
35-
}
36-
3725
.md-button-toggle-label-content {
3826
display: inline-block;
3927
line-height: $md-button-toggle-line-height;

‎src/lib/button/_button-base.scss

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
1-
2-
@import 'variables';
3-
@import 'elevation';
4-
@import 'button-mixins';
5-
6-
// TODO(jelbourn): This goes away.
7-
@import 'default-theme';
8-
@import 'button-theme';
1+
@import '../core/style/variables';
2+
@import '../core/style/elevation';
3+
@import '../core/style/button-common';
4+
5+
6+
// Applies a focus style to an md-button element.
7+
@mixin md-button-focus {
8+
&::after {
9+
// The button spec calls for focus on raised buttons (and FABs) to be indicated with a
10+
// black, 12% opacity shade over the normal color (for both light and dark themes).
11+
// We do this by placing an :after pseudo-element with the appropriate shade over the button.
12+
position: absolute;
13+
top: 0;
14+
left: 0;
15+
bottom: 0;
16+
right: 0;
17+
content: '';
18+
background-color: rgba(black, 0.12);
19+
border-radius: inherit;
20+
pointer-events: none;
21+
}
22+
}
923

1024
// Flat and raised button standards
1125
$md-button-padding: 0 16px !default;
@@ -29,8 +43,6 @@ $md-mini-fab-padding: 8px !default;
2943

3044
// Applies base styles to all button types.
3145
%md-button-base {
32-
@include md-button-theme('color');
33-
3446
box-sizing: border-box;
3547
position: relative;
3648

@@ -71,10 +83,7 @@ $md-mini-fab-padding: 8px !default;
7183
@extend %md-button-base;
7284

7385
@include md-elevation(2);
74-
@include md-button-theme('color', default-contrast);
75-
@include md-button-theme('background-color');
7686

77-
background-color: md-color($md-background, background);
7887
// Force hardware acceleration.
7988
transform: translate3d(0, 0, 0);
8089

@@ -97,8 +106,6 @@ $md-mini-fab-padding: 8px !default;
97106

98107
min-width: 0;
99108
border-radius: $md-fab-border-radius;
100-
background-color: md-color($md-accent);
101-
color: md-color($md-accent, default-contrast);
102109
width: $size;
103110
height: $size;
104111
padding: 0;

‎src/lib/button/_button-theme.scss

Lines changed: 63 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,85 @@
1-
/** Applies a property to an md-button element for each of the supported palettes. */
2-
@mixin md-button-theme($property, $color: 'default', $opacity: 1) {
1+
@import '../core/theming/theming';
2+
3+
4+
// Applies a focus style to an md-button element for each of the supported palettes.
5+
@mixin _md-button-focus-color($theme) {
6+
$primary: map-get($theme, primary);
7+
$accent: map-get($theme, accent);
8+
$warn: map-get($theme, warn);
9+
10+
&.md-primary::after {
11+
background-color: md-color($primary, 0.12);
12+
}
13+
14+
&.md-accent::after {
15+
background-color: md-color($accent, 0.12);
16+
}
17+
18+
&.md-warn::after {
19+
background-color: md-color($warn, 0.12);
20+
}
21+
}
22+
23+
// Applies a property to an md-button element for each of the supported palettes.
24+
@mixin _md-button-theme-color($theme, $property, $color: 'default') {
25+
$primary: map-get($theme, primary);
26+
$accent: map-get($theme, accent);
27+
$warn: map-get($theme, warn);
28+
$background: map-get($theme, background);
29+
$foreground: map-get($theme, foreground);
30+
331
&.md-primary {
4-
#{$property}: md-color($md-primary, $color, $opacity);
32+
#{$property}: md-color($primary, $color);
533
}
634
&.md-accent {
7-
#{$property}: md-color($md-accent, $color, $opacity);
35+
#{$property}: md-color($accent, $color);
836
}
937
&.md-warn {
10-
#{$property}: md-color($md-warn, $color, $opacity);
38+
#{$property}: md-color($warn, $color);
1139
}
1240

1341
&.md-primary, &.md-accent, &.md-warn, &[disabled] {
1442
&[disabled] {
15-
$palette: if($property == 'color', $md-foreground, $md-background);
43+
$palette: if($property == 'color', $foreground, $background);
1644
#{$property}: md-color($palette, disabled-button);
1745
}
1846
}
1947
}
2048

21-
/** Applies a focus style to an md-button element for each of the supported palettes. */
22-
@mixin md-button-focus {
23-
&::after {
24-
// The button spec calls for focus on raised buttons (and FABs) to be indicated with a
25-
// black, 12% opacity shade over the normal color (for both light and dark themes).
26-
// We do this by placing an :after psuedo-element with the appropriate shade over the button.
27-
position: absolute;
28-
top: 0;
29-
left: 0;
30-
bottom: 0;
31-
right: 0;
32-
content: '';
33-
background-color: rgba(black, 0.12);
34-
border-radius: inherit;
35-
pointer-events: none;
49+
@mixin md-button-theme($theme) {
50+
$primary: map-get($theme, primary);
51+
$accent: map-get($theme, accent);
52+
$warn: map-get($theme, warn);
53+
$background: map-get($theme, background);
54+
$foreground: map-get($theme, foreground);
55+
56+
[md-button], [md-icon-button], [md-raised-button], [md-fab], [md-mini-fab] {
57+
&.md-button-focus {
58+
@include _md-button-focus-color($theme);
59+
}
3660
}
3761

38-
&.md-primary::after {
39-
background-color: md-color($md-primary, 0.12);
62+
[md-button], [md-icon-button] {
63+
@include _md-button-theme-color($theme, 'color');
64+
background: transparent;
65+
66+
// Only flat buttons and icon buttons (not raised or fabs) have a hover style.
67+
// Use the same visual treatment for hover as for focus.
68+
&:hover {
69+
@include _md-button-focus-color($theme);
70+
}
4071
}
4172

42-
&.md-accent::after {
43-
background-color: md-color($md-accent, 0.12);
73+
[md-raised-button], [md-fab], [md-mini-fab] {
74+
@include _md-button-theme-color($theme, 'color', default-contrast);
75+
@include _md-button-theme-color($theme, 'background-color');
76+
background-color: md-color($background, background);
4477
}
4578

46-
&.md-warn::after {
47-
background-color: md-color($md-warn, 0.12);
79+
[md-fab], [md-mini-fab] {
80+
background-color: md-color($accent);
81+
color: md-color($accent, default-contrast);
4882
}
4983
}
84+
85+

‎src/lib/button/button.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,6 @@
3333
}
3434

3535
[md-icon-button] {
36-
@extend %md-button-base;
37-
3836
min-width: 0;
3937
padding: 0;
4038

‎src/lib/card/_card-theme.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import '../core/theming/palette';
2+
@import '../core/theming/theming';
3+
4+
5+
@mixin md-card-theme($theme) {
6+
$background: map-get($theme, background);
7+
$foreground: map-get($theme, foreground);
8+
9+
md-card {
10+
background: md-color($background, card);
11+
color: md-color($foreground, base);
12+
}
13+
14+
md-card-subtitle {
15+
color: md-color($foreground, secondary-text);
16+
}
17+
}

‎src/lib/card/card.scss

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1+
@import '../core/style/variables';
2+
@import '../core/style/elevation';
13

2-
@import 'variables';
3-
@import 'elevation';
4-
@import 'default-theme'; // TODO: Remove this
54

65
$md-card-default-padding: 24px !default;
76
$md-card-mobile-padding: 24px 16px !default;
@@ -16,8 +15,6 @@ md-card {
1615
padding: $md-card-default-padding;
1716
border-radius: $md-card-border-radius;
1817
font-family: $md-font-family;
19-
background: md-color($md-background, card);
20-
color: md-color($md-foreground, base);
2118
}
2219

2320
md-card:hover {
@@ -43,7 +40,6 @@ md-card-title {
4340
md-card-subtitle {
4441
@extend %md-card-section-base;
4542
font-size: $md-body-font-size-base;
46-
color: md-color($md-foreground, secondary-text);
4743
}
4844

4945
md-card-content {
@@ -85,7 +81,7 @@ md-card-actions {
8581
}
8682
}
8783

88-
/* HEADER STYLES */
84+
// HEADER STYLES
8985

9086
md-card-header {
9187
display: flex;
@@ -109,7 +105,7 @@ md-card-header md-card-title {
109105
font-size: $md-body-font-size-base;
110106
}
111107

112-
/* TITLE-GROUP STYLES */
108+
// TITLE-GROUP STYLES
113109

114110
// images grouped with title in title-group layout
115111
%md-card-title-img {
@@ -140,7 +136,7 @@ md-card-title-group {
140136
height: 152px;
141137
}
142138

143-
/* MEDIA QUERIES */
139+
// MEDIA QUERIES
144140

145141
@media ($md-xsmall) {
146142
md-card {
@@ -167,7 +163,7 @@ md-card-title-group {
167163

168164
}
169165

170-
/* FIRST/LAST CHILD ADJUSTMENTS */
166+
// FIRST/LAST CHILD ADJUSTMENTS
171167

172168
// top els in md-card-content and md-card can't have their default margin-tops (e.g. <p> tags)
173169
// or they'll incorrectly add to card's top padding

0 commit comments

Comments
 (0)