@compose-market/theme 0.0.91 → 0.0.92
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/agents/styles.d.ts +1 -1
- package/dist/agents/styles.d.ts.map +1 -1
- package/dist/agents/styles.js +168 -5
- package/dist/agents/styles.js.map +1 -1
- package/dist/css/agents.css +168 -5
- package/dist/css/mirror.css +335 -138
- package/dist/css/shell.css +1072 -2
- package/dist/css/utilities.css +62 -21
- package/dist/mirror/index.d.ts +39 -6
- package/dist/mirror/index.d.ts.map +1 -1
- package/dist/mirror/index.js +18 -6
- package/dist/mirror/index.js.map +1 -1
- package/dist/mirror/styles.d.ts +2 -2
- package/dist/mirror/styles.d.ts.map +1 -1
- package/dist/mirror/styles.js +336 -139
- package/dist/mirror/styles.js.map +1 -1
- package/dist/shell/index.d.ts +21 -0
- package/dist/shell/index.d.ts.map +1 -1
- package/dist/shell/index.js +20 -0
- package/dist/shell/index.js.map +1 -1
- package/dist/shell/styles.d.ts +1 -1
- package/dist/shell/styles.d.ts.map +1 -1
- package/dist/shell/styles.js +1072 -2
- package/dist/shell/styles.js.map +1 -1
- package/dist/utilities/styles.d.ts +1 -1
- package/dist/utilities/styles.d.ts.map +1 -1
- package/dist/utilities/styles.js +62 -21
- package/dist/utilities/styles.js.map +1 -1
- package/package.json +2 -1
package/dist/shell/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/shell/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/shell/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAq2DvB,CAAC"}
|
|
@@ -4,5 +4,5 @@
|
|
|
4
4
|
* Cross-app CSS utilities: marquee, safe-area, touch, scrollbar, truncation.
|
|
5
5
|
* Extracted from web/src/index.css and mesh/src/styles.css.
|
|
6
6
|
*/
|
|
7
|
-
export declare const utilitiesStyles = "\n/* \u2500\u2500 Marquee \u2500\u2500 */\n@keyframes cm-marquee-scroll {\n 0% { transform: translate3d(0, 0, 0); }\n 100% { transform: translate3d(-50%, 0, 0); }\n}\n\n@keyframes cm-marquee-scroll-reverse {\n 0% { transform: translate3d(-50%, 0, 0); }\n 100% { transform: translate3d(0, 0, 0); }\n}\n\n@keyframes cm-partner-scanline {\n 0% { transform: translate3d(0, -100px, 0); }\n 100% { transform: translate3d(0, calc(100vh + 100px), 0); }\n}\n\n.cm-marquee-track {\n animation: cm-marquee-scroll linear infinite;\n will-change: transform;\n}\n\n.cm-marquee-track-reverse {\n animation: cm-marquee-scroll-reverse linear infinite;\n will-change: transform;\n}\n\n/* \u2500\u2500 Partner Blocks \u2500\u2500 */\n.cm-partners {\n container-type: inline-size;\n display: grid;\n gap: clamp(0.85rem, 3cqi, 1.4rem);\n width: 100%;\n min-width: 0;\n}\n\n.cm-partners__backing {\n display: grid;\n grid-template-columns: minmax(13rem, 0.75fr) minmax(0, 1.25fr);\n align-items: center;\n gap: clamp(0.8rem, 3cqi, 1.4rem);\n min-width: 0;\n}\n\n.cm-partners__copy {\n display: grid;\n gap: 0.32rem;\n min-width: 0;\n}\n\n.cm-partners__label {\n color: hsl(var(--muted-foreground) / 0.86);\n font-family: var(--font-mono), monospace;\n font-size: clamp(0.62rem, 2cqi, 0.78rem);\n font-weight: 800;\n letter-spacing: 0.14em;\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n.cm-partners__title {\n color: transparent;\n background: linear-gradient(90deg, #8aebff, #dce1fb 48%, #fbabff);\n -webkit-background-clip: text;\n background-clip: text;\n font-family: var(--font-display), Orbitron, sans-serif;\n font-size: clamp(0.98rem, 4cqi, 1.45rem);\n font-weight: 850;\n letter-spacing: 0.02em;\n line-height: 0.98;\n overflow-wrap: anywhere;\n text-transform: uppercase;\n}\n\n.cm-partners__badges {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));\n gap: clamp(0.7rem, 2.4cqi, 1rem);\n min-width: 0;\n}\n\n.cm-partner-badge {\n position: relative;\n display: grid;\n min-width: 0;\n min-height: clamp(4.
|
|
7
|
+
export declare const utilitiesStyles = "\n/* \u2500\u2500 Marquee \u2500\u2500 */\n@keyframes cm-marquee-scroll {\n 0% { transform: translate3d(0, 0, 0); }\n 100% { transform: translate3d(-50%, 0, 0); }\n}\n\n@keyframes cm-marquee-scroll-reverse {\n 0% { transform: translate3d(-50%, 0, 0); }\n 100% { transform: translate3d(0, 0, 0); }\n}\n\n@keyframes cm-partner-scanline {\n 0% { transform: translate3d(0, -100px, 0); }\n 100% { transform: translate3d(0, calc(100vh + 100px), 0); }\n}\n\n.cm-marquee-track,\n.marquee-track {\n animation: cm-marquee-scroll linear infinite;\n will-change: transform;\n}\n\n.cm-marquee-track-reverse,\n.marquee-track-reverse {\n animation: cm-marquee-scroll-reverse linear infinite;\n will-change: transform;\n}\n\n/* \u2500\u2500 Partner Blocks \u2500\u2500 */\n.cm-partners {\n container-type: inline-size;\n display: grid;\n gap: clamp(0.85rem, 3cqi, 1.4rem);\n width: 100%;\n min-width: 0;\n}\n\n.cm-partners__backing {\n display: grid;\n grid-template-columns: minmax(13rem, 0.75fr) minmax(0, 1.25fr);\n align-items: center;\n gap: clamp(0.8rem, 3cqi, 1.4rem);\n min-width: 0;\n}\n\n.cm-partners__copy {\n display: grid;\n gap: 0.32rem;\n min-width: 0;\n}\n\n.cm-partners__label {\n color: hsl(var(--muted-foreground) / 0.86);\n font-family: var(--font-mono), monospace;\n font-size: clamp(0.62rem, 2cqi, 0.78rem);\n font-weight: 800;\n letter-spacing: 0.14em;\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n.cm-partners__title {\n color: transparent;\n background: linear-gradient(90deg, #8aebff, #dce1fb 48%, #fbabff);\n -webkit-background-clip: text;\n background-clip: text;\n font-family: var(--font-display), Orbitron, sans-serif;\n font-size: clamp(0.98rem, 4cqi, 1.45rem);\n font-weight: 850;\n letter-spacing: 0.02em;\n line-height: 0.98;\n overflow-wrap: anywhere;\n text-transform: uppercase;\n}\n\n.cm-partners__badges {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));\n gap: clamp(0.7rem, 2.4cqi, 1rem);\n min-width: 0;\n}\n\n.cm-partner-badge {\n position: relative;\n display: grid;\n min-width: 0;\n min-height: clamp(4.35rem, 12cqi, 5.8rem);\n aspect-ratio: 2.7;\n place-items: center;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: 12px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.5), hsl(221 50% 9% / 0.52)),\n radial-gradient(ellipse at 50% 0%, hsl(var(--primary) / 0.2), transparent 62%),\n radial-gradient(ellipse at 100% 100%, hsl(var(--accent) / 0.16), transparent 58%);\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.1),\n inset 0 -1px 0 hsl(var(--primary) / 0.1),\n 0 0 28px hsl(var(--primary) / 0.08),\n 0 0 48px hsl(var(--accent) / 0.04);\n padding: clamp(0.38rem, 1.2cqi, 0.68rem);\n backdrop-filter: blur(16px) saturate(1.18);\n transition:\n transform 180ms ease,\n border-color 220ms ease,\n box-shadow 220ms ease;\n}\n\n.cm-partner-badge::before {\n content: \"\";\n position: absolute;\n inset: -1px;\n pointer-events: none;\n background:\n linear-gradient(135deg, hsl(var(--primary) / 0.2), transparent 48%),\n linear-gradient(315deg, hsl(var(--accent) / 0.18), transparent 52%);\n opacity: 0.72;\n}\n\n.cm-partner-badge::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n top: -100px;\n height: 100px;\n pointer-events: none;\n background: linear-gradient(180deg, transparent, hsl(0 0% 100% / 0.055), transparent);\n opacity: 0.75;\n animation: cm-partner-scanline 4s linear infinite;\n will-change: transform;\n}\n\n.cm-partner-badge[data-tone=\"green\"] {\n border-color: hsl(142 71% 45% / 0.34);\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 36px hsl(142 71% 45% / 0.08);\n}\n\n.cm-partner-badge[data-tone=\"blue\"] {\n border-color: hsl(217 91% 60% / 0.34);\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 36px hsl(217 91% 60% / 0.08);\n}\n\n.cm-partner-badge[data-tone=\"purple\"],\n.cm-partner-badge[data-tone=\"violet\"] {\n border-color: hsl(var(--accent) / 0.34);\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 36px hsl(var(--accent) / 0.08);\n}\n\n.cm-partner-badge:hover,\n.cm-partner-badge:focus-visible {\n transform: translateY(-1px);\n border-color: hsl(var(--primary) / 0.5);\n outline: none;\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.08),\n 0 0 28px hsl(var(--primary) / 0.14);\n}\n\n.cm-partner-badge img {\n position: relative;\n z-index: 1;\n width: min(92%, 20rem);\n max-width: 100%;\n height: auto;\n max-height: 76%;\n object-fit: contain;\n}\n\n.cm-partner-marquee {\n position: relative;\n display: grid;\n gap: clamp(0.58rem, 1.8cqi, 0.85rem);\n width: 100%;\n min-width: 0;\n overflow: hidden;\n}\n\n.cm-partner-marquee__row,\n.partners-marquee__row {\n display: flex;\n width: max-content;\n min-width: 100%;\n}\n\n.cm-partner-marquee__inner,\n.partners-marquee__inner {\n display: flex;\n gap: clamp(0.58rem, 1.8cqi, 0.85rem);\n}\n\n.cm-partner-marquee::before,\n.cm-partner-marquee::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n z-index: 2;\n width: clamp(2rem, 8cqi, 5rem);\n pointer-events: none;\n}\n\n.cm-partner-marquee::before {\n left: 0;\n background: linear-gradient(90deg, hsl(var(--background) / 0.9), transparent);\n}\n\n.cm-partner-marquee::after {\n right: 0;\n background: linear-gradient(270deg, hsl(var(--background) / 0.9), transparent);\n}\n\n.cm-partner-marquee:hover .cm-marquee-track,\n.cm-partner-marquee:hover .cm-marquee-track-reverse,\n.cm-partner-marquee:focus-within .cm-marquee-track,\n.cm-partner-marquee:focus-within .cm-marquee-track-reverse {\n animation-play-state: paused;\n}\n\n.cm-partner-logo {\n display: grid;\n height: clamp(2.45rem, 7cqi, 3rem);\n min-width: clamp(6.4rem, 18cqi, 8.7rem);\n place-items: center;\n flex: 0 0 auto;\n border: 1px solid hsl(var(--primary) / 0.12);\n border-radius: 10px;\n background:\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.06), transparent 42%),\n radial-gradient(circle at 100% 100%, hsl(var(--accent) / 0.055), transparent 48%),\n hsl(240 38% 3% / 0.78);\n padding-inline: clamp(0.8rem, 2.6cqi, 1.15rem);\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.035),\n inset 0 0 18px hsl(var(--primary) / 0.025);\n transition:\n transform 180ms ease,\n border-color 220ms ease,\n background-color 220ms ease,\n box-shadow 220ms ease;\n}\n\n.cm-partner-logo:hover {\n transform: translateY(-1px);\n border-color: hsl(var(--primary) / 0.46);\n background:\n radial-gradient(circle at 16% 0%, hsl(var(--primary) / 0.13), transparent 44%),\n radial-gradient(circle at 100% 100%, hsl(var(--accent) / 0.12), transparent 52%),\n hsl(221 50% 7% / 0.86);\n box-shadow:\n 0 0 16px hsl(var(--primary) / 0.1),\n 0 0 24px hsl(var(--accent) / 0.07),\n inset 0 0 20px hsl(var(--primary) / 0.04);\n}\n\n.cm-partner-logo img {\n width: auto;\n max-width: 6.25rem;\n height: clamp(0.85rem, 3cqi, 1.25rem);\n object-fit: contain;\n filter: grayscale(1) saturate(0.72) brightness(0.78) contrast(0.96);\n opacity: 0.72;\n transition: filter 220ms ease, opacity 220ms ease;\n}\n\n.cm-partner-logo:hover img {\n filter: grayscale(0) saturate(1.08) brightness(1.08) contrast(1.02) drop-shadow(0 0 9px hsl(var(--primary) / 0.16));\n opacity: 1;\n}\n\n@container (max-width: 42rem) {\n .cm-partners__backing {\n grid-template-columns: 1fr;\n }\n}\n\n@container (max-width: 24rem) {\n .cm-partners__badges {\n grid-template-columns: 1fr;\n }\n}\n\n/* \u2500\u2500 Safe Area \u2500\u2500 */\n.cm-safe-area-top { padding-top: env(safe-area-inset-top); }\n.cm-safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }\n.cm-safe-area-left { padding-left: env(safe-area-inset-left); }\n.cm-safe-area-right { padding-right: env(safe-area-inset-right); }\n\n.cm-safe-area-x {\n padding-left: env(safe-area-inset-left);\n padding-right: env(safe-area-inset-right);\n}\n\n.cm-safe-area-y {\n padding-top: env(safe-area-inset-top);\n padding-bottom: env(safe-area-inset-bottom);\n}\n\n/* \u2500\u2500 Touch \u2500\u2500 */\n.cm-touch-manipulation {\n touch-action: manipulation;\n}\n\n.cm-no-select {\n -webkit-user-select: none;\n user-select: none;\n}\n\n/* \u2500\u2500 Scrollbar Hide \u2500\u2500 */\n.cm-scrollbar-hide {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.cm-scrollbar-hide::-webkit-scrollbar {\n display: none;\n}\n\n/* \u2500\u2500 Text Truncation \u2500\u2500 */\n.cm-text-truncate {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n}\n\n/* \u2500\u2500 Touch Targets (mobile \u2264 768px) \u2500\u2500 */\n@media (max-width: 768px) {\n .cm-touch-target {\n min-height: 44px;\n min-width: 44px;\n }\n}\n\n/* \u2500\u2500 Mobile Scrollbar (thinner for \u2264 768px) \u2500\u2500 */\n@media (max-width: 768px) {\n .cm-thin-scrollbar::-webkit-scrollbar {\n width: 4px;\n height: 4px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .cm-marquee-track,\n .marquee-track,\n .cm-marquee-track-reverse,\n .marquee-track-reverse,\n .cm-partner-badge::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n }\n\n .cm-partner-logo,\n .cm-partner-badge,\n .cm-partner-logo img {\n transition-duration: 0.01ms !important;\n }\n}\n";
|
|
8
8
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utilities/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utilities/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,eAAe,wvSA4W3B,CAAC"}
|
package/dist/utilities/styles.js
CHANGED
|
@@ -21,12 +21,14 @@ export const utilitiesStyles = /* css */ `
|
|
|
21
21
|
100% { transform: translate3d(0, calc(100vh + 100px), 0); }
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
.cm-marquee-track
|
|
24
|
+
.cm-marquee-track,
|
|
25
|
+
.marquee-track {
|
|
25
26
|
animation: cm-marquee-scroll linear infinite;
|
|
26
27
|
will-change: transform;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
|
-
.cm-marquee-track-reverse
|
|
30
|
+
.cm-marquee-track-reverse,
|
|
31
|
+
.marquee-track-reverse {
|
|
30
32
|
animation: cm-marquee-scroll-reverse linear infinite;
|
|
31
33
|
will-change: transform;
|
|
32
34
|
}
|
|
@@ -89,19 +91,23 @@ export const utilitiesStyles = /* css */ `
|
|
|
89
91
|
position: relative;
|
|
90
92
|
display: grid;
|
|
91
93
|
min-width: 0;
|
|
92
|
-
min-height: clamp(4.
|
|
94
|
+
min-height: clamp(4.35rem, 12cqi, 5.8rem);
|
|
95
|
+
aspect-ratio: 2.7;
|
|
93
96
|
place-items: center;
|
|
94
97
|
overflow: hidden;
|
|
95
98
|
border: 1px solid hsl(var(--primary) / 0.18);
|
|
96
99
|
border-radius: 12px;
|
|
97
100
|
background:
|
|
98
|
-
linear-gradient(145deg, hsl(226 21% 23% / 0.
|
|
99
|
-
radial-gradient(
|
|
101
|
+
linear-gradient(145deg, hsl(226 21% 23% / 0.5), hsl(221 50% 9% / 0.52)),
|
|
102
|
+
radial-gradient(ellipse at 50% 0%, hsl(var(--primary) / 0.2), transparent 62%),
|
|
103
|
+
radial-gradient(ellipse at 100% 100%, hsl(var(--accent) / 0.16), transparent 58%);
|
|
100
104
|
box-shadow:
|
|
101
|
-
inset 0 1px 0 hsl(0 0% 100% / 0.
|
|
102
|
-
0 0
|
|
103
|
-
|
|
104
|
-
|
|
105
|
+
inset 0 1px 0 hsl(0 0% 100% / 0.1),
|
|
106
|
+
inset 0 -1px 0 hsl(var(--primary) / 0.1),
|
|
107
|
+
0 0 28px hsl(var(--primary) / 0.08),
|
|
108
|
+
0 0 48px hsl(var(--accent) / 0.04);
|
|
109
|
+
padding: clamp(0.38rem, 1.2cqi, 0.68rem);
|
|
110
|
+
backdrop-filter: blur(16px) saturate(1.18);
|
|
105
111
|
transition:
|
|
106
112
|
transform 180ms ease,
|
|
107
113
|
border-color 220ms ease,
|
|
@@ -114,9 +120,9 @@ export const utilitiesStyles = /* css */ `
|
|
|
114
120
|
inset: -1px;
|
|
115
121
|
pointer-events: none;
|
|
116
122
|
background:
|
|
117
|
-
linear-gradient(135deg, hsl(var(--primary) / 0.
|
|
118
|
-
linear-gradient(315deg, hsl(var(--accent) / 0.
|
|
119
|
-
opacity: 0.
|
|
123
|
+
linear-gradient(135deg, hsl(var(--primary) / 0.2), transparent 48%),
|
|
124
|
+
linear-gradient(315deg, hsl(var(--accent) / 0.18), transparent 52%);
|
|
125
|
+
opacity: 0.72;
|
|
120
126
|
}
|
|
121
127
|
|
|
122
128
|
.cm-partner-badge::after {
|
|
@@ -167,9 +173,10 @@ export const utilitiesStyles = /* css */ `
|
|
|
167
173
|
.cm-partner-badge img {
|
|
168
174
|
position: relative;
|
|
169
175
|
z-index: 1;
|
|
170
|
-
width:
|
|
171
|
-
max-width:
|
|
172
|
-
height:
|
|
176
|
+
width: min(92%, 20rem);
|
|
177
|
+
max-width: 100%;
|
|
178
|
+
height: auto;
|
|
179
|
+
max-height: 76%;
|
|
173
180
|
object-fit: contain;
|
|
174
181
|
}
|
|
175
182
|
|
|
@@ -182,6 +189,19 @@ export const utilitiesStyles = /* css */ `
|
|
|
182
189
|
overflow: hidden;
|
|
183
190
|
}
|
|
184
191
|
|
|
192
|
+
.cm-partner-marquee__row,
|
|
193
|
+
.partners-marquee__row {
|
|
194
|
+
display: flex;
|
|
195
|
+
width: max-content;
|
|
196
|
+
min-width: 100%;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.cm-partner-marquee__inner,
|
|
200
|
+
.partners-marquee__inner {
|
|
201
|
+
display: flex;
|
|
202
|
+
gap: clamp(0.58rem, 1.8cqi, 0.85rem);
|
|
203
|
+
}
|
|
204
|
+
|
|
185
205
|
.cm-partner-marquee::before,
|
|
186
206
|
.cm-partner-marquee::after {
|
|
187
207
|
content: "";
|
|
@@ -202,6 +222,13 @@ export const utilitiesStyles = /* css */ `
|
|
|
202
222
|
background: linear-gradient(270deg, hsl(var(--background) / 0.9), transparent);
|
|
203
223
|
}
|
|
204
224
|
|
|
225
|
+
.cm-partner-marquee:hover .cm-marquee-track,
|
|
226
|
+
.cm-partner-marquee:hover .cm-marquee-track-reverse,
|
|
227
|
+
.cm-partner-marquee:focus-within .cm-marquee-track,
|
|
228
|
+
.cm-partner-marquee:focus-within .cm-marquee-track-reverse {
|
|
229
|
+
animation-play-state: paused;
|
|
230
|
+
}
|
|
231
|
+
|
|
205
232
|
.cm-partner-logo {
|
|
206
233
|
display: grid;
|
|
207
234
|
height: clamp(2.45rem, 7cqi, 3rem);
|
|
@@ -210,8 +237,14 @@ export const utilitiesStyles = /* css */ `
|
|
|
210
237
|
flex: 0 0 auto;
|
|
211
238
|
border: 1px solid hsl(var(--primary) / 0.12);
|
|
212
239
|
border-radius: 10px;
|
|
213
|
-
background:
|
|
240
|
+
background:
|
|
241
|
+
radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.06), transparent 42%),
|
|
242
|
+
radial-gradient(circle at 100% 100%, hsl(var(--accent) / 0.055), transparent 48%),
|
|
243
|
+
hsl(240 38% 3% / 0.78);
|
|
214
244
|
padding-inline: clamp(0.8rem, 2.6cqi, 1.15rem);
|
|
245
|
+
box-shadow:
|
|
246
|
+
inset 0 1px 0 hsl(0 0% 100% / 0.035),
|
|
247
|
+
inset 0 0 18px hsl(var(--primary) / 0.025);
|
|
215
248
|
transition:
|
|
216
249
|
transform 180ms ease,
|
|
217
250
|
border-color 220ms ease,
|
|
@@ -222,8 +255,14 @@ export const utilitiesStyles = /* css */ `
|
|
|
222
255
|
.cm-partner-logo:hover {
|
|
223
256
|
transform: translateY(-1px);
|
|
224
257
|
border-color: hsl(var(--primary) / 0.46);
|
|
225
|
-
background:
|
|
226
|
-
|
|
258
|
+
background:
|
|
259
|
+
radial-gradient(circle at 16% 0%, hsl(var(--primary) / 0.13), transparent 44%),
|
|
260
|
+
radial-gradient(circle at 100% 100%, hsl(var(--accent) / 0.12), transparent 52%),
|
|
261
|
+
hsl(221 50% 7% / 0.86);
|
|
262
|
+
box-shadow:
|
|
263
|
+
0 0 16px hsl(var(--primary) / 0.1),
|
|
264
|
+
0 0 24px hsl(var(--accent) / 0.07),
|
|
265
|
+
inset 0 0 20px hsl(var(--primary) / 0.04);
|
|
227
266
|
}
|
|
228
267
|
|
|
229
268
|
.cm-partner-logo img {
|
|
@@ -231,13 +270,13 @@ export const utilitiesStyles = /* css */ `
|
|
|
231
270
|
max-width: 6.25rem;
|
|
232
271
|
height: clamp(0.85rem, 3cqi, 1.25rem);
|
|
233
272
|
object-fit: contain;
|
|
234
|
-
filter: grayscale(1) brightness(0.
|
|
235
|
-
opacity: 0.
|
|
273
|
+
filter: grayscale(1) saturate(0.72) brightness(0.78) contrast(0.96);
|
|
274
|
+
opacity: 0.72;
|
|
236
275
|
transition: filter 220ms ease, opacity 220ms ease;
|
|
237
276
|
}
|
|
238
277
|
|
|
239
278
|
.cm-partner-logo:hover img {
|
|
240
|
-
filter: grayscale(0) brightness(1.1);
|
|
279
|
+
filter: grayscale(0) saturate(1.08) brightness(1.08) contrast(1.02) drop-shadow(0 0 9px hsl(var(--primary) / 0.16));
|
|
241
280
|
opacity: 1;
|
|
242
281
|
}
|
|
243
282
|
|
|
@@ -315,7 +354,9 @@ export const utilitiesStyles = /* css */ `
|
|
|
315
354
|
|
|
316
355
|
@media (prefers-reduced-motion: reduce) {
|
|
317
356
|
.cm-marquee-track,
|
|
357
|
+
.marquee-track,
|
|
318
358
|
.cm-marquee-track-reverse,
|
|
359
|
+
.marquee-track-reverse,
|
|
319
360
|
.cm-partner-badge::after {
|
|
320
361
|
animation-duration: 0.01ms !important;
|
|
321
362
|
animation-iteration-count: 1 !important;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/utilities/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/utilities/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4WxC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@compose-market/theme",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.92",
|
|
4
4
|
"description": "Official design tokens and theme system for Compose.Market",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-tokens",
|
|
@@ -159,6 +159,7 @@
|
|
|
159
159
|
"@types/react": "^19.2.16",
|
|
160
160
|
"@types/react-dom": "^19.2.3",
|
|
161
161
|
"react": "^19.2.7",
|
|
162
|
+
"react-dom": "^19.2.7",
|
|
162
163
|
"tsx": "^4.22.4",
|
|
163
164
|
"typescript": "^6.0.3"
|
|
164
165
|
},
|