@microsoft/atlas-css 3.21.0 → 3.24.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.
Files changed (23) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.css.map +1 -1
  3. package/dist/tokens.json +1 -1
  4. package/dist/tokens.ts +10 -0
  5. package/package.json +1 -1
  6. package/src/atomics/background.scss +11 -0
  7. package/src/atomics/border.scss +4 -0
  8. package/src/atomics/gap.scss +60 -0
  9. package/src/atomics/index.scss +2 -1
  10. package/src/atomics/line-clamp.scss +0 -12
  11. package/src/components/card.scss +252 -0
  12. package/src/components/gradient.scss +90 -0
  13. package/src/components/index.scss +4 -0
  14. package/src/components/media.scss +22 -0
  15. package/src/components/stretched-link.scss +8 -0
  16. package/src/mixins/index.scss +2 -0
  17. package/src/mixins/line-clamp.scss +11 -0
  18. package/src/mixins/overlay.scss +12 -0
  19. package/src/tokens/colors.scss +6 -0
  20. package/src/tokens/direction.scss +1 -1
  21. package/src/tokens/palette.scss +5 -0
  22. package/src/tokens/themes.scss +18 -9
  23. package/src/atomics/background-pattern.scss +0 -3
package/src/components/gradient.scss ADDED
@@ -0,0 +1,90 @@
1
+ $border-gradient-colors: (
2
+ 'body': $body-background,
3
+ 'body-accent': $body-background-accent
4
+ ) !default;
5
+
6
+ @each $name, $var in $border-gradient-colors {
7
+ // ex. .gradient-border-body { --border-gradient-end-color: var(--theme-body-background); }
8
+ .gradient-border-#{$name} {
9
+ --border-gradient-end-color: #{$var};
10
+ }
11
+ }
12
+
13
+ $border-gradient-direction: (
14
+ 'right': 'inline-end',
15
+ 'bottom': 'block-end'
16
+ ) !default;
17
+
18
+ @each $direction, $logical-side in $border-gradient-direction {
19
+ .gradient-border-#{$direction} {
20
+ position: relative;
21
+ }
22
+ .gradient-border-#{$direction}:before {
23
+ display: block;
24
+ position: absolute;
25
+ content: '';
26
+ border-image: linear-gradient(
27
+ to #{$direction},
28
+ transparent 0%,
29
+ transparent 92%,
30
+ var(--border-gradient-end-color, transparent) 100%
31
+ );
32
+ border-#{$logical-side}-width: 320px;
33
+ border-#{$logical-side}-style: solid;
34
+ border-image-outset: 0;
35
+
36
+ @if $direction == 'right' {
37
+ border-image-slice: 0 128 0 0;
38
+ inset-block-start: 0;
39
+ inset-block-end: 0;
40
+ inset-inline-end: 0;
41
+ }
42
+
43
+ @if $direction == 'bottom' {
44
+ border-image-slice: 0 0 128 0;
45
+ inset-block-end: 0;
46
+ inset-inline-start: 0;
47
+ inset-inline-end: 0;
48
+ }
49
+
50
+ @include forced-colors {
51
+ display: none !important;
52
+ }
53
+ }
54
+
55
+ @include tablet {
56
+ .gradient-border-to-#{$direction}-tablet:before {
57
+ border-image: linear-gradient(
58
+ to #{$direction},
59
+ transparent 0%,
60
+ transparent 92%,
61
+ var(--border-gradient-end-color) 100%
62
+ );
63
+ border-#{$logical-side}-width: 320px;
64
+ border-#{$logical-side}-style: solid;
65
+ border-image-outset: 0;
66
+
67
+ @if $direction == 'right' {
68
+ border-image-slice: 0 128 0 0;
69
+ }
70
+
71
+ @if $direction == 'bottom' {
72
+ border-image-slice: 0 0 128 0;
73
+ }
74
+ }
75
+ }
76
+ }
77
+
78
+ // Text color gradients cannot be quite so programmatic
79
+
80
+ .gradient-text-purple-blue {
81
+ /* stylelint-disable */
82
+ -webkit-background-clip: text;
83
+ /* stylelint-enable */
84
+ background-clip: text;
85
+ background-color: $gradient-text-purple;
86
+ background-image: linear-gradient(90deg, $gradient-text-purple, $gradient-text-blue);
87
+ color: transparent;
88
+ -webkit-text-fill-color: transparent;
89
+ line-height: 1.4; // required because of background clip, avoid "g" and "y" getting cut off
90
+ }
package/src/components/index.scss CHANGED
@@ -1,14 +1,18 @@
1
1
  @import './breadcrumbs.scss';
2
2
  @import './button.scss';
