33. Carpeta « material-tokens »

Versión para imprimir.

A. Carpeta « material-tokens / css »

Versión para imprimir.

1. material-tokens / css / baseline.css

1/*
2 Copyright 2016 Google Inc. All rights reserved.
3
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
15*/
16
17@import url(palette.css);
18@import url(typography.css);
19@import url(colors.css);
20@import url(shape.css);
21@import url(motion.css);
22@import url(state.css);
23@import url(elevation.css);
24@import url(theme/light.css) screen and (prefers-color-scheme: light);
25@import url(theme/dark.css) screen and (prefers-color-scheme: dark);
26

2. material-tokens / css / colors.css

1/*
2 Copyright 2016 Google Inc. All rights reserved.
3
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
15*/
16
17.primary {
18 color: var(--md-sys-color-on-primary);
19 background-color: var(--md-sys-color-primary);
20}
21.on-primary {
22 color: var(--md-sys-color-primary);
23 background-color: var(--md-sys-color-on-primary);
24}
25.primary-container {
26 color: var(--md-sys-color-on-primary-container);
27 background-color: var(--md-sys-color-primary-container);
28}
29.on-primary-container {
30 color: var(--md-sys-color-primary-container);
31 background-color: var(--md-sys-color-on-primary-container);
32}
33.secondary {
34 color: var(--md-sys-color-on-secondary);
35 background-color: var(--md-sys-color-secondary);
36}
37.on-secondary {
38 color: var(--md-sys-color-secondary);
39 background-color: var(--md-sys-color-on-secondary);
40}
41.secondary-container {
42 color: var(--md-sys-color-on-secondary-container);
43 background-color: var(--md-sys-color-secondary-container);
44}
45.on-secondary-container {
46 color: var(--md-sys-color-secondary-container);
47 background-color: var(--md-sys-color-on-secondary-container);
48}
49.tertiary {
50 color: var(--md-sys-color-on-tertiary);
51 background-color: var(--md-sys-color-tertiary);
52}
53.on-tertiary {
54 color: var(--md-sys-color-tertiary);
55 background-color: var(--md-sys-color-on-tertiary);
56}
57.tertiary-container {
58 color: var(--md-sys-color-on-tertiary-container);
59 background-color: var(--md-sys-color-tertiary-container);
60}
61.on-tertiary-container {
62 color: var(--md-sys-color-tertiary-container);
63 background-color: var(--md-sys-color-on-tertiary-container);
64}
65.background {
66 color: var(--md-sys-color-on-background);
67 background-color: var(--md-sys-color-background);
68}
69.surface {
70 color: var(--md-sys-color-on-surface);
71 background-color: var(--md-sys-color-surface);
72}
73.surface-variant {
74 color: var(--md-sys-color-on-surface-variant);
75 background-color: var(--md-sys-color-surface-variant);
76}
77.on-surface-variant {
78 color: var(--md-sys-color-surface-variant);
79 background-color: var(--md-sys-color-on-surface-variant);
80}
81.outline {
82 border: 1px solid var(--md-sys-color-outline);
83}
84.inverse-surface {
85 color: var(--md-sys-color-on-inverse-surface);
86 background-color: var(--md-sys-color-inverse-surface);
87}
88.on-inverse-surface {
89 color: var(--md-sys-color-inverse-surface);
90 background-color: var(--md-sys-color-on-inverse-surface);
91}
92.inverse-primary {
93 color: var(--md-sys-color-on-inverse-primary);
94 background-color: var(--md-sys-color-inverse-primary);
95}
96.on-inverse-primary {
97 color: var(--md-sys-color-inverse-primary);
98 background-color: var(--md-sys-color-on-inverse-primary);
99}
100.surface-tint {
101 background-color: var(--md-sys-color-on-surface-tint);
102}
103.error {
104 color: var(--md-sys-color-on-error);
105 background-color: var(--md-sys-color-error);
106}
107.on-error {
108 color: var(--md-sys-color-error);
109 background-color: var(--md-sys-color-on-error);
110}
111.error-container {
112 color: var(--md-sys-color-on-error-container);
113 background-color: var(--md-sys-color-error-container);
114}
115.on-error-container {
116 color: var(--md-sys-color-error-container);
117 background-color: var(--md-sys-color-on-error-container);
118}
119.black {
120 background-color: var(--md-ref-palette-black);
121}
122.black-text {
123 color: var(--md-ref-palette-black);
124}
125.white {
126 background-color: var(--md-ref-palette-white);
127}
128.white-text {
129 color: var(--md-ref-palette-white);
130}
131

3. material-tokens / css / elevation.css

1/*
2 Copyright 2016 Google Inc. All rights reserved.
3
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
15*/
16
17:root {
18 /* Surface tint color */
19 --md-sys-elevation-surface-tint-color: var(--md-sys-color-primary);
20 /* +5 */
21 --md-sys-elevation-level5-value: 12px;
22 --md-sys-elevation-level5-unit: 1px;
23 --md-sys-elevation-level5: 12px;
24 /* +4 */
25 --md-sys-elevation-level4-value: 8px;
26 --md-sys-elevation-level4-unit: 1px;
27 --md-sys-elevation-level4: 8px;
28 /* +3 */
29 --md-sys-elevation-level3-value: 6px;
30 --md-sys-elevation-level3-unit: 1px;
31 --md-sys-elevation-level3: 6px;
32 /* +2 */
33 --md-sys-elevation-level2-value: 3px;
34 --md-sys-elevation-level2-unit: 1px;
35 --md-sys-elevation-level2: 3px;
36 /* +1 */
37 --md-sys-elevation-level1-value: 1px;
38 --md-sys-elevation-level1-unit: 1px;
39 --md-sys-elevation-level1: 1px;
40 /* 0 */
41 --md-sys-elevation-level0-value: 0px;
42 --md-sys-elevation-level0-unit: 1px;
43 --md-sys-elevation-level0: 0px;
44}
45.elevation-0 {
46 box-shadow: var(--md-sys-elevation-level0);
47}
48.elevation-1 {
49 box-shadow: var(--md-sys-elevation-level1);
50}
51.elevation-2 {
52 box-shadow: var(--md-sys-elevation-level2);
53}
54.elevation-3 {
55 box-shadow: var(--md-sys-elevation-level3);
56}
57.elevation-4 {
58 box-shadow: var(--md-sys-elevation-level4);
59}
60.elevation-5 {
61 box-shadow: var(--md-sys-elevation-level5);
62}
63

4. material-tokens / css / motion.css

