@compose-market/theme 0.0.91 → 0.0.93
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/session.css +50 -0
- package/dist/css/shell.css +1139 -2
- package/dist/css/utilities.css +68 -25
- 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/session/styles.d.ts +1 -1
- package/dist/session/styles.d.ts.map +1 -1
- package/dist/session/styles.js +50 -0
- package/dist/session/styles.js.map +1 -1
- package/dist/shell/index.d.ts +33 -0
- package/dist/shell/index.d.ts.map +1 -1
- package/dist/shell/index.js +32 -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 +1139 -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 +68 -25
- 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAw6DvB,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.24rem, 0.85cqi, 0.46rem);\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: 100%;\n height: 100%;\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 --cm-partner-logo-filter: grayscale(1) saturate(0.72) brightness(0.78) contrast(0.96) drop-shadow(0 0 0 hsl(var(--primary) / 0));\n --cm-partner-logo-opacity: 0.72;\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 --cm-partner-logo-filter: grayscale(0) saturate(1.08) brightness(1.08) contrast(1.02) drop-shadow(0 0 9px hsl(var(--primary) / 0.16));\n --cm-partner-logo-opacity: 1;\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: min(6.25rem, 78%);\n height: clamp(0.85rem, 3cqi, 1.25rem);\n object-fit: contain;\n mix-blend-mode: screen;\n filter: var(--cm-partner-logo-filter);\n opacity: var(--cm-partner-logo-opacity);\n transition: none;\n}\n\n.cm-partner-logo:hover img {\n filter: var(--cm-partner-logo-filter);\n opacity: var(--cm-partner-logo-opacity);\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,q9SA8W3B,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.24rem, 0.85cqi, 0.46rem);
|
|
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,8 @@ export const utilitiesStyles = /* css */ `
|
|
|
167
173
|
.cm-partner-badge img {
|
|
168
174
|
position: relative;
|
|
169
175
|
z-index: 1;
|
|
170
|
-
width:
|
|
171
|
-
|
|
172
|
-
height: clamp(2rem, 7cqi, 3.45rem);
|
|
176
|
+
width: 100%;
|
|
177
|
+
height: 100%;
|
|
173
178
|
object-fit: contain;
|
|
174
179
|
}
|
|
175
180
|
|
|
@@ -182,6 +187,19 @@ export const utilitiesStyles = /* css */ `
|
|
|
182
187
|
overflow: hidden;
|
|
183
188
|
}
|
|
184
189
|
|
|
190
|
+
.cm-partner-marquee__row,
|
|
191
|
+
.partners-marquee__row {
|
|
192
|
+
display: flex;
|
|
193
|
+
width: max-content;
|
|
194
|
+
min-width: 100%;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.cm-partner-marquee__inner,
|
|
198
|
+
.partners-marquee__inner {
|
|
199
|
+
display: flex;
|
|
200
|
+
gap: clamp(0.58rem, 1.8cqi, 0.85rem);
|
|
201
|
+
}
|
|
202
|
+
|
|
185
203
|
.cm-partner-marquee::before,
|
|
186
204
|
.cm-partner-marquee::after {
|
|
187
205
|
content: "";
|
|
@@ -202,7 +220,16 @@ export const utilitiesStyles = /* css */ `
|
|
|
202
220
|
background: linear-gradient(270deg, hsl(var(--background) / 0.9), transparent);
|
|
203
221
|
}
|
|
204
222
|
|
|
223
|
+
.cm-partner-marquee:hover .cm-marquee-track,
|
|
224
|
+
.cm-partner-marquee:hover .cm-marquee-track-reverse,
|
|
225
|
+
.cm-partner-marquee:focus-within .cm-marquee-track,
|
|
226
|
+
.cm-partner-marquee:focus-within .cm-marquee-track-reverse {
|
|
227
|
+
animation-play-state: paused;
|
|
228
|
+
}
|
|
229
|
+
|
|
205
230
|
.cm-partner-logo {
|
|
231
|
+
--cm-partner-logo-filter: grayscale(1) saturate(0.72) brightness(0.78) contrast(0.96) drop-shadow(0 0 0 hsl(var(--primary) / 0));
|
|
232
|
+
--cm-partner-logo-opacity: 0.72;
|
|
206
233
|
display: grid;
|
|
207
234
|
height: clamp(2.45rem, 7cqi, 3rem);
|
|
208
235
|
min-width: clamp(6.4rem, 18cqi, 8.7rem);
|
|
@@ -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,
|
|
@@ -220,25 +253,33 @@ export const utilitiesStyles = /* css */ `
|
|
|
220
253
|
}
|
|
221
254
|
|
|
222
255
|
.cm-partner-logo:hover {
|
|
256
|
+
--cm-partner-logo-filter: grayscale(0) saturate(1.08) brightness(1.08) contrast(1.02) drop-shadow(0 0 9px hsl(var(--primary) / 0.16));
|
|
257
|
+
--cm-partner-logo-opacity: 1;
|
|
223
258
|
transform: translateY(-1px);
|
|
224
259
|
border-color: hsl(var(--primary) / 0.46);
|
|
225
|
-
background:
|
|
226
|
-
|
|
260
|
+
background:
|
|
261
|
+
radial-gradient(circle at 16% 0%, hsl(var(--primary) / 0.13), transparent 44%),
|
|
262
|
+
radial-gradient(circle at 100% 100%, hsl(var(--accent) / 0.12), transparent 52%),
|
|
263
|
+
hsl(221 50% 7% / 0.86);
|
|
264
|
+
box-shadow:
|
|
265
|
+
0 0 16px hsl(var(--primary) / 0.1),
|
|
266
|
+
0 0 24px hsl(var(--accent) / 0.07),
|
|
267
|
+
inset 0 0 20px hsl(var(--primary) / 0.04);
|
|
227
268
|
}
|
|
228
269
|
|
|
229
270
|
.cm-partner-logo img {
|
|
230
|
-
width:
|
|
231
|
-
max-width: 6.25rem;
|
|
271
|
+
width: min(6.25rem, 78%);
|
|
232
272
|
height: clamp(0.85rem, 3cqi, 1.25rem);
|
|
233
273
|
object-fit: contain;
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
274
|
+
mix-blend-mode: screen;
|
|
275
|
+
filter: var(--cm-partner-logo-filter);
|
|
276
|
+
opacity: var(--cm-partner-logo-opacity);
|
|
277
|
+
transition: none;
|
|
237
278
|
}
|
|
238
279
|
|
|
239
280
|
.cm-partner-logo:hover img {
|
|
240
|
-
filter:
|
|
241
|
-
opacity:
|
|
281
|
+
filter: var(--cm-partner-logo-filter);
|
|
282
|
+
opacity: var(--cm-partner-logo-opacity);
|
|
242
283
|
}
|
|
243
284
|
|
|
244
285
|
@container (max-width: 42rem) {
|
|
@@ -315,7 +356,9 @@ export const utilitiesStyles = /* css */ `
|
|
|
315
356
|
|
|
316
357
|
@media (prefers-reduced-motion: reduce) {
|
|
317
358
|
.cm-marquee-track,
|
|
359
|
+
.marquee-track,
|
|
318
360
|
.cm-marquee-track-reverse,
|
|
361
|
+
.marquee-track-reverse,
|
|
319
362
|
.cm-partner-badge::after {
|
|
320
363
|
animation-duration: 0.01ms !important;
|
|
321
364
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8WxC,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.93",
|
|
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
|
},
|