feat(app): color themes (#30824)

Co-authored-by: LukeParkerDev <10430890+Hona@users.noreply.github.com>

packages/ui/src/v2/components/dialog-v2.css

@@ -7,7 +7,7 @@
   background-color: var(--v2-overlay-simple-overlay-scrim);
 }
 
-[data-component="dialog"] {
+[data-component="dialog-v2"] {
   position: fixed;
   inset: 0;
   z-index: 50;
@@ -25,7 +25,7 @@
     background: var(--v2-background-bg-layer-01);
     box-shadow: var(--v2-elevation-overlay);
     border-radius: 6px;
-    overflow: visible;
+    overflow: hidden;
     pointer-events: auto;
 
     [data-slot="dialog-content"] {
@@ -37,6 +37,7 @@
       max-height: 100%;
       flex: 1;
       overflow: auto;
+      background: transparent;
 
       scrollbar-width: none;
       -ms-overflow-style: none;

packages/ui/src/v2/components/dialog-v2.stories.tsx

@@ -17,7 +17,7 @@ Dialog content wrapper built on Kobalte's dialog primitive with v2 styling.
 - Focus trapping and aria attributes provided by Kobalte Dialog.
 
 ### Theming/tokens
-- Uses \`data-component="dialog"\` and slot attributes.
+- Uses \`data-component="dialog-v2"\` and slot attributes.
 `
 
 export default {

packages/ui/src/v2/components/dialog-v2.tsx

@@ -7,6 +7,7 @@ export interface DialogProps extends ParentProps {
   description?: JSXElement
   action?: JSXElement
   size?: "normal" | "large" | "x-large"
+  variant?: "default" | "settings"
   class?: ComponentProps<"div">["class"]
   classList?: ComponentProps<"div">["classList"]
   fit?: boolean
@@ -17,14 +18,19 @@ export function DialogFooter(props: ParentProps) {
 }
 
 export function Dialog(props: DialogProps) {
-  const [local] = splitProps(props, ["title", "description", "action", "size", "class", "classList", "fit", "children"])
+  const [local] = splitProps(props, ["title", "description", "action", "size", "variant", "class", "classList", "fit", "children"])
   const title = children(() => local.title)
   const description = children(() => local.description)
   const action = children(() => local.action)
   const hasHeader = () => title() || action()
 
   return (
-    <div data-component="dialog" data-fit={local.fit ? true : undefined} data-size={local.size || "normal"}>
+    <div
+      data-component="dialog-v2"
+      data-variant={local.variant === "settings" ? "settings" : undefined}
+      data-fit={local.fit ? true : undefined}
+      data-size={local.size || "normal"}
+    >
       <div data-slot="dialog-container">
         <Kobalte.Content
           data-slot="dialog-content"

packages/ui/src/v2/components/project-avatar-v2.css

@@ -20,7 +20,7 @@
   letter-spacing: 0.05px;
   font-variant-numeric: tabular-nums;
   text-transform: uppercase;
-  color: var(--v2-grey-100);
+  color: var(--v2-avatar-fg);
   text-shadow: 0 0 4px var(--v2-alpha-dark-20);
   user-select: none;
   -webkit-user-select: none;