3
3
  @import './buttons.scss';
4
+ @import './card.scss';
4
5
  @import './button-reset.scss';
5
6
  @import './form/index.scss';
6
7
  @import './hero.scss';
8
+ @import './gradient.scss';
7
9
  @import './link-button.scss';
8
10
  @import './markdown.scss'; // must be ordered after code-block
11
+ @import './media.scss';
9
12
  @import './icon.scss';
10
13
  @import './popover.scss';
11
14
  @import './pagination.scss';
12
15
  @import './table.scss';
13
16
  @import './toggle.scss';
14
17
  @import './scroll.scss';
18
+ @import './stretched-link.scss';
package/src/components/media.scss ADDED
@@ -0,0 +1,22 @@
1
+ .media {
2
+ display: flex;
3
+ align-items: flex-start;
4
+
5
+ + .media,
6
+ .media {
7
+ border-top: 1px solid $border;
8
+ margin-block-start: 1rem;
9
+ padding-block-start: 1rem;
10
+ }
11
+ }
12
+
13
+ .media-left {
14
+ flex: 0 0 auto;
15
+ margin-inline-end: 1rem;
16
+ }
17
+
18
+ .media-content {
19
+ flex: 1 1 auto;
20
+ width: 100%;
21
+ word-break: break-word;
22
+ }
package/src/components/stretched-link.scss ADDED
@@ -0,0 +1,8 @@
1
+ .stretched-link {
2
+ &::before {
3
+ position: absolute;
4
+ content: '';
5
+ z-index: $zindex-stretched-link;
6
+ inset: 0;
7
+ }
8
+ }
package/src/mixins/index.scss CHANGED
@@ -4,9 +4,11 @@
4
4
  @import './center.scss';
5
5
  @import './focus.scss';
6
6
  @import './loader.scss';
7
+ @import './line-clamp.scss';
7
8
  @import './layout-gap.scss';
8
9
  @import './font-size.scss';
9
10
  @import './force-colors.scss';
11
+ @import './overlay.scss';
10
12
  @import './transparency.scss';
11
13
  @import './unselectable.scss';
12
14
  @import './visually-hidden.scss';
package/src/mixins/line-clamp.scss ADDED
@@ -0,0 +1,11 @@
1
+ %line-clamp {
2
+ /*stylelint-disable*/
3
+ display: -webkit-box;
4
+ -webkit-box-orient: vertical;
5
+ overflow: hidden;
6
+ }
7
+
8
+ @mixin line-clamp($lines: 1) {
9
+ @extend %line-clamp;
10
+ -webkit-line-clamp: $lines !important;
11
+ }
package/src/mixins/overlay.scss ADDED
@@ -0,0 +1,12 @@
1
+ %overlay {
2
+ position: absolute;
3
+ inset: 0;
4
+ }
5
+
6
+ @mixin overlay($offset: 0) {
7
+ @extend %overlay;
8
+
9
+ @if $offset != 0 {
10
+ inset: $offset;
11
+ }
12
+ }
package/src/tokens/colors.scss CHANGED
@@ -25,6 +25,9 @@ $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);
29
+
30
+ $card-background: var(--theme-card-background);
28
31
 
29
32
  $code-header: var(--theme-code-header);
30
33
  $code-block: var(--theme-code-block);
@@ -41,6 +44,9 @@ $facepile-red: var(--theme-facepile-red);
41
44
  $facepile-teal: var(--theme-facepile-teal);
42
45
  $facepile-blue: var(--theme-facepile-blue);
43
46
 
47
+ $gradient-text-purple: var(--theme-gradient-text-purple);
48
+ $gradient-text-blue: var(--theme-gradient-text-blue);
49
+
44
50
  $default-hover: var(--theme-hover-base);
45
51
  $default-hover-invert: $body-background-medium;
46
52
  $border-white-high-contrast: var(--theme-border-white-high-contrast);
