@acorex/styles 7.22.0 → 7.23.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/index.css +6 -3
- package/package.json +1 -1
- package/src/base/_preflight.scss +16 -4
- package/src/shared/_actionsheet.scss +6 -3
- package/src/shared/_check-box.scss +1 -2
- package/src/shared/_color-look.scss +10 -3
- package/src/shared/_drop-down.scss +4 -2
- package/src/shared/_list.scss +16 -4
- package/src/shared/_radio.scss +1 -2
- package/tailwind-base.js +2 -1
package/index.css
CHANGED
|
@@ -372,8 +372,10 @@ body {
|
|
|
372
372
|
border-top-left-radius: var(--ax-rounded-border-default);
|
|
373
373
|
border-top-right-radius: var(--ax-rounded-border-default);
|
|
374
374
|
background-color: rgba(var(--ax-color-surface));
|
|
375
|
-
--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
376
|
-
|
|
375
|
+
--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
376
|
+
0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
377
|
+
--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color),
|
|
378
|
+
0 4px 6px -4px var(--ax-shadow-color);
|
|
377
379
|
box-shadow: var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
|
|
378
380
|
animation: 1s both ax-fadeInUp;
|
|
379
381
|
animation-duration: 250ms;
|
|
@@ -1917,7 +1919,8 @@ body {
|
|
|
1917
1919
|
border-color: rgba(var(--ax-color-border-default));
|
|
1918
1920
|
background-color: rgba(var(--ax-color-surface));
|
|
1919
1921
|
--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
1920
|
-
--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color),
|
|
1922
|
+
--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color),
|
|
1923
|
+
0 2px 4px -2px var(--ax-shadow-color);
|
|
1921
1924
|
box-shadow: var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
|
|
1922
1925
|
}
|
|
1923
1926
|
@media (min-width: 768px) {
|
package/package.json
CHANGED
package/src/base/_preflight.scss
CHANGED
|
@@ -43,8 +43,14 @@ html,
|
|
|
43
43
|
'Segoe UI Symbol',
|
|
44
44
|
'Noto Color Emoji'
|
|
45
45
|
); /* 4 */
|
|
46
|
-
font-feature-settings: theme(
|
|
47
|
-
|
|
46
|
+
font-feature-settings: theme(
|
|
47
|
+
'fontFamily.sans[1].fontFeatureSettings',
|
|
48
|
+
normal
|
|
49
|
+
); /* 5 */
|
|
50
|
+
font-variation-settings: theme(
|
|
51
|
+
'fontFamily.sans[1].fontVariationSettings',
|
|
52
|
+
normal
|
|
53
|
+
); /* 6 */
|
|
48
54
|
-webkit-tap-highlight-color: transparent; /* 7 */
|
|
49
55
|
}
|
|
50
56
|
|
|
@@ -132,8 +138,14 @@ pre {
|
|
|
132
138
|
'Courier New',
|
|
133
139
|
monospace
|
|
134
140
|
); /* 1 */
|
|
135
|
-
font-feature-settings: theme(
|
|
136
|
-
|
|
141
|
+
font-feature-settings: theme(
|
|
142
|
+
'fontFamily.mono[1].fontFeatureSettings',
|
|
143
|
+
normal
|
|
144
|
+
); /* 2 */
|
|
145
|
+
font-variation-settings: theme(
|
|
146
|
+
'fontFamily.mono[1].fontVariationSettings',
|
|
147
|
+
normal
|
|
148
|
+
); /* 3 */
|
|
137
149
|
font-size: 1em; /* 4 */
|
|
138
150
|
}
|
|
139
151
|
|
|
@@ -4,9 +4,12 @@
|
|
|
4
4
|
border-top-left-radius: var(--ax-rounded-border-default);
|
|
5
5
|
border-top-right-radius: var(--ax-rounded-border-default);
|
|
6
6
|
background-color: rgba(var(--ax-color-surface));
|
|
7
|
-
--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
8
|
+
0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
9
|
+
--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color),
|
|
10
|
+
0 4px 6px -4px var(--ax-shadow-color);
|
|
11
|
+
box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000),
|
|
12
|
+
var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
|
|
10
13
|
|
|
11
14
|
animation: 1s both ax-fadeInUp;
|
|
12
15
|
animation-duration: 250ms;
|
|
@@ -37,8 +37,7 @@
|
|
|
37
37
|
&:focus-visible,
|
|
38
38
|
&:focus {
|
|
39
39
|
// @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2 ax-ring-offset-surface;
|
|
40
|
-
box-shadow:
|
|
41
|
-
0px 0px 0px 2px rgba(var(--ax-color-surface)),
|
|
40
|
+
box-shadow: 0px 0px 0px 2px rgba(var(--ax-color-surface)),
|
|
42
41
|
0px 0px 0px 4px rgba(var(--ax-color-primary-500));
|
|
43
42
|
}
|
|
44
43
|
|
|
@@ -208,7 +208,8 @@
|
|
|
208
208
|
color: rgba(var(--ax-color-ghost-fore));
|
|
209
209
|
--ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
210
210
|
--ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
|
|
211
|
-
box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000),
|
|
211
|
+
box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000),
|
|
212
|
+
var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
|
|
212
213
|
&.ax-el-interactive {
|
|
213
214
|
&:hover {
|
|
214
215
|
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
@@ -415,7 +416,10 @@
|
|
|
415
416
|
}
|
|
416
417
|
.ax-ripple {
|
|
417
418
|
// @apply ax-bg-#{$color}-200/30 #{!important};
|
|
418
|
-
background-color: rgba(
|
|
419
|
+
background-color: rgba(
|
|
420
|
+
var(--ax-color-#{$color}-500),
|
|
421
|
+
0.3
|
|
422
|
+
) !important;
|
|
419
423
|
}
|
|
420
424
|
ax-loading-spinner {
|
|
421
425
|
.ax-loader {
|
|
@@ -500,7 +504,10 @@
|
|
|
500
504
|
}
|
|
501
505
|
.ax-ripple {
|
|
502
506
|
// @apply ax-bg-#{$color}-500/30 #{!important};
|
|
503
|
-
background-color: rgba(
|
|
507
|
+
background-color: rgba(
|
|
508
|
+
var(--ax-color-#{$color}-300),
|
|
509
|
+
0.3
|
|
510
|
+
) !important;
|
|
504
511
|
}
|
|
505
512
|
ax-loading-spinner {
|
|
506
513
|
.ax-loader {
|
|
@@ -33,8 +33,10 @@
|
|
|
33
33
|
border-color: rgba(var(--ax-color-border-default));
|
|
34
34
|
background-color: rgba(var(--ax-color-surface));
|
|
35
35
|
--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
36
|
-
--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color),
|
|
37
|
-
|
|
36
|
+
--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color),
|
|
37
|
+
0 2px 4px -2px var(--ax-shadow-color);
|
|
38
|
+
box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000),
|
|
39
|
+
var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
|
|
38
40
|
@media (min-width: 768px) {
|
|
39
41
|
border-radius: var(--ax-rounded-border-default);
|
|
40
42
|
}
|
package/src/shared/_list.scss
CHANGED
|
@@ -31,13 +31,19 @@
|
|
|
31
31
|
display: flex;
|
|
32
32
|
align-items: center;
|
|
33
33
|
justify-content: space-between;
|
|
34
|
-
border-color: rgba(
|
|
34
|
+
border-color: rgba(
|
|
35
|
+
var(--ax-color-border-default),
|
|
36
|
+
var(--tw-border-opacity)
|
|
37
|
+
);
|
|
35
38
|
background-color: rgba(var(--ax-color-surface), var(--tw-bg-opacity));
|
|
36
39
|
}
|
|
37
40
|
ax-header {
|
|
38
41
|
// @apply ax-border-b ax-border-default ax-p-4 ax-text-base ax-font-medium md:ax-text-lg;
|
|
39
42
|
border-bottom-width: 1px;
|
|
40
|
-
border-color: rgba(
|
|
43
|
+
border-color: rgba(
|
|
44
|
+
var(--ax-color-border-default),
|
|
45
|
+
var(--tw-border-opacity)
|
|
46
|
+
);
|
|
41
47
|
padding: 1rem /* 16px */;
|
|
42
48
|
font-size: 1rem /* 16px */;
|
|
43
49
|
line-height: 1.5rem /* 24px */;
|
|
@@ -144,8 +150,14 @@
|
|
|
144
150
|
}
|
|
145
151
|
&.ax-state-selected {
|
|
146
152
|
// @apply ax-bg-primary-500 ax-text-primary-fore #{!important};
|
|
147
|
-
background-color: rgba(
|
|
148
|
-
|
|
153
|
+
background-color: rgba(
|
|
154
|
+
var(--ax-color-primary-500),
|
|
155
|
+
var(--tw-bg-opacity)
|
|
156
|
+
) !important;
|
|
157
|
+
color: rgba(
|
|
158
|
+
var(--ax-color-primary-fore),
|
|
159
|
+
var(--tw-text-opacity)
|
|
160
|
+
) !important;
|
|
149
161
|
|
|
150
162
|
.ax-selected-icon {
|
|
151
163
|
// @apply ax-text-2xl ax-text-primary-500;
|
package/src/shared/_radio.scss
CHANGED
|
@@ -34,8 +34,7 @@
|
|
|
34
34
|
&:focus-visible,
|
|
35
35
|
&:focus {
|
|
36
36
|
// @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2 ax-ring-offset-surface;
|
|
37
|
-
box-shadow:
|
|
38
|
-
0px 0px 0px 2px rgba(var(--ax-color-surface)),
|
|
37
|
+
box-shadow: 0px 0px 0px 2px rgba(var(--ax-color-surface)),
|
|
39
38
|
0px 0px 0px 4px rgba(var(--ax-color-primary-500));
|
|
40
39
|
}
|
|
41
40
|
|
package/tailwind-base.js
CHANGED
|
@@ -28,7 +28,8 @@ const _colors = {
|
|
|
28
28
|
'on-surface-fore': 'rgba(var(--ax-color-on-surface-fore), <alpha-value>)',
|
|
29
29
|
|
|
30
30
|
'input-surface': 'rgba(var(--ax-color-input-surface), <alpha-value>)',
|
|
31
|
-
'input-surface-fore':
|
|
31
|
+
'input-surface-fore':
|
|
32
|
+
'rgba(var(--ax-color-input-surface-fore), <alpha-value>)',
|
|
32
33
|
};
|
|
33
34
|
|
|
34
35
|
const createPalete = function (colorName) {
|