Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 46b716f

Browse files
clshortfuseclshortfuse
committed
feat(mdTheme) add contrast opacity values for all color types and hues
1 parent 15da974 commit 46b716f

25 files changed

+200
-109
lines changed

‎docs/guides/THEMES_IMPL_NOTES.md

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ the `$mdTheming` service and tacked into the document head.
1212
* Instead of using hard-coded color or a SCSS variable, the colors are defined with a mini-DSL
1313
(described deblow).
1414
* The build process takes all of those `-theme.scss` files and globs them up into one enourmous
15-
string.
15+
string.
1616
* The build process wraps that string with code to set it an angular module constant:
1717
``` angular.module('material.core').constant('$MD_THEME_CSS', 'HUGE_THEME_STRING'); ```
1818
* That code gets dumped at the end of `angular-material.js`
@@ -24,15 +24,20 @@ mini-DSL, applies the colors for the theme, and appends the resulting CSS into t
2424

2525

2626
### The mini-DSL
27-
* Each color is written in the form `'{{palette-hue-opacity}}'`, where opacity is optional.
27+
* Each color is written in the form `'{{palette-hue-contrast-opacity}}'`, where `hue`, `contrast`,
28+
and opacity are optional.
2829
* For example, `'{{primary-500}}'`
29-
* Palettes are `primary`, `accent`, `warn`, `background`, `foreground`
30-
* The hues for each type except `foreground` use the Material Design hues.
31-
* The `forground` palette is a number from one to four:
32-
* `foreground-1`: text
33-
* `foreground-2`: secondary text, icons
34-
* `foreground-3`: disabled text, hint text
35-
* `foreground-4`: dividers
36-
* There is also a special hue called `contrast` that will give a contrast color (for text).
37-
For example, `accent-contrast` will be a contrast color for the accent color, for use as a text
38-
color on an accent-colored background.
30+
* Palettes are `primary`, `accent`, `warn`, `background`
31+
* The hues for each type use the Material Design hues. When not specified, each palette defaults
32+
`hue` to `500` with the exception of `background`
33+
* The `opacity` value can be a decimal between 0 and 1 or one the following values:
34+
* `icon`: icon
35+
* `secondary`: secondary text,
36+
* `disabled`: disabled text or icons
37+
* `hint`: hint text,
38+
* `divider`: dividers
39+
* Default values for `opacity` differ based on light and dark theme
40+
* `contrast` will give a contrast color (for text) and can be mixed with `opacity`.
41+
For example, `accent-contrast` will be a contrast color for the accent color, for use as a text
42+
color on an accent-colored background. Adding an `opacity` value as in `accent-contrast-icon` will
43+
apply the Material Design icon opacity.

‎src/components/bottomSheet/bottom-sheet-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ md-bottom-sheet.md-THEME_NAME-theme {
55

66
&.md-list {
77
md-list-item {
8-
color: '{{foreground-1}}';
8+
color: '{{background-contrast}}';
99
}
1010
}
1111

@@ -14,6 +14,6 @@ md-bottom-sheet.md-THEME_NAME-theme {
1414
}
1515

1616
.md-subheader {
17-
color: '{{foreground-1}}';
17+
color: '{{background-contrast}}';
1818
}
1919
}

