@oardi/css-utils 0.52.0 → 0.53.1

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/package.json +1 -1
  2. package/scss/borders.scss +1 -1
  3. package/scss/components/breadcrumb.scss +1 -1
  4. package/scss/components/button.scss +1 -1
  5. package/scss/components/card.scss +27 -11
  6. package/scss/components/chip.scss +88 -60
  7. package/scss/components/drawer.scss +41 -19
  8. package/scss/components/expansion-panel.scss +113 -83
  9. package/scss/components/form.scss +85 -81
  10. package/scss/components/icon-button.scss +144 -99
  11. package/scss/components/list.scss +33 -19
  12. package/scss/components/navbar.scss +24 -17
  13. package/scss/components/table.scss +73 -23
  14. package/scss/components/tabs.scss +72 -39
  15. package/scss/components/toast.scss +69 -18
  16. package/scss/components/tooltip.scss +45 -33
  17. package/scss/flex-responsive.scss +5 -2
  18. package/scss/gap-responsive.scss +1 -1
  19. package/scss/spacings-responsive.scss +58 -9
  20. package/scss/spacings.scss +1 -1
  21. package/scss/text.scss +4 -4
  22. package/scss/utilities.scss +41 -7
  23. package/scss/variables.scss +15 -9
package/scss/components/navbar.scss CHANGED
@@ -1,34 +1,41 @@
1
1
  @use 'sass:map';
2
- @use '../theme.scss';
2
+ @use '../theme.scss' as theme;
3
3
 