1/*
2 Copyright 2016 Google Inc. All rights reserved.
3
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
15*/
16
17:root {
18 /* Emphasized decelerate easing (out) */
19 --md-sys-motion-easing-emphasized-decelerate-x0: 0.05000000074505806;
20 --md-sys-motion-easing-emphasized-decelerate-y0: 0.699999988079071;
21 --md-sys-motion-easing-emphasized-decelerate-x1: 0.10000000149011612;
22 --md-sys-motion-easing-emphasized-decelerate-y1: 1;
23 /* Emphasized accelerate easing (in) */
24 --md-sys-motion-easing-emphasized-accelerate-x0: 0.30000001192092896;
25 --md-sys-motion-easing-emphasized-accelerate-y0: 0;
26 --md-sys-motion-easing-emphasized-accelerate-x1: 0.800000011920929;
27 --md-sys-motion-easing-emphasized-accelerate-y1: 0.15000000596046448;
28 /* Standard decelerate easing (out) */
29 --md-sys-motion-easing-standard-decelerate-x0: 0;
30 --md-sys-motion-easing-standard-decelerate-y0: 0;
31 --md-sys-motion-easing-standard-decelerate-x1: 0;
32 --md-sys-motion-easing-standard-decelerate-y1: 1;
33 /* Standard accelerate easing (in) */
34 --md-sys-motion-easing-standard-accelerate-x0: 0.30000001192092896;
35 --md-sys-motion-easing-standard-accelerate-y0: 0;
36 --md-sys-motion-easing-standard-accelerate-x1: 1;
37 --md-sys-motion-easing-standard-accelerate-y1: 1;
38 /* Duration 1000ms */
39 --md-sys-motion-duration-1000: 1000ms;
40 /* Duration 900ms */
41 --md-sys-motion-duration-900: 900ms;
42 /* Duration 800ms */
43 --md-sys-motion-duration-800: 800ms;
44 /* Duration 700ms */
45 --md-sys-motion-duration-700: 700ms;
46 /* Duration 600ms */
47 --md-sys-motion-duration-600: 600ms;
48 /* Duration 550ms */
49 --md-sys-motion-duration-550: 550ms;
50 /* Duration 500ms */
51 --md-sys-motion-duration-500: 500ms;
52 /* Duration 450ms */
53 --md-sys-motion-duration-450: 450ms;
54 /* Duration 400ms */
55 --md-sys-motion-duration-400: 400ms;
56 /* Duration 350ms */
57 --md-sys-motion-duration-350: 350ms;
58 /* Duration 300ms */
59 --md-sys-motion-duration-300: 300ms;
60 /* Duration 250ms */
61 --md-sys-motion-duration-250: 250ms;
62 /* Duration 200ms */
63 --md-sys-motion-duration-200: 200ms;
64 /* Duration 150ms */
65 --md-sys-motion-duration-150: 150ms;
66 /* Duration 100ms */
67 --md-sys-motion-duration-100: 100ms;
68 /* Duration 50ms */
69 --md-sys-motion-duration-50: 50ms;
70 /* Standard easing (in and out) */
71 --md-sys-motion-easing-standard-x0: 0.20000000298023224;
72 --md-sys-motion-easing-standard-y0: 0;
73 --md-sys-motion-easing-standard-x1: 0;
74 --md-sys-motion-easing-standard-y1: 1;
75 /* Linear easing */
76 --md-sys-motion-easing-linear-x0: 0;
77 --md-sys-motion-easing-linear-y0: 0;
78 --md-sys-motion-easing-linear-x1: 1;
79 --md-sys-motion-easing-linear-y1: 1;
80 /* Emphasized */
81 --md-sys-motion-easing-emphasized-x0: 0.20000000298023224;
82 --md-sys-motion-easing-emphasized-y0: 0;
83 --md-sys-motion-easing-emphasized-x1: 0;
84 --md-sys-motion-easing-emphasized-y1: 1;
85 /* Motion path */
86 --md-sys-motion-path-standard-path: 1;
87}
88.duration-50 {
89 transition-duration: var(--md-sys-motion-duration-50);
90}
91.duration-100 {
92 transition-duration: var(--md-sys-motion-duration-100);
93}
94.duration-150 {
95 transition-duration: var(--md-sys-motion-duration-150);
96}
97.duration-200 {
98 transition-duration: var(--md-sys-motion-duration-200);
99}
100.duration-250 {
101 transition-duration: var(--md-sys-motion-duration-250);
102}
103.duration-300 {
104 transition-duration: var(--md-sys-motion-duration-300);
105}
106.duration-350 {
107 transition-duration: var(--md-sys-motion-duration-350);
108}
109.duration-400 {
110 transition-duration: var(--md-sys-motion-duration-400);
111}
112.duration-450 {
113 transition-duration: var(--md-sys-motion-duration-450);
114}
115.duration-500 {
116 transition-duration: var(--md-sys-motion-duration-500);
117}
118.duration-550 {
119 transition-duration: var(--md-sys-motion-duration-550);
120}
121.duration-600 {
122 transition-duration: var(--md-sys-motion-duration-600);
123}
124.duration-700 {
125 transition-duration: var(--md-sys-motion-duration-700);
126}
127.duration-800 {
128 transition-duration: var(--md-sys-motion-duration-800);
129}
130.duration-900 {
131 transition-duration: var(--md-sys-motion-duration-900);
132}
133.duration-1000 {
134 transition-duration: var(--md-sys-motion-duration-1000);
135}
136.easing-standard {
137 transition-timing-function: cubic-bezier(
138 var(--md-sys-motion-easing-standard-x0),
139 var(--md-sys-motion-easing-standard-y0),
140 var(--md-sys-motion-easing-standard-x1),
141 var(--md-sys-motion-easing-standard-y1)
142 );
143}
144.easing-linear {
145 transition-timing-function: cubic-bezier(
146 var(--md-sys-motion-easing-linear-x0),
147 var(--md-sys-motion-easing-linear-y0),
148 var(--md-sys-motion-easing-linear-x1),
149 var(--md-sys-motion-easing-linear-y1)
150 );
151}
152.easing-standard-accelerate {
153 transition-timing-function: cubic-bezier(
154 var(--md-sys-motion-easing-standard-accelerate-x0),
155 var(--md-sys-motion-easing-standard-accelerate-y0),
156 var(--md-sys-motion-easing-standard-accelerate-x1),
157 var(--md-sys-motion-easing-standard-accelerate-y1)
158 );
159}
160.easing-standard-decelerate {
161 transition-timing-function: cubic-bezier(
162 var(--md-sys-motion-easing-standard-decelerate-x0),
163 var(--md-sys-motion-easing-standard-decelerate-y0),
164 var(--md-sys-motion-easing-standard-decelerate-x1),
165 var(--md-sys-motion-easing-standard-decelerate-y1)
166 );
167}
168.easing-emphasized {
169 transition-timing-function: cubic-bezier(
170 var(--md-sys-motion-easing-emphasized-x0),
171 var(--md-sys-motion-easing-emphasized-y0),
172 var(--md-sys-motion-easing-emphasized-x1),
173 var(--md-sys-motion-easing-emphasized-y1)
174 );
175}
176

5. material-tokens / css / palette.css

