@oardi/css-utils 0.29.8 → 0.30.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/scss/components/breadcrumb.scss +2 -2
  3. package/scss/components/button.scss +2 -2
  4. package/scss/components/card.scss +13 -6
  5. package/scss/components/chip.scss +5 -3
  6. package/scss/components/drawer.scss +5 -2
  7. package/scss/components/expansion-panel.scss +8 -4
  8. package/scss/components/form.scss +13 -6
  9. package/scss/components/icon-button.scss +1 -1
  10. package/scss/spacings.scss +8 -8
  11. package/scss/theme.scss +17 -15
  12. package/scss/utilities.scss +2 -2
  13. package/scss/variables.scss +6 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.29.8",
3
+ "version": "0.30.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/scss/components/breadcrumb.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  .breadcrumb {
5
5
  --breadcrumb-padding-x: 0;
6
6
  --breadcrumb-padding-y: 0;
7
- --breadcrumb-margin-bottom: 1rem;
7
+ --breadcrumb-margin-bottom: var(--spacer-3);
8
8
  --breadcrumb-divider-color: var(--secondary);
9
- --breadcrumb-item-padding-x: 0.5rem;
9
+ --breadcrumb-item-padding-x: var(--spacer-2);
10
10
  --breadcrumb-item-active-color: var(--secondary);
11
11
 
12
12
  display: flex;
