@dotcraft/avatar 0.6.3 → 0.6.4

package/src/composer/styles/foundation.css

@@ -0,0 +1,301 @@
+[data-mascot-theme='dark'] {
+  --dca-theme-surface: #141515;
+  --dca-theme-ink: #eeeeec;
+  --dca-theme-dimmed: color-mix(in srgb, var(--dca-theme-ink) 42%, var(--dca-theme-surface));
+  --dca-theme-success: #22c55e;
+}
+
+[data-mascot-theme='light'] {
+  --dca-theme-surface: #ffffff;
+  --dca-theme-ink: #1a1c1f;
+  --dca-theme-dimmed: color-mix(in srgb, var(--dca-theme-ink) 50%, var(--dca-theme-surface));
+  --dca-theme-success: #16a34a;
+}
+
+@keyframes composer-mascot-breathe {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.035);
+  }
+}
+
+.composer-mascot-breathe {
+  animation: composer-mascot-breathe 4s ease-in-out infinite;
+  transform-origin: bottom center;
+  will-change: transform;
+}
+
+.composer-mascot-motion {
+  position: relative;
+}
+
+.composer-mascot-motion > div:first-child {
+  position: relative;
+  z-index: 2;
+}
+
+.composer-mascot-fast-echo {
+  display: grid;
+  line-height: 0;
+  transform-origin: bottom center;
+}
+
+.composer-mascot-character-stage {
+  display: grid;
+  width: 58px;
+  height: 58px;
+  overflow: visible;
+}
+
+
+[data-mascot-speed='fast'] .composer-mascot-motion {
+  --mascot-fast-shift-base: oklch(from var(--mascot-energy-accent)
+    clamp(0.5, calc(l + 0.22), 0.96) clamp(0.06, calc(c * 0.88), 0.27) calc(h + 92));
+  --mascot-fast-echo-left: color-mix(in oklab, var(--mascot-energy-accent) 68%, var(--dca-theme-ink));
+  --mascot-fast-echo-right: color-mix(in oklab, var(--mascot-fast-shift-base) 78%, var(--dca-theme-ink));
+}
+
+[data-mascot-speed='fast'] .composer-mascot-fast-echo {
+  animation: composer-mascot-fast-soft-echo 5.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+  will-change: filter;
+}
+
+@keyframes composer-mascot-fast-soft-echo {
+  0%, 100% {
+    filter:
+      drop-shadow(-2.1px 0 0.18px rgb(from var(--mascot-fast-echo-left) r g b / 0.58))
+      drop-shadow(-4px 0 0.25px rgb(from var(--mascot-fast-echo-left) r g b / 0.22))
+      drop-shadow(1.3px 0 0.2px rgb(from var(--mascot-fast-echo-right) r g b / 0.28))
+      drop-shadow(2.7px 0 0.25px rgb(from var(--mascot-fast-echo-right) r g b / 0.1));
+  }
+  50% {
+    filter:
+      drop-shadow(-1.3px 0 0.2px rgb(from var(--mascot-fast-echo-left) r g b / 0.28))
+      drop-shadow(-2.7px 0 0.25px rgb(from var(--mascot-fast-echo-left) r g b / 0.1))
+      drop-shadow(2.1px 0 0.18px rgb(from var(--mascot-fast-echo-right) r g b / 0.58))
+      drop-shadow(4px 0 0.25px rgb(from var(--mascot-fast-echo-right) r g b / 0.22));
+  }
+}
+
+[data-mascot-theme='light'][data-mascot-speed='fast'] .composer-mascot-motion {
+  --mascot-fast-light-edge-base: oklch(from var(--mascot-energy-accent)
+    clamp(0.38, calc(l + 0.12), 0.94) clamp(0.05, calc(c * 0.92), 0.28) calc(h + 8));
+  --mascot-fast-light-echo-left: color-mix(in oklab, var(--mascot-fast-light-edge-base) 58%, var(--dca-theme-surface));
+  --mascot-fast-light-echo-right: color-mix(in oklab, var(--mascot-fast-shift-base) 54%, var(--dca-theme-surface));
+}
+
+[data-mascot-theme='light'][data-mascot-speed='fast'] .composer-mascot-fast-echo {
+  animation-name: composer-mascot-fast-soft-echo-light;
+}
+
+@keyframes composer-mascot-fast-soft-echo-light {
+  0%, 100% {
+    filter:
+      drop-shadow(-1.55px 0 1.25px rgb(from var(--mascot-fast-light-echo-left) r g b / 0.3))
+      drop-shadow(-3px 0 2.8px rgb(from var(--mascot-fast-light-echo-left) r g b / 0.09))
+      drop-shadow(1.1px 0 1.35px rgb(from var(--mascot-fast-light-echo-right) r g b / 0.16))
+      drop-shadow(2.5px 0 2.8px rgb(from var(--mascot-fast-light-echo-right) r g b / 0.05));
+  }
+  50% {
+    filter:
+      drop-shadow(-1.1px 0 1.35px rgb(from var(--mascot-fast-light-echo-left) r g b / 0.16))
+      drop-shadow(-2.5px 0 2.8px rgb(from var(--mascot-fast-light-echo-left) r g b / 0.05))
+      drop-shadow(1.55px 0 1.25px rgb(from var(--mascot-fast-light-echo-right) r g b / 0.3))
+      drop-shadow(3px 0 2.8px rgb(from var(--mascot-fast-light-echo-right) r g b / 0.09));
+  }
+}
+
+@keyframes composer-mascot-energy-medium-dark {
+  0%, 38%, 100% { stop-color: var(--mascot-body-dark); }
+  14% {
+    stop-color: oklch(from var(--mascot-body-dark)
+      clamp(0.28, calc(l + 0.0573), 0.96)
+      clamp(0, calc(c * 0.909), 0.3)
+      calc(h - 0.1));
+  }
+}
+
+@keyframes composer-mascot-energy-medium-mid {
+  0%, 24%, 70%, 100% { stop-color: var(--mascot-body-mid); }
+  46% {
+    stop-color: oklch(from var(--mascot-body-mid)
+      clamp(0.28, calc(l + 0.0796), 0.96)
+      clamp(0, calc(c * 0.814), 0.3)
+      calc(h - 0.56));
+  }
+}
+
+@keyframes composer-mascot-energy-medium-light {
+  0%, 50%, 94%, 100% { stop-color: var(--mascot-body-light); }
+  72% {
+    stop-color: oklch(from var(--mascot-body-light)
+      clamp(0.28, calc(l + 0.1052), 0.96)
+      clamp(0, calc(c * 0.569), 0.3)
+      calc(h + 1.57));
+  }
+}
+
+@keyframes composer-mascot-energy-high-dark {
+  0%, 32%, 100% {
+    stop-color: oklch(from var(--mascot-body-dark)
+      clamp(0.28, calc(l - 0.0373), 0.96)
+      clamp(0, calc(c * 0.987), 0.3)
+      calc(h - 0.32));
+  }
+  12% {
+    stop-color: oklch(from var(--mascot-body-dark)
+      clamp(0.28, calc(l + 0.0829), 0.96)
+      clamp(0, calc(c * 0.846), 0.3)
+      calc(h - 2.77));
+  }
+}
+
+@keyframes composer-mascot-energy-high-mid {
+  0%, 22%, 60%, 100% {
+    stop-color: oklch(from var(--mascot-body-mid)
+      clamp(0.28, calc(l - 0.0386), 0.96)
+      clamp(0, calc(c * 1.211), 0.3)
+      calc(h - 3.62));
+  }
+  40% {
+    stop-color: oklch(from var(--mascot-body-mid)
+      clamp(0.28, calc(l + 0.1298), 0.96)
+      clamp(0, calc(c * 0.662), 0.3)
+      calc(h - 9.24));
+  }
+}
+
+@keyframes composer-mascot-energy-high-light {
+  0%, 48%, 86%, 100% {
+    stop-color: oklch(from var(--mascot-body-light)
+      clamp(0.28, calc(l - 0.0112), 0.96)
+      clamp(0, calc(c * 1.047), 0.3)
+      calc(h - 9.36));
+  }
+  66% {
+    stop-color: oklch(from var(--mascot-body-light)
+      clamp(0.28, calc(l + 0.1713), 0.96)
+      clamp(0, calc(c * 0.314), 0.3)
+      calc(h - 9.37));
+  }
+}
+
+@keyframes composer-mascot-energy-high-mark-dark {
+  0%, 44%, 100% {
+    stop-color: oklch(from var(--mascot-mark-dark)
+      clamp(0.28, calc(l + 0.0017), 0.96)
+      clamp(0, calc(c * 0.995), 0.3)
+      calc(h - 0.12));
+  }
+  22% {
+    stop-color: oklch(from var(--mascot-mark-dark)
+      clamp(0.28, calc(l + 0.1236), 0.96)
+      clamp(0, calc(c * 0.758), 0.3)
+      calc(h - 3.57));
+  }
+}
+
+@keyframes composer-mascot-energy-high-mark-light {
+  0%, 42%, 86%, 100% {
+    stop-color: oklch(from var(--mascot-mark-energy)
+      clamp(0.28, calc(l + 0.05), 0.96)
+      clamp(0, calc(c * 0.913), 0.3)
+      calc(h - 1.66));
+  }
+  64% {
+    stop-color: oklch(from var(--mascot-mark-energy)
+      clamp(0.28, calc(l + 0.2226), 0.96)
+      clamp(0, calc(c * 0.409), 0.3)
+      calc(h - 12.45));
+  }
+}
+
+@keyframes composer-mascot-energy-extra-dark {
+  0%, 36%, 100% {
+    stop-color: oklch(from var(--mascot-body-dark)
+      clamp(0.28, calc(l - 0.0021), 0.96)
+      clamp(0, calc(c * 0.983), 0.3)
+      calc(h + 2.19));
+  }
+  16% {
+    stop-color: oklch(from var(--mascot-body-dark)
+      clamp(0.28, calc(l + 0.0559), 0.96)
+      clamp(0, calc(c * 1.002), 0.3)
+      calc(h + 40.24));
+  }
+}
+
+@keyframes composer-mascot-energy-extra-mid {
+  0%, 24%, 64%, 100% {
+    stop-color: oklch(from var(--mascot-body-mid)
+      clamp(0.28, calc(l - 0.0159), 0.96)
+      clamp(0, calc(c * 1.133), 0.3)
+      calc(h + 1.9));
+  }
+  44% {
+    stop-color: oklch(from var(--mascot-body-mid)
+      clamp(0.28, calc(l + 0.0032), 0.96)
+      clamp(0, calc(c * 1.303), 0.3)
+      calc(h + 41.78));
+  }
+}
+
+@keyframes composer-mascot-energy-extra-light {
+  0%, 50%, 90%, 100% {
+    stop-color: oklch(from var(--mascot-body-light)
+      clamp(0.28, calc(l + 0.0239), 0.96)
+      clamp(0, calc(c * 0.896), 0.3)
+      calc(h - 2.67));
+  }
+  70% {
+    stop-color: oklch(from var(--mascot-body-light)
+      clamp(0.28, calc(l + 0.0668), 0.96)
+      clamp(0, calc(c * 1.057), 0.3)
+      calc(h + 42.19));
+  }
+}
+
+@keyframes composer-mascot-energy-extra-mark-dark {
+  0%, 46%, 100% {
+    stop-color: oklch(from var(--mascot-mark-dark)
+      clamp(0.28, calc(l + 0.0159), 0.96)
+      clamp(0, calc(c * 0.965), 0.3)
+      calc(h + 1.45));
+  }
+  24% {
+    stop-color: oklch(from var(--mascot-mark-dark)
+      clamp(0.28, calc(l + 0.0437), 0.96)
+      clamp(0, calc(c * 0.993), 0.3)
+      calc(h + 36.73));
+  }
+}
+
+@keyframes composer-mascot-energy-extra-mark-light {
+  0%, 46%, 90%, 100% {
+    stop-color: oklch(from var(--mascot-mark-energy)
+      clamp(0.28, calc(l + 0.0697), 0.96)
+      clamp(0, calc(c * 0.851), 0.3)
+      calc(h + 0.49));
+  }
+  68% {
+    stop-color: oklch(from var(--mascot-mark-energy)
+      clamp(0.28, calc(l + 0.1058), 0.96)
+      clamp(0, calc(c * 0.995), 0.3)
+      calc(h + 45.19));
+  }
+}
+
+.composer-mascot-contact-shadow {
+  position: absolute;
+  right: 68px;
+  top: 1px;
+  width: 72px;
+  height: 24px;
+  transform: translateX(50%);
+  border-radius: 50%;
+  filter: blur(2px);
+  pointer-events: none;
+}