package/src/tokens/direction.scss CHANGED
@@ -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/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
package/src/atomics/background-pattern.scss DELETED
@@ -1,3 +0,0 @@
1
- .background-image-pattern-plus {
2
- background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M169.772 10.69V6.184h-2.238v4.506h-4.507v2.237h4.507v4.508h2.238v-4.508h4.506V10.69h-4.506ZM124.771 6.184h-2.238v4.506h-4.506v2.237h4.506v4.508h2.238v-4.508h4.506V10.69h-4.506V6.184ZM79.775 6.184h-2.238v4.506h-4.506v2.237h4.506v4.508h2.238v-4.508h4.506V10.69h-4.506V6.184ZM34.776 6.184h-2.238v4.506h-4.507v2.237h4.507v4.508h2.238v-4.508h4.506V10.69h-4.506V6.184ZM147.271 28.685h-2.238v4.506h-4.506v2.237h4.506v4.506h2.238v-4.506h4.507v-2.237h-4.507v-4.506ZM102.276 28.685h-2.238v4.506h-4.507v2.237h4.507v4.506h2.238v-4.506h4.506v-2.237h-4.506v-4.506ZM57.275 28.685h-2.238v4.506h-4.506v2.237h4.506v4.506h2.238v-4.506h4.506v-2.237h-4.506v-4.506ZM12.275 28.685h-2.238v4.506H5.531v2.237h4.506v4.506h2.238v-4.506h4.507v-2.237h-4.507v-4.506ZM169.772 51.185h-2.238v4.506h-4.507v2.237h4.507v4.506h2.238v-4.506h4.506v-2.237h-4.506v-4.506ZM124.771 51.185h-2.238v4.506h-4.506v2.237h4.506v4.506h2.238v-4.506h4.506v-2.237h-4.506v-4.506ZM79.775 51.185h-2.238v4.506h-4.506v2.237h4.506v4.506h2.238v-4.506h4.506v-2.237h-4.506v-4.506ZM34.776 51.185h-2.238v4.506h-4.507v2.237h4.507v4.506h2.238v-4.506h4.506v-2.237h-4.506v-4.506ZM147.271 73.681h-2.238v4.508h-4.506v2.237h4.506v4.506h2.238v-4.506h4.507v-2.237h-4.507V73.68ZM102.276 73.681h-2.238v4.508h-4.507v2.237h4.507v4.506h2.238v-4.506h4.506v-2.237h-4.506V73.68ZM57.275 73.681h-2.238v4.508h-4.506v2.237h4.506v4.506h2.238v-4.506h4.506v-2.237h-4.506V73.68ZM12.275 73.681h-2.238v4.508H5.531v2.237h4.506v4.506h2.238v-4.506h4.507v-2.237h-4.507V73.68ZM169.772 96.182h-2.238v4.506h-4.507v2.238h4.507v4.506h2.238v-4.506h4.506v-2.238h-4.506v-4.506ZM124.771 96.182h-2.238v4.506h-4.506v2.238h4.506v4.506h2.238v-4.506h4.506v-2.238h-4.506v-4.506ZM79.775 96.182h-2.238v4.506h-4.506v2.238h4.506v4.506h2.238v-4.506h4.506v-2.238h-4.506v-4.506ZM34.776 96.182h-2.238v4.506h-4.507v2.238h4.507v4.506h2.238v-4.506h4.506v-2.238h-4.506v-4.506ZM147.271 118.682h-2.238v4.506h-4.506v2.237h4.506v4.506h2.238v-4.506h4.507v-2.237h-4.507v-4.506ZM102.276 118.682h-2.238v4.506h-4.507v2.237h4.507v4.506h2.238v-4.506h4.506v-2.237h-4.506v-4.506ZM57.275 118.682h-2.238v4.506h-4.506v2.237h4.506v4.506h2.238v-4.506h4.506v-2.237h-4.506v-4.506ZM12.275 118.682h-2.238v4.506H5.531v2.237h4.506v4.506h2.238v-4.506h4.507v-2.237h-4.507v-4.506ZM169.772 141.182h-2.238v4.507h-4.507v2.238h4.507v4.506h2.238v-4.506h4.506v-2.238h-4.506v-4.507ZM124.771 141.182h-2.238v4.507h-4.506v2.238h4.506v4.506h2.238v-4.506h4.506v-2.238h-4.506v-4.507ZM79.775 141.182h-2.238v4.507h-4.506v2.238h4.506v4.506h2.238v-4.506h4.506v-2.238h-4.506v-4.507ZM34.776 141.182h-2.238v4.507h-4.507v2.238h4.507v4.506h2.238v-4.506h4.506v-2.238h-4.506v-4.507ZM147.271 163.683h-2.238v4.506h-4.506v2.237h4.506v4.506h2.238v-4.506h4.507v-2.237h-4.507v-4.506ZM102.276 163.683h-2.238v4.506h-4.507v2.237h4.507v4.506h2.238v-4.506h4.506v-2.237h-4.506v-4.506ZM57.275 163.683h-2.238v4.506h-4.506v2.237h4.506v4.506h2.238v-4.506h4.506v-2.237h-4.506v-4.506ZM12.275 163.683h-2.238v4.506H5.531v2.237h4.506v4.506h2.238v-4.506h4.507v-2.237h-4.507v-4.506Z' fill='%23000' fill-opacity='.1'/%3E%3C/svg%3E");
3
- }