@oardi/css-utils 0.37.0 → 0.38.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 (4) hide show
  1. package/package.json +1 -1
  2. package/scss/components/button.scss +69 -45
  3. package/scss/components/toast.scss +13 -10
  4. package/scss/variables.scss +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.37.0",
3
+ "version": "0.38.0",
4
4
  "author": "Ardian Shala",
5
5
  "homepage": "https://css-utils.oardi.com",
6
6
  "description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
package/scss/components/button.scss CHANGED
@@ -7,8 +7,9 @@
7
7
 
8
8
  --button-focus-outline-width: var(--focus-outline-width);
9
9
  --button-focus-outline-style: var(--focus-outline-style);
10
- --button-font-size: var(--font-size);
10
+ --button-focus-outline-color: var(--focus-outline-color);
11
11
 
12
+ --button-font-size: var(--font-size);
12
13
  --button-padding-y: 0.25rem;
13
14
  --button-padding-x: 0.9rem;
14
15
 
@@ -16,9 +17,12 @@
16
17
  --button-disabled-bg-color: var(--disabled-bg-color);
17
18
  --button-disabled-border-color: var(--disabled-border-color);
18
19
 
20
+ --button-transition-duration: var(--transition-duration, 0.2s);
21
+
19
22
  font-size: var(--button-font-size);
20
23
  display: inline-flex;
21
24
  align-items: center;
25
+ justify-content: center;
22
26
  gap: var(--spacer-2);
23
27
 
24
28
  border-width: var(--button-border-width);
@@ -27,7 +31,14 @@
27
31
 
28
32
  background-color: transparent;
29
33
  color: var(--font-color);
30
- transition: var(--transition-color);
34
+ fill: currentColor;
35
+
36
+ transition:
37
+ color var(--button-transition-duration),
38
+ background-color var(--button-transition-duration),
39
+ border-color var(--button-transition-duration),
40
+ outline-color var(--button-transition-duration);
41
+
31
42
  -webkit-tap-highlight-color: transparent;
32
43
  touch-action: manipulation; // ios fix
33
44
 
@@ -53,6 +64,7 @@
53
64
  pointer-events: none;
54
65
  box-shadow: none;
55
66
  color: var(--button-disabled-font-color);
67
+ fill: var(--button-disabled-font-color);
56
68
  outline: 0;
57
69
  background-color: var(--button-disabled-bg-color);
58
70
  border-color: var(--button-disabled-border-color);
@@ -61,56 +73,68 @@
61
73
 
