@microsoft/atlas-css 3.45.0 → 3.47.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 (20) hide show
  1. package/dist/class-names.json +1 -1
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens.json +1 -1
  5. package/dist/tokens.ts +2 -0
  6. package/package.json +1 -1
  7. package/src/atomics/height.scss +3 -0
  8. package/src/atomics/index.scss +1 -0
  9. package/src/atomics/overflow.scss +10 -2
  10. package/src/components/form/checkbox.scss +1 -1
  11. package/src/components/form/input.scss +10 -3
  12. package/src/components/form/radio.scss +3 -2
  13. package/src/components/form/select.scss +14 -3
  14. package/src/components/form/textarea.scss +69 -3
  15. package/src/components/index.scss +1 -0
  16. package/src/components/progress-bar.scss +117 -0
  17. package/src/components/toggle.scss +2 -2
  18. package/src/core/animations.scss +10 -0
  19. package/src/tokens/colors.scss +1 -0
  20. package/src/tokens/themes.scss +3 -0
package/src/components/progress-bar.scss ADDED
@@ -0,0 +1,117 @@
1
+ $progress-bar-background-color: $secondary-background-glow-high-contrast !default;
2
+ $progress-bar-value-background-color: $primary !default;
3
+ $progress-bar-value-background-color-warning: $warning !default;
4
+ $progress-bar-value-background-color-danger: $danger !default;
5
+ $progress-bar-value-background-color-success: $success !default;
6
+ $progress-bar-height: $spacer-2 !default;
7
+ $progress-bar-height-sm: $spacer-1 !default;
8
+ $progress-bar-border-radius: $border-radius-rounded !default;
9
+ $progress-bar-indeterminate-animation-duration: 2s !default;
10
+
11
+ .progress-bar {
12
+ display: block;
13
+ width: 100%;
14
+ max-width: 100%;
15
+ height: $progress-bar-height;
16
+ padding: 0;
17
+ border: none;
18
+ border-radius: $progress-bar-border-radius;
19
+ background-color: $progress-bar-background-color;
20
+ appearance: none;
21
+ overflow: hidden;
22
+
23
+ &::-webkit-progress-bar {
24
+ background-color: $progress-bar-background-color;
25
+ }
26
+
27
+ &::-webkit-progress-value,
28
+ &::-moz-progress-bar {
29
+ background-color: $progress-bar-value-background-color;
30
+ }
31
+
32
+ // Size
33
+
34
+ &.progress-bar-sm {
35
+ height: $progress-bar-height-sm;
36
+ }
37
+
38
+ // Colors
39
+
40
+ &.progress-bar-success {
41
+ &::-webkit-progress-value,
42
+ &::-moz-progress-bar {
43
+ background-color: $progress-bar-value-background-color-success;
44
+ }
45
+ }
46
+
47
+ &.progress-bar-danger {
48
+ &::-webkit-progress-value,
49
+ &::-moz-progress-bar {
50
+ background-color: $progress-bar-value-background-color-danger;
51
+ }
52
+ }
53
+
54
+ &.progress-bar-warning {
55
+ &::-webkit-progress-value,
56
+ &::-moz-progress-bar {
57
+ background-color: $progress-bar-value-background-color-warning;
58
+ }
59
+ }
60
+
61
+ &:indeterminate {
62
+ animation-name: slide-background;
63
+ animation-timing-function: linear;
64
+ background-color: $progress-bar-background-color;
65
+ background-image: linear-gradient(
66
+ to right,
67
+ $progress-bar-background-color 0%,
68
+ $progress-bar-value-background-color 20%,
69
+ $progress-bar-background-color 40%
70
+ );
71
+ background-repeat: no-repeat;
72
+ background-position: top left;
73
+ background-size: 150% 150%;
74
+ animation-duration: $progress-bar-indeterminate-animation-duration;
75
+ animation-iteration-count: infinite;
76
+
77
+ &:dir(rtl) {
78
+ animation-direction: reverse;
79
+ }
80
+
81
+ &::-webkit-progress-bar,
82
+ &::-moz-progress-bar {
83
+ background-color: transparent;
84
+ }
85
+
86
+ @include prefers-reduced-motion {
87
+ animation-duration: 0s;
88
+ }
89
+ }
90
+
91
+ @include forced-colors {
92
+ background-color: CanvasText !important;
93
+
94
+ &::-webkit-progress-bar {
95
+ background-color: CanvasText !important;
96
+ }
97
+
98
+ &::-webkit-progress-value,
99
+ &::-moz-progress-bar {
100
+ background-color: Highlight !important;
101
+ }
102
+
103
+ &:indeterminate {
104
+ &::-webkit-progress-bar {
105
+ background-color: transparent !important;
106
+ }
107
+
108
+ forced-color-adjust: none !important;
109
+ background-image: linear-gradient(
110
+ to right,
111
+ CanvasText 0%,
112
+ Highlight 20%,
113
+ CanvasText 40%
114
+ ) !important;
115
+ }
116
+ }
117
+ }
package/src/components/toggle.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  $toggle-transition: $input-transition-duration cubic-bezier(0.01, 1.23, 0.58, 0.96) !default;
2
- $toggle-circle-size: 0.75em !default;
3
- $toggle-circle-top: 0.1875em !default;
2
+ $toggle-circle-size: 0.85em !default;
3
+ $toggle-circle-top: 0.15em !default;
4
4
  $toggle-circle-distance-from-border: 1em - $toggle-circle-size;
