@oardi/css-utils 0.36.0 → 0.37.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 (8) hide show
  1. package/package.json +6 -1
  2. package/scss/components/button.scss +34 -36
  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/utilities.scss +0 -18
  8. package/scss/variables.scss +4 -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.37.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,11 +1,20 @@
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-font-size: var(--font-size);
11
+
5
12
  --button-padding-y: 0.25rem;
6
13
  --button-padding-x: 0.9rem;
7
- --button-font-size: var(--font-size);
8
- --button-border-width: var(--border-width);
14
+
15
+ --button-disabled-font-color: var(--disabled-font-color);
16
+ --button-disabled-bg-color: var(--disabled-bg-color);
17
+ --button-disabled-border-color: var(--disabled-border-color);
9
18
 
10
19
  font-size: var(--button-font-size);
11
20
  display: inline-flex;
@@ -14,50 +23,39 @@
14
23
 
15
24
  border-width: var(--button-border-width);
16
25
  border-style: solid;
17
- background-color: transparent;
18
26
  border-color: transparent;
27
+
28
+ background-color: transparent;
19
29
  color: var(--font-color);
20
30
  transition: var(--transition-color);
21
31
  -webkit-tap-highlight-color: transparent;
22
32
  touch-action: manipulation; // ios fix
23
33
 
34
+ border-radius: var(--button-border-radius);
35
+ line-height: var(--line-height);
36
+ padding: var(--button-padding-y) var(--button-padding-x);
37
+
24
38
  &:hover {
25
39
  cursor: pointer;
26
40
  text-decoration: none;
27
41
  }
28
42
 
29
- &[disabled]:hover,
30
- [disabled]:focus {
31
- cursor: not-allowed;
32
- box-shadow: none;
33
- }
34
-
35
- &:focus {
36
- outline: var(--focus-outline);
43
+ &:focus-visible {
44
+ outline: var(--button-focus-outline-width) var(--button-focus-outline-style) var(--button-focus-outline-color);
37
45
  outline-offset: var(--focus-offset);
38
46
  }
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
47
 
48
+ &:disabled,
53
49
  &[disabled],
54
50
  &[disabled]:hover,
55
- &[active]:hover {
51
+ &[disabled]:focus {
52
+ cursor: not-allowed;
53
+ pointer-events: none;
54
+ box-shadow: none;
56
55
  color: var(--button-disabled-font-color);
57
56
  outline: 0;
58
- box-shadow: none;
59
57
  background-color: var(--button-disabled-bg-color);
60
- border-color: var(--button-disabled-bg-color);
58
+ border-color: var(--button-disabled-border-color);
61
59
  }
62
60
  }
63
61
 
@@ -70,12 +68,12 @@
70
68
 
71
69
  &:hover,
72
70
  &:active {
73
- background-color: var(--#{$name}-dark);
74
- border-color: var(--#{$name}-dark);
71
+ background-color: var(--#{$name}-hover);
72
+ border-color: var(--#{$name}-hover);
75
73
  }
76
74
 
77
- &:focus {
78
- outline: 2px solid rgba(var(--#{$name}-rgb), 0.5);
75
+ &:focus-visible {
76
+ outline: var(--button-focus-outline-width) solid rgba(var(--#{$name}-rgb), 0.5);
79
77
  }
80
78
  }
81
79
 
@@ -88,11 +86,11 @@
88
86
  &:hover,
89
87
  &:active {
90
88
  color: var(--on-#{$name});
91
- background-color: var(--#{$name}-dark);
92
- border-color: var(--#{$name}-dark);
89
+ background-color: var(--#{$name}-hover);
90
+ border-color: var(--#{$name}-hover);
93
91
  }
94
92
 
95
- &:focus {
93
+ &:focus-visible {
96
94
  color: var(--on-#{$name});
97
95
  outline: 2px solid rgba(var(--#{$name}-rgb), 0.5);
98
96
  background-color: var(--#{$name});
@@ -110,7 +108,7 @@
110
108
  background-color: var(--button-highlight);
111
109
  }
112
110
 
113
- &:focus {
111
+ &:focus-visible {
114
112
  outline: 2px solid rgba(var(--#{$name}-rgb), 0.5);
115
113
  }
116
114
  }
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/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,7 +50,9 @@
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