@heliosgraphics/ui 2.0.0-alpha.63 → 2.0.0-alpha.65

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/components/Dialog/Dialog.module.css +2 -2
  2. package/components/Dot/Dot.module.css +3 -0
  3. package/components/Input/Input.module.css +1 -1
  4. package/components/Markdown/Markdown.module.css +6 -6
  5. package/components/Menu/components/MenuItem/MenuItem.module.css +1 -1
  6. package/components/Placeholder/Placeholder.module.css +1 -1
  7. package/components/Select/Select.module.css +1 -1
  8. package/components/Shimmer/Shimmer.module.css +1 -1
  9. package/components/Slider/Slider.module.css +6 -6
  10. package/components/Table/Table.module.css +1 -1
  11. package/components/Tabs/Tabs.module.css +3 -3
  12. package/components/Textarea/Textarea.module.css +6 -6
  13. package/components/Toggle/Toggle.module.css +1 -1
  14. package/components/Tooltip/Tooltip.module.css +1 -1
  15. package/components/shared/InputLabel/InputLabel.module.css +1 -1
  16. package/css/core.colors.css +1 -1
  17. package/css/feat.atomics.css +3 -3
  18. package/css/feat.markdown.css +7 -7
  19. package/css/feat.responsive.css +8 -8
  20. package/package.json +1 -1
package/components/Dialog/Dialog.module.css CHANGED
@@ -9,7 +9,7 @@
9
9
  width: 580px;
10
10
 
11
11
  border: 0;
12
- border-radius: var(--radius-large);
12
+ border-radius: var(--radius-lg);
13
13
  touch-action: pan-y;
14
14
  transform: translateX(-50%);
15
15
  }
@@ -54,7 +54,7 @@
54
54
  --ui-bg-backdrop: rgba(80, 80, 80, 0.5);
55
55
 
56
56
  animation: backdropFadeIn var(--speed-sm) ease-in-out;
57
- background-color: var(--ui-bg-tertiary);
57
+ background-color: var(--ui-bg-backdrop);
58
58
  backdrop-filter: blur(2px);
59
59
  }
60
60
 
package/components/Dot/Dot.module.css CHANGED
@@ -3,6 +3,9 @@
3
3
 
4
4
  overflow: hidden;
5
5
 
6
+ --dot-color: var(--ui-bg-blue);
7
+ --dot-color-accent: var(--ui-bg-soft-blue);
8
+
6
9
  transition: all var(--speed-lg) var(--ease-in-out-sine);
7
10
  }
8
11
 
package/components/Input/Input.module.css CHANGED
@@ -68,7 +68,7 @@
68
68
  }
69
69
 
70
70
  .inputDisabled input.input__input {
71
- background-color: var(--ui-bg-disabled);
71
+ background-color: var(--ui-bg-disabled-gray);
72
72
  }
73
73
 
74
74
  .inputDisabled input.input__input::placeholder {
package/components/Markdown/Markdown.module.css CHANGED
@@ -69,7 +69,7 @@
69
69
  padding: 16px 42px;
70
70
 
71
71
  background-color: var(--ui-bg-secondary);
72
- border-radius: var(--radius-normal);
72
+ border-radius: var(--radius-md);
73
73
  color: var(--ui-text-secondary);
74
74
  }
75
75
 
@@ -106,7 +106,7 @@
106
106
 
107
107
  /* Element: Link */
108
108
  .markdown a {
109
- color: var(--ui-text-intent-advise);
109
+ color: var(--ui-text-orange);
110
110
 
111
111
  font-weight: var(--font-weight-medium);
112
112
  text-decoration: underline;
@@ -172,7 +172,7 @@
172
172
  max-width: max-content;
173
173
  width: 100%;
174
174
 
175
- border-radius: var(--radius-normal);
175
+ border-radius: var(--radius-md);
176
176
  }
177
177
 
178
178
  /* Element: Headings */
@@ -208,7 +208,7 @@
208
208
  .markdown h5,