1/*
2 Copyright 2016 Google Inc. All rights reserved.
3
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
15*/
16
17:root {
18 /* Error 0 */
19 --md-ref-palette-error0: #000000ff;
20 /* Error 10 */
21 --md-ref-palette-error10: #410e0bff;
22 /* Error 20 */
23 --md-ref-palette-error20: #601410ff;
24 /* Error 30 */
25 --md-ref-palette-error30: #8c1d18ff;
26 /* Error 40 */
27 --md-ref-palette-error40: #b3261eff;
28 /* Error 50 */
29 --md-ref-palette-error50: #dc362eff;
30 /* Error 60 */
31 --md-ref-palette-error60: #e46962ff;
32 /* Error 70 */
33 --md-ref-palette-error70: #ec928eff;
34 /* Error 80 */
35 --md-ref-palette-error80: #f2b8b5ff;
36 /* Error 90 */
37 --md-ref-palette-error90: #f9dedcff;
38 /* Error 95 */
39 --md-ref-palette-error95: #fceeeeff;
40 /* Error 99 */
41 --md-ref-palette-error99: #fffbf9ff;
42 /* Error 100 */
43 --md-ref-palette-error100: #ffffffff;
44 /* Tertiary 0 */
45 --md-ref-palette-tertiary0: #000000ff;
46 /* Tertiary 10 */
47 --md-ref-palette-tertiary10: #31111dff;
48 /* Tertiary 20 */
49 --md-ref-palette-tertiary20: #492532ff;
50 /* Tertiary 30 */
51 --md-ref-palette-tertiary30: #633b48ff;
52 /* Tertiary 40 */
53 --md-ref-palette-tertiary40: #7d5260ff;
54 /* Tertiary 50 */
55 --md-ref-palette-tertiary50: #986977ff;
56 /* Tertiary 60 */
57 --md-ref-palette-tertiary60: #b58392ff;
58 /* Tertiary 70 */
59 --md-ref-palette-tertiary70: #d29dacff;
60 /* Tertiary 80 */
61 --md-ref-palette-tertiary80: #efb8c8ff;
62 /* Tertiary 90 */
63 --md-ref-palette-tertiary90: #ffd8e4ff;
64 /* Tertiary 95 */
65 --md-ref-palette-tertiary95: #ffecf1ff;
66 /* Tertiary 99 */
67 --md-ref-palette-tertiary99: #fffbfaff;
68 /* Tertiary 100 */
69 --md-ref-palette-tertiary100: #ffffffff;
70 /* Secondary 0 */
71 --md-ref-palette-secondary0: #000000ff;
72 /* Secondary 10 */
73 --md-ref-palette-secondary10: #1d192bff;
74 /* Secondary 20 */
75 --md-ref-palette-secondary20: #332d41ff;
76 /* Secondary 30 */
77 --md-ref-palette-secondary30: #4a4458ff;
78 /* Secondary 40 */
79 --md-ref-palette-secondary40: #625b71ff;
80 /* Secondary 50 */
81 --md-ref-palette-secondary50: #7a7289ff;
82 /* Secondary 60 */
83 --md-ref-palette-secondary60: #958da5ff;
84 /* Secondary 70 */
85 --md-ref-palette-secondary70: #b0a7c0ff;
86 /* Secondary 80 */
87 --md-ref-palette-secondary80: #ccc2dcff;
88 /* Secondary 90 */
89 --md-ref-palette-secondary90: #e8def8ff;
90 /* Secondary 95 */
91 --md-ref-palette-secondary95: #f6edffff;
92 /* Secondary 99 */
93 --md-ref-palette-secondary99: #fffbfeff;
94 /* Secondary 100 */
95 --md-ref-palette-secondary100: #ffffffff;
96 /* Primary 0 */
97 --md-ref-palette-primary0: #000000ff;
98 /* Primary 10 */
99 --md-ref-palette-primary10: #21005dff;
100 /* Primary 20 */
101 --md-ref-palette-primary20: #381e72ff;
102 /* Primary 30 */
103 --md-ref-palette-primary30: #4f378bff;
104 /* Primary 40 */
105 --md-ref-palette-primary40: #6750a4ff;
106 /* Primary 50 */
107 --md-ref-palette-primary50: #7f67beff;
108 /* Primary 60 */
109 --md-ref-palette-primary60: #9a82dbff;
110 /* Primary 70 */
111 --md-ref-palette-primary70: #b69df8ff;
112 /* Primary 80 */
113 --md-ref-palette-primary80: #d0bcffff;
114 /* Primary 90 */
115 --md-ref-palette-primary90: #eaddffff;
116 /* Primary 95 */
117 --md-ref-palette-primary95: #f6edffff;
118 /* Primary 99 */
119 --md-ref-palette-primary99: #fffbfeff;
120 /* Primary 100 */
121 --md-ref-palette-primary100: #ffffffff;
122 /* Neutral Variant 0 */
123 --md-ref-palette-neutral-variant0: #000000ff;
124 /* Neutral Variant 10 */
125 --md-ref-palette-neutral-variant10: #1d1a22ff;
126 /* Neutral Variant 20 */
127 --md-ref-palette-neutral-variant20: #322f37ff;
128 /* Neutral Variant 30 */
129 --md-ref-palette-neutral-variant30: #49454fff;
130 /* Neutral Variant 40 */
131 --md-ref-palette-neutral-variant40: #605d66ff;
132 /* Neutral Variant 50 */
133 --md-ref-palette-neutral-variant50: #79747eff;
134 /* Neutral Variant 60 */
135 --md-ref-palette-neutral-variant60: #938f99ff;
136 /* Neutral Variant 70 */
137 --md-ref-palette-neutral-variant70: #aea9b4ff;
138 /* Neutral Variant 80 */
139 --md-ref-palette-neutral-variant80: #cac4d0ff;
140 /* Neutral Variant 90 */
141 --md-ref-palette-neutral-variant90: #e7e0ecff;
142 /* Neutral Variant 95 */
143 --md-ref-palette-neutral-variant95: #f5eefaff;
144 /* Neutral Variant 99 */
145 --md-ref-palette-neutral-variant99: #fffbfeff;
146 /* Neutral Variant 100 */
147 --md-ref-palette-neutral-variant100: #ffffffff;
148 /* Neutral 0 */
149 --md-ref-palette-neutral0: #000000ff;
150 /* Neutral 10 */
151 --md-ref-palette-neutral10: #1c1b1fff;
152 /* Neutral 20 */
153 --md-ref-palette-neutral20: #313033ff;
154 /* Neutral 30 */
155 --md-ref-palette-neutral30: #484649ff;
156 /* Neutral 40 */
157 --md-ref-palette-neutral40: #605d62ff;
158 /* Neutral 50 */
159 --md-ref-palette-neutral50: #787579ff;
160 /* Neutral 60 */
161 --md-ref-palette-neutral60: #939094ff;
162 /* Neutral 70 */
163 --md-ref-palette-neutral70: #aeaaaeff;
164 /* Neutral 80 */
165 --md-ref-palette-neutral80: #c9c5caff;
166 /* Neutral 90 */
167 --md-ref-palette-neutral90: #e6e1e5ff;
168 /* Neutral 95 */
169 --md-ref-palette-neutral95: #f4eff4ff;
170 /* Neutral 99 */
171 --md-ref-palette-neutral99: #fffbfeff;
172 /* Neutral 100 */
173 --md-ref-palette-neutral100: #ffffffff;
174 /* Black */
175 --md-ref-palette-black: #000000ff;
176 /* White */
177 --md-ref-palette-white: #ffffffff;
178}
179

6. material-tokens / css / shape.css

