assets: apply yngatech brand colorway

apps/web/src/components/SidebarStageBackdrop.tsx

@@ -120,9 +120,9 @@ function NightlySkyArt() {
           gradientUnits="userSpaceOnUse"
           spreadMethod="reflect"
         >
-          <stop stopColor="#07152F" />
-          <stop offset="0.5" stopColor="#151443" />
-          <stop offset="1" stopColor="#32155B" />
+          <stop stopColor="#05191F" />
+          <stop offset="0.5" stopColor="#0A2B34" />
+          <stop offset="1" stopColor="#10484F" />
         </linearGradient>
         <radialGradient
           id={glowId}
@@ -132,20 +132,20 @@ function NightlySkyArt() {
           gradientTransform="translate(216 18) rotate(137) scale(120 84)"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#5165D8" stopOpacity="0.4" />
-          <stop offset="0.5" stopColor="#283075" stopOpacity="0.16" />
-          <stop offset="1" stopColor="#111635" stopOpacity="0" />
+          <stop stopColor="#38B9C6" stopOpacity="0.4" />
+          <stop offset="0.5" stopColor="#1A5764" stopOpacity="0.16" />
+          <stop offset="1" stopColor="#0A242C" stopOpacity="0" />
         </radialGradient>
         <linearGradient id={cloudId} x1="0" y1="60" x2="288" y2="96" gradientUnits="userSpaceOnUse">
-          <stop stopColor="#4EA4FF" stopOpacity="0.5" />
-          <stop offset="0.52" stopColor="#696FEA" stopOpacity="0.62" />
-          <stop offset="1" stopColor="#A85BEA" stopOpacity="0.5" />
+          <stop stopColor="#4EDCE2" stopOpacity="0.5" />
+          <stop offset="0.52" stopColor="#38A9B6" stopOpacity="0.62" />
+          <stop offset="1" stopColor="#5FE0BF" stopOpacity="0.5" />
         </linearGradient>
         <filter id={softId} x="-24" y="-24" width="336" height="144" filterUnits="userSpaceOnUse">
           <feGaussianBlur stdDeviation="4" />
         </filter>
         <pattern id={starsId} width="288" height="96" patternUnits="userSpaceOnUse">
-          <g fill="#E4EAFF">
+          <g fill="#E0FBF7">
             {NIGHTLY_STARS.map((star) => (
               <circle
                 key={`${star.cx}-${star.cy}`}
@@ -156,7 +156,7 @@ function NightlySkyArt() {
               />
             ))}
           </g>
-          <g stroke="#C8D7FF" strokeLinecap="round" strokeOpacity="0.7" strokeWidth="0.6">
+          <g stroke="#C4F2EA" strokeLinecap="round" strokeOpacity="0.7" strokeWidth="0.6">
             {NIGHTLY_SPARKLES.map((sparkle) => (
               <g key={`${sparkle.x}-${sparkle.y}`}>
                 <path d={`M${sparkle.x - 1.5} ${sparkle.y}H${sparkle.x + 1.5}`} />
@@ -233,9 +233,9 @@ function DevBlueprintArt() {
           gradientTransform="translate(216 14) rotate(137) scale(120 84)"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#D4F6FF" stopOpacity="0.4" />
-          <stop offset="0.52" stopColor="#65C8FF" stopOpacity="0.16" />
-          <stop offset="1" stopColor="#276AF1" stopOpacity="0" />
+          <stop stopColor="#DFFFFA" stopOpacity="0.4" />
+          <stop offset="0.52" stopColor="#5FE3D6" stopOpacity="0.16" />
+          <stop offset="1" stopColor="#1B8FA0" stopOpacity="0" />
         </radialGradient>
         <radialGradient
           id={celesteGlowId}
@@ -245,9 +245,9 @@ function DevBlueprintArt() {
           gradientTransform="translate(474 44) rotate(166) scale(156 92)"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#D2FFFF" stopOpacity="0.34" />
-          <stop offset="0.5" stopColor="#48DCF5" stopOpacity="0.18" />
-          <stop offset="1" stopColor="#277EF1" stopOpacity="0" />
+          <stop stopColor="#D9FFF5" stopOpacity="0.34" />
+          <stop offset="0.5" stopColor="#48F0DC" stopOpacity="0.18" />
+          <stop offset="1" stopColor="#1FA0A0" stopOpacity="0" />
         </radialGradient>
         <radialGradient
           id={violetGlowId}
@@ -257,20 +257,20 @@ function DevBlueprintArt() {
           gradientTransform="translate(704 18) rotate(145) scale(132 88)"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#D9D8FF" stopOpacity="0.3" />
-          <stop offset="0.52" stopColor="#7C8BFF" stopOpacity="0.14" />
-          <stop offset="1" stopColor="#3155DF" stopOpacity="0" />
+          <stop stopColor="#DCFFEF" stopOpacity="0.3" />
+          <stop offset="0.52" stopColor="#6FE3C0" stopOpacity="0.14" />
+          <stop offset="1" stopColor="#1E9C86" stopOpacity="0" />
         </radialGradient>
         <pattern id={minorGridId} width="8" height="8" patternUnits="userSpaceOnUse">
-          <path d="M8 0H0V8" stroke="#EAF6FF" strokeOpacity="0.14" strokeWidth="0.5" />
+          <path d="M8 0H0V8" stroke="#EAFFFB" strokeOpacity="0.14" strokeWidth="0.5" />
         </pattern>
         <pattern id={majorGridId} width="32" height="32" patternUnits="userSpaceOnUse">
-          <path d="M32 0H0V32" stroke="#EAF6FF" strokeOpacity="0.26" strokeWidth="0.6" />
+          <path d="M32 0H0V32" stroke="#EAFFFB" strokeOpacity="0.26" strokeWidth="0.6" />
         </pattern>
         <pattern id={rulerId} width="32" height="6" patternUnits="userSpaceOnUse">
           <path
             d="M4 0V2.5M12 0V2.5M20 0V4M28 0V2.5"
-            stroke="#DDF7FF"
+            stroke="#DDFBF5"
             strokeOpacity="0.5"
             strokeWidth="0.5"
           />
@@ -281,7 +281,7 @@ function DevBlueprintArt() {
           <rect width="768" height="96" fill={`url(#${violetGlowId})`} />
         </pattern>
         <pattern id={annotationsId} width="768" height="96" patternUnits="userSpaceOnUse">
-          <g stroke="#DDF7FF" strokeLinecap="round" strokeOpacity="0.6" strokeWidth="0.7">
+          <g stroke="#DDFBF5" strokeLinecap="round" strokeOpacity="0.6" strokeWidth="0.7">
             <path d="M180 64H264" strokeDasharray="5 4" />
             <path d="M180 61V67M264 61V67" />
             <path d="M276 10V44" strokeDasharray="4 4" strokeOpacity="0.5" />
@@ -294,7 +294,7 @@ function DevBlueprintArt() {
             <path d="M590 67V73M724 67V73" strokeOpacity="0.55" />
           </g>
 
-          <g stroke="#DDF7FF" strokeLinecap="round" strokeOpacity="0.55" strokeWidth="0.6">
+          <g stroke="#DDFBF5" strokeLinecap="round" strokeOpacity="0.55" strokeWidth="0.6">
             <g>
               <path d="M34 60L38 64M38 60L34 64" />
             </g>
@@ -318,7 +318,7 @@ function DevBlueprintArt() {
             </g>
           </g>
 
-          <g stroke="#DDF7FF" strokeOpacity="0.35" strokeWidth="0.6">
+          <g stroke="#DDFBF5" strokeOpacity="0.35" strokeWidth="0.6">
             <circle cx="196" cy="38" r="13" strokeDasharray="3.5 4" />
             <path d="M196 33V43M191 38H201" strokeOpacity="0.6" strokeWidth="0.4" />
             <circle cx="414" cy="64" r="10" strokeDasharray="2.5 3.5" />

apps/web/src/components/sidebar/SidebarChrome.tsx

@@ -58,7 +58,7 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({
         className={cn(
           "relative z-10 md:hidden",
           backdropVariant &&
-            "[:hover,[data-pressed]]:bg-white/15 focus-visible:ring-white/90 focus-visible:ring-offset-blue-700 [&_svg]:stroke-white/90! [&_svg]:opacity-100! [&_svg]:hover:stroke-white!",
+            "[:hover,[data-pressed]]:bg-white/15 focus-visible:ring-white/90 focus-visible:ring-offset-teal-800 [&_svg]:stroke-white/90! [&_svg]:opacity-100! [&_svg]:hover:stroke-white!",
         )}
       />
       <SidebarBrand onBackdrop={backdropVariant !== null} />

apps/web/src/index.css

@@ -311,15 +311,15 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   }
 
   .stage-blueprint {
-    --stage-bp-top: #67c2ff;
-    --stage-bp-mid: #347ff8;
-    --stage-bp-bottom: #1538d0;
+    --stage-bp-top: #5cd6ce;
+    --stage-bp-mid: #219eae;
+    --stage-bp-bottom: #0a5b72;
   }
 
   .dark .stage-blueprint {
-    --stage-bp-top: #3a7ad1;
-    --stage-bp-mid: #2050ae;
-    --stage-bp-bottom: #101f6e;
+    --stage-bp-top: #35939c;
+    --stage-bp-mid: #1b6675;
+    --stage-bp-bottom: #0b3540;
   }
 
   .workspace-topbar {

assets/dev/app-icon.icon/icon.json

@@ -1,6 +1,6 @@
 {
   "fill": {
-    "solid": "display-p3:0.00000,0.00000,0.00000,1.00000"
+    "solid": "display-p3:0.02000,0.18800,0.23500,1.00000"
   },
   "groups": [
     {

assets/nightly/app-icon.icon/icon.json

@@ -1,6 +1,6 @@
 {
   "fill": {
-    "automatic-gradient": "display-p3:0.00000,0.00000,0.00000,1.00000"
+    "automatic-gradient": "display-p3:0.02000,0.10000,0.12200,1.00000"
   },
   "groups": [
     {

assets/prod/app-icon.icon/icon.json

@@ -1,6 +1,6 @@
 {
   "fill": {
-    "solid": "display-p3:0.00000,0.00000,0.00000,1.00000"
+    "solid": "display-p3:0.02400,0.13700,0.16900,1.00000"
   },
   "groups": [
     {