209
209
  .markdown h6 {
210
210
  font-weight: var(--font-weight-semi-bold);
211
- color: var(--fui-color-800);
211
+ color: var(--ui-text-primary);
212
212
  }
213
213
 
214
214
  .markdown p {
@@ -239,7 +239,7 @@
239
239
  padding: 0 4px;
240
240
 
241
241
  background-color: var(--ui-bg-secondary);
242
- border-radius: var(--radius-small);
242
+ border-radius: var(--radius-sm);
243
243
  color: var(--ui-text-secondary);
244
244
  }
245
245
 
@@ -257,7 +257,7 @@
257
257
  overflow: auto;
258
258
 
259
259
  background-color: var(--ui-bg-tertiary);
260
- border-radius: var(--radius-normal);
260
+ border-radius: var(--radius-md);
261
261
  color: var(--ui-text-secondary);
262
262
 
263
263
  counter-reset: line;
package/components/Menu/components/MenuItem/MenuItem.module.css CHANGED
@@ -32,6 +32,6 @@
32
32
  height: 100%;
33
33
  width: 2px;
34
34
 
35
- background-color: hsl(var(--orange-hue), var(--orange-saturation), 50%);
35
+ background-color: var(--ui-border-orange);
36
36
  content: " ";
37
37
  }
package/components/Placeholder/Placeholder.module.css CHANGED
@@ -1,3 +1,3 @@
1
1
  .placeholder {
2
- background-color: hsl(var(--color-intent-highlight), 75%);
2
+ background-color: var(--ui-bg-soft-yellow);
3
3
  }
package/components/Select/Select.module.css CHANGED
@@ -12,7 +12,7 @@
12
12
  }
13
13
 
14
14
  .selectDisabled select {
15
- background-color: var(--ui-bg-action);
15
+ background-color: var(--ui-bg-disabled-gray);
16
16
  color: var(--ui-text-secondary);
17
17
 
18
18
  pointer-events: none;
package/components/Shimmer/Shimmer.module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  width: 100%;
4
4
  animation: shimmer 760ms linear infinite forwards;
5
5
 
6
- background-color: var(--ui-bg-disabled);
6
+ background-color: var(--ui-bg-soft-disabled-gray);
7
7
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
8
8
  background-position: -256px 0;
9
9
  background-repeat: no-repeat;
package/components/Slider/Slider.module.css CHANGED
@@ -5,8 +5,8 @@
5
5
  scroll-snap-points-x: repeat(48px);
6
6
  scroll-snap-type: x mandatory;
7
7
 
8
- background: var(--gray-25);
9
- border-radius: 4px;
8
+ background: var(--ui-bg-soft-gray);
9
+ border-radius: var(--radius-sm);
10
10
  }
11
11
 
12
12
  .slider li {
@@ -24,14 +24,14 @@
24
24
  height: 4px;
25
25
  width: 4px;
26
26
 
27
- background-color: var(--gray-300);
28
- border-radius: 4px;
27
+ background-color: var(--ui-border-gray);
28
+ border-radius: var(--radius-sm);
29
29
  transition: all var(--speed-md) var(--ease-in-out-sine);
30
30
  }
31
31
 
32
32
  .slider::-webkit-scrollbar-track {
33
- background-color: var(--gray-25);
34
- border-radius: 4px;
33
+ background-color: var(--ui-bg-soft-gray);
34
+ border-radius: var(--radius-sm);
35
35
  }
36
36
 
37
37
  @media (max-width: 960px) {
package/components/Table/Table.module.css CHANGED
@@ -31,7 +31,7 @@
31
31
  .tableElement th {
32
32
  font-weight: var(--font-weight-semi-bold);
33
33
 
34
- background-color: var(--ui-bg-action);
34
+ background-color: var(--ui-bg-tertiary);
35
35
  color: var(--ui-text-secondary);
36
36
  }
37
37
 
package/components/Tabs/Tabs.module.css CHANGED
@@ -4,7 +4,7 @@
4
4
  height: 36px;
5
5
  padding: 0 8px 0 0;
6
6
 
7
- box-shadow: inset 0 -1px 0 0 var(--ui-border);
7
+ box-shadow: inset 0 -1px 0 0 var(--ui-border-secondary);
8
8
 
9
9
  line-height: 36px;
10
10
  }
