@oardi/css-utils 0.73.1 → 0.75.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.
- package/package.json +1 -1
- package/readme.md +56 -69
- package/scss/components/button.scss +3 -5
- package/scss/components/icon-button.scss +3 -5
- package/scss/components/modal.scss +1 -1
- package/scss/components/overlay.scss +1 -1
- package/scss/components/table.scss +6 -6
- package/scss/components/tooltip.scss +1 -1
- package/scss/utilities.scss +1 -1
- package/scss/variables.scss +2 -12
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,127 +1,114 @@
|
|
|
1
1
|
# CSS Utils
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
CSS Utils is a lightweight SCSS toolkit with utility classes, responsive helpers and reusable component styles. CSS variables and cascade layers make the system easy to customize without repetitive application CSS.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## What it includes
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- Utilities for colors, typography, spacing, display, flex and grid
|
|
8
|
+
- Mobile-first responsive variants for layout and spacing
|
|
9
|
+
- Components for buttons, cards, forms, badges, tabs, toasts and more
|
|
10
|
+
- Global and component-specific design tokens
|
|
11
|
+
- A predefined cascade order: `reset`, `base`, `components`, then `utilities`
|
|
8
12
|
|
|
9
|
-
|
|
10
|
-
- Mobile-first responsive variants
|
|
11
|
-
- Reusable component styles for buttons, cards, forms, badges, tabs, toasts and more
|
|
12
|
-
- Customizable design tokens based on CSS variables
|
|
13
|
-
- Organized with CSS cascade layers
|
|
13
|
+
## Install
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
- Browse the showcase: [css-utils.oardi.com](https://css-utils.oardi.com/)
|
|
18
|
-
- Try it on StackBlitz: [StackBlitz Demo](https://stackblitz.com/edit/oardi-css-utils/)
|
|
19
|
-
|
|
20
|
-
## Setup
|
|
21
|
-
|
|
22
|
-
### Install npm package
|
|
15
|
+
CSS Utils ships as SCSS. Install the package and, if your toolchain does not already provide it, Dart Sass:
|
|
23
16
|
|
|
24
17
|
```bash
|
|
25
18
|
npm i @oardi/css-utils
|
|
19
|
+
npm i -D sass
|
|
26
20
|
```
|
|
27
21
|
|
|
28
|
-
|
|
22
|
+
## Add the styles
|
|
29
23
|
|
|
30
|
-
Load
|
|
24
|
+
Load CSS Utils once through your application's global stylesheet:
|
|
31
25
|
|
|
32
26
|
```scss
|
|
33
|
-
|
|
27
|
+
// styles.scss
|
|
28
|
+
@use '@oardi/css-utils';
|
|
34
29
|
```
|
|
35
30
|
|
|
36
|
-
|
|
31
|
+
No additional cascade-layer setup is required.
|
|
37
32
|
|
|
38
|
-
|
|
33
|
+
When compiling directly with the Dart Sass CLI, use the Node package importer:
|
|
39
34
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
```html
|
|
43
|
-
<div class="text-center bg-primary p-3">some text</div>
|
|
35
|
+
```scss
|
|
36
|
+
@use 'pkg:@oardi/css-utils';
|
|
44
37
|
```
|
|
45
38
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
### Responsive utilities
|
|
49
|
-
|
|
50
|
-
```html
|
|
51
|
-
<div class="grid">
|
|
52
|
-
<div class="col-12 col-md-6 col-lg-4">Responsive column</div>
|
|
53
|
-
</div>
|
|
39
|
+
```bash
|
|
40
|
+
sass --pkg-importer=node styles.scss styles.css
|
|
54
41
|
```
|
|
55
42
|
|
|
56
|
-
|
|
43
|
+
## Build your first interface
|
|
57
44
|
|
|
58
|
-
|
|
45
|
+
Combine components and utilities directly in your markup:
|
|
59
46
|
|
|
60
47
|
```html
|
|
61
|
-
<
|
|
48
|
+
<div class="card">
|
|
49
|
+
<div class="card-body d-flex flex-column gap-2">
|
|
50
|
+
<p class="h5 card-title">Welcome</p>
|
|
51
|
+
<p class="mb-0 text-muted">Your CSS Utils setup is ready.</p>
|
|
52
|
+
<button class="btn btn-primary btn-solid" type="button">
|
|
53
|
+
<span>Continue</span>
|
|
54
|
+
</button>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
62
57
|
```
|
|
63
58
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
Many components follow the same pattern:
|
|
59
|
+
Here, `.card` and `.btn` provide reusable component styles, while `.d-flex`, `.gap-2` and `.text-muted` make focused adjustments.
|
|
67
60
|
|
|
68
|
-
|
|
69
|
-
Base class → .btn
|
|
70
|
-
Color class → .btn-primary
|
|
71
|
-
Variant class → .btn-solid
|
|
72
|
-
Size class → .btn-sm
|
|
73
|
-
State class → .is-active
|
|
74
|
-
```
|
|
61
|
+
## Use responsive utilities
|
|
75
62
|
|
|
76
|
-
|
|
63
|
+
Responsive utilities are mobile-first. Classes without a breakpoint apply at every size; breakpoint variants apply from their breakpoint upward:
|
|
77
64
|
|
|
78
65
|
```html
|
|
79
|
-
<
|
|
66
|
+
<div class="grid">
|
|
67
|
+
<div class="col-12 col-md-6 col-lg-4">Responsive column</div>
|
|
68
|
+
</div>
|
|
80
69
|
```
|
|
81
70
|
|
|
82
|
-
|
|
71
|
+
## Customize the design
|
|
83
72
|
|
|
84
|
-
|
|
73
|
+
Define overrides after the library import to adapt the global design tokens:
|
|
85
74
|
|
|
86
75
|
```scss
|
|
76
|
+
@use '@oardi/css-utils';
|
|
77
|
+
|
|
87
78
|
:root {
|
|
88
79
|
--primary: #0057ff;
|
|
80
|
+
--primary-hover: #0047d6;
|
|
81
|
+
--primary-active: #003cad;
|
|
89
82
|
--on-primary: #ffffff;
|
|
90
83
|
|
|
91
84
|
--bg-body: #fdfdfd;
|
|
92
|
-
--bg-surface: #ffffff;
|
|
93
|
-
--bg-inverse: var(--gray-900);
|
|
94
|
-
|
|
95
|
-
--text-color: var(--gray-900);
|
|
96
|
-
--text-inverse: #ffffff;
|
|
97
|
-
|
|
98
85
|
--border-radius: 0.5rem;
|
|
99
86
|
}
|
|
100
87
|
```
|
|
101
88
|
|
|
102
|
-
|
|
89
|
+
Component tokens can be changed locally without affecting the rest of the interface:
|
|
103
90
|
|
|
104
91
|
```html
|
|
105
92
|
<button class="btn btn-primary btn-solid" type="button" style="--button-border-radius: 9999px;">
|
|
106
|
-
Rounded button
|
|
93
|
+
<span>Rounded button</span>
|
|
107
94
|
</button>
|
|
108
95
|
```
|
|
109
96
|
|
|
110
|
-
##
|
|
111
|
-
|
|
112
|
-
The full documentation and showcase are available at:
|
|
97
|
+
## Learn more
|
|
113
98
|
|
|
114
|
-
[
|
|
99
|
+
- [Full documentation and showcase](https://css-utils.oardi.com/)
|
|
100
|
+
- [Get-started guide](https://css-utils.oardi.com/get-started)
|
|
101
|
+
- [Utilities, components and design tokens](https://css-utils.oardi.com/utilities/core-concepts)
|
|
102
|
+
- [StackBlitz demo](https://stackblitz.com/edit/oardi-css-utils/)
|
|
115
103
|
|
|
116
104
|
## Maintainer
|
|
117
105
|
|
|
118
|
-
Developed and maintained by [Ardian Shala](https://github.com/oardi)
|
|
106
|
+
Developed and maintained by [Ardian Shala](https://github.com/oardi).
|
|
107
|
+
|
|
108
|
+
## License
|
|
119
109
|
|
|
120
|
-
|
|
110
|
+
Released under the [MIT License](LICENSE.md).
|
|
121
111
|
|
|
122
|
-
|
|
112
|
+
## Credits
|
|
123
113
|
|
|
124
|
-
|
|
125
|
-
- [Tailwind CSS](https://tailwindcss.com/)
|
|
126
|
-
- [Font Awesome](https://fontawesome.com/)
|
|
127
|
-
- [Nuxt](https://nuxt.com/)
|
|
114
|
+
Inspired by ideas and patterns from [Bootstrap](https://getbootstrap.com/), [Tailwind CSS](https://tailwindcss.com/), [Font Awesome](https://fontawesome.com/) and [Nuxt](https://nuxt.com/).
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
--button-color: var(--text-color);
|
|
7
7
|
--button-color-hover: var(--text-color);
|
|
8
8
|
--button-color-active: var(--text-color);
|
|
9
|
-
--button-color-rgb: var(--primary-rgb);
|
|
10
9
|
--button-on-color: var(--on-primary);
|
|
11
10
|
|
|
12
11
|
--button-border-width: var(--border-width);
|
|
@@ -85,7 +84,6 @@
|
|
|
85
84
|
--button-color: var(--#{$name});
|
|
86
85
|
--button-color-hover: var(--#{$name}-hover);
|
|
87
86
|
--button-color-active: var(--#{$name}-active);
|
|
88
|
-
--button-color-rgb: var(--#{$name}-rgb);
|
|
89
87
|
--button-on-color: var(--on-#{$name});
|
|
90
88
|
}
|
|
91
89
|
}
|
|
@@ -110,7 +108,7 @@
|
|
|
110
108
|
&:focus-visible,
|
|
111
109
|
&.is-focus-visible {
|
|
112
110
|
outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
|
|
113
|
-
|
|
111
|
+
rgb(from var(--button-color) r g b / 0.5);
|
|
114
112
|
outline-offset: var(--button-focus-outline-offset);
|
|
115
113
|
}
|
|
116
114
|
}
|
|
@@ -136,7 +134,7 @@
|
|
|
136
134
|
&:focus-visible,
|
|
137
135
|
&.is-focus-visible {
|
|
138
136
|
outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
|
|
139
|
-
|
|
137
|
+
rgb(from var(--button-color) r g b / 0.5);
|
|
140
138
|
outline-offset: var(--button-focus-outline-offset);
|
|
141
139
|
}
|
|
142
140
|
}
|
|
@@ -162,7 +160,7 @@
|
|
|
162
160
|
&:focus-visible,
|
|
163
161
|
&.is-focus-visible {
|
|
164
162
|
outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
|
|
165
|
-
|
|
163
|
+
rgb(from var(--button-color) r g b / 0.5);
|
|
166
164
|
outline-offset: var(--button-focus-outline-offset);
|
|
167
165
|
}
|
|
168
166
|
}
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
--icon-button-color: var(--text-color);
|
|
7
7
|
--icon-button-color-hover: var(--text-color);
|
|
8
8
|
--icon-button-color-active: var(--text-color);
|
|
9
|
-
--icon-button-color-rgb: var(--primary-rgb);
|
|
10
9
|
--icon-button-on-color: var(--on-primary);
|
|
11
10
|
|
|
12
11
|
--icon-button-bg-color: transparent;
|
|
@@ -83,7 +82,6 @@
|
|
|
83
82
|
--icon-button-color: var(--#{$name});
|
|
84
83
|
--icon-button-color-hover: var(--#{$name}-hover);
|
|
85
84
|
--icon-button-color-active: var(--#{$name}-active);
|
|
86
|
-
--icon-button-color-rgb: var(--#{$name}-rgb);
|
|
87
85
|
--icon-button-on-color: var(--on-#{$name});
|
|
88
86
|
}
|
|
89
87
|
}
|
|
@@ -109,7 +107,7 @@
|
|
|
109
107
|
&:focus-visible,
|
|
110
108
|
&.is-focus-visible {
|
|
111
109
|
outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
|
|
112
|
-
|
|
110
|
+
rgb(from var(--icon-button-color) r g b / 0.5);
|
|
113
111
|
}
|
|
114
112
|
}
|
|
115
113
|
|
|
@@ -134,7 +132,7 @@
|
|
|
134
132
|
&:focus-visible,
|
|
135
133
|
&.is-focus-visible {
|
|
136
134
|
outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
|
|
137
|
-
|
|
135
|
+
rgb(from var(--icon-button-color) r g b / 0.5);
|
|
138
136
|
background-color: var(--icon-button-highlight);
|
|
139
137
|
}
|
|
140
138
|
}
|
|
@@ -160,7 +158,7 @@
|
|
|
160
158
|
&:focus-visible,
|
|
161
159
|
&.is-focus-visible {
|
|
162
160
|
outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
|
|
163
|
-
|
|
161
|
+
rgb(from var(--icon-button-color) r g b / 0.5);
|
|
164
162
|
}
|
|
165
163
|
}
|
|
166
164
|
|
|
@@ -26,14 +26,14 @@
|
|
|
26
26
|
--table-row-state-accent-width: 0.25rem;
|
|
27
27
|
--table-row-state-accent-offset-x: var(--table-row-state-accent-width);
|
|
28
28
|
|
|
29
|
-
--table-row-invalid-bg-color:
|
|
30
|
-
--table-row-invalid-hover-bg-color:
|
|
31
|
-
--table-row-invalid-border-color:
|
|
29
|
+
--table-row-invalid-bg-color: rgb(from var(--error) r g b / 0.08);
|
|
30
|
+
--table-row-invalid-hover-bg-color: rgb(from var(--error) r g b / 0.12);
|
|
31
|
+
--table-row-invalid-border-color: rgb(from var(--error) r g b / 0.35);
|
|
32
32
|
--table-row-invalid-accent-color: var(--error);
|
|
33
33
|
|
|
34
|
-
--table-row-warning-bg-color:
|
|
35
|
-
--table-row-warning-hover-bg-color:
|
|
36
|
-
--table-row-warning-border-color:
|
|
34
|
+
--table-row-warning-bg-color: rgb(from var(--warning) r g b / 0.1);
|
|
35
|
+
--table-row-warning-hover-bg-color: rgb(from var(--warning) r g b / 0.14);
|
|
36
|
+
--table-row-warning-border-color: rgb(from var(--warning) r g b / 0.35);
|
|
37
37
|
--table-row-warning-accent-color: var(--warning);
|
|
38
38
|
|
|
39
39
|
width: 100%;
|
package/scss/utilities.scss
CHANGED
package/scss/variables.scss
CHANGED
|
@@ -1,14 +1,6 @@
|
|
|
1
|
-
@use 'sass:color';
|
|
2
1
|
@use 'sass:map';
|
|
3
2
|
@use './theme.scss' as theme;
|
|
4
3
|
|
|
5
|
-
@function to-rgb-string($color) {
|
|
6
|
-
$r: color.channel($color, 'red', $space: rgb);
|
|
7
|
-
$g: color.channel($color, 'green', $space: rgb);
|
|
8
|
-
$b: color.channel($color, 'blue', $space: rgb);
|
|
9
|
-
@return '#{$r}, #{$g}, #{$b}';
|
|
10
|
-
}
|
|
11
|
-
|
|
12
4
|
@mixin _define-color-variables($colors) {
|
|
13
5
|
@each $name, $value in $colors {
|
|
14
6
|
$base: map.get($value, base);
|
|
@@ -19,7 +11,6 @@
|
|
|
19
11
|
--#{$name}: #{$base};
|
|
20
12
|
--#{$name}-hover: #{$hover};
|
|
21
13
|
--#{$name}-active: #{$active};
|
|
22
|
-
--#{$name}-rgb: #{to-rgb-string($base)};
|
|
23
14
|
--on-#{$name}: #{$on};
|
|
24
15
|
}
|
|
25
16
|
}
|
|
@@ -33,7 +24,6 @@
|
|
|
33
24
|
|
|
34
25
|
@each $name, $value in map.get(theme.$theme, grays) {
|
|
35
26
|
--gray-#{$name}: #{$value};
|
|
36
|
-
--gray-#{$name}-rgb: #{to-rgb-string($value)};
|
|
37
27
|
}
|
|
38
28
|
|
|
39
29
|
@each $name, $value in map.get(theme.$theme, spacings) {
|
|
@@ -81,13 +71,13 @@
|
|
|
81
71
|
--shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
|
|
82
72
|
--shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.2);
|
|
83
73
|
|
|
84
|
-
--focus-outline-color:
|
|
74
|
+
--focus-outline-color: rgb(from var(--primary) r g b / 0.5);
|
|
85
75
|
--focus-outline-style: solid;
|
|
86
76
|
--focus-outline-width: 2.5px;
|
|
87
77
|
--focus-offset: 0px;
|
|
88
78
|
|
|
89
79
|
--focus-outline-error: var(--focus-outline-width) var(--focus-outline-style)
|
|
90
|
-
|
|
80
|
+
rgb(from var(--error) r g b / 0.5); // create focus outline for every theme color?
|
|
91
81
|
|
|
92
82
|
--container: 900px;
|
|
93
83
|
|