@microsoft/atlas-css 3.20.0 → 3.22.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/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tokens.json +1 -1
- package/dist/tokens.ts +17 -3
- package/package.json +1 -1
- package/src/atomics/background.scss +11 -0
- package/src/atomics/border.scss +4 -0
- package/src/atomics/index.scss +1 -0
- package/src/atomics/typography.scss +4 -0
- package/src/atomics/width.scss +1 -1
- package/src/components/form/input.scss +0 -2
- package/src/components/gradient.scss +90 -0
- package/src/components/hero.scss +140 -0
- package/src/components/index.scss +4 -0
- package/src/components/media.scss +22 -0
- package/src/components/pagination.scss +183 -0
- package/src/components/scroll.scss +15 -0
- package/src/mixins/index.scss +2 -1
- package/src/mixins/layout-gap.scss +7 -0
- package/src/tokens/colors.scss +4 -0
- package/src/tokens/direction.scss +1 -1
- package/src/tokens/layout.scss +4 -0
- package/src/tokens/palette.scss +5 -0
- package/src/tokens/themes.scss +18 -9
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
$font-size-lg: $font-size-6 !default;
|
|
2
|
+
$font-size-sm: $font-size-8 !default;
|
|
3
|
+
|
|
4
|
+
$pagination-color: $text !default;
|
|
5
|
+
$pagination-border-color: $border !default;
|
|
6
|
+
$pagination-margin: 0.25rem !default;
|
|
7
|
+
|
|
8
|
+
$pagination-hover-color: $primary-hover !default;
|
|
9
|
+
$pagination-hover-border-color: $primary-hover !default;
|
|
10
|
+
|
|
11
|
+
$pagination-focus-color: $primary-active !default;
|
|
12
|
+
$pagination-focus-border-color: $primary-active !default;
|
|
13
|
+
|
|
14
|
+
$pagination-active-color: $primary-active !default;
|
|
15
|
+
$pagination-active-border-color: $primary-active !default;
|
|
16
|
+
|
|
17
|
+
$pagination-disabled-color: $secondary !default;
|
|
18
|
+
$pagination-disabled-background-color: $secondary-background !default;
|
|
19
|
+
$pagination-disabled-border-color: $secondary-background !default;
|
|
20
|
+
|
|
21
|
+
$pagination-current-color: $text-invert !default;
|
|
22
|
+
$pagination-current-background-color: $primary !default;
|
|
23
|
+
$pagination-current-background-color-hover: $primary-hover !default;
|
|
24
|
+
$pagination-current-border-color: $text-invert !default;
|
|
25
|
+
|
|
26
|
+
$pagination-ellipsis-color: $secondary-background !default;
|
|
27
|
+
|
|
28
|
+
$pagination-shadow-inset: inset 0 1px 2px $box-shadow-color-light;
|
|
29
|
+
|
|
30
|
+
.pagination {
|
|
31
|
+
flex-wrap: wrap;
|
|
32
|
+
margin: -$pagination-margin;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.pagination-list {
|
|
36
|
+
flex-grow: 1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.pagination,
|
|
40
|
+
.pagination-list {
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
margin: 0;
|
|
45
|
+
text-align: center;
|
|
46
|
+
|
|
47
|
+
> li {
|
|
48
|
+
margin: $pagination-margin;
|
|
49
|
+
list-style: none !important; //specificity battle
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.pagination-link {
|
|
54
|
+
&.is-current {
|
|
55
|
+
border-color: $pagination-current-border-color;
|
|
56
|
+
background-color: $pagination-current-background-color;
|
|
57
|
+
color: $pagination-current-color;
|
|
58
|
+
|
|
59
|
+
&:hover {
|
|
60
|
+
background-color: $pagination-current-background-color-hover;
|
|
61
|
+
color: $pagination-current-color;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@include forced-colors {
|
|
66
|
+
&::after {
|
|
67
|
+
display: block;
|
|
68
|
+
position: absolute;
|
|
69
|
+
width: 0.375em;
|
|
70
|
+
height: 0.375em;
|
|
71
|
+
border: 1px solid LinkText;
|
|
72
|
+
border-radius: $border-radius-rounded;
|
|
73
|
+
background-color: LinkText;
|
|
74
|
+
content: '';
|
|
75
|
+
inset-block-start: 0.25em;
|
|
76
|
+
inset-inline-end: 0.25em;
|
|
77
|
+
forced-color-adjust: none;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.pagination-ellipsis {
|
|
83
|
+
color: $pagination-ellipsis-color;
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.pagination-previous,
|
|
88
|
+
.pagination-next {
|
|
89
|
+
flex-grow: 0;
|
|
90
|
+
flex-shrink: 1;
|
|
91
|
+
padding-inline: 0.75em;
|
|
92
|
+
white-space: nowrap;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.pagination-previous,
|
|
96
|
+
.pagination-next,
|
|
97
|
+
.pagination-link,
|
|
98
|
+
.pagination-ellipsis {
|
|
99
|
+
@include control;
|
|
100
|
+
@include unselectable;
|
|
101
|
+
@include transparent-effects;
|
|
102
|
+
|
|
103
|
+
justify-content: center;
|
|
104
|
+
font-size: 1em;
|
|
105
|
+
padding-inline: 0.5em;
|
|
106
|
+
text-align: center;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.pagination-previous,
|
|
110
|
+
.pagination-next,
|
|
111
|
+
.pagination-link {
|
|
112
|
+
min-width: 2.25em;
|
|
113
|
+
border-color: $pagination-border-color;
|
|
114
|
+
color: $pagination-color;
|
|
115
|
+
text-decoration: none;
|
|
116
|
+
|
|
117
|
+
&:hover {
|
|
118
|
+
border-color: $pagination-hover-border-color;
|
|
119
|
+
color: $pagination-hover-color;
|
|
120
|
+
text-decoration: none;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&[disabled] {
|
|
124
|
+
border-color: $pagination-disabled-border-color;
|
|
125
|
+
background-color: $pagination-disabled-background-color;
|
|
126
|
+
opacity: 0.5;
|
|
127
|
+
color: $pagination-disabled-color;
|
|
128
|
+
pointer-events: none;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.pagination-center {
|
|
133
|
+
@include orientation-landscape {
|
|
134
|
+
.pagination-previous {
|
|
135
|
+
order: 1;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.pagination-list {
|
|
139
|
+
justify-content: center;
|
|
140
|
+
order: 2;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.pagination-next {
|
|
144
|
+
order: 3;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
@include tablet {
|
|
150
|
+
.pagination-list {
|
|
151
|
+
flex-grow: 0;
|
|
152
|
+
flex-shrink: 1;
|
|
153
|
+
justify-content: flex-start;
|
|
154
|
+
order: 1;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.pagination-previous {
|
|
158
|
+
order: 2;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.pagination-next {
|
|
162
|
+
order: 3;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.pagination {
|
|
166
|
+
justify-content: center;
|
|
167
|
+
|
|
168
|
+
&.pagination-center {
|
|
169
|
+
.pagination-previous {
|
|
170
|
+
order: 1;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.pagination-list {
|
|
174
|
+
justify-content: center;
|
|
175
|
+
order: 2;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.pagination-next {
|
|
179
|
+
order: 3;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
@@ -9,3 +9,18 @@
|
|
|
9
9
|
overflow-y: auto;
|
|
10
10
|
-webkit-overflow-scrolling: touch;
|
|
11
11
|
}
|
|
12
|
+
|
|
13
|
+
.scroll-snap-container {
|
|
14
|
+
gap: 1rem;
|
|
15
|
+
height: max-content;
|
|
16
|
+
margin-block: 1rem;
|
|
17
|
+
scroll-behavior: smooth;
|
|
18
|
+
scroll-snap-type: x mandatory;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.scroll-snap-item {
|
|
22
|
+
flex-basis: 90%;
|
|
23
|
+
min-width: 80%;
|
|
24
|
+
height: auto;
|
|
25
|
+
scroll-snap-align: center;
|
|
26
|
+
}
|
package/src/mixins/index.scss
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
@import './media-queries.scss';
|
|
1
2
|
@import './code-block.scss';
|
|
2
3
|
@import './control.scss';
|
|
3
4
|
@import './center.scss';
|
|
4
5
|
@import './focus.scss';
|
|
5
6
|
@import './loader.scss';
|
|
6
|
-
@import './
|
|
7
|
+
@import './layout-gap.scss';
|
|
7
8
|
@import './font-size.scss';
|
|
8
9
|
@import './force-colors.scss';
|
|
9
10
|
@import './transparency.scss';
|
package/src/tokens/colors.scss
CHANGED
|
@@ -25,6 +25,7 @@ $overlay: var(--theme-overlay);
|
|
|
25
25
|
$overlay-invert: var(--theme-overlay-invert);
|
|
26
26
|
$overlay-static: $palette-black-opacity-50;
|
|
27
27
|
$border: var(--theme-border);
|
|
28
|
+
$border-accent: var(--theme-border-accent);
|
|
28
29
|
|
|
29
30
|
$code-header: var(--theme-code-header);
|
|
30
31
|
$code-block: var(--theme-code-block);
|
|
@@ -41,6 +42,9 @@ $facepile-red: var(--theme-facepile-red);
|
|
|
41
42
|
$facepile-teal: var(--theme-facepile-teal);
|
|
42
43
|
$facepile-blue: var(--theme-facepile-blue);
|
|
43
44
|
|
|
45
|
+
$gradient-text-purple: var(--theme-gradient-text-purple);
|
|
46
|
+
$gradient-text-blue: var(--theme-gradient-text-blue);
|
|
47
|
+
|
|
44
48
|
$default-hover: var(--theme-hover-base);
|
|
45
49
|
$default-hover-invert: $body-background-medium;
|
|
46
50
|
$border-white-high-contrast: var(--theme-border-white-high-contrast);
|
|
@@ -15,7 +15,6 @@ $directions: (
|
|
|
15
15
|
'bottom': 'bottom',
|
|
16
16
|
'left': $user-left
|
|
17
17
|
);
|
|
18
|
-
//@end-sass-export-section
|
|
19
18
|
|
|
20
19
|
$logical-directions: (
|
|
21
20
|
'top': 'block-start',
|
|
@@ -23,3 +22,4 @@ $logical-directions: (
|
|
|
23
22
|
'bottom': 'block-end',
|
|
24
23
|
'left': 'inline-start'
|
|
25
24
|
);
|
|
25
|
+
//@end-sass-export-section
|
package/src/tokens/layout.scss
CHANGED
|
@@ -5,4 +5,8 @@
|
|
|
5
5
|
$column-gap: 0.75rem !default;
|
|
6
6
|
$large-column-gap: 1.5rem !default;
|
|
7
7
|
$reading-max-width: 50rem;
|
|
8
|
+
|
|
9
|
+
$layout-gap: 16px !default;
|
|
10
|
+
$layout-widescreen-width: $breakpoint-widescreen - $layout-gap * 2 !default;
|
|
11
|
+
$layout-widescreen-gap: calc(50% - #{$layout-widescreen-width} / 2) !default;
|
|
8
12
|
//@end-sass-export-section
|
package/src/tokens/palette.scss
CHANGED
|
@@ -81,6 +81,8 @@ $palette-blue-80: #004173 !default;
|
|
|
81
81
|
$palette-blue-90: #002b4d !default;
|
|
82
82
|
$palette-blue-100: #000a13 !default;
|
|
83
83
|
|
|
84
|
+
$palette-blue-a: #9ccbee !default;
|
|
85
|
+
|
|
84
86
|
$palette-blue-opacity-30: hsl(206deg 100% 35% / 30%);
|
|
85
87
|
$palette-blue-opacity-70: hsl(206deg 100% 35% / 70%);
|
|
86
88
|
|
|
@@ -147,6 +149,9 @@ $palette-purple-80: #3b2e58 !default;
|
|
|
147
149
|
$palette-purple-90: #201843 !default;
|
|
148
150
|
$palette-purple-100: #03002c !default;
|
|
149
151
|
|
|
152
|
+
$palette-purple-a: #cd9bcf !default;
|
|
153
|
+
$palette-purple-b: #702573 !default; // light
|
|
154
|
+
|
|
150
155
|
$palette-purple-opacity-30: hsl(251deg 47% 18% / 30%) !default;
|
|
151
156
|
$palette-purple-opacity-70: hsl(251deg 47% 18% / 70%) !default;
|
|
152
157
|
|
package/src/tokens/themes.scss
CHANGED
|
@@ -20,14 +20,15 @@ $themes: (
|
|
|
20
20
|
'alternate-background-medium': $palette-grey-110,
|
|
21
21
|
'card-background': $palette-white,
|
|
22
22
|
'border': $palette-grey-30,
|
|
23
|
+
'border-accent': $palette-yellow-sand,
|
|
24
|
+
'border-white-high-contrast': $palette-white-opacity-0,
|
|
25
|
+
'border-yellow-high-contrast': $palette-black-opacity-0,
|
|
23
26
|
'table-header': $palette-grey-30,
|
|
24
27
|
'table-row': $palette-grey-20,
|
|
25
28
|
'table-row-header': $palette-grey-10,
|
|
26
29
|
'table-border-dark': $palette-grey-40,
|
|
27
30
|
'hover-base': $palette-grey-110,
|
|
28
31
|
'hover-invert': $palette-grey-10,
|
|
29
|
-
'border-white-high-contrast': $palette-white-opacity-0,
|
|
30
|
-
'border-yellow-high-contrast': $palette-black-opacity-0,
|
|
31
32
|
'code-header': $palette-grey-30,
|
|
32
33
|
'code-block': $palette-grey-20,
|
|
33
34
|
'control-border': $palette-grey-80,
|
|
@@ -99,7 +100,9 @@ $themes: (
|
|
|
99
100
|
'danger-invert': $palette-white,
|
|
100
101
|
'facepile-red': $palette-red-60,
|
|
101
102
|
'facepile-teal': $palette-turqoise-60,
|
|
102
|
-
'facepile-blue': $palette-blue-50
|
|
103
|
+
'facepile-blue': $palette-blue-50,
|
|
104
|
+
'gradient-text-purple': $palette-purple-b,
|
|
105
|
+
'gradient-text-blue': $palette-blue-70
|
|
103
106
|
),
|
|
104
107
|
'dark': (
|
|
105
108
|
'text': $palette-grey-30,
|
|
@@ -118,6 +121,9 @@ $themes: (
|
|
|
118
121
|
'alternate-background': $palette-grey-20,
|
|
119
122
|
'alternate-background-medium': $palette-grey-10,
|
|
120
123
|
'border': $palette-grey-100,
|
|
124
|
+
'border-accent': $palette-grey-90,
|
|
125
|
+
'border-white-high-contrast': $palette-white-opacity-0,
|
|
126
|
+
'border-yellow-high-contrast': $palette-black-opacity-0,
|
|
121
127
|
'card-background': $palette-blue-black,
|
|
122
128
|
'table-header': $palette-grey-100,
|
|
123
129
|
'table-row': $palette-grey-110,
|
|
@@ -125,8 +131,6 @@ $themes: (
|
|
|
125
131
|
'table-border-dark': $palette-grey-90,
|
|
126
132
|
'hover-base': $palette-grey-40,
|
|
127
133
|
'hover-invert': $palette-grey-110,
|
|
128
|
-
'border-white-high-contrast': $palette-white-opacity-0,
|
|
129
|
-
'border-yellow-high-contrast': $palette-black-opacity-0,
|
|
130
134
|
'code-header': $palette-grey-100,
|
|
131
135
|
'code-block': $palette-grey-110,
|
|
132
136
|
'control-border': $palette-grey-40,
|
|
@@ -198,7 +202,9 @@ $themes: (
|
|
|
198
202
|
'danger-invert': $palette-black,
|
|
199
203
|
'facepile-red': $palette-red-40,
|
|
200
204
|
'facepile-teal': $palette-turqoise-40,
|
|
201
|
-
'facepile-blue': $palette-blue-40
|
|
205
|
+
'facepile-blue': $palette-blue-40,
|
|
206
|
+
'gradient-text-purple': $palette-purple-a,
|
|
207
|
+
'gradient-text-blue': $palette-blue-a
|
|
202
208
|
),
|
|
203
209
|
'high-contrast': (
|
|
204
210
|
'text': $palette-white,
|
|
@@ -217,6 +223,9 @@ $themes: (
|
|
|
217
223
|
'alternate-background': $palette-white,
|
|
218
224
|
'alternate-background-medium': $palette-white,
|
|
219
225
|
'border': $palette-white,
|
|
226
|
+
'border-accent': $palette-white,
|
|
227
|
+
'border-white-high-contrast': $palette-white,
|
|
228
|
+
'border-yellow-high-contrast': $palette-yellow-high-contrast,
|
|
220
229
|
'card-background': $palette-black,
|
|
221
230
|
'table-header': $palette-grey-90,
|
|
222
231
|
'table-row': $palette-black,
|
|
@@ -224,8 +233,6 @@ $themes: (
|
|
|
224
233
|
'table-border-dark': $palette-white,
|
|
225
234
|
'hover-base': $palette-yellow-high-contrast,
|
|
226
235
|
'hover-invert': $palette-black,
|
|
227
|
-
'border-white-high-contrast': $palette-white,
|
|
228
|
-
'border-yellow-high-contrast': $palette-yellow-high-contrast,
|
|
229
236
|
'code-header': $palette-black,
|
|
230
237
|
'code-block': $palette-black,
|
|
231
238
|
'control-border': $palette-white,
|
|
@@ -297,7 +304,9 @@ $themes: (
|
|
|
297
304
|
'danger-invert': $palette-black,
|
|
298
305
|
'facepile-red': $palette-red-30,
|
|
299
306
|
'facepile-teal': $palette-turqoise-30,
|
|
300
|
-
'facepile-blue': $palette-blue-30
|
|
307
|
+
'facepile-blue': $palette-blue-30,
|
|
308
|
+
'gradient-text-purple': $white-static,
|
|
309
|
+
'gradient-text-blue': $white-static
|
|
301
310
|
)
|
|
302
311
|
) !default;
|
|
303
312
|
//@end-sass-export-section
|