@@ -12,8 +12,8 @@
12
12
  .tabs__ol__item {
13
13
  padding: 0 12px;
14
14
 
15
- border-radius: 4px 4px 0 0;
16
- border: 1px solid var(--ui-border);
15
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
16
+ border: 1px solid var(--ui-border-secondary);
17
17
 
18
18
  cursor: pointer;
19
19
  }
package/components/Textarea/Textarea.module.css CHANGED
@@ -10,10 +10,10 @@
10
10
  width: 100%;
11
11
 
12
12
  background-clip: padding-box;
13
- background-color: var(--gray-0);
14
- border: 1px solid var(--ui-border);
13
+ background-color: var(--ui-bg-primary);
14
+ border: 1px solid var(--ui-border-primary);
15
15
  color: var(--ui-text-primary);
16
- border-radius: 4px;
16
+ border-radius: var(--radius-sm);
17
17
  resize: none;
18
18
  outline: none;
19
19
  transition: all var(--speed-md) var(--ease-in-out-sine);
@@ -24,13 +24,13 @@
24
24
  }
25
25
 
26
26
  .input__helper {
27
- margin-top: var(--box-3);
27
+ margin-top: var(--space-3);
28
28
  }
29
29
 
30
30
  .textarea textarea:active:not(:disabled),
31
31
  .textarea textarea:focus:not(:disabled) {
32
32
  box-shadow: 0 0 0 4px var(--ui-border-secondary);
33
- border-color: var(--ui-border-active);
33
+ border-color: var(--ui-border-active-gray);
34
34
  color: var(--ui-text-primary);
35
35
  }
36
36
 
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  .textareaDisabled textarea {
47
- background-color: var(--ui-bg-disabled);
47
+ background-color: var(--ui-bg-disabled-gray);
48
48
  }
49
49
 
50
50
  .textareaDisabled textarea::placeholder {
package/components/Toggle/Toggle.module.css CHANGED
@@ -48,7 +48,7 @@
48
48
  }
49
49
 
50
50
  .toggleStyleSwitch input {
51
- border-radius: var(--radius-normal);
51
+ border-radius: var(--radius-md);
52
52
  }
53
53
 
54
54
  .toggle input:active ~ .toggle__toggleMark:after {
package/components/Tooltip/Tooltip.module.css CHANGED
@@ -14,5 +14,5 @@
14
14
  background-color: var(--ui-bg-secondary);
15
15
  border: 0;
16
16
  color: var(--ui-text-primary);
17
- border-radius: var(--radius-small);
17
+ border-radius: var(--radius-sm);
18
18
  }
package/components/shared/InputLabel/InputLabel.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .inputLabel {
2
- margin-bottom: var(--box-3);
2
+ margin-bottom: var(--space-3);
3
3
 
4
4
  color: var(--ui-text-secondary);
5
5
 
package/css/core.colors.css CHANGED
@@ -411,6 +411,6 @@
411
411
 
412
412
  /* elevation */
413
413
  --ui-elevation-sm: 0 0 0 1px rgba(255, 255, 255, 0.024);
414
- --ui-elevation-md: 0 0 4px 4px rgba(0, 0, 0, 0.32), 0 0 0 1px var(--ui-border);
414
+ --ui-elevation-md: 0 0 4px 4px rgba(0, 0, 0, 0.32), 0 0 0 1px var(--ui-border-primary);
415
415
  --ui-elevation-lg: 0 0 0 1px rgba(255, 255, 255, 0.024), 0 8px 24px 0 rgba(0, 0, 0, 0.4);
416
416
  }
package/css/feat.atomics.css CHANGED
@@ -31,7 +31,7 @@
31
31
  }
32
32
 
