feat: dynamic color scales

packages/website-ue/src/components/Button/index.tsx

@@ -35,14 +35,10 @@ export function Button({
   return (
     <button
       className={classNames("composable-radius", styles.button, className)}
-      data-color={color}
+      data-accent={color}
       data-variant={variant}
       data-light-text={variant === "solid"}
       data-radius={radius}
-      style={{
-        backgroundColor: color ? `var(--${color}-9)` : undefined,
-        ...style,
-      }}
       {...props}
     />
   );

packages/website-ue/src/components/ColorAlias.astro

@@ -18,6 +18,15 @@ for (let i = 0; i < 12; i++) {
   styles += `--${alias}-${alpha ? "a" : ""}${n}:var(--${color}-${alpha ? "a" : ""}${n});`;
 }
 
+styles += "}";
+
+styles += `*[data-accent='${alias}']{`;
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  styles += `--accent-${alpha ? "a" : ""}${n}:var(--${alias}-${alpha ? "a" : ""}${n});`;
+}
+
 styles += "}";
 ---
 

packages/website-ue/src/components/ColorScale.astro

@@ -39,6 +39,15 @@ for (let i = 0; i < 12; i++) {
   styles += `--${color}-${alpha ? "a" : ""}${n}:${value};`;
 }
 
+styles += "}";
+
+styles += `*[data-accent='${color}']{`;
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  styles += `--accent-${alpha ? "a" : ""}${n}:var(--${color}-${alpha ? "a" : ""}${n});`;
+}
+
 styles += "}";
 ---
 

packages/website-ue/src/components/TankopediaLoadout/index.tsx

@@ -79,6 +79,7 @@ function LineInner({ line, lines }: LineProps) {
       return (
         <Fragment key={stage.tech_name}>
           <IconButton
+            color="gray"
             variant={isSelected ? "solid" : "surface"}
             radius="1"
             className={styles.stage}