Skip to content
This repository was archived by the owner on May 20, 2023. It is now read-only.

Commit f985b4a

Browse files
har79nshahan
har79
authored and
nshahan
committed
Part of a sequence of CLs refactoring css/material into separate, smaller libraries
PiperOrigin-RevId: 225357862
1 parent 4b8a1cd commit f985b4a

File tree

2 files changed

+182
-184
lines changed

2 files changed

+182
-184
lines changed

‎angular_components/lib/css/_typography_material.scss‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
// Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file
2+
// for details. All rights reserved. Use of this source code is governed by a
3+
// BSD-style license that can be found in the LICENSE file.
4+
5+
// Typography constants
6+
// https://material.googleplex.com/style/typography.html
7+
8+
// Roboto font stack.
9+
$mat-font-family: Roboto, Noto, sans-serif;
10+
11+
// Font sizes
12+
$mat-font-size-display-4: 112px;
13+
$mat-font-size-display-3: 56px;
14+
$mat-font-size-display-2: 45px;
15+
$mat-font-size-display-1: 34px;
16+
$mat-font-size-headline: 24px;
17+
$mat-font-size-title: 20px;
18+
$mat-font-size-subhead: 15px;
19+
$mat-font-size-button: 14px;
20+
$mat-font-size-body: 13px;
21+
$mat-font-size-caption: 12px;
22+
23+
// Font weights
24+
$mat-font-weight-thin: 100;
25+
$mat-font-weight-light: 300;
26+
$mat-font-weight-regular: 400;
27+
$mat-font-weight-medium: 500;
28+
$mat-font-weight-bold: 700;
29+
$mat-font-weight-black: 900;
30+
31+
// Line heights
32+
$mat-font-leading-display-4: 112px;
33+
$mat-font-leading-display-3: 56px;
34+
$mat-font-leading-display-2: 48px;
35+
$mat-font-leading-display-1: 40px;
36+
$mat-font-leading-headline: 32px;
37+
$mat-font-leading-title: 32px;
38+
$mat-font-leading-subhead-2: 28px;
39+
$mat-font-leading-subhead-1: 24px;
40+
$mat-font-leading-button: 36px;
41+
$mat-font-leading-body-2: 24px;
42+
$mat-font-leading-body-1: 20px;
43+
$mat-font-leading-caption: 20px;
44+
45+
// Converts tracking to letter-spacing.
46+
@function font-tracking($tracking) {
47+
@return ($tracking / 1000) * 1em;
48+
}
49+
50+
// Prevents text from wrapping.
51+
@mixin nowrap {
52+
overflow: hidden;
53+
text-overflow: ellipsis;
54+
white-space: nowrap;
55+
}
56+
57+
// Typography styles.
58+
//
59+
// Each style mixin specifies at least:
60+
// * color
61+
// * font-family
62+
// * font-size
63+
// * font-style (reset to normal)
64+
// * font-variant (reset to normal)
65+
// * font-weight
66+
// * letter-spacing
67+
// * line-height
68+
// * nowrap (for styles that should "exist as single lines")
69+
//
70+
// "/" in CSS font property has to be specified with #{} interpolation to
71+
// prevent the sass compiler from trying to perform division (go/sass-slash).
72+
73+
@mixin mat-font-display-4 {
74+
@include nowrap;
75+
76+
color: $mat-text-secondary;
77+
font: $mat-font-weight-light $mat-font-size-display-4 #{"/"} $mat-font-leading-display-4 $mat-font-family;
78+
letter-spacing: font-tracking(-10);
79+
}
80+
81+
@mixin mat-font-display-3 {
82+
@include nowrap;
83+
84+
color: $mat-text-secondary;
85+
font: $mat-font-weight-regular $mat-font-size-display-3 #{"/"} $mat-font-leading-display-3 $mat-font-family;
86+
letter-spacing: font-tracking(-5);
87+
}
88+
89+
@mixin mat-font-display-2 {
90+
color: $mat-text-secondary;
91+
font: $mat-font-weight-regular $mat-font-size-display-2 #{"/"} $mat-font-leading-display-2 $mat-font-family;
92+
letter-spacing: font-tracking(0);
93+
}
94+
95+
@mixin mat-font-display-1 {
96+
color: $mat-text-secondary;
97+
font: $mat-font-weight-regular $mat-font-size-display-1 #{"/"} $mat-font-leading-display-1 $mat-font-family;
98+
letter-spacing: font-tracking(0);
99+
}
100+
101+
@mixin mat-font-headline {
102+
color: $mat-text-primary;
103+
font: $mat-font-weight-regular $mat-font-size-headline #{"/"} $mat-font-leading-headline $mat-font-family;
104+
letter-spacing: font-tracking(0);
105+
}
106+
107+
@mixin mat-font-title {
108+
@include nowrap;
109+
110+
color: $mat-text-primary;
111+
font: $mat-font-weight-medium $mat-font-size-title #{"/"} $mat-font-leading-title $mat-font-family;
112+
letter-spacing: font-tracking(5);
113+
}
114+
115+
@mixin mat-font-subhead-2 {
116+
color: $mat-text-primary;
117+
font: $mat-font-weight-regular $mat-font-size-subhead #{"/"} $mat-font-leading-subhead-2 $mat-font-family;
118+
letter-spacing: font-tracking(10);
119+
}
120+
121+
@mixin mat-font-subhead {
122+
color: $mat-text-primary;
123+
font: $mat-font-weight-regular $mat-font-size-subhead #{"/"} $mat-font-leading-subhead-1 $mat-font-family;
124+
letter-spacing: font-tracking(10);
125+
}
126+
127+
@mixin mat-font-body-2 {
128+
color: $mat-text-primary;
129+
font: $mat-font-weight-medium $mat-font-size-body #{"/"} $mat-font-leading-body-2 $mat-font-family;
130+
letter-spacing: font-tracking(10);
131+
}
132+
133+
@mixin mat-font-body {
134+
color: $mat-text-primary;
135+
font: $mat-font-weight-regular $mat-font-size-body #{"/"} $mat-font-leading-body-1 $mat-font-family;
136+
letter-spacing: font-tracking(10);
137+
}
138+
139+
@mixin mat-font-caption {
140+
@include nowrap;
141+
142+
color: $mat-text-secondary;
143+
font: $mat-font-weight-regular $mat-font-size-caption #{"/"} $mat-font-leading-caption $mat-font-family;
144+
letter-spacing: font-tracking(20);
145+
}
146+
147+
@mixin mat-font-button {
148+
@include nowrap;
149+
150+
color: $mat-text-primary;
151+
font: $mat-font-weight-medium $mat-font-size-button #{"/"} $mat-font-leading-button $mat-font-family;
152+
letter-spacing: font-tracking(10);
153+
text-transform: uppercase;
154+
}
155+
156+
// Set link colors and styling.
157+
@mixin mat-link {
158+
color: $mat-link-default;
159+
cursor: pointer;
160+
text-decoration: none;
161+
162+
// Order of link states must be `visited`, `hover` & `focus`, then `active`.
163+
164+
&:visited {
165+
color: $mat-link-visited;
166+
}
167+
168+
&:active {
169+
color: $mat-link-active;
170+
}
171+
}
172+
173+
// Set link colors across encapsulation boundaries. This can be used at the
174+
// top level of an application to ensure that all links are ACX-styled, even
175+
// if generated dynamically.
176+
@mixin mat-link-deep {
177+
::ng-deep a {
178+
@include mat-link();
179+
}
180+
}
181+