5
5
 
6
6
  $toggle-unselected-circle-color: $text-subtle !default;
package/src/core/animations.scss CHANGED
@@ -38,6 +38,16 @@
38
38
  }
39
39
  }
40
40
 
41
+ @keyframes slide-background {
42
+ 0% {
43
+ background-position: 200% 0;
44
+ }
45
+
46
+ 100% {
47
+ background-position: -200% 0;
48
+ }
49
+ }
50
+
41
51
  .animation-fade {
42
52
  animation: fade-out 0.4s ease-in forwards;
43
53
 
package/src/tokens/colors.scss CHANGED
@@ -34,6 +34,7 @@ $code-block: var(--theme-code-block);
34
34
  $inline-code: var(--theme-inline-code);
35
35
 
36
36
  $control-border: var(--theme-control-border);
37
+ $control-border-bottom: var(--theme-control-border-bottom);
37
38
 
38
39
  $table-header: var(--theme-table-header);
39
40
  $table-row: var(--theme-table-row);
package/src/tokens/themes.scss CHANGED
@@ -32,6 +32,7 @@ $themes: (
32
32
  'code-header': $palette-grey-30,
33
33
  'code-block': $palette-grey-20,
34
34
  'control-border': $palette-grey-80,
35
+ 'control-border-bottom': $palette-grey-90,
35
36
  'inline-code': $palette-grey-30,
36
37
  'code-highlight-background': $palette-yellow-10,
37
38
  'visited': $palette-purple-70,
@@ -136,6 +137,7 @@ $themes: (
136
137
  'code-header': $palette-grey-100,
137
138
  'code-block': $palette-grey-110,
138
139
  'control-border': $palette-grey-40,
140
+ 'control-border-bottom': $palette-grey-30,
139
141
  'inline-code': $palette-grey-100,
140
142
  'code-highlight-background': $palette-green-70,
141
143
  'visited': $palette-purple-40,
@@ -240,6 +242,7 @@ $themes: (
240
242
  'code-header': $palette-black,
241
243
  'code-block': $palette-black,
242
244
  'control-border': $palette-white,
245
+ 'control-border-bottom': $palette-white,
243
246
  'inline-code': $palette-grey-110,
244
247
  'code-highlight-background': $palette-green-70,
245
248
  'visited': $palette-visited-high-contrast,