@oardi/css-utils 0.27.1 → 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 (13) 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/index.scss +25 -25
  11. package/scss/theme.scss +33 -13
  12. package/scss/utilities.scss +5 -1
  13. package/scss/variables.scss +9 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.27.1",
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/index.scss CHANGED
@@ -1,26 +1,26 @@
1
- @use './theme.scss';
2
- @use './variables.scss';
3
- @use './reboot.scss';
4
- @use './typography.scss';
5
- @use './utilities.scss';
6
- @use './spacings.scss';
7
- @use './spacings-responsive.scss';
8
- @use './flex.scss';
9
- @use './flex-responsive.scss';
10
- @use './grid.scss';
11
- @use './grid-responsive.scss';
1
+ @forward './theme.scss';
2
+ @forward './variables.scss';
3
+ @forward './reboot.scss';
4
+ @forward './typography.scss';
5
+ @forward './utilities.scss';
6
+ @forward './spacings.scss';
7
+ @forward './spacings-responsive.scss';
8
+ @forward './flex.scss';
9
+ @forward './flex-responsive.scss';
10
+ @forward './grid.scss';
11
+ @forward './grid-responsive.scss';
12
12
 
13
- @use './components/breadcrumb.scss';
14
- @use './components/button.scss';
15
- @use './components/card.scss';
16
- @use './components/chip.scss';
17
- @use './components/drawer.scss';
18
- @use './components/expansion-panel.scss';
19
- @use './components/form.scss';
20
- @use './components/icon-button.scss';
21
- @use './components/list.scss';
22
- @use './components/navbar.scss';
23
- @use './components/overlay.scss';
24
- @use './components/tabs.scss';
25
- @use './components/table.scss';
26
- @use './components/toast.scss';
13
+ @forward './components/breadcrumb.scss';
14
+ @forward './components/button.scss';
15
+ @forward './components/card.scss';
16
+ @forward './components/chip.scss';
17
+ @forward './components/drawer.scss';
18
+ @forward './components/expansion-panel.scss';
19
+ @forward './components/form.scss';
20
+ @forward './components/icon-button.scss';
21
+ @forward './components/list.scss';
22
+ @forward './components/navbar.scss';
23
+ @forward './components/overlay.scss';
24
+ @forward './components/tabs.scss';
25
+ @forward './components/table.scss';
26
+ @forward './components/toast.scss';
package/scss/theme.scss CHANGED
@@ -1,10 +1,14 @@
1
- $theme: (
1
+ @use 'sass:map';
2
+
3
+ $default-theme: (
2
4
  colors: (
3
- primary: #715acd,
5
+ primary: #6c5ce7,
4
6
  secondary: #595959,
5
7
  success: #16a085,
6
- warn: #f6d545,
8
+ warn: #ffc557,
7
9
  error: #f03e3e,
10
+ light: hsl(0, 0%, 95%),
11
+ dark: hsl(0, 0%, 5%),
8
12
  ),
9
13
  on-colors: (
10
14
  primary: #ffffff,
@@ -12,17 +16,29 @@ $theme: (
12
16
  success: #ffffff,
13
17
  warn: #ffffff,
14
18
  error: #ffffff,
19
+ light: #000000,
20
+ dark: #ffffff,
15
21
  ),
16
22
  grays: (
17
- 10: hsl(0, 0%, 10%),
18
- 20: hsl(0, 0%, 20%),
19
- 30: hsl(0, 0%, 30%),
20
- 40: hsl(0, 0%, 40%),
21
- 50: hsl(0, 0%, 50%),
22
- 60: hsl(0, 0%, 60%),
23
- 70: hsl(0, 0%, 70%),
24
- 80: hsl(0, 0%, 80%),
25
- 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%),
26
42
  ),
27
43
  directions: (
28
44
  t: top,
@@ -67,4 +83,8 @@ $theme: (
67
83
  xl: 1200px,
68
84
  xxl: 1400px,
69
85
  ),
70
- ) !default;
86
+ );
87
+
88
+ $theme: () !default; // user overrides via with()
89
+
90
+ $theme: map.deep-merge($default-theme, $theme);
package/scss/utilities.scss CHANGED
@@ -84,13 +84,17 @@ bg-light(top)?
84
84
  }
85
85
 
86
86
  .rounded-circle {
87
- border-radius: 50%;
87
+ border-radius: 50% !important;
88
88
  }
89
89
 
90
90
  .rounded {
91
91
  border-radius: var(--border-radius) !important;
92
92
  }
93
93
 
94
+ .rounded-50 {
95
+ border-radius: 50px !important;
96
+ }
97
+
94
98
  .shadow-none {
95
99
  box-shadow: none !important;
96
100
  }
package/scss/variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use 'sass:color';
2
2
  @use 'sass:map';
3
- @use './theme.scss';
3
+ @use './theme.scss' as theme;
4
4
 
5
5
  :root {
6
6
  @each $name, $value in map.get(theme.$theme, colors) {
@@ -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);