@oardi/css-utils 0.44.1 → 0.47.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 (18) hide show
  1. package/package.json +1 -1
  2. package/scss/components/breadcrumb.scss +1 -1
  3. package/scss/components/button.scss +3 -3
  4. package/scss/components/card.scss +1 -1
  5. package/scss/components/chip.scss +2 -2
  6. package/scss/components/expansion-panel.scss +1 -1
  7. package/scss/components/form.scss +3 -3
  8. package/scss/components/icon-button.scss +2 -2
  9. package/scss/components/list.scss +1 -1
  10. package/scss/components/navbar.scss +4 -4
  11. package/scss/components/table.scss +7 -7
  12. package/scss/components/tabs.scss +2 -2
  13. package/scss/components/toast.scss +1 -1
  14. package/scss/index.scss +1 -0
  15. package/scss/text.scss +56 -0
  16. package/scss/typography.scss +33 -3
  17. package/scss/utilities.scss +0 -47
  18. package/scss/variables.scss +5 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.44.1",
3
+ "version": "0.47.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
@@ -6,7 +6,7 @@
6
6
  --breadcrumb-margin-bottom: var(--spacer-3);
7
7
  --breadcrumb-divider-color: var(--text-subtle);
8
8
  --breadcrumb-item-padding-x: var(--spacer-2);
9
- --breadcrumb-item-active-color: var(--font-color-muted);
9
+ --breadcrumb-item-active-color: var(--text-color-muted);
10
10
 
11
11
  display: flex;
12
12
  flex-wrap: wrap;
package/scss/components/button.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  --button-padding-y: 0.25rem;
14
14
  --button-padding-x: 1rem;
15
15
 
16
- --button-disabled-font-color: var(--disabled-font-color);
16
+ --button-disabled-text-color: var(--disabled-text-color);
17
17
  --button-disabled-bg-color: var(--disabled-bg-color);
18
18
  --button-disabled-border-color: var(--disabled-border-color);
19
19
 
@@ -30,7 +30,7 @@
30
30
  border-color: transparent;
31
31
 
32
32
  background-color: transparent;
33
- color: var(--font-color);
33
+ color: var(--text-color);
34
34
  fill: currentColor;
35
35
 
36
36
  transition:
@@ -62,7 +62,7 @@
62
62
  pointer-events: none;
63
63
  box-shadow: none;
64
64
  outline: 0;
65
- color: var(--button-disabled-font-color);
65
+ color: var(--button-disabled-text-color);
66
66
  background-color: var(--button-disabled-bg-color);
67
67
  border-color: var(--button-disabled-border-color);
68
68
  }
package/scss/components/card.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  --card-border-radius: var(--border-radius);
9
9
  --card-bg-hover-color: var(--bg-surface-hover);
10
10
  --card-title-spacer-y: var(--spacer-2);
11
- --card-subtitle-color: var(--font-color-muted);
11
+ --card-subtitle-color: var(--text-color-muted);
12
12
 
13
13
  --card-transition-duration: var(--transition-duration, 0.2s);
14
14
 
package/scss/components/chip.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  border-style: solid;
15
15
  background-color: transparent;
16
16
  border-color: transparent;
17
- color: var(--font-color);
17
+ color: var(--text-color);
18
18
  font-size: var(--chip-label-font-size);
19
19
 
20
20
  transition:
@@ -50,7 +50,7 @@
50
50
 
51
51
  &.disabled,
