@oardi/css-utils 0.107.0 → 0.109.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 (8) hide show
  1. package/package.json +1 -1
  2. package/scss/components/chip.scss +23 -10
  3. package/scss/components/list.scss +2 -2
  4. package/scss/components/menu.scss +1 -1
  5. package/scss/components/pagination.scss +1 -1
  6. package/scss/components/skeleton.scss +157 -0
  7. package/scss/components/tabs.scss +3 -3
  8. package/scss/index.scss +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.107.0",
3
+ "version": "0.109.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/chip.scss CHANGED
@@ -8,6 +8,9 @@
8
8
  --chip-color-hover: var(--primary-hover);
9
9
  --chip-color-active: var(--primary-active);
10
10
  --chip-on-color: var(--on-primary);
11
+ --chip-surface-color: var(--chip-color);
12
+ --chip-surface-color-hover: var(--chip-color-hover);
13
+ --chip-surface-color-active: var(--chip-color-active);
11
14
 
12
15
  --chip-font-size: var(--font-size-sm);
13
16
  --chip-padding-y: var(--spacer-0);
@@ -115,26 +118,35 @@
115
118
  --chip-color: var(--#{$name});
116
119
  --chip-color-hover: var(--#{$name}-hover);
117
120
  --chip-color-active: var(--#{$name}-active);
121
+ --chip-surface-color: var(--#{$name});
122
+ --chip-surface-color-hover: var(--#{$name}-hover);
123
+ --chip-surface-color-active: var(--#{$name}-active);
118
124
  --chip-on-color: var(--on-#{$name});
119
125
  }
120
126
  }
121
127
 
128
+ .chip-primary:is(a, button, .chip-interactive) {
129
+ --chip-color: var(--action-color);
130
+ --chip-color-hover: var(--action-color-hover);
131
+ --chip-color-active: var(--action-color-active);
132
+ }
133
+
122
134
  .chip-solid {
123
135
  color: var(--chip-on-color);
124
- background-color: var(--chip-color);
125
- border-color: var(--chip-color);
136
+ background-color: var(--chip-surface-color);
137
+ border-color: var(--chip-surface-color);
126
138
 
127
139
  &:is(a, button, .chip-interactive):hover {
128
140
  color: var(--chip-on-color);
129
- background-color: var(--chip-color-hover);
130
- border-color: var(--chip-color-hover);
141
+ background-color: var(--chip-surface-color-hover);
142
+ border-color: var(--chip-surface-color-hover);
131
143
  }
132
144
 
133
145
  &.is-active,
134
146
  &:is(a, button, .chip-interactive):active {
135
147
  color: var(--chip-on-color);
136
- background-color: var(--chip-color-active);
137
- border-color: var(--chip-color-active);
148
+ background-color: var(--chip-surface-color-active);
149
+ border-color: var(--chip-surface-color-active);
138
150
  }
139
151
  }
140
152
 
@@ -145,15 +157,15 @@
145
157
 
146
158
  &:is(a, button, .chip-interactive):hover {
147
159
  color: var(--chip-on-color);
148
- background-color: var(--chip-color-hover);
149
- border-color: var(--chip-color-hover);
160
+ background-color: var(--chip-surface-color-hover);
161
+ border-color: var(--chip-surface-color-hover);
150
162
  }
151
163
 
152
164
  &.is-active,
153
165
  &:is(a, button, .chip-interactive):active {
154
166
  color: var(--chip-on-color);
155
- background-color: var(--chip-color-active);
156
- border-color: var(--chip-color-active);
167
+ background-color: var(--chip-surface-color-active);
168
+ border-color: var(--chip-surface-color-active);
157
169
  }
158
170
  }
159
171
 
@@ -163,6 +175,7 @@
163
175
  border-color: transparent;
164
176
 
165
177
  &:is(a, button, .chip-interactive):hover {
178
+ color: var(--chip-color-hover);
166
179
  background-color: var(--chip-highlight);
167
180
  }
168
181
 
package/scss/components/list.scss CHANGED
@@ -13,8 +13,8 @@
13
13
  --list-item-padding-x: var(--spacer-3);
14
14
  --list-item-gap: var(--spacer-2);
15
15
 
16
- --list-item-active-color: var(--primary);
17
- --list-item-hover-color: var(--primary);
16
+ --list-item-active-color: var(--action-color);
17
+ --list-item-hover-color: var(--action-color);
18
18
 
19
19
  --list-item-transition-duration: var(--transition-duration);
20
20
  --list-item-transition-easing: var(--transition-easing);
package/scss/components/menu.scss CHANGED
@@ -27,7 +27,7 @@
27
27
  --menu-item-border-radius: var(--border-radius-sm);
28
28
  --menu-item-hover-bg-color: var(--bg-surface-hover);
29
29
  --menu-item-active-bg-color: var(--bg-active);
30
- --menu-item-current-color: var(--primary);
30
+ --menu-item-current-color: var(--action-color);
31
31
  --menu-item-destructive-color: var(--error);
32
32
  --menu-item-disabled-color: var(--disabled-text-color);
33
33
  --menu-item-description-color: var(--text-muted);
package/scss/components/pagination.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  --pagination-item-color: var(--text-color);
13
13
  --pagination-item-bg-color: transparent;
14
14
 
15
- --pagination-item-hover-color: var(--primary);
15
+ --pagination-item-hover-color: var(--action-color);
16
16
  --pagination-item-hover-bg-color: var(--bg-highlight);
17
17
 
18
18
  --pagination-item-active-color: var(--on-primary);
package/scss/components/skeleton.scss ADDED
@@ -0,0 +1,157 @@
1
+ @use '../layers.scss';
2
+
3
+ @layer components {
4
+ .skeleton {
5
+ --skeleton-width: 100%;
6
+ --skeleton-height: 1rem;
7
+ --skeleton-size: 2.5rem;
8
+ --skeleton-font-size: var(--font-size);
9
+ --skeleton-line-height: var(--line-height-sm);
10
+ --skeleton-control-height: 2.5rem;
11
+ --skeleton-aspect-ratio: auto;
12
+ --skeleton-border-radius: var(--border-radius-sm);
13
+ --skeleton-base-color: color-mix(in srgb, var(--text-color) 14%, var(--bg-surface));
14
+ --skeleton-highlight-color: color-mix(in srgb, var(--text-color) 5%, var(--bg-surface));
15
+ --skeleton-animation-duration: 1.6s;
16
+ --skeleton-animation-easing: ease-in-out;
17
+
18
+ position: relative;
19
+ display: block;
20
+ flex-shrink: 1;
21
+ inline-size: var(--skeleton-width);
22
+ max-inline-size: 100%;
23
+ block-size: var(--skeleton-height);
24
+ min-inline-size: 0;
25
+ overflow: hidden;
26
+ aspect-ratio: var(--skeleton-aspect-ratio);
27
+ border-radius: var(--skeleton-border-radius);
28
+ background-color: var(--skeleton-base-color);
29
+ box-sizing: border-box;
30
+ pointer-events: none;
31
+ user-select: none;
32
+ }
33
+
34
+ .skeleton::after {
35
+ content: '';
36
+ position: absolute;
37
+ inset: 0;
38
+ background: linear-gradient(
39
+ 100deg,
40
+ transparent 20%,
41
+ var(--skeleton-highlight-color) 50%,
42
+ transparent 80%
43
+ );
44
+ transform: translateX(-100%);
45
+ animation: skeleton-shimmer var(--skeleton-animation-duration)
46
+ var(--skeleton-animation-easing) infinite;
47
+ }
48
+
49
+ .skeleton-headline {
50
+ --skeleton-width: 65%;
51
+ --skeleton-height: calc(var(--skeleton-font-size) * var(--skeleton-line-height));
52
+ --skeleton-font-size: var(--font-size-xxl);
53
+ }
54
+
55
+ .skeleton-text {
56
+ --skeleton-height: calc(var(--skeleton-font-size) * var(--skeleton-line-height));
57
+ }
58
+
59
+ .skeleton-avatar {
60
+ --skeleton-width: var(--skeleton-size);
61
+ --skeleton-height: var(--skeleton-size);
62
+ --skeleton-border-radius: 50%;
63
+ }
64
+
65
+ .skeleton-image {
66
+ --skeleton-height: auto;
67
+ --skeleton-aspect-ratio: 16 / 9;
68
+ --skeleton-border-radius: var(--border-radius);
69
+ }
70
+
71
+ .skeleton-pill {
72
+ --skeleton-width: 7rem;
73
+ --skeleton-height: var(--skeleton-control-height);
74
+ --skeleton-border-radius: 9999px;
75
+ }
76
+
77
+ .skeleton-square {
78
+ --skeleton-width: var(--skeleton-size);
79
+ --skeleton-height: auto;
80
+ --skeleton-aspect-ratio: 1;
81
+ --skeleton-border-radius: var(--border-radius);
82
+ }
83
+
84
+ .skeleton-sm {
85
+ --skeleton-size: 2rem;
86
+ --skeleton-font-size: var(--font-size-sm);
87
+ --skeleton-control-height: 2rem;
88
+ }
89
+
90
+ .skeleton-md {
91
+ --skeleton-size: 2.5rem;
92
+ --skeleton-font-size: var(--font-size);
93
+ --skeleton-control-height: 2.5rem;
94
+ }
95
+
96
+ .skeleton-lg {
97
+ --skeleton-size: 3rem;
98
+ --skeleton-font-size: var(--font-size-lg);
99
+ --skeleton-control-height: 3rem;
100
+ }
101
+
102
+ .skeleton-aspect-square {
103
+ --skeleton-height: auto;
104
+ --skeleton-aspect-ratio: 1;
105
+ }
106
+
107
+ .skeleton-aspect-video {
108
+ --skeleton-height: auto;
109
+ --skeleton-aspect-ratio: 16 / 9;
110
+ }
111
+
112
+ .skeleton-lines {
113
+ --skeleton-width: 100%;
114
+ --skeleton-line-gap: var(--spacer-2);
115
+ --skeleton-last-line-width: 65%;
116
+
117
+ display: grid;
118
+ gap: var(--skeleton-line-gap);
119
+ inline-size: var(--skeleton-width);
120
+ max-inline-size: 100%;
121
+ min-inline-size: 0;
122
+ }
123
+
124
+ .skeleton-lines > .skeleton-text {
125
+ --skeleton-width: 100%;
126
+ }
127
+
128
+ .skeleton-lines > .skeleton-text:last-child {
129
+ --skeleton-width: var(--skeleton-last-line-width);
130
+ }
131
+
132
+ @keyframes skeleton-shimmer {
133
+ to {
134
+ transform: translateX(100%);
135
+ }
136
+ }
137
+
138
+ @media (prefers-reduced-motion: reduce) {
139
+ .skeleton::after {
140
+ display: none;
141
+ animation: none;
142
+ }
143
+ }
144
+
145
+ @media (forced-colors: active) {
146
+ .skeleton {
147
+ border: var(--border-width) solid CanvasText;
148
+ background-color: GrayText;
149
+ forced-color-adjust: none;
150
+ }
151
+
152
+ .skeleton::after {
153
+ display: none;
154
+ animation: none;
155
+ }
156
+ }
157
+ }
package/scss/components/tabs.scss CHANGED
@@ -17,12 +17,12 @@
17
17
  --tab-color: var(--text-color);
18
18
  --tab-bg-color: transparent;
19
19
 
20
- --tab-hover-color: var(--primary);
20
+ --tab-hover-color: var(--action-color);
21
21
  --tab-hover-bg-color: var(--bg-surface-hover);
22
22
 
23
- --tab-active-color: var(--primary);
23
+ --tab-active-color: var(--action-color);
24
24
  --tab-active-bg-color: transparent;
25
- --tab-active-border-color: var(--primary);
25
+ --tab-active-border-color: var(--tab-active-color);
26
26
 
27
27
  --tab-border-width: 2px;
28
28
  --tab-border-color: transparent;
package/scss/index.scss CHANGED
@@ -43,6 +43,7 @@
43
43
  @forward './components/overlay.scss';
44
44
  @forward './components/pagination.scss';
45
45
  @forward './components/range-slider.scss';
46
+ @forward './components/skeleton.scss';
46
47
  @forward './components/stepper.scss';
47
48
  @forward './components/table.scss';
48
49
  @forward './components/tabs.scss';