@oardi/css-utils 0.68.1 → 0.70.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 (6) hide show
  1. package/package.json +1 -1
  2. package/readme.md +3 -16
  3. package/scss/index.scss +1 -0
  4. package/scss/layers.scss +1 -0
  5. package/scss/theme.scss +12 -12
  6. package/scss/variables.scss +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.68.1",
3
+ "version": "0.70.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
@@ -25,29 +25,16 @@ CSS Utils provides utility classes, responsive helpers and reusable component st
25
25
  npm i @oardi/css-utils
26
26
  ```
27
27
 
28
- ### Create a layer order
29
-
30
- To ensure correct cascade layer ordering, create a `layers.scss` file:
31
-
32
- ```scss
33
- @layer reset, base, components, utilities;
34
- ```
35
-
36
- Import it before the library styles:
37
-
38
- ```scss
39
- @use 'layers.scss';
40
- // ...
41
- ```
42
-
43
28
  ### Import the library
44
29
 
45
- Import the full library with all utilities, responsive helpers and component styles:
30
+ Load the full library once in your global stylesheet:
46
31
 
47
32
  ```scss
48
33
  @use '@oardi/css-utils/scss/index.scss';
49
34
  ```
50
35
 
36
+ CSS Utils includes its cascade order automatically: `reset`, `base`, `components`, then `utilities`. This lets utility classes adjust component styles without additional setup.
37
+
51
38
  ## Usage
52
39
 
53
40
  ### Utility classes
package/scss/index.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @forward './layers.scss';
1
2
  @forward './reboot.scss';
2
3
  @forward './theme.scss';
3
4
  @forward './variables.scss';
package/scss/layers.scss ADDED
@@ -0,0 +1 @@
1
+ @layer reset, base, components, utilities;
package/scss/theme.scss CHANGED
@@ -5,9 +5,9 @@ $spacer: 1rem;
5
5
  $default-theme: (
6
6
  colors: (
7
7
  'primary': (
8
- base: #6f3bd2,
9
- hover: #5f2fbd,
10
- active: #5126a5,
8
+ base: #8151dd,
9
+ hover: #7c4cd9,
10
+ active: #6f3bd2,
11
11
  on: #ffffff,
12
12
  ),
13
13
  'secondary': (
@@ -17,21 +17,21 @@ $default-theme: (
17
17
  on: #ffffff,
18
18
  ),
19
19
  'success': (
20
- base: #0c705d,
21
- hover: #09604f,
22
- active: #075143,
20
+ base: #0f7d68,
21
+ hover: #0e7864,
22
+ active: #0d735f,
23
23
  on: #ffffff,
24
24
  ),
25
25
  'warning': (
26
- base: #765200,
27
- hover: #674800,
28
- active: #593e00,
26
+ base: #906710,
27
+ hover: #896414,
28
+ active: #845f15,
29
29
  on: #ffffff,
30
30
  ),
31
31
  'error': (
32
- base: #b52828,
33
- hover: #a32121,
34
- active: #911b1b,
32
+ base: #cd3434,
33
+ hover: #c53232,
34
+ active: #be2e2e,
35
35
  on: #ffffff,
36
36
  ),
37
37
  ),
package/scss/variables.scss CHANGED
@@ -45,9 +45,9 @@
45
45
  --font-weight: 400;
46
46
  --font-family: 'Inter', sans-serif;
47
47
 
48
- --bg-body: #fdfdfd;
48
+ --bg-body: #f9f8fc;
49
49
  --bg-surface: var(--white);
50
- --bg-surface-hover: var(--gray-50);
50
+ --bg-surface-hover: #f4f2f8;
51
51
  --bg-inverse: var(--gray-900);
52
52
  --bg-highlight: var(--gray-100);
53
53
  --bg-active: var(--gray-150);