@opencode-ai/ui 0.0.0-dev-18424 → 0.0.0-dev-202608272004

package/src/v2/components/text-shimmer-v2.css

@@ -0,0 +1,125 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="text-shimmer-v2"] {
+  --_step: 45ms;
+  --_duration: 1200ms;
+  --_swap: 220ms;
+  --_index: 0;
+  --_angle: 90deg;
+  --_spread: 5.2ch;
+  --_size: 360%;
+  --_base-color: var(--v2-text-text-muted);
+  --_peak-color: var(--v2-text-text-base);
+  --_sweep: linear-gradient(
+    var(--_angle),
+    transparent calc(50% - var(--_spread)),
+    var(--_peak-color) 50%,
+    transparent calc(50% + var(--_spread))
+  );
+  --_base: linear-gradient(var(--_base-color), var(--_base-color));
+
+  display: inline-flex;
+  align-items: baseline;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  user-select: none;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-char"] {
+  display: inline-grid;
+  white-space: pre;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+  grid-area: 1 / 1;
+  white-space: pre;
+  transition: opacity var(--_swap) ease-out;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
+  color: inherit;
+  opacity: 1;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+  color: var(--_base-color);
+  opacity: 0;
+}
+
+[data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-shimmer"] {
+  opacity: 1;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"][data-run="true"] {
+  animation-name: text-shimmer-v2-sweep;
+  animation-duration: var(--_duration);
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-fill-mode: both;
+  animation-delay: calc(var(--_step) * var(--_index) * -1);
+  will-change: background-position;
+}
+
+@keyframes text-shimmer-v2-sweep {
+  0% {
+    background-position:
+      100% 0,
+      0 0;
+  }
+  100% {
+    background-position:
+      0% 0,
+      0 0;
+  }
+}
+
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-image: var(--_sweep), var(--_base);
+    background-size:
+      var(--_size) 100%,
+      100% 100%;
+    background-position:
+      100% 0,
+      0 0;
+    background-repeat: no-repeat;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+
+  [data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-base"] {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+    transition-duration: 0ms;
+  }
+
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+    animation: none !important;
+    color: inherit;
+    -webkit-text-fill-color: currentColor;
+    background-image: none;
+  }
+
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
+    opacity: 1 !important;
+  }
+}

package/src/v2/components/text-shimmer-v2.tsx

@@ -0,0 +1,63 @@
+import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import "./text-shimmer-v2.css"
+
+export const TextShimmerV2 = <T extends ValidComponent = "span">(props: {
+  text: string
+  class?: string
+  as?: T
+  active?: boolean
+  offset?: number
+}) => {
+  const text = createMemo(() => props.text ?? "")
+  const active = createMemo(() => props.active ?? true)
+  const offset = createMemo(() => props.offset ?? 0)
+  const [run, setRun] = createSignal(active())
+  const swap = 220
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  createEffect(() => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = undefined
+    }
+
+    if (active()) {
+      setRun(true)
+      return
+    }
+
+    timer = setTimeout(() => {
+      timer = undefined
+      setRun(false)
+    }, swap)
+  })
+
+  onCleanup(() => {
+    if (!timer) return
+    clearTimeout(timer)
+  })
+
+  return (
+    <Dynamic
+      component={props.as ?? "span"}
+      data-component="text-shimmer-v2"
+      data-active={active() ? "true" : "false"}
+      class={props.class}
+      aria-label={text()}
+      style={{
+        "--_swap": `${swap}ms`,
+        "--_index": `${offset()}`,
+      }}
+    >
+      <span data-slot="text-shimmer-v2-char">
+        <span data-slot="text-shimmer-v2-base" aria-hidden="true">
+          {text()}
+        </span>
+        <span data-slot="text-shimmer-v2-shimmer" data-run={run() ? "true" : "false"} aria-hidden="true">
+          {text()}
+        </span>
+      </span>
+    </Dynamic>
+  )
+}

package/src/{forms/textarea/textarea.tsx → v2/components/textarea-v2.tsx}

@@ -1,12 +1,12 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./textarea.css"
+import "./textarea-v2.css"
 
