{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theme",
  "title": "Dither theme",
  "description": "Retro tokens, phosphor and cyan-pixel palettes, dither, bevel and offset-shadow utilities.",
  "cssVars": {
    "theme": {
      "font-heading": "var(--font-pixel)",
      "font-sans": "var(--font-mono)",
      "font-mono": "var(--font-mono)",
      "font-pixel": "var(--font-pixel)",
      "color-ink-0": "var(--ink-0)",
      "color-ink-1": "var(--ink-1)",
      "color-ink-2": "var(--ink-2)",
      "color-ink-3": "var(--ink-3)",
      "color-desktop": "var(--desktop)",
      "color-bevel-hi": "var(--bevel-hi)",
      "color-bevel-lo": "var(--bevel-lo)",
      "color-well": "var(--well)",
      "color-well-foreground": "var(--well-foreground)",
      "color-well-muted": "var(--well-muted)",
      "color-well-fill": "var(--well-fill)",
      "color-titlebar": "var(--titlebar)",
      "color-titlebar-foreground": "var(--titlebar-foreground)",
      "color-sidebar-ring": "var(--sidebar-ring)",
      "color-sidebar-border": "var(--sidebar-border)",
      "color-sidebar-accent-foreground": "var(--sidebar-accent-foreground)",
      "color-sidebar-accent": "var(--sidebar-accent)",
      "color-sidebar-primary-foreground": "var(--sidebar-primary-foreground)",
      "color-sidebar-primary": "var(--sidebar-primary)",
      "color-sidebar-foreground": "var(--sidebar-foreground)",
      "color-sidebar": "var(--sidebar)",
      "color-chart-5": "var(--chart-5)",
      "color-chart-4": "var(--chart-4)",
      "color-chart-3": "var(--chart-3)",
      "color-chart-2": "var(--chart-2)",
      "color-chart-1": "var(--chart-1)",
      "color-ring": "var(--ring)",
      "color-input": "var(--input)",
      "color-border": "var(--border)",
      "color-destructive": "var(--destructive)",
      "color-accent-foreground": "var(--accent-foreground)",
      "color-accent": "var(--accent)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-muted": "var(--muted)",
      "color-secondary-foreground": "var(--secondary-foreground)",
      "color-secondary": "var(--secondary)",
      "color-primary-foreground": "var(--primary-foreground)",
      "color-primary": "var(--primary)",
      "color-popover-foreground": "var(--popover-foreground)",
      "color-popover": "var(--popover)",
      "color-card-foreground": "var(--card-foreground)",
      "color-card": "var(--card)",
      "color-foreground": "var(--foreground)",
      "color-background": "var(--background)",
      "radius-sm": "calc(var(--radius) * 0.6)",
      "radius-md": "calc(var(--radius) * 0.8)",
      "radius-lg": "var(--radius)",
      "radius-xl": "calc(var(--radius) * 1.4)",
      "radius-2xl": "calc(var(--radius) * 1.8)",
      "radius-3xl": "calc(var(--radius) * 2.2)",
      "radius-4xl": "calc(var(--radius) * 2.6)"
    },
    "light": {
      "ink-0": "#20231a",
      "ink-1": "#4b5036",
      "ink-2": "#888c62",
      "ink-3": "#c4c79d",
      "ink-4": "#eeefc8",
      "desktop": "#a7ab7f",
      "wallpaper-0": "var(--ink-0)",
      "wallpaper-1": "var(--ink-1)",
      "wallpaper-2": "var(--desktop)",
      "wallpaper-3": "var(--ink-4)",
      "titlebar": "var(--ink-0)",
      "titlebar-foreground": "var(--ink-3)",
      "bevel-hi": "var(--ink-3)",
      "bevel-lo": "var(--ink-1)",
      "bevel-glint": "var(--ink-4)",
      "bevel-shade": "var(--ink-2)",
      "well": "var(--ink-1)",
      "well-foreground": "var(--ink-3)",
      "well-muted": "var(--ink-2)",
      "well-rim": "var(--ink-0)",
      "well-fill": "var(--ink-4)",
      "keycap": "var(--ink-1)",
      "keycap-foreground": "var(--ink-3)",
      "keycap-wall-hi": "var(--ink-2)",
      "keycap-wall-lo": "var(--ink-0)",
      "keycap-outline": "var(--ink-0)",
      "pixel": "2px",
      "font-pixel": "var(--font-display), \"Silkscreen\", ui-monospace, monospace",
      "font-mono": "var(--font-body), \"VT323\", ui-monospace, monospace",
      "background": "var(--desktop)",
      "foreground": "var(--ink-0)",
      "card": "var(--ink-3)",
      "card-foreground": "var(--ink-0)",
      "popover": "var(--ink-3)",
      "popover-foreground": "var(--ink-0)",
      "primary": "var(--ink-0)",
      "primary-foreground": "var(--ink-3)",
      "secondary": "var(--ink-2)",
      "secondary-foreground": "var(--ink-0)",
      "muted": "var(--ink-2)",
      "muted-foreground": "var(--ink-1)",
      "accent": "var(--ink-1)",
      "accent-foreground": "var(--ink-3)",
      "destructive": "var(--ink-0)",
      "border": "var(--ink-0)",
      "input": "var(--ink-4)",
      "ring": "var(--ink-0)",
      "chart-1": "var(--ink-0)",
      "chart-2": "var(--ink-1)",
      "chart-3": "var(--ink-2)",
      "chart-4": "var(--ink-3)",
      "chart-5": "var(--desktop)",
      "radius": "0rem",
      "sidebar": "var(--ink-3)",
      "sidebar-foreground": "var(--ink-0)",
      "sidebar-primary": "var(--ink-0)",
      "sidebar-primary-foreground": "var(--ink-3)",
      "sidebar-accent": "var(--ink-2)",
      "sidebar-accent-foreground": "var(--ink-0)",
      "sidebar-border": "var(--ink-0)",
      "sidebar-ring": "var(--ink-0)"
    },
    "dark": {
      "ink-0": "#10120b",
      "ink-1": "#2c301f",
      "ink-2": "#6a714a",
      "ink-3": "#b5bc87",
      "ink-4": "#474830",
      "desktop": "#1a1d12",
      "wallpaper-0": "var(--ink-3)",
      "wallpaper-1": "var(--ink-2)",
      "wallpaper-2": "var(--ink-1)",
      "wallpaper-3": "var(--desktop)",
      "titlebar": "var(--ink-2)",
      "titlebar-foreground": "var(--ink-0)",
      "keycap": "var(--ink-2)",
      "keycap-foreground": "var(--ink-0)",
      "keycap-wall-hi": "var(--ink-3)",
      "keycap-wall-lo": "var(--ink-1)",
      "keycap-outline": "var(--ink-0)",
      "bevel-hi": "var(--ink-2)",
      "bevel-lo": "var(--ink-0)",
      "bevel-glint": "var(--ink-3)",
      "bevel-shade": "var(--ink-3)",
      "well": "var(--ink-0)",
      "well-foreground": "var(--ink-3)",
      "well-muted": "var(--ink-2)",
      "well-rim": "var(--ink-2)",
      "well-fill": "var(--ink-3)",
      "background": "var(--desktop)",
      "foreground": "var(--ink-3)",
      "card": "var(--ink-0)",
      "card-foreground": "var(--ink-3)",
      "popover": "var(--ink-0)",
      "popover-foreground": "var(--ink-3)",
      "primary": "var(--ink-3)",
      "primary-foreground": "var(--ink-0)",
      "secondary": "var(--ink-1)",
      "secondary-foreground": "var(--ink-3)",
      "muted": "var(--ink-1)",
      "muted-foreground": "var(--ink-2)",
      "accent": "var(--ink-2)",
      "accent-foreground": "var(--ink-0)",
      "destructive": "var(--ink-3)",
      "border": "var(--ink-3)",
      "input": "var(--ink-4)",
      "ring": "var(--ink-3)",
      "chart-1": "var(--ink-3)",
      "chart-2": "var(--ink-2)",
      "chart-3": "var(--ink-1)",
      "chart-4": "var(--ink-0)",
      "chart-5": "var(--desktop)",
      "sidebar": "var(--ink-0)",
      "sidebar-foreground": "var(--ink-3)",
      "sidebar-primary": "var(--ink-3)",
      "sidebar-primary-foreground": "var(--ink-0)",
      "sidebar-accent": "var(--ink-1)",
      "sidebar-accent-foreground": "var(--ink-3)",
      "sidebar-border": "var(--ink-3)",
      "sidebar-ring": "var(--ink-3)"
    }
  },
  "css": {
    "[data-theme=\"cyan-pixel\"]": {
      "--ink-0": "#111111",
      "--ink-1": "#4a4a43",
      "--ink-2": "#a9a491",
      "--ink-3": "#efe8d5",
      "--ink-4": "rgb(187, 181, 164)",
      "--desktop": "#8ed5f6",
      "--wallpaper-0": "#75bee0",
      "--wallpaper-1": "#69a5c1",
      "--wallpaper-2": "var(--desktop)",
      "--wallpaper-3": "var(--wallpaper-0)",
      "--titlebar": "var(--ink-3)",
      "--titlebar-foreground": "var(--ink-0)"
    },
    "[data-theme=\"cyan-pixel\"]:not(.dark)": {
      "--bevel-shade": "var(--ink-4)"
    },
    ".dark[data-theme=\"cyan-pixel\"]": {
      "--ink-0": "#0a0d10",
      "--ink-1": "#243139",
      "--ink-2": "#7b8e95",
      "--ink-3": "#e5eee7",
      "--ink-4": "#455b64",
      "--desktop": "#0b4d70",
      "--wallpaper-0": "#1b495f",
      "--wallpaper-1": "#103246",
      "--wallpaper-2": "#0b4d70",
      "--wallpaper-3": "#083c57",
      "--titlebar": "var(--ink-3)",
      "--titlebar-foreground": "var(--ink-0)"
    },
    "[data-theme=\"retro-candy\"]": {
      "--ink-0": "#231A21",
      "--ink-1": "#50364A",
      "--ink-2": "#e597b4",
      "--ink-3": "#f1cfdf",
      "--ink-4": "#fdf3f8",
      "--desktop": "#daf7c7",
      "--titlebar": "var(--ink-2)",
      "--titlebar-foreground": "var(--ink-0)",
      "--muted": "#caaebb"
    },
    ".dark[data-theme=\"retro-candy\"]": {
      "--ink-0": "#1c1217",
      "--ink-1": "#3d2631",
      "--ink-2": "#b8668a",
      "--ink-3": "#f1cfdf",
      "--ink-4": "#643f53",
      "--desktop": "#253024",
      "--titlebar": "var(--ink-2)",
      "--titlebar-foreground": "var(--ink-0)",
      "--muted": "var(--ink-1)",
      "--muted-foreground": "#6d4c5b"
    },
    "[data-theme=\"soul-green\"]": {
      "--ink-0": "#10392d",
      "--ink-1": "#2d5343",
      "--ink-2": "#c8e597",
      "--ink-3": "#e0e4c5",
      "--ink-4": "#f0f3d9",
      "--desktop": "#f0f7c7",
      "--titlebar": "var(--ink-2)",
      "--titlebar-foreground": "var(--ink-0)",
      "--muted": "#bbcaae",
      "--bevel-lo": "var(--ink-1)",
      "--well-muted": "var(--muted)"
    },
    ".dark[data-theme=\"soul-green\"]": {
      "--ink-0": "#1d3f32",
      "--ink-1": "#1b2b16",
      "--ink-2": "#d0f1be",
      "--ink-3": "#bac994",
      "--ink-4": "#0c0c4b",
      "--desktop": "#1d231d",
      "--titlebar": "var(--ink-2)",
      "--titlebar-foreground": "var(--ink-0)",
      "--muted": "#2b3423",
      "--muted-foreground": "#56684a",
      "--bevel-lo": "var(--ink-4)",
      "--bevel-hi": "var(--ink-4)",
      "--well-muted": "var(--ink-1)"
    },
    "[data-theme=\"95\"]": {
      "--ink-0": "#000000",
      "--ink-1": "#808080",
      "--ink-2": "#a0a0a0",
      "--ink-3": "#c0c0c0",
      "--ink-4": "#ffffff",
      "--desktop": "#aaaaaa",
      "--titlebar": "#000080",
      "--titlebar-foreground": "var(--ink-4)",
      "--wallpaper-0": "#008080",
      "--wallpaper-1": "rgb(1, 117, 117)",
      "--wallpaper-2": "#008080",
      "--wallpaper-3": "rgb(1, 136, 136)",
      "--keycap": "var(--ink-3)",
      "--keycap-foreground": "var(--ink-0)",
      "--keycap-wall-hi": "var(--ink-4)",
      "--keycap-wall-lo": "var(--ink-1)",
      "--keycap-outline": "var(--ink-0)"
    },
    ".dark[data-theme=\"95\"]": {
      "--ink-0": "#000000",
      "--ink-1": "#404040",
      "--ink-2": "#808080",
      "--ink-3": "#c0c0c0",
      "--ink-4": "#606060",
      "--desktop": "#333333",
      "--titlebar": "#000080",
      "--titlebar-foreground": "var(--ink-3)",
      "--wallpaper-0": "#004040",
      "--wallpaper-1": "#045353",
      "--wallpaper-2": "#024a4a",
      "--wallpaper-3": "var(--wallpaper-0)",
      "--keycap": "var(--ink-2)",
      "--keycap-foreground": "var(--ink-0)",
      "--keycap-wall-hi": "var(--ink-3)",
      "--keycap-wall-lo": "var(--ink-1)"
    },
    "@utility dither-25": {
      "mask-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E\")",
      "mask-size": "calc(var(--pixel) * 4) calc(var(--pixel) * 4)",
      "mask-repeat": "repeat"
    },
    "@utility dither-50": {
      "mask-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E\")",
      "mask-size": "calc(var(--pixel) * 4) calc(var(--pixel) * 4)",
      "mask-repeat": "repeat"
    },
    "@utility dither-75": {
      "mask-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='1' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='1' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E\")",
      "mask-size": "calc(var(--pixel) * 4) calc(var(--pixel) * 4)",
      "mask-repeat": "repeat"
    },
    "@utility stripes": {
      "background-color": "currentColor",
      "mask-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 2' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E\")",
      "mask-size": "100% calc(var(--pixel) * 2)",
      "mask-repeat": "repeat-y"
    },
    "@utility segments": {
      "mask-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Crect width='2' height='1'/%3E%3C/svg%3E\")",
      "mask-size": "calc(var(--pixel) * 3) 100%",
      "mask-repeat": "repeat-x"
    },
    "@utility pixel-border": {
      "border-style": "solid",
      "border-width": "var(--pixel)"
    },
    "@utility bevel-raised": {
      "--bevel-shadow": "inset calc(var(--pixel) * -1) calc(var(--pixel) * -1) 0 0 var(--bevel-lo), inset var(--pixel) var(--pixel) 0 0 var(--bevel-glint)",
      "box-shadow": "var(--offset-shadow, 0 0 0 0 transparent), var(--bevel-shadow)"
    },
    "@utility bevel-sunken": {
      "--bevel-shadow": "inset var(--pixel) var(--pixel) 0 0 var(--bevel-lo), inset calc(var(--pixel) * -1) calc(var(--pixel) * -1) 0 0 var(--bevel-glint)",
      "box-shadow": "var(--offset-shadow, 0 0 0 0 transparent), var(--bevel-shadow)"
    },
    "@utility well": {
      "background-color": "var(--well)",
      "color": "var(--well-foreground)",
      "box-shadow": "inset var(--pixel) var(--pixel) 0 0 var(--well-rim), var(--pixel) var(--pixel) 0 0 var(--bevel-shade)"
    },
    "@utility dither-shadow": {
      "&::before": {
        "content": "\"\"",
        "position": "absolute",
        "inset": "calc(var(--pixel) * -1)",
        "translate": "calc(var(--pixel) * 3) calc(var(--pixel) * 3)",
        "background-color": "var(--foreground)",
        "mask-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E\")",
        "mask-size": "calc(var(--pixel) * 4) calc(var(--pixel) * 4)",
        "clip-path": "polygon(calc(100% - var(--pixel) * 3) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - var(--pixel) * 3), calc(100% - var(--pixel) * 3) calc(100% - var(--pixel) * 3))",
        "pointer-events": "none"
      }
    },
    "@utility bevel-frame": {
      "&::after": {
        "content": "\"\"",
        "position": "absolute",
        "inset": "0",
        "z-index": "1",
        "box-shadow": "inset var(--pixel) var(--pixel) 0 0 var(--bevel-glint), inset calc(var(--pixel) * -1) calc(var(--pixel) * -1) 0 0 var(--bevel-lo)",
        "pointer-events": "none"
      }
    },
    "@utility offset-shadow-*": {
      "--offset-shadow": "calc(var(--pixel) * --value(integer)) calc(var(--pixel) * --value(integer)) 0 0 var(--foreground)",
      "box-shadow": "var(--offset-shadow), var(--bevel-shadow, 0 0 0 0 transparent)"
    },
    "@utility offset-shadow-none": {
      "--offset-shadow": "0 0 0 0 transparent",
      "box-shadow": "var(--offset-shadow), var(--bevel-shadow, 0 0 0 0 transparent)"
    },
    "@utility pixelated": {
      "image-rendering": "pixelated"
    },
    "@utility animate-blink": {
      "animation": "blink 1s steps(1, end) infinite"
    },
    "@keyframes blink": {
      "50%": {
        "opacity": "0"
      }
    },
    "@layer base": {
      "*": {
        "@apply border-border outline-ring": {}
      },
      "html": {
        "@apply font-mono": {},
        "-webkit-font-smoothing": "none",
        "-moz-osx-font-smoothing": "unset",
        "font-smooth": "never"
      },
      "body": {
        "@apply bg-background text-foreground text-lg leading-tight": {}
      },
      "::selection": {
        "background-color": "var(--foreground)",
        "color": "var(--background)"
      },
      "canvas,\n  img": {
        "image-rendering": "pixelated"
      },
      ":where(button, select, summary, label[for], [role=\"button\"], [role=\"tab\"], [role=\"checkbox\"], [role=\"radio\"], [role=\"switch\"], [role=\"slider\"], [role=\"option\"], [role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"], input:is([type=\"checkbox\"], [type=\"radio\"], [type=\"range\"], [type=\"file\"], [type=\"color\"], [type=\"submit\"], [type=\"button\"], [type=\"reset\"]))": {
        "cursor": "pointer"
      },
      ":where(button, select, input, [role]):where(:disabled, [aria-disabled=\"true\"], [data-disabled])": {
        "cursor": "default"
      },
      "[data-vaul-drawer],\n  [data-vaul-overlay],\n  [data-sonner-toast]": {
        "transition": "none",
        "animation": "none"
      },
      ":focus-visible": {
        "outline-style": "dashed",
        "outline-width": "var(--pixel)",
        "outline-offset": "var(--pixel)"
      }
    }
  },
  "docs": "The default look pairs Silkscreen for titles and labels with VT323 for body text, both free on Google Fonts. Load those, or any pixel display font and monospace body font you prefer, and expose them as --font-display and --font-body (with next/font/google, pass them as the variable option). The data-theme attribute on <html> picks the palette, and the dark class switches it to dark mode.",
  "type": "registry:style"
}