52
52
  &.disabled:hover {
53
- color: var(--disabled-font-color);
53
+ color: var(--disabled-text-color);
54
54
  outline: 0;
55
55
  background-color: var(--disabled-bg-color);
56
56
  border-color: var(--disabled-border-color);
package/scss/components/expansion-panel.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  --expansion-panel-focus-outline-style: var(--focus-outline-style);
16
16
  --expansion-panel-focus-outline-color: var(--focus-outline-color);
17
17
 
18
- color: var(--font-color);
18
+ color: var(--text-color);
19
19
  border: 1px solid var(--expansion-panel-border-color);
20
20
  border-radius: var(--border-radius);
21
21
  background-color: var(--expansion-panel-header-bg-color);
package/scss/components/form.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  --input-border-width: var(--border-width);
4
4
  --input-border-color: var(--border-color);
5
5
 
6
- --form-control-disabled-font-color: var(--disabled-font-color);
6
+ --form-control-disabled-text-color: var(--disabled-text-color);
7
7
  --form-control-disabled-bg-color: var(--disabled-bg-color);
8
8
  --form-control-disabled-border-color: var(--disabled-border-color);
9
9
 
@@ -24,7 +24,7 @@
24
24
  -webkit-appearance: none;
25
25
  -moz-appearance: none;
26
26
  appearance: none;
27
- color: var(--font-color);
27
+ color: var(--text-color);
28
28
  background-color: var(--input-bg-color);
29
29
  background-clip: padding-box;
30
30
  border: var(--input-border-width) solid var(--input-border-color);
@@ -62,7 +62,7 @@
62
62
  pointer-events: none;
63
63
  box-shadow: none;
64
64
  outline: 0;
65
- color: var(--form-control-disabled-font-color);
65
+ color: var(--form-control-disabled-text-color);
66
66
  background-color: var(--form-control-disabled-bg-color);
67
67
  border-color: var(--form-control-disabled-border-color);
68
68
  }
