@oardi/css-utils 0.27.2 → 0.28.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 (11) hide show
  1. package/package.json +1 -1
  2. package/readme.md +4 -0
  3. package/scss/components/button.scss +9 -16
  4. package/scss/components/card.scss +8 -0
  5. package/scss/components/chip.scss +3 -7
  6. package/scss/components/form.scss +2 -2
  7. package/scss/components/icon-button.scss +3 -4
  8. package/scss/components/navbar.scss +10 -0
  9. package/scss/components/tabs.scss +2 -3
  10. package/scss/theme.scss +25 -11
  11. package/scss/variables.scss +8 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.27.2",
3
+ "version": "0.28.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/readme.md CHANGED
@@ -47,6 +47,10 @@ will render as:
47
47
 
48
48
  <button class="btn btn-primary">some button text</button>
49
49
 
50
+ ### Maintainer
51
+
52
+ Developed and maintained by [Ardian Shala](https://github.com/oardi)
53
+
50
54
  ### Credits and Inspiration
51
55
 
52
56
  The main Frameworks which inspired me to create this set of CSS Utility Classes:
package/scss/components/button.scss CHANGED
@@ -4,9 +4,6 @@
4
4
  .btn-base {
5
5
  --button-padding: 5px 14px;
6
6
  --button-border-width: 2px;
7
- --button-text-highlight: var(--gray-90);
8
- --button-icon-highlight: var(--gray-90);
9
- --button-disabled-bg-color: var(--gray-80);
10
7
 
11
8
  border-width: var(--button-border-width);
12
9
  border-style: solid;
@@ -37,23 +34,18 @@
37
34
  .btn {
38
35
  @extend .btn-base;
39
36
 
40
- border-radius: var(--border-radius);
37
+ border-radius: var(--button-border-radius, var(--border-radius));
41
38
  line-height: var(--line-height);
42
39
  padding: var(--button-padding);
43
40
 
44
- &:hover {
45
- background-color: var(--button-text-highlight);
46
- border-color: var(--button-text-highlight);
47
- }
48
-
49
41
  &[disabled],
50
42
  &[disabled]:hover,
51
43
  &[active]:hover {
52
- color: var(--gray-30);
44
+ color: var(--gray-300);
53
45
  outline: 0;
54
46
  box-shadow: none;
55
- background-color: var(--button-disabled-bg-color);
56
- border-color: var(--button-disabled-bg-color);
47
+ background-color: var(--button-disabled-bg-color, var(--disabled-bg-color));
48
+ border-color: var(--button-disabled-bg-color, var(--disabled-border-color));
57
49
  }
58
50
  }
59
51
 
@@ -96,12 +88,13 @@
96
88
  .btn-#{$name}-text {
97
89
  color: var(--#{$name});
98
90
 
91
+ &:hover,
92
+ &:active {
93
+ background-color: var(--button-highlight, var(--highlight));
94
+ }
95
+
99
96
  &:focus {
100
97
  outline: 2px solid var(--#{$name}-light);
101
98
  }
102
99
  }
103
100
  }
104
-
105
- .btn-rounded {
106
- border-radius: 50px;
107
- }
package/scss/components/card.scss CHANGED
@@ -15,3 +15,11 @@
15
15
  padding: var(--card-body-padding);
16
16
  }
17
17
  }
18
+
19
+ // [data-theme='red'] {
20
+ // .card,
21
+ // &.card {
22
+ // color: white;
23
+ // background-color: red;
24
+ // }
25
+ // }
package/scss/components/chip.scss CHANGED
@@ -3,7 +3,6 @@
3
3
 