‎angular_components/lib/css/material/const/_typography.scss‎

Lines changed: 1 addition & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -2,187 +2,4 @@
22
// for details. All rights reserved. Use of this source code is governed by a
33
// BSD-style license that can be found in the LICENSE file.
44

5-
// #############################################################################
6-
//
7-
// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF
8-
// THIRD_PARTY/DART_SRC/ACX/CSS/MATERIAL
9-
//
10-
// #############################################################################
11-
12-
// Typography constants
13-
// https://material.googleplex.com/style/typography.html
14-
15-
// Roboto font stack.
16-
$mat-font-family: Roboto, Noto, sans-serif;
17-
18-
// Font sizes
19-
$mat-font-size-display-4: 112px;
20-
$mat-font-size-display-3: 56px;
21-
$mat-font-size-display-2: 45px;
22-
$mat-font-size-display-1: 34px;
23-
$mat-font-size-headline: 24px;
24-
$mat-font-size-title: 20px;
25-
$mat-font-size-subhead: 15px;
26-
$mat-font-size-button: 14px;
27-
$mat-font-size-body: 13px;
28-
$mat-font-size-caption: 12px;
29-
30-
// Font weights
31-
$mat-font-weight-thin: 100;
32-
$mat-font-weight-light: 300;
33-
$mat-font-weight-regular: 400;
34-
$mat-font-weight-medium: 500;
35-
$mat-font-weight-bold: 700;
36-
$mat-font-weight-black: 900;
37-
38-
// Line heights
39-
$mat-font-leading-display-4: 112px;
40-
$mat-font-leading-display-3: 56px;
41-
$mat-font-leading-display-2: 48px;
42-
$mat-font-leading-display-1: 40px;
43-
$mat-font-leading-headline: 32px;
44-
$mat-font-leading-title: 32px;
45-
$mat-font-leading-subhead-2: 28px;
46-
$mat-font-leading-subhead-1: 24px;
47-
$mat-font-leading-button: 36px;
48-
$mat-font-leading-body-2: 24px;
49-
$mat-font-leading-body-1: 20px;
50-
$mat-font-leading-caption: 20px;
51-
52-
// Converts tracking to letter-spacing.
53-
@function font-tracking($tracking) {
54-
@return ($tracking / 1000) * 1em;
55-
}
56-
57-
// Prevents text from wrapping.
58-
@mixin nowrap {
59-
overflow: hidden;
60-
text-overflow: ellipsis;
61-
white-space: nowrap;
62-
}
63-
64-
// Typography styles.
65-
//
66-
// Each style mixin specifies at least:
67-
// * color
68-
// * font-family
69-
// * font-size
70-
// * font-style (reset to normal)
71-
// * font-variant (reset to normal)
72-
// * font-weight
73-
// * letter-spacing
74-
// * line-height
75-
// * nowrap (for styles that should "exist as single lines")
76-
//
77-
// "/" in CSS font property has to be specified with #{} interpolation to
78-
// prevent the sass compiler from trying to perform division (go/sass-slash).
79-
80-
@mixin mat-font-display-4 {
81-
@include nowrap;
82-
83-
color: $mat-text-secondary;
84-
font: $mat-font-weight-light $mat-font-size-display-4 #{"/"} $mat-font-leading-display-4 $mat-font-family;
85-
letter-spacing: font-tracking(-10);
86-
}
87-
88-
@mixin mat-font-display-3 {
89-
@include nowrap;
90-
91-
color: $mat-text-secondary;
92-
font: $mat-font-weight-regular $mat-font-size-display-3 #{"/"} $mat-font-leading-display-3 $mat-font-family;
93-
letter-spacing: font-tracking(-5);
94-
}
95-
96-
@mixin mat-font-display-2 {
97-
color: $mat-text-secondary;
98-
font: $mat-font-weight-regular $mat-font-size-display-2 #{"/"} $mat-font-leading-display-2 $mat-font-family;
99-
letter-spacing: font-tracking(0);
100-
}
101-
102-
@mixin mat-font-display-1 {
103-
color: $mat-text-secondary;
104-
font: $mat-font-weight-regular $mat-font-size-display-1 #{"/"} $mat-font-leading-display-1 $mat-font-family;
105-
letter-spacing: font-tracking(0);
106-
}
107-
108-
@mixin mat-font-headline {
109-
color: $mat-text-primary;
110-
font: $mat-font-weight-regular $mat-font-size-headline #{"/"} $mat-font-leading-headline $mat-font-family;
111-
letter-spacing: font-tracking(0);
112-
}
113-
114-
@mixin mat-font-title {
115-
@include nowrap;
116-
117-
color: $mat-text-primary;
118-
font: $mat-font-weight-medium $mat-font-size-title #{"/"} $mat-font-leading-title $mat-font-family;
119-
letter-spacing: font-tracking(5);
120-
}
121-
122-
@mixin mat-font-subhead-2 {
123-
color: $mat-text-primary;
124-
font: $mat-font-weight-regular $mat-font-size-subhead #{"/"} $mat-font-leading-subhead-2 $mat-font-family;
125-
letter-spacing: font-tracking(10);
126-
}
127-
128-
@mixin mat-font-subhead {
129-
color: $mat-text-primary;
130-
font: $mat-font-weight-regular $mat-font-size-subhead #{"/"} $mat-font-leading-subhead-1 $mat-font-family;
131-
letter-spacing: font-tracking(10);
132-
}
133-
134-
@mixin mat-font-body-2 {
135-
color: $mat-text-primary;
136-
font: $mat-font-weight-medium $mat-font-size-body #{"/"} $mat-font-leading-body-2 $mat-font-family;
137-
letter-spacing: font-tracking(10);
138-
}
139-
140-
@mixin mat-font-body {
141-
color: $mat-text-primary;
142-
font: $mat-font-weight-regular $mat-font-size-body #{"/"} $mat-font-leading-body-1 $mat-font-family;
143-
letter-spacing: font-tracking(10);
144-
}
145-
146-
@mixin mat-font-caption {
147-
@include nowrap;
148-
149-
color: $mat-text-secondary;
150-
font: $mat-font-weight-regular $mat-font-size-caption #{"/"} $mat-font-leading-caption $mat-font-family;
151-
letter-spacing: font-tracking(20);
152-
}
153-
154-
@mixin mat-font-button {
155-
@include nowrap;
156-
157-
color: $mat-text-primary;
158-
font: $mat-font-weight-medium $mat-font-size-button #{"/"} $mat-font-leading-button $mat-font-family;
159-
letter-spacing: font-tracking(10);
160-
text-transform: uppercase;
161-
}
162-
163-
// Set link colors and styling.
164-
@mixin mat-link {
165-
color: $mat-link-default;
166-
cursor: pointer;
167-
text-decoration: none;
168-
169-
// Order of link states must be `visited`, `hover` & `focus`, then `active`.
170-
171-
&:visited {
172-
color: $mat-link-visited;
173-
}
174-
175-
&:active {
176-
color: $mat-link-active;
177-
}
178-
}
179-
180-
// Set link colors across encapsulation boundaries. This can be used at the
181-
// top level of an application to ensure that all links are ACX-styled, even
182-
// if generated dynamically.
183-
@mixin mat-link-deep {
184-
::ng-deep a {
185-
@include mat-link();
186-
}
187-
}
188-
5+
@import 'package:angular_components/css/typography_material';

0 commit comments

Comments
 (0)