package/scss/components/button.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  .btn-base {
5
5
  --button-padding: 5px 14px;
6
6
 
7
- display: flex;
7
+ display: inline-flex;
8
8
  align-items: center;
9
- gap: 0.5rem;
9
+ gap: var(--spacer-2);
10
10
 
11
11
  border-width: var(--button-border-width, var(--border-width));
12
12
  border-style: solid;
package/scss/components/card.scss CHANGED
@@ -1,17 +1,24 @@
1
+ @use '../spacings.scss';
2
+
1
3
  .card {
2
- --card-body-padding: 1rem;
4
+ --card-body-padding: var(--spacer-3);
5
+ --card-bg-color: var(--bg-surface);
6
+ --card-border-width: var(--border-width);
7
+ --card-border-color: var(--border-color);
8
+ --card-border-radius: var(--border-radius);
9
+ --card-bg-hover-color: var(--gray-900);
3
10
 
4
- background-color: var(--card-bg-color, var(--bg-surface));
5
- border: var(--card-border-width, var(--border-width)) solid var(--card-border-color, var(--border-color));
6
- border-radius: var(--border-radius);
11
+ background-color: var(--card-bg-color);
12
+ border: var(--card-border-width) solid var(--card-border-color);
13
+ border-radius: var(--card-border-radius);
7
14
 
8
15
  &.is-hoverable:hover {
9
- background-color: var(--card-bg-hover-color, var(--gray-900));
16
+ background-color: var(--card-bg-hover-color);
10
17
  cursor: pointer;
11
18
  }
12
19
 
13
20
  .card-title + * {
14
- margin-top: 1rem;
21
+ @extend .mt-3;
15
22
  }
16
23
 
17
24
  .card-body {
package/scss/components/chip.scss CHANGED
@@ -4,9 +4,11 @@
4
4
  .chip-base {
5
5
  --chip-label-padding: 0 7px;
6
6
  --chip-border-radius: 16px;
7
+ --chip-border-width: var(--border-width);
8
+ --chip-highlight: var(--highlight);
7
9
 
8
10
  display: inline-flex;
9
- border-width: var(--chip-border-width, var(--border-width));
11
+ border-width: var(--chip-border-width);
10
12
  border-style: solid;
11
13
  background-color: transparent;
12
14
  border-color: transparent;
@@ -33,8 +35,8 @@
33
35
  line-height: var(--line-height);
34
36
 
35
37
  &:hover {
36
- background-color: var(--chip-highlight, var(--highlight));
37
- border-color: var(--chip-highlight, var(--highlight));
38
+ background-color: var(--chip-highlight);
39
+ border-color: var(--chip-highlight);
38
40
  }
39
41
 
40
42
  &.disabled,
package/scss/components/drawer.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  .drawer {
2
+ --drawer-border-right-color: var(--border-color);
3
+ --drawer-bg-color: var(--bg-surface);
4
+
2
5
  display: flex;
3
6
  flex-direction: column;
4
7
  position: fixed;
@@ -7,9 +10,9 @@
7
10
  height: 100dvh;
8
11
  width: min(20rem, 100%);
9
12
  z-index: 1045;
10
- border-right: 1px solid var(--drawer-border-right-color, var(--border-color));
13
+ border-right: 1px solid var(--drawer-border-right-color);
11
14
  justify-content: start;
12
- background-color: var(--drawer-bg-color, var(--bg-surface));
15
+ background-color: var(--drawer-bg-color);
13
16
  transition: left 250ms ease-out;
14
17
 
15
18
  &.open ~ .overlay {
package/scss/components/expansion-panel.scss CHANGED
@@ -1,16 +1,18 @@
1
1
  .expansion-panel-container {
2
2
  display: flex;
3
3
  flex-direction: column;
4
- gap: 0.5rem;
4
+ gap: var(--spacer-2);
5
5
 
6
6
  .expansion-panel {
7
7
  --expansion-panel-header-padding: 1.25rem 2.5rem 1.25rem 1.25rem;
8
8
  --expansion-panel-inner-padding: 1.25rem;
9
+ --expansion-panel-border-color: var(--border-color);
10
+ --expansion-panel-header-bg-color: var(--bg-surface);
9
11
 
10
12
  color: var(--font-color);
11
- border: 1px solid var(--expansion-panel-border-color, var(--border-color));
13
+ border: 1px solid var(--expansion-panel-border-color);
12
14
  border-radius: var(--border-radius);
13
- background-color: var(--expansion-panel-header-bg-color, var(--bg-surface));
15
+ background-color: var(--expansion-panel-header-bg-color);
14
16
  transition: var(--transition-color);
15
17
 
16
18
  &:focus {
@@ -51,7 +53,9 @@
51
53
  }
52
54
 
53
55
  .expansion-panel-content {
54
- background-color: var(--expansion-panel-content-bg-color, var(--bg-surface));
56
+ --expansion-panel-content-bg-color: var(--bg-surface);
57
+
58
+ background-color: var(--expansion-panel-content-bg-color);
55
59
  border-bottom-left-radius: var(--border-radius);
56
60
  border-bottom-right-radius: var(--border-radius);
57
61
 
package/scss/components/form.scss CHANGED
@@ -1,4 +1,11 @@
1
1
  .form-control {
2
+ --input-bg-color: var(--bg-surface);
3
+ --input-border-width: var(--border-width);
4
+ --input-border-color: var(--border-color);
5
+ --form-control-disabled-font-color: var(--disabled-font-color);
6
+ --form-control-disabled-bg-color: var(--disabled-bg-color);
7
+ --form-control-disabled-border-color: var(--disabled-border-color);
8
+
2
9
  display: block;
3
10
  width: 100%;
4
11
  padding: 0.375rem 0.75rem;
@@ -9,14 +16,14 @@
9
16
  -moz-appearance: none;
10
17
  appearance: none;
11
18
  color: var(--font-color);
12
- background-color: var(--input-bg-color, var(--bg-surface));
19
+ background-color: var(--input-bg-color);
13
20
  background-clip: padding-box;
14
- border: var(--input-border-width, var(--border-width)) solid var(--input-border-color, var(--border-color));
21
+ border: var(--input-border-width) solid var(--input-border-color);
15
22
  border-radius: var(--border-radius);
16
23
  transition: transform 0.2s ease;
17
24
 
18
25
  &:focus {
19
- background-color: var(--input-bg-color, var(--bg-surface));
26
+ background-color: var(--input-bg-color);
20
27
  border-color: var(--primary-dark);
21
28
  outline: var(--focus-outline);
22
29
  outline-offset: var(--focus-offset);
@@ -33,9 +40,9 @@
33
40
  }
34
41
 
35
42
  &[disabled] {
36
- color: var(--form-control-disabled-font-color, var(--disabled-font-color));
37
- background-color: var(--form-control-disabled-bg-color, var(--disabled-bg-color));
38
- border-color: var(--form-control-disabled-bg-color, var(--disabled-border-color));
43
+ color: var(--form-control-disabled-font-color);
44
+ background-color: var(--form-control-disabled-bg-color);
45
+ border-color: var(--form-control-disabled-border-color);
39
46
  }
40
47
 
41
48
  &[disabled]:hover,
package/scss/components/icon-button.scss CHANGED
@@ -16,7 +16,7 @@ $sizes: (
16
16
  width: 40px;
17
17
  height: 40px;
18
18
  border-radius: 100%;
19
- display: flex;
19
+ display: inline-flex;
20
20
  align-items: center;
21
21
  justify-content: center;
22
22
 
package/scss/spacings.scss CHANGED
@@ -1,28 +1,28 @@
1
1
  @use 'sass:map';
2
2
  @use './theme.scss';
3
3
 
4
- .ml-auto {
5
- margin-left: auto;
4
+ .ms-auto {
5
+ margin-left: auto !important;
6
6
  }
7
- .mr-auto {
8
- margin-right: auto;
7
+ .me-auto {
8
+ margin-right: auto !important;
9
9
  }
10
10
  .mt-auto {
11
- margin-top: auto;
11
+ margin-top: auto !important;
12
12
  }
13
13
  .mb-auto {
14
- margin-bottom: auto;
14
+ margin-bottom: auto !important;
15
15
  }
16
16
 
17
17
  // margin / padding spacings
18
18
  // i.e. m-2, m-5, p-1, ...
19
19
  @each $key, $value in map.get(theme.$theme, spacings) {
20
20
  .m-#{$key} {
21
- margin: $value;
21
+ margin: $value !important;
22
22
  }
23
23
 
24
24
  .p-#{$key} {
25
- padding: $value;
25
+ padding: $value !important;
26
26
  }
27
27
  }
28
28
 
package/scss/theme.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  @use 'sass:map';
2
2
 
3
+ $spacer: 1rem;
4
+
3
5
  $default-theme: (
4
6
  colors: (
5
7
  'primary': #9163e7,
@@ -11,13 +13,13 @@ $default-theme: (
11
13
  'black': #000000,
12
14
  ),
13
15
  on-colors: (
14
- 'primary': #ffffff,
15
- 'secondary': #ffffff,
16
- 'success': #ffffff,
17
- 'warn': #ffffff,
18
- 'error': #ffffff,
19
- 'white': #000000,
20
- 'black': #ffffff,
16
+ 'on-primary': #ffffff,
17
+ 'on-secondary': #ffffff,
18
+ 'on-success': #ffffff,
19
+ 'on-warn': #ffffff,
20
+ 'on-error': #ffffff,
21
+ 'on-white': #000000,
22
+ 'on-black': #ffffff,
21
23
  ),
22
24
  grays: (
23
25
  50: hsl(0, 0%, 5%),
@@ -42,21 +44,21 @@ $default-theme: (
42
44
  ),
43
45
  directions: (
44
46
  t: top,
45
- r: right,
47
+ e: right,
46
48
  // rename r to e -> end
47
49
  b: bottom,
48
- l: left,
50
+ s: left,
49
51
  // rename l to s -> start
50
52
  // add x for left and right
51
53
  // add y for top and bottom
52
54
  ),
53
55
  spacings: (
54
- 0: 0rem,
55
- 1: 1rem,
56
- 2: 2rem,
57
- 3: 3rem,
58
- 4: 4rem,
59
- 5: 5rem,
56
+ 0: 0,
57
+ 1: $spacer * 0.25,
58
+ 2: $spacer * 0.5,
59
+ 3: $spacer,
60
+ 4: $spacer * 1.5,
61
+ 5: $spacer * 3,
60
62
  // add auto
61
63
  ),
62
64
  positions: (
package/scss/utilities.scss CHANGED
@@ -12,8 +12,8 @@
12
12
  max-width: var(--container);
13
13
  margin-left: auto;
14
14
  margin-right: auto;
15
- padding-left: 1rem;
16
- padding-right: 1rem;
15
+ padding-left: var(--spacer-3);
16
+ padding-right: var(--spacer-3);
17
17
  width: 100%;
18
18
  }
19
19
 
package/scss/variables.scss CHANGED
@@ -19,13 +19,17 @@
19
19
  }
20
20
 
21
21
  @each $name, $value in map.get(theme.$theme, on-colors) {
22
- --on-#{$name}: #{$value};
22
+ --#{$name}: #{$value};
23
23
  }
24
24
 
25
25
  @each $name, $value in map.get(theme.$theme, grays) {
26
26
  --gray-#{$name}: #{$value};
27
27
  }
28
28
 
29
+ @each $name, $value in map.get(theme.$theme, spacings) {
30
+ --spacer-#{$name}: #{$value};
31
+ }
32
+
29
33
  --white: #ffffff;
30
34
  --black: #000000;
31
35
 
@@ -42,7 +46,7 @@
42
46
 
43
47
  --disabled-font-color: var(--gray-600);
44
48
  --disabled-bg-color: var(--gray-800);
45
- --disabled-border-color: var(--gray-800);
49
+ --disabled-border-color: var(--gray-850);
46
50
 
47
51
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
48
52
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);