@guardian/stand 0.0.34 → 0.0.35
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/styleD/build/css/base/typography.css +2 -2
- package/dist/styleD/build/css/component/TopBar.css +2 -2
- package/dist/styleD/build/css/component/alertBanner.css +1 -1
- package/dist/styleD/build/css/component/autocomplete.css +1 -1
- package/dist/styleD/build/css/component/avatar.css +1 -1
- package/dist/styleD/build/css/component/button.css +3 -3
- package/dist/styleD/build/css/component/checkbox.css +2 -2
- package/dist/styleD/build/css/component/favicon.css +1 -1
- package/dist/styleD/build/css/component/form.css +1 -1
- package/dist/styleD/build/css/component/inlineMessage.css +1 -1
- package/dist/styleD/build/css/component/link.css +1 -1
- package/dist/styleD/build/css/component/menu.css +3 -3
- package/dist/styleD/build/css/component/radioGroup.css +3 -3
- package/dist/styleD/build/css/component/select.css +2 -2
- package/dist/styleD/build/css/component/tagTable.css +1 -1
- package/dist/styleD/build/css/component/textArea.css +2 -2
- package/dist/styleD/build/css/component/textInput.css +2 -2
- package/dist/styleD/build/css/component/userMenu.css +6 -6
- package/dist/styleD/build/css/semantic/breakpoints.css +3 -12
- package/dist/styleD/build/css/semantic/typography.css +61 -61
- package/dist/styleD/build/typescript/component/link.cjs +1 -1
- package/dist/styleD/build/typescript/component/link.js +1 -1
- package/dist/styleD/build/typescript/semantic/breakpoints.cjs +3 -24
- package/dist/styleD/build/typescript/semantic/breakpoints.js +3 -24
- package/dist/styleD/utils/semantic/mq.cjs +4 -4
- package/dist/styleD/utils/semantic/mq.js +4 -4
- package/dist/types/components/topbar/styles.d.ts +2 -2
- package/dist/types/styleD/build/typescript/semantic/breakpoints.d.ts +3 -24
- package/dist/types/styleD/utils/semantic/mq.d.ts +5 -14
- package/package.json +2 -1
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
--base-typography-letter-spacing-densest-px: -1px;
|
|
52
52
|
--base-typography-letter-spacing-denser-px: -0.5px;
|
|
53
53
|
--base-typography-letter-spacing-dense-px: -0.2px;
|
|
54
|
-
--base-typography-letter-spacing-default-px:
|
|
54
|
+
--base-typography-letter-spacing-default-px: 0;
|
|
55
55
|
--base-typography-letter-spacing-densest-rem: -0.0625rem;
|
|
56
56
|
--base-typography-letter-spacing-denser-rem: -0.03125rem;
|
|
57
57
|
--base-typography-letter-spacing-dense-rem: -0.0125rem;
|
|
58
|
-
--base-typography-letter-spacing-default-rem:
|
|
58
|
+
--base-typography-letter-spacing-default-rem: 0;
|
|
59
59
|
}
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
--component-top-bar-tool-name-gap: 8px;
|
|
83
83
|
--component-top-bar-tool-name-typography-font: normal 700 1.25rem/1.15
|
|
84
84
|
'GH Guardian Headline';
|
|
85
|
-
--component-top-bar-tool-name-typography-letter-spacing:
|
|
85
|
+
--component-top-bar-tool-name-typography-letter-spacing: 0;
|
|
86
86
|
--component-top-bar-tool-name-typography-font-width: 100;
|
|
87
87
|
--component-top-bar-tool-name-divider-border: 0.0625rem solid #cccccc;
|
|
88
88
|
--component-top-bar-tool-name-divider-height: 2rem;
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
--component-top-bar-tool-name-hover-link-opacity: 0;
|
|
104
104
|
--component-top-bar-tool-name-hover-link-typography-font: normal 700
|
|
105
105
|
0.875rem/1.3 'Open Sans';
|
|
106
|
-
--component-top-bar-tool-name-hover-link-typography-letter-spacing:
|
|
106
|
+
--component-top-bar-tool-name-hover-link-typography-letter-spacing: 0;
|
|
107
107
|
--component-top-bar-tool-name-hover-link-typography-font-width: 95;
|
|
108
108
|
--component-top-bar-tool-name-hover-link-position: absolute;
|
|
109
109
|
--component-top-bar-tool-name-hover-link-width: 100%;
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
--component-alert-banner-shared-content-color: #000000;
|
|
22
22
|
--component-alert-banner-shared-content-typography-font: normal 460
|
|
23
23
|
0.875rem/1.3 'Open Sans';
|
|
24
|
-
--component-alert-banner-shared-content-typography-letter-spacing:
|
|
24
|
+
--component-alert-banner-shared-content-typography-letter-spacing: 0;
|
|
25
25
|
--component-alert-banner-shared-content-typography-font-width: 95;
|
|
26
26
|
--component-alert-banner-shared-content-icon-color: #545454;
|
|
27
27
|
--component-alert-banner-information-background-color: #e8f0fb;
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
--component-autocomplete-listbox-border-style: solid;
|
|
15
15
|
--component-autocomplete-listbox-border-color: #8d8d8d;
|
|
16
16
|
--component-autocomplete-listbox-padding-y: 8px;
|
|
17
|
-
--component-autocomplete-listbox-padding-x:
|
|
17
|
+
--component-autocomplete-listbox-padding-x: 0;
|
|
18
18
|
--component-autocomplete-listbox-background-color: #ffffff;
|
|
19
19
|
--component-autocomplete-listbox-item-padding-y: 8px;
|
|
20
20
|
--component-autocomplete-listbox-item-padding-x: 12px;
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
--component-avatar-shared-button-disabled-cursor: not-allowed;
|
|
77
77
|
--component-avatar-sm-size: 2rem;
|
|
78
78
|
--component-avatar-sm-typography-font: normal 700 0.75rem/1 'Open Sans';
|
|
79
|
-
--component-avatar-sm-typography-letter-spacing:
|
|
79
|
+
--component-avatar-sm-typography-letter-spacing: 0;
|
|
80
80
|
--component-avatar-sm-typography-font-width: 95;
|
|
81
81
|
--component-avatar-md-size: 2.5rem;
|
|
82
82
|
--component-avatar-md-typography-font: normal 700 0.875rem/1 'Open Sans';
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
--component-button-primary-xs-padding-with-icon-icon-left-left: 0.25rem;
|
|
34
34
|
--component-button-primary-xs-typography-font: normal 700 0.75rem/1
|
|
35
35
|
'Open Sans';
|
|
36
|
-
--component-button-primary-xs-typography-letter-spacing:
|
|
36
|
+
--component-button-primary-xs-typography-letter-spacing: 0;
|
|
37
37
|
--component-button-primary-xs-typography-font-width: 95;
|
|
38
38
|
--component-button-primary-xs-icon-size: 1.125rem;
|
|
39
39
|
--component-button-primary-xs-icon-gap: 0.25rem;
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
--component-button-secondary-xs-padding-with-icon-icon-left-left: 0.25rem;
|
|
96
96
|
--component-button-secondary-xs-typography-font: normal 700 0.75rem/1
|
|
97
97
|
'Open Sans';
|
|
98
|
-
--component-button-secondary-xs-typography-letter-spacing:
|
|
98
|
+
--component-button-secondary-xs-typography-letter-spacing: 0;
|
|
99
99
|
--component-button-secondary-xs-typography-font-width: 95;
|
|
100
100
|
--component-button-secondary-xs-icon-size: 1.125rem;
|
|
101
101
|
--component-button-secondary-xs-icon-gap: 0.25rem;
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
--component-button-tertiary-xs-padding-with-icon-icon-left-left: 0.25rem;
|
|
158
158
|
--component-button-tertiary-xs-typography-font: normal 700 0.75rem/1
|
|
159
159
|
'Open Sans';
|
|
160
|
-
--component-button-tertiary-xs-typography-letter-spacing:
|
|
160
|
+
--component-button-tertiary-xs-typography-letter-spacing: 0;
|
|
161
161
|
--component-button-tertiary-xs-typography-font-width: 95;
|
|
162
162
|
--component-button-tertiary-xs-icon-size: 1.125rem;
|
|
163
163
|
--component-button-tertiary-xs-icon-gap: 0.25rem;
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
--component-checkbox-input-shared-disabled-indicator-selected-background-color: #dcdcdc;
|
|
40
40
|
--component-checkbox-input-sm-typography-font: normal 460 0.875rem/1.3
|
|
41
41
|
'Open Sans';
|
|
42
|
-
--component-checkbox-input-sm-typography-letter-spacing:
|
|
42
|
+
--component-checkbox-input-sm-typography-letter-spacing: 0;
|
|
43
43
|
--component-checkbox-input-sm-typography-font-width: 95;
|
|
44
44
|
--component-checkbox-input-sm-indicator-size: 1.25rem;
|
|
45
45
|
--component-checkbox-input-md-typography-font: normal 460 1rem/1.3 'Open Sans';
|
|
46
|
-
--component-checkbox-input-md-typography-letter-spacing:
|
|
46
|
+
--component-checkbox-input-md-typography-letter-spacing: 0;
|
|
47
47
|
--component-checkbox-input-md-typography-font-width: 95;
|
|
48
48
|
--component-checkbox-input-md-indicator-size: 1.5rem;
|
|
49
49
|
--component-checkbox-group-shared-display: flex;
|
|
@@ -12,6 +12,6 @@
|
|
|
12
12
|
--component-favicon-user-select: none;
|
|
13
13
|
--component-favicon-typography-font: normal 700 1.25rem/1.15
|
|
14
14
|
'GH Guardian Headline';
|
|
15
|
-
--component-favicon-typography-letter-spacing:
|
|
15
|
+
--component-favicon-typography-letter-spacing: 0;
|
|
16
16
|
--component-favicon-typography-font-width: 100;
|
|
17
17
|
}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
--component-form-input-shared-description-color: #545454;
|
|
13
13
|
--component-form-input-shared-description-typography-font: normal 460
|
|
14
14
|
0.875rem/1.3 'Open Sans';
|
|
15
|
-
--component-form-input-shared-description-typography-letter-spacing:
|
|
15
|
+
--component-form-input-shared-description-typography-letter-spacing: 0;
|
|
16
16
|
--component-form-input-shared-description-typography-font-width: 95;
|
|
17
17
|
--component-form-input-shared-description-disabled-color: #999999;
|
|
18
18
|
--component-form-input-sm-label-typography-font: normal 700 0.875rem/1.15
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
--component-inline-message-shared-icon-align-self: flex-start;
|
|
11
11
|
--component-inline-message-shared-typography-font: normal 460 0.875rem/1.3
|
|
12
12
|
'Open Sans';
|
|
13
|
-
--component-inline-message-shared-typography-letter-spacing:
|
|
13
|
+
--component-inline-message-shared-typography-letter-spacing: 0;
|
|
14
14
|
--component-inline-message-shared-typography-font-width: 95;
|
|
15
15
|
--component-inline-message-error-color: #8c2113;
|
|
16
16
|
--component-inline-message-success-color: #326528;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
-
--component-link-shared-focus-outline:
|
|
6
|
+
--component-link-shared-focus-outline: 0.0625rem solid #0072a9;
|
|
7
7
|
--component-link-shared-hover-color: #00344e;
|
|
8
8
|
--component-link-shared-hover-cursor: pointer;
|
|
9
9
|
--component-link-shared-enabled-color: #00496c;
|
|
@@ -45,13 +45,13 @@
|
|
|
45
45
|
--component-menu-menu-item-shared-label-color: #000000;
|
|
46
46
|
--component-menu-menu-item-shared-label-typography-font: normal 460 1rem/1.3
|
|
47
47
|
'Open Sans';
|
|
48
|
-
--component-menu-menu-item-shared-label-typography-letter-spacing:
|
|
48
|
+
--component-menu-menu-item-shared-label-typography-letter-spacing: 0;
|
|
49
49
|
--component-menu-menu-item-shared-label-typography-font-width: 95;
|
|
50
50
|
--component-menu-menu-item-shared-description-grid-area: description;
|
|
51
51
|
--component-menu-menu-item-shared-description-color: #545454;
|
|
52
52
|
--component-menu-menu-item-shared-description-typography-font: normal 460
|
|
53
53
|
0.875rem/1.3 'Open Sans';
|
|
54
|
-
--component-menu-menu-item-shared-description-typography-letter-spacing:
|
|
54
|
+
--component-menu-menu-item-shared-description-typography-letter-spacing: 0;
|
|
55
55
|
--component-menu-menu-item-shared-description-typography-font-width: 95;
|
|
56
56
|
--component-menu-menu-item-shared-aside-grid-area: aside;
|
|
57
57
|
--component-menu-menu-item-shared-aside-justify-self: end;
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
--component-menu-menu-item-shared-aside-color: #000000;
|
|
60
60
|
--component-menu-menu-item-shared-aside-typography-font: normal 460 1rem/1.3
|
|
61
61
|
'Open Sans';
|
|
62
|
-
--component-menu-menu-item-shared-aside-typography-letter-spacing:
|
|
62
|
+
--component-menu-menu-item-shared-aside-typography-letter-spacing: 0;
|
|
63
63
|
--component-menu-menu-item-shared-aside-typography-font-width: 95;
|
|
64
64
|
--component-menu-menu-item-shared-last-child-border-bottom: none;
|
|
65
65
|
--component-menu-menu-item-shared-hover-background-color: #f6f6f6;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
--component-radio-group-shared-indicator-position: relative;
|
|
16
16
|
--component-radio-group-shared-indicator-after-position: absolute;
|
|
17
17
|
--component-radio-group-shared-indicator-after-border-radius: inherit;
|
|
18
|
-
--component-radio-group-shared-indicator-after-inset:
|
|
18
|
+
--component-radio-group-shared-indicator-after-inset: 0;
|
|
19
19
|
--component-radio-group-shared-indicator-after-scale: 0;
|
|
20
20
|
--component-radio-group-shared-indicator-border-radius: 50%;
|
|
21
21
|
--component-radio-group-shared-indicator-border: 0.0625rem solid #545454;
|
|
@@ -39,13 +39,13 @@
|
|
|
39
39
|
--component-radio-group-sm-gap: 1rem;
|
|
40
40
|
--component-radio-group-sm-typography-font: normal 460 0.875rem/1.3
|
|
41
41
|
'Open Sans';
|
|
42
|
-
--component-radio-group-sm-typography-letter-spacing:
|
|
42
|
+
--component-radio-group-sm-typography-letter-spacing: 0;
|
|
43
43
|
--component-radio-group-sm-typography-font-width: 95;
|
|
44
44
|
--component-radio-group-sm-indicator-width: 1.25rem;
|
|
45
45
|
--component-radio-group-sm-indicator-height: 1.25rem;
|
|
46
46
|
--component-radio-group-md-gap: 1.25rem;
|
|
47
47
|
--component-radio-group-md-typography-font: normal 460 1rem/1.3 'Open Sans';
|
|
48
|
-
--component-radio-group-md-typography-letter-spacing:
|
|
48
|
+
--component-radio-group-md-typography-letter-spacing: 0;
|
|
49
49
|
--component-radio-group-md-typography-font-width: 95;
|
|
50
50
|
--component-radio-group-md-indicator-width: 1.5rem;
|
|
51
51
|
--component-radio-group-md-indicator-height: 1.5rem;
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
--component-select-shared-button-color: #545454;
|
|
21
21
|
--component-select-shared-button-typography-font: normal 460 1rem/1.3
|
|
22
22
|
'Open Sans';
|
|
23
|
-
--component-select-shared-button-typography-letter-spacing:
|
|
23
|
+
--component-select-shared-button-typography-letter-spacing: 0;
|
|
24
24
|
--component-select-shared-button-typography-font-width: 95;
|
|
25
25
|
--component-select-shared-button-focused-outline: 0.125rem solid #0072a9;
|
|
26
26
|
--component-select-shared-button-focused-outline-offset: 0.125rem;
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
--component-select-shared-option-focused-background-color: inherit;
|
|
39
39
|
--component-select-shared-list-box-typography-font: normal 460 1rem/1.3
|
|
40
40
|
'Open Sans';
|
|
41
|
-
--component-select-shared-list-box-typography-letter-spacing:
|
|
41
|
+
--component-select-shared-list-box-typography-letter-spacing: 0;
|
|
42
42
|
--component-select-shared-list-box-typography-font-width: 95;
|
|
43
43
|
--component-select-shared-list-box-border: 0.0625rem solid #cccccc;
|
|
44
44
|
--component-select-shared-list-box-background-color: #ffffff;
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
--component-tag-table-row-first-row-background-hover-color: #8ec183;
|
|
26
26
|
--component-tag-table-add-button-color: #ffffff;
|
|
27
27
|
--component-tag-table-add-button-padding-x: 10px;
|
|
28
|
-
--component-tag-table-add-button-padding-y:
|
|
28
|
+
--component-tag-table-add-button-padding-y: 0;
|
|
29
29
|
--component-tag-table-add-button-background-color: #8d8d8d;
|
|
30
30
|
--component-tag-table-add-button-background-hover-color: #545454;
|
|
31
31
|
--component-tag-table-add-button-font-weight: 400;
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
--component-text-area-shared-focused-outline: 0.125rem auto #0072a9;
|
|
23
23
|
--component-text-area-shared-error-border: 0.0625rem solid #b42a19;
|
|
24
24
|
--component-text-area-sm-typography-font: normal 460 0.875rem/1.3 'Open Sans';
|
|
25
|
-
--component-text-area-sm-typography-letter-spacing:
|
|
25
|
+
--component-text-area-sm-typography-letter-spacing: 0;
|
|
26
26
|
--component-text-area-sm-typography-font-width: 95;
|
|
27
27
|
--component-text-area-md-typography-font: normal 460 1rem/1.3 'Open Sans';
|
|
28
|
-
--component-text-area-md-typography-letter-spacing:
|
|
28
|
+
--component-text-area-md-typography-letter-spacing: 0;
|
|
29
29
|
--component-text-area-md-typography-font-width: 95;
|
|
30
30
|
}
|
|
@@ -22,10 +22,10 @@
|
|
|
22
22
|
--component-text-input-shared-error-border: 0.0625rem solid #b42a19;
|
|
23
23
|
--component-text-input-sm-height: 2rem;
|
|
24
24
|
--component-text-input-sm-typography-font: normal 460 0.875rem/1.3 'Open Sans';
|
|
25
|
-
--component-text-input-sm-typography-letter-spacing:
|
|
25
|
+
--component-text-input-sm-typography-letter-spacing: 0;
|
|
26
26
|
--component-text-input-sm-typography-font-width: 95;
|
|
27
27
|
--component-text-input-md-height: 2.5rem;
|
|
28
28
|
--component-text-input-md-typography-font: normal 460 1rem/1.3 'Open Sans';
|
|
29
|
-
--component-text-input-md-typography-letter-spacing:
|
|
29
|
+
--component-text-input-md-typography-letter-spacing: 0;
|
|
30
30
|
--component-text-input-md-typography-font-width: 95;
|
|
31
31
|
}
|
|
@@ -9,17 +9,17 @@
|
|
|
9
9
|
--component-user-menu-container-padding-x: 0.25rem;
|
|
10
10
|
--component-user-menu-heading-font-weight: 700;
|
|
11
11
|
--component-user-menu-heading-font-size: 1.125rem;
|
|
12
|
-
--component-user-menu-heading-padding-top:
|
|
13
|
-
--component-user-menu-heading-padding-right:
|
|
14
|
-
--component-user-menu-heading-padding-bottom:
|
|
15
|
-
--component-user-menu-heading-padding-left:
|
|
12
|
+
--component-user-menu-heading-padding-top: 0;
|
|
13
|
+
--component-user-menu-heading-padding-right: 0;
|
|
14
|
+
--component-user-menu-heading-padding-bottom: 0;
|
|
15
|
+
--component-user-menu-heading-padding-left: 0;
|
|
16
16
|
--component-user-menu-heading-text-align: left;
|
|
17
17
|
--component-user-menu-label-font-weight: 700;
|
|
18
18
|
--component-user-menu-label-font-size: 0.875rem;
|
|
19
19
|
--component-user-menu-label-padding-top: 15px;
|
|
20
|
-
--component-user-menu-label-padding-right:
|
|
20
|
+
--component-user-menu-label-padding-right: 0;
|
|
21
21
|
--component-user-menu-label-padding-bottom: 0.375rem;
|
|
22
|
-
--component-user-menu-label-padding-left:
|
|
22
|
+
--component-user-menu-label-padding-left: 0;
|
|
23
23
|
--component-user-menu-label-text-align: left;
|
|
24
24
|
--component-user-menu-toggle-button-base-background-color: #ededed;
|
|
25
25
|
--component-user-menu-toggle-button-disabled-background-color: #dcdcdc;
|
|
@@ -3,16 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
-
--semantic-breakpoints-sm
|
|
7
|
-
--semantic-breakpoints-
|
|
8
|
-
--semantic-breakpoints-
|
|
9
|
-
--semantic-breakpoints-md-max: 1055px;
|
|
10
|
-
--semantic-breakpoints-lg-min: 1056px;
|
|
11
|
-
--semantic-breakpoints-lg-max: 1311px;
|
|
12
|
-
--semantic-breakpoints-xl-min: 1312px;
|
|
13
|
-
--semantic-breakpoints-xl-max: 1583px;
|
|
14
|
-
--semantic-breakpoints-max-min: 1584px;
|
|
15
|
-
--semantic-breakpoints-max-max: 1783px;
|
|
16
|
-
--semantic-breakpoints-maxplus-min: 1784px;
|
|
17
|
-
--semantic-breakpoints-maxplus-max: initial;
|
|
6
|
+
--semantic-breakpoints-sm: 0;
|
|
7
|
+
--semantic-breakpoints-md: 830px;
|
|
8
|
+
--semantic-breakpoints-lg: 1056px;
|
|
18
9
|
}
|
|
@@ -5,22 +5,22 @@
|
|
|
5
5
|
:root {
|
|
6
6
|
--semantic-typography-title-sm-font: normal 700 1.125rem/1.15
|
|
7
7
|
'GH Guardian Headline';
|
|
8
|
-
--semantic-typography-title-sm-letter-spacing:
|
|
8
|
+
--semantic-typography-title-sm-letter-spacing: 0;
|
|
9
9
|
--semantic-typography-title-sm-font-width: 100;
|
|
10
10
|
--semantic-typography-title-md-font: normal 700 1.25rem/1.15
|
|
11
11
|
'GH Guardian Headline';
|
|
12
|
-
--semantic-typography-title-md-letter-spacing:
|
|
12
|
+
--semantic-typography-title-md-letter-spacing: 0;
|
|
13
13
|
--semantic-typography-title-md-font-width: 100;
|
|
14
14
|
--semantic-typography-title-lg-font: normal 700 1.5rem/1.15
|
|
15
15
|
'GH Guardian Headline';
|
|
16
|
-
--semantic-typography-title-lg-letter-spacing:
|
|
16
|
+
--semantic-typography-title-lg-letter-spacing: 0;
|
|
17
17
|
--semantic-typography-title-lg-font-width: 100;
|
|
18
18
|
--semantic-typography-title-xl-font: normal 700 2rem/1.15
|
|
19
19
|
'GH Guardian Headline';
|
|
20
|
-
--semantic-typography-title-xl-letter-spacing:
|
|
20
|
+
--semantic-typography-title-xl-letter-spacing: 0;
|
|
21
21
|
--semantic-typography-title-xl-font-width: 100;
|
|
22
22
|
--semantic-typography-heading-xs-font: normal 700 0.75rem/1.15 'Open Sans';
|
|
23
|
-
--semantic-typography-heading-xs-letter-spacing:
|
|
23
|
+
--semantic-typography-heading-xs-letter-spacing: 0;
|
|
24
24
|
--semantic-typography-heading-xs-font-width: 95;
|
|
25
25
|
--semantic-typography-heading-sm-font: normal 700 0.875rem/1.15 'Open Sans';
|
|
26
26
|
--semantic-typography-heading-sm-letter-spacing: -0.0125rem;
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
--semantic-typography-heading-2xl-font-width: 95;
|
|
40
40
|
--semantic-typography-heading-compact-xs-font: normal 700 0.75rem/1.15
|
|
41
41
|
'Open Sans';
|
|
42
|
-
--semantic-typography-heading-compact-xs-letter-spacing:
|
|
42
|
+
--semantic-typography-heading-compact-xs-letter-spacing: 0;
|
|
43
43
|
--semantic-typography-heading-compact-xs-font-width: 88;
|
|
44
44
|
--semantic-typography-heading-compact-sm-font: normal 700 0.875rem/1.15
|
|
45
45
|
'Open Sans';
|
|
46
|
-
--semantic-typography-heading-compact-sm-letter-spacing:
|
|
46
|
+
--semantic-typography-heading-compact-sm-letter-spacing: 0;
|
|
47
47
|
--semantic-typography-heading-compact-sm-font-width: 88;
|
|
48
48
|
--semantic-typography-heading-compact-md-font: normal 700 1rem/1.15
|
|
49
49
|
'Open Sans';
|
|
@@ -62,171 +62,171 @@
|
|
|
62
62
|
--semantic-typography-heading-compact-2xl-letter-spacing: -0.03125rem;
|
|
63
63
|
--semantic-typography-heading-compact-2xl-font-width: 88;
|
|
64
64
|
--semantic-typography-body-xs-font: normal 460 0.75rem/1.3 'Open Sans';
|
|
65
|
-
--semantic-typography-body-xs-letter-spacing:
|
|
65
|
+
--semantic-typography-body-xs-letter-spacing: 0;
|
|
66
66
|
--semantic-typography-body-xs-font-width: 95;
|
|
67
67
|
--semantic-typography-body-sm-font: normal 460 0.875rem/1.3 'Open Sans';
|
|
68
|
-
--semantic-typography-body-sm-letter-spacing:
|
|
68
|
+
--semantic-typography-body-sm-letter-spacing: 0;
|
|
69
69
|
--semantic-typography-body-sm-font-width: 95;
|
|
70
70
|
--semantic-typography-body-md-font: normal 460 1rem/1.3 'Open Sans';
|
|
71
|
-
--semantic-typography-body-md-letter-spacing:
|
|
71
|
+
--semantic-typography-body-md-letter-spacing: 0;
|
|
72
72
|
--semantic-typography-body-md-font-width: 95;
|
|
73
73
|
--semantic-typography-body-lg-font: normal 460 1.125rem/1.3 'Open Sans';
|
|
74
|
-
--semantic-typography-body-lg-letter-spacing:
|
|
74
|
+
--semantic-typography-body-lg-letter-spacing: 0;
|
|
75
75
|
--semantic-typography-body-lg-font-width: 95;
|
|
76
76
|
--semantic-typography-body-xl-font: normal 460 1.25rem/1.3 'Open Sans';
|
|
77
|
-
--semantic-typography-body-xl-letter-spacing:
|
|
77
|
+
--semantic-typography-body-xl-letter-spacing: 0;
|
|
78
78
|
--semantic-typography-body-xl-font-width: 95;
|
|
79
79
|
--semantic-typography-body-bold-xs-font: normal 700 0.75rem/1.3 'Open Sans';
|
|
80
|
-
--semantic-typography-body-bold-xs-letter-spacing:
|
|
80
|
+
--semantic-typography-body-bold-xs-letter-spacing: 0;
|
|
81
81
|
--semantic-typography-body-bold-xs-font-width: 95;
|
|
82
82
|
--semantic-typography-body-bold-sm-font: normal 700 0.875rem/1.3 'Open Sans';
|
|
83
|
-
--semantic-typography-body-bold-sm-letter-spacing:
|
|
83
|
+
--semantic-typography-body-bold-sm-letter-spacing: 0;
|
|
84
84
|
--semantic-typography-body-bold-sm-font-width: 95;
|
|
85
85
|
--semantic-typography-body-bold-md-font: normal 700 1rem/1.3 'Open Sans';
|
|
86
|
-
--semantic-typography-body-bold-md-letter-spacing:
|
|
86
|
+
--semantic-typography-body-bold-md-letter-spacing: 0;
|
|
87
87
|
--semantic-typography-body-bold-md-font-width: 95;
|
|
88
88
|
--semantic-typography-body-bold-lg-font: normal 700 1.125rem/1.3 'Open Sans';
|
|
89
|
-
--semantic-typography-body-bold-lg-letter-spacing:
|
|
89
|
+
--semantic-typography-body-bold-lg-letter-spacing: 0;
|
|
90
90
|
--semantic-typography-body-bold-lg-font-width: 95;
|
|
91
91
|
--semantic-typography-body-bold-xl-font: normal 700 1.25rem/1.3 'Open Sans';
|
|
92
|
-
--semantic-typography-body-bold-xl-letter-spacing:
|
|
92
|
+
--semantic-typography-body-bold-xl-letter-spacing: 0;
|
|
93
93
|
--semantic-typography-body-bold-xl-font-width: 95;
|
|
94
94
|
--semantic-typography-body-italic-xs-font: italic 460 0.75rem/1.3 'Open Sans';
|
|
95
|
-
--semantic-typography-body-italic-xs-letter-spacing:
|
|
95
|
+
--semantic-typography-body-italic-xs-letter-spacing: 0;
|
|
96
96
|
--semantic-typography-body-italic-xs-font-width: 95;
|
|
97
97
|
--semantic-typography-body-italic-sm-font: italic 460 0.875rem/1.3 'Open Sans';
|
|
98
|
-
--semantic-typography-body-italic-sm-letter-spacing:
|
|
98
|
+
--semantic-typography-body-italic-sm-letter-spacing: 0;
|
|
99
99
|
--semantic-typography-body-italic-sm-font-width: 95;
|
|
100
100
|
--semantic-typography-body-italic-md-font: italic 460 1rem/1.3 'Open Sans';
|
|
101
|
-
--semantic-typography-body-italic-md-letter-spacing:
|
|
101
|
+
--semantic-typography-body-italic-md-letter-spacing: 0;
|
|
102
102
|
--semantic-typography-body-italic-md-font-width: 95;
|
|
103
103
|
--semantic-typography-body-italic-lg-font: italic 460 1.125rem/1.3 'Open Sans';
|
|
104
|
-
--semantic-typography-body-italic-lg-letter-spacing:
|
|
104
|
+
--semantic-typography-body-italic-lg-letter-spacing: 0;
|
|
105
105
|
--semantic-typography-body-italic-lg-font-width: 95;
|
|
106
106
|
--semantic-typography-body-italic-xl-font: italic 460 1.25rem/1.3 'Open Sans';
|
|
107
|
-
--semantic-typography-body-italic-xl-letter-spacing:
|
|
107
|
+
--semantic-typography-body-italic-xl-letter-spacing: 0;
|
|
108
108
|
--semantic-typography-body-italic-xl-font-width: 95;
|
|
109
109
|
--semantic-typography-body-italic-bold-xs-font: italic 700 0.75rem/1.3
|
|
110
110
|
'Open Sans';
|
|
111
|
-
--semantic-typography-body-italic-bold-xs-letter-spacing:
|
|
111
|
+
--semantic-typography-body-italic-bold-xs-letter-spacing: 0;
|
|
112
112
|
--semantic-typography-body-italic-bold-xs-font-width: 95;
|
|
113
113
|
--semantic-typography-body-italic-bold-sm-font: italic 700 0.875rem/1.3
|
|
114
114
|
'Open Sans';
|
|
115
|
-
--semantic-typography-body-italic-bold-sm-letter-spacing:
|
|
115
|
+
--semantic-typography-body-italic-bold-sm-letter-spacing: 0;
|
|
116
116
|
--semantic-typography-body-italic-bold-sm-font-width: 95;
|
|
117
117
|
--semantic-typography-body-italic-bold-md-font: italic 700 1rem/1.3
|
|
118
118
|
'Open Sans';
|
|
119
|
-
--semantic-typography-body-italic-bold-md-letter-spacing:
|
|
119
|
+
--semantic-typography-body-italic-bold-md-letter-spacing: 0;
|
|
120
120
|
--semantic-typography-body-italic-bold-md-font-width: 95;
|
|
121
121
|
--semantic-typography-body-italic-bold-lg-font: italic 700 1.125rem/1.3
|
|
122
122
|
'Open Sans';
|
|
123
|
-
--semantic-typography-body-italic-bold-lg-letter-spacing:
|
|
123
|
+
--semantic-typography-body-italic-bold-lg-letter-spacing: 0;
|
|
124
124
|
--semantic-typography-body-italic-bold-lg-font-width: 95;
|
|
125
125
|
--semantic-typography-body-italic-bold-xl-font: italic 700 1.25rem/1.3
|
|
126
126
|
'Open Sans';
|
|
127
|
-
--semantic-typography-body-italic-bold-xl-letter-spacing:
|
|
127
|
+
--semantic-typography-body-italic-bold-xl-letter-spacing: 0;
|
|
128
128
|
--semantic-typography-body-italic-bold-xl-font-width: 95;
|
|
129
129
|
--semantic-typography-body-compact-xs-font: normal 460 0.75rem/1.3 'Open Sans';
|
|
130
|
-
--semantic-typography-body-compact-xs-letter-spacing:
|
|
130
|
+
--semantic-typography-body-compact-xs-letter-spacing: 0;
|
|
131
131
|
--semantic-typography-body-compact-xs-font-width: 88;
|
|
132
132
|
--semantic-typography-body-compact-sm-font: normal 460 0.875rem/1.3
|
|
133
133
|
'Open Sans';
|
|
134
|
-
--semantic-typography-body-compact-sm-letter-spacing:
|
|
134
|
+
--semantic-typography-body-compact-sm-letter-spacing: 0;
|
|
135
135
|
--semantic-typography-body-compact-sm-font-width: 88;
|
|
136
136
|
--semantic-typography-body-compact-md-font: normal 460 1rem/1.3 'Open Sans';
|
|
137
|
-
--semantic-typography-body-compact-md-letter-spacing:
|
|
137
|
+
--semantic-typography-body-compact-md-letter-spacing: 0;
|
|
138
138
|
--semantic-typography-body-compact-md-font-width: 88;
|
|
139
139
|
--semantic-typography-body-compact-lg-font: normal 460 1.125rem/1.3
|
|
140
140
|
'Open Sans';
|
|
141
|
-
--semantic-typography-body-compact-lg-letter-spacing:
|
|
141
|
+
--semantic-typography-body-compact-lg-letter-spacing: 0;
|
|
142
142
|
--semantic-typography-body-compact-lg-font-width: 88;
|
|
143
143
|
--semantic-typography-body-compact-xl-font: normal 460 1.25rem/1.3 'Open Sans';
|
|
144
|
-
--semantic-typography-body-compact-xl-letter-spacing:
|
|
144
|
+
--semantic-typography-body-compact-xl-letter-spacing: 0;
|
|
145
145
|
--semantic-typography-body-compact-xl-font-width: 88;
|
|
146
146
|
--semantic-typography-body-compact-bold-xs-font: normal 700 0.75rem/1.3
|
|
147
147
|
'Open Sans';
|
|
148
|
-
--semantic-typography-body-compact-bold-xs-letter-spacing:
|
|
148
|
+
--semantic-typography-body-compact-bold-xs-letter-spacing: 0;
|
|
149
149
|
--semantic-typography-body-compact-bold-xs-font-width: 88;
|
|
150
150
|
--semantic-typography-body-compact-bold-sm-font: normal 700 0.875rem/1.3
|
|
151
151
|
'Open Sans';
|
|
152
|
-
--semantic-typography-body-compact-bold-sm-letter-spacing:
|
|
152
|
+
--semantic-typography-body-compact-bold-sm-letter-spacing: 0;
|
|
153
153
|
--semantic-typography-body-compact-bold-sm-font-width: 88;
|
|
154
154
|
--semantic-typography-body-compact-bold-md-font: normal 700 1rem/1.3
|
|
155
155
|
'Open Sans';
|
|
156
|
-
--semantic-typography-body-compact-bold-md-letter-spacing:
|
|
156
|
+
--semantic-typography-body-compact-bold-md-letter-spacing: 0;
|
|
157
157
|
--semantic-typography-body-compact-bold-md-font-width: 88;
|
|
158
158
|
--semantic-typography-body-compact-bold-lg-font: normal 700 1.125rem/1.3
|
|
159
159
|
'Open Sans';
|
|
160
|
-
--semantic-typography-body-compact-bold-lg-letter-spacing:
|
|
160
|
+
--semantic-typography-body-compact-bold-lg-letter-spacing: 0;
|
|
161
161
|
--semantic-typography-body-compact-bold-lg-font-width: 88;
|
|
162
162
|
--semantic-typography-body-compact-bold-xl-font: normal 700 1.25rem/1.3
|
|
163
163
|
'Open Sans';
|
|
164
|
-
--semantic-typography-body-compact-bold-xl-letter-spacing:
|
|
164
|
+
--semantic-typography-body-compact-bold-xl-letter-spacing: 0;
|
|
165
165
|
--semantic-typography-body-compact-bold-xl-font-width: 88;
|
|
166
166
|
--semantic-typography-body-compact-italic-xs-font: italic 460 0.75rem/1.3
|
|
167
167
|
'Open Sans';
|
|
168
|
-
--semantic-typography-body-compact-italic-xs-letter-spacing:
|
|
168
|
+
--semantic-typography-body-compact-italic-xs-letter-spacing: 0;
|
|
169
169
|
--semantic-typography-body-compact-italic-xs-font-width: 88;
|
|
170
170
|
--semantic-typography-body-compact-italic-sm-font: italic 460 0.875rem/1.3
|
|
171
171
|
'Open Sans';
|
|
172
|
-
--semantic-typography-body-compact-italic-sm-letter-spacing:
|
|
172
|
+
--semantic-typography-body-compact-italic-sm-letter-spacing: 0;
|
|
173
173
|
--semantic-typography-body-compact-italic-sm-font-width: 88;
|
|
174
174
|
--semantic-typography-body-compact-italic-md-font: italic 460 1rem/1.3
|
|
175
175
|
'Open Sans';
|
|
176
|
-
--semantic-typography-body-compact-italic-md-letter-spacing:
|
|
176
|
+
--semantic-typography-body-compact-italic-md-letter-spacing: 0;
|
|
177
177
|
--semantic-typography-body-compact-italic-md-font-width: 88;
|
|
178
178
|
--semantic-typography-body-compact-italic-lg-font: italic 460 1.125rem/1.3
|
|
179
179
|
'Open Sans';
|
|
180
|
-
--semantic-typography-body-compact-italic-lg-letter-spacing:
|
|
180
|
+
--semantic-typography-body-compact-italic-lg-letter-spacing: 0;
|
|
181
181
|
--semantic-typography-body-compact-italic-lg-font-width: 88;
|
|
182
182
|
--semantic-typography-body-compact-italic-xl-font: italic 460 1.25rem/1.3
|
|
183
183
|
'Open Sans';
|
|
184
|
-
--semantic-typography-body-compact-italic-xl-letter-spacing:
|
|
184
|
+
--semantic-typography-body-compact-italic-xl-letter-spacing: 0;
|
|
185
185
|
--semantic-typography-body-compact-italic-xl-font-width: 88;
|
|
186
186
|
--semantic-typography-body-compact-italic-bold-xs-font: italic 700 0.75rem/1.3
|
|
187
187
|
'Open Sans';
|
|
188
|
-
--semantic-typography-body-compact-italic-bold-xs-letter-spacing:
|
|
188
|
+
--semantic-typography-body-compact-italic-bold-xs-letter-spacing: 0;
|
|
189
189
|
--semantic-typography-body-compact-italic-bold-xs-font-width: 88;
|
|
190
190
|
--semantic-typography-body-compact-italic-bold-sm-font: italic 700
|
|
191
191
|
0.875rem/1.3 'Open Sans';
|
|
192
|
-
--semantic-typography-body-compact-italic-bold-sm-letter-spacing:
|
|
192
|
+
--semantic-typography-body-compact-italic-bold-sm-letter-spacing: 0;
|
|
193
193
|
--semantic-typography-body-compact-italic-bold-sm-font-width: 88;
|
|
194
194
|
--semantic-typography-body-compact-italic-bold-md-font: italic 700 1rem/1.3
|
|
195
195
|
'Open Sans';
|
|
196
|
-
--semantic-typography-body-compact-italic-bold-md-letter-spacing:
|
|
196
|
+
--semantic-typography-body-compact-italic-bold-md-letter-spacing: 0;
|
|
197
197
|
--semantic-typography-body-compact-italic-bold-md-font-width: 88;
|
|
198
198
|
--semantic-typography-body-compact-italic-bold-lg-font: italic 700
|
|
199
199
|
1.125rem/1.3 'Open Sans';
|
|
200
|
-
--semantic-typography-body-compact-italic-bold-lg-letter-spacing:
|
|
200
|
+
--semantic-typography-body-compact-italic-bold-lg-letter-spacing: 0;
|
|
201
201
|
--semantic-typography-body-compact-italic-bold-lg-font-width: 88;
|
|
202
202
|
--semantic-typography-body-compact-italic-bold-xl-font: italic 700 1.25rem/1.3
|
|
203
203
|
'Open Sans';
|
|
204
|
-
--semantic-typography-body-compact-italic-bold-xl-letter-spacing:
|
|
204
|
+
--semantic-typography-body-compact-italic-bold-xl-letter-spacing: 0;
|
|
205
205
|
--semantic-typography-body-compact-italic-bold-xl-font-width: 88;
|
|
206
206
|
--semantic-typography-meta-md-font: normal 460 0.75rem/1.3 'Open Sans';
|
|
207
|
-
--semantic-typography-meta-md-letter-spacing:
|
|
207
|
+
--semantic-typography-meta-md-letter-spacing: 0;
|
|
208
208
|
--semantic-typography-meta-md-font-width: 95;
|
|
209
209
|
--semantic-typography-meta-compact-md-font: normal 460 0.75rem/1.3 'Open Sans';
|
|
210
|
-
--semantic-typography-meta-compact-md-letter-spacing:
|
|
210
|
+
--semantic-typography-meta-compact-md-letter-spacing: 0;
|
|
211
211
|
--semantic-typography-meta-compact-md-font-width: 88;
|
|
212
212
|
--semantic-typography-article-body-md-font: normal 400 1rem/1.4
|
|
213
213
|
GuardianTextEgyptian;
|
|
214
|
-
--semantic-typography-article-body-md-letter-spacing:
|
|
214
|
+
--semantic-typography-article-body-md-letter-spacing: 0;
|
|
215
215
|
--semantic-typography-article-body-md-font-width: 100;
|
|
216
216
|
--semantic-typography-article-body-bold-md-font: normal 700 1rem/1.4
|
|
217
217
|
GuardianTextEgyptian;
|
|
218
|
-
--semantic-typography-article-body-bold-md-letter-spacing:
|
|
218
|
+
--semantic-typography-article-body-bold-md-letter-spacing: 0;
|
|
219
219
|
--semantic-typography-article-body-bold-md-font-width: 100;
|
|
220
220
|
--semantic-typography-article-body-italic-md-font: italic 400 1rem/1.4
|
|
221
221
|
GuardianTextEgyptian;
|
|
222
|
-
--semantic-typography-article-body-italic-md-letter-spacing:
|
|
222
|
+
--semantic-typography-article-body-italic-md-letter-spacing: 0;
|
|
223
223
|
--semantic-typography-article-body-italic-md-font-width: 100;
|
|
224
224
|
--semantic-typography-article-body-bold-italic-md-font: italic 700 1rem/1.4
|
|
225
225
|
GuardianTextEgyptian;
|
|
226
|
-
--semantic-typography-article-body-bold-italic-md-letter-spacing:
|
|
226
|
+
--semantic-typography-article-body-bold-italic-md-letter-spacing: 0;
|
|
227
227
|
--semantic-typography-article-body-bold-italic-md-font-width: 100;
|
|
228
228
|
--semantic-typography-interactive-xs-font: normal 700 0.75rem/1 'Open Sans';
|
|
229
|
-
--semantic-typography-interactive-xs-letter-spacing:
|
|
229
|
+
--semantic-typography-interactive-xs-letter-spacing: 0;
|
|
230
230
|
--semantic-typography-interactive-xs-font-width: 95;
|
|
231
231
|
--semantic-typography-interactive-sm-font: normal 700 0.875rem/1 'Open Sans';
|
|
232
232
|
--semantic-typography-interactive-sm-letter-spacing: -0.0125rem;
|
|
@@ -242,15 +242,15 @@
|
|
|
242
242
|
--semantic-typography-label-form-md-font-width: 95;
|
|
243
243
|
--semantic-typography-label-form-inline-sm-font: normal 460 0.875rem/1.3
|
|
244
244
|
'Open Sans';
|
|
245
|
-
--semantic-typography-label-form-inline-sm-letter-spacing:
|
|
245
|
+
--semantic-typography-label-form-inline-sm-letter-spacing: 0;
|
|
246
246
|
--semantic-typography-label-form-inline-sm-font-width: 95;
|
|
247
247
|
--semantic-typography-label-form-inline-md-font: normal 460 1rem/1.3
|
|
248
248
|
'Open Sans';
|
|
249
|
-
--semantic-typography-label-form-inline-md-letter-spacing:
|
|
249
|
+
--semantic-typography-label-form-inline-md-letter-spacing: 0;
|
|
250
250
|
--semantic-typography-label-form-inline-md-font-width: 95;
|
|
251
251
|
--semantic-typography-label-form-compact-sm-font: normal 700 0.875rem/1.15
|
|
252
252
|
'Open Sans';
|
|
253
|
-
--semantic-typography-label-form-compact-sm-letter-spacing:
|
|
253
|
+
--semantic-typography-label-form-compact-sm-letter-spacing: 0;
|
|
254
254
|
--semantic-typography-label-form-compact-sm-font-width: 88;
|
|
255
255
|
--semantic-typography-label-form-compact-md-font: normal 700 1rem/1.15
|
|
256
256
|
'Open Sans';
|
|
@@ -258,18 +258,18 @@
|
|
|
258
258
|
--semantic-typography-label-form-compact-md-font-width: 88;
|
|
259
259
|
--semantic-typography-label-form-inline-compact-sm-font: normal 460
|
|
260
260
|
0.875rem/1.3 'Open Sans';
|
|
261
|
-
--semantic-typography-label-form-inline-compact-sm-letter-spacing:
|
|
261
|
+
--semantic-typography-label-form-inline-compact-sm-letter-spacing: 0;
|
|
262
262
|
--semantic-typography-label-form-inline-compact-sm-font-width: 88;
|
|
263
263
|
--semantic-typography-label-form-inline-compact-md-font: normal 460 1rem/1.3
|
|
264
264
|
'Open Sans';
|
|
265
|
-
--semantic-typography-label-form-inline-compact-md-letter-spacing:
|
|
265
|
+
--semantic-typography-label-form-inline-compact-md-letter-spacing: 0;
|
|
266
266
|
--semantic-typography-label-form-inline-compact-md-font-width: 88;
|
|
267
267
|
--semantic-typography-help-text-form-md-font: normal 460 0.875rem/1.3
|
|
268
268
|
'Open Sans';
|
|
269
|
-
--semantic-typography-help-text-form-md-letter-spacing:
|
|
269
|
+
--semantic-typography-help-text-form-md-letter-spacing: 0;
|
|
270
270
|
--semantic-typography-help-text-form-md-font-width: 95;
|
|
271
271
|
--semantic-typography-help-text-form-compact-md-font: normal 460 0.875rem/1.3
|
|
272
272
|
'Open Sans';
|
|
273
|
-
--semantic-typography-help-text-form-compact-md-letter-spacing:
|
|
273
|
+
--semantic-typography-help-text-form-compact-md-letter-spacing: 0;
|
|
274
274
|
--semantic-typography-help-text-form-compact-md-font-width: 88;
|
|
275
275
|
}
|
|
@@ -1,30 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const semanticBreakpoints = {
|
|
4
|
-
sm:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
},
|
|
8
|
-
md: {
|
|
9
|
-
min: "672px",
|
|
10
|
-
max: "1055px"
|
|
11
|
-
},
|
|
12
|
-
lg: {
|
|
13
|
-
min: "1056px",
|
|
14
|
-
max: "1311px"
|
|
15
|
-
},
|
|
16
|
-
xl: {
|
|
17
|
-
min: "1312px",
|
|
18
|
-
max: "1583px"
|
|
19
|
-
},
|
|
20
|
-
max: {
|
|
21
|
-
min: "1584px",
|
|
22
|
-
max: "1783px"
|
|
23
|
-
},
|
|
24
|
-
maxplus: {
|
|
25
|
-
min: "1784px",
|
|
26
|
-
max: "initial"
|
|
27
|
-
}
|
|
4
|
+
sm: "0px",
|
|
5
|
+
md: "830px",
|
|
6
|
+
lg: "1056px"
|
|
28
7
|
};
|
|
29
8
|
|
|
30
9
|
exports.semanticBreakpoints = semanticBreakpoints;
|
|
@@ -1,28 +1,7 @@
|
|
|
1
1
|
const semanticBreakpoints = {
|
|
2
|
-
sm:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
},
|
|
6
|
-
md: {
|
|
7
|
-
min: "672px",
|
|
8
|
-
max: "1055px"
|
|
9
|
-
},
|
|
10
|
-
lg: {
|
|
11
|
-
min: "1056px",
|
|
12
|
-
max: "1311px"
|
|
13
|
-
},
|
|
14
|
-
xl: {
|
|
15
|
-
min: "1312px",
|
|
16
|
-
max: "1583px"
|
|
17
|
-
},
|
|
18
|
-
max: {
|
|
19
|
-
min: "1584px",
|
|
20
|
-
max: "1783px"
|
|
21
|
-
},
|
|
22
|
-
maxplus: {
|
|
23
|
-
min: "1784px",
|
|
24
|
-
max: "initial"
|
|
25
|
-
}
|
|
2
|
+
sm: "0px",
|
|
3
|
+
md: "830px",
|
|
4
|
+
lg: "1056px"
|
|
26
5
|
};
|
|
27
6
|
|
|
28
7
|
export { semanticBreakpoints };
|
|
@@ -8,23 +8,23 @@ const minWidthQuery = (px) => `@media (min-width: ${px}px)`;
|
|
|
8
8
|
const maxWidthQuery = (px) => `@media (max-width: ${px - smidgen}px)`;
|
|
9
9
|
const minMaxWidthQuery = (minPx, maxPx) => `@media (min-width: ${minPx}px) and (max-width: ${maxPx - smidgen}px)`;
|
|
10
10
|
const from = Object.fromEntries(
|
|
11
|
-
Object.entries(breakpoints.semanticBreakpoints).map(([name,
|
|
11
|
+
Object.entries(breakpoints.semanticBreakpoints).map(([name, min]) => [
|
|
12
12
|
name,
|
|
13
13
|
minWidthQuery(parseMinPx(min))
|
|
14
14
|
])
|
|
15
15
|
);
|
|
16
16
|
const until = Object.fromEntries(
|
|
17
|
-
Object.entries(breakpoints.semanticBreakpoints).map(([name,
|
|
17
|
+
Object.entries(breakpoints.semanticBreakpoints).map(([name, min]) => [
|
|
18
18
|
name,
|
|
19
19
|
maxWidthQuery(parseMinPx(min))
|
|
20
20
|
])
|
|
21
21
|
);
|
|
22
22
|
const between = Object.fromEntries(
|
|
23
|
-
Object.entries(breakpoints.semanticBreakpoints).map(([fromName,
|
|
23
|
+
Object.entries(breakpoints.semanticBreakpoints).map(([fromName, fromMin]) => [
|
|
24
24
|
fromName,
|
|
25
25
|
{
|
|
26
26
|
and: Object.fromEntries(
|
|
27
|
-
Object.entries(breakpoints.semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName,
|
|
27
|
+
Object.entries(breakpoints.semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, toMin]) => [
|
|
28
28
|
toName,
|
|
29
29
|
minMaxWidthQuery(parseMinPx(fromMin), parseMinPx(toMin))
|
|
30
30
|
])
|
|
@@ -5,18 +5,18 @@ const parseMinPx = (value) => value === "0" ? 0 : parseFloat(value);
|
|
|
5
5
|
const minWidthQuery = (px) => `@media (min-width: ${px}px)`;
|
|
6
6
|
const maxWidthQuery = (px) => `@media (max-width: ${px - smidgen}px)`;
|
|
7
7
|
const minMaxWidthQuery = (minPx, maxPx) => `@media (min-width: ${minPx}px) and (max-width: ${maxPx - smidgen}px)`;
|
|
8
|
-
const from = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name,
|
|
8
|
+
const from = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, min]) => [
|
|
9
9
|
name,
|
|
10
10
|
minWidthQuery(parseMinPx(min))
|
|
11
11
|
]));
|
|
12
|
-
const until = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name,
|
|
12
|
+
const until = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, min]) => [
|
|
13
13
|
name,
|
|
14
14
|
maxWidthQuery(parseMinPx(min))
|
|
15
15
|
]));
|
|
16
|
-
const between = Object.fromEntries(Object.entries(semanticBreakpoints).map(([fromName,
|
|
16
|
+
const between = Object.fromEntries(Object.entries(semanticBreakpoints).map(([fromName, fromMin]) => [
|
|
17
17
|
fromName,
|
|
18
18
|
{
|
|
19
|
-
and: Object.fromEntries(Object.entries(semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName,
|
|
19
|
+
and: Object.fromEntries(Object.entries(semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, toMin]) => [
|
|
20
20
|
toName,
|
|
21
21
|
minMaxWidthQuery(parseMinPx(fromMin), parseMinPx(toMin))
|
|
22
22
|
]))
|
|
@@ -7,8 +7,8 @@ export type PartialTopBarTheme = Prettify<DeepPartial<TopBarTheme>>;
|
|
|
7
7
|
export declare const defaultTopBarTheme: TopBarTheme;
|
|
8
8
|
export declare const topBarStyles: (theme: TopBarTheme) => SerializedStyles;
|
|
9
9
|
export declare const topBarContainerStyles: (theme: TopBarTheme, { collapseBelow, showUntil, }?: {
|
|
10
|
-
collapseBelow?: "sm" | "md" | "lg" |
|
|
11
|
-
showUntil?: "sm" | "md" | "lg" |
|
|
10
|
+
collapseBelow?: "sm" | "md" | "lg" | undefined;
|
|
11
|
+
showUntil?: "sm" | "md" | "lg" | undefined;
|
|
12
12
|
}) => SerializedStyles;
|
|
13
13
|
export declare const topBarSpacerStyles: (theme: TopBarTheme) => SerializedStyles;
|
|
14
14
|
export declare const topBarCollapsedNavMenuButtonStyles: (theme: TopBarTheme, menuOpen?: boolean) => SerializedStyles;
|
|
@@ -2,29 +2,8 @@
|
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*/
|
|
4
4
|
export declare const semanticBreakpoints: {
|
|
5
|
-
sm:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
};
|
|
9
|
-
md: {
|
|
10
|
-
min: string;
|
|
11
|
-
max: string;
|
|
12
|
-
};
|
|
13
|
-
lg: {
|
|
14
|
-
min: string;
|
|
15
|
-
max: string;
|
|
16
|
-
};
|
|
17
|
-
xl: {
|
|
18
|
-
min: string;
|
|
19
|
-
max: string;
|
|
20
|
-
};
|
|
21
|
-
max: {
|
|
22
|
-
min: string;
|
|
23
|
-
max: string;
|
|
24
|
-
};
|
|
25
|
-
maxplus: {
|
|
26
|
-
min: string;
|
|
27
|
-
max: string;
|
|
28
|
-
};
|
|
5
|
+
sm: string;
|
|
6
|
+
md: string;
|
|
7
|
+
lg: string;
|
|
29
8
|
};
|
|
30
9
|
export type SemanticBreakpoints = typeof semanticBreakpoints;
|
|
@@ -12,7 +12,7 @@ export type Breakpoint = keyof typeof semanticBreakpoints;
|
|
|
12
12
|
* }
|
|
13
13
|
* `;
|
|
14
14
|
*/
|
|
15
|
-
export declare const from: Record<"sm" | "md" | "lg"
|
|
15
|
+
export declare const from: Record<"sm" | "md" | "lg", string>;
|
|
16
16
|
/**
|
|
17
17
|
* Returns a `max-width` media query string for everything *below* the given
|
|
18
18
|
* breakpoint (exclusive). Use to apply styles only on screens smaller than
|
|
@@ -26,7 +26,7 @@ export declare const from: Record<"sm" | "md" | "lg" | "xl" | "max" | "maxplus",
|
|
|
26
26
|
* }
|
|
27
27
|
* `;
|
|
28
28
|
*/
|
|
29
|
-
export declare const until: Record<"sm" | "md" | "lg"
|
|
29
|
+
export declare const until: Record<"sm" | "md" | "lg", string>;
|
|
30
30
|
/**
|
|
31
31
|
* Returns a combined `min-width` and `max-width` media query string for
|
|
32
32
|
* the range starting at breakpoint A up to (but not including) breakpoint B.
|
|
@@ -41,21 +41,12 @@ export declare const until: Record<"sm" | "md" | "lg" | "xl" | "max" | "maxplus"
|
|
|
41
41
|
*/
|
|
42
42
|
export declare const between: {
|
|
43
43
|
sm: {
|
|
44
|
-
and: Record<"md" | "lg"
|
|
44
|
+
and: Record<"md" | "lg", string>;
|
|
45
45
|
};
|
|
46
46
|
md: {
|
|
47
|
-
and: Record<"sm" | "lg"
|
|
47
|
+
and: Record<"sm" | "lg", string>;
|
|
48
48
|
};
|
|
49
49
|
lg: {
|
|
50
|
-
and: Record<"sm" | "md"
|
|
51
|
-
};
|
|
52
|
-
xl: {
|
|
53
|
-
and: Record<"sm" | "md" | "lg" | "max" | "maxplus", string>;
|
|
54
|
-
};
|
|
55
|
-
max: {
|
|
56
|
-
and: Record<"sm" | "md" | "lg" | "xl" | "maxplus", string>;
|
|
57
|
-
};
|
|
58
|
-
maxplus: {
|
|
59
|
-
and: Record<"sm" | "md" | "lg" | "xl" | "max", string>;
|
|
50
|
+
and: Record<"sm" | "md", string>;
|
|
60
51
|
};
|
|
61
52
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@guardian/stand",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.35",
|
|
4
4
|
"repository": {
|
|
5
5
|
"url": "https://github.com/guardian/stand"
|
|
6
6
|
},
|
|
@@ -157,6 +157,7 @@
|
|
|
157
157
|
"./base/spacing.css": "./dist/styleD/build/css/base/spacing.css",
|
|
158
158
|
"./base/sizing.css": "./dist/styleD/build/css/base/sizing.css",
|
|
159
159
|
"./base/radius.css": "./dist/styleD/build/css/base/radius.css",
|
|
160
|
+
"./semantic/breakpoints.css": "./dist/styleD/build/css/semantic/breakpoints.css",
|
|
160
161
|
"./semantic/colors.css": "./dist/styleD/build/css/semantic/colors.css",
|
|
161
162
|
"./semantic/typography.css": "./dist/styleD/build/css/semantic/typography.css",
|
|
162
163
|
"./semantic/sizing.css": "./dist/styleD/build/css/semantic/sizing.css",
|