@phillips/seldon 1.14.0 → 1.16.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/components/Grid/Grid.d.ts +18 -0
- package/dist/components/Grid/Grid.js +29 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +20 -18
- package/dist/scss/_type.scss +124 -0
- package/dist/scss/_typography.scss +31 -42
- package/dist/scss/_utils.scss +33 -0
- package/dist/scss/_vars.scss +175 -8
- package/dist/scss/components/Grid/_grid.scss +20 -0
- package/dist/scss/components/ViewingsList/_viewingsList.scss +1 -1
- package/dist/scss/styles.scss +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ElementType } from 'react';
|
|
2
|
+
import { CommonProps } from '../../utils';
|
|
3
|
+
export interface GridProps extends CommonProps {
|
|
4
|
+
/**
|
|
5
|
+
* Button contents
|
|
6
|
+
*/
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Optional element to render in place of a button e.g. React-Router, etc
|
|
10
|
+
*/
|
|
11
|
+
element?: ElementType;
|
|
12
|
+
/**
|
|
13
|
+
* Optional boolean to dictate if the grid has left and right margins
|
|
14
|
+
*/
|
|
15
|
+
hasMargins?: boolean;
|
|
16
|
+
}
|
|
17
|
+
export declare function Grid({ children, className, element: Element, hasMargins, id, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export default Grid;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import s from "../../node_modules/classnames/index.js";
|
|
3
|
+
import { px as n } from "../../utils/index.js";
|
|
4
|
+
function g({
|
|
5
|
+
children: e,
|
|
6
|
+
className: t,
|
|
7
|
+
element: i = "section",
|
|
8
|
+
hasMargins: o = !0,
|
|
9
|
+
id: r,
|
|
10
|
+
...a
|
|
11
|
+
}) {
|
|
12
|
+
return /* @__PURE__ */ m(
|
|
13
|
+
i,
|
|
14
|
+
{
|
|
15
|
+
"data-testid": r ? `grid-container-${r}` : "grid-container",
|
|
16
|
+
id: r,
|
|
17
|
+
className: s(`${n}-grid__container`, {
|
|
18
|
+
[`${t}`]: t,
|
|
19
|
+
[`${n}-grid__container--has-margins`]: o
|
|
20
|
+
}),
|
|
21
|
+
...a,
|
|
22
|
+
children: e
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
export {
|
|
27
|
+
g as Grid,
|
|
28
|
+
g as default
|
|
29
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { default as Button } from './components/Button/Button';
|
|
2
2
|
export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
|
|
3
|
+
export { default as Grid } from './components/Grid/Grid';
|
|
3
4
|
export { default as Header } from './components/Header/Header';
|
|
4
5
|
export { default as HeroBanner } from './components/HeroBanner/HeroBanner';
|
|
5
6
|
export { default as Input } from './components/Input/Input';
|
package/dist/index.js
CHANGED
|
@@ -1,20 +1,22 @@
|
|
|
1
|
-
import { default as
|
|
2
|
-
import { default as
|
|
3
|
-
import {
|
|
4
|
-
import { default as d } from "./components/
|
|
5
|
-
import { default as p } from "./components/
|
|
6
|
-
import { default as x } from "./components/
|
|
7
|
-
import { default as
|
|
8
|
-
import { default as B } from "./components/ViewingsList/
|
|
9
|
-
import { default as H } from "./
|
|
1
|
+
import { default as t } from "./components/Button/Button.js";
|
|
2
|
+
import { default as a } from "./components/ErrorBoundary/ErrorBoundary.js";
|
|
3
|
+
import { Grid as s } from "./components/Grid/Grid.js";
|
|
4
|
+
import { default as d } from "./components/Header/Header.js";
|
|
5
|
+
import { default as p } from "./components/HeroBanner/HeroBanner.js";
|
|
6
|
+
import { default as x } from "./components/Input/Input.js";
|
|
7
|
+
import { default as n } from "./components/Select/Select.js";
|
|
8
|
+
import { default as B } from "./components/ViewingsList/ViewingsList.js";
|
|
9
|
+
import { default as H } from "./components/ViewingsList/StatefulViewingsList.js";
|
|
10
|
+
import { default as S } from "./pages/Page.js";
|
|
10
11
|
export {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
s as
|
|
14
|
-
d as
|
|
15
|
-
p as
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
t as Button,
|
|
13
|
+
a as ErrorBoundary,
|
|
14
|
+
s as Grid,
|
|
15
|
+
d as Header,
|
|
16
|
+
p as HeroBanner,
|
|
17
|
+
x as Input,
|
|
18
|
+
S as Page,
|
|
19
|
+
n as Select,
|
|
20
|
+
H as StatefulViewingsList,
|
|
21
|
+
B as ViewingsList
|
|
20
22
|
};
|
|
@@ -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,34 +32,39 @@ 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 {
|
|
@@ -68,22 +76,3 @@ body {
|
|
|
68
76
|
@mixin bodyText {
|
|
69
77
|
color: $soft-black;
|
|
70
78
|
}
|
|
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/_utils.scss
CHANGED
|
@@ -36,3 +36,36 @@
|
|
|
36
36
|
text-align: center;
|
|
37
37
|
line-height: 1;
|
|
38
38
|
}
|
|
39
|
+
|
|
40
|
+
@mixin grid($columns: 2) {
|
|
41
|
+
display: grid;
|
|
42
|
+
grid-template-columns: repeat($columns, 1fr);
|
|
43
|
+
gap: $spacing-medium;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@mixin gridContainer($margins-on: true) {
|
|
47
|
+
display: grid;
|
|
48
|
+
grid-template-columns: repeat(2, 1fr);
|
|
49
|
+
gap: $spacing-medium;
|
|
50
|
+
|
|
51
|
+
@if $margins-on {
|
|
52
|
+
margin: 0 $spacing-medium;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@media (min-width: $breakpoint2) {
|
|
56
|
+
grid-template-columns: repeat(4, 1fr);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@media (min-width: $breakpoint3) {
|
|
60
|
+
grid-template-columns: repeat(12, 1fr);
|
|
61
|
+
@if $margins-on {
|
|
62
|
+
margin: 0 $spacing-large;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@media (min-width: $breakpoint4) {
|
|
67
|
+
@if $margins-on {
|
|
68
|
+
margin: 0 $spacing-xl;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
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,186 @@ $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);
|
|
150
|
+
|
|
151
|
+
////////////////////////
|
|
152
|
+
/// SPACING TOKENS:
|
|
153
|
+
///////////////////////
|
|
154
|
+
|
|
155
|
+
:root {
|
|
156
|
+
--spacing-micro: 0.25rem;
|
|
157
|
+
--spacing-xsm: 0.5rem;
|
|
158
|
+
--spacing-small: 1rem;
|
|
159
|
+
--spacing-medium: 2rem;
|
|
160
|
+
--spacing-large: 3rem;
|
|
161
|
+
--spacing-xl: 6rem;
|
|
162
|
+
|
|
163
|
+
@media (max-width: 960px) {
|
|
164
|
+
--spacing-micro: 0.19rem;
|
|
165
|
+
--spacing-xsm: 0.38rem;
|
|
166
|
+
--spacing-small: 0.75rem;
|
|
167
|
+
--spacing-medium: 1.5rem;
|
|
168
|
+
--spacing-large: 2.25rem;
|
|
169
|
+
--spacing-xl: 4.8rem;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
@media (min-width: 1800px) {
|
|
173
|
+
--spacing-micro: 0.31rem;
|
|
174
|
+
--spacing-xsm: 0.63rem;
|
|
175
|
+
--spacing-small: 1.25rem;
|
|
176
|
+
--spacing-medium: 2.5rem;
|
|
177
|
+
--spacing-large: 3.75rem;
|
|
178
|
+
--spacing-xl: 7.5rem;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
$spacing-micro: var(--spacing-micro);
|
|
183
|
+
$spacing-xsm: var(--spacing-xsm);
|
|
184
|
+
$spacing-small: var(--spacing-small);
|
|
185
|
+
$spacing-medium: var(--spacing-medium);
|
|
186
|
+
$spacing-large: var(--spacing-large);
|
|
187
|
+
$spacing-xl: var(--spacing-xl);
|
|
188
|
+
|
|
189
|
+
// PADDING
|
|
190
|
+
$padding-micro: var(--spacing-micro);
|
|
191
|
+
$padding-xsm: var(--spacing-xsm);
|
|
192
|
+
$padding-small: var(--spacing-small);
|
|
193
|
+
$padding-medium: var(--spacing-medium);
|
|
194
|
+
$padding-large: var(--spacing-large);
|
|
195
|
+
$padding-xl: var(--spacing-xl);
|
|
196
|
+
|
|
197
|
+
// MARGIN
|
|
198
|
+
$margin-micro: var(--spacing-micro);
|
|
199
|
+
$margin-xsm: var(--spacing-xsm);
|
|
200
|
+
$margin-small: var(--spacing-small);
|
|
201
|
+
$margin-medium: var(--spacing-medium);
|
|
202
|
+
$margin-large: var(--spacing-large);
|
|
203
|
+
$margin-xl: var(--spacing-xl);
|
|
204
|
+
|
|
205
|
+
////////////////////////
|
|
206
|
+
/// Breakpoint TOKENS:
|
|
207
|
+
///////////////////////
|
|
208
|
+
|
|
209
|
+
$breakpoint2: 961px;
|
|
210
|
+
$breakpoint3: 1401px;
|
|
211
|
+
$breakpoint4: 1801px;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
@import '../../vars';
|
|
2
|
+
@import '../../_utils';
|
|
3
|
+
|
|
4
|
+
.#{$px}-grid {
|
|
5
|
+
&__container {
|
|
6
|
+
@include gridContainer(false);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
&__container--has-margins {
|
|
10
|
+
margin: 0 $spacing-medium;
|
|
11
|
+
|
|
12
|
+
@media (min-width: 1401px) {
|
|
13
|
+
margin: 0 $spacing-large;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@media (min-width: 1801px) {
|
|
17
|
+
margin: 0 $spacing-xl;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
package/dist/scss/styles.scss
CHANGED