@oardi/css-utils 0.36.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 (9) hide show
  1. package/package.json +6 -1
  2. package/scss/components/button.scss +94 -72
  3. package/scss/components/chip.scss +5 -6
  4. package/scss/components/form.scss +1 -1
  5. package/scss/components/icon-button.scss +38 -32
  6. package/scss/components/navbar.scss +1 -1
  7. package/scss/components/toast.scss +13 -10
  8. package/scss/utilities.scss +0 -18
  9. package/scss/variables.scss +5 -3
package/package.json CHANGED
@@ -1,9 +1,14 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.36.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",
7
+ "keywords": [
8
+ "css library",
9
+ "ui library",
10
+ "library"
11
+ ],
7
12
  "main": "scss/index.scss",
8
13
  "files": [
9
14
  "scss"
package/scss/components/button.scss CHANGED
@@ -1,118 +1,140 @@
1
1
  @use 'sass:map';
2
2
  @use '../theme.scss' as theme;
3
3
 
4
- %btn-base {
4
+ .btn {
5
+ --button-border-width: var(--border-width);
6
+ --button-border-radius: var(--border-radius);
7
+
8
+ --button-focus-outline-width: var(--focus-outline-width);
9
+ --button-focus-outline-style: var(--focus-outline-style);
10
+ --button-focus-outline-color: var(--focus-outline-color);
11
+
12
+ --button-font-size: var(--font-size);
5
13
  --button-padding-y: 0.25rem;
6
14
  --button-padding-x: 0.9rem;
7
- --button-font-size: var(--font-size);
8
- --button-border-width: var(--border-width);
15
+
16
+ --button-disabled-font-color: var(--disabled-font-color);
17
+ --button-disabled-bg-color: var(--disabled-bg-color);
18
+ --button-disabled-border-color: var(--disabled-border-color);
19
+
20
+ --button-transition-duration: var(--transition-duration, 0.2s);
9
21
 
10
22
  font-size: var(--button-font-size);
11
23
  display: inline-flex;
12
24
  align-items: center;
25
+ justify-content: center;
13
26
  gap: var(--spacer-2);
14
27
 
15
28
  border-width: var(--button-border-width);
16
29
  border-style: solid;
17
- background-color: transparent;
18
30
  border-color: transparent;
31
+
32
+ background-color: transparent;
19
33
  color: var(--font-color);
20
- 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
+
21
42
  -webkit-tap-highlight-color: transparent;
22
43
  touch-action: manipulation; // ios fix
23
44
 
45
+ border-radius: var(--button-border-radius);
46
+ line-height: var(--line-height);
47
+ padding: var(--button-padding-y) var(--button-padding-x);
48
+
24
49
  &:hover {
25
50
  cursor: pointer;
26
51
  text-decoration: none;
27
52
  }
28
53
 
29
- &[disabled]:hover,
30
- [disabled]:focus {
31
- cursor: not-allowed;
32
- box-shadow: none;
33
- }
34
-
35
- &:focus {
36
- outline: var(--focus-outline);
54
+ &:focus-visible {
55
+ outline: var(--button-focus-outline-width) var(--button-focus-outline-style) var(--button-focus-outline-color);
37
56
  outline-offset: var(--focus-offset);
38
57
  }
39
- }
40
-
41
- .btn {
42
- @extend %btn-base;
43
-
44
- --button-border-radius: var(--border-radius);
45
- --button-disabled-font-color: var(--disabled-font-color);
46
- --button-disabled-bg-color: var(--disabled-bg-color);
47
- --button-disabled-bg-color: var(--disabled-border-color);
48
-
49
- border-radius: var(--button-border-radius);
50
- line-height: var(--line-height);
51
- padding: var(--button-padding-y) var(--button-padding-x);
52
58
 
59
+ &:disabled,
53
60
  &[disabled],
54
61
  &[disabled]:hover,
55
- &[active]:hover {
62
+ &[disabled]:focus {
63
+ cursor: not-allowed;
64
+ pointer-events: none;
65
+ box-shadow: none;
56
66
  color: var(--button-disabled-font-color);
67
+ fill: var(--button-disabled-font-color);
57
68
  outline: 0;
58
- box-shadow: none;
59
69
  background-color: var(--button-disabled-bg-color);
60
- border-color: var(--button-disabled-bg-color);
70
+ border-color: var(--button-disabled-border-color);
61
71
  }
62
72
  }
63
73
 
64
74
  @each $name, $value in map.get(theme.$theme, colors) {
65
75
  .btn-#{$name} {
66
- color: var(--on-#{$name});
67
- fill: var(--on-#{$name});
68
- background-color: var(--#{$name});
69
- border-color: var(--#{$name});
70
-
71
- &:hover,
72
- &:active {
73
- background-color: var(--#{$name}-dark);
74
- border-color: var(--#{$name}-dark);
75
- }
76
-
77
- &:focus {
78
- outline: 2px solid rgba(var(--#{$name}-rgb), 0.5);
79
- }
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
80
  }
81
+ }
81
82
 
82
- .btn-#{$name}-outline {
83
- color: var(--#{$name});
84
- fill: var(--#{$name});
85
- background-color: transparent;
86
- border-color: var(--#{$name});
87
-
88
- &:hover,
89
- &:active {
90
- color: var(--on-#{$name});
91
- background-color: var(--#{$name}-dark);
92
- border-color: var(--#{$name}-dark);
93
- }
94
-
95
- &:focus {
96
- color: var(--on-#{$name});
97
- outline: 2px solid rgba(var(--#{$name}-rgb), 0.5);
98
- background-color: var(--#{$name});
99
- }
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);
100
93
  }
101
94
 
102
- .btn-#{$name}-text {
103
- --button-highlight: var(--highlight);
95
+ &:focus-visible {
96
+ outline: var(--button-focus-outline-width) solid rgba(var(--button-color-rgb), 0.5);
97
+ }
98
+ }
104
99
 
105
- color: var(--#{$name});
106
- fill: var(--#{$name});
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);
112
+ }
107
113
 
108
- &:hover,
109
- &:active {
110
- background-color: var(--button-highlight);
111
- }
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
+ }
122
+
123
+ .btn-text {
124
+ --button-highlight: var(--highlight);
125
+
126
+ color: var(--button-color);
127
+ fill: var(--button-color);
128
+ background-color: transparent;
129
+ border-color: transparent;
130
+
131
+ &:hover,
132
+ &:active {
133
+ background-color: var(--button-highlight);
134
+ }
112
135
 
113
- &:focus {
114
- outline: 2px solid rgba(var(--#{$name}-rgb), 0.5);
115
- }
136
+ &:focus-visible {
137
+ outline: var(--button-focus-outline-width) solid rgba(var(--button-color-rgb), 0.5);
116
138
  }
117
139
  }
118
140
 
package/scss/components/chip.scss CHANGED
@@ -42,8 +42,7 @@
42
42
  }
43
43
 
44
44
  &.disabled,
45
- &.disabled:hover,
46
- &[active]:hover {
45
+ &.disabled:hover {
47
46
  color: var(--disabled-font-color);
48
47
  outline: 0;
49
48
  background-color: var(--disabled-bg-color);
@@ -72,8 +71,8 @@
72
71
 
73
72
  &:hover,
74
73
  &:active {
75
- background-color: var(--#{$name}-dark);
76
- border-color: var(--#{$name}-dark);
74
+ background-color: var(--#{$name}-hover);
75
+ border-color: var(--#{$name}-hover);
77
76
  }
78
77
  }
79
78
 
@@ -85,8 +84,8 @@
85
84
  &:hover,
86
85
  &:active {
87
86
  color: var(--on-#{$name});
88
- background-color: var(--#{$name}-dark);
89
- border-color: var(--#{$name}-dark);
87
+ background-color: var(--#{$name}-hover);
88
+ border-color: var(--#{$name}-hover);
90
89
  }
91
90
  }
92
91
  }
package/scss/components/form.scss CHANGED
@@ -25,7 +25,7 @@
25
25
 
26
26
  &:focus {
27
27
  background-color: var(--input-bg-color);
28
- border-color: var(--primary-dark);
28
+ border-color: var(--primary-hover);
29
29
  outline: var(--focus-outline);
30
30
  outline-offset: var(--focus-offset);
31
31
  }
package/scss/components/icon-button.scss CHANGED
@@ -9,13 +9,24 @@ $sizes: (
9
9
  );
10
10
 
11
11
  .icon-btn {
12
+ --icon-button-border-width: var(--border-width);
12
13
  --icon-button-padding: 0.25rem;
14
+ --icon-button-width: 40px;
15
+ --icon-button-min-width: 40px;
16
+ --icon-button-height: 40px;
17
+ --icon-button-border-radius: 100%;
18
+
19
+ --icon-button-focus-outline-width: var(--focus-outline-width);
20
+ --icon-button-focus-outline-style: var(--focus-outline-style);
21
+
22
+ --icon-button-svg-width: 18px;
23
+ --icon-button-svg-height: 18px;
13
24
 
14
25
  padding: var(--icon-button-padding);
15
- min-width: 40px;
16
- width: 40px;
17
- height: 40px;
18
- border-radius: 100%;
26
+ min-width: var(--icon-button-min-width);
27
+ width: var(--icon-button-width);
28
+ height: var(--icon-button-height);
29
+ border-radius: var(--icon-button-border-radius);
19
30
  display: inline-flex;
20
31
  align-items: center;
21
32
  justify-content: center;
@@ -33,8 +44,8 @@ $sizes: (
33
44
  touch-action: manipulation; // ios fix
34
45
 
35
46
  svg {
36
- max-width: 18px;
37
- max-height: 18px;
47
+ max-width: var(--icon-button-svg-width);
48
+ max-height: var(--icon-button-svg-width);
38
49
  overflow: visible;
39
50
  }
40
51
 
@@ -44,9 +55,9 @@ $sizes: (
44
55
  background-color: var(--icon-button-highlight, var(--highlight));
45
56
  }
46
57
 
58
+ &:disabled,
47
59
  &[disabled],
48
- &[disabled]:hover,
49
- &[active]:hover {
60
+ &[disabled]:hover {
50
61
  color: var(--gray-800);
51
62
  fill: var(--gray-800);
52
63
  cursor: not-allowed;
@@ -54,12 +65,14 @@ $sizes: (
54
65
  background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
55
66
  }
56
67
 
57
- &:focus {
58
- outline: var(--focus-outline);
68
+ &:focus-visible {
69
+ outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
70
+ var(--icon-button-focus-outline-color);
59
71
  outline-offset: var(--focus-offset);
60
72
  }
61
73
  }
62
74
 
75
+ // sizes
63
76
  @each $name, $value in $sizes {
64
77
  .icon-btn-#{$name} {
65
78
  min-width: $value;
@@ -79,21 +92,12 @@ $sizes: (
79
92
  fill: var(--#{$name});
80
93
  background-color: transparent;
81
94
 
82
- &:active,
83
- &:focus {
84
- outline: 2px solid var(--#{$name}-light);
85
- color: var(--on-#{$name});
86
- }
87
-
88
- &[disabled],
89
- &[disabled]:hover,
90
- &[active]:hover {
91
- color: var(--#{$name}-light);
92
- fill: var(--#{$name}-light);
93
- cursor: not-allowed;
94
- box-shadow: none;
95
- outline: 0;
96
- background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
95
+ &:focus-visible {
96
+ // color: var(--on-#{$name});
97
+ outline: var(--icon-button-focus-outline-width)
98
+ var(--icon-button-focus-outline-style)
99
+ rgba(var(--#{$name}-rgb), 0.5);
100
+ outline-offset: var(--focus-offset);
97
101
  }
98
102
  }
99
103
 
@@ -104,16 +108,18 @@ $sizes: (
104
108
 
105
109
  &:hover,
106
110
  &:active,
107
- &:focus {
108
- outline: 2px solid var(--#{$name}-light);
109
- background-color: var(--#{$name}-dark);
111
+ &:focus-visible {
112
+ outline: var(--icon-button-focus-outline-width)
113
+ var(--icon-button-focus-outline-style)
114
+ var(--#{$name}-hover);
115
+ background-color: var(--#{$name}-hover);
110
116
  }
111
117
 
118
+ &:disabled,
112
119
  &[disabled],
113
- &[disabled]:hover,
114
- &[active]:hover {
115
- color: var(--#{$name}-light);
116
- fill: var(--#{$name}-light);
120
+ &[disabled]:hover {
121
+ color: var(--#{$name}-hover);
122
+ fill: var(--#{$name}-hover);
117
123
  cursor: not-allowed;
118
124
  box-shadow: none;
119
125
  background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
package/scss/components/navbar.scss CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  .navbar .logo:hover {
22
22
  text-decoration: none;
23
- color: var(--primary-dark);
23
+ color: var(--primary-hover);
24
24
  }
25
25
 
26
26
  /** @deprecated - use bg-color instead */
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/utilities.scss CHANGED
@@ -60,23 +60,11 @@
60
60
  fill: var(--#{$name}) !important;
61
61
  }
62
62
 
63
- // deprecated - use bg-opacity-*
64
- .bg-#{$name}-light {
65
- background-color: var(--#{$name}-light);
66
- color: var(--on-#{$name});
67
- }
68
-
69
63
  .bg-#{$name} {
70
64
  color: var(--on-#{$name}) !important;
71
65
  fill: var(--on-#{$name}) !important;
72
66
  background-color: rgba(var(--#{$name}-rgb), var(--bg-opacity)) !important;
73
67
  }
74
-
75
- // deprecated
76
- .bg-#{$name}-dark {
77
- background-color: var(--#{$name}-dark) !important;
78
- color: var(--on-#{$name}) !important;
79
- }
80
68
  }
81
69
 
82
70
  @each $name, $value in map.get(theme.$theme, grays) {
@@ -94,12 +82,6 @@
94
82
  background-color: var(--white) !important;
95
83
  }
96
84
 
97
- /**
98
- bg-dark (bottom -> page background),
99
- bg (middle),
100
- bg-light(top)?
101
- */
102
-
103
85
  .img-responsive {
104
86
  width: 100% !important;
105
87
  }
package/scss/variables.scss CHANGED
@@ -11,10 +11,9 @@
11
11
 
12
12
  :root {
13
13
  @each $name, $value in map.get(theme.$theme, colors) {
14
- --#{$name}-light: #{color.adjust($value, $lightness: 10%)};
15
14
  --#{$name}: #{$value};
16
15
  --#{$name}-rgb: #{to-rgb-string($value)};
17
- --#{$name}-dark: #{color.adjust($value, $lightness: -10%)};
16
+ --#{$name}-hover: #{color.adjust($value, $lightness: -10%)};
18
17
  --text-#{$name}: #{$value};
19
18
  }
20
19
 
@@ -51,12 +50,15 @@
51
50
  --shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
52
51
  --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.175);
53
52
 
54
- --focus-outline: 2px solid rgba(var(--primary-rgb), 0.5);
53
+ --focus-outline-color: rgba(var(--primary-rgb), 0.5);
54
+ --focus-outline-style: solid;
55
+ --focus-outline-width: 2px;
55
56
  --focus-outline-error: 2px solid var(--error-light);
56
57
  --focus-offset: 0px;
57
58
 
58
59
  --container: 900px;
59
60
 
61
+ --transition-duration: 0.2s;
60
62
  --transition-color: color 0.4s, background-color 0.4s;
61
63
 
62
64
  --bg-opacity: 1;