@phillips/seldon 1.14.0 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/scss/_type.scss +124 -0
- package/dist/scss/_typography.scss +32 -42
- package/dist/scss/_vars.scss +113 -8
- package/package.json +1 -1
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
@use './vars' as *;
|
|
2
|
+
|
|
3
|
+
@mixin hText($size: $heading-size1, $color: $primary-black, $transform-style: capitalize) {
|
|
4
|
+
color: $color;
|
|
5
|
+
font-family: 'DistinctDisplay';
|
|
6
|
+
font-size: $size;
|
|
7
|
+
font-weight: 400;
|
|
8
|
+
line-height: 1.25;
|
|
9
|
+
text-transform: $transform-style;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@mixin pText($size: $body-size1, $color: $soft-black) {
|
|
13
|
+
color: $color;
|
|
14
|
+
font-family: 'Montserrat';
|
|
15
|
+
font-size: $size;
|
|
16
|
+
line-height: 1.5;
|
|
17
|
+
letter-spacing: 0.0625rem;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@mixin labelText($label) {
|
|
21
|
+
font-family: 'Montserrat';
|
|
22
|
+
|
|
23
|
+
@if $label == 'button' {
|
|
24
|
+
font-size: $button-label-size;
|
|
25
|
+
font-weight: 500;
|
|
26
|
+
letter-spacing: 0.0625rem;
|
|
27
|
+
text-transform: capitalize;
|
|
28
|
+
}
|
|
29
|
+
@if $label == 'cta-sm' {
|
|
30
|
+
font-size: $cta-sm-label-size;
|
|
31
|
+
font-weight: 600;
|
|
32
|
+
letter-spacing: 0.0625rem;
|
|
33
|
+
line-height: 1.25;
|
|
34
|
+
text-transform: uppercase;
|
|
35
|
+
}
|
|
36
|
+
@if $label == 'cta-lg' {
|
|
37
|
+
font-size: $cta-lg-label-size;
|
|
38
|
+
font-weight: 700;
|
|
39
|
+
letter-spacing: 0.125rem;
|
|
40
|
+
line-height: 1.25;
|
|
41
|
+
text-transform: uppercase;
|
|
42
|
+
}
|
|
43
|
+
@if $label == 'email' {
|
|
44
|
+
font-size: $email-label-size;
|
|
45
|
+
font-weight: 600;
|
|
46
|
+
letter-spacing: 0.0625rem;
|
|
47
|
+
line-height: 1.25;
|
|
48
|
+
text-transform: lowercase;
|
|
49
|
+
}
|
|
50
|
+
@if $label == 'text' {
|
|
51
|
+
font-size: $text-label-size;
|
|
52
|
+
font-weight: 500;
|
|
53
|
+
letter-spacing: 0.0625rem;
|
|
54
|
+
line-height: 1.25;
|
|
55
|
+
}
|
|
56
|
+
@if $label == 'text-badge' {
|
|
57
|
+
font-size: $text-badge-label-size;
|
|
58
|
+
font-weight: 500;
|
|
59
|
+
letter-spacing: 0.1875rem;
|
|
60
|
+
line-height: 1.25;
|
|
61
|
+
text-transform: uppercase;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@mixin text($token) {
|
|
66
|
+
// Labels
|
|
67
|
+
@if $token == 'button' {
|
|
68
|
+
@include labelText($button);
|
|
69
|
+
}
|
|
70
|
+
@if $token == 'cta-sm' {
|
|
71
|
+
@include labelText($cta-sm);
|
|
72
|
+
}
|
|
73
|
+
@if $token == 'cta-lg' {
|
|
74
|
+
@include labelText($cta-lg);
|
|
75
|
+
}
|
|
76
|
+
@if $token == 'email' {
|
|
77
|
+
@include labelText($email);
|
|
78
|
+
}
|
|
79
|
+
@if $token == 'text' {
|
|
80
|
+
@include labelText($text);
|
|
81
|
+
}
|
|
82
|
+
@if $token == 'text-badge' {
|
|
83
|
+
@include labelText($text-badge);
|
|
84
|
+
}
|
|
85
|
+
// Displays
|
|
86
|
+
@if $token == 'display0' {
|
|
87
|
+
@include hText($display-size0, null, uppercase);
|
|
88
|
+
}
|
|
89
|
+
@if $token == 'display1' {
|
|
90
|
+
@include hText($display-size1, null, uppercase);
|
|
91
|
+
}
|
|
92
|
+
@if $token == 'display2' {
|
|
93
|
+
@include hText($display-size2, null, uppercase);
|
|
94
|
+
}
|
|
95
|
+
@if $token == 'display3' {
|
|
96
|
+
@include hText($display-size3, null, uppercase);
|
|
97
|
+
}
|
|
98
|
+
@if $token == 'display4' {
|
|
99
|
+
@include hText($display-size4, null, uppercase);
|
|
100
|
+
}
|
|
101
|
+
// Headings
|
|
102
|
+
@if $token == 'heading1' {
|
|
103
|
+
@include hText($heading-size1);
|
|
104
|
+
}
|
|
105
|
+
@if $token == 'heading2' {
|
|
106
|
+
@include hText($heading-size2);
|
|
107
|
+
}
|
|
108
|
+
@if $token == 'heading3' {
|
|
109
|
+
@include hText($heading-size3);
|
|
110
|
+
}
|
|
111
|
+
@if $token == 'heading4' {
|
|
112
|
+
@include hText($heading-size4);
|
|
113
|
+
}
|
|
114
|
+
// Body
|
|
115
|
+
@if $token == 'body1' {
|
|
116
|
+
@include pText($body-size1);
|
|
117
|
+
}
|
|
118
|
+
@if $token == 'body2' {
|
|
119
|
+
@include pText($body-size2);
|
|
120
|
+
}
|
|
121
|
+
@if $token == 'body3' {
|
|
122
|
+
@include pText($body-size3);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
@import './vars';
|
|
2
2
|
|
|
3
|
+
html,
|
|
3
4
|
body {
|
|
4
5
|
font-family:
|
|
5
|
-
|
|
6
|
-
'Helvetica Neue',
|
|
7
|
-
Helvetica,
|
|
6
|
+
'Montserrat',
|
|
8
7
|
-apple-system,
|
|
9
|
-
'.SFNSText-Regular',
|
|
10
|
-
'San Francisco',
|
|
11
8
|
BlinkMacSystemFont,
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
avenir next,
|
|
10
|
+
avenir,
|
|
11
|
+
segoe ui,
|
|
12
|
+
helvetica neue,
|
|
13
|
+
helvetica,
|
|
14
|
+
Cantarell,
|
|
15
|
+
Ubuntu,
|
|
16
|
+
roboto,
|
|
17
|
+
noto,
|
|
18
|
+
arial,
|
|
16
19
|
sans-serif;
|
|
17
20
|
font-size: 16px;
|
|
18
21
|
margin: 0;
|
|
@@ -29,61 +32,48 @@ body {
|
|
|
29
32
|
src: url('../fonts/Distinct-Display.woff2') format('woff2');
|
|
30
33
|
}
|
|
31
34
|
@mixin DistinctDisplay {
|
|
32
|
-
font-family:
|
|
35
|
+
font-family: 'DistinctDisplay';
|
|
33
36
|
}
|
|
34
37
|
|
|
35
38
|
@font-face {
|
|
36
|
-
font-family: '
|
|
39
|
+
font-family: 'DistinctDisplay';
|
|
37
40
|
src: url('../fonts/Distinct-DisplayItalic.woff') format('woff');
|
|
38
41
|
src: url('../fonts/Distinct-DisplayItalic.woff2') format('woff2');
|
|
39
|
-
|
|
40
|
-
@mixin DistinctDisplayItalic {
|
|
41
|
-
font-family: $DistinctDisplayItalic;
|
|
42
|
+
font-style: italic;
|
|
42
43
|
}
|
|
43
44
|
|
|
44
|
-
@
|
|
45
|
-
font-family: '
|
|
46
|
-
|
|
47
|
-
src: url('../fonts/Distinct-Italic.woff2') format('woff2');
|
|
48
|
-
}
|
|
49
|
-
@mixin DistinctItalic {
|
|
50
|
-
font-family: $DistinctItalic;
|
|
45
|
+
@mixin DistinctDisplayItalic {
|
|
46
|
+
font-family: 'DistinctDisplay';
|
|
47
|
+
font-style: italic;
|
|
51
48
|
}
|
|
52
49
|
|
|
53
50
|
@font-face {
|
|
54
|
-
font-family: '
|
|
51
|
+
font-family: 'Distinct';
|
|
55
52
|
src: url('../fonts/Distinct-Text.woff') format('woff');
|
|
56
53
|
src: url('../fonts/Distinct-Text.woff2') format('woff2');
|
|
57
54
|
}
|
|
58
55
|
@mixin DistinctText {
|
|
59
|
-
font-family:
|
|
56
|
+
font-family: 'Distinct';
|
|
57
|
+
}
|
|
58
|
+
@font-face {
|
|
59
|
+
font-family: 'Distinct';
|
|
60
|
+
src: url('../fonts/Distinct-Italic.woff') format('woff');
|
|
61
|
+
src: url('../fonts/Distinct-Italic.woff2') format('woff2');
|
|
62
|
+
font-style: italic;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@mixin DistinctItalic {
|
|
66
|
+
font-family: 'Distinct';
|
|
67
|
+
font-style: italic;
|
|
60
68
|
}
|
|
61
69
|
|
|
62
70
|
@mixin headerText {
|
|
63
71
|
@include DistinctDisplay();
|
|
64
72
|
color: $primary-black;
|
|
65
73
|
font-weight: 400;
|
|
74
|
+
font-style: italic;
|
|
66
75
|
}
|
|
67
76
|
|
|
68
77
|
@mixin bodyText {
|
|
69
78
|
color: $soft-black;
|
|
70
79
|
}
|
|
71
|
-
|
|
72
|
-
// @TODO: uncomment when site is able to be refactored
|
|
73
|
-
// h1,
|
|
74
|
-
// h2,
|
|
75
|
-
// h3,
|
|
76
|
-
// h4 {
|
|
77
|
-
// color: $primary-black;
|
|
78
|
-
// @include DistinctDisplay();
|
|
79
|
-
// }
|
|
80
|
-
|
|
81
|
-
// p,
|
|
82
|
-
// input,
|
|
83
|
-
// label,
|
|
84
|
-
// div,
|
|
85
|
-
// a,
|
|
86
|
-
// button {
|
|
87
|
-
// color: $soft-black;
|
|
88
|
-
// @include DistinctText();
|
|
89
|
-
// }
|
package/dist/scss/_vars.scss
CHANGED
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
// prefix
|
|
2
2
|
$px: phillips;
|
|
3
3
|
|
|
4
|
+
////////////////////////
|
|
5
|
+
/// COlORS:
|
|
6
|
+
///////////////////////
|
|
7
|
+
|
|
4
8
|
// Primary color palette
|
|
5
9
|
$pure-black: #000000;
|
|
6
10
|
$primary-black: #323232;
|
|
7
11
|
$pure-white: #ffffff;
|
|
8
|
-
|
|
9
12
|
// Secondary color palette
|
|
10
13
|
$soft-black: #545454;
|
|
11
14
|
$dark-gray: #75715f;
|
|
12
|
-
|
|
13
15
|
// Utilititarian color palette
|
|
14
16
|
$keyline-gray: #949494;
|
|
15
17
|
$medium-gray: #c3bebb;
|
|
16
18
|
$light-gray: #eceae7;
|
|
17
19
|
$off-white: #f4f2f1;
|
|
18
|
-
|
|
19
20
|
// Notification color palette
|
|
20
21
|
$error-red: #ff0000;
|
|
21
22
|
$error-pink: rgba(255, 229, 229, 0.9);
|
|
@@ -25,20 +26,124 @@ $clock-widget-blue: #4a90e2;
|
|
|
25
26
|
$clock-widget-green: #6a9c53;
|
|
26
27
|
$clock-widget-maroon: #6b0000;
|
|
27
28
|
$clock-widget-red: #b00000;
|
|
28
|
-
|
|
29
29
|
// Articker color palette
|
|
30
30
|
$articker-red: #fc1e2b;
|
|
31
31
|
$articker-orange: #ff8201;
|
|
32
32
|
$articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
|
|
33
|
+
// Text variables
|
|
34
|
+
$header-color: $pure-black;
|
|
35
|
+
$text-color: $soft-black;
|
|
33
36
|
|
|
37
|
+
////////////////////////
|
|
38
|
+
/// FONTS:
|
|
39
|
+
///////////////////////
|
|
34
40
|
// Font-variables
|
|
35
41
|
$DistinctDisplay: 'DistinctDisplay';
|
|
36
42
|
$DistinctDisplayItalic: 'DistinctDisplayItalic';
|
|
37
43
|
$DistinctItalic: 'DistinctItalic';
|
|
38
44
|
$DistinctText: 'DistinctText';
|
|
39
|
-
|
|
40
|
-
// Text variables
|
|
41
|
-
$header-color: $pure-black;
|
|
45
|
+
$Distinct: 'Distinct';
|
|
42
46
|
$header-family: $DistinctDisplay;
|
|
43
|
-
$text-color: $soft-black;
|
|
44
47
|
$text-family: $DistinctText;
|
|
48
|
+
|
|
49
|
+
////////////////////////
|
|
50
|
+
/// LABEL TOKENS:
|
|
51
|
+
///////////////////////
|
|
52
|
+
|
|
53
|
+
// Used with the labelText mixin
|
|
54
|
+
// @include labelText($label)
|
|
55
|
+
$button: 'button';
|
|
56
|
+
$cta-sm: 'cta-sm';
|
|
57
|
+
$cta-lg: 'cta-lg';
|
|
58
|
+
$email: 'email';
|
|
59
|
+
$text: 'text';
|
|
60
|
+
$text-badge: 'text-badge';
|
|
61
|
+
|
|
62
|
+
$display0: 'display0';
|
|
63
|
+
$display1: 'display1';
|
|
64
|
+
$display2: 'display2';
|
|
65
|
+
$display3: 'display3';
|
|
66
|
+
$display4: 'display4';
|
|
67
|
+
|
|
68
|
+
$heading1: 'heading1';
|
|
69
|
+
$heading2: 'heading2';
|
|
70
|
+
$heading3: 'heading3';
|
|
71
|
+
$heading4: 'heading4';
|
|
72
|
+
|
|
73
|
+
$body1: 'body1';
|
|
74
|
+
$body2: 'body2';
|
|
75
|
+
$body3: 'body3';
|
|
76
|
+
|
|
77
|
+
////////////////////////
|
|
78
|
+
/// FONT SIZE TOKENS:
|
|
79
|
+
///////////////////////
|
|
80
|
+
|
|
81
|
+
:root {
|
|
82
|
+
--heading-size0: 3.25rem;
|
|
83
|
+
--heading-size1: 2.44rem;
|
|
84
|
+
--heading-size2: 1.95rem;
|
|
85
|
+
--heading-size3: 1.56rem;
|
|
86
|
+
--heading-size4: 1.56rem;
|
|
87
|
+
|
|
88
|
+
--body-size1: 1.25rem;
|
|
89
|
+
--body-size2: 1rem;
|
|
90
|
+
--body-size3: 0.75rem;
|
|
91
|
+
|
|
92
|
+
--label-size1: 1.25rem;
|
|
93
|
+
--label-size2: 1rem;
|
|
94
|
+
--label-size2: 0.75rem;
|
|
95
|
+
|
|
96
|
+
@media (max-width: 960px) {
|
|
97
|
+
--heading-size0: 2.59rem;
|
|
98
|
+
--heading-size1: 1.83rem;
|
|
99
|
+
--heading-size2: 1.46rem;
|
|
100
|
+
--heading-size3: 1.17rem;
|
|
101
|
+
--heading-size4: 0.94rem;
|
|
102
|
+
|
|
103
|
+
--body-size1: 0.94rem;
|
|
104
|
+
--body-size2: 0.75rem;
|
|
105
|
+
--body-size3: 0.56rem;
|
|
106
|
+
|
|
107
|
+
--label-size1: 1rem;
|
|
108
|
+
--label-size2: 0.75rem;
|
|
109
|
+
--label-size2: 0.56rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
@media (min-width: 1800px) {
|
|
113
|
+
--heading-size0: 4.06rem;
|
|
114
|
+
--heading-size1: 3.05rem;
|
|
115
|
+
--heading-size2: 2.44rem;
|
|
116
|
+
--heading-size3: 1.95rem;
|
|
117
|
+
|
|
118
|
+
--body-size1: 1.56rem;
|
|
119
|
+
--body-size2: 1.25rem;
|
|
120
|
+
--body-size3: 0.94rem;
|
|
121
|
+
|
|
122
|
+
--label-size1: 1.56rem;
|
|
123
|
+
--label-size2: 1.25rem;
|
|
124
|
+
--label-size3: 1rem;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// DISPLAY
|
|
129
|
+
$display-size0: var(--heading-size0);
|
|
130
|
+
$display-size1: var(--heading-size1);
|
|
131
|
+
$display-size2: var(--heading-size2);
|
|
132
|
+
$display-size3: var(--heading-size3);
|
|
133
|
+
$display-size4: var(--heading-size4);
|
|
134
|
+
// HEADING
|
|
135
|
+
$heading-size1: var(--heading-size1);
|
|
136
|
+
$heading-size2: var(--heading-size2);
|
|
137
|
+
$heading-size3: var(--heading-size3);
|
|
138
|
+
$heading-size4: var(--heading-size4);
|
|
139
|
+
// BODY
|
|
140
|
+
$body-size1: var(--body-size1);
|
|
141
|
+
$body-size2: var(--body-size2);
|
|
142
|
+
$body-size3: var(--body-size3);
|
|
143
|
+
// LABELS
|
|
144
|
+
$button-label-size: var(--label-size2);
|
|
145
|
+
$cta-sm-label-size: var(--label-size2);
|
|
146
|
+
$email-label-size: var(--label-size2);
|
|
147
|
+
$cta-lg-label-size: var(--label-size1);
|
|
148
|
+
$text-label-size: var(--label-size3);
|
|
149
|
+
$text-badge-label-size: var(--label-size3);
|