1/*
2 Copyright 2016 Google Inc. All rights reserved.
3
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
15*/
16
17:root {
18 /* Fully rounded */
19 --md-sys-shape-corner-full-family: 3px;
20 /* Extra large top rounding */
21 --md-sys-shape-corner-extra-large-top-family: 1px;
22 --md-sys-shape-corner-extra-large-top-default-size: 0px;
23 --md-sys-shape-corner-extra-large-top-top-left: 28px;
24 --md-sys-shape-corner-extra-large-top-top-right-unit: 1px;
25 --md-sys-shape-corner-extra-large-top-top-right: 28px;
26 /* Extra large rounding */
27 --md-sys-shape-corner-extra-large-family: 1px;
28 --md-sys-shape-corner-extra-large-default-size-unit: 1px;
29 --md-sys-shape-corner-extra-large-default-size: 28px;
30 /* Large top rounding */
31 --md-sys-shape-corner-large-top-family: 1px;
32 --md-sys-shape-corner-large-top-default-size-unit: 1px;
33 --md-sys-shape-corner-large-top-default-size: 0px;
34 --md-sys-shape-corner-large-top-top-left-unit: 1px;
35 --md-sys-shape-corner-large-top-top-left: 16px;
36 --md-sys-shape-corner-large-top-top-right-unit: 1px;
37 --md-sys-shape-corner-large-top-top-right: 16px;
38 /* Large end rounding */
39 --md-sys-shape-corner-large-end-family: 1px;
40 --md-sys-shape-corner-large-end-default-size-unit: 1px;
41 --md-sys-shape-corner-large-end-default-size: 0px;
42 --md-sys-shape-corner-large-end-top-right-unit: 1px;
43 --md-sys-shape-corner-large-end-top-right: 16px;
44 --md-sys-shape-corner-large-end-bottom-right-unit: 1px;
45 --md-sys-shape-corner-large-end-bottom-right: 16px;
46 /* Large rounding */
47 --md-sys-shape-corner-large-family: 1px;
48 --md-sys-shape-corner-large-default-size-unit: 1px;
49 --md-sys-shape-corner-large-default-size: 16px;
50 /* Medium rounding */
51 --md-sys-shape-corner-medium-family: 1px;
52 --md-sys-shape-corner-medium-default-size-unit: 1px;
53 --md-sys-shape-corner-medium-default-size: 12px;
54 /* Small rounding */
55 --md-sys-shape-corner-small-family: 1px;
56 --md-sys-shape-corner-small-default-size-unit: 1px;
57 --md-sys-shape-corner-small-default-size: 8px;
58 /* Extra small top rounding */
59 --md-sys-shape-corner-extra-small-top-family: 1px;
60 --md-sys-shape-corner-extra-small-top-default-size-unit: 1px;
61 --md-sys-shape-corner-extra-small-top-default-size: 0px;
62 --md-sys-shape-corner-extra-small-top-top-left-unit: 1px;
63 --md-sys-shape-corner-extra-small-top-top-left: 4px;
64 --md-sys-shape-corner-extra-small-top-top-right-unit: 1px;
65 --md-sys-shape-corner-extra-small-top-top-right: 4px;
66 /* Extra small rounding */
67 --md-sys-shape-corner-extra-small-family: 1px;
68 --md-sys-shape-corner-extra-small-default-size-unit: 1px;
69 --md-sys-shape-corner-extra-small-default-size: 4px;
70 /* No rounding */
71 --md-sys-shape-corner-none-family: 1px;
72 --md-sys-shape-corner-none-default-size-unit: 1px;
73 --md-sys-shape-corner-none-default-size: 0px;
74
75 --md-sys-shape-small: var(--md-sys-shape-corner-small-default-size);
76 --md-sys-shape-medium: var(--md-sys-shape-corner-medium-default-size);
77 --md-sys-shape-large: var(--md-sys-shape-corner-large-default-size);
78}
79
80.shape-none {
81 border-radius: var(--md-sys-shape-corner-none-default-size);
82}
83.shape-extra-small {
84 border-radius: var(--md-sys-shape-corner-extra-small-default-size);
85}
86.shape-small {
87 border-radius: var(--md-sys-shape-corner-small-default-size);
88}
89.shape-medium {
90 border-radius: var(--md-sys-shape-corner-medium-default-size);
91}
92.shape-large {
93 border-radius: var(--md-sys-shape-corner-large-default-size);
94}
95.shape-extra-large {
96 border-radius: var(--md-sys-shape-corner-extra-large-default-size);
97}
98.extra-small-top {
99 border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left);
100 border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right);
101}
102.large-end {
103 border-top-right-radius: var(--md-sys-shape-corner-large-end-top-right);
104 border-bottom-right-radius: var(--md-sys-shape-corner-large-end-bottom-right);
105}
106.large-top {
107 border-top-left-radius: var(--md-sys-shape-corner-large-top-top-left);
108 border-top-right-radius: var(--md-sys-shape-corner-large-top-top-right);
109}
110.extra-large-top {
111 border-top-left-radius: var(--md-sys-shape-corner-extra-large-top-top-left);
112 border-top-right-radius: var(--md-sys-shape-corner-extra-large-top-top-right);
113}
114

7. material-tokens / css / state.css

1/*
2 Copyright 2016 Google Inc. All rights reserved.
3
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
15*/
16
17:root {
18 /* Dragged state layer opacity */
19 --md-sys-state-dragged-state-layer-opacity: 0.1599999964237213;
20 /* Pressed state layer opacity */
21 --md-sys-state-pressed-state-layer-opacity: 0.11999999731779099;
22 /* Focus state layer opacity */
23 --md-sys-state-focus-state-layer-opacity: 0.11999999731779099;
24 /* Hover state layer opacity */
25 --md-sys-state-hover-state-layer-opacity: 0.07999999821186066;
26}
27.hover-state-layer {
28 opacity: var(--md-sys-state-hover-state-layer-opacity);
29}
30.pressed-state-layer {
31 opacity: var(--md-sys-state-pressed-state-layer-opacity);
32}
33.dragged-state-layer {
34 opacity: var(--md-sys-state-dragged-state-layer-opacity);
35}
36.focus-state-layer {
37 opacity: var(--md-sys-state-focus-state-layer-opacity);
38}
39

8. material-tokens / css / typography.css