‎src/components/button/button-theme.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -140,16 +140,16 @@
140140
&.md-fab[disabled],
141141
&.md-accent[disabled],
142142
&.md-warn[disabled] {
143-
color: '{{foreground-3}}';
143+
color: '{{background-contrast-disabled}}';
144144
cursor: default;
145145

146146
md-icon {
147-
color: '{{foreground-3}}';
147+
color: '{{background-contrast-disabled}}';
148148
}
149149
}
150150
&.md-raised[disabled],
151151
&.md-fab[disabled] {
152-
background-color: '{{foreground-4}}';
152+
background-color: '{{background-contrast-divider}}';
153153
}
154154
&[disabled] {
155155
background-color: transparent;

‎src/components/card/card-theme.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
$card-border-radius: 2px !default;
22

33
md-card.md-THEME_NAME-theme {
4-
color: '{{foreground-1}}';
4+
color: '{{background-contrast}}';
55
background-color: '{{background-hue-1}}';
66
border-radius: $card-border-radius;
77

@@ -13,13 +13,13 @@ md-card.md-THEME_NAME-theme {
1313
md-card-avatar {
1414
md-icon {
1515
color: '{{background-color}}';
16-
background-color: '{{foreground-3}}';
16+
background-color: '{{background-contrast-hint}}';
1717
}
1818
}
1919

2020
md-card-header-text {
2121
.md-subhead {
22-
color: '{{foreground-2}}'
22+
color: '{{background-contrast-secondary}}'
2323
}
2424
}
2525
}
@@ -28,7 +28,7 @@ md-card.md-THEME_NAME-theme {
2828
md-card-title-text {
2929
&:not(:only-child) {
3030
.md-subhead {
31-
color: '{{foreground-2}}';
31+
color: '{{background-contrast-secondary}}';
3232
}
3333
}
3434
}

‎src/components/checkbox/checkbox-theme.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ md-checkbox.md-THEME_NAME-theme {
1212
}
1313

1414
.md-ink-ripple {
15-
color: '{{foreground-2}}';
15+
color: '{{background-contrast-secondary}}';
1616
}
1717

1818
&.md-checked .md-ink-ripple {
1919
color: '{{accent-color-0.87}}';
2020
}
2121

2222
._md-icon {
23-
border-color: '{{foreground-2}}';
23+
border-color: '{{background-contrast-secondary}}';
2424
}
2525

2626
&.md-checked ._md-icon {
@@ -42,15 +42,15 @@ md-checkbox.md-THEME_NAME-theme {
4242
}
4343

4444
.md-ink-ripple {
45-
color: '{{foreground-2}}';
45+
color: '{{background-contrast-secondary}}';
4646
}
4747

4848
&.md-checked .md-ink-ripple {
4949
color: '{{warn-color-0.87}}';
5050
}
5151

5252
._md-icon {
53-
border-color: '{{foreground-2}}';
53+
border-color: '{{background-contrast-secondary}}';
5454
}
5555

5656
&.md-checked ._md-icon {
@@ -69,23 +69,23 @@ md-checkbox.md-THEME_NAME-theme {
6969

7070
&[disabled] {
7171
._md-icon {
72-
border-color: '{{foreground-3}}';
72+
border-color: '{{background-contrast-disabled}}';
7373
}
7474

7575
&.md-checked ._md-icon {
76-
background-color: '{{foreground-3}}';
76+
background-color: '{{background-contrast-disabled}}';
7777
}
7878

7979
&.md-checked ._md-icon:after {
8080
border-color: '{{background-200}}';
8181
}
8282

8383
._md-icon:after {
84-
border-color: '{{foreground-3}}';
84+
border-color: '{{background-contrast-disabled}}';
8585
}
8686

8787
._md-label {
88-
color: '{{foreground-3}}';
88+
color: '{{background-contrast-disabled}}';
8989
}
9090
}
9191

‎src/components/chips/chips-theme.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
md-chips.md-THEME_NAME-theme {
22

33
.md-chips {
4-
box-shadow: 0 1px '{{foreground-4}}';
4+
box-shadow: 0 1px '{{background-contrast-divider}}';
55

66
&.md-focused {
77
box-shadow: 0 2px '{{primary-color}}';
88
}
99

1010
._md-chip-input-container {
1111
input {
12-
@include input-placeholder-color('\'{{foreground-3}}\'');
13-
color: '{{foreground-1}}';
12+
@include input-placeholder-color('\'{{background-contrast-hint}}\'');
13+
color: '{{background-contrast}}';
1414
}
1515
}
1616
}

‎src/components/content/content-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
md-content.md-THEME_NAME-theme {
2-
color: '{{foreground-1}}';
2+
color: '{{background-contrast}}';
33
background-color: '{{background-default}}';
44
}
55

‎src/components/datepicker/calendar-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
.md-calendar-month-label-disabled {
4747
// Note that this uses half the opacity of the default text color,
4848
// because the calendar is white, even on the dark theme, otherwise
49-
// the default disabled color `foreground-3` blends in with the
49+
// the default disabled color `background-contrast-disabled` blends in with the
5050
// background.
5151
color: '{{background-A200-0.435}}';
5252
}

‎src/components/datepicker/datePicker-theme.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
.md-THEME_NAME-theme {
44

55
.md-datepicker-input {
6-
@include input-placeholder-color('\'{{foreground-3}}\'');
7-
color: '{{foreground-1}}';
6+
@include input-placeholder-color('\'{{background-contrast-hint}}\'');
7+
color: '{{background-contrast}}';
88
}
99

1010
.md-datepicker-input-container {
11-
border-bottom-color: '{{foreground-4}}';
11+
border-bottom-color: '{{background-contrast-divider}}';
1212

1313
&.md-datepicker-focused {
1414
border-bottom-color: '{{primary-color}}'
@@ -25,11 +25,11 @@
2525

2626
.md-datepicker-triangle-button {
2727
.md-datepicker-expand-triangle {
28-
border-top-color: '{{foreground-3}}';
28+
border-top-color: '{{background-contrast-hint}}';
2929
}
3030

3131
&:hover .md-datepicker-expand-triangle {
32-
border-top-color: '{{foreground-2}}';
32+
border-top-color: '{{background-contrast-secondary}}';
3333
}
3434
}
3535

‎src/components/dialog/dialog-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ md-dialog.md-THEME_NAME-theme {
44
border-radius: $dialog-border-radius;
55

66
background-color: '{{background-hue-1}}';
7-
color: '{{foreground-1}}';
7+
color: '{{background-contrast}}';
88

99

1010
&.md-content-overflow {
1111
.md-actions, md-dialog-actions {
12-
border-top-color: '{{foreground-4}}';
12+
border-top-color: '{{background-contrast-divider}}';
1313
}
1414
}
1515
}

‎src/components/divider/divider-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
md-divider.md-THEME_NAME-theme {
2-
border-top-color: '{{foreground-4}}';
2+
border-top-color: '{{background-contrast-divider}}';
33
}
44

55
.layout-row,
@@ -9,6 +9,6 @@ md-divider.md-THEME_NAME-theme {
99
.layout-lg-row, .layout-gt-lg-row,
1010
.layout-xl-row {
1111
& > md-divider.md-THEME_NAME-theme {
12-
border-right-color: '{{foreground-4}}';
12+
border-right-color: '{{background-contrast-divider}}';
1313
}
1414
}

‎src/components/icon/icon-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
md-icon.md-THEME_NAME-theme {
2-
color: '{{foreground-2}}';
2+
color: '{{background-contrast-secondary}}';
33

44
&.md-primary {
55
color: '{{primary-color}}';

‎src/components/input/input-theme.scss

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
md-input-container.md-THEME_NAME-theme {
22
.md-input {
3-
@include input-placeholder-color('\'{{foreground-3}}\'');
4-
color: '{{foreground-1}}';
5-
border-color: '{{foreground-4}}';
3+
@include input-placeholder-color('\'{{background-contrast-hint}}\'');
4+
color: '{{background-contrast}}';
5+
border-color: '{{background-contrast-divider}}';
66
}
77

88
> md-icon {
9-
color: '{{foreground-1}}';
9+
color: '{{background-contrast}}';
1010
}
1111

1212
label,
1313
._md-placeholder {
14-
color: '{{foreground-3}}';
14+
color: '{{background-contrast-hint}}';
1515
}
1616

1717
&.md-input-invalid {
@@ -21,20 +21,20 @@ md-input-container.md-THEME_NAME-theme {
2121
}
2222

2323
&:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {
24-
color: '{{foreground-2}}';
24+
color: '{{background-contrast-secondary}}';
2525
}
2626

2727
.md-input-messages-animation, .md-input-message-animation {
2828
color: '{{warn-A700}}';
2929
.md-char-counter {
30-
color: '{{foreground-1}}';
30+
color: '{{background-contrast}}';
3131
}
3232
}
3333

3434
&:not(.md-input-invalid) {
3535
&.md-input-has-value {
3636
label {
37-
color: '{{foreground-2}}';
37+
color: '{{background-contrast-secondary}}';
3838
}
3939
}
4040
&.md-input-focused,
@@ -84,9 +84,9 @@ md-input-container.md-THEME_NAME-theme {
8484
&[disabled],
8585
[disabled] & {
8686
border-bottom-color: transparent;
87-
color: '{{foreground-3}}';
88-
background-image: linear-gradient(to right, '{{foreground-3}}' 0%, '{{foreground-3}}' 33%, transparent 0%);
89-
background-image: -ms-linear-gradient(left, transparent 0%, '{{foreground-3}}' 100%);
87+
color: '{{background-contrast-disabled}}';
88+
background-image: linear-gradient(to right, '{{background-contrast-disabled}}' 0%, '{{background-contrast-disabled}}' 33%, transparent 0%);
89+
background-image: -ms-linear-gradient(left, transparent 0%, '{{background-contrast-disabled}}' 100%);
9090
}
9191
}
9292
}

‎src/components/list/list-theme.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,23 @@ md-list.md-THEME_NAME-theme {
22
md-list-item.md-2-line .md-list-item-text,
33
md-list-item.md-3-line .md-list-item-text {
44
h3, h4 {
5-
color: '{{foreground-1}}';
5+
color: '{{background-contrast}}';
66
}
77
p {
8-
color: '{{foreground-2}}';
8+
color: '{{background-contrast-secondary}}';
99
}
1010
}
1111
._md-proxy-focus.md-focused div._md-no-style {
1212
background-color: '{{background-100}}';
1313
}
1414

1515
md-list-item .md-avatar-icon {
16-
background-color: '{{foreground-3}}';
16+
background-color: '{{background-contrast-hint}}';
1717
color: '{{background-color}}';
1818
}
1919

2020
md-list-item > md-icon {
21-
color: '{{foreground-2}}';
21+
color: '{{background-contrast-secondary}}';
2222

2323
&.md-highlight {
2424
color: '{{primary-color}}';

‎src/components/menuBar/menu-bar-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
md-menu-bar.md-THEME_NAME-theme {
22
& > button.md-button {
3-
color: '{{foreground-2}}';
3+
color: '{{background-contrast-secondary}}';
44
border-radius: 2px;
55
}
66

‎src/components/navBar/navBar-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ md-nav-bar.md-THEME_NAME-theme {
22

33
.md-nav-bar {
44
background-color: transparent;
5-
border-color: '{{foreground-4}}';
5+
border-color: '{{background-contrast-divider}}';
66
}
77

88
.md-button._md-nav-button.md-unselected {
9-
color: '{{foreground-2}}';
9+
color: '{{background-contrast-secondary}}';
1010
}
1111

1212
md-nav-ink-bar {

0 commit comments

Comments
 (0)