@oardi/css-utils 0.73.1 → 0.74.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 (9) hide show
  1. package/package.json +1 -1
  2. package/readme.md +56 -69
  3. package/scss/components/button.scss +3 -5
  4. package/scss/components/icon-button.scss +3 -5
  5. package/scss/components/modal.scss +1 -1
  6. package/scss/components/overlay.scss +1 -1
  7. package/scss/components/table.scss +6 -6
  8. package/scss/utilities.scss +1 -1
  9. package/scss/variables.scss +2 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.73.1",
3
+ "version": "0.74.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
@@ -1,127 +1,114 @@
1
1
  # CSS Utils
2
2
 
3
- A lightweight frontend style toolkit built with SCSS, CSS variables and cascade layers.
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
- CSS Utils provides utility classes, responsive helpers and reusable component styles for building modern layouts without writing repetitive custom CSS.
5
+ ## What it includes
6
6
 
7
- ## Features
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
- - Utility classes for colors, typography, spacing, display, flex and grid
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
- ## Showcase
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
- ### Import the library
22
+ ## Add the styles
29
23
 
30
- Load the full library once in your global stylesheet:
24
+ Load CSS Utils once through your application's global stylesheet:
31
25
 
32
26
  ```scss
33
- @use '@oardi/css-utils/scss/index.scss';
27
+ // styles.scss
28
+ @use '@oardi/css-utils';
34
29
  ```
35
30
 
36
- CSS Utils includes its cascade order automatically: `reset`, `base`, `components`, then `utilities`. This lets utility classes adjust component styles without additional setup.
31
+ No additional cascade-layer setup is required.
37
32
 
38
- ## Usage
33
+ When compiling directly with the Dart Sass CLI, use the Node package importer:
39
34
 
40
- ### Utility classes
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
- This creates a centered text block with background color and padding.
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
- Utilities are mobile-first. Classes without a breakpoint apply to all screen sizes, while breakpoint variants apply from the defined breakpoint and up.
43
+ ## Build your first interface
57
44
 
58
- ### Component classes
45
+ Combine components and utilities directly in your markup:
59
46
 
60
47
  ```html
61
- <button class="btn btn-primary btn-solid" type="button">some button text</button>
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
- ### Component variants
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
- ```text
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
- Example:
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
- <button class="btn btn-primary btn-outline btn-sm" type="button">Small outline button</button>
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
- ### Customization
71
+ ## Customize the design
83
72
 
84
- CSS Utils is based on CSS variables, so you can customize the look of the system from your own stylesheet.
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
- You can also override component variables locally:
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
- ## Documentation
111
-
112
- The full documentation and showcase are available at:
97
+ ## Learn more
113
98
 
114
- [https://css-utils.oardi.com](https://css-utils.oardi.com/)
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
- ## Credits and inspiration
110
+ Released under the [MIT License](LICENSE.md).
121
111
 
122
- CSS Utils is inspired by ideas and patterns from:
112
+ ## Credits
123
113
 
124
- - [Bootstrap](https://getbootstrap.com/)
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/).
package/scss/components/button.scss CHANGED
@@ -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
- rgba(var(--button-color-rgb), 0.5);
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
- rgba(var(--button-color-rgb), 0.5);
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
- rgba(var(--button-color-rgb), 0.5);
163
+ rgb(from var(--button-color) r g b / 0.5);
166
164
  outline-offset: var(--button-focus-outline-offset);
167
165
  }
168
166
  }
package/scss/components/icon-button.scss CHANGED
@@ -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
- rgba(var(--icon-button-color-rgb), 0.5);
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
- rgba(var(--icon-button-color-rgb), 0.5);
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
- rgba(var(--icon-button-color-rgb), 0.5);
161
+ rgb(from var(--icon-button-color) r g b / 0.5);
164
162
  }
165
163
  }
166
164
 
package/scss/components/modal.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  --modal-body-padding: var(--spacer-3);
19
19
  --modal-footer-padding: var(--spacer-3);
20
20
 
21
- --modal-backdrop-bg-color: rgba(var(--gray-800-rgb), 0.7);
21
+ --modal-backdrop-bg-color: rgb(from var(--gray-800) r g b / 0.7);
22
22
 
23
23
  position: fixed;
24
24
  inset: 0;
package/scss/components/overlay.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .overlay {
3
- --overlay-highlight: rgba(var(--gray-800-rgb), 0.7);
3
+ --overlay-highlight: rgb(from var(--gray-800) r g b / 0.7);
4
4
  --overlay-z-index: var(--z-index-overlay);
5
5
 
6
6
  z-index: var(--overlay-z-index);
package/scss/components/table.scss CHANGED
@@ -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: rgba(var(--error-rgb), 0.08);
30
- --table-row-invalid-hover-bg-color: rgba(var(--error-rgb), 0.12);
31
- --table-row-invalid-border-color: rgba(var(--error-rgb), 0.35);
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: rgba(var(--warning-rgb), 0.1);
35
- --table-row-warning-hover-bg-color: rgba(var(--warning-rgb), 0.14);
36
- --table-row-warning-border-color: rgba(var(--warning-rgb), 0.35);
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
@@ -49,7 +49,7 @@ $-widths: (
49
49
  .bg-#{$name} {
50
50
  color: var(--on-#{$name});
51
51
  fill: var(--on-#{$name});
52
- background-color: rgba(var(--#{$name}-rgb), var(--bg-opacity));
52
+ background-color: rgb(from var(--#{$name}) r g b / var(--bg-opacity));
53
53
  }
54
54
  }
55
55
 
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: rgba(var(--primary-rgb), 0.5);
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
- rgba(var(--error-rgb), 0.5); // create focus outline for every theme color?
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