ics-ui-kit 0.1.3 → 0.1.5
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/components/glass-toolbar/GlassToolbar.d.ts +51 -0
- package/dist/components/glass-toolbar/GlassToolbar.stories.d.ts +14 -0
- package/dist/components/glass-toolbar/index.d.ts +2 -0
- package/dist/components/glass-toolbar.d.ts +2 -0
- package/dist/components/glass-toolbar.js +99 -0
- package/dist/components/glass-toolbar.js.map +1 -0
- package/dist/components/resizable/Resizable.d.ts +1 -0
- package/dist/components/resizable/index.d.ts +1 -1
- package/dist/components/resizable.js +78 -77
- package/dist/components/resizable.js.map +1 -1
- package/dist/components/sidebar/Sidebar.stories.d.ts +1 -0
- package/dist/components/toolbar.js +85 -197
- package/dist/components/toolbar.js.map +1 -1
- package/dist/index-BDrapWDv.js +122 -0
- package/dist/index-BDrapWDv.js.map +1 -0
- package/dist/styles-scoped.css +59 -12
- package/dist/styles.css +59 -12
- package/dist/theme.css +17 -13
- package/package.json +1 -1
- package/tailwind.preset.js +4 -1
package/dist/styles-scoped.css
CHANGED
|
@@ -178,6 +178,9 @@
|
|
|
178
178
|
--glass-regular: blur(16px) brightness(100%) saturate(180%) contrast(100%);
|
|
179
179
|
--glass-thick: blur(24px) brightness(96%) saturate(200%) contrast(102%);
|
|
180
180
|
--glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
|
|
181
|
+
|
|
182
|
+
--shadow-glass-sm: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 0 40px 30px -40px rgba(0, 0, 0, 0.16) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-secondary-border, #E4E4E7), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
|
|
183
|
+
--shadow-glass-md: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-primary-border, #D4D4D8), 0 4px 24px 0 rgba(0, 0, 0, 0.12);
|
|
181
184
|
}
|
|
182
185
|
.dark {
|
|
183
186
|
/**
|
|
@@ -338,6 +341,21 @@
|
|
|
338
341
|
--glass-regular: blur(16px) brightness(62%) saturate(160%) contrast(110%);
|
|
339
342
|
--glass-thick: blur(24px) brightness(52%) saturate(180%) contrast(115%);
|
|
340
343
|
--glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
|
|
344
|
+
|
|
345
|
+
--shadow-glass-sm: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -40px 80px -40px rgba(255, 255, 255, 0.30) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
|
|
346
|
+
--shadow-glass-md: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 48px 0 rgba(0, 0, 0, 0.48);
|
|
347
|
+
}
|
|
348
|
+
.backdrop-glass-clear {
|
|
349
|
+
backdrop-filter: var(--glass-clear);
|
|
350
|
+
}
|
|
351
|
+
.backdrop-glass-thin {
|
|
352
|
+
backdrop-filter: var(--glass-thin);
|
|
353
|
+
}
|
|
354
|
+
.backdrop-glass-regular {
|
|
355
|
+
backdrop-filter: var(--glass-regular);
|
|
356
|
+
}
|
|
357
|
+
.backdrop-glass-thick {
|
|
358
|
+
backdrop-filter: var(--glass-thick);
|
|
341
359
|
}
|
|
342
360
|
/*
|
|
343
361
|
* Базовые стили Tailwind Preflight.
|
|
@@ -1735,6 +1753,9 @@
|
|
|
1735
1753
|
.ui-kit .aspect-square {
|
|
1736
1754
|
aspect-ratio: 1 / 1;
|
|
1737
1755
|
}
|
|
1756
|
+
.ui-kit .aspect-video {
|
|
1757
|
+
aspect-ratio: 16 / 9;
|
|
1758
|
+
}
|
|
1738
1759
|
.ui-kit .size-11 {
|
|
1739
1760
|
width: 2.75rem;
|
|
1740
1761
|
height: 2.75rem;
|
|
@@ -1970,6 +1991,9 @@
|
|
|
1970
1991
|
.ui-kit .max-h-\[30vh\] {
|
|
1971
1992
|
max-height: 30vh;
|
|
1972
1993
|
}
|
|
1994
|
+
.ui-kit .max-h-\[400px\] {
|
|
1995
|
+
max-height: 400px;
|
|
1996
|
+
}
|
|
1973
1997
|
.ui-kit .max-h-\[calc\(100vh-44px\)\] {
|
|
1974
1998
|
max-height: calc(100vh - 44px);
|
|
1975
1999
|
}
|
|
@@ -2285,6 +2309,9 @@
|
|
|
2285
2309
|
.ui-kit .max-w-36 {
|
|
2286
2310
|
max-width: 9rem;
|
|
2287
2311
|
}
|
|
2312
|
+
.ui-kit .max-w-3xl {
|
|
2313
|
+
max-width: 48rem;
|
|
2314
|
+
}
|
|
2288
2315
|
.ui-kit .max-w-4xl {
|
|
2289
2316
|
max-width: 56rem;
|
|
2290
2317
|
}
|
|
@@ -2971,6 +2998,9 @@
|
|
|
2971
2998
|
.ui-kit .bg-alpha-30 {
|
|
2972
2999
|
background-color: hsl(var(--alpha-70));
|
|
2973
3000
|
}
|
|
3001
|
+
.ui-kit .bg-alpha-50 {
|
|
3002
|
+
background-color: hsl(var(--alpha-50));
|
|
3003
|
+
}
|
|
2974
3004
|
.ui-kit .bg-alpha-60 {
|
|
2975
3005
|
background-color: hsl(var(--alpha-50));
|
|
2976
3006
|
}
|
|
@@ -3028,6 +3058,9 @@
|
|
|
3028
3058
|
.ui-kit .bg-inverse-secondary-bg {
|
|
3029
3059
|
background-color: hsl(var(--inverse-secondary-bg));
|
|
3030
3060
|
}
|
|
3061
|
+
.ui-kit .bg-muted\/50 {
|
|
3062
|
+
background-color: hsl(var(--muted) / 0.5);
|
|
3063
|
+
}
|
|
3031
3064
|
.ui-kit .bg-orange-100 {
|
|
3032
3065
|
--tw-bg-opacity: 1;
|
|
3033
3066
|
background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
|
|
@@ -3492,6 +3525,9 @@
|
|
|
3492
3525
|
.ui-kit .pr-3 {
|
|
3493
3526
|
padding-right: 0.75rem;
|
|
3494
3527
|
}
|
|
3528
|
+
.ui-kit .pr-4 {
|
|
3529
|
+
padding-right: 1rem;
|
|
3530
|
+
}
|
|
3495
3531
|
.ui-kit .pr-9 {
|
|
3496
3532
|
padding-right: 2.25rem;
|
|
3497
3533
|
}
|
|
@@ -3875,6 +3911,11 @@
|
|
|
3875
3911
|
--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
|
|
3876
3912
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
3877
3913
|
}
|
|
3914
|
+
.ui-kit .shadow-glass-sm {
|
|
3915
|
+
--tw-shadow: var(--shadow-glass-sm);
|
|
3916
|
+
--tw-shadow-colored: var(--shadow-glass-sm);
|
|
3917
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
3918
|
+
}
|
|
3878
3919
|
.ui-kit .shadow-hard-md {
|
|
3879
3920
|
--tw-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.50), 0 0 0.5px 0 rgba(255, 255, 255, 0.30) inset, 0 5px 12px 0 rgba(15, 23, 42, 0.35), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
|
|
3880
3921
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), inset 0 0 0.5px 0 var(--tw-shadow-color), 0 5px 12px 0 var(--tw-shadow-color), inset 0 0.5px 0 0 var(--tw-shadow-color);
|
|
@@ -4125,18 +4166,6 @@
|
|
|
4125
4166
|
.ui-kit .ease-out {
|
|
4126
4167
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
4127
4168
|
}
|
|
4128
|
-
.ui-kit .backdrop-glass-clear {
|
|
4129
|
-
backdrop-filter: var(--glass-clear);
|
|
4130
|
-
}
|
|
4131
|
-
.ui-kit .backdrop-glass-thin {
|
|
4132
|
-
backdrop-filter: var(--glass-thin);
|
|
4133
|
-
}
|
|
4134
|
-
.ui-kit .backdrop-glass-regular {
|
|
4135
|
-
backdrop-filter: var(--glass-regular);
|
|
4136
|
-
}
|
|
4137
|
-
.ui-kit .backdrop-glass-thick {
|
|
4138
|
-
backdrop-filter: var(--glass-thick);
|
|
4139
|
-
}
|
|
4140
4169
|
.ui-kit .\[fill\:url\(\#cloud-left\)\] {
|
|
4141
4170
|
fill: url(#cloud-left);
|
|
4142
4171
|
}
|
|
@@ -4170,6 +4199,9 @@
|
|
|
4170
4199
|
.ui-kit .\[mask-image\:linear-gradient\(to_left\2c rgba\(255\2c 255\2c 255\2c 0\)\2c \#fff_30\%\)\] {
|
|
4171
4200
|
mask-image: linear-gradient(to left,rgba(255,255,255,0),#fff 30%);
|
|
4172
4201
|
}
|
|
4202
|
+
.ui-kit .\[scrollbar-width\:none\] {
|
|
4203
|
+
scrollbar-width: none;
|
|
4204
|
+
}
|
|
4173
4205
|
.ui-kit .placeholder\:text-inverse-muted::placeholder {
|
|
4174
4206
|
color: hsl(var(--inverse-muted));
|
|
4175
4207
|
}
|
|
@@ -4336,6 +4368,9 @@
|
|
|
4336
4368
|
.ui-kit .hover\:bg-secondary-bg-hover:hover {
|
|
4337
4369
|
background-color: hsl(var(--secondary-bg-hover));
|
|
4338
4370
|
}
|
|
4371
|
+
.ui-kit .hover\:bg-secondary-border:hover {
|
|
4372
|
+
background-color: hsl(var(--secondary-border));
|
|
4373
|
+
}
|
|
4339
4374
|
.ui-kit .hover\:bg-status-error-bg:hover {
|
|
4340
4375
|
background-color: hsl(var(--status-error-bg));
|
|
4341
4376
|
}
|
|
@@ -5095,6 +5130,9 @@
|
|
|
5095
5130
|
.ui-kit .data-\[state\=on\]\:bg-primary-bg-hover[data-state="on"] {
|
|
5096
5131
|
background-color: hsl(var(--primary-bg-hover));
|
|
5097
5132
|
}
|
|
5133
|
+
.ui-kit .data-\[state\=on\]\:bg-primary-border[data-state="on"] {
|
|
5134
|
+
background-color: hsl(var(--primary-border));
|
|
5135
|
+
}
|
|
5098
5136
|
.ui-kit .data-\[state\=on\]\:bg-secondary-bg-hover[data-state="on"] {
|
|
5099
5137
|
background-color: hsl(var(--secondary-bg-hover));
|
|
5100
5138
|
}
|
|
@@ -5107,6 +5145,9 @@
|
|
|
5107
5145
|
.ui-kit .data-\[state\=open\]\:bg-primary-bg-hover[data-state="open"] {
|
|
5108
5146
|
background-color: hsl(var(--primary-bg-hover));
|
|
5109
5147
|
}
|
|
5148
|
+
.ui-kit .data-\[state\=open\]\:bg-primary-border[data-state="open"] {
|
|
5149
|
+
background-color: hsl(var(--primary-border));
|
|
5150
|
+
}
|
|
5110
5151
|
.ui-kit .data-\[state\=open\]\:bg-secondary[data-state="open"] {
|
|
5111
5152
|
background-color: hsl(var(--secondary));
|
|
5112
5153
|
}
|
|
@@ -5682,6 +5723,9 @@
|
|
|
5682
5723
|
.ui-kit .md\:min-w-\[450px\] {
|
|
5683
5724
|
min-width: 450px;
|
|
5684
5725
|
}
|
|
5726
|
+
.ui-kit .md\:max-w-\[700px\] {
|
|
5727
|
+
max-width: 700px;
|
|
5728
|
+
}
|
|
5685
5729
|
.ui-kit .md\:grid-cols-3 {
|
|
5686
5730
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
5687
5731
|
}
|
|
@@ -5774,6 +5818,9 @@
|
|
|
5774
5818
|
.ui-kit .lg\:max-w-\[672px\] {
|
|
5775
5819
|
max-width: 672px;
|
|
5776
5820
|
}
|
|
5821
|
+
.ui-kit .lg\:max-w-\[800px\] {
|
|
5822
|
+
max-width: 800px;
|
|
5823
|
+
}
|
|
5777
5824
|
.ui-kit .lg\:max-w-\[min\(512px\2c calc\(100vw-64px\)\)\] {
|
|
5778
5825
|
max-width: min(512px,calc(100vw - 64px));
|
|
5779
5826
|
}
|
package/dist/styles.css
CHANGED
|
@@ -178,6 +178,9 @@
|
|
|
178
178
|
--glass-regular: blur(16px) brightness(100%) saturate(180%) contrast(100%);
|
|
179
179
|
--glass-thick: blur(24px) brightness(96%) saturate(200%) contrast(102%);
|
|
180
180
|
--glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
|
|
181
|
+
|
|
182
|
+
--shadow-glass-sm: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 0 40px 30px -40px rgba(0, 0, 0, 0.16) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-secondary-border, #E4E4E7), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
|
|
183
|
+
--shadow-glass-md: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-primary-border, #D4D4D8), 0 4px 24px 0 rgba(0, 0, 0, 0.12);
|
|
181
184
|
}
|
|
182
185
|
.dark {
|
|
183
186
|
/**
|
|
@@ -338,6 +341,21 @@
|
|
|
338
341
|
--glass-regular: blur(16px) brightness(62%) saturate(160%) contrast(110%);
|
|
339
342
|
--glass-thick: blur(24px) brightness(52%) saturate(180%) contrast(115%);
|
|
340
343
|
--glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
|
|
344
|
+
|
|
345
|
+
--shadow-glass-sm: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -40px 80px -40px rgba(255, 255, 255, 0.30) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
|
|
346
|
+
--shadow-glass-md: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 48px 0 rgba(0, 0, 0, 0.48);
|
|
347
|
+
}
|
|
348
|
+
.backdrop-glass-clear {
|
|
349
|
+
backdrop-filter: var(--glass-clear);
|
|
350
|
+
}
|
|
351
|
+
.backdrop-glass-thin {
|
|
352
|
+
backdrop-filter: var(--glass-thin);
|
|
353
|
+
}
|
|
354
|
+
.backdrop-glass-regular {
|
|
355
|
+
backdrop-filter: var(--glass-regular);
|
|
356
|
+
}
|
|
357
|
+
.backdrop-glass-thick {
|
|
358
|
+
backdrop-filter: var(--glass-thick);
|
|
341
359
|
}
|
|
342
360
|
*, ::before, ::after {
|
|
343
361
|
--tw-border-spacing-x: 0;
|
|
@@ -1720,6 +1738,9 @@ body {
|
|
|
1720
1738
|
.aspect-square {
|
|
1721
1739
|
aspect-ratio: 1 / 1;
|
|
1722
1740
|
}
|
|
1741
|
+
.aspect-video {
|
|
1742
|
+
aspect-ratio: 16 / 9;
|
|
1743
|
+
}
|
|
1723
1744
|
.size-11 {
|
|
1724
1745
|
width: 2.75rem;
|
|
1725
1746
|
height: 2.75rem;
|
|
@@ -1955,6 +1976,9 @@ body {
|
|
|
1955
1976
|
.max-h-\[30vh\] {
|
|
1956
1977
|
max-height: 30vh;
|
|
1957
1978
|
}
|
|
1979
|
+
.max-h-\[400px\] {
|
|
1980
|
+
max-height: 400px;
|
|
1981
|
+
}
|
|
1958
1982
|
.max-h-\[calc\(100vh-44px\)\] {
|
|
1959
1983
|
max-height: calc(100vh - 44px);
|
|
1960
1984
|
}
|
|
@@ -2270,6 +2294,9 @@ body {
|
|
|
2270
2294
|
.max-w-36 {
|
|
2271
2295
|
max-width: 9rem;
|
|
2272
2296
|
}
|
|
2297
|
+
.max-w-3xl {
|
|
2298
|
+
max-width: 48rem;
|
|
2299
|
+
}
|
|
2273
2300
|
.max-w-4xl {
|
|
2274
2301
|
max-width: 56rem;
|
|
2275
2302
|
}
|
|
@@ -2956,6 +2983,9 @@ body {
|
|
|
2956
2983
|
.bg-alpha-30 {
|
|
2957
2984
|
background-color: hsl(var(--alpha-70));
|
|
2958
2985
|
}
|
|
2986
|
+
.bg-alpha-50 {
|
|
2987
|
+
background-color: hsl(var(--alpha-50));
|
|
2988
|
+
}
|
|
2959
2989
|
.bg-alpha-60 {
|
|
2960
2990
|
background-color: hsl(var(--alpha-50));
|
|
2961
2991
|
}
|
|
@@ -3013,6 +3043,9 @@ body {
|
|
|
3013
3043
|
.bg-inverse-secondary-bg {
|
|
3014
3044
|
background-color: hsl(var(--inverse-secondary-bg));
|
|
3015
3045
|
}
|
|
3046
|
+
.bg-muted\/50 {
|
|
3047
|
+
background-color: hsl(var(--muted) / 0.5);
|
|
3048
|
+
}
|
|
3016
3049
|
.bg-orange-100 {
|
|
3017
3050
|
--tw-bg-opacity: 1;
|
|
3018
3051
|
background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
|
|
@@ -3477,6 +3510,9 @@ body {
|
|
|
3477
3510
|
.pr-3 {
|
|
3478
3511
|
padding-right: 0.75rem;
|
|
3479
3512
|
}
|
|
3513
|
+
.pr-4 {
|
|
3514
|
+
padding-right: 1rem;
|
|
3515
|
+
}
|
|
3480
3516
|
.pr-9 {
|
|
3481
3517
|
padding-right: 2.25rem;
|
|
3482
3518
|
}
|
|
@@ -3860,6 +3896,11 @@ body {
|
|
|
3860
3896
|
--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
|
|
3861
3897
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
3862
3898
|
}
|
|
3899
|
+
.shadow-glass-sm {
|
|
3900
|
+
--tw-shadow: var(--shadow-glass-sm);
|
|
3901
|
+
--tw-shadow-colored: var(--shadow-glass-sm);
|
|
3902
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
3903
|
+
}
|
|
3863
3904
|
.shadow-hard-md {
|
|
3864
3905
|
--tw-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.50), 0 0 0.5px 0 rgba(255, 255, 255, 0.30) inset, 0 5px 12px 0 rgba(15, 23, 42, 0.35), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
|
|
3865
3906
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), inset 0 0 0.5px 0 var(--tw-shadow-color), 0 5px 12px 0 var(--tw-shadow-color), inset 0 0.5px 0 0 var(--tw-shadow-color);
|
|
@@ -4110,18 +4151,6 @@ body {
|
|
|
4110
4151
|
.ease-out {
|
|
4111
4152
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
4112
4153
|
}
|
|
4113
|
-
.backdrop-glass-clear {
|
|
4114
|
-
backdrop-filter: var(--glass-clear);
|
|
4115
|
-
}
|
|
4116
|
-
.backdrop-glass-thin {
|
|
4117
|
-
backdrop-filter: var(--glass-thin);
|
|
4118
|
-
}
|
|
4119
|
-
.backdrop-glass-regular {
|
|
4120
|
-
backdrop-filter: var(--glass-regular);
|
|
4121
|
-
}
|
|
4122
|
-
.backdrop-glass-thick {
|
|
4123
|
-
backdrop-filter: var(--glass-thick);
|
|
4124
|
-
}
|
|
4125
4154
|
.underline {
|
|
4126
4155
|
text-decoration: underline;
|
|
4127
4156
|
text-underline-offset: 24%;
|
|
@@ -4159,6 +4188,9 @@ body {
|
|
|
4159
4188
|
.\[mask-image\:linear-gradient\(to_left\2c rgba\(255\2c 255\2c 255\2c 0\)\2c \#fff_30\%\)\] {
|
|
4160
4189
|
mask-image: linear-gradient(to left,rgba(255,255,255,0),#fff 30%);
|
|
4161
4190
|
}
|
|
4191
|
+
.\[scrollbar-width\:none\] {
|
|
4192
|
+
scrollbar-width: none;
|
|
4193
|
+
}
|
|
4162
4194
|
.placeholder\:text-inverse-muted::placeholder {
|
|
4163
4195
|
color: hsl(var(--inverse-muted));
|
|
4164
4196
|
}
|
|
@@ -4325,6 +4357,9 @@ body {
|
|
|
4325
4357
|
.hover\:bg-secondary-bg-hover:hover {
|
|
4326
4358
|
background-color: hsl(var(--secondary-bg-hover));
|
|
4327
4359
|
}
|
|
4360
|
+
.hover\:bg-secondary-border:hover {
|
|
4361
|
+
background-color: hsl(var(--secondary-border));
|
|
4362
|
+
}
|
|
4328
4363
|
.hover\:bg-status-error-bg:hover {
|
|
4329
4364
|
background-color: hsl(var(--status-error-bg));
|
|
4330
4365
|
}
|
|
@@ -5084,6 +5119,9 @@ body {
|
|
|
5084
5119
|
.data-\[state\=on\]\:bg-primary-bg-hover[data-state="on"] {
|
|
5085
5120
|
background-color: hsl(var(--primary-bg-hover));
|
|
5086
5121
|
}
|
|
5122
|
+
.data-\[state\=on\]\:bg-primary-border[data-state="on"] {
|
|
5123
|
+
background-color: hsl(var(--primary-border));
|
|
5124
|
+
}
|
|
5087
5125
|
.data-\[state\=on\]\:bg-secondary-bg-hover[data-state="on"] {
|
|
5088
5126
|
background-color: hsl(var(--secondary-bg-hover));
|
|
5089
5127
|
}
|
|
@@ -5096,6 +5134,9 @@ body {
|
|
|
5096
5134
|
.data-\[state\=open\]\:bg-primary-bg-hover[data-state="open"] {
|
|
5097
5135
|
background-color: hsl(var(--primary-bg-hover));
|
|
5098
5136
|
}
|
|
5137
|
+
.data-\[state\=open\]\:bg-primary-border[data-state="open"] {
|
|
5138
|
+
background-color: hsl(var(--primary-border));
|
|
5139
|
+
}
|
|
5099
5140
|
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
|
|
5100
5141
|
background-color: hsl(var(--secondary));
|
|
5101
5142
|
}
|
|
@@ -5671,6 +5712,9 @@ body {
|
|
|
5671
5712
|
.md\:min-w-\[450px\] {
|
|
5672
5713
|
min-width: 450px;
|
|
5673
5714
|
}
|
|
5715
|
+
.md\:max-w-\[700px\] {
|
|
5716
|
+
max-width: 700px;
|
|
5717
|
+
}
|
|
5674
5718
|
.md\:grid-cols-3 {
|
|
5675
5719
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
5676
5720
|
}
|
|
@@ -5763,6 +5807,9 @@ body {
|
|
|
5763
5807
|
.lg\:max-w-\[672px\] {
|
|
5764
5808
|
max-width: 672px;
|
|
5765
5809
|
}
|
|
5810
|
+
.lg\:max-w-\[800px\] {
|
|
5811
|
+
max-width: 800px;
|
|
5812
|
+
}
|
|
5766
5813
|
.lg\:max-w-\[min\(512px\2c calc\(100vw-64px\)\)\] {
|
|
5767
5814
|
max-width: min(512px,calc(100vw - 64px));
|
|
5768
5815
|
}
|
package/dist/theme.css
CHANGED
|
@@ -177,6 +177,9 @@
|
|
|
177
177
|
--glass-regular: blur(16px) brightness(100%) saturate(180%) contrast(100%);
|
|
178
178
|
--glass-thick: blur(24px) brightness(96%) saturate(200%) contrast(102%);
|
|
179
179
|
--glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
|
|
180
|
+
|
|
181
|
+
--shadow-glass-sm: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 0 40px 30px -40px rgba(0, 0, 0, 0.16) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-secondary-border, #E4E4E7), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
|
|
182
|
+
--shadow-glass-md: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-primary-border, #D4D4D8), 0 4px 24px 0 rgba(0, 0, 0, 0.12);
|
|
180
183
|
}
|
|
181
184
|
|
|
182
185
|
.dark {
|
|
@@ -338,19 +341,20 @@
|
|
|
338
341
|
--glass-regular: blur(16px) brightness(62%) saturate(160%) contrast(110%);
|
|
339
342
|
--glass-thick: blur(24px) brightness(52%) saturate(180%) contrast(115%);
|
|
340
343
|
--glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
|
|
344
|
+
|
|
345
|
+
--shadow-glass-sm: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -40px 80px -40px rgba(255, 255, 255, 0.30) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
|
|
346
|
+
--shadow-glass-md: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 48px 0 rgba(0, 0, 0, 0.48);
|
|
341
347
|
}
|
|
342
348
|
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
backdrop-filter: var(--glass-thick);
|
|
355
|
-
}
|
|
349
|
+
.backdrop-glass-clear {
|
|
350
|
+
backdrop-filter: var(--glass-clear);
|
|
351
|
+
}
|
|
352
|
+
.backdrop-glass-thin {
|
|
353
|
+
backdrop-filter: var(--glass-thin);
|
|
354
|
+
}
|
|
355
|
+
.backdrop-glass-regular {
|
|
356
|
+
backdrop-filter: var(--glass-regular);
|
|
357
|
+
}
|
|
358
|
+
.backdrop-glass-thick {
|
|
359
|
+
backdrop-filter: var(--glass-thick);
|
|
356
360
|
}
|
package/package.json
CHANGED
package/tailwind.preset.js
CHANGED
|
@@ -252,7 +252,10 @@ export default {
|
|
|
252
252
|
"hard-xl":
|
|
253
253
|
"0 3px 5px 0 rgba(2, 6, 23, 0.35), 0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px 0 rgba(2, 6, 23, 0.45), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset",
|
|
254
254
|
"hard-2xl":
|
|
255
|
-
"0 4px 6px 0 rgba(2, 6, 23, 0.35), 0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 28px 0 rgba(2, 6, 23, 0.45), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset"
|
|
255
|
+
"0 4px 6px 0 rgba(2, 6, 23, 0.35), 0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 28px 0 rgba(2, 6, 23, 0.45), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset",
|
|
256
|
+
|
|
257
|
+
"glass-sm": "var(--shadow-glass-sm)",
|
|
258
|
+
"glass-md": "var(--shadow-glass-md)"
|
|
256
259
|
},
|
|
257
260
|
lineHeight: {
|
|
258
261
|
none: "100%",
|