62
74
  @each $name, $value in map.get(theme.$theme, colors) {
63
75
  .btn-#{$name} {
64
- color: var(--on-#{$name});
65
- fill: var(--on-#{$name});
66
- background-color: var(--#{$name});
67
- border-color: var(--#{$name});
68
-
69
- &:hover,
70
- &:active {
71
- background-color: var(--#{$name}-hover);
72
- border-color: var(--#{$name}-hover);
73
- }
74
-
75
- &:focus-visible {
76
- outline: var(--button-focus-outline-width) solid rgba(var(--#{$name}-rgb), 0.5);
77
- }
76
+ --button-color: var(--#{$name});
77
+ --button-color-hover: var(--#{$name}-hover);
78
+ --button-color-rgb: var(--#{$name}-rgb);
79
+ --button-on-color: var(--on-#{$name});
80
+ }
81
+ }
82
+
83
+ .btn-solid {
84
+ color: var(--button-on-color);
85
+ fill: var(--button-on-color);
86
+ background-color: var(--button-color);
87
+ border-color: var(--button-color);
88
+
89
+ &:hover,
90
+ &:active {
91
+ background-color: var(--button-color-hover);
92
+ border-color: var(--button-color-hover);
93
+ }
94
+
95
+ &:focus-visible {
96
+ outline: var(--button-focus-outline-width) solid rgba(var(--button-color-rgb), 0.5);
78
97
  }
98
+ }
79
99
 
80
- .btn-#{$name}-outline {
81
- color: var(--#{$name});
82
- fill: var(--#{$name});
83
- background-color: transparent;
84
- border-color: var(--#{$name});
85
-
86
- &:hover,
87
- &:active {
88
- color: var(--on-#{$name});
89
- background-color: var(--#{$name}-hover);
90
- border-color: var(--#{$name}-hover);
91
- }
92
-
93
- &:focus-visible {
94
- color: var(--on-#{$name});
95
- outline: 2px solid rgba(var(--#{$name}-rgb), 0.5);
96
- background-color: var(--#{$name});
97
- }
100
+ .btn-outline {
101
+ color: var(--button-color);
102
+ fill: var(--button-color);
103
+ background-color: transparent;
104
+ border-color: var(--button-color);
105
+
106
+ &:hover,
107
+ &:active {
108
+ color: var(--button-on-color);
109
+ fill: var(--button-on-color);
110
+ background-color: var(--button-color-hover);
111
+ border-color: var(--button-color-hover);
98
112
  }
99
113
 
100
- .btn-#{$name}-text {
101
- --button-highlight: var(--highlight);
114
+ &:focus-visible {
115
+ color: var(--button-on-color);
116
+ fill: var(--button-on-color);
117
+ outline: var(--button-focus-outline-width) solid rgba(var(--button-color-rgb), 0.5);
118
+ background-color: var(--button-color);
119
+ border-color: var(--button-color);
120
+ }
121
+ }
102
122
 
103
- color: var(--#{$name});
104
- fill: var(--#{$name});
123
+ .btn-text {
124
+ --button-highlight: var(--highlight);
105
125
 
106
- &:hover,
107
- &:active {
108
- background-color: var(--button-highlight);
109
- }
126
+ color: var(--button-color);
127
+ fill: var(--button-color);
128
+ background-color: transparent;
129
+ border-color: transparent;
110
130
 
111
- &:focus-visible {
112
- outline: 2px solid rgba(var(--#{$name}-rgb), 0.5);
113
- }
131
+ &:hover,
132
+ &:active {
133
+ background-color: var(--button-highlight);
134
+ }
135
+
136
+ &:focus-visible {
137
+ outline: var(--button-focus-outline-width) solid rgba(var(--button-color-rgb), 0.5);
114
138
  }
115
139
  }
116
140
 
package/scss/components/toast.scss CHANGED
@@ -1,21 +1,24 @@
1
1
  @use 'sass:map';
2
2
  @use '../theme.scss';
3
3
 
4
+ @each $name, $value in map.get(theme.$theme, colors) {
5
+ .toast-#{$name} {
6
+ --toast-on-color: var(--on-#{$name});
7
+ --toast-color: var(--#{$name});
8
+ }
9
+ }
10
+
4
11
  .toast {
5
- background-color: white;
12
+ --toast-padding-y: 0.4rem;
13
+ --toast-padding-x: 0.9rem;
14
+
15
+ background-color: var(--toast-color);
6
16
  border-color: transparent;
7
- color: var(--font-color);
17
+ color: var(--toast-on-color, var(--font-color));
8
18
  box-shadow: var(--shadow);
9
- padding: 1rem;
19
+ padding: var(--toast-padding-y) var(--toast-padding-x);
10
20
  border-radius: var(--border-radius);
11
21
  display: flex;
12
22
  align-items: center;
13
23
  width: 100%;
14
24
  }
15
-
16
- @each $name, $value in map.get(theme.$theme, colors) {
17
- .toast-#{$name} {
18
- color: var(--on-#{$name});
19
- background-color: var(--#{$name});
20
- }
21
- }
package/scss/variables.scss CHANGED
@@ -58,6 +58,7 @@
58
58
 
59
59
  --container: 900px;
60
60
 
61
+ --transition-duration: 0.2s;
61
62
  --transition-color: color 0.4s, background-color 0.4s;
62
63
 
63
64
  --bg-opacity: 1;