@oardi/css-utils 0.29.5 → 0.29.7

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 +1 -1
  2. package/scss/components/button.scss +8 -1
  3. package/scss/components/card.scss +12 -9
  4. package/scss/components/chip.scss +2 -3
  5. package/scss/components/form.scss +11 -6
  6. package/scss/components/icon-button.scss +3 -4
  7. package/scss/components/tabs.scss +3 -2
  8. package/scss/typography.scss +8 -2
  9. package/scss/variables.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.29.5",
3
+ "version": "0.29.7",
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
@@ -5,6 +5,10 @@
5
5
  --button-padding: 5px 14px;
6
6
  --button-border-width: 2px;
7
7
 
8
+ display: flex;
9
+ align-items: center;
10
+ gap: 0.5rem;
11
+
8
12
  border-width: var(--button-border-width);
9
13
  border-style: solid;
10
14
  background-color: transparent;
@@ -41,7 +45,7 @@
41
45
  &[disabled],
42
46
  &[disabled]:hover,
43
47
  &[active]:hover {
44
- color: var(--button-disabled-text-color, var(--disabled-text-color));
48
+ color: var(--button-disabled-font-color, var(--disabled-font-color));
45
49
  outline: 0;
46
50
  box-shadow: none;
47
51
  background-color: var(--button-disabled-bg-color, var(--disabled-bg-color));
@@ -52,6 +56,7 @@
52
56
  @each $name, $value in map.get(theme.$theme, colors) {
53
57
  .btn-#{$name} {
54
58
  color: var(--on-#{$name});
59
+ fill: var(--on-#{$name});
55
60
  background-color: var(--#{$name});
56
61
  border-color: var(--#{$name});
57
62
 
@@ -68,6 +73,7 @@
68
73
 
69
74
  .btn-#{$name}-outline {
70
75
  color: var(--#{$name});
76
+ fill: var(--#{$name});
71
77
  background-color: transparent;
72
78
  border-color: var(--#{$name});
73
79
 
@@ -87,6 +93,7 @@
87
93
 
88
94
  .btn-#{$name}-text {
89
95
  color: var(--#{$name});
96
+ fill: var(--#{$name});
90
97
 
91
98
  &:hover,
92
99
  &:active {
package/scss/components/card.scss CHANGED
@@ -1,11 +1,15 @@
1
1
  .card {
2
- --card-border-width: 1px;
3
2
  --card-body-padding: 1rem;
4
3
 
5
4
  background-color: var(--card-bg-color, var(--bg-surface));
6
- border: var(--card-border-width) solid var(--card-border-color, var(--border-color));
5
+ border: var(--card-border-width, var(--border-width)) solid var(--card-border-color, var(--border-color));
7
6
  border-radius: var(--border-radius);
8
7
 
8
+ &.is-hoverable:hover {
9
+ background-color: var(--card-bg-hover-color, var(--gray-900));
10
+ cursor: pointer;
11
+ }
12
+
9
13
  .card-title + * {
10
14
  margin-top: 1rem;
11
15
  }
@@ -16,10 +20,9 @@
16
20
  }
17
21
  }
18
22
 
19
- // [data-theme='red'] {
20
- // .card,
21
- // &.card {
22
- // color: white;
23
- // background-color: red;
24
- // }
25
- // }
23
+ [data-theme='dark'] {
24
+ .card,
25
+ &.card {
26
+ --card-bg-hover-color: var(--gray-350);
27
+ }
28
+ }
package/scss/components/chip.scss CHANGED
@@ -3,11 +3,10 @@
3
3
 
4
4
  .chip-base {
5
5
  --chip-label-padding: 0 7px;
6
- --chip-border-width: 2px;
7
6
  --chip-border-radius: 16px;
8
7
 
9
8
  display: inline-flex;
10
- border-width: var(--button-border-width);
9
+ border-width: var(--chip-border-width, var(--border-width));
11
10
  border-style: solid;
12
11
  background-color: transparent;
13
12
  border-color: transparent;
@@ -41,7 +40,7 @@
41
40
  &.disabled,
42
41
  &.disabled:hover,
43
42
  &[active]:hover {
44
- color: var(--gray-300);
43
+ color: var(--disabled-font-color);
45
44
  outline: 0;
46
45
  background-color: var(--disabled-bg-color);
47
46
  border-color: var(--disabled-border-color);
package/scss/components/form.scss CHANGED
@@ -34,13 +34,16 @@
34
34
  }
35
35
  }
36
36
 
37
- &[disabled],
37
+ &[disabled] {
38
+ color: var(--form-control-disabled-font-color, var(--disabled-font-color));
39
+ background-color: var(--form-control-disabled-bg-color, var(--disabled-bg-color));
40
+ border-color: var(--form-control-disabled-bg-color, var(--disabled-border-color));
41
+ }
42
+
38
43
  &[disabled]:hover,
39
44
  &[disabled]:focus {
40
45
  cursor: not-allowed;
41
46
  outline: 0;
42
- background-color: var(--form-control-disabled-bg-color, var(--disabled-bg-color));
43
- border-color: var(--form-control-disabled-bg-color, var(--disabled-border-color));
44
47
  }
45
48
 
46
49
  &::placeholder {
@@ -108,13 +111,15 @@ textarea.form-control {
108
111
  outline-offset: var(--focus-offset);
109
112
  }
110
113
 
111
- &[disabled],
114
+ &[disabled] {
115
+ background-color: var(--form-check-disabled-bg-color, var(--disabled-bg-color));
116
+ border-color: var(--form-check-disabled-bg-color, var(--disabled-border-color));
117
+ }
118
+
112
119
  &[disabled]:hover,
113
120
  &[disabled]:focus {
114
121
  cursor: not-allowed;
115
122
  outline: 0;
116
- background-color: var(--form-check-disabled-bg-color, var(--disabled-bg-color));
117
- border-color: var(--form-check-disabled-bg-color, var(--disabled-border-color));
118
123
  }
119
124
  }
120
125
 
package/scss/components/icon-button.scss CHANGED
@@ -11,7 +11,6 @@ $sizes: (
11
11
  .icon-btn {
12
12
  --icon-button-padding: 0.25rem;
13
13
  --icon-button-border-width: 2px;
14
- --icon-button-disabled-bg-color: none;
15
14
 
16
15
  padding: var(--icon-button-padding);
17
16
  min-width: 40px;
@@ -53,7 +52,7 @@ $sizes: (
53
52
  fill: var(--gray-800);
54
53
  cursor: not-allowed;
55
54
  outline: 0;
56
- background-color: var(--icon-button-disabled-bg-color);
55
+ background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
57
56
  }
58
57
 
59
58
  &:focus {
@@ -95,7 +94,7 @@ $sizes: (
95
94
  cursor: not-allowed;
96
95
  box-shadow: none;
97
96
  outline: 0;
98
- background-color: var(--icon-button-disabled-bg-color);
97
+ background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
99
98
  }
100
99
  }
101
100
 
@@ -118,7 +117,7 @@ $sizes: (
118
117
  fill: var(--#{$name}-light);
119
118
  cursor: not-allowed;
120
119
  box-shadow: none;
121
- background-color: var(--icon-button-disabled-bg-color);
120
+ background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
122
121
  outline: 0;
123
122
  }
124
123
  }
package/scss/components/tabs.scss CHANGED
@@ -31,11 +31,12 @@
31
31
  &:hover {
32
32
  cursor: pointer;
33
33
  color: var(--primary);
34
- background-color: var(--tab-highlight, var(--highlight));
35
34
  }
36
35
 
37
36
  &.disabled {
38
- color: var(--gray-800);
37
+ color: var(--tab-disabled-font-color, var(--disabled-font-color));
38
+ background-color: var(--tab-disabled-bg-color, var(--disabled-bg-color));
39
+
39
40
  outline: 0;
40
41
  &:hover {
41
42
  cursor: not-allowed;
package/scss/typography.scss CHANGED
@@ -17,14 +17,20 @@ small {
17
17
  }
18
18
 
19
19
  h1,
20
+ .h1,
20
21
  h2,
22
+ .h2,
21
23
  h3,
24
+ .h3,
22
25
  h4,
26
+ .h4,
23
27
  h5,
24
- h6 {
28
+ .h5,
29
+ h6,
30
+ .h6 {
25
31
  margin: 0;
26
32
  line-height: 1.2;
27
- margin-bottom: 1rem;
33
+ margin-bottom: 0.5rem;
28
34
  }
29
35
 
30
36
  h1,
package/scss/variables.scss CHANGED
@@ -38,7 +38,7 @@
38
38
  --border-color: var(--gray-900);
39
39
  --border-radius: 8px;
40
40
 
41
- --disabled-text-color: var(--gray-300);
41
+ --disabled-font-color: var(--gray-600);
42
42
  --disabled-bg-color: var(--gray-800);
43
43
  --disabled-border-color: var(--gray-800);
44
44