33
33
  .ui-scrollbar::-webkit-scrollbar-corner {
34
- background-color: var(--ui-bg-disabled);
34
+ background-color: var(--ui-bg-disabled-gray);
35
35
  }
36
36
 
37
37
  .ui-scrollbar::-webkit-scrollbar-thumb {
@@ -43,7 +43,7 @@
43
43
  }
44
44
 
45
45
  .ui-scrollbar::-webkit-scrollbar-track {
46
- background-color: var(--ui-bg-light);
46
+ background-color: var(--ui-bg-soft-gray);
47
47
  }
48
48
 
49
49
  .ui-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  .ui-scrollbar::-webkit-scrollbar-thumb:active {
54
- background-color: var(--ui-bg-disabled);
54
+ background-color: var(--ui-bg-soft-disabled-gray);
55
55
  }
56
56
 
57
57
  /* elevation */
package/css/feat.markdown.css CHANGED
@@ -7,31 +7,31 @@
7
7
 
8
8
  .hljs-literal,
9
9
  .hljs-keyword {
10
- color: var(--ui-text-intent-danger);
10
+ color: var(--ui-text-red);
11
11
  }
12
12
 
13
13
  .hljs-number {
14
- color: var(--ui-text-intent-silent);
14
+ color: var(--ui-text-tertiary);
15
15
  }
16
16
 
17
17
  .hljs-title,
18
18
  .hljs-property {
19
- color: var(--ui-text-intent-advise);
19
+ color: var(--ui-text-orange);
20
20
  }
21
21
 
22
22
  .hljs-function {
23
- color: var(--ui-text-intent-silent);
23
+ color: var(--ui-text-tertiary);
24
24
  }
25
25
 
26
26
  .hljs-attr,
27
27
  .hljs-title.function_ {
28
- color: var(--ui-text-intent-confirmation);
28
+ color: var(--ui-text-blue);
29
29
  }
30
30
 
31
31
  .hljs-string {
32
- color: var(--ui-text-intent-advise);
32
+ color: var(--ui-text-orange);
33
33
  }
34
34
 
35
35
  .hljs-name {
36
- color: var(--ui-text-intent-success);
36
+ color: var(--ui-text-green);
37
37
  }
package/css/feat.responsive.css CHANGED
@@ -67,16 +67,16 @@
67
67
  }
68
68
 
69
69
  .tablet\:radius-none {
70
- border-radius: var(--radius-none) !important;
70
+ border-radius: 0 !important;
71
71
  }
72
72
  .tablet\:radius-small {
73
- border-radius: var(--radius-small) !important;
73
+ border-radius: var(--radius-sm) !important;
74
74
  }
75
75
  .tablet\:radius-normal {
76
- border-radius: var(--radius-normal) !important;
76
+ border-radius: var(--radius-md) !important;
77
77
  }
78
78
  .tablet\:radius-large {
79
- border-radius: var(--radius-large) !important;
79
+ border-radius: var(--radius-lg) !important;
80
80
  }
81
81
  }
82
82
 
@@ -148,15 +148,15 @@
148
148
  padding: var(--space-48) !important;
149
149
  }
150
150
  .mobile\:radius-none {
151
- border-radius: var(--radius-none) !important;
151
+ border-radius: 0 !important;
152
152
  }
153
153
  .mobile\:radius-small {
154
- border-radius: var(--radius-small) !important;
154
+ border-radius: var(--radius-sm) !important;
155
155
  }
156
156
  .mobile\:radius-normal {
157
- border-radius: var(--radius-normal) !important;
157
+ border-radius: var(--radius-md) !important;
158
158
  }
159
159
  .mobile\:radius-large {
160
- border-radius: var(--radius-large) !important;
160
+ border-radius: var(--radius-lg) !important;
161
161
  }
162
162
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@heliosgraphics/ui",
3
- "version": "2.0.0-alpha.63",
3
+ "version": "2.0.0-alpha.65",
4
4
  "type": "module",
5
5
  "author": "Chris Puska <chris@puska.org>",
6
6
  "private": false,