-export interface TextareaProps extends ComponentProps<"textarea"> {
+export interface TextareaV2Props extends ComponentProps<"textarea"> {
   /** Error styling for the field and value text. */
   invalid?: boolean
 }
 
-export function Textarea(props: TextareaProps) {
+export function TextareaV2(props: TextareaV2Props) {
   const [local, textareaProps] = splitProps(props, ["class", "classList", "invalid", "disabled", "rows"])
 
   return (

package/src/{feedback/toast/toast.tsx → v2/components/toast-v2.tsx}

@@ -4,12 +4,12 @@ import type { ComponentProps, JSX } from "solid-js"
 import { createContext, onCleanup, onMount, splitProps, useContext } from "solid-js"
 import { Portal } from "solid-js/web"
 import { useI18n } from "../../context/i18n"
-import "../../actions/button/button.css"
-import "./toast.css"
+import "./button-v2.css"
+import "./toast-v2.css"
 
-export interface ToastRegionProps extends ToasterProps {}
+export interface ToastV2RegionProps extends ToasterProps {}
 
-function ToastRegion(props: ToastRegionProps) {
+function ToastV2Region(props: ToastV2RegionProps) {
   const i18n = useI18n()
   const [local, rest] = splitProps(props, ["class", "className", "style", "toastOptions", "swipeDirections"])
   onMount(() => {
@@ -67,40 +67,40 @@ function ToastRegion(props: ToastRegionProps) {
   )
 }
 
-const ToastContext = createContext<number>()
+const ToastV2Context = createContext<number>()
 
-export interface ToastRootComponentProps {
+export interface ToastV2RootComponentProps {
   toastId: number
   children?: JSX.Element
 }
 
-function ToastRoot(props: ToastRootComponentProps) {
-  return <ToastContext.Provider value={props.toastId}>{props.children}</ToastContext.Provider>
+function ToastV2Root(props: ToastV2RootComponentProps) {
+  return <ToastV2Context.Provider value={props.toastId}>{props.children}</ToastV2Context.Provider>
 }
 
-function ToastIcon(props: ComponentProps<"div">) {
+function ToastV2Icon(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-icon" {...props} />
 }
 
-function ToastContent(props: ComponentProps<"div">) {
+function ToastV2Content(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-content" {...props} />
 }
 
-function ToastTitle(props: ComponentProps<"div">) {
+function ToastV2Title(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-title" {...props} />
 }
 
-function ToastDescription(props: ComponentProps<"div">) {
+function ToastV2Description(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-description" {...props} />
 }
 
-function ToastActions(props: ComponentProps<"div">) {
+function ToastV2Actions(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-actions" {...props} />
 }
 
-function ToastCloseButton(props: ComponentProps<"button">) {
+function ToastV2CloseButton(props: ComponentProps<"button">) {
   const i18n = useI18n()
-  const toastId = useContext(ToastContext)
+  const toastId = useContext(ToastV2Context)
   const [local, rest] = splitProps(props, ["children", "onClick"])
   return (
     <button
@@ -110,7 +110,7 @@ function ToastCloseButton(props: ComponentProps<"button">) {
       {...rest}
       onClick={(event) => {
         if (typeof local.onClick === "function") local.onClick(event)
-        if (!event.defaultPrevented && toastId !== undefined) toaster.dismiss(toastId)
+        if (!event.defaultPrevented && toastId !== undefined) toasterV2.dismiss(toastId)
       }}
     >
       {local.children ?? <CloseIcon />}
@@ -127,19 +127,19 @@ function CloseIcon() {
   )
 }
 
-export const Toast = Object.assign(ToastRoot, {
-  Region: ToastRegion,
-  Icon: ToastIcon,
-  Content: ToastContent,
-  Title: ToastTitle,
-  Description: ToastDescription,
-  Actions: ToastActions,
-  CloseButton: ToastCloseButton,
+export const ToastV2 = Object.assign(ToastV2Root, {
+  Region: ToastV2Region,
+  Icon: ToastV2Icon,
+  Content: ToastV2Content,
+  Title: ToastV2Title,
+  Description: ToastV2Description,
+  Actions: ToastV2Actions,
+  CloseButton: ToastV2CloseButton,
 })
 
 let toastV2Id = 0
 
-export const toaster = {
+export const toasterV2 = {
   show(render: (props: { toastId: number }) => JSX.Element, options?: { duration?: number; persistent?: boolean }) {
     const toastId = --toastV2Id
     toast.custom((id) => render({ toastId: Number(id) }), {
@@ -152,43 +152,43 @@ export const toaster = {
   },
   dismiss(toastId?: number) {
     if (toastId === undefined) {
-      activeToastByKey.clear()
-      activeToastById.clear()
+      activeToastV2ByKey.clear()
+      activeToastV2ById.clear()
     } else {
-      releaseToast(activeToastById.get(toastId))
+      releaseToastV2(activeToastV2ById.get(toastId))
     }
     return toast.dismiss(toastId)
   },
 }
 
-export interface ToastAction {
+export interface ToastV2Action {
   label: string
   variant?: "primary" | "secondary"
   onClick: "dismiss" | (() => void)
 }
 
-export interface ToastOptions {
+export interface ToastV2Options {
   title?: string
   description?: string
   icon?: JSX.Element
   variant?: "default" | "success" | "error" | "loading"
   duration?: number
   persistent?: boolean
-  actions?: ToastAction[]
+  actions?: ToastV2Action[]
 }
 
-interface ActiveToast {
+interface ActiveToastV2 {
   id: number
   key: string
-  options: ToastOptions
+  options: ToastV2Options
   actions?: JSX.Element
 }
 
-const activeToastByKey = new Map<string, ActiveToast>()
-const activeToastById = new Map<number, ActiveToast>()
+const activeToastV2ByKey = new Map<string, ActiveToastV2>()
+const activeToastV2ById = new Map<number, ActiveToastV2>()
 
-export function showToast(options: ToastOptions | string) {
-  const opts: ToastOptions = typeof options === "string" ? { description: options } : options
+export function showToastV2(options: ToastV2Options | string) {
+  const opts: ToastV2Options = typeof options === "string" ? { description: options } : options
   const key = JSON.stringify({
     title: opts.title,
     description: opts.description,
@@ -197,29 +197,29 @@ export function showToast(options: ToastOptions | string) {
     persistent: opts.persistent,
     actions: opts.actions?.map((action) => [action.label, action.variant]),
   })
-  const active = activeToastByKey.get(key)
+  const active = activeToastV2ByKey.get(key)
   const toasts = toast.getToasts()
 
   if (active && toasts.at(-1)?.id === active.id) {
     active.options = opts
-    publishToast(active)
-    pulseToast(active.id)
+    publishToastV2(active)
+    pulseToastV2(active.id)
     return active.id
   }
 
-  if (active && toasts.some((item) => item.id === active.id)) toaster.dismiss(active.id)
-  releaseToast(active)
+  if (active && toasts.some((item) => item.id === active.id)) toasterV2.dismiss(active.id)
+  releaseToastV2(active)
 
-  const entry: ActiveToast = { id: --toastV2Id, key, options: opts }
-  entry.actions = createToastActions(entry)
-  activeToastByKey.set(key, entry)
-  activeToastById.set(entry.id, entry)
-  publishToast(entry)
+  const entry: ActiveToastV2 = { id: --toastV2Id, key, options: opts }
+  entry.actions = createToastV2Actions(entry)
+  activeToastV2ByKey.set(key, entry)
+  activeToastV2ById.set(entry.id, entry)
+  publishToastV2(entry)
   return entry.id
 }
 
-function publishToast(entry: ActiveToast) {
-  const release = () => releaseToast(entry)
+function publishToastV2(entry: ActiveToastV2) {
+  const release = () => releaseToastV2(entry)
   toast(entry.options.title ?? "", {
     id: entry.id,
     description: entry.options.description,
@@ -235,12 +235,10 @@ function publishToast(entry: ActiveToast) {
   })
 }
 
-function createToastActions(entry: ActiveToast) {
+function createToastV2Actions(entry: ActiveToastV2) {
   if (!entry.options.actions?.length) return undefined
   return (
-    <Toast.Actions>
-      {/* Static map, not <For>: this JSX is created imperatively outside any Solid
-          root, where a <For> computation would never be disposed. */}
+    <ToastV2.Actions>
       {entry.options.actions.map((action, index) => (
         <button
           type="button"
@@ -251,17 +249,17 @@ function createToastActions(entry: ActiveToast) {
           onClick={() => {
             const onClick = entry.options.actions?.[index]?.onClick
             if (typeof onClick === "function") onClick()
-            toaster.dismiss(entry.id)
+            toasterV2.dismiss(entry.id)
           }}
         >
           {action.label}
         </button>
       ))}
-    </Toast.Actions>
+    </ToastV2.Actions>
   )
 }
 
-function pulseToast(toastId: number) {
+function pulseToastV2(toastId: number) {
   if (typeof document === "undefined" || typeof requestAnimationFrame === "undefined") return
   requestAnimationFrame(() => {
     const element = document.querySelector<HTMLElement>(`[data-testid="toast-v2-${toastId}"]`)
@@ -270,13 +268,13 @@ function pulseToast(toastId: number) {
   })
 }
 
-function releaseToast(entry: ActiveToast | undefined) {
+function releaseToastV2(entry: ActiveToastV2 | undefined) {
   if (!entry) return
-  if (activeToastByKey.get(entry.key) === entry) activeToastByKey.delete(entry.key)
-  if (activeToastById.get(entry.id) === entry) activeToastById.delete(entry.id)
+  if (activeToastV2ByKey.get(entry.key) === entry) activeToastV2ByKey.delete(entry.key)
+  if (activeToastV2ById.get(entry.id) === entry) activeToastV2ById.delete(entry.id)
 }
 
-export interface ToastPromiseOptions<T, U = unknown> {
+export interface ToastV2PromiseOptions<T, U = unknown> {
   loading?: JSX.Element
   success?: (data: T) => JSX.Element
   error?: (error: U) => JSX.Element

package/src/{overlays/tooltip/tooltip.css → v2/components/tooltip-v2.css}

@@ -39,32 +39,6 @@
   }
 }
 
-[data-component="tooltip-v2"][data-appearance="standard"] {
-  display: block;
-  max-width: 320px;
-  padding: 2px 8px;
-  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
-  border-radius: var(--radius-sm);
-  background: var(--surface-float-base);
-  color: var(--text-invert-strong);
-  box-shadow: var(--shadow-md);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-small);
-  font-style: normal;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-large);
-  letter-spacing: var(--letter-spacing-normal);
-  font-variant-numeric: normal;
-  font-variation-settings: normal;
-  user-select: text;
-  animation: none;
-
-  &[data-closed]:not([data-force-open="true"]) {
-    opacity: 0;
-    animation: none;
-  }
-}
-
 @keyframes tooltipV2In {
   from {
     opacity: 0;

package/src/{overlays/tooltip/tooltip.tsx → v2/components/tooltip-v2.tsx}

@@ -1,21 +1,19 @@
-import { Content, Portal, Root, Trigger } from "@kobalte/core/tooltip"
+import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
 import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { createStore } from "solid-js/store"
-import "./tooltip.css"
+import "./tooltip-v2.css"
 
-export interface TooltipProps extends ComponentProps<typeof Root> {
+export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
   value: JSX.Element
-  appearance?: "standard" | "compact"
   class?: string
   contentClass?: string
   contentStyle?: JSX.CSSProperties
   inactive?: boolean
   forceOpen?: boolean
-  triggerTabIndex?: number
 }
 
-export function Tooltip(props: TooltipProps) {
+export function TooltipV2(props: TooltipV2Props) {
   let ref: HTMLDivElement | undefined
   const [state, setState] = createStore({
     open: false,
@@ -24,19 +22,16 @@ export function Tooltip(props: TooltipProps) {
   })
   const [local, others] = splitProps(props, [
     "children",
-    "appearance",
     "class",
     "contentClass",
     "contentStyle",
     "inactive",
     "forceOpen",
-    "triggerTabIndex",
     "ignoreSafeArea",
     "value",
   ])
 
   const close = () => setState("open", false)
-  const controlled = () => local.forceOpen !== undefined
 
   const inside = () => {
     const active = document.activeElement
@@ -91,16 +86,16 @@ export function Tooltip(props: TooltipProps) {
     <Switch>
       <Match when={local.inactive}>{local.children}</Match>
       <Match when={true}>
-        <Root
+        <KobalteTooltip
           gutter={4}
           openDelay={400}
           skipDelayDuration={300}
           {...others}
           closeDelay={0}
           ignoreSafeArea={local.ignoreSafeArea ?? true}
-          open={controlled() ? local.forceOpen : state.open}
+          open={local.forceOpen || state.open}
           onOpenChange={(open) => {
-            if (controlled()) return
+            if (local.forceOpen) return
             if (state.block && open) return
             if (justClickedTrigger) {
               justClickedTrigger = false
@@ -109,10 +104,9 @@ export function Tooltip(props: TooltipProps) {
             setState("open", open)
           }}
         >
-          <Trigger
+          <KobalteTooltip.Trigger
             ref={ref}
             as="div"
-            tabIndex={local.triggerTabIndex}
             data-component="tooltip-v2-trigger"
             class={local.class}
             onPointerDownCapture={arm}
@@ -124,15 +118,14 @@ export function Tooltip(props: TooltipProps) {
             onFocusOut={() => requestAnimationFrame(() => drop())}
           >
             {local.children}
-          </Trigger>
-          <Portal>
-            <Content
+          </KobalteTooltip.Trigger>
+          <KobalteTooltip.Portal>
+            <KobalteTooltip.Content
               ref={(el) => {
                 const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme")
                 if (theme) el.setAttribute("data-theme", theme)
               }}
               data-component="tooltip-v2"
-              data-appearance={local.appearance ?? "compact"}
               data-placement={props.placement}
               data-force-open={local.forceOpen}
               class={local.contentClass}
@@ -145,9 +138,9 @@ export function Tooltip(props: TooltipProps) {
               }}
             >
               {local.value}
-            </Content>
-          </Portal>
-        </Root>
+            </KobalteTooltip.Content>
+          </KobalteTooltip.Portal>
+        </KobalteTooltip>
       </Match>
     </Switch>
   )

package/src/{typography/wordmark/wordmark.tsx → v2/components/wordmark-v2.tsx}

@@ -1,6 +1,6 @@
 import { createUniqueId, type ComponentProps } from "solid-js"
 
-export function Wordmark(props: Pick<ComponentProps<"svg">, "class">) {
+export function WordmarkV2(props: Pick<ComponentProps<"svg">, "class">) {
   const mask = createUniqueId()
   const maskGradient = createUniqueId()
 

package/src/{styles/tokens → v2/styles}/theme.css

@@ -1,4 +1,16 @@
 @layer theme {
+  html[data-theme="oc-2"] body:not([data-new-layout]) {
+    --text-diff-add-base: light-dark(#167517, #c4ffc0);
+    --text-diff-delete-base: light-dark(#fa3012, #ec2f14);
+    --syntax-comment: light-dark(#7a7a7a, #8f8f8f);
+    --syntax-keyword: light-dark(#a753ae, #edb2f1);
+    --syntax-string: #00ceb9;
+    --syntax-primitive: light-dark(#034cff, #8cb0ff);
+    --syntax-property: light-dark(#a753ae, #fab283);
+    --syntax-type: light-dark(#8a6f00, #fcd53a);
+    --syntax-critical: light-dark(#ff8c00, #fab283);
+  }
+
   :root {
     color-scheme: light;
 
@@ -27,7 +39,6 @@
     /* ── Icon ── */
     --v2-icon-icon-base: var(--v2-grey-800);
     --v2-icon-icon-muted: var(--v2-grey-600);
-    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-50);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-600);
@@ -129,12 +140,8 @@
     --v2-illustration-illustration-layer-02: var(--v2-grey-400);
     --v2-illustration-illustration-layer-03: var(--v2-grey-500);
 
-    --font-family-text: var(--font-family-sans);
-    --v2-font-family-sans: var(--font-family-sans);
-    --v2-font-family-code: var(--font-family-mono);
-    --line-height-tight: 12px;
-    --line-height-compact: 16px;
-    --line-height-base: 20px;
+    --font-family-text: "Inter", sans-serif;
+    --v2-font-family-sans: "Inter", sans-serif;
   }
 
   /* OS preference fallback (no JS needed) */
@@ -163,7 +170,6 @@
 
       --v2-icon-icon-base: var(--v2-grey-400);
       --v2-icon-icon-muted: var(--v2-grey-600);
-      --v2-icon-icon-faint: var(--v2-grey-500);
       --v2-icon-icon-inverse: var(--v2-grey-1000);
       --v2-icon-icon-contrast: var(--v2-grey-200);
       --v2-icon-icon-accent: var(--v2-blue-400);
@@ -277,7 +283,6 @@
 
     --v2-icon-icon-base: var(--v2-grey-800);
     --v2-icon-icon-muted: var(--v2-grey-600);
-    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-50);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-600);
@@ -400,7 +405,6 @@
 
     --v2-icon-icon-base: var(--v2-grey-400);
     --v2-icon-icon-muted: var(--v2-grey-600);
-    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-1100);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-400);