@codenhub/styles 0.4.0 → 0.5.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/README.md +1 -1
- package/dist/aesthetics/chunky-tile.css +1 -1
- package/dist/aesthetics/cyber.css +1 -1
- 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/aesthetics/sketch.css +1 -0
- package/dist/components.css +1 -1
- package/dist/index.css +1 -1
- package/dist/native.css +1 -1
- package/dist/palette.css +1 -1
- package/dist/theme.css +1 -1
- package/dist/tw/aesthetics/chunky-tile.css +142 -126
- package/dist/tw/aesthetics/cyber.css +132 -95
- package/dist/tw/aesthetics/glass.css +97 -56
- package/dist/tw/aesthetics/index.css +1 -0
- package/dist/tw/aesthetics/neobrutalism.css +99 -52
- package/dist/tw/aesthetics/pixel.css +127 -87
- package/dist/tw/aesthetics/sketch.css +326 -0
- package/dist/tw/box.css +100 -35
- package/dist/tw/components/button.css +40 -22
- package/dist/tw/components/feedback.css +29 -14
- package/dist/tw/components/form.css +151 -155
- package/dist/tw/components/index.css +15 -3
- package/dist/tw/components/loader.css +34 -25
- package/dist/tw/components/surface.css +28 -71
- package/dist/tw/components/tooltip.css +20 -10
- package/dist/tw/corner.css +26 -0
- package/dist/tw/elevation.css +8 -9
- package/dist/tw/intent.css +17 -9
- package/dist/tw/native.css +45 -39
- package/dist/tw/palette.css +452 -446
- package/dist/tw/presentation.css +9 -4
- package/dist/tw/surface.css +62 -0
- package/dist/tw/theme.css +106 -75
- package/dist/tw/utilities/content.css +25 -16
- package/dist/tw/utilities/layout.css +2 -2
- package/docs/accessibility.md +16 -16
- package/docs/changelog/0.5.0.md +38 -0
- package/docs/changelog/index.md +1 -0
- package/docs/index.md +3 -3
- package/docs/setup.md +23 -3
- package/docs/usage/aesthetics.md +56 -13
- package/docs/usage/buttons.md +13 -13
- package/docs/usage/composing.md +11 -11
- package/docs/usage/content-and-layout.md +13 -13
- package/docs/usage/customizing.md +90 -52
- package/docs/usage/feedback.md +1 -1
- package/docs/usage/forms.md +11 -11
- package/docs/usage/theming.md +1 -1
- package/llms-full.txt +274 -136
- package/package.json +12 -2
package/README.md
CHANGED
|
@@ -47,7 +47,7 @@ For the Tailwind CSS v4 entrypoint, theme selection, the intent/presentation axe
|
|
|
47
47
|
|
|
48
48
|
## Notes
|
|
49
49
|
|
|
50
|
-
This package has no JavaScript behavior; no version provides compatibility aliases for a removed class or token. `0.2.0` removes `.btn.loading` (compose a disabled `.btn` with a `.loader` child instead) and `.alert.icon`'s built-in glyph (drop a consumer-supplied icon into `.alert-icon` instead), and `.tooltip` now requires a `.tooltip-bubble` child element rather than a `data-tooltip` attribute. See the [changelog](./docs/changelog/index.md) for the complete history.
|
|
50
|
+
This package has no JavaScript behavior; no version provides compatibility aliases for a removed class or token. `0.2.0` removes `.btn.loading` (compose a disabled `.btn` with a `.loader` child instead) and `.alert.icon`'s built-in glyph (drop a consumer-supplied icon into `.alert-icon` instead), and `.tooltip` now requires a `.tooltip-bubble` child element rather than a `data-tooltip` attribute. `0.5.0` removes the second names: `.dense`, `.compact`, and `.spacious` (use `.p-xs`, `.p-sm`, and `.p-lg`), `.danger` and `.error` (use `.destructive`, and `.hint.destructive` for `.hint.error`), and `.elevation-none`, `.elevation-sm`, and `.elevation-md` (use `.flat`, `.raised`, and `.floating`). It also renames two material tokens: an aesthetic sets its corner as `--ui-corner` and `--ui-corner-surface` rather than `--ui-radius` and `--ui-radius-surface`, which now take a complete radius as written, and `--ui-button-weight` and `--ui-button-tracking` are `--ui-label-weight` and `--ui-label-tracking`. See the [changelog](./docs/changelog/index.md) for the complete history.
|
|
51
51
|
|
|
52
52
|
## License
|
|
53
53
|
|
|
@@ -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-
|
|
1
|
+
@layer theme,base;@layer components{.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-control-ink:light-dark(var(--color-neutral-600),var(--color-neutral-400));--ui-corner:var(--_tile-radius);--ui-corner-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--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-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:none;--ui-active-translate-x:0px;--ui-active-translate-y:var(--_tile-lift);--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-surface-image:initial;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif));--ui-label-weight:800;--ui-label-tracking:.04em;--ui-label-case:initial;--ui-label-shadow:initial}}@layer utilities;.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}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.cyber{--_cyber-cut:var(--cyber-cut,.625rem);--_cyber-glow:var(--cyber-glow,8px);--
|
|
1
|
+
@layer theme,base;@layer components{.cyber{--_cyber-cut:var(--cyber-cut,.625rem);--_cyber-glow:var(--cyber-glow,8px);--ui-ink:var(--cyber-ink,light-dark(var(--color-neutral-950),var(--color-neutral-50)));--ui-corner-shape:bevel;--ui-corner:var(--_cyber-cut);--ui-corner-surface:var(--_cyber-cut);--ui-corner-tl:1;--ui-corner-tr:0;--ui-corner-br:1;--ui-corner-bl:0;--ui-radius:var(--cyber-shape);--ui-radius-surface:var(--cyber-shape-surface,0 var(--_cyber-cut) / 0 var(--_cyber-cut));--ui-radius-pill:calc(infinity * 1px);--ui-radius-tight:0;--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--elevation-color:transparent;--ui-shadow-ink:0%;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:var(--_cyber-glow);--ui-halo-spread:0px;--ui-halo-ink:40%;--ui-hover-transform:none;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-surface-image:initial;--ui-bg-alpha:1;font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);--ui-control-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}@supports not (corner-shape:bevel){.cyber{--ui-corner:0;--ui-radius:0;--ui-radius-surface:0}}@media (prefers-reduced-motion:reduce){.cyber{--ui-active-transform:none}}}@layer utilities;.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-
|
|
1
|
+
@layer theme,base;@layer components{.glass{--ui-corner:var(--glass-radius,.75rem);--ui-corner-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-control-ink:light-dark(#0000008c,#ffffff8c);--ui-bg-alpha:.8;--ui-backdrop:blur(14px) saturate(1.6);--ui-surface-image:initial;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--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-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-edge:initial;--ui-hover-transform:none;--ui-active-transform:none;--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}@media (prefers-reduced-transparency:reduce){.glass{--ui-bg-alpha:1;--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}}@layer utilities;.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-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}}
|
|
2
|
+
@layer theme,base;@layer components{.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-corner:0;--ui-corner-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--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-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:none;--ui-active-translate-x:var(--_neo-offset);--ui-active-translate-y:var(--_neo-offset);--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-surface-image:initial;--ui-control-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}.glass{--ui-corner:var(--glass-radius,.75rem);--ui-corner-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-control-ink:light-dark(#0000008c,#ffffff8c);--ui-bg-alpha:.8;--ui-backdrop:blur(14px) saturate(1.6);--ui-surface-image:initial;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--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-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-edge:initial;--ui-hover-transform:none;--ui-active-transform:none;--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}@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-corner:0;--ui-corner-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-line-style:initial;--ui-rule-style:initial;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--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-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-hover-transform:none;--ui-active-transform:none;--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-surface-image:initial;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);--ui-control-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}.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-control-ink:light-dark(var(--color-neutral-600),var(--color-neutral-400));--ui-corner:var(--_tile-radius);--ui-corner-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--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-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:none;--ui-active-translate-x:0px;--ui-active-translate-y:var(--_tile-lift);--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-surface-image:initial;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif));--ui-label-weight:800;--ui-label-tracking:.04em;--ui-label-case:initial;--ui-label-shadow:initial}.cyber{--_cyber-cut:var(--cyber-cut,.625rem);--_cyber-glow:var(--cyber-glow,8px);--ui-ink:var(--cyber-ink,light-dark(var(--color-neutral-950),var(--color-neutral-50)));--ui-corner-shape:bevel;--ui-corner:var(--_cyber-cut);--ui-corner-surface:var(--_cyber-cut);--ui-corner-tl:1;--ui-corner-tr:0;--ui-corner-br:1;--ui-corner-bl:0;--ui-radius:var(--cyber-shape);--ui-radius-surface:var(--cyber-shape-surface,0 var(--_cyber-cut) / 0 var(--_cyber-cut));--ui-radius-pill:calc(infinity * 1px);--ui-radius-tight:0;--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--elevation-color:transparent;--ui-shadow-ink:0%;--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-halo-blur:var(--_cyber-glow);--ui-halo-spread:0px;--ui-halo-ink:40%;--ui-hover-transform:none;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-surface-image:initial;--ui-bg-alpha:1;font-family:var(--font-cyber,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);--ui-control-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}@supports not (corner-shape:bevel){.cyber{--ui-corner:0;--ui-radius:0;--ui-radius-surface:0}}@media (prefers-reduced-motion:reduce){.cyber{--ui-active-transform:none}}.sketch{--ui-corner:initial;--ui-corner-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-radius:var(--sketch-radius,255px 15px 225px 15px / 15px 225px 15px 255px);--ui-radius-surface:var(--sketch-radius-surface,80px 4px 75px 5px / 3px 70px 4px 80px);--ui-radius-pill:var(--sketch-radius-pill,20px 22px 21px 19px / 20px 22px 21px 19px);--ui-radius-tight:11px 1px 7px 2px / 2px 7px 1px 11px;--ui-corner-shape:round;--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-control-ink:initial;--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:solid;--ui-rule-style:initial;--ui-shadow-ink:0%;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-shadow-x:2px;--ui-shadow-y:2px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-focus-inset:initial;--ui-active-shadow-x:initial;--ui-active-shadow-y:initial;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-hover-transform:none;--ui-clip:none;--ui-clip-tight:none;--ui-backdrop:none;--ui-surface-image:initial;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial;font-family:var(--font-sketch,cursive)}@media (prefers-reduced-motion:reduce){.sketch{--ui-active-transform:none}}.sketch-rounded{--ui-radius:var(--sketch-radius-rounded,26px 10px 24px 11px / 12px 23px 11px 20px);--ui-radius-surface:var(--sketch-radius-surface-rounded,38px 16px 36px 17px / 16px 34px 17px 32px);--ui-radius-pill:var(--sketch-radius-pill,24px 16px 23px 17px / 17px 21px 16px 20px);--ui-radius-tight:9px 3px 8px 4px / 4px 8px 3px 7px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble,.data-table):nth-child(4n+2){--ui-radius:var(--sketch-radius,18px 240px 15px 255px / 240px 15px 255px 18px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble,.data-table):nth-child(4n+3){--ui-radius:var(--sketch-radius,245px 220px 15px 18px / 18px 15px 245px 235px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble,.data-table):nth-child(4n){--ui-radius:var(--sketch-radius,18px 250px 225px 15px / 245px 15px 18px 235px)}.field:nth-child(4n+1) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius,255px 15px 225px 15px / 15px 225px 15px 255px)}.field:nth-child(4n+2) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius,18px 240px 15px 255px / 240px 15px 255px 18px)}.field:nth-child(4n+3) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius,245px 220px 15px 18px / 18px 15px 245px 235px)}.field:nth-child(4n) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius,18px 250px 225px 15px / 245px 15px 18px 235px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert):nth-child(4n+2){--ui-radius-surface:var(--sketch-radius-surface,4px 75px 5px 80px / 75px 3px 80px 4px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert):nth-child(4n+3){--ui-radius-surface:var(--sketch-radius-surface,75px 70px 4px 5px / 4px 3px 75px 70px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert):nth-child(4n){--ui-radius-surface:var(--sketch-radius-surface,5px 80px 75px 4px / 75px 4px 5px 70px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+2){--ui-radius-tight:2px 8px 1px 10px / 8px 2px 10px 1px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+3){--ui-radius-tight:8px 2px 10px 1px / 1px 9px 2px 8px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n){--ui-radius-tight:1px 10px 2px 7px / 9px 1px 8px 2px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble,.data-table):nth-child(4n+2){--ui-radius:var(--sketch-radius-rounded,11px 25px 12px 24px / 23px 11px 22px 12px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble,.data-table):nth-child(4n+3){--ui-radius:var(--sketch-radius-rounded,24px 12px 26px 10px / 11px 23px 12px 22px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble,.data-table):nth-child(4n){--ui-radius:var(--sketch-radius-rounded,12px 24px 10px 25px / 22px 12px 23px 11px)}.field:nth-child(4n+1) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius-rounded,26px 10px 24px 11px / 12px 23px 11px 20px)}.field:nth-child(4n+2) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius-rounded,11px 25px 12px 24px / 23px 11px 22px 12px)}.field:nth-child(4n+3) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius-rounded,24px 12px 26px 10px / 11px 23px 12px 22px)}.field:nth-child(4n) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius-rounded,12px 24px 10px 25px / 22px 12px 23px 11px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert):nth-child(4n+2){--ui-radius-surface:var(--sketch-radius-surface-rounded,17px 36px 18px 34px / 33px 16px 32px 17px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert):nth-child(4n+3){--ui-radius-surface:var(--sketch-radius-surface-rounded,35px 18px 38px 15px / 17px 32px 16px 34px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert):nth-child(4n){--ui-radius-surface:var(--sketch-radius-surface-rounded,18px 35px 16px 37px / 31px 17px 34px 16px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+2){--ui-radius-tight:4px 8px 3px 9px / 8px 3px 8px 4px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+3){--ui-radius-tight:8px 4px 9px 3px / 3px 9px 4px 8px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n){--ui-radius-tight:3px 9px 4px 8px / 9px 4px 8px 3px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)).btn.pill{--ui-radius-pill:var(--sketch-radius-pill,24px 16px 23px 17px / 17px 21px 16px 20px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)).btn.pill:nth-child(4n+2){--ui-radius-pill:var(--sketch-radius-pill,17px 23px 16px 24px / 21px 16px 20px 17px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)).btn.pill:nth-child(4n+3){--ui-radius-pill:var(--sketch-radius-pill,23px 17px 24px 16px / 16px 20px 17px 21px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)).btn.pill:nth-child(4n){--ui-radius-pill:var(--sketch-radius-pill,16px 24px 17px 23px / 20px 17px 21px 16px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.badge,.progress,.switch){--ui-radius-pill:var(--ui-radius-tight)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.radio,.tooltip-icon){--ui-radius-pill:48% 52% 46% 54% / 53% 46% 54% 47%}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *).checkbox{--ui-line-style:dashed}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):is(.divider,.data-table){--ui-rule-style:dashed}}@layer utilities{.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-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-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-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-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}}.sketch-solo{--_sketch-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(--_sketch-ink);border-radius:var(--sketch-radius-surface,80px 4px 75px 5px / 3px 70px 4px 80px);box-shadow:2px 2px 0 0 var(--_sketch-ink);font-family:var(--font-sketch,cursive)}.sketch-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--sketch-radius,255px 15px 225px 15px / 15px 225px 15px 255px)}.sketch-solo.sketch-rounded{border-radius:var(--sketch-radius-surface-rounded,38px 16px 36px 17px / 16px 34px 17px 32px)}.sketch-solo.sketch-rounded:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--sketch-radius-rounded,26px 10px 24px 11px / 12px 23px 11px 20px)}@media (forced-colors:active){.sketch-solo{border-style:solid}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-
|
|
1
|
+
@layer theme,base;@layer components{.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-corner:0;--ui-corner-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-line-style:initial;--ui-rule-style:initial;--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-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:none;--ui-active-translate-x:var(--_neo-offset);--ui-active-translate-y:var(--_neo-offset);--ui-clip:none;--ui-clip-tight:none;--ui-corner-shape:round;--ui-radius-pill:initial;--ui-radius-tight:initial;--ui-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-surface-image:initial;--ui-control-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}}@layer utilities{.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-
|
|
1
|
+
@layer theme,base;@layer components{.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-corner:0;--ui-corner-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-line-style:initial;--ui-rule-style:initial;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--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-radius:initial;--ui-radius-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-hover-transform:none;--ui-active-transform:none;--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-backdrop:none;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-surface-image:initial;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);--ui-control-ink:initial;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial}}@layer utilities;.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))}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer theme,base;@layer components{.sketch{--ui-corner:initial;--ui-corner-surface:initial;--ui-corner-tl:initial;--ui-corner-tr:initial;--ui-corner-br:initial;--ui-corner-bl:initial;--ui-radius:var(--sketch-radius,255px 15px 225px 15px / 15px 225px 15px 255px);--ui-radius-surface:var(--sketch-radius-surface,80px 4px 75px 5px / 3px 70px 4px 80px);--ui-radius-pill:var(--sketch-radius-pill,20px 22px 21px 19px / 20px 22px 21px 19px);--ui-radius-tight:11px 1px 7px 2px / 2px 7px 1px 11px;--ui-corner-shape:round;--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-control-ink:initial;--ui-border-width:1px;--ui-border-max:100px;--ui-line-style:solid;--ui-rule-style:initial;--ui-shadow-ink:0%;--elevation-color:light-dark(#0f172a14,#0000008c);--ui-shadow-x:2px;--ui-shadow-y:2px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-halo-blur:initial;--ui-halo-spread:initial;--ui-halo-ink:initial;--ui-focus-inset:initial;--ui-active-shadow-x:initial;--ui-active-shadow-y:initial;--ui-active-transform:scale(.97);--ui-active-translate-x:initial;--ui-active-translate-y:initial;--ui-hover-transform:none;--ui-clip:none;--ui-clip-tight:none;--ui-backdrop:none;--ui-surface-image:initial;--ui-surface-ground:initial;--ui-surface-shadow:initial;--ui-bg-alpha:1;--ui-label-weight:initial;--ui-label-tracking:initial;--ui-label-case:initial;--ui-label-shadow:initial;font-family:var(--font-sketch,cursive)}@media (prefers-reduced-motion:reduce){.sketch{--ui-active-transform:none}}.sketch-rounded{--ui-radius:var(--sketch-radius-rounded,26px 10px 24px 11px / 12px 23px 11px 20px);--ui-radius-surface:var(--sketch-radius-surface-rounded,38px 16px 36px 17px / 16px 34px 17px 32px);--ui-radius-pill:var(--sketch-radius-pill,24px 16px 23px 17px / 17px 21px 16px 20px);--ui-radius-tight:9px 3px 8px 4px / 4px 8px 3px 7px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble,.data-table):nth-child(4n+2){--ui-radius:var(--sketch-radius,18px 240px 15px 255px / 240px 15px 255px 18px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble,.data-table):nth-child(4n+3){--ui-radius:var(--sketch-radius,245px 220px 15px 18px / 18px 15px 245px 235px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble,.data-table):nth-child(4n){--ui-radius:var(--sketch-radius,18px 250px 225px 15px / 245px 15px 18px 235px)}.field:nth-child(4n+1) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius,255px 15px 225px 15px / 15px 225px 15px 255px)}.field:nth-child(4n+2) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius,18px 240px 15px 255px / 240px 15px 255px 18px)}.field:nth-child(4n+3) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius,245px 220px 15px 18px / 18px 15px 245px 235px)}.field:nth-child(4n) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius,18px 250px 225px 15px / 245px 15px 18px 235px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert):nth-child(4n+2){--ui-radius-surface:var(--sketch-radius-surface,4px 75px 5px 80px / 75px 3px 80px 4px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert):nth-child(4n+3){--ui-radius-surface:var(--sketch-radius-surface,75px 70px 4px 5px / 4px 3px 75px 70px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert):nth-child(4n){--ui-radius-surface:var(--sketch-radius-surface,5px 80px 75px 4px / 75px 4px 5px 70px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+2){--ui-radius-tight:2px 8px 1px 10px / 8px 2px 10px 1px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+3){--ui-radius-tight:8px 2px 10px 1px / 1px 9px 2px 8px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):not(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n){--ui-radius-tight:1px 10px 2px 7px / 9px 1px 8px 2px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble,.data-table):nth-child(4n+2){--ui-radius:var(--sketch-radius-rounded,11px 25px 12px 24px / 23px 11px 22px 12px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble,.data-table):nth-child(4n+3){--ui-radius:var(--sketch-radius-rounded,24px 12px 26px 10px / 11px 23px 12px 22px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.btn,.ipt,.textarea,.select,.input-group,.pre,.tooltip-bubble,.data-table):nth-child(4n){--ui-radius:var(--sketch-radius-rounded,12px 24px 10px 25px / 22px 12px 23px 11px)}.field:nth-child(4n+1) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius-rounded,26px 10px 24px 11px / 12px 23px 11px 20px)}.field:nth-child(4n+2) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius-rounded,11px 25px 12px 24px / 23px 11px 22px 12px)}.field:nth-child(4n+3) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius-rounded,24px 12px 26px 10px / 11px 23px 12px 22px)}.field:nth-child(4n) :is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.ipt,.textarea,.select,.input-group){--ui-radius:var(--sketch-radius-rounded,12px 24px 10px 25px / 22px 12px 23px 11px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert):nth-child(4n+2){--ui-radius-surface:var(--sketch-radius-surface-rounded,17px 36px 18px 34px / 33px 16px 32px 17px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert):nth-child(4n+3){--ui-radius-surface:var(--sketch-radius-surface-rounded,35px 18px 38px 15px / 17px 32px 16px 34px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.card,.panel,.alert):nth-child(4n){--ui-radius-surface:var(--sketch-radius-surface-rounded,18px 35px 16px 37px / 31px 17px 34px 16px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+2){--ui-radius-tight:4px 8px 3px 9px / 8px 3px 8px 4px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n+3){--ui-radius-tight:8px 4px 9px 3px / 3px 9px 4px 8px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch-rounded,.sketch-rounded *):is(.badge,.kbd,.code,.checkbox,.switch,.progress):nth-child(4n){--ui-radius-tight:3px 9px 4px 8px / 9px 4px 8px 3px}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)).btn.pill{--ui-radius-pill:var(--sketch-radius-pill,24px 16px 23px 17px / 17px 21px 16px 20px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)).btn.pill:nth-child(4n+2){--ui-radius-pill:var(--sketch-radius-pill,17px 23px 16px 24px / 21px 16px 20px 17px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)).btn.pill:nth-child(4n+3){--ui-radius-pill:var(--sketch-radius-pill,23px 17px 24px 16px / 16px 20px 17px 21px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)).btn.pill:nth-child(4n){--ui-radius-pill:var(--sketch-radius-pill,16px 24px 17px 23px / 20px 17px 21px 16px)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.badge,.progress,.switch){--ui-radius-pill:var(--ui-radius-tight)}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.radio,.tooltip-icon){--ui-radius-pill:48% 52% 46% 54% / 53% 46% 54% 47%}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *).checkbox{--ui-line-style:dashed}:is(.sketch,.sketch-rounded,:is(.sketch,.sketch-rounded) :not(:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber),:is(.sketch,.sketch-rounded) :is(.neobrutalism,.glass,.pixel,.chunky-tile,.cyber) *)):is(.sketch,.sketch *):is(.divider,.data-table){--ui-rule-style:dashed}}@layer utilities;.sketch-solo{--_sketch-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(--_sketch-ink);border-radius:var(--sketch-radius-surface,80px 4px 75px 5px / 3px 70px 4px 80px);box-shadow:2px 2px 0 0 var(--_sketch-ink);font-family:var(--font-sketch,cursive)}.sketch-solo:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--sketch-radius,255px 15px 225px 15px / 15px 225px 15px 255px)}.sketch-solo.sketch-rounded{border-radius:var(--sketch-radius-surface-rounded,38px 16px 36px 17px / 16px 34px 17px 32px)}.sketch-solo.sketch-rounded:is(button,a[href],[role=button],summary,input[type=button],input[type=submit],input[type=reset]){border-radius:var(--sketch-radius-rounded,26px 10px 24px 11px / 12px 23px 11px 20px)}@media (forced-colors:active){.sketch-solo{border-style:solid}}
|