1/*
2 Copyright 2016 Google Inc. All rights reserved.
3
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
15*/
16
17/* This file is generated */
18
19/* DO NOT EDIT */
20
21:root {
22 /* Label Small */
23 --md-sys-typescale-label-small-text-transform: unset;
24 --md-sys-typescale-label-small-axis-value: unset;
25 --md-sys-typescale-label-small-font-style: unset;
26 --md-sys-typescale-label-small-text-decoration: unset;
27 /* Label Small line height */
28 --md-sys-typescale-label-small-line-height-value: 16px;
29 --md-sys-typescale-label-small-line-height-unit: 2px;
30 --md-sys-typescale-label-small-line-height: 16px;
31 /* Label Small font tracking */
32 --md-sys-typescale-label-small-tracking-value: 0.5px;
33 --md-sys-typescale-label-small-tracking-unit: 2px;
34 --md-sys-typescale-label-small-tracking: 0.5px;
35 /* Label Small font size */
36 --md-sys-typescale-label-small-size-value: 11px;
37 --md-sys-typescale-label-small-size-unit: 2px;
38 --md-sys-typescale-label-small-size: 11px;
39 /* Label Small font weight */
40 --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);
41 /* Label Small font name */
42 --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
43 /* Label Medium */
44 --md-sys-typescale-label-medium-axis-value: unset;
45 --md-sys-typescale-label-medium-font-style: unset;
46 --md-sys-typescale-label-medium-text-decoration: unset;
47 /* Label Medium text transform */
48 --md-sys-typescale-label-medium-text-transform: 1;
49 /* Label Medium line height */
50 --md-sys-typescale-label-medium-line-height-value: 16px;
51 --md-sys-typescale-label-medium-line-height-unit: 2px;
52 --md-sys-typescale-label-medium-line-height: 16px;
53 /* Label Medium font tracking */
54 --md-sys-typescale-label-medium-tracking-value: 0.5px;
55 --md-sys-typescale-label-medium-tracking-unit: 2px;
56 --md-sys-typescale-label-medium-tracking: 0.5px;
57 /* Label Medium font size */
58 --md-sys-typescale-label-medium-size-value: 12px;
59 --md-sys-typescale-label-medium-size-unit: 2px;
60 --md-sys-typescale-label-medium-size: 12px;
61 /* Label Medium font weight */
62 --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
63 /* Label Medium font name */
64 --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
65 /* Label Large */
66 --md-sys-typescale-label-large-text-transform: unset;
67 --md-sys-typescale-label-large-axis-value: unset;
68 --md-sys-typescale-label-large-font-style: unset;
69 --md-sys-typescale-label-large-text-decoration: unset;
70 /* Label Large line height */
71 --md-sys-typescale-label-large-line-height-value: 20px;
72 --md-sys-typescale-label-large-line-height-unit: 2px;
73 --md-sys-typescale-label-large-line-height: 20px;
74 /* Label Large font tracking */
75 --md-sys-typescale-label-large-tracking-value: 0.10000000149011612px;
76 --md-sys-typescale-label-large-tracking-unit: 2px;
77 --md-sys-typescale-label-large-tracking: 0.10000000149011612px;
78 /* Label Large font size */
79 --md-sys-typescale-label-large-size-value: 14px;
80 --md-sys-typescale-label-large-size-unit: 2px;
81 --md-sys-typescale-label-large-size: 14px;
82 /* Label Large font weight */
83 --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
84 /* Label Large font name */
85 --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
86 /* Body Small */
87 --md-sys-typescale-body-small-text-transform: unset;
88 --md-sys-typescale-body-small-axis-value: unset;
89 --md-sys-typescale-body-small-font-style: unset;
90 --md-sys-typescale-body-small-text-decoration: unset;
91 /* Body Small line height */
92 --md-sys-typescale-body-small-line-height-value: 16px;
93 --md-sys-typescale-body-small-line-height-unit: 2px;
94 --md-sys-typescale-body-small-line-height: 16px;
95 /* Body Small font tracking */
96 --md-sys-typescale-body-small-tracking-value: 0.4000000059604645px;
97 --md-sys-typescale-body-small-tracking-unit: 2px;
98 --md-sys-typescale-body-small-tracking: 0.4000000059604645px;
99 /* Body Small font size */
100 --md-sys-typescale-body-small-size-value: 12px;
101 --md-sys-typescale-body-small-size-unit: 2px;
102 --md-sys-typescale-body-small-size: 12px;
103 /* Body Small font weight */
104 --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
105 /* Body Small font name */
106 --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
107 /* Body Medium */
108 --md-sys-typescale-body-medium-text-transform: unset;
109 --md-sys-typescale-body-medium-axis-value: unset;
110 --md-sys-typescale-body-medium-font-style: unset;
111 --md-sys-typescale-body-medium-text-decoration: unset;
112 /* Body Medium line height */
113 --md-sys-typescale-body-medium-line-height-value: 20px;
114 --md-sys-typescale-body-medium-line-height-unit: 2px;
115 --md-sys-typescale-body-medium-line-height: 20px;
116 /* Body Medium font tracking */
117 --md-sys-typescale-body-medium-tracking-value: 0.25px;
118 --md-sys-typescale-body-medium-tracking-unit: 2px;
119 --md-sys-typescale-body-medium-tracking: 0.25px;
120 /* Body Medium font size */
121 --md-sys-typescale-body-medium-size-value: 14px;
122 --md-sys-typescale-body-medium-size-unit: 2px;
123 --md-sys-typescale-body-medium-size: 14px;
124 /* Body Medium font weight */
125 --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
126 /* Body Medium font name */
127 --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
128 /* Body Large */
129 --md-sys-typescale-body-large-text-transform: unset;
130 --md-sys-typescale-body-large-axis-value: unset;
131 --md-sys-typescale-body-large-font-style: unset;
132 --md-sys-typescale-body-large-text-decoration: unset;
133 /* Body Large line height */
134 --md-sys-typescale-body-large-line-height-value: 24px;
135 --md-sys-typescale-body-large-line-height-unit: 2px;
136 --md-sys-typescale-body-large-line-height: 24px;
137 /* Body Large font tracking */
138 --md-sys-typescale-body-large-tracking-value: 0.5px;
139 --md-sys-typescale-body-large-tracking-unit: 2px;
140 --md-sys-typescale-body-large-tracking: 0.5px;
141 /* Body Large font size */
142 --md-sys-typescale-body-large-size-value: 16px;
143 --md-sys-typescale-body-large-size-unit: 2px;
144 --md-sys-typescale-body-large-size: 16px;
145 /* Body Large font weight */
146 --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
147 /* Body Large font name */
148 --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
149 /* Title Small */
150 --md-sys-typescale-title-small-text-transform: unset;
151 --md-sys-typescale-title-small-axis-value: unset;
152 --md-sys-typescale-title-small-font-style: unset;
153 --md-sys-typescale-title-small-text-decoration: unset;
154 /* Title Small line height */
155 --md-sys-typescale-title-small-line-height-value: 20px;
156 --md-sys-typescale-title-small-line-height-unit: 2px;
157 --md-sys-typescale-title-small-line-height: 20px;
158 /* Title Small font tracking */
159 --md-sys-typescale-title-small-tracking-value: 0.10000000149011612px;
160 --md-sys-typescale-title-small-tracking-unit: 2px;
161 --md-sys-typescale-title-small-tracking: 0.10000000149011612px;
162 /* Title Small font size */
163 --md-sys-typescale-title-small-size-value: 14px;
164 --md-sys-typescale-title-small-size-unit: 2px;
165 --md-sys-typescale-title-small-size: 14px;
166 /* Title Small font weight */
167 --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
168 /* Title Small font name */
169 --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
170 /* Title Medium */
171 --md-sys-typescale-title-medium-text-transform: unset;
172 --md-sys-typescale-title-medium-axis-value: unset;
173 --md-sys-typescale-title-medium-font-style: unset;
174 --md-sys-typescale-title-medium-text-decoration: unset;
175 /* Title Medium line height */
176 --md-sys-typescale-title-medium-line-height-value: 24px;
177 --md-sys-typescale-title-medium-line-height-unit: 2px;
178 --md-sys-typescale-title-medium-line-height: 24px;
179 /* Title Medium font tracking */
180 --md-sys-typescale-title-medium-tracking-value: 0.15000000596046448px;
181 --md-sys-typescale-title-medium-tracking-unit: 2px;
182 --md-sys-typescale-title-medium-tracking: 0.15000000596046448px;
183 /* Title Medium font size */
184 --md-sys-typescale-title-medium-size-value: 16px;
185 --md-sys-typescale-title-medium-size-unit: 2px;
186 --md-sys-typescale-title-medium-size: 16px;
187 /* Title Medium font weight */
188 --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
189 /* Title Medium font name */
190 --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
191 /* Title Large */
192 --md-sys-typescale-title-large-text-transform: unset;
193 --md-sys-typescale-title-large-axis-value: unset;
194 --md-sys-typescale-title-large-font-style: unset;
195 --md-sys-typescale-title-large-text-decoration: unset;
196 /* Title Large line height */
197 --md-sys-typescale-title-large-line-height-value: 28px;
198 --md-sys-typescale-title-large-line-height-unit: 2px;
199 --md-sys-typescale-title-large-line-height: 28px;
200 /* Title Large font tracking */
201 --md-sys-typescale-title-large-tracking-value: 0px;
202 --md-sys-typescale-title-large-tracking-unit: 2px;
203 --md-sys-typescale-title-large-tracking: 0px;
204 /* Title Large font size */
205 --md-sys-typescale-title-large-size-value: 22px;
206 --md-sys-typescale-title-large-size-unit: 2px;
207 --md-sys-typescale-title-large-size: 22px;
208 /* Title Large font weight */
209 --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
210 /* Title Large font name */
211 --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
212 /* Headline Small */
213 --md-sys-typescale-headline-small-text-transform: unset;
214 --md-sys-typescale-headline-small-axis-value: unset;
215 --md-sys-typescale-headline-small-font-style: unset;
216 --md-sys-typescale-headline-small-text-decoration: unset;
217 /* Headline Small line height */
218 --md-sys-typescale-headline-small-line-height-value: 32px;
219 --md-sys-typescale-headline-small-line-height-unit: 2px;
220 --md-sys-typescale-headline-small-line-height: 32px;
221 /* Headline Small font tracking */
222 --md-sys-typescale-headline-small-tracking-value: 0px;
223 --md-sys-typescale-headline-small-tracking-unit: 2px;
224 --md-sys-typescale-headline-small-tracking: 0px;
225 /* Headline Small font size */
226 --md-sys-typescale-headline-small-size-value: 24px;
227 --md-sys-typescale-headline-small-size-unit: 2px;
228 --md-sys-typescale-headline-small-size: 24px;
229 /* Headline Small font weight */
230 --md-sys-typescale-headline-small-weight: var(
231 --md-ref-typeface-weight-regular
232 );
233 /* Headline Small font name */
234 --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
235 /* Headline Medium */
236 --md-sys-typescale-headline-medium-text-transform: unset;
237 --md-sys-typescale-headline-medium-axis-value: unset;
238 --md-sys-typescale-headline-medium-font-style: unset;
239 --md-sys-typescale-headline-medium-text-decoration: unset;
240 /* Headline Medium line height */
241 --md-sys-typescale-headline-medium-line-height-value: 36px;
242 --md-sys-typescale-headline-medium-line-height-unit: 2px;
243 --md-sys-typescale-headline-medium-line-height: 36px;
244 /* Headline Medium font tracking */
245 --md-sys-typescale-headline-medium-tracking-value: 0px;
246 --md-sys-typescale-headline-medium-tracking-unit: 2px;
247 --md-sys-typescale-headline-medium-tracking: 0px;
248 /* Headline Medium font size */
249 --md-sys-typescale-headline-medium-size-value: 28px;
250 --md-sys-typescale-headline-medium-size-unit: 2px;
251 --md-sys-typescale-headline-medium-size: 28px;
252 /* Headline Medium font weight */
253 --md-sys-typescale-headline-medium-weight: var(
254 --md-ref-typeface-weight-regular
255 );
256 /* Headline Medium font name */
257 --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
258 /* Headline Large */
259 --md-sys-typescale-headline-large-text-transform: unset;
260 --md-sys-typescale-headline-large-axis-value: unset;
261 --md-sys-typescale-headline-large-font-style: unset;
262 --md-sys-typescale-headline-large-text-decoration: unset;
263 /* Headline Large line height */
264 --md-sys-typescale-headline-large-line-height-value: 40px;
265 --md-sys-typescale-headline-large-line-height-unit: 2px;
266 --md-sys-typescale-headline-large-line-height: 40px;
267 /* Headline Large font tracking */
268 --md-sys-typescale-headline-large-tracking-value: 0px;
269 --md-sys-typescale-headline-large-tracking-unit: 2px;
270 --md-sys-typescale-headline-large-tracking: 0px;
271 /* Headline Large font size */
272 --md-sys-typescale-headline-large-size-value: 32px;
273 --md-sys-typescale-headline-large-size-unit: 2px;
274 --md-sys-typescale-headline-large-size: 32px;
275 /* Headline Large font name */
276 --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
277 /* Headline Large font weight */
278 --md-sys-typescale-headline-large-weight: var(
279 --md-ref-typeface-weight-regular
280 );
281 /* Display Small */
282 --md-sys-typescale-display-small-text-transform: unset;
283 --md-sys-typescale-display-small-axis-value: unset;
284 --md-sys-typescale-display-small-font-style: unset;
285 --md-sys-typescale-display-small-text-decoration: unset;
286 /* Display Small line height */
287 --md-sys-typescale-display-small-line-height-value: 44px;
288 --md-sys-typescale-display-small-line-height-unit: 2px;
289 --md-sys-typescale-display-small-line-height: 44px;
290 /* Display Small font tracking */
291 --md-sys-typescale-display-small-tracking-value: 0px;
292 --md-sys-typescale-display-small-tracking-unit: 2px;
293 --md-sys-typescale-display-small-tracking: 0px;
294 /* Display Small font size */
295 --md-sys-typescale-display-small-size-value: 36px;
296 --md-sys-typescale-display-small-size-unit: 2px;
297 --md-sys-typescale-display-small-size: 36px;
298 /* Display Small font weight */
299 --md-sys-typescale-display-small-weight: var(
300 --md-ref-typeface-weight-regular
301 );
302 /* Display Small font name */
303 --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
304 /* Display Medium */
305 --md-sys-typescale-display-medium-text-transform: unset;
306 --md-sys-typescale-display-medium-axis-value: unset;
307 --md-sys-typescale-display-medium-font-style: unset;
308 --md-sys-typescale-display-medium-text-decoration: unset;
309 /* Display Medium line height */
310 --md-sys-typescale-display-medium-line-height-value: 52px;
311 --md-sys-typescale-display-medium-line-height-unit: 2px;
312 --md-sys-typescale-display-medium-line-height: 52px;
313 /* Display Medium font tracking */
314 --md-sys-typescale-display-medium-tracking-value: 0px;
315 --md-sys-typescale-display-medium-tracking-unit: 2px;
316 --md-sys-typescale-display-medium-tracking: 0px;
317 /* Display Medium font size */
318 --md-sys-typescale-display-medium-size-value: 45px;
319 --md-sys-typescale-display-medium-size-unit: 2px;
320 --md-sys-typescale-display-medium-size: 45px;
321 /* Display Medium font weight */
322 --md-sys-typescale-display-medium-weight: var(
323 --md-ref-typeface-weight-regular
324 );
325 /* Display Medium font name */
326 --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
327 /* Display Large */
328 --md-sys-typescale-display-large-text-transform: unset;
329 --md-sys-typescale-display-large-axis-value: unset;
330 --md-sys-typescale-display-large-font-style: unset;
331 --md-sys-typescale-display-large-text-decoration: unset;
332 /* Display Large line height */
333 --md-sys-typescale-display-large-line-height-value: 64px;
334 --md-sys-typescale-display-large-line-height-unit: 2px;
335 --md-sys-typescale-display-large-line-height: 64px;
336 /* Display Large font tracking */
337 --md-sys-typescale-display-large-tracking-value: -0.25px;
338 --md-sys-typescale-display-large-tracking-unit: 2px;
339 --md-sys-typescale-display-large-tracking: -0.25px;
340 /* Display Large font size */
341 --md-sys-typescale-display-large-size-value: 57px;
342 --md-sys-typescale-display-large-size-unit: 2px;
343 --md-sys-typescale-display-large-size: 57px;
344 /* Display Large font weight */
345 --md-sys-typescale-display-large-weight: var(
346 --md-ref-typeface-weight-regular
347 );
348 /* Display Large font name */
349 --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
350 /* Plain typeface */
351 --md-ref-typeface-plain: Roboto;
352 /* Brand typeface */
353 --md-ref-typeface-brand: Roboto;
354 /* Bold weight */
355 --md-ref-typeface-weight-bold: 700;
356 /* Medium weight */
357 --md-ref-typeface-weight-medium: 500;
358 /* Regular weight */
359 --md-ref-typeface-weight-regular: 400;
360}
361
362/* Label Small */
363.label-small {
364 font-family: var(--md-sys-typescale-label-small-font);
365 font-weight: var(--md-sys-typescale-label-small-weight);
366 font-size: var(--md-sys-typescale-label-small-size);
367 font-style: var(--md-sys-typescale-label-small-font-style);
368 letter-spacing: var(--md-sys-typescale-label-small-tracking);
369 line-height: var(--md-sys-typescale-label-small-line-height);
370 text-transform: var(--md-sys-typescale-label-small-text-transform);
371 text-decoration: var(--md-sys-typescale-label-small-text-decoration);
372}
373/* Label Medium */
374.label-medium {
375 font-family: var(--md-sys-typescale-label-medium-font);
376 font-weight: var(--md-sys-typescale-label-medium-weight);
377 font-size: var(--md-sys-typescale-label-medium-size);
378 font-style: var(--md-sys-typescale-label-medium-font-style);
379 letter-spacing: var(--md-sys-typescale-label-medium-tracking);
380 line-height: var(--md-sys-typescale-label-medium-line-height);
381 text-transform: var(--md-sys-typescale-label-medium-text-transform);
382 text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
383}
384/* Label Large */
385.label-large {
386 font-family: var(--md-sys-typescale-label-large-font);
387 font-weight: var(--md-sys-typescale-label-large-weight);
388 font-size: var(--md-sys-typescale-label-large-size);
389 font-style: var(--md-sys-typescale-label-large-font-style);
390 letter-spacing: var(--md-sys-typescale-label-large-tracking);
391 line-height: var(--md-sys-typescale-label-large-line-height);
392 text-transform: var(--md-sys-typescale-label-large-text-transform);
393 text-decoration: var(--md-sys-typescale-label-large-text-decoration);
394}
395/* Body Small */
396.body-small {
397 font-family: var(--md-sys-typescale-body-small-font);
398 font-weight: var(--md-sys-typescale-body-small-weight);
399 font-size: var(--md-sys-typescale-body-small-size);
400 font-style: var(--md-sys-typescale-body-small-font-style);
401 letter-spacing: var(--md-sys-typescale-body-small-tracking);
402 line-height: var(--md-sys-typescale-body-small-line-height);
403 text-transform: var(--md-sys-typescale-body-small-text-transform);
404 text-decoration: var(--md-sys-typescale-body-small-text-decoration);
405}
406/* Body Medium */
407.body-medium {
408 font-family: var(--md-sys-typescale-body-medium-font);
409 font-weight: var(--md-sys-typescale-body-medium-weight);
410 font-size: var(--md-sys-typescale-body-medium-size);
411 font-style: var(--md-sys-typescale-body-medium-font-style);
412 letter-spacing: var(--md-sys-typescale-body-medium-tracking);
413 line-height: var(--md-sys-typescale-body-medium-line-height);
414 text-transform: var(--md-sys-typescale-body-medium-text-transform);
415 text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
416}
417/* Body Large */
418.body-large {
419 font-family: var(--md-sys-typescale-body-large-font);
420 font-weight: var(--md-sys-typescale-body-large-weight);
421 font-size: var(--md-sys-typescale-body-large-size);
422 font-style: var(--md-sys-typescale-body-large-font-style);
423 letter-spacing: var(--md-sys-typescale-body-large-tracking);
424 line-height: var(--md-sys-typescale-body-large-line-height);
425 text-transform: var(--md-sys-typescale-body-large-text-transform);
426 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
427}
428/* Title Small */
429.title-small {
430 font-family: var(--md-sys-typescale-title-small-font);
431 font-weight: var(--md-sys-typescale-title-small-weight);
432 font-size: var(--md-sys-typescale-title-small-size);
433 font-style: var(--md-sys-typescale-title-small-font-style);
434 letter-spacing: var(--md-sys-typescale-title-small-tracking);
435 line-height: var(--md-sys-typescale-title-small-line-height);
436 text-transform: var(--md-sys-typescale-title-small-text-transform);
437 text-decoration: var(--md-sys-typescale-title-small-text-decoration);
438}
439/* Title Medium */
440.title-medium {
441 font-family: var(--md-sys-typescale-title-medium-font);
442 font-weight: var(--md-sys-typescale-title-medium-weight);
443 font-size: var(--md-sys-typescale-title-medium-size);
444 font-style: var(--md-sys-typescale-title-medium-font-style);
445 letter-spacing: var(--md-sys-typescale-title-medium-tracking);
446 line-height: var(--md-sys-typescale-title-medium-line-height);
447 text-transform: var(--md-sys-typescale-title-medium-text-transform);
448 text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
449}
450/* Title Large */
451.title-large {
452 font-family: var(--md-sys-typescale-title-large-font);
453 font-weight: var(--md-sys-typescale-title-large-weight);
454 font-size: var(--md-sys-typescale-title-large-size);
455 font-style: var(--md-sys-typescale-title-large-font-style);
456 letter-spacing: var(--md-sys-typescale-title-large-tracking);
457 line-height: var(--md-sys-typescale-title-large-line-height);
458 text-transform: var(--md-sys-typescale-title-large-text-transform);
459 text-decoration: var(--md-sys-typescale-title-large-text-decoration);
460}
461/* Headline Small */
462.headline-small {
463 font-family: var(--md-sys-typescale-headline-small-font);
464 font-weight: var(--md-sys-typescale-headline-small-weight);
465 font-size: var(--md-sys-typescale-headline-small-size);
466 font-style: var(--md-sys-typescale-headline-small-font-style);
467 letter-spacing: var(--md-sys-typescale-headline-small-tracking);
468 line-height: var(--md-sys-typescale-headline-small-line-height);
469 text-transform: var(--md-sys-typescale-headline-small-text-transform);
470 text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
471}
472/* Headline Medium */
473.headline-medium {
474 font-family: var(--md-sys-typescale-headline-medium-font);
475 font-weight: var(--md-sys-typescale-headline-medium-weight);
476 font-size: var(--md-sys-typescale-headline-medium-size);
477 font-style: var(--md-sys-typescale-headline-medium-font-style);
478 letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
479 line-height: var(--md-sys-typescale-headline-medium-line-height);
480 text-transform: var(--md-sys-typescale-headline-medium-text-transform);
481 text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
482}
483/* Headline Large */
484.headline-large {
485 font-family: var(--md-sys-typescale-headline-large-font);
486 font-weight: var(--md-sys-typescale-headline-large-weight);
487 font-size: var(--md-sys-typescale-headline-large-size);
488 font-style: var(--md-sys-typescale-headline-large-font-style);
489 letter-spacing: var(--md-sys-typescale-headline-large-tracking);
490 line-height: var(--md-sys-typescale-headline-large-line-height);
491 text-transform: var(--md-sys-typescale-headline-large-text-transform);
492 text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
493}
494/* Display Small */
495.display-small {
496 font-family: var(--md-sys-typescale-display-small-font);
497 font-weight: var(--md-sys-typescale-display-small-weight);
498 font-size: var(--md-sys-typescale-display-small-size);
499 font-style: var(--md-sys-typescale-display-small-font-style);
500 letter-spacing: var(--md-sys-typescale-display-small-tracking);
501 line-height: var(--md-sys-typescale-display-small-line-height);
502 text-transform: var(--md-sys-typescale-display-small-text-transform);
503 text-decoration: var(--md-sys-typescale-display-small-text-decoration);
504}
505/* Display Medium */
506.display-medium {
507 font-family: var(--md-sys-typescale-display-medium-font);
508 font-weight: var(--md-sys-typescale-display-medium-weight);
509 font-size: var(--md-sys-typescale-display-medium-size);
510 font-style: var(--md-sys-typescale-display-medium-font-style);
511 letter-spacing: var(--md-sys-typescale-display-medium-tracking);
512 line-height: var(--md-sys-typescale-display-medium-line-height);
513 text-transform: var(--md-sys-typescale-display-medium-text-transform);
514 text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
515}
516/* Display Large */
517.display-large {
518 font-family: var(--md-sys-typescale-display-large-font);
519 font-weight: var(--md-sys-typescale-display-large-weight);
520 font-size: var(--md-sys-typescale-display-large-size);
521 font-style: var(--md-sys-typescale-display-large-font-style);
522 letter-spacing: var(--md-sys-typescale-display-large-tracking);
523 line-height: var(--md-sys-typescale-display-large-line-height);
524 text-transform: var(--md-sys-typescale-display-large-text-transform);
525 text-decoration: var(--md-sys-typescale-display-large-text-decoration);
526}
527

