@cieloazul310/digital-go-pandacss-preset 0.1.4 → 0.2.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/dist/index.js +222 -115
- package/dist/index.mjs +222 -115
- package/package.json +5 -5
package/dist/index.js
CHANGED
|
@@ -102,7 +102,7 @@ var accordion_default = (0, import_dev.defineSlotRecipe)({
|
|
|
102
102
|
outlineWidth: "4px",
|
|
103
103
|
outlineColor: "black",
|
|
104
104
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
105
|
-
|
|
105
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
106
106
|
},
|
|
107
107
|
/**
|
|
108
108
|
* remove button style
|
|
@@ -294,7 +294,7 @@ var link_default = (0, import_dev3.defineRecipe)({
|
|
|
294
294
|
_visited: "magenta.900",
|
|
295
295
|
_hover: "colorPalette.primary.100",
|
|
296
296
|
_focusVisible: "colorPalette.primary.100",
|
|
297
|
-
_active: "orange.
|
|
297
|
+
_active: "orange.800"
|
|
298
298
|
},
|
|
299
299
|
/**
|
|
300
300
|
* focus-visible:bg-yellow-300
|
|
@@ -326,7 +326,7 @@ var link_default = (0, import_dev3.defineRecipe)({
|
|
|
326
326
|
outlineWidth: "4px",
|
|
327
327
|
outlineColor: "black",
|
|
328
328
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
329
|
-
|
|
329
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
330
330
|
},
|
|
331
331
|
/**
|
|
332
332
|
* with icon
|
|
@@ -430,7 +430,7 @@ var button_default = (0, import_dev5.defineRecipe)({
|
|
|
430
430
|
outlineWidth: "4px",
|
|
431
431
|
outlineColor: "black",
|
|
432
432
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
433
|
-
|
|
433
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
434
434
|
},
|
|
435
435
|
/**
|
|
436
436
|
* aria-disabled:pointer-events-none aria-disabled:forced-colors:border-[GrayText] aria-disabled:forced-colors:text-[GrayText]
|
|
@@ -633,7 +633,7 @@ var card_default = (0, import_dev6.defineSlotRecipe)({
|
|
|
633
633
|
outlineWidth: "4px",
|
|
634
634
|
outlineColor: "black",
|
|
635
635
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
636
|
-
|
|
636
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
637
637
|
}
|
|
638
638
|
},
|
|
639
639
|
image: {
|
|
@@ -759,7 +759,7 @@ var checkbox_default = (0, import_dev7.defineSlotRecipe)({
|
|
|
759
759
|
outlineWidth: "4px",
|
|
760
760
|
outlineColor: "black",
|
|
761
761
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
762
|
-
|
|
762
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
763
763
|
}
|
|
764
764
|
},
|
|
765
765
|
/**
|
|
@@ -772,7 +772,7 @@ var checkbox_default = (0, import_dev7.defineSlotRecipe)({
|
|
|
772
772
|
outlineWidth: "4px",
|
|
773
773
|
outlineColor: "black",
|
|
774
774
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
775
|
-
|
|
775
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
776
776
|
}
|
|
777
777
|
},
|
|
778
778
|
indicator: {
|
|
@@ -1017,7 +1017,7 @@ var buttonCommon = {
|
|
|
1017
1017
|
outlineWidth: "4px",
|
|
1018
1018
|
outlineColor: "black",
|
|
1019
1019
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1020
|
-
|
|
1020
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1021
1021
|
}
|
|
1022
1022
|
};
|
|
1023
1023
|
var chip_tag_default = (0, import_dev9.defineSlotRecipe)({
|
|
@@ -1155,7 +1155,7 @@ var input_default = (0, import_dev11.defineRecipe)({
|
|
|
1155
1155
|
outlineWidth: "4px",
|
|
1156
1156
|
outlineColor: "black",
|
|
1157
1157
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1158
|
-
|
|
1158
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1159
1159
|
},
|
|
1160
1160
|
/**
|
|
1161
1161
|
* aria-disabled:pointer-events-none
|
|
@@ -1227,7 +1227,7 @@ var select_box_default = (0, import_dev12.defineRecipe)({
|
|
|
1227
1227
|
outlineWidth: "4px",
|
|
1228
1228
|
outlineColor: "black",
|
|
1229
1229
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1230
|
-
|
|
1230
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1231
1231
|
}
|
|
1232
1232
|
},
|
|
1233
1233
|
variants: {
|
|
@@ -1491,7 +1491,7 @@ var disclosure_default = (0, import_dev15.defineSlotRecipe)({
|
|
|
1491
1491
|
outlineWidth: "4px",
|
|
1492
1492
|
outlineColor: "black",
|
|
1493
1493
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1494
|
-
|
|
1494
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1495
1495
|
}
|
|
1496
1496
|
},
|
|
1497
1497
|
indicator: {
|
|
@@ -1747,7 +1747,7 @@ var emergency_banner_default = (0, import_dev18.defineSlotRecipe)({
|
|
|
1747
1747
|
outlineWidth: "4px",
|
|
1748
1748
|
outlineColor: "black",
|
|
1749
1749
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1750
|
-
|
|
1750
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1751
1751
|
}
|
|
1752
1752
|
}
|
|
1753
1753
|
}
|
|
@@ -1840,7 +1840,7 @@ var textarea_default = (0, import_dev22.defineRecipe)({
|
|
|
1840
1840
|
outlineWidth: "4px",
|
|
1841
1841
|
outlineColor: "black",
|
|
1842
1842
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1843
|
-
|
|
1843
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1844
1844
|
}
|
|
1845
1845
|
}
|
|
1846
1846
|
});
|
|
@@ -1976,7 +1976,7 @@ var hamburger_menu_button_default = (0, import_dev25.defineRecipe)({
|
|
|
1976
1976
|
outlineWidth: "4px",
|
|
1977
1977
|
outlineColor: "black",
|
|
1978
1978
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1979
|
-
|
|
1979
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1980
1980
|
},
|
|
1981
1981
|
/**
|
|
1982
1982
|
* override reset
|
|
@@ -2109,7 +2109,7 @@ var menu_item_default = (0, import_dev28.defineRecipe)({
|
|
|
2109
2109
|
outlineWidth: "4px",
|
|
2110
2110
|
outlineColor: "black",
|
|
2111
2111
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
2112
|
-
|
|
2112
|
+
focusBox: "calc(6 / 16 * 1rem)",
|
|
2113
2113
|
zIndex: 1
|
|
2114
2114
|
},
|
|
2115
2115
|
_highlighted: {
|
|
@@ -2118,7 +2118,7 @@ var menu_item_default = (0, import_dev28.defineRecipe)({
|
|
|
2118
2118
|
outlineWidth: "4px",
|
|
2119
2119
|
outlineColor: "black",
|
|
2120
2120
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
2121
|
-
|
|
2121
|
+
focusBox: "calc(6 / 16 * 1rem)",
|
|
2122
2122
|
zIndex: 1
|
|
2123
2123
|
}
|
|
2124
2124
|
},
|
|
@@ -2200,7 +2200,7 @@ var menu_default = (0, import_dev29.defineSlotRecipe)({
|
|
|
2200
2200
|
outlineWidth: "4px",
|
|
2201
2201
|
outlineColor: "black",
|
|
2202
2202
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
2203
|
-
|
|
2203
|
+
focusBox: "calc(2 / 16 * 1rem)",
|
|
2204
2204
|
zIndex: 1
|
|
2205
2205
|
}
|
|
2206
2206
|
/**
|
|
@@ -2782,7 +2782,7 @@ var radio_group_default = (0, import_dev34.defineSlotRecipe)({
|
|
|
2782
2782
|
outlineWidth: "4px",
|
|
2783
2783
|
outlineColor: "black",
|
|
2784
2784
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
2785
|
-
|
|
2785
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
2786
2786
|
}
|
|
2787
2787
|
},
|
|
2788
2788
|
/**
|
|
@@ -2795,7 +2795,7 @@ var radio_group_default = (0, import_dev34.defineSlotRecipe)({
|
|
|
2795
2795
|
outlineWidth: "4px",
|
|
2796
2796
|
outlineColor: "black",
|
|
2797
2797
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
2798
|
-
|
|
2798
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
2799
2799
|
},
|
|
2800
2800
|
_before: {
|
|
2801
2801
|
/**
|
|
@@ -2993,7 +2993,7 @@ var resource_list_default = (0, import_dev35.defineSlotRecipe)({
|
|
|
2993
2993
|
outlineWidth: "4px",
|
|
2994
2994
|
outlineColor: "black",
|
|
2995
2995
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
2996
|
-
|
|
2996
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
2997
2997
|
}
|
|
2998
2998
|
},
|
|
2999
2999
|
action: {
|
|
@@ -3163,7 +3163,7 @@ var import_dev37 = require("@pandacss/dev");
|
|
|
3163
3163
|
var import_steps = require("@zag-js/steps");
|
|
3164
3164
|
var step_navigation_default = (0, import_dev37.defineSlotRecipe)({
|
|
3165
3165
|
className: "step-navigation",
|
|
3166
|
-
slots: import_steps.anatomy.keys(),
|
|
3166
|
+
slots: import_steps.anatomy.extendWith("title", "description").keys(),
|
|
3167
3167
|
base: {
|
|
3168
3168
|
root: {
|
|
3169
3169
|
/**
|
|
@@ -3175,10 +3175,11 @@ var step_navigation_default = (0, import_dev37.defineSlotRecipe)({
|
|
|
3175
3175
|
* letter-spacing: 0.02em;
|
|
3176
3176
|
* overflow-wrap: anywhere;
|
|
3177
3177
|
*/
|
|
3178
|
+
textStyle: "std-16N-170",
|
|
3178
3179
|
overflowWrap: "anywhere",
|
|
3179
|
-
colorPalette: "keyColor"
|
|
3180
|
-
"--_step-width": "
|
|
3181
|
-
"--_step-min-width": "
|
|
3180
|
+
colorPalette: "keyColor"
|
|
3181
|
+
// "--_step-width": "320",
|
|
3182
|
+
// "--_step-min-width": "160",
|
|
3182
3183
|
},
|
|
3183
3184
|
list: {
|
|
3184
3185
|
/**
|
|
@@ -3203,33 +3204,8 @@ var step_navigation_default = (0, import_dev37.defineSlotRecipe)({
|
|
|
3203
3204
|
*/
|
|
3204
3205
|
position: "relative",
|
|
3205
3206
|
boxSizing: "border-box",
|
|
3206
|
-
_before: {
|
|
3207
|
-
/**
|
|
3208
|
-
* position: absolute;
|
|
3209
|
-
* z-index: -1;
|
|
3210
|
-
* content: "";
|
|
3211
|
-
*/
|
|
3212
|
-
position: "absolute",
|
|
3213
|
-
zIndex: -1,
|
|
3214
|
-
content: '""'
|
|
3215
|
-
},
|
|
3216
|
-
_after: {
|
|
3217
|
-
/**
|
|
3218
|
-
* position: absolute;
|
|
3219
|
-
* z-index: -1;
|
|
3220
|
-
* content: "";
|
|
3221
|
-
*/
|
|
3222
|
-
position: "absolute",
|
|
3223
|
-
zIndex: -1,
|
|
3224
|
-
content: '""'
|
|
3225
|
-
},
|
|
3226
|
-
_first: {
|
|
3227
|
-
_before: {
|
|
3228
|
-
display: "none"
|
|
3229
|
-
}
|
|
3230
|
-
},
|
|
3231
3207
|
_last: {
|
|
3232
|
-
|
|
3208
|
+
"& [data-part=separator]": {
|
|
3233
3209
|
display: "none"
|
|
3234
3210
|
}
|
|
3235
3211
|
},
|
|
@@ -3241,31 +3217,7 @@ var step_navigation_default = (0, import_dev37.defineSlotRecipe)({
|
|
|
3241
3217
|
*/
|
|
3242
3218
|
width: "calc(var(--_step-width, 320) / 16 * 1rem)",
|
|
3243
3219
|
minWidth: "calc(var(--_step-min-width, 160) / 16 * 1rem)",
|
|
3244
|
-
px: "calc(16 / 16 * 1rem)"
|
|
3245
|
-
_before: {
|
|
3246
|
-
/**
|
|
3247
|
-
* top: calc(var(--_number-size) / 2 + var(--_number-margin));
|
|
3248
|
-
* right: 50%;
|
|
3249
|
-
* width: 50%;
|
|
3250
|
-
* border-bottom: 1px solid;
|
|
3251
|
-
*/
|
|
3252
|
-
top: "calc(var(--_number-size) / 2 + var(--_number-margin))",
|
|
3253
|
-
right: "50%",
|
|
3254
|
-
width: "50%",
|
|
3255
|
-
borderBottomWidth: "1px"
|
|
3256
|
-
},
|
|
3257
|
-
_after: {
|
|
3258
|
-
/**
|
|
3259
|
-
* top: calc(var(--_number-size) / 2 + var(--_number-margin));
|
|
3260
|
-
* left: 50%;
|
|
3261
|
-
* width: 50%;
|
|
3262
|
-
* border-bottom: 1px solid;
|
|
3263
|
-
*/
|
|
3264
|
-
top: "calc(var(--_number-size) / 2 + var(--_number-margin))",
|
|
3265
|
-
left: "50%",
|
|
3266
|
-
width: "50%",
|
|
3267
|
-
borderBottomWidth: "1px"
|
|
3268
|
-
}
|
|
3220
|
+
px: "calc(16 / 16 * 1rem)"
|
|
3269
3221
|
},
|
|
3270
3222
|
_vertical: {
|
|
3271
3223
|
/**
|
|
@@ -3273,31 +3225,48 @@ var step_navigation_default = (0, import_dev37.defineSlotRecipe)({
|
|
|
3273
3225
|
* padding-bottom: calc(24 / 16 * 1rem);
|
|
3274
3226
|
*/
|
|
3275
3227
|
flex: 1,
|
|
3276
|
-
pb: "calc(24 / 16 * 1rem)"
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
|
|
3281
|
-
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3228
|
+
pb: "calc(24 / 16 * 1rem)"
|
|
3229
|
+
}
|
|
3230
|
+
},
|
|
3231
|
+
trigger: {
|
|
3232
|
+
/**
|
|
3233
|
+
* display: block;
|
|
3234
|
+
* border: 0;
|
|
3235
|
+
* background: none;
|
|
3236
|
+
* padding: 0;
|
|
3237
|
+
* color: inherit;
|
|
3238
|
+
* font: inherit;
|
|
3239
|
+
* text-wrap: pretty;
|
|
3240
|
+
*/
|
|
3241
|
+
display: "block",
|
|
3242
|
+
borderWidth: 0,
|
|
3243
|
+
bg: "none",
|
|
3244
|
+
p: 0,
|
|
3245
|
+
color: "inherit",
|
|
3246
|
+
font: "inherit",
|
|
3247
|
+
textWrap: "pretty",
|
|
3248
|
+
cursor: "pointer",
|
|
3249
|
+
_horizontal: {
|
|
3250
|
+
/**
|
|
3251
|
+
* width: 100%;
|
|
3252
|
+
* text-align: center;
|
|
3253
|
+
*/
|
|
3254
|
+
width: "100%",
|
|
3255
|
+
textAlign: "center"
|
|
3256
|
+
},
|
|
3257
|
+
_vertical: {
|
|
3258
|
+
/**
|
|
3259
|
+
* position: relative;
|
|
3260
|
+
* display: flex;
|
|
3261
|
+
* align-items: baseline;
|
|
3262
|
+
* column-gap: calc(16 / 16 * 1rem);
|
|
3263
|
+
* text-align: left;
|
|
3264
|
+
*/
|
|
3265
|
+
position: "relative",
|
|
3266
|
+
display: "flex",
|
|
3267
|
+
alignItems: "baseline",
|
|
3268
|
+
columnGap: "calc(16 / 16 * 1rem)",
|
|
3269
|
+
textAlign: "left"
|
|
3301
3270
|
}
|
|
3302
3271
|
},
|
|
3303
3272
|
indicator: {
|
|
@@ -3324,7 +3293,7 @@ var step_navigation_default = (0, import_dev37.defineSlotRecipe)({
|
|
|
3324
3293
|
position: "relative",
|
|
3325
3294
|
display: "grid",
|
|
3326
3295
|
placeContent: "center",
|
|
3327
|
-
|
|
3296
|
+
m: "calc(4 / 16 * 1rem)",
|
|
3328
3297
|
boxSizing: "border-box",
|
|
3329
3298
|
width: "fit-content",
|
|
3330
3299
|
height: "var(--_number-size)",
|
|
@@ -3336,12 +3305,12 @@ var step_navigation_default = (0, import_dev37.defineSlotRecipe)({
|
|
|
3336
3305
|
bg: "white",
|
|
3337
3306
|
py: 0,
|
|
3338
3307
|
px: "calc(2 / 16 * 1rem)",
|
|
3339
|
-
|
|
3340
|
-
fontSize: "calc(20 / 16 * 1rem)",
|
|
3341
|
-
lineHeight: 1.5,
|
|
3342
|
-
letterSpacing: "0.02em",
|
|
3308
|
+
textStyle: "std-20B-150",
|
|
3343
3309
|
textDecoration: "inherit",
|
|
3344
3310
|
textDecorationThickness: "inherit",
|
|
3311
|
+
_after: {
|
|
3312
|
+
content: '""'
|
|
3313
|
+
},
|
|
3345
3314
|
_current: {
|
|
3346
3315
|
/**
|
|
3347
3316
|
* background-color: var(--color-neutral-solid-gray-800);
|
|
@@ -3363,9 +3332,26 @@ var step_navigation_default = (0, import_dev37.defineSlotRecipe)({
|
|
|
3363
3332
|
boxShadow: "0 0 0 calc(2 / 16 * 1rem) white"
|
|
3364
3333
|
},
|
|
3365
3334
|
_complete: {
|
|
3366
|
-
bg: "colorPalette.bg"
|
|
3335
|
+
bg: "colorPalette.bg",
|
|
3336
|
+
_after: {
|
|
3337
|
+
/**
|
|
3338
|
+
* position: absolute;
|
|
3339
|
+
* top: calc(-10 / 16 * 1rem);
|
|
3340
|
+
* left: calc(50% + calc(6 / 16 * 1rem));
|
|
3341
|
+
* border-radius: 50%;
|
|
3342
|
+
* background-color: var(--color-neutral-white);
|
|
3343
|
+
*/
|
|
3344
|
+
position: "absolute",
|
|
3345
|
+
top: "calc(-10 / 16 * 1rem)",
|
|
3346
|
+
left: "calc(50% + calc(6 / 16 * 1rem))",
|
|
3347
|
+
borderRadius: "full",
|
|
3348
|
+
bg: "colorPalette.primary",
|
|
3349
|
+
width: "36px",
|
|
3350
|
+
height: "36px",
|
|
3351
|
+
clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0Z M14.4 27L5.4 18L7.938 15.462L14.4 21.906L28.062 8.244L30.6 10.8L14.4 27Z')"
|
|
3352
|
+
}
|
|
3367
3353
|
},
|
|
3368
|
-
|
|
3354
|
+
"[data-orientation=horizontal] > &": {
|
|
3369
3355
|
/**
|
|
3370
3356
|
* margin-right: auto;
|
|
3371
3357
|
* margin-left: auto;
|
|
@@ -3373,14 +3359,107 @@ var step_navigation_default = (0, import_dev37.defineSlotRecipe)({
|
|
|
3373
3359
|
mr: "auto",
|
|
3374
3360
|
ml: "auto"
|
|
3375
3361
|
},
|
|
3376
|
-
|
|
3362
|
+
"[data-orientation=vertical] > &": {
|
|
3377
3363
|
/**
|
|
3378
3364
|
* flex-shrink: 0;
|
|
3379
3365
|
*/
|
|
3380
|
-
flexShrink: 0
|
|
3366
|
+
flexShrink: 0,
|
|
3367
|
+
mx: "calc(4 / 16 * 1rem)"
|
|
3381
3368
|
}
|
|
3382
3369
|
},
|
|
3383
|
-
|
|
3370
|
+
title: {
|
|
3371
|
+
/**
|
|
3372
|
+
* display: block;
|
|
3373
|
+
* font-weight: bold;
|
|
3374
|
+
* font-size: calc(18 / 16 * 1rem);
|
|
3375
|
+
* line-height: 1.6;
|
|
3376
|
+
* letter-spacing: 0.02em;
|
|
3377
|
+
* text-decoration-thickness: inherit;
|
|
3378
|
+
*/
|
|
3379
|
+
display: "block",
|
|
3380
|
+
// fontWeight: "bold",
|
|
3381
|
+
// fontSize: "calc(18 / 16 * 1rem)",
|
|
3382
|
+
// lineHeight: 1.6,
|
|
3383
|
+
// letterSpacing: "0.02em",
|
|
3384
|
+
textStyle: "std-18B-160",
|
|
3385
|
+
textDecorationThickness: "inherit",
|
|
3386
|
+
"[data-orientation=horizontal] &": {
|
|
3387
|
+
/**
|
|
3388
|
+
* margin-top: var(--_title-margin);
|
|
3389
|
+
*/
|
|
3390
|
+
mt: "var(--_title-margin)"
|
|
3391
|
+
},
|
|
3392
|
+
"[data-orientation=vertical] &": {
|
|
3393
|
+
/**
|
|
3394
|
+
* padding: calc(var(--_number-size) / 2 + var(--_number-margin) - 0.875rem) 0;
|
|
3395
|
+
*/
|
|
3396
|
+
pt: "calc(var(--_number-size) / 2 + var(--_number-margin) - 0.875rem)",
|
|
3397
|
+
pb: 0
|
|
3398
|
+
}
|
|
3399
|
+
},
|
|
3400
|
+
description: {
|
|
3401
|
+
/**
|
|
3402
|
+
* margin: var(--_description-margin) 0 0;
|
|
3403
|
+
*/
|
|
3404
|
+
mt: "var(--_description-margin)",
|
|
3405
|
+
"[data-orientation=horizontal] &": {
|
|
3406
|
+
/**
|
|
3407
|
+
* text-align: center;
|
|
3408
|
+
*/
|
|
3409
|
+
textAlign: "center"
|
|
3410
|
+
},
|
|
3411
|
+
"[data-orientation=vertical] &": {
|
|
3412
|
+
/**
|
|
3413
|
+
* margin-top: calc(
|
|
3414
|
+
* var(--_description-margin) -
|
|
3415
|
+
* (var(--_number-size) / 2 + var(--_number-margin) - 0.875rem)
|
|
3416
|
+
* );
|
|
3417
|
+
* padding-left: calc(
|
|
3418
|
+
* var(--_number-size) +
|
|
3419
|
+
* var(--_number-margin) +
|
|
3420
|
+
* var(--_number-margin) +
|
|
3421
|
+
* calc(16 / 16 * 1rem)
|
|
3422
|
+
* );
|
|
3423
|
+
*/
|
|
3424
|
+
mt: "calc(var(--_description-margin) - (var(--_number-size) / 2 + var(--_number-margin) - 0.875rem))",
|
|
3425
|
+
pl: "calc(var(--_number-size) + var(--_number-margin) + var(--_number-margin) + calc(16 / 16 * 1rem))"
|
|
3426
|
+
}
|
|
3427
|
+
},
|
|
3428
|
+
separator: {
|
|
3429
|
+
/**
|
|
3430
|
+
* position: absolute;
|
|
3431
|
+
* z-index: -1;
|
|
3432
|
+
* content: "";
|
|
3433
|
+
*/
|
|
3434
|
+
position: "absolute",
|
|
3435
|
+
zIndex: -1,
|
|
3436
|
+
content: '""',
|
|
3437
|
+
borderColor: "colorPalette.primary",
|
|
3438
|
+
_horizontal: {
|
|
3439
|
+
/**
|
|
3440
|
+
* top: calc(var(--_number-size) / 2 + var(--_number-margin));
|
|
3441
|
+
* left: 50%;
|
|
3442
|
+
* width: 50%;
|
|
3443
|
+
* border-bottom: 1px solid;
|
|
3444
|
+
*/
|
|
3445
|
+
top: "calc(var(--_number-size) / 2 + var(--_number-margin))",
|
|
3446
|
+
left: "50%",
|
|
3447
|
+
width: "100%",
|
|
3448
|
+
borderBottomWidth: "1px"
|
|
3449
|
+
},
|
|
3450
|
+
_vertical: {
|
|
3451
|
+
/**
|
|
3452
|
+
* left: calc(var(--_number-size) / 2 + var(--_number-margin));
|
|
3453
|
+
* bottom: 0;
|
|
3454
|
+
* height: calc(100% - calc(32 / 16 * 1rem));
|
|
3455
|
+
* border-right: 1px solid;
|
|
3456
|
+
*/
|
|
3457
|
+
left: "calc(var(--_number-size) / 2 + var(--_number-margin))",
|
|
3458
|
+
top: "calc(50% - calc((32 / 16 * 1rem) / 2))",
|
|
3459
|
+
height: "100%",
|
|
3460
|
+
borderRightWidth: "1px"
|
|
3461
|
+
}
|
|
3462
|
+
}
|
|
3384
3463
|
},
|
|
3385
3464
|
variants: {
|
|
3386
3465
|
size: {
|
|
@@ -3401,7 +3480,11 @@ var step_navigation_default = (0, import_dev37.defineSlotRecipe)({
|
|
|
3401
3480
|
"--_description-margin": "calc(8 / 16 * 1rem)"
|
|
3402
3481
|
}
|
|
3403
3482
|
},
|
|
3404
|
-
indicator: {
|
|
3483
|
+
indicator: {
|
|
3484
|
+
_after: {
|
|
3485
|
+
transform: "scale(0.5)"
|
|
3486
|
+
}
|
|
3487
|
+
}
|
|
3405
3488
|
},
|
|
3406
3489
|
sm: {
|
|
3407
3490
|
root: {
|
|
@@ -3424,9 +3507,33 @@ var step_navigation_default = (0, import_dev37.defineSlotRecipe)({
|
|
|
3424
3507
|
* border-width: 1px;
|
|
3425
3508
|
* font-size: calc(16 / 16 * 1rem);
|
|
3426
3509
|
*/
|
|
3427
|
-
|
|
3510
|
+
m: "calc(3 / 16 * 1rem)",
|
|
3428
3511
|
borderWidth: "1px",
|
|
3429
|
-
fontSize: "calc(16 / 16 * 1rem)"
|
|
3512
|
+
// fontSize: "calc(16 / 16 * 1rem)",
|
|
3513
|
+
textStyle: "std-16B-170",
|
|
3514
|
+
"[data-orientation=horizontal] > &": {
|
|
3515
|
+
/**
|
|
3516
|
+
* margin-right: auto;
|
|
3517
|
+
* margin-left: auto;
|
|
3518
|
+
*/
|
|
3519
|
+
mr: "auto",
|
|
3520
|
+
ml: "auto"
|
|
3521
|
+
},
|
|
3522
|
+
"[data-orientation=vertical] > &": {
|
|
3523
|
+
mx: "calc(4 / 16 * 1rem)"
|
|
3524
|
+
},
|
|
3525
|
+
_after: {
|
|
3526
|
+
transform: "scale(0.33)"
|
|
3527
|
+
}
|
|
3528
|
+
},
|
|
3529
|
+
title: {
|
|
3530
|
+
/**
|
|
3531
|
+
* font-weight: bold;
|
|
3532
|
+
* font-size: calc(16 / 16 * 1rem);
|
|
3533
|
+
* line-height: 1.7;
|
|
3534
|
+
* letter-spacing: 0.02em;
|
|
3535
|
+
*/
|
|
3536
|
+
textStyle: "std-16B-170"
|
|
3430
3537
|
}
|
|
3431
3538
|
}
|
|
3432
3539
|
}
|
|
@@ -3642,7 +3749,7 @@ var tabs_default = (0, import_dev39.defineSlotRecipe)({
|
|
|
3642
3749
|
outlineWidth: "4px",
|
|
3643
3750
|
outlineColor: "black",
|
|
3644
3751
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
3645
|
-
|
|
3752
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
3646
3753
|
},
|
|
3647
3754
|
_selected: {
|
|
3648
3755
|
/**
|
|
@@ -3844,7 +3951,7 @@ var utility_link_default = (0, import_dev42.defineRecipe)({
|
|
|
3844
3951
|
outlineWidth: "4px",
|
|
3845
3952
|
outlineColor: "black",
|
|
3846
3953
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
3847
|
-
|
|
3954
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
3848
3955
|
},
|
|
3849
3956
|
/**
|
|
3850
3957
|
* with icon
|
package/dist/index.mjs
CHANGED
|
@@ -69,7 +69,7 @@ var accordion_default = defineSlotRecipe({
|
|
|
69
69
|
outlineWidth: "4px",
|
|
70
70
|
outlineColor: "black",
|
|
71
71
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
72
|
-
|
|
72
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
73
73
|
},
|
|
74
74
|
/**
|
|
75
75
|
* remove button style
|
|
@@ -261,7 +261,7 @@ var link_default = defineRecipe2({
|
|
|
261
261
|
_visited: "magenta.900",
|
|
262
262
|
_hover: "colorPalette.primary.100",
|
|
263
263
|
_focusVisible: "colorPalette.primary.100",
|
|
264
|
-
_active: "orange.
|
|
264
|
+
_active: "orange.800"
|
|
265
265
|
},
|
|
266
266
|
/**
|
|
267
267
|
* focus-visible:bg-yellow-300
|
|
@@ -293,7 +293,7 @@ var link_default = defineRecipe2({
|
|
|
293
293
|
outlineWidth: "4px",
|
|
294
294
|
outlineColor: "black",
|
|
295
295
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
296
|
-
|
|
296
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
297
297
|
},
|
|
298
298
|
/**
|
|
299
299
|
* with icon
|
|
@@ -397,7 +397,7 @@ var button_default = defineRecipe3({
|
|
|
397
397
|
outlineWidth: "4px",
|
|
398
398
|
outlineColor: "black",
|
|
399
399
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
400
|
-
|
|
400
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
401
401
|
},
|
|
402
402
|
/**
|
|
403
403
|
* aria-disabled:pointer-events-none aria-disabled:forced-colors:border-[GrayText] aria-disabled:forced-colors:text-[GrayText]
|
|
@@ -600,7 +600,7 @@ var card_default = defineSlotRecipe3({
|
|
|
600
600
|
outlineWidth: "4px",
|
|
601
601
|
outlineColor: "black",
|
|
602
602
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
603
|
-
|
|
603
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
604
604
|
}
|
|
605
605
|
},
|
|
606
606
|
image: {
|
|
@@ -726,7 +726,7 @@ var checkbox_default = defineSlotRecipe4({
|
|
|
726
726
|
outlineWidth: "4px",
|
|
727
727
|
outlineColor: "black",
|
|
728
728
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
729
|
-
|
|
729
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
730
730
|
}
|
|
731
731
|
},
|
|
732
732
|
/**
|
|
@@ -739,7 +739,7 @@ var checkbox_default = defineSlotRecipe4({
|
|
|
739
739
|
outlineWidth: "4px",
|
|
740
740
|
outlineColor: "black",
|
|
741
741
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
742
|
-
|
|
742
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
743
743
|
}
|
|
744
744
|
},
|
|
745
745
|
indicator: {
|
|
@@ -984,7 +984,7 @@ var buttonCommon = {
|
|
|
984
984
|
outlineWidth: "4px",
|
|
985
985
|
outlineColor: "black",
|
|
986
986
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
987
|
-
|
|
987
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
988
988
|
}
|
|
989
989
|
};
|
|
990
990
|
var chip_tag_default = defineSlotRecipe5({
|
|
@@ -1122,7 +1122,7 @@ var input_default = defineRecipe6({
|
|
|
1122
1122
|
outlineWidth: "4px",
|
|
1123
1123
|
outlineColor: "black",
|
|
1124
1124
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1125
|
-
|
|
1125
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1126
1126
|
},
|
|
1127
1127
|
/**
|
|
1128
1128
|
* aria-disabled:pointer-events-none
|
|
@@ -1194,7 +1194,7 @@ var select_box_default = defineRecipe7({
|
|
|
1194
1194
|
outlineWidth: "4px",
|
|
1195
1195
|
outlineColor: "black",
|
|
1196
1196
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1197
|
-
|
|
1197
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1198
1198
|
}
|
|
1199
1199
|
},
|
|
1200
1200
|
variants: {
|
|
@@ -1458,7 +1458,7 @@ var disclosure_default = defineSlotRecipe8({
|
|
|
1458
1458
|
outlineWidth: "4px",
|
|
1459
1459
|
outlineColor: "black",
|
|
1460
1460
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1461
|
-
|
|
1461
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1462
1462
|
}
|
|
1463
1463
|
},
|
|
1464
1464
|
indicator: {
|
|
@@ -1714,7 +1714,7 @@ var emergency_banner_default = defineSlotRecipe10({
|
|
|
1714
1714
|
outlineWidth: "4px",
|
|
1715
1715
|
outlineColor: "black",
|
|
1716
1716
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1717
|
-
|
|
1717
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1718
1718
|
}
|
|
1719
1719
|
}
|
|
1720
1720
|
}
|
|
@@ -1807,7 +1807,7 @@ var textarea_default = defineRecipe12({
|
|
|
1807
1807
|
outlineWidth: "4px",
|
|
1808
1808
|
outlineColor: "black",
|
|
1809
1809
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1810
|
-
|
|
1810
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1811
1811
|
}
|
|
1812
1812
|
}
|
|
1813
1813
|
});
|
|
@@ -1943,7 +1943,7 @@ var hamburger_menu_button_default = defineRecipe13({
|
|
|
1943
1943
|
outlineWidth: "4px",
|
|
1944
1944
|
outlineColor: "black",
|
|
1945
1945
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
1946
|
-
|
|
1946
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
1947
1947
|
},
|
|
1948
1948
|
/**
|
|
1949
1949
|
* override reset
|
|
@@ -2076,7 +2076,7 @@ var menu_item_default = defineRecipe16({
|
|
|
2076
2076
|
outlineWidth: "4px",
|
|
2077
2077
|
outlineColor: "black",
|
|
2078
2078
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
2079
|
-
|
|
2079
|
+
focusBox: "calc(6 / 16 * 1rem)",
|
|
2080
2080
|
zIndex: 1
|
|
2081
2081
|
},
|
|
2082
2082
|
_highlighted: {
|
|
@@ -2085,7 +2085,7 @@ var menu_item_default = defineRecipe16({
|
|
|
2085
2085
|
outlineWidth: "4px",
|
|
2086
2086
|
outlineColor: "black",
|
|
2087
2087
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
2088
|
-
|
|
2088
|
+
focusBox: "calc(6 / 16 * 1rem)",
|
|
2089
2089
|
zIndex: 1
|
|
2090
2090
|
}
|
|
2091
2091
|
},
|
|
@@ -2167,7 +2167,7 @@ var menu_default = defineSlotRecipe13({
|
|
|
2167
2167
|
outlineWidth: "4px",
|
|
2168
2168
|
outlineColor: "black",
|
|
2169
2169
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
2170
|
-
|
|
2170
|
+
focusBox: "calc(2 / 16 * 1rem)",
|
|
2171
2171
|
zIndex: 1
|
|
2172
2172
|
}
|
|
2173
2173
|
/**
|
|
@@ -2749,7 +2749,7 @@ var radio_group_default = defineSlotRecipe17({
|
|
|
2749
2749
|
outlineWidth: "4px",
|
|
2750
2750
|
outlineColor: "black",
|
|
2751
2751
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
2752
|
-
|
|
2752
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
2753
2753
|
}
|
|
2754
2754
|
},
|
|
2755
2755
|
/**
|
|
@@ -2762,7 +2762,7 @@ var radio_group_default = defineSlotRecipe17({
|
|
|
2762
2762
|
outlineWidth: "4px",
|
|
2763
2763
|
outlineColor: "black",
|
|
2764
2764
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
2765
|
-
|
|
2765
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
2766
2766
|
},
|
|
2767
2767
|
_before: {
|
|
2768
2768
|
/**
|
|
@@ -2960,7 +2960,7 @@ var resource_list_default = defineSlotRecipe18({
|
|
|
2960
2960
|
outlineWidth: "4px",
|
|
2961
2961
|
outlineColor: "black",
|
|
2962
2962
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
2963
|
-
|
|
2963
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
2964
2964
|
}
|
|
2965
2965
|
},
|
|
2966
2966
|
action: {
|
|
@@ -3130,7 +3130,7 @@ import { defineSlotRecipe as defineSlotRecipe20 } from "@pandacss/dev";
|
|
|
3130
3130
|
import { anatomy as stepNavigationAnatomy } from "@zag-js/steps";
|
|
3131
3131
|
var step_navigation_default = defineSlotRecipe20({
|
|
3132
3132
|
className: "step-navigation",
|
|
3133
|
-
slots: stepNavigationAnatomy.keys(),
|
|
3133
|
+
slots: stepNavigationAnatomy.extendWith("title", "description").keys(),
|
|
3134
3134
|
base: {
|
|
3135
3135
|
root: {
|
|
3136
3136
|
/**
|
|
@@ -3142,10 +3142,11 @@ var step_navigation_default = defineSlotRecipe20({
|
|
|
3142
3142
|
* letter-spacing: 0.02em;
|
|
3143
3143
|
* overflow-wrap: anywhere;
|
|
3144
3144
|
*/
|
|
3145
|
+
textStyle: "std-16N-170",
|
|
3145
3146
|
overflowWrap: "anywhere",
|
|
3146
|
-
colorPalette: "keyColor"
|
|
3147
|
-
"--_step-width": "
|
|
3148
|
-
"--_step-min-width": "
|
|
3147
|
+
colorPalette: "keyColor"
|
|
3148
|
+
// "--_step-width": "320",
|
|
3149
|
+
// "--_step-min-width": "160",
|
|
3149
3150
|
},
|
|
3150
3151
|
list: {
|
|
3151
3152
|
/**
|
|
@@ -3170,33 +3171,8 @@ var step_navigation_default = defineSlotRecipe20({
|
|
|
3170
3171
|
*/
|
|
3171
3172
|
position: "relative",
|
|
3172
3173
|
boxSizing: "border-box",
|
|
3173
|
-
_before: {
|
|
3174
|
-
/**
|
|
3175
|
-
* position: absolute;
|
|
3176
|
-
* z-index: -1;
|
|
3177
|
-
* content: "";
|
|
3178
|
-
*/
|
|
3179
|
-
position: "absolute",
|
|
3180
|
-
zIndex: -1,
|
|
3181
|
-
content: '""'
|
|
3182
|
-
},
|
|
3183
|
-
_after: {
|
|
3184
|
-
/**
|
|
3185
|
-
* position: absolute;
|
|
3186
|
-
* z-index: -1;
|
|
3187
|
-
* content: "";
|
|
3188
|
-
*/
|
|
3189
|
-
position: "absolute",
|
|
3190
|
-
zIndex: -1,
|
|
3191
|
-
content: '""'
|
|
3192
|
-
},
|
|
3193
|
-
_first: {
|
|
3194
|
-
_before: {
|
|
3195
|
-
display: "none"
|
|
3196
|
-
}
|
|
3197
|
-
},
|
|
3198
3174
|
_last: {
|
|
3199
|
-
|
|
3175
|
+
"& [data-part=separator]": {
|
|
3200
3176
|
display: "none"
|
|
3201
3177
|
}
|
|
3202
3178
|
},
|
|
@@ -3208,31 +3184,7 @@ var step_navigation_default = defineSlotRecipe20({
|
|
|
3208
3184
|
*/
|
|
3209
3185
|
width: "calc(var(--_step-width, 320) / 16 * 1rem)",
|
|
3210
3186
|
minWidth: "calc(var(--_step-min-width, 160) / 16 * 1rem)",
|
|
3211
|
-
px: "calc(16 / 16 * 1rem)"
|
|
3212
|
-
_before: {
|
|
3213
|
-
/**
|
|
3214
|
-
* top: calc(var(--_number-size) / 2 + var(--_number-margin));
|
|
3215
|
-
* right: 50%;
|
|
3216
|
-
* width: 50%;
|
|
3217
|
-
* border-bottom: 1px solid;
|
|
3218
|
-
*/
|
|
3219
|
-
top: "calc(var(--_number-size) / 2 + var(--_number-margin))",
|
|
3220
|
-
right: "50%",
|
|
3221
|
-
width: "50%",
|
|
3222
|
-
borderBottomWidth: "1px"
|
|
3223
|
-
},
|
|
3224
|
-
_after: {
|
|
3225
|
-
/**
|
|
3226
|
-
* top: calc(var(--_number-size) / 2 + var(--_number-margin));
|
|
3227
|
-
* left: 50%;
|
|
3228
|
-
* width: 50%;
|
|
3229
|
-
* border-bottom: 1px solid;
|
|
3230
|
-
*/
|
|
3231
|
-
top: "calc(var(--_number-size) / 2 + var(--_number-margin))",
|
|
3232
|
-
left: "50%",
|
|
3233
|
-
width: "50%",
|
|
3234
|
-
borderBottomWidth: "1px"
|
|
3235
|
-
}
|
|
3187
|
+
px: "calc(16 / 16 * 1rem)"
|
|
3236
3188
|
},
|
|
3237
3189
|
_vertical: {
|
|
3238
3190
|
/**
|
|
@@ -3240,31 +3192,48 @@ var step_navigation_default = defineSlotRecipe20({
|
|
|
3240
3192
|
* padding-bottom: calc(24 / 16 * 1rem);
|
|
3241
3193
|
*/
|
|
3242
3194
|
flex: 1,
|
|
3243
|
-
pb: "calc(24 / 16 * 1rem)"
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3195
|
+
pb: "calc(24 / 16 * 1rem)"
|
|
3196
|
+
}
|
|
3197
|
+
},
|
|
3198
|
+
trigger: {
|
|
3199
|
+
/**
|
|
3200
|
+
* display: block;
|
|
3201
|
+
* border: 0;
|
|
3202
|
+
* background: none;
|
|
3203
|
+
* padding: 0;
|
|
3204
|
+
* color: inherit;
|
|
3205
|
+
* font: inherit;
|
|
3206
|
+
* text-wrap: pretty;
|
|
3207
|
+
*/
|
|
3208
|
+
display: "block",
|
|
3209
|
+
borderWidth: 0,
|
|
3210
|
+
bg: "none",
|
|
3211
|
+
p: 0,
|
|
3212
|
+
color: "inherit",
|
|
3213
|
+
font: "inherit",
|
|
3214
|
+
textWrap: "pretty",
|
|
3215
|
+
cursor: "pointer",
|
|
3216
|
+
_horizontal: {
|
|
3217
|
+
/**
|
|
3218
|
+
* width: 100%;
|
|
3219
|
+
* text-align: center;
|
|
3220
|
+
*/
|
|
3221
|
+
width: "100%",
|
|
3222
|
+
textAlign: "center"
|
|
3223
|
+
},
|
|
3224
|
+
_vertical: {
|
|
3225
|
+
/**
|
|
3226
|
+
* position: relative;
|
|
3227
|
+
* display: flex;
|
|
3228
|
+
* align-items: baseline;
|
|
3229
|
+
* column-gap: calc(16 / 16 * 1rem);
|
|
3230
|
+
* text-align: left;
|
|
3231
|
+
*/
|
|
3232
|
+
position: "relative",
|
|
3233
|
+
display: "flex",
|
|
3234
|
+
alignItems: "baseline",
|
|
3235
|
+
columnGap: "calc(16 / 16 * 1rem)",
|
|
3236
|
+
textAlign: "left"
|
|
3268
3237
|
}
|
|
3269
3238
|
},
|
|
3270
3239
|
indicator: {
|
|
@@ -3291,7 +3260,7 @@ var step_navigation_default = defineSlotRecipe20({
|
|
|
3291
3260
|
position: "relative",
|
|
3292
3261
|
display: "grid",
|
|
3293
3262
|
placeContent: "center",
|
|
3294
|
-
|
|
3263
|
+
m: "calc(4 / 16 * 1rem)",
|
|
3295
3264
|
boxSizing: "border-box",
|
|
3296
3265
|
width: "fit-content",
|
|
3297
3266
|
height: "var(--_number-size)",
|
|
@@ -3303,12 +3272,12 @@ var step_navigation_default = defineSlotRecipe20({
|
|
|
3303
3272
|
bg: "white",
|
|
3304
3273
|
py: 0,
|
|
3305
3274
|
px: "calc(2 / 16 * 1rem)",
|
|
3306
|
-
|
|
3307
|
-
fontSize: "calc(20 / 16 * 1rem)",
|
|
3308
|
-
lineHeight: 1.5,
|
|
3309
|
-
letterSpacing: "0.02em",
|
|
3275
|
+
textStyle: "std-20B-150",
|
|
3310
3276
|
textDecoration: "inherit",
|
|
3311
3277
|
textDecorationThickness: "inherit",
|
|
3278
|
+
_after: {
|
|
3279
|
+
content: '""'
|
|
3280
|
+
},
|
|
3312
3281
|
_current: {
|
|
3313
3282
|
/**
|
|
3314
3283
|
* background-color: var(--color-neutral-solid-gray-800);
|
|
@@ -3330,9 +3299,26 @@ var step_navigation_default = defineSlotRecipe20({
|
|
|
3330
3299
|
boxShadow: "0 0 0 calc(2 / 16 * 1rem) white"
|
|
3331
3300
|
},
|
|
3332
3301
|
_complete: {
|
|
3333
|
-
bg: "colorPalette.bg"
|
|
3302
|
+
bg: "colorPalette.bg",
|
|
3303
|
+
_after: {
|
|
3304
|
+
/**
|
|
3305
|
+
* position: absolute;
|
|
3306
|
+
* top: calc(-10 / 16 * 1rem);
|
|
3307
|
+
* left: calc(50% + calc(6 / 16 * 1rem));
|
|
3308
|
+
* border-radius: 50%;
|
|
3309
|
+
* background-color: var(--color-neutral-white);
|
|
3310
|
+
*/
|
|
3311
|
+
position: "absolute",
|
|
3312
|
+
top: "calc(-10 / 16 * 1rem)",
|
|
3313
|
+
left: "calc(50% + calc(6 / 16 * 1rem))",
|
|
3314
|
+
borderRadius: "full",
|
|
3315
|
+
bg: "colorPalette.primary",
|
|
3316
|
+
width: "36px",
|
|
3317
|
+
height: "36px",
|
|
3318
|
+
clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0Z M14.4 27L5.4 18L7.938 15.462L14.4 21.906L28.062 8.244L30.6 10.8L14.4 27Z')"
|
|
3319
|
+
}
|
|
3334
3320
|
},
|
|
3335
|
-
|
|
3321
|
+
"[data-orientation=horizontal] > &": {
|
|
3336
3322
|
/**
|
|
3337
3323
|
* margin-right: auto;
|
|
3338
3324
|
* margin-left: auto;
|
|
@@ -3340,14 +3326,107 @@ var step_navigation_default = defineSlotRecipe20({
|
|
|
3340
3326
|
mr: "auto",
|
|
3341
3327
|
ml: "auto"
|
|
3342
3328
|
},
|
|
3343
|
-
|
|
3329
|
+
"[data-orientation=vertical] > &": {
|
|
3344
3330
|
/**
|
|
3345
3331
|
* flex-shrink: 0;
|
|
3346
3332
|
*/
|
|
3347
|
-
flexShrink: 0
|
|
3333
|
+
flexShrink: 0,
|
|
3334
|
+
mx: "calc(4 / 16 * 1rem)"
|
|
3348
3335
|
}
|
|
3349
3336
|
},
|
|
3350
|
-
|
|
3337
|
+
title: {
|
|
3338
|
+
/**
|
|
3339
|
+
* display: block;
|
|
3340
|
+
* font-weight: bold;
|
|
3341
|
+
* font-size: calc(18 / 16 * 1rem);
|
|
3342
|
+
* line-height: 1.6;
|
|
3343
|
+
* letter-spacing: 0.02em;
|
|
3344
|
+
* text-decoration-thickness: inherit;
|
|
3345
|
+
*/
|
|
3346
|
+
display: "block",
|
|
3347
|
+
// fontWeight: "bold",
|
|
3348
|
+
// fontSize: "calc(18 / 16 * 1rem)",
|
|
3349
|
+
// lineHeight: 1.6,
|
|
3350
|
+
// letterSpacing: "0.02em",
|
|
3351
|
+
textStyle: "std-18B-160",
|
|
3352
|
+
textDecorationThickness: "inherit",
|
|
3353
|
+
"[data-orientation=horizontal] &": {
|
|
3354
|
+
/**
|
|
3355
|
+
* margin-top: var(--_title-margin);
|
|
3356
|
+
*/
|
|
3357
|
+
mt: "var(--_title-margin)"
|
|
3358
|
+
},
|
|
3359
|
+
"[data-orientation=vertical] &": {
|
|
3360
|
+
/**
|
|
3361
|
+
* padding: calc(var(--_number-size) / 2 + var(--_number-margin) - 0.875rem) 0;
|
|
3362
|
+
*/
|
|
3363
|
+
pt: "calc(var(--_number-size) / 2 + var(--_number-margin) - 0.875rem)",
|
|
3364
|
+
pb: 0
|
|
3365
|
+
}
|
|
3366
|
+
},
|
|
3367
|
+
description: {
|
|
3368
|
+
/**
|
|
3369
|
+
* margin: var(--_description-margin) 0 0;
|
|
3370
|
+
*/
|
|
3371
|
+
mt: "var(--_description-margin)",
|
|
3372
|
+
"[data-orientation=horizontal] &": {
|
|
3373
|
+
/**
|
|
3374
|
+
* text-align: center;
|
|
3375
|
+
*/
|
|
3376
|
+
textAlign: "center"
|
|
3377
|
+
},
|
|
3378
|
+
"[data-orientation=vertical] &": {
|
|
3379
|
+
/**
|
|
3380
|
+
* margin-top: calc(
|
|
3381
|
+
* var(--_description-margin) -
|
|
3382
|
+
* (var(--_number-size) / 2 + var(--_number-margin) - 0.875rem)
|
|
3383
|
+
* );
|
|
3384
|
+
* padding-left: calc(
|
|
3385
|
+
* var(--_number-size) +
|
|
3386
|
+
* var(--_number-margin) +
|
|
3387
|
+
* var(--_number-margin) +
|
|
3388
|
+
* calc(16 / 16 * 1rem)
|
|
3389
|
+
* );
|
|
3390
|
+
*/
|
|
3391
|
+
mt: "calc(var(--_description-margin) - (var(--_number-size) / 2 + var(--_number-margin) - 0.875rem))",
|
|
3392
|
+
pl: "calc(var(--_number-size) + var(--_number-margin) + var(--_number-margin) + calc(16 / 16 * 1rem))"
|
|
3393
|
+
}
|
|
3394
|
+
},
|
|
3395
|
+
separator: {
|
|
3396
|
+
/**
|
|
3397
|
+
* position: absolute;
|
|
3398
|
+
* z-index: -1;
|
|
3399
|
+
* content: "";
|
|
3400
|
+
*/
|
|
3401
|
+
position: "absolute",
|
|
3402
|
+
zIndex: -1,
|
|
3403
|
+
content: '""',
|
|
3404
|
+
borderColor: "colorPalette.primary",
|
|
3405
|
+
_horizontal: {
|
|
3406
|
+
/**
|
|
3407
|
+
* top: calc(var(--_number-size) / 2 + var(--_number-margin));
|
|
3408
|
+
* left: 50%;
|
|
3409
|
+
* width: 50%;
|
|
3410
|
+
* border-bottom: 1px solid;
|
|
3411
|
+
*/
|
|
3412
|
+
top: "calc(var(--_number-size) / 2 + var(--_number-margin))",
|
|
3413
|
+
left: "50%",
|
|
3414
|
+
width: "100%",
|
|
3415
|
+
borderBottomWidth: "1px"
|
|
3416
|
+
},
|
|
3417
|
+
_vertical: {
|
|
3418
|
+
/**
|
|
3419
|
+
* left: calc(var(--_number-size) / 2 + var(--_number-margin));
|
|
3420
|
+
* bottom: 0;
|
|
3421
|
+
* height: calc(100% - calc(32 / 16 * 1rem));
|
|
3422
|
+
* border-right: 1px solid;
|
|
3423
|
+
*/
|
|
3424
|
+
left: "calc(var(--_number-size) / 2 + var(--_number-margin))",
|
|
3425
|
+
top: "calc(50% - calc((32 / 16 * 1rem) / 2))",
|
|
3426
|
+
height: "100%",
|
|
3427
|
+
borderRightWidth: "1px"
|
|
3428
|
+
}
|
|
3429
|
+
}
|
|
3351
3430
|
},
|
|
3352
3431
|
variants: {
|
|
3353
3432
|
size: {
|
|
@@ -3368,7 +3447,11 @@ var step_navigation_default = defineSlotRecipe20({
|
|
|
3368
3447
|
"--_description-margin": "calc(8 / 16 * 1rem)"
|
|
3369
3448
|
}
|
|
3370
3449
|
},
|
|
3371
|
-
indicator: {
|
|
3450
|
+
indicator: {
|
|
3451
|
+
_after: {
|
|
3452
|
+
transform: "scale(0.5)"
|
|
3453
|
+
}
|
|
3454
|
+
}
|
|
3372
3455
|
},
|
|
3373
3456
|
sm: {
|
|
3374
3457
|
root: {
|
|
@@ -3391,9 +3474,33 @@ var step_navigation_default = defineSlotRecipe20({
|
|
|
3391
3474
|
* border-width: 1px;
|
|
3392
3475
|
* font-size: calc(16 / 16 * 1rem);
|
|
3393
3476
|
*/
|
|
3394
|
-
|
|
3477
|
+
m: "calc(3 / 16 * 1rem)",
|
|
3395
3478
|
borderWidth: "1px",
|
|
3396
|
-
fontSize: "calc(16 / 16 * 1rem)"
|
|
3479
|
+
// fontSize: "calc(16 / 16 * 1rem)",
|
|
3480
|
+
textStyle: "std-16B-170",
|
|
3481
|
+
"[data-orientation=horizontal] > &": {
|
|
3482
|
+
/**
|
|
3483
|
+
* margin-right: auto;
|
|
3484
|
+
* margin-left: auto;
|
|
3485
|
+
*/
|
|
3486
|
+
mr: "auto",
|
|
3487
|
+
ml: "auto"
|
|
3488
|
+
},
|
|
3489
|
+
"[data-orientation=vertical] > &": {
|
|
3490
|
+
mx: "calc(4 / 16 * 1rem)"
|
|
3491
|
+
},
|
|
3492
|
+
_after: {
|
|
3493
|
+
transform: "scale(0.33)"
|
|
3494
|
+
}
|
|
3495
|
+
},
|
|
3496
|
+
title: {
|
|
3497
|
+
/**
|
|
3498
|
+
* font-weight: bold;
|
|
3499
|
+
* font-size: calc(16 / 16 * 1rem);
|
|
3500
|
+
* line-height: 1.7;
|
|
3501
|
+
* letter-spacing: 0.02em;
|
|
3502
|
+
*/
|
|
3503
|
+
textStyle: "std-16B-170"
|
|
3397
3504
|
}
|
|
3398
3505
|
}
|
|
3399
3506
|
}
|
|
@@ -3609,7 +3716,7 @@ var tabs_default = defineSlotRecipe22({
|
|
|
3609
3716
|
outlineWidth: "4px",
|
|
3610
3717
|
outlineColor: "black",
|
|
3611
3718
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
3612
|
-
|
|
3719
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
3613
3720
|
},
|
|
3614
3721
|
_selected: {
|
|
3615
3722
|
/**
|
|
@@ -3811,7 +3918,7 @@ var utility_link_default = defineRecipe19({
|
|
|
3811
3918
|
outlineWidth: "4px",
|
|
3812
3919
|
outlineColor: "black",
|
|
3813
3920
|
outlineOffset: "calc(2 / 16 * 1rem)",
|
|
3814
|
-
|
|
3921
|
+
focusBox: "calc(2 / 16 * 1rem)"
|
|
3815
3922
|
},
|
|
3816
3923
|
/**
|
|
3817
3924
|
* with icon
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cieloazul310/digital-go-pandacss-preset",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"homepage": "https://github.com/cieloazul310/digital-go-design-system-with-panda",
|
|
6
6
|
"author": {
|
|
@@ -39,13 +39,13 @@
|
|
|
39
39
|
"format": "prettier --parser typescript --write ."
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@cieloazul310/digital-go-pandacss-plugin": "^0.
|
|
43
|
-
"@cieloazul310/digital-go-pandacss-utils": "^0.
|
|
42
|
+
"@cieloazul310/digital-go-pandacss-plugin": "^0.2.0",
|
|
43
|
+
"@cieloazul310/digital-go-pandacss-utils": "^0.2.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@pandacss/dev": "^1.4.2",
|
|
47
|
-
"@repo/eslint-config": "^0.
|
|
48
|
-
"@repo/typescript-config": "^0.
|
|
47
|
+
"@repo/eslint-config": "^0.2.0",
|
|
48
|
+
"@repo/typescript-config": "^0.2.0",
|
|
49
49
|
"@zag-js/accordion": "^1.26.2",
|
|
50
50
|
"@zag-js/anatomy": "^1.26.2",
|
|
51
51
|
"@zag-js/checkbox": "^1.26.2",
|