package/scss/components/icon-button.scss CHANGED
@@ -39,8 +39,8 @@ $sizes: (
39
39
  background-color: transparent;
40
40
  border-color: transparent;
41
41
 
42
- fill: var(--font-color);
43
- color: var(--font-color);
42
+ fill: var(--text-color);
43
+ color: var(--text-color);
44
44
 
45
45
  transition:
46
46
  color var(--icon-button-transition-duration) ease,
package/scss/components/list.scss CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  .list-item {
14
14
  background-color: var(--list-item-bg-color, var(--bg-surface));
15
- color: var(--font-color);
15
+ color: var(--text-color);
16
16
  min-height: 1px;
17
17
  padding: var(--list-item-padding);
18
18
  display: flex;
package/scss/components/navbar.scss CHANGED
@@ -3,9 +3,9 @@
3
3
 
4
4
  .navbar {
5
5
  --navbar-bg-color: var(--bg-surface);
6
- --navbar-font-color: var(--font-color);
6
+ --navbar-text-color: var(--text-color);
7
7
 
8
- color: var(--navbar-font-color);
8
+ color: var(--navbar-text-color);
9
9
  padding-top: 0.6rem;
10
10
  padding-bottom: 0.6rem;
11
11
  background-color: var(--navbar-bg-color);
@@ -14,7 +14,7 @@
14
14
  align-items: center;
15
15
 
16
16
  a {
17
- --link-font-color: var(--navbar-font-color);
17
+ --link-text-color: var(--navbar-text-color);
18
18
  }
19
19
  }
20
20
 
@@ -27,6 +27,6 @@
27
27
  @each $name, $value in map.get(theme.$theme, colors) {
28
28
  .navbar-#{$name} {
29
29
  --navbar-bg-color: var(--#{$name});
30
- --navbar-font-color: var(--on-#{$name});
30
+ --navbar-text-color: var(--on-#{$name});
31
31
  }
32
32
  }
package/scss/components/table.scss CHANGED
@@ -3,14 +3,14 @@
3
3
  --table-bg-type: initial;
4
4
  --table-color-state: initial;
5
5
  --table-bg-state: initial;
6
- --table-color: var(--font-color);
6
+ --table-color: var(--text-color);
7
7
  --table-accent-bg: transparent;
8
- --table-striped-color: var(--font-color);
9
- --table-striped-bg: rgba(var(--font-color-rgb), 0.05); // TODO
10
- --table-active-color: var(--font-color);
11
- --table-active-bg: rgba(var(--font-color-rgb), 0.1); // TODO
12
- --table-hover-color: var(--font-color);
13
- --table-hover-bg: rgba(var(--font-color-rgb), 0.075); // TODO
8
+ --table-striped-color: var(--text-color);
9
+ --table-striped-bg: rgba(var(--text-color-rgb), 0.05); // TODO
10
+ --table-active-color: var(--text-color);
11
+ --table-active-bg: rgba(var(--text-color-rgb), 0.1); // TODO
12
+ --table-hover-color: var(--text-color);
13
+ --table-hover-bg: rgba(var(--text-color-rgb), 0.075); // TODO
14
14
 
15
15
  width: 100%;
16
16
  margin-bottom: 1rem;
package/scss/components/tabs.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  .tab {
9
9
  --tab-transition-duration: var(--transition-duration, 0.2s);
10
10
 
11
- color: var(--font-color);
11
+ color: var(--text-color);
12
12
  background-color: var(--tab-bg-color, var(--bg-surface));
13
13
  text-align: center;
14
14
 
@@ -40,7 +40,7 @@
40
40
  }
41
41
 
42
42
  &.disabled {
43
- color: var(--tab-disabled-font-color, var(--disabled-font-color));
43
+ color: var(--tab-disabled-text-color, var(--disabled-text-color));
44
44
  background-color: var(--tab-disabled-bg-color, var(--disabled-bg-color));
45
45
 
46
46
  outline: 0;
package/scss/components/toast.scss CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  background-color: var(--toast-color);
16
16
  border-color: transparent;
17
- color: var(--toast-on-color, var(--font-color));
17
+ color: var(--toast-on-color, var(--text-color));
18
18
  box-shadow: var(--shadow);
19
19
  padding: var(--toast-padding-y) var(--toast-padding-x);
20
20
  border-radius: var(--border-radius);
package/scss/index.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @forward './variables.scss';
3
3
  @forward './reboot.scss';
4
4
  @forward './typography.scss';
5
+ @forward './text.scss';
5
6
  @forward './utilities.scss';
6
7
  @forward './spacings.scss';
7
8
  @forward './spacings-responsive.scss';
package/scss/text.scss ADDED
@@ -0,0 +1,56 @@
1
+ @use 'sass:map';
2
+ @use './theme.scss';
3
+
4
+ .text-center {
5
+ text-align: center !important;
6
+ }
7
+
8
+ .text-start {
9
+ text-align: left !important;
10
+ }
11
+
12
+ .text-end {
13
+ text-align: right !important;
14
+ }
15
+
16
+ .text-body {
17
+ color: var(--text-color);
18
+ }
19
+
20
+ .text-inverse {
21
+ color: var(--text-color-inverse);
22
+ }
23
+
24
+ .text-muted {
25
+ color: var(--text-color-muted);
26
+ }
27
+
28
+ .text-subtle {
29
+ color: var(--text-color-subtle);
30
+ }
31
+
32
+ .text-inherit {
33
+ color: inherit;
34
+ }
35
+
36
+ .text-white {
37
+ color: var(--white) !important;
38
+ }
39
+
40
+ .text-black {
41
+ color: var(--black) !important;
42
+ }
43
+
44
+ @each $name, $value in map.get(theme.$theme, colors) {
45
+ .text-#{$name} {
46
+ color: var(--#{$name}) !important;
47
+ fill: var(--#{$name}) !important;
48
+ }
49
+ }
50
+
51
+ @each $name, $value in map.get(theme.$theme, grays) {
52
+ .text-gray-#{$name} {
53
+ color: var(--gray-#{$name});
54
+ fill: var(--gray-#{$name});
55
+ }
56
+ }
package/scss/typography.scss CHANGED
@@ -5,6 +5,14 @@
5
5
  --h4: 500 1.35rem var(--font-family);
6
6
  --h5: 500 1.25rem var(--font-family);
7
7
  --h6: 500 1rem var(--font-family);
8
+
9
+ --font-size-xs: 0.75rem;
10
+ --font-size-sm: 0.875rem;
11
+ --font-size-md: 1rem;
12
+ --font-size-lg: 1.125rem;
13
+ --font-size-xl: 1.25rem;
14
+ --font-size-xxl: 1.5rem;
15
+ --font-size-xxxl: 2rem;
8
16
  }
9
17
 
10
18
  small {
@@ -64,8 +72,30 @@ h6,
64
72
  line-height: 1.45;
65
73
  }
66
74
 
75
+ .text-xs {
76
+ font-size: var(--font-size-xs);
77
+ }
78
+ .text-sm {
79
+ font-size: var(--font-size-sm);
80
+ }
81
+ .text-md {
82
+ font-size: var(--font-size-md);
83
+ }
84
+ .text-lg {
85
+ font-size: var(--font-size-lg);
86
+ }
87
+ .text-xl {
88
+ font-size: var(--font-size-xl);
89
+ }
90
+ .text-xxl {
91
+ font-size: var(--font-size-xxl);
92
+ }
93
+ .text-xxxl {
94
+ font-size: var(--font-size-xxxl);
95
+ }
96
+
67
97
  a {
68
- --link-font-color: var(--primary);
98
+ --link-text-color: var(--primary);
69
99
 
70
100
  --link-focus-outline-width: var(--focus-outline-width);
71
101
  --link-focus-outline-style: var(--focus-outline-style);
@@ -74,8 +104,8 @@ a {
74
104
  --link-transition-duration: var(--transition-duration, 0.18s);
75
105
  --link-transition-easing: var(--transition-easing, ease-out);
76
106
 
77
- color: var(--link-font-color);
78
- fill: var(--link-font-color);
107
+ color: var(--link-text-color);
108
+ fill: var(--link-text-color);
79
109
 
80
110
  text-decoration: none;
81
111
 
package/scss/utilities.scss CHANGED
@@ -16,43 +16,6 @@
16
16
  padding-right: var(--spacer-3);
17
17
  width: 100%;
18
18
  }
19
-
20
- .text-center {
21
- text-align: center !important;
22
- }
23
-
24
- .text-start {
25
- text-align: left !important;
26
- }
27
-
28
- .text-end {
29
- text-align: right !important;
30
- }
31
-
32
- .text-white {
33
- color: var(--white) !important;
34
- }
35
-
36
- .text-black {
37
- color: var(--black) !important;
38
- }
39
-
40
- .text-body {
41
- color: var(--font-color);
42
- }
43
-
44
- .text-muted {
45
- color: var(--font-color-muted);
46
- }
47
-
48
- .text-subtle {
49
- color: var(--font-color-subtle);
50
- }
51
-
52
- .text-inherit {
53
- color: inherit;
54
- }
55
-
56
19
  .bg-opacity-10 {
57
20
  --bg-opacity: 0.1 !important;
58
21
  }
@@ -70,11 +33,6 @@
70
33
  }
71
34
 
72
35
  @each $name, $value in map.get(theme.$theme, colors) {
73
- .text-#{$name} {
74
- color: var(--#{$name}) !important;
75
- fill: var(--#{$name}) !important;
76
- }
77
-
78
36
  .bg-#{$name} {
79
37
  color: var(--on-#{$name}) !important;
80
38
  fill: var(--on-#{$name}) !important;
@@ -83,11 +41,6 @@
83
41
  }
84
42
 
85
43
  @each $name, $value in map.get(theme.$theme, grays) {
86
- .text-gray-#{$name} {
87
- color: var(--gray-#{$name});
88
- fill: var(--gray-#{$name});
89
- }
90
-
91
44
  .bg-gray-#{$name} {
92
45
  background-color: var(--gray-#{$name}) !important;
93
46
  }
package/scss/variables.scss CHANGED
@@ -43,9 +43,10 @@
43
43
  --bg-surface-hover: var(--gray-50);
44
44
  --bg-surface-active: var(--gray-100);
45
45
 
46
- --font-color: var(--gray-900);
47
- --font-color-muted: var(--gray-500);
48
- --font-color-subtle: var(--gray-400);
46
+ --text-color: var(--gray-900);
47
+ --text-color-inverse: var(--gray-50);
48
+ --text-color-muted: var(--gray-500);
49
+ --text-color-subtle: var(--gray-400);
49
50
 
50
51
  --highlight: rgba(0, 0, 0, 0.15);
51
52
 
@@ -56,7 +57,7 @@
56
57
  --border-radius: 0.5rem;
57
58
  --border-radius-lg: 0.75rem;
58
59
 
59
- --disabled-font-color: var(--gray-600);
60
+ --disabled-text-color: var(--gray-600);
60
61
  --disabled-bg-color: var(--gray-300);
61
62
  --disabled-border-color: var(--gray-50);
62
63