9. Carpeta « material-tokens / css / theme »

Versión para imprimir.

A. material-tokens / css / theme / dark.css

1/*
2 Copyright 2016 Google Inc. All rights reserved.
3
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
15*/
16
17:root {
18 color-scheme: dark;
19 /* Surface tint */
20 --md-sys-color-surface-tint: var(--md-sys-color-primary);
21 /* Surface tint color */
22 --md-sys-color-surface-tint-color: var(--md-sys-color-primary);
23 /* On error container */
24 --md-sys-color-on-error-container: var(--md-ref-palette-error80);
25 /* On error */
26 --md-sys-color-on-error: var(--md-ref-palette-error20);
27 /* Error container */
28 --md-sys-color-error-container: var(--md-ref-palette-error30);
29 /* On tertiary container */
30 --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
31 /* On tertiary */
32 --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
33 /* Tertiary container */
34 --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
35 /* Tertiary */
36 --md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
37 /* Shadow */
38 --md-sys-color-shadow: var(--md-ref-palette-neutral0);
39 /* Error */
40 --md-sys-color-error: var(--md-ref-palette-error80);
41 /* Outline */
42 --md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
43 /* On background */
44 --md-sys-color-on-background: var(--md-ref-palette-neutral90);
45 /* Background */
46 --md-sys-color-background: var(--md-ref-palette-neutral10);
47 /* Inverse on surface */
48 --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
49 /* Inverse surface */
50 --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
51 /* On surface variant */
52 --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
53 /* On surface */
54 --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
55 /* Surface Variant */
56 --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
57 /* Surface */
58 --md-sys-color-surface: var(--md-ref-palette-neutral10);
59 /* On secondary container */
60 --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);
61 /* On secondary */
62 --md-sys-color-on-secondary: var(--md-ref-palette-secondary20);
63 /* Secondary container */
64 --md-sys-color-secondary-container: var(--md-ref-palette-secondary30);
65 /* Secondary */
66 --md-sys-color-secondary: var(--md-ref-palette-secondary80);
67 /* Inverse primary */
68 --md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
69 /* On primary container */
70 --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
71 /* On primary */
72 --md-sys-color-on-primary: var(--md-ref-palette-primary20);
73 /* Primary container */
74 --md-sys-color-primary-container: var(--md-ref-palette-primary30);
75 /* Primary */
76 --md-sys-color-primary: var(--md-ref-palette-primary80);
77}
78

