@codenhub/styles 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/aesthetics/chunky-tile.css +1 -1
- package/dist/aesthetics/cyber.css +1 -0
- package/dist/aesthetics/glass.css +1 -1
- package/dist/aesthetics/index.css +1 -1
- package/dist/aesthetics/neobrutalism.css +1 -1
- package/dist/aesthetics/pixel.css +1 -1
- package/dist/components.css +1 -1
- package/dist/index.css +1 -1
- package/dist/native.css +1 -1
- package/dist/tw/aesthetics/chunky-tile.css +71 -0
- package/dist/tw/aesthetics/cyber.css +190 -0
- package/dist/tw/aesthetics/glass.css +46 -0
- package/dist/tw/aesthetics/index.css +1 -0
- package/dist/tw/aesthetics/neobrutalism.css +53 -0
- package/dist/tw/aesthetics/pixel.css +48 -0
- package/dist/tw/box.css +7 -0
- package/dist/tw/components/button.css +3 -0
- package/dist/tw/components/feedback.css +13 -5
- package/dist/tw/components/form.css +16 -5
- package/dist/tw/components/tooltip.css +1 -1
- package/dist/tw/utilities/content.css +2 -2
- package/docs/changelog/0.4.0.md +12 -0
- package/docs/changelog/index.md +1 -0
- package/docs/concepts.md +5 -5
- package/docs/index.md +2 -2
- package/docs/setup.md +3 -3
- package/docs/usage/aesthetics.md +75 -1
- package/docs/usage/customizing.md +57 -42
- package/llms-full.txt +151 -52
- package/package.json +12 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}.chunky-tile .btn.icon.dense,.chunky-tile .btn.icon.p-xs{--ui-shadow-y:2px}
|
|
1
|
+
.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}.chunky-tile .btn.icon.dense,.chunky-tile .btn.icon.p-xs{--ui-shadow-y:2px}.chunky-tile-solo{--_tile-lift:var(--tile-lift,4px);--_tile-ink:light-dark(var(--color-neutral-400,oklch(70.8% 0 0)),var(--color-neutral-600,oklch(43.9% 0 0)));--_tile-bar:color-mix(in oklab, var(--_tile-ink) 72%, #000);border:2px solid var(--_tile-ink);border-radius:var(--tile-radius,.75rem);box-shadow:0 var(--_tile-lift) 0 0 var(--_tile-bar);font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif));transition:box-shadow var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1)), transform var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1))}.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){letter-spacing:.04em;font-weight:800}.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){box-shadow:0 0 0 0 var(--_tile-bar);transform:translateY(var(--_tile-lift))}@media (prefers-reduced-motion:reduce){.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){transform:none}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.cyber{--_cyber-cut:var(--cyber-cut,.625rem);--_cyber-glow:var(--cyber-glow,8px);--_cyber-shape:var(--cyber-shape,min(var(--_cyber-cut), 25%) 0 / min(var(--_cyber-cut), 25%) 0);--_cyber-shape-surface:var(--cyber-shape-surface,0 min(var(--_cyber-cut), 25%) / 0 min(var(--_cyber-cut), 25%));--ui-ink:var(--cyber-ink,light-dark(var(--color-neutral-950),var(--color-neutral-50)));--ui-corner-shape:bevel;--ui-radius:var(--_cyber-shape);--ui-radius-surface:var(--_cyber-shape-surface);--ui-radius-pill:calc(infinity * 1px);--ui-radius-tight:0;--ui-border-width:1px;--ui-border-max:100px;--elevation-color:transparent;--ui-shadow-ink:40%;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:var(--_cyber-glow);--ui-shadow-spread:0px;--ui-hover-transform:none;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:scale(.97);--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}@supports not (corner-shape:bevel){.cyber{--ui-radius:0;--ui-radius-surface:0}}@media (prefers-reduced-motion:reduce){.cyber{--ui-active-transform:none}}.cyber-solo{--_cyber-ink:var(--cyber-ink,light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0))));border:1px solid var(--_cyber-ink);border-radius:var(--cyber-shape-surface,0 min(var(--cyber-cut,.625rem), 25%) / 0 min(var(--cyber-cut,.625rem), 25%));corner-shape:bevel;box-shadow:0 0 var(--cyber-glow,8px) 0 color-mix(in oklab, var(--_cyber-ink) 40%, transparent);font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);transition:transform var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1))}.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--cyber-shape,min(var(--cyber-cut,.625rem), 25%) 0 / min(var(--cyber-cut,.625rem), 25%) 0)}@supports not (corner-shape:bevel){.cyber-solo,.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:0}}.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){transform:scale(.97)}@media (prefers-reduced-motion:reduce){.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){transform:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.glass{--ui-radius:var(--glass-radius,.75rem);--ui-radius-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-bg-alpha:.8;--ui-backdrop:blur(14px) saturate(1.6);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-surface-ground:color-mix(in srgb, var(--color-background) 45%, transparent);--ui-surface-shadow:0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);--ui-clip:none;--ui-clip-tight:none;--ui-shadow-edge:initial;--ui-hover-transform:none;--ui-active-transform:none}@media (prefers-reduced-transparency:reduce){.glass{--ui-bg-alpha:1;--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}
|
|
1
|
+
.glass{--ui-radius:var(--glass-radius,.75rem);--ui-radius-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-bg-alpha:.8;--ui-backdrop:blur(14px) saturate(1.6);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-surface-ground:color-mix(in srgb, var(--color-background) 45%, transparent);--ui-surface-shadow:0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-shadow-edge:initial;--ui-hover-transform:none;--ui-active-transform:none}@media (prefers-reduced-transparency:reduce){.glass{--ui-bg-alpha:1;--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}.glass-solo{background-color:color-mix(in srgb, var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))) 45%, transparent);border-radius:var(--glass-radius-surface,1rem);-webkit-backdrop-filter:blur(14px)saturate(1.6);backdrop-filter:blur(14px)saturate(1.6);border:1px solid light-dark(#ffffffa6,#ffffff38);box-shadow:0 1px 2px -1px light-dark(#0f172a14,#0000008c),0 18px 40px -16px light-dark(#0f172a14,#0000008c)}@media (prefers-reduced-transparency:reduce){.glass-solo{background-color:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)));-webkit-backdrop-filter:none;backdrop-filter:none}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-shadow-ink:100%;--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translate(var(--_neo-offset), var(--_neo-offset));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none}.neobrutalism .alert{--_d-elevation:1}.glass{--ui-radius:var(--glass-radius,.75rem);--ui-radius-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-bg-alpha:.8;--ui-backdrop:blur(14px) saturate(1.6);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-surface-ground:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.glass{--ui-surface-ground:color-mix(in srgb, var(--color-background) 45%, transparent)}}.glass{--ui-surface-shadow:0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);--ui-clip:none;--ui-clip-tight:none;--ui-shadow-edge:initial;--ui-hover-transform:none;--ui-active-transform:none}@media (prefers-reduced-transparency:reduce){.glass{--ui-bg-alpha:1;--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-focus-inset:calc(var(--_pixel-unit) + var(--focus-ring-width));--ui-clip:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));--ui-clip-tight:none;--ui-hover-transform:none;--ui-active-transform:none;--ui-backdrop:none;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}.chunky-tile .btn.icon.dense,.chunky-tile .btn.icon.p-xs{--ui-shadow-y:2px}
|
|
2
|
+
.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-shadow-ink:100%;--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translate(var(--_neo-offset), var(--_neo-offset));--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none}.neobrutalism .alert{--_d-elevation:1}.neobrutalism-solo{--_neo-offset:var(--neo-offset,4px);--_neo-ink:light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0)));border:2px solid var(--_neo-ink);box-shadow:var(--_neo-offset) var(--_neo-offset) 0 0 var(--_neo-ink);transition:box-shadow var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1)), transform var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1));border-radius:0}.neobrutalism-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){box-shadow:0 0 0 0 var(--_neo-ink);transform:translate(var(--_neo-offset), var(--_neo-offset))}@media (prefers-reduced-motion:reduce){.neobrutalism-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){transform:none}}.glass{--ui-radius:var(--glass-radius,.75rem);--ui-radius-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-bg-alpha:.8;--ui-backdrop:blur(14px) saturate(1.6);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-surface-ground:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.glass{--ui-surface-ground:color-mix(in srgb, var(--color-background) 45%, transparent)}}.glass{--ui-surface-shadow:0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-shadow-edge:initial;--ui-hover-transform:none;--ui-active-transform:none}@media (prefers-reduced-transparency:reduce){.glass{--ui-bg-alpha:1;--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}.glass-solo{background-color:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)))}@supports (color:color-mix(in lab, red, red)){.glass-solo{background-color:color-mix(in srgb, var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0))) 45%, transparent)}}.glass-solo{border-radius:var(--glass-radius-surface,1rem);-webkit-backdrop-filter:blur(14px)saturate(1.6);backdrop-filter:blur(14px)saturate(1.6);border:1px solid light-dark(#ffffffa6,#ffffff38);box-shadow:0 1px 2px -1px light-dark(#0f172a14,#0000008c),0 18px 40px -16px light-dark(#0f172a14,#0000008c)}@media (prefers-reduced-transparency:reduce){.glass-solo{background-color:var(--color-background,light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0)));-webkit-backdrop-filter:none;backdrop-filter:none}}.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-focus-inset:calc(var(--_pixel-unit) + var(--focus-ring-width));--ui-clip:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-hover-transform:none;--ui-active-transform:none;--ui-backdrop:none;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}.pixel-solo{--_pixel-unit:var(--pixel-unit,4px);--_pixel-ink:light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0)));box-shadow:inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink);clip-path:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);border:0;border-radius:0}.pixel-solo:focus-visible{box-shadow:inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink), inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width,3px)) var(--focus-ring,var(--_pixel-ink))}@supports (color:color-mix(in lab, red, red)){.pixel-solo:focus-visible{box-shadow:inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink), inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width,3px)) var(--focus-ring,color-mix(in srgb, var(--_pixel-ink) 64%, transparent))}}.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}.chunky-tile .btn.icon.dense,.chunky-tile .btn.icon.p-xs{--ui-shadow-y:2px}.chunky-tile-solo{--_tile-lift:var(--tile-lift,4px);--_tile-ink:light-dark(var(--color-neutral-400,oklch(70.8% 0 0)),var(--color-neutral-600,oklch(43.9% 0 0)));--_tile-bar:var(--_tile-ink)}@supports (color:color-mix(in lab, red, red)){.chunky-tile-solo{--_tile-bar:color-mix(in oklab, var(--_tile-ink) 72%, #000)}}.chunky-tile-solo{border:2px solid var(--_tile-ink);border-radius:var(--tile-radius,.75rem);box-shadow:0 var(--_tile-lift) 0 0 var(--_tile-bar);font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif));transition:box-shadow var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1)), transform var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1))}.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){letter-spacing:.04em;font-weight:800}.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){box-shadow:0 0 0 0 var(--_tile-bar);transform:translateY(var(--_tile-lift))}@media (prefers-reduced-motion:reduce){.chunky-tile-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){transform:none}}.cyber{--_cyber-cut:var(--cyber-cut,.625rem);--_cyber-glow:var(--cyber-glow,8px);--_cyber-shape:var(--cyber-shape,min(var(--_cyber-cut), 25%) 0 / min(var(--_cyber-cut), 25%) 0);--_cyber-shape-surface:var(--cyber-shape-surface,0 min(var(--_cyber-cut), 25%) / 0 min(var(--_cyber-cut), 25%));--ui-ink:var(--cyber-ink,light-dark(var(--color-neutral-950),var(--color-neutral-50)));--ui-corner-shape:bevel;--ui-radius:var(--_cyber-shape);--ui-radius-surface:var(--_cyber-shape-surface);--ui-radius-pill:calc(infinity * 1px);--ui-radius-tight:0;--ui-border-width:1px;--ui-border-max:100px;--elevation-color:transparent;--ui-shadow-ink:40%;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:var(--_cyber-glow);--ui-shadow-spread:0px;--ui-hover-transform:none;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:scale(.97);--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}@supports not (corner-shape:bevel){.cyber{--ui-radius:0;--ui-radius-surface:0}}@media (prefers-reduced-motion:reduce){.cyber{--ui-active-transform:none}}.cyber-solo{--_cyber-ink:var(--cyber-ink,light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0))));border:1px solid var(--_cyber-ink);border-radius:var(--cyber-shape-surface,0 min(var(--cyber-cut,.625rem), 25%) / 0 min(var(--cyber-cut,.625rem), 25%));corner-shape:bevel;box-shadow:0 0 var(--cyber-glow,8px) 0 var(--_cyber-ink)}@supports (color:color-mix(in lab, red, red)){.cyber-solo{box-shadow:0 0 var(--cyber-glow,8px) 0 color-mix(in oklab, var(--_cyber-ink) 40%, transparent)}}.cyber-solo{font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);transition:transform var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1))}.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--cyber-shape,min(var(--cyber-cut,.625rem), 25%) 0 / min(var(--cyber-cut,.625rem), 25%) 0)}@supports not (corner-shape:bevel){.cyber-solo,.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:0}}.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){transform:scale(.97)}@media (prefers-reduced-motion:reduce){.cyber-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){transform:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-shadow-ink:100%;--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translate(var(--_neo-offset), var(--_neo-offset));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none}.neobrutalism .alert{--_d-elevation:1}
|
|
1
|
+
.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-shadow-ink:100%;--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translate(var(--_neo-offset), var(--_neo-offset));--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none}.neobrutalism .alert{--_d-elevation:1}.neobrutalism-solo{--_neo-offset:var(--neo-offset,4px);--_neo-ink:light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0)));border:2px solid var(--_neo-ink);box-shadow:var(--_neo-offset) var(--_neo-offset) 0 0 var(--_neo-ink);transition:box-shadow var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1)), transform var(--motion-duration-normal,.2s) var(--motion-ease,cubic-bezier(.2, 0, 0, 1));border-radius:0}.neobrutalism-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){box-shadow:0 0 0 0 var(--_neo-ink);transform:translate(var(--_neo-offset), var(--_neo-offset))}@media (prefers-reduced-motion:reduce){.neobrutalism-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]):active:not(:disabled,[aria-disabled=true]){transform:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-focus-inset:calc(var(--_pixel-unit) + var(--focus-ring-width));--ui-clip:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));--ui-clip-tight:none;--ui-hover-transform:none;--ui-active-transform:none;--ui-backdrop:none;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}
|
|
1
|
+
.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-focus-inset:calc(var(--_pixel-unit) + var(--focus-ring-width));--ui-clip:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-hover-transform:none;--ui-active-transform:none;--ui-backdrop:none;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}.pixel-solo{--_pixel-unit:var(--pixel-unit,4px);--_pixel-ink:light-dark(var(--color-neutral-950,oklch(14.5% 0 0)),var(--color-neutral-50,oklch(98.5% 0 0)));box-shadow:inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink);clip-path:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);border:0;border-radius:0}.pixel-solo:focus-visible{box-shadow:inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink), inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width,3px)) var(--focus-ring,color-mix(in srgb, var(--_pixel-ink) 64%, transparent))}
|