@boostdev/design-system-components 0.1.8 → 0.1.10

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 (28) hide show
  1. package/AGENTS.md +56 -0
  2. package/README.md +40 -1
  3. package/dist/client.cjs +46 -46
  4. package/dist/client.css +453 -465
  5. package/dist/client.d.cts +2 -2
  6. package/dist/client.d.ts +2 -2
  7. package/dist/client.js +46 -46
  8. package/dist/index.cjs +46 -46
  9. package/dist/index.css +453 -465
  10. package/dist/index.d.cts +2 -2
  11. package/dist/index.d.ts +2 -2
  12. package/dist/index.js +46 -46
  13. package/package.json +2 -2
  14. package/src/components/interaction/Button/Button.tsx +2 -2
  15. package/src/components/interaction/form/Checkbox/Checkbox.module.css +5 -6
  16. package/src/components/interaction/form/Combobox/Combobox.module.css +2 -5
  17. package/src/components/interaction/form/FileInput/FileInput.module.css +5 -5
  18. package/src/components/interaction/form/FormInput/FormInput.module.css +3 -8
  19. package/src/components/interaction/form/NumberInput/NumberInput.module.css +5 -6
  20. package/src/components/interaction/form/Radio/Radio.module.css +5 -6
  21. package/src/components/interaction/form/Select/Select.module.css +2 -5
  22. package/src/components/interaction/form/Slider/Slider.module.css +4 -4
  23. package/src/components/interaction/form/Switch/Switch.module.css +2 -2
  24. package/src/components/interaction/form/Textarea/Textarea.module.css +2 -5
  25. package/src/components/ui/Alert/Alert.module.css +3 -3
  26. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +3 -3
  27. package/src/components/ui/Progress/Progress.module.css +1 -1
  28. package/src/components/ui/ProgressCircle/ProgressCircle.module.css +1 -1
package/src/components/interaction/form/NumberInput/NumberInput.module.css CHANGED
@@ -7,15 +7,15 @@
7
7
  .inputRow {
8
8
  display: flex;
9
9
  align-items: stretch;
10
- border: 1px solid var(--color_on-bg);
10
+ border: 1px solid currentcolor;
11
11
  border-radius: var(--border_radius--xs);
12
12
  overflow: hidden;
13
13
  transition: var(--animation_transition);
14
14
  }
15
15
 