4
4
  .chip-base {
5
5
  --chip-label-padding: 0 7px;
6
- --chip-text-highlight: var(--gray-90);
7
6
  --chip-border-width: 2px;
8
7
  --chip-border-radius: 16px;
9
8
 
@@ -17,7 +16,6 @@
17
16
  -webkit-tap-highlight-color: transparent;
18
17
  touch-action: manipulation; // ios fix
19
18
 
20
- // TODO - don´t add hover on default
21
19
  &:hover {
22
20
  cursor: pointer;
23
21
  text-decoration: none;
@@ -26,8 +24,6 @@
26
24
  &.disabled:hover,
27
25
  .disabled:focus {
28
26
  cursor: not-allowed;
29
- // background-color: var(--chip-disabled-bg-color, var(--bg-surface));
30
- // border-color: var(--chip-border-color, var(--border-color));
31
27
  }
32
28
  }
33
29
 
@@ -38,14 +34,14 @@
38
34
  line-height: var(--line-height);
39
35
 
40
36
  &:hover {
41
- background-color: var(--button-text-highlight);
42
- border-color: var(--button-text-highlight);
37
+ background-color: var(--chip-highlight, var(--highlight));
38
+ border-color: var(--chip-highlight, var(--highlight));
43
39
  }
44
40
 
45
41
  &.disabled,
46
42
  &.disabled:hover,
47
43
  &[active]:hover {
48
- color: var(--gray-30);
44
+ color: var(--gray-300);
49
45
  outline: 0;
50
46
  background-color: var(--disabled-bg-color);
51
47
  border-color: var(--disabled-border-color);
package/scss/components/form.scss CHANGED
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  &::placeholder {
47
- color: var(--gray-50);
47
+ color: var(--gray-500);
48
48
  }
49
49
  }
50
50
 
@@ -113,7 +113,7 @@ textarea.form-control {
113
113
  &[disabled]:focus {
114
114
  cursor: not-allowed;
115
115
  outline: 0;
116
- background-color: var(--gray-90);
116
+ background-color: var(--gray-900);
117
117
  border-color: var(--disabled-border-color);
118
118
  }
119
119
  }
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-highlight: var(--gray-90);
15
14
  --icon-button-disabled-bg-color: none;
16
15
 
17
16
  fill: var(--font-color);
@@ -42,14 +41,14 @@ $sizes: (
42
41
  &:hover {
43
42
  cursor: pointer;
44
43
  text-decoration: none;
45
- background-color: var(--icon-button-highlight);
44
+ background-color: var(--icon-button-highlight, var(--highlight));
46
45
  }
47
46
 
48
47
  &[disabled],
49
48
  &[disabled]:hover,
50
49
  &[active]:hover {
51
- color: var(--gray-80);
52
- fill: var(--gray-80);
50
+ color: var(--gray-800);
51
+ fill: var(--gray-800);
53
52
  cursor: not-allowed;
54
53
  outline: 0;
55
54
  background-color: var(--icon-button-disabled-bg-color);
package/scss/components/navbar.scss CHANGED
@@ -1,3 +1,6 @@
1
+ @use 'sass:map';
2
+ @use '../theme.scss';
3
+
1
4
  .navbar {
2
5
  padding-top: 0.6rem;
3
6
  padding-bottom: 0.6rem;
@@ -12,3 +15,10 @@
12
15
  text-decoration: none;
13
16
  color: var(--primary-dark);
14
17
  }
18
+
19
+ @each $name, $value in map.get(theme.$theme, colors) {
20
+ .navbar-#{$name} {
21
+ color: var(--on-#{$name});
22
+ background-color: var(--#{$name});
23
+ }
24
+ }
package/scss/components/tabs.scss CHANGED
@@ -1,6 +1,4 @@
1
1
  .tabs {
2
- --tab-highlight: var(--highlight);
3
-
4
2
  display: flex;
5
3
  cursor: pointer;
6
4
  -webkit-tap-highlight-color: transparent;
@@ -33,10 +31,11 @@
33
31
  &:hover {
34
32
  cursor: pointer;
35
33
  color: var(--primary);
34
+ background-color: var(--tab-highlight, var(--highlight));
36
35
  }
37
36
 
38
37
  &.disabled {
39
- color: var(--gray-80);
38
+ color: var(--gray-800);
40
39
  outline: 0;
41
40
  &:hover {
42
41
  cursor: not-allowed;
package/scss/theme.scss CHANGED
@@ -2,11 +2,13 @@
2
2
 
3
3
  $default-theme: (
4
4
  colors: (
5
- primary: #715acd,
5
+ primary: #6c5ce7,
6
6
  secondary: #595959,
7
7
  success: #16a085,
8
- warn: #f6d545,
8
+ warn: #ffc557,
9
9
  error: #f03e3e,
10
+ light: hsl(0, 0%, 95%),
11
+ dark: hsl(0, 0%, 5%),
10
12
  ),
11
13
  on-colors: (
12
14
  primary: #ffffff,
@@ -14,17 +16,29 @@ $default-theme: (
14
16
  success: #ffffff,
15
17
  warn: #ffffff,
16
18
  error: #ffffff,
19
+ light: #000000,
20
+ dark: #ffffff,
17
21
  ),
18
22
  grays: (
19
- 10: hsl(0, 0%, 10%),
20
- 20: hsl(0, 0%, 20%),
21
- 30: hsl(0, 0%, 30%),
22
- 40: hsl(0, 0%, 40%),
23
- 50: hsl(0, 0%, 50%),
24
- 60: hsl(0, 0%, 60%),
25
- 70: hsl(0, 0%, 70%),
26
- 80: hsl(0, 0%, 80%),
27
- 90: hsl(0, 0%, 90%),
23
+ 50: hsl(0, 0%, 5%),
24
+ 100: hsl(0, 0%, 10%),
25
+ 150: hsl(0, 0%, 15%),
26
+ 200: hsl(0, 0%, 20%),
27
+ 250: hsl(0, 0%, 25%),
28
+ 300: hsl(0, 0%, 30%),
29
+ 350: hsl(0, 0%, 35%),
30
+ 400: hsl(0, 0%, 40%),
31
+ 450: hsl(0, 0%, 45%),
32
+ 500: hsl(0, 0%, 50%),
33
+ 550: hsl(0, 0%, 55%),
34
+ 600: hsl(0, 0%, 60%),
35
+ 650: hsl(0, 0%, 65%),
36
+ 700: hsl(0, 0%, 70%),
37
+ 750: hsl(0, 0%, 75%),
38
+ 800: hsl(0, 0%, 80%),
39
+ 850: hsl(0, 0%, 85%),
40
+ 900: hsl(0, 0%, 90%),
41
+ 950: hsl(0, 0%, 95%),
28
42
  ),
29
43
  directions: (
30
44
  t: top,
package/scss/variables.scss CHANGED
@@ -23,19 +23,19 @@
23
23
 
24
24
  --bg-surface: var(--white);
25
25
 
26
- --font-color: var(--gray-10);
26
+ --font-color: var(--gray-100);
27
27
  --body-bg-color: #ffffff;
28
28
 
29
- --highlight: rgba(189, 189, 189, 0.1);
30
- --border-color: var(--gray-90);
31
- --border-radius: 6px;
29
+ --highlight: var(--gray-900);
30
+ --border-color: var(--gray-900);
31
+ --border-radius: 8px;
32
32
 
33
- --disabled-bg-color: var(--gray-80);
34
- --disabled-border-color: var(--gray-80);
33
+ --disabled-bg-color: var(--gray-800);
34
+ --disabled-border-color: var(--gray-800);
35
35
 
36
- --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
37
36
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
38
- --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
37
+ --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
38
+ --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.175);
39
39
 
40
40
  --focus-outline: 2px solid var(--primary-light);
41
41
  --focus-outline-error: 2px solid var(--error-light);