4
4
  @layer components {
5
5
  .navbar {
6
6
  --navbar-bg-color: var(--bg-surface);
7
7
  --navbar-text-color: var(--text-color);
8
8
 
9
- color: var(--navbar-text-color);
10
- padding-top: 0.6rem;
11
- padding-bottom: 0.6rem;
12
- background-color: var(--navbar-bg-color);
13
- min-height: 60px;
9
+ --navbar-padding-y: var(--spacer-2);
10
+ --navbar-padding-x: var(--spacer-0);
11
+ --navbar-min-height: 3.75rem;
12
+
13
+ --navbar-link-color: var(--navbar-text-color);
14
+ --navbar-link-hover-color: var(--primary-hover);
15
+
16
+ --navbar-logo-hover-color: var(--primary-hover);
17
+
14
18
  display: flex;
15
19
  align-items: center;
20
+ min-height: var(--navbar-min-height);
21
+ padding-block: var(--navbar-padding-y);
22
+ padding-inline: var(--navbar-padding-x);
23
+ color: var(--navbar-text-color);
24
+ background-color: var(--navbar-bg-color);
16
25
 
17
26
  a {
18
- --link-text-color: var(--navbar-text-color);
27
+ --link-text-color: var(--navbar-link-color);
28
+ --link-hover-color: var(--navbar-link-hover-color);
19
29
  }
20
- }
21
30
 
22
- .navbar .logo:hover {
23
- text-decoration: none;
24
- color: var(--primary-hover);
25
- }
31
+ .navbar-logo {
32
+ color: inherit;
33
+ text-decoration: none;
26
34
 
27
- /** @deprecated - use bg-color instead */
28
- @each $name, $value in map.get(theme.$theme, colors) {
29
- .navbar-#{$name} {
30
- --navbar-bg-color: var(--#{$name});
31
- --navbar-text-color: var(--on-#{$name});
35
+ &:hover {
36
+ color: var(--navbar-logo-hover-color);
37
+ text-decoration: none;
38
+ }
32
39
  }
33
40
  }
34
41
  }
package/scss/components/table.scss CHANGED
@@ -1,42 +1,92 @@
1
1
  @layer components {
2
2
  .table {
3
- --table-color-type: initial;
4
- --table-bg-type: initial;
5
- --table-color-state: initial;
6
- --table-bg-state: initial;
7
3
  --table-color: var(--text-color);
8
- --table-accent-bg: transparent;
9
- --table-striped-color: var(--text-color);
10
- --table-striped-bg: rgba(var(--text-color-rgb), 0.05); // TODO
11
- --table-active-color: var(--text-color);
12
- --table-active-bg: rgba(var(--text-color-rgb), 0.1); // TODO
13
- --table-hover-color: var(--text-color);
14
- --table-hover-bg: rgba(var(--text-color-rgb), 0.075); // TODO
4
+ --table-bg-color: var(--bg-surface);
5
+
6
+ --table-border-width: var(--border-width);
7
+ --table-border-color: var(--border-color);
8
+
9
+ --table-margin-bottom: var(--spacer-3);
10
+
11
+ --table-cell-padding-y: var(--spacer-2);
12
+ --table-cell-padding-x: var(--spacer-2);
13
+
14
+ --table-header-color: var(--text-color);
15
+ --table-header-bg-color: var(--bg-surface-hover);
16
+
17
+ --table-striped-bg-color: var(--bg-highlight);
18
+ --table-striped-color: var(--table-color);
19
+
20
+ --table-hover-bg-color: var(--bg-highlight);
21
+ --table-hover-color: var(--table-color);
22
+
23
+ --table-active-bg-color: var(--bg-active);
24
+ --table-active-color: var(--table-color);
15
25
 
16
26
  width: 100%;
17
- margin-bottom: 1rem;
27
+ margin-bottom: var(--table-margin-bottom);
28
+ color: var(--table-color);
18
29
  vertical-align: top;
19
- border-color: var(--table-border-color, --border-color);
30
+ border-color: var(--table-border-color);
31
+ border-collapse: collapse;
20
32
 
21
33
  & > thead {
22
34
  vertical-align: bottom;
23
35
  }
24
36
 
37
+ & > tbody {
38
+ vertical-align: inherit;
39
+ }
40
+
25
41
  & > :not(caption) > * > * {
26
- padding: 0.5rem 0.5rem;
27
- color: var(--table-color-state, var(--table-color-type, var(--table-color)));
28
- background-color: var(--table-bg, var(--bg-surface));
29
- border-bottom-width: var(--table-border-width, var(--border-width));
30
- box-shadow: inset 0 0 0 9999px var(--table-bg-state, var(--table-bg-type, var(--table-accent-bg)));
42
+ padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
43
+ color: var(--table-color);
44
+ background-color: var(--table-bg-color);
45
+ border-bottom: var(--table-border-width) solid var(--table-border-color);
31
46
  }
32
47
 
33
- & > tbody {
34
- vertical-align: inherit;
48
+ & > thead > tr > * {
49
+ color: var(--table-header-color);
50
+ background-color: var(--table-header-bg-color);
51
+ font-weight: 600;
52
+ }
53
+
54
+ &.table-striped > tbody > tr:nth-of-type(odd) > * {
55
+ color: var(--table-striped-color);
56
+ background-color: var(--table-striped-bg-color);
35
57
  }
36
58
 
37
- .table-striped > tbody > tr:nth-of-type(odd) > * {
38
- --table-color-type: var(--table-striped-color);
39
- --table-bg-type: var(--table-striped-bg);
59
+ &.table-hover > tbody > tr:hover > * {
60
+ color: var(--table-hover-color);
61
+ background-color: var(--table-hover-bg-color);
40
62
  }
63
+
64
+ & > tbody > tr.is-active > * {
65
+ color: var(--table-active-color);
66
+ background-color: var(--table-active-bg-color);
67
+ }
68
+ }
69
+
70
+ .table-bordered {
71
+ & > :not(caption) > * > * {
72
+ border: var(--table-border-width) solid var(--table-border-color);
73
+ }
74
+ }
75
+
76
+ .table-borderless {
77
+ & > :not(caption) > * > * {
78
+ border-bottom-width: 0;
79
+ }
80
+ }
81
+
82
+ .table-sm {
83
+ --table-cell-padding-y: var(--spacer-1);
84
+ --table-cell-padding-x: var(--spacer-1);
85
+ }
86
+
87
+ .table-responsive {
88
+ width: 100%;
89
+ overflow-x: auto;
90
+ -webkit-overflow-scrolling: touch;
41
91
  }
42
92
  }
package/scss/components/tabs.scss CHANGED
@@ -1,71 +1,104 @@
1
1
  @layer components {
2
2
  .tabs {
3
+ --tabs-bg-color: transparent;
4
+
3
5
  display: flex;
4
- cursor: pointer;
5
- -webkit-tap-highlight-color: transparent;
6
6
  overflow-x: auto;
7
7
  overflow-y: visible;
8
+ background-color: var(--tabs-bg-color);
9
+ -webkit-tap-highlight-color: transparent;
8
10
 
9
11
  .tab {
10
- --tab-transition-duration: var(--transition-duration, 0.2s);
12
+ --tab-color: var(--text-color);
13
+ --tab-bg-color: var(--bg-surface);
11
14
 
12
- border: none;
13
- color: var(--text-color);
14
- background-color: var(--tab-bg-color, var(--bg-surface));
15
- text-align: center;
15
+ --tab-hover-color: var(--primary);
16
+ --tab-hover-bg-color: var(--bg-surface-hover);
17
+
18
+ --tab-active-color: var(--primary);
19
+ --tab-active-border-color: var(--primary);
20
+
21
+ --tab-border-width: 3px;
22
+ --tab-border-color: var(--border-color);
23
+
24
+ --tab-padding-y: var(--spacer-3);
25
+ --tab-padding-x: var(--spacer-4);
26
+
27
+ --tab-disabled-text-color: var(--disabled-text-color);
28
+ --tab-disabled-bg-color: var(--disabled-bg-color);
29
+ --tab-disabled-border-color: var(--disabled-border-color);
30
+
31
+ --tab-focus-outline-width: var(--focus-outline-width);
32
+ --tab-focus-outline-style: var(--focus-outline-style);
33
+ --tab-focus-outline-color: var(--focus-outline-color);
34
+ --tab-focus-outline-offset: calc(-1 * var(--tab-border-width));
35
+
36
+ --tab-transition-duration: var(--transition-duration);
37
+ --tab-transition-easing: var(--transition-easing);
16
38
 
17
- padding: 16px 20px;
18
- border-bottom: 3px solid var(--tab-border-color, var(--border-color));
19
39
  flex: 1 0 auto;
40
+ padding: var(--tab-padding-y) var(--tab-padding-x);
41
+ border: 0;
42
+ border-block-end: var(--tab-border-width) solid var(--tab-border-color);
43
+ background-color: var(--tab-bg-color);
44
+ color: var(--tab-color);
45
+ text-align: center;
46
+ font: inherit;
47
+ white-space: nowrap;
20
48
 
21
49
  transition:
22
- color var(--tab-transition-duration) ease,
23
- background-color var(--tab-transition-duration) ease,
24
- box-shadow var(--tab-transition-duration) ease,
25
- border-color var(--tab-transition-duration) ease;
26
-
27
- &.active {
28
- color: var(--primary);
29
- border-bottom: 3px solid var(--primary);
30
- }
31
-
32
- &:focus {
33
- outline: 3px solid var(--primary-light);
34
- outline-offset: -3px;
35
- color: var(--primary);
36
- z-index: 10;
37
- }
50
+ color var(--tab-transition-duration) var(--tab-transition-easing),
51
+ background-color var(--tab-transition-duration) var(--tab-transition-easing),
52
+ box-shadow var(--tab-transition-duration) var(--tab-transition-easing),
53
+ border-color var(--tab-transition-duration) var(--tab-transition-easing);
38
54
 
39
55
  &:hover {
40
56
  cursor: pointer;
41
- color: var(--primary);
57
+ color: var(--tab-hover-color);
58
+ background-color: var(--tab-hover-bg-color);
42
59
  }
43
60
 
44
- &.disabled {
45
- color: var(--tab-disabled-text-color, var(--disabled-text-color));
46
- background-color: var(--tab-disabled-bg-color, var(--disabled-bg-color));
61
+ &.is-active {
62
+ color: var(--tab-active-color);
63
+ border-block-end-color: var(--tab-active-border-color);
64
+ }
65
+
66
+ &:focus-visible {
67
+ z-index: 10;
68
+ color: var(--tab-active-color);
69
+ outline: var(--tab-focus-outline-width) var(--tab-focus-outline-style) var(--tab-focus-outline-color);
70
+ outline-offset: var(--tab-focus-outline-offset);
71
+ }
47
72
 
73
+ &.disabled,
74
+ &:disabled,
75
+ &[disabled] {
76
+ cursor: not-allowed;
77
+ pointer-events: none;
78
+ color: var(--tab-disabled-text-color);
79
+ background-color: var(--tab-disabled-bg-color);
80
+ border-block-end-color: var(--tab-disabled-border-color);
48
81
  outline: 0;
49
- &:hover {
50
- cursor: not-allowed;
51
- }
52
82
  }
53
83
  }
54
84
  }
55
85
 
56
86
  .tab-content {
57
- --tab-content-transition-duration: var(--transition-duration, 0.2s);
87
+ --tab-content-bg-color: var(--bg-surface);
88
+ --tab-content-padding: var(--spacer-3);
89
+ --tab-content-transition-duration: var(--transition-duration);
90
+ --tab-content-transition-easing: var(--transition-easing);
58
91
 
59
92
  display: none;
60
- padding: 20px;
61
- background-color: var(--tab-content-bg-color, var(--bg-surface));
93
+ padding: var(--tab-content-padding);
94
+ background-color: var(--tab-content-bg-color);
62
95
 
63
96
  transition:
64
- color var(--tab-content-transition-duration),
65
- background-color var(--tab-content-transition-duration),
66
- border-color var(--tab-content-transition-duration);
97
+ color var(--tab-content-transition-duration) var(--tab-content-transition-easing),
98
+ background-color var(--tab-content-transition-duration) var(--tab-content-transition-easing),
99
+ border-color var(--tab-content-transition-duration) var(--tab-content-transition-easing);
67
100
 
68
- &.active {
101
+ &.is-active {
69
102
  display: block;
70
103
  }
71
104
  }
package/scss/components/toast.scss CHANGED
@@ -1,26 +1,77 @@
1
- @use 'sass:map';
2
- @use '../theme.scss';
3
-
4
1
  @layer components {
5
- @each $name, $value in map.get(theme.$theme, colors) {
6
- .toast-#{$name} {
7
- --toast-on-color: var(--on-#{$name});
8
- --toast-color: var(--#{$name});
9
- }
10
- }
11
-
12
2
  .toast {
13
- --toast-padding-y: 0.4rem;
14
- --toast-padding-x: 0.9rem;
3
+ --toast-padding-y: var(--spacer-2);
4
+ --toast-padding-x: var(--spacer-3);
5
+ --toast-bg-color: var(--bg-surface);
6
+ --toast-color: var(--text-color);
7
+ --toast-border-width: var(--border-width);
8
+ --toast-border-color: transparent;
9
+ --toast-border-radius: var(--border-radius);
10
+ --toast-box-shadow: var(--shadow);
11
+ --toast-gap: var(--spacer-2);
15
12
 
16
- background-color: var(--toast-color);
17
- border-color: transparent;
18
- color: var(--toast-on-color, var(--text-color));
19
- box-shadow: var(--shadow);
20
- padding: var(--toast-padding-y) var(--toast-padding-x);
21
- border-radius: var(--border-radius);
22
13
  display: flex;
23
14
  align-items: center;
15
+ gap: var(--toast-gap);
24
16
  width: 100%;
17
+ padding: var(--toast-padding-y) var(--toast-padding-x);
18
+ color: var(--toast-color);
19
+ background-color: var(--toast-bg-color);
20
+ border: var(--toast-border-width) solid var(--toast-border-color);
21
+ border-radius: var(--toast-border-radius);
22
+ box-shadow: var(--toast-box-shadow);
23
+ }
24
+
25
+ .toast-icon {
26
+ display: inline-flex;
27
+ flex-shrink: 0;
28
+ color: inherit;
29
+ fill: currentColor;
30
+ }
31
+
32
+ .toast-content {
33
+ flex: 1;
34
+ min-width: 0;
35
+ }
36
+
37
+ .toast-title {
38
+ margin: 0;
39
+ font-weight: 600;
40
+ }
41
+
42
+ .toast-message {
43
+ margin: 0;
44
+ }
45
+
46
+ .toast-actions {
47
+ display: inline-flex;
48
+ align-items: center;
49
+ gap: var(--spacer-1);
50
+ flex-shrink: 0;
51
+ margin-inline-start: auto;
52
+ }
53
+
54
+ .toast-action {
55
+ --button-color: currentColor;
56
+ --button-color-hover: currentColor;
57
+ --button-color-active: currentColor;
58
+ --button-on-color: currentColor;
59
+ }
60
+
61
+ .toast-close {
62
+ --icon-button-color: currentColor;
63
+ --icon-button-color-hover: currentColor;
64
+ --icon-button-color-active: currentColor;
65
+ --icon-button-on-color: currentColor;
66
+
67
+ flex-shrink: 0;
68
+ }
69
+
70
+ .toast-content + .toast-close {
71
+ margin-inline-start: auto;
72
+ }
73
+
74
+ .toast-actions + .toast-close {
75
+ margin-inline-start: var(--spacer-1);
25
76
  }
26
77
  }
package/scss/components/tooltip.scss CHANGED
@@ -1,60 +1,72 @@
1
1
  @layer components {
2
2
  .tooltip {
3
- background: #222;
4
- color: #fff;
5
- padding: 4px 8px;
6
- border-radius: 6px;
7
- font-size: 0.75rem;
3
+ --tooltip-bg-color: var(--bg-inverse);
4
+ --tooltip-color: var(--text-inverse);
5
+
6
+ --tooltip-padding-y: var(--spacer-1);
7
+ --tooltip-padding-x: var(--spacer-2);
8
+ --tooltip-border-radius: var(--border-radius-sm, var(--border-radius));
9
+ --tooltip-font-size: var(--font-size-xs, 0.75rem);
10
+ --tooltip-box-shadow: var(--shadow-lg);
11
+ --tooltip-z-index: 1000;
12
+
13
+ --tooltip-arrow-size: 0.375rem;
14
+
15
+ position: absolute;
16
+ z-index: var(--tooltip-z-index);
17
+ padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
18
+ border-radius: var(--tooltip-border-radius);
19
+ background-color: var(--tooltip-bg-color);
20
+ color: var(--tooltip-color);
21
+ font-size: var(--tooltip-font-size);
8
22
  white-space: nowrap;
9
- z-index: 1000;
10
- box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
23
+ box-shadow: var(--tooltip-box-shadow);
11
24
  pointer-events: none;
12
- position: absolute;
13
25
  }
14
26
 
15
27
  .tooltip-arrow {
28
+ position: absolute;
16
29
  width: 0;
17
30
  height: 0;
18
- position: absolute;
19
31
  }
20
32
 
21
33
  .tooltip-arrow.top {
22
- bottom: -6px;
23
- left: 50%;
34
+ inset-block-end: calc(-1 * var(--tooltip-arrow-size));
35
+ inset-inline-start: 50%;
24
36
  transform: translateX(-50%);
25
- border-left: 6px solid transparent;
26
- border-right: 6px solid transparent;
27
- border-top: 6px solid #222;
28
- border-bottom: 0;
37
+ border-inline-start: var(--tooltip-arrow-size) solid transparent;
38
+ border-inline-end: var(--tooltip-arrow-size) solid transparent;
39
+ border-block-start: var(--tooltip-arrow-size) solid var(--tooltip-bg-color);
40
+ border-block-end: 0;
29
41
  }
30
42
 
31
43
  .tooltip-arrow.bottom {
32
- top: -6px;
33
- left: 50%;
44
+ inset-block-start: calc(-1 * var(--tooltip-arrow-size));
45
+ inset-inline-start: 50%;
34
46
  transform: translateX(-50%);
35
- border-left: 6px solid transparent;
36
- border-right: 6px solid transparent;
37
- border-bottom: 6px solid #222;
38
- border-top: 0;
47
+ border-inline-start: var(--tooltip-arrow-size) solid transparent;
48
+ border-inline-end: var(--tooltip-arrow-size) solid transparent;
49
+ border-block-end: var(--tooltip-arrow-size) solid var(--tooltip-bg-color);
50
+ border-block-start: 0;
39
51
  }
40
52
 
41
53
  .tooltip-arrow.left {
42
- right: -6px;
43
- top: 50%;
54
+ inset-inline-end: calc(-1 * var(--tooltip-arrow-size));
55
+ inset-block-start: 50%;
44
56
  transform: translateY(-50%);
45
- border-top: 6px solid transparent;
46
- border-bottom: 6px solid transparent;
47
- border-left: 6px solid #222;
48
- border-right: 0;
57
+ border-block-start: var(--tooltip-arrow-size) solid transparent;
58
+ border-block-end: var(--tooltip-arrow-size) solid transparent;
59
+ border-inline-start: var(--tooltip-arrow-size) solid var(--tooltip-bg-color);
60
+ border-inline-end: 0;
49
61
  }
50
62
 
51
63
  .tooltip-arrow.right {
52
- left: -6px;
53
- top: 50%;
64
+ inset-inline-start: calc(-1 * var(--tooltip-arrow-size));
65
+ inset-block-start: 50%;
54
66
  transform: translateY(-50%);
55
- border-top: 6px solid transparent;
56
- border-bottom: 6px solid transparent;
57
- border-right: 6px solid #222;
58
- border-left: 0;
67
+ border-block-start: var(--tooltip-arrow-size) solid transparent;
68
+ border-block-end: var(--tooltip-arrow-size) solid transparent;
69
+ border-inline-end: var(--tooltip-arrow-size) solid var(--tooltip-bg-color);
70
+ border-inline-start: 0;
59
71
  }
60
72
  }
package/scss/flex-responsive.scss CHANGED
@@ -1,5 +1,8 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
+
4
+ // TODO
5
+ // add flex-wrap-*, flex-grow-*, flex-shrink-*, flex-fill-* oder order-* variants
3
6
 
4
7
  @layer utilities {
5
8
  @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
@@ -81,7 +84,7 @@
81
84
 
82
85
  // fill
83
86
  .flex-#{$bp}-fill {
84
- flex-direction: row;
87
+ flex: 1 1 auto;
85
88
  }
86
89
 
87
90
  // grow
package/scss/gap-responsive.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
3
 
4
4
  // i.e.: .gap-md-2, .row-gap-md-2, .column-gap-md-2
5
5
  @layer utilities {
package/scss/spacings-responsive.scss CHANGED
@@ -1,20 +1,69 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
3
 
4
4
  @layer utilities {
5
- // margin / padding with breakpoints and directions
6
5
  @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
7
6
  @media (min-width: #{$bp-value}) {
7
+ .m-#{$bp}-auto {
8
+ margin: auto;
9
+ }
10
+
11
+ .mx-#{$bp}-auto {
12
+ margin-left: auto;
13
+ margin-right: auto;
14
+ }
15
+
16
+ .my-#{$bp}-auto {
17
+ margin-top: auto;
18
+ margin-bottom: auto;
19
+ }
20
+
21
+ .ms-#{$bp}-auto {
22
+ margin-left: auto;
23
+ }
24
+
25
+ .me-#{$bp}-auto {
26
+ margin-right: auto;
27
+ }
28
+
29
+ .mt-#{$bp}-auto {
30
+ margin-top: auto;
31
+ }
32
+
33
+ .mb-#{$bp}-auto {
34
+ margin-bottom: auto;
35
+ }
36
+
8
37
  @each $key, $value in map.get(theme.$theme, spacings) {
9
- @each $dir, $prop in map.get(theme.$theme, directions) {
10
- .m-#{$bp}-#{$key} {
11
- margin-#{$prop}: $value;
12
- }
38
+ .m-#{$bp}-#{$key} {
39
+ margin: $value;
40
+ }
13
41
 
14
- .p-#{$bp}-#{$key} {
15
- padding-#{$prop}: $value;
16
- }
42
+ .mx-#{$bp}-#{$key} {
43
+ margin-left: $value;
44
+ margin-right: $value;
45
+ }
46
+
47
+ .my-#{$bp}-#{$key} {
48
+ margin-top: $value;
49
+ margin-bottom: $value;
50
+ }
17
51
 
52
+ .p-#{$bp}-#{$key} {
53
+ padding: $value;
54
+ }
55
+
56
+ .px-#{$bp}-#{$key} {
57
+ padding-left: $value;
58
+ padding-right: $value;
59
+ }
60
+
61
+ .py-#{$bp}-#{$key} {
62
+ padding-top: $value;
63
+ padding-bottom: $value;
64
+ }
65
+
66
+ @each $dir, $prop in map.get(theme.$theme, directions) {
18
67
  .m#{$dir}-#{$bp}-#{$key} {
19
68
  margin-#{$prop}: $value;
20
69
  }
package/scss/spacings.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
3
 
4
4
  @layer utilities {
5
5
  .m-auto {
package/scss/text.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
3
 
4
4
  @layer utilities {
5
5
  .text-center {
@@ -19,15 +19,15 @@
19
19
  }
20
20
 
21
21
  .text-inverse {
22
- color: var(--text-color-inverse);
22
+ color: var(--text-inverse);
23
23
  }
24
24
 
25
25
  .text-muted {
26
- color: var(--text-color-muted);
26
+ color: var(--text-muted);
27
27
  }
28
28
 
29
29
  .text-subtle {
30
- color: var(--text-color-subtle);
30
+ color: var(--text-subtle);
31
31
  }
32
32
 
33
33
  .text-inherit {