16
16
  .inputRow:focus-within {
17
- border-color: var(--color_interactive);
18
- box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
17
+ border-color: var(--numberInput_border-color, var(--color_interactive));
18
+ box-shadow: var(--numberInput_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
19
19
  }
20
20
 
21
21
  .input {
@@ -38,12 +38,11 @@
38
38
  }
39
39
 
40
40
  .inputError {
41
- border-color: var(--color_error);
41
+ --numberInput_border-color: var(--color_error);
42
42
  }
43
43
 
44
44
  .inputError:focus-within {
45
- border-color: var(--color_error);
46
- box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
45
+ --numberInput_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
47
46
  }
48
47
 
49
48
  .stepper {
package/src/components/interaction/form/Radio/Radio.module.css CHANGED
@@ -18,7 +18,7 @@
18
18
  margin-block-start: 0.25em;
19
19
  width: var(--inputSize);
20
20
  height: var(--inputSize);
21
- border: 1px solid var(--color_on-bg);
21
+ border: 1px solid currentcolor;
22
22
  border-radius: 50%;
23
23
  appearance: none;
24
24
  background-color: var(--color_bg);
@@ -28,9 +28,8 @@
28
28
  }
29
29
 
30
30
  .radio:checked {
31
- background-color: var(--color_green);
32
- border-color: var(--color_green);
33
- box-shadow: 0 0 0 2px var(--color_green);
31
+ background-color: var(--radio_color-active, var(--color_active));
32
+ border-color: var(--radio_color-active, var(--color_active));
34
33
  }
35
34
 
36
35
  .radio:checked::after {
@@ -40,7 +39,7 @@
40
39
  top: 0.25em;
41
40
  width: 0.5em;
42
41
  height: 1em;
43
- border: solid var(--color_on-green);
42
+ border: solid var(--radio_color-on-active, var(--color_on-active));
44
43
  border-width: 0 2px 2px 0;
45
44
  transform: rotate(45deg);
46
45
  }
@@ -48,7 +47,7 @@
48
47
  .radio:focus {
49
48
  outline: none;
50
49
  border-color: var(--color_interactive);
51
- box-shadow: 0 0 0 2px var(--color_green);
50
+ box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
52
51
  }
53
52
 
54
53
  .radioError {
package/src/components/interaction/form/Select/Select.module.css CHANGED
@@ -11,16 +11,13 @@
11
11
  }
12
12
 
13
13
  .select {
14
- --select_border-color: var(--color_on-bg);
15
- --select_focus-ring: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
16
-
17
14
  appearance: none;
18
15
  width: 100%;
19
16
  font-family: var(--font_family--body);
20
17
  font-size: var(--font_size--body);
21
18
  padding: var(--space_s);
22
19
  padding-inline-end: var(--space_xxl);
23
- border: 1px solid var(--select_border-color);
20
+ border: 1px solid var(--select_border-color, currentcolor);
24
21
  border-radius: var(--border_radius--xs);
25
22
  background-color: var(--color_bg);
26
23
  color: var(--color_on-bg);
@@ -32,7 +29,7 @@
32
29
  --select_border-color: var(--color_interactive);
33
30
 
34
31
  outline: none;
35
- box-shadow: var(--select_focus-ring);
32
+ box-shadow: var(--select_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
36
33
  }
37
34
 
38
35
  .select:disabled {
package/src/components/interaction/form/Slider/Slider.module.css CHANGED
@@ -28,8 +28,8 @@
28
28
  border-radius: 999px;
29
29
  background: linear-gradient(
30
30
  to right,
31
- var(--color_green) 0%,
32
- var(--color_green) var(--slider_fill),
31
+ var(--slider_color-active, var(--color_active)) 0%,
32
+ var(--slider_color-active, var(--color_active)) var(--slider_fill),
33
33
  var(--color_bg--subtle) var(--slider_fill),
34
34
  var(--color_bg--subtle) 100%
35
35
  );
@@ -54,7 +54,7 @@
54
54
  width: var(--slider_thumb-size);
55
55
  height: var(--slider_thumb-size);
56
56
  border-radius: 50%;
57
- background-color: var(--color_green);
57
+ background-color: var(--slider_color-active, var(--color_active));
58
58
  box-shadow: var(--shadow_s);
59
59
  transition: var(--animation_transition);
60
60
  cursor: pointer;
@@ -66,7 +66,7 @@
66
66
  height: var(--slider_thumb-size);
67
67
  border: none;
68
68
  border-radius: 50%;
69
- background-color: var(--color_green);
69
+ background-color: var(--slider_color-active, var(--color_active));
70
70
  box-shadow: var(--shadow_s);
71
71
  cursor: pointer;
72
72
  }
package/src/components/interaction/form/Switch/Switch.module.css CHANGED
@@ -5,9 +5,9 @@
5
5
  --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
6
6
  --switch_track-width: calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
7
7
  --track_bg: var(--color_grey--subtle);
8
- --track_active: var(--color_green--subtle);
8
+ --track_active: var(--color_active--subtle);
9
9
  --thumb_bg: var(--color_grey);
10
- --thumb_bg--active: var(--color_green--strong);
10
+ --thumb_bg--active: var(--color_active--strong);
11
11
 
12
12
  display: flex;
13
13
  flex-direction: column;
package/src/components/interaction/form/Textarea/Textarea.module.css CHANGED
@@ -5,14 +5,11 @@
5
5
  }
6
6
 
7
7
  .textarea {
8
- --textarea_border-color: var(--color_on-bg);
9
- --textarea_focus-ring: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
10
-
11
8
  font-family: var(--font_family--body);
12
9
  font-size: var(--font_size--body);
13
10
  line-height: var(--font_line-height--body);
14
11
  padding: var(--space_s);
15
- border: 1px solid var(--textarea_border-color);
12
+ border: 1px solid var(--textarea_border-color, currentcolor);
16
13
  border-radius: var(--border_radius--xs);
17
14
  background-color: var(--color_bg);
18
15
  color: var(--color_on-bg);
@@ -25,7 +22,7 @@
25
22
  --textarea_border-color: var(--color_interactive);
26
23
 
27
24
  outline: none;
28
- box-shadow: var(--textarea_focus-ring);
25
+ box-shadow: var(--textarea_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
29
26
  }
30
27
 
31
28
  .textarea:disabled {
package/src/components/ui/Alert/Alert.module.css CHANGED
@@ -23,9 +23,9 @@
23
23
  }
24
24
 
25
25
  .--variant_success {
26
- --alert_bg: var(--color_green--subtle);
27
- --alert_text: var(--color_on-green--subtle);
28
- --alert_border: var(--color_green);
26
+ --alert_bg: var(--color_success--subtle);
27
+ --alert_text: var(--color_on-success--subtle);
28
+ --alert_border: var(--color_success);
29
29
  }
30
30
 
31
31
  .--variant_warning {
package/src/components/ui/NotificationBanner/NotificationBanner.module.css CHANGED
@@ -23,9 +23,9 @@
23
23
  }
24
24
 
25
25
  .--variant_success {
26
- --banner_bg: var(--color_green--subtle);
27
- --banner_text: var(--color_on-green--subtle);
28
- --banner_border: var(--color_green);
26
+ --banner_bg: var(--color_success--subtle);
27
+ --banner_text: var(--color_on-success--subtle);
28
+ --banner_border: var(--color_success);
29
29
  }
30
30
 
31
31
  .--variant_warning {
package/src/components/ui/Progress/Progress.module.css CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  .fill {
40
40
  height: 100%;
41
- background-color: var(--color_green);
41
+ background-color: var(--progress_color-active, var(--color_active));
42
42
  border-radius: 999px;
43
43
  transition: width var(--animation_transition-duration) var(--animation_easing);
44
44
  }
package/src/components/ui/ProgressCircle/ProgressCircle.module.css CHANGED
@@ -15,7 +15,7 @@
15
15
  }
16
16
 
17
17
  .fill {
18
- stroke: var(--color_green);
18
+ stroke: var(--progressCircle_color-active, var(--color_active));
19
19
  transition: stroke-dashoffset var(--animation_transition-duration) var(--animation_easing);
20
20
  }
21
21