{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "realmorphism", "type": "registry:theme", "title": "Realmorphism", "description": "A blocky tactile shadcn/ui theme for operational interfaces, with hard-offset shadows and motion states that communicate action affordance.", "author": "LT Lo TeknowledG", "cssVars": { "theme": { "font-sans": "Inter, sans-serif", "font-serif": "Georgia, serif", "font-mono": "JetBrains Mono, monospace", "radius": "0.5rem", "tracking-normal": "0em", "realmorphism-host": "#060708", "realmorphism-host-raised": "#0e1011", "realmorphism-wall": "#2a6b56", "realmorphism-wall-hover": "#3a9174", "realmorphism-wall-amber": "#8a6530", "realmorphism-wall-amber-hover": "#b8873f", "realmorphism-wall-critical": "#7a2a2a", "realmorphism-wall-critical-hover": "#a83232", "realmorphism-ink-critical": "#fca5a5", "realmorphism-face": "#171c19", "realmorphism-face-border": "#2a3530", "realmorphism-face-active": "#12241c", "realmorphism-face-active-border": "#2f6b52", "realmorphism-ink-on-face": "#e8efeb", "realmorphism-ink-on-face-active": "#d6ffec", "realmorphism-ink-disabled": "#56605c", "realmorphism-glyph-hover": "#a8b8ff", "realmorphism-shadow-rest": "2px 2px 0 1px var(--realmorphism-wall)", "realmorphism-shadow-hover": "4px 4px 0 1px var(--realmorphism-wall-hover)", "realmorphism-shadow-inset-active": "inset 1px 1px 0 0 rgba(16, 185, 129, 0.22)", "realmorphism-field-shadow-cast": "color-mix(in srgb, #1a201d 68%, var(--realmorphism-wall))", "realmorphism-shadow-inset-field": "inset 2px 2px 0 1px var(--realmorphism-field-shadow-cast)" }, "light": { "background": "150 14% 91%", "foreground": "150 14% 7%", "card": "150 16% 96%", "card-foreground": "150 14% 7%", "popover": "150 16% 96%", "popover-foreground": "150 14% 7%", "primary": "162 52% 28%", "primary-foreground": "145 100% 97%", "secondary": "152 22% 82%", "secondary-foreground": "150 14% 7%", "muted": "154 20% 87%", "muted-foreground": "154 8% 35%", "accent": "162 50% 36%", "accent-foreground": "145 100% 97%", "destructive": "0 49% 32%", "destructive-foreground": "0 100% 98%", "border": "160 14% 59%", "input": "150 16% 96%", "ring": "162 50% 36%", "chart-1": "162 52% 28%", "chart-2": "36 49% 36%", "chart-3": "150 10% 19%", "chart-4": "150 4% 47%", "chart-5": "161 43% 40%", "sidebar": "150 14% 7%", "sidebar-foreground": "150 18% 92%", "sidebar-primary": "162 50% 36%", "sidebar-primary-foreground": "145 100% 97%", "sidebar-accent": "150 10% 10%", "sidebar-accent-foreground": "150 18% 92%", "sidebar-border": "150 12% 19%", "sidebar-ring": "161 43% 40%", "realmorphism-ink-disabled": "#8a9690" }, "dark": { "background": "0 0% 3%", "foreground": "150 18% 92%", "card": "195 10% 6%", "card-foreground": "150 18% 92%", "popover": "195 10% 6%", "popover-foreground": "150 18% 92%", "primary": "161 44% 29%", "primary-foreground": "150 18% 92%", "secondary": "150 10% 10%", "secondary-foreground": "150 18% 92%", "muted": "150 10% 10%", "muted-foreground": "150 9% 65%", "accent": "161 43% 40%", "accent-foreground": "150 18% 92%", "destructive": "0 49% 32%", "destructive-foreground": "0 100% 98%", "border": "150 12% 19%", "input": "150 10% 10%", "ring": "161 43% 40%", "chart-1": "161 44% 29%", "chart-2": "36 49% 36%", "chart-3": "147 100% 75%", "chart-4": "150 9% 65%", "chart-5": "45 97% 65%", "sidebar": "0 0% 3%", "sidebar-foreground": "150 18% 92%", "sidebar-primary": "161 44% 29%", "sidebar-primary-foreground": "150 18% 92%", "sidebar-accent": "150 10% 10%", "sidebar-accent-foreground": "150 18% 92%", "sidebar-border": "150 12% 19%", "sidebar-ring": "161 43% 40%" } }, "css": { "@layer components": { ".theme-realmorphism .realmorphism-action": { "position": "relative", "border": "1px solid var(--realmorphism-face-border)", "border-radius": "var(--radius)", "background": "var(--realmorphism-face)", "color": "var(--realmorphism-ink-on-face)", "box-shadow": "var(--realmorphism-shadow-rest)", "transform": "translate(0, 0)", "transition": "transform 150ms ease-out, box-shadow 150ms ease-out, color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out" }, ".theme-realmorphism .realmorphism-action::before": { "content": "\"\"", "position": "absolute", "inset": "-5px", "border-radius": "inherit", "background": "transparent" }, ".theme-realmorphism .realmorphism-action:hover:not(:disabled)": { "transform": "translate(-2px, -2px)", "box-shadow": "var(--realmorphism-shadow-hover)", "color": "var(--realmorphism-glyph-hover)" }, ".theme-realmorphism .realmorphism-action:active:not(:disabled)": { "transform": "translate(4px, 4px)", "box-shadow": "none" }, ".theme-realmorphism .realmorphism-action[aria-pressed=\"true\"], .theme-realmorphism .realmorphism-action[data-state=\"on\"], .theme-realmorphism .realmorphism-action[data-state=\"checked\"], .theme-realmorphism .realmorphism-control[aria-pressed=\"true\"], .theme-realmorphism .realmorphism-control[data-state=\"on\"], .theme-realmorphism .realmorphism-control[data-state=\"checked\"]": { "border-color": "var(--realmorphism-face-active-border)", "background": "var(--realmorphism-face-active)", "color": "var(--realmorphism-ink-on-face-active)", "transform": "translate(2px, 2px)", "box-shadow": "var(--realmorphism-shadow-inset-active)" }, ".theme-realmorphism .realmorphism-action[aria-pressed=\"true\"]:hover:not(:disabled), .theme-realmorphism .realmorphism-action[data-state=\"on\"]:hover:not(:disabled), .theme-realmorphism .realmorphism-action[data-state=\"checked\"]:hover:not(:disabled), .theme-realmorphism .realmorphism-control[aria-pressed=\"true\"]:hover:not(:disabled), .theme-realmorphism .realmorphism-control[data-state=\"on\"]:hover:not(:disabled), .theme-realmorphism .realmorphism-control[data-state=\"checked\"]:hover:not(:disabled)": { "transform": "translate(2px, 2px)", "box-shadow": "var(--realmorphism-shadow-inset-active)", "color": "var(--realmorphism-ink-on-face-active)" }, ".theme-realmorphism .realmorphism-action:disabled, .theme-realmorphism .realmorphism-control:disabled": { "border-color": "color-mix(in srgb, var(--realmorphism-face-border) 72%, var(--realmorphism-host))", "background": "color-mix(in srgb, var(--realmorphism-face) 78%, var(--realmorphism-host))", "color": "var(--realmorphism-ink-disabled)", "box-shadow": "none", "transform": "translate(2px, 2px)", "opacity": "1", "cursor": "not-allowed", "pointer-events": "none" }, ".theme-realmorphism .realmorphism-action.is-critical, .theme-realmorphism .realmorphism-control.is-critical": { "--realmorphism-wall": "var(--realmorphism-wall-critical)", "--realmorphism-wall-hover": "var(--realmorphism-wall-critical-hover)", "box-shadow": "2px 2px 0 1px var(--realmorphism-wall-critical)" }, ".theme-realmorphism .realmorphism-action.is-critical:hover:not(:disabled), .theme-realmorphism .realmorphism-control.is-critical:hover:not(:disabled)": { "box-shadow": "4px 4px 0 1px var(--realmorphism-wall-critical-hover)", "color": "var(--realmorphism-ink-critical)" }, ".theme-realmorphism .realmorphism-panel": { "border": "1px solid var(--realmorphism-face-border)", "border-radius": "var(--radius)", "background": "var(--realmorphism-host-raised)", "color": "var(--realmorphism-ink-on-face)", "box-shadow": "var(--realmorphism-shadow-rest)" }, ".theme-realmorphism .realmorphism-field": { "display": "block", "border": "0", "border-top": "1px solid var(--realmorphism-field-shadow-cast)", "border-left": "1px solid var(--realmorphism-field-shadow-cast)", "border-radius": "var(--radius)", "background": "var(--realmorphism-host)", "color": "var(--realmorphism-ink-on-face)", "box-shadow": "var(--realmorphism-shadow-inset-field)" } }, "@media (prefers-reduced-motion: reduce)": { ".theme-realmorphism .realmorphism-action": { "transition": "none" } } }, "meta": { "doctrine": "The motion is the affordance. Hard-offset shadows and press states communicate that action is available.", "installNote": "Apply the theme class `theme-realmorphism` to the app root. Use `realmorphism-action` / `realmorphism-control` on interactive controls; use `realmorphism-panel` on static raised surfaces.", "disabledNote": "Disabled controls use `--realmorphism-ink-disabled`, stay flat on the surface, and do not lift on hover." } }