B. material-tokens / css / theme / light.css

1/*
2 Copyright 2016 Google Inc. All rights reserved.
3
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
15*/
16
17:root {
18 color-scheme: light;
19 /* Surface tint */
20 --md-sys-color-surface-tint: var(--md-sys-color-primary);
21 /* Surface tint color */
22 --md-sys-color-surface-tint-color: var(--md-sys-color-primary);
23 /* On error container */
24 --md-sys-color-on-error-container: var(--md-ref-palette-error10);
25 /* On error */
26 --md-sys-color-on-error: var(--md-ref-palette-error100);
27 /* Error container */
28 --md-sys-color-error-container: var(--md-ref-palette-error90);
29 /* On tertiary container */
30 --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
31 /* On tertiary */
32 --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
33 /* Tertiary container */
34 --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
35 /* Tertiary */
36 --md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
37 /* Shadow */
38 --md-sys-color-shadow: var(--md-ref-palette-neutral0);
39 /* Error */
40 --md-sys-color-error: var(--md-ref-palette-error40);
41 /* Outline */
42 --md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
43 /* On background */
44 --md-sys-color-on-background: var(--md-ref-palette-neutral10);
45 /* Background */
46 --md-sys-color-background: var(--md-ref-palette-neutral99);
47 /* Inverse on surface */
48 --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
49 /* Inverse surface */
50 --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
51 /* On surface variant */
52 --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
53 /* On surface */
54 --md-sys-color-on-surface: var(--md-ref-palette-neutral10);
55 /* Surface Variant */
56 --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
57 /* Surface */
58 --md-sys-color-surface: var(--md-ref-palette-neutral99);
59 /* On secondary container */
60 --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
61 /* On secondary */
62 --md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
63 /* Secondary container */
64 --md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
65 /* Secondary */
66 --md-sys-color-secondary: var(--md-ref-palette-secondary40);
67 /* Inverse primary */
68 --md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
69 /* On primary container */
70 --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
71 /* On primary */
72 --md-sys-color-on-primary: var(--md-ref-palette-primary100);
73 /* Primary container */
74 --md-sys-color-primary-container: var(--md-ref-palette-primary90);
75 /* Primary */
76 --md-sys-color-primary: var(--md-ref-palette-primary40);
77}
78