mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-21 01:21:51 +00:00
zeekay
597cfae467
The theme takes @hanzo/ui DESIGN.md's values: a true-black page, #0a0a0a surfaces, #171717 raised, #ededf1 ink and white-alpha hairlines in dark; white, #0a0a0a ink and black-alpha hairlines in light. Each is an opaque triplet, so Tailwind's alpha modifiers still apply. Type is Zen and Zen Mono from @hanzo/font, at Zen's own weights. Buttons are pills, the primary in the ink colour; the option cards built from a Button keep a card's corners, and the folder actions wrap on a phone rather than breaking a pill over two lines.
166 lines
3.7 KiB
CSS
166 lines
3.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
/* Light: hanzo.ai's light palette (@hanzo/tokens `light`). A white page, #0a0a0a ink, and
|
|
hairlines that are DESIGN.md's black-alpha rungs composited on white: border 10%, a
|
|
control's edge 15%, hover 5%. Every value is opaque so Tailwind's `/alpha` modifiers apply. */
|
|
:root,
|
|
.dark-mode-disabled {
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 0% 4%;
|
|
|
|
--muted: 0 0% 95%;
|
|
--muted-foreground: 0 0% 32%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 4%;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-border: 0 0% 90%;
|
|
--card-border-tint: 115 115 115;
|
|
--card-foreground: 0 0% 4%;
|
|
|
|
--field-card: 0 0% 96%;
|
|
--field-card-border: 0 0% 85%;
|
|
--field-card-foreground: 0 0% 4%;
|
|
|
|
--widget: 0 0% 97%;
|
|
--widget-foreground: 0 0% 95%;
|
|
|
|
--border: 0 0% 90%;
|
|
--input: 0 0% 85%;
|
|
|
|
--primary: 0 0% 4%;
|
|
--primary-foreground: 0 0% 98%;
|
|
|
|
--secondary: 0 0% 95%;
|
|
--secondary-foreground: 0 0% 4%;
|
|
|
|
--accent: 0 0% 95%;
|
|
--accent-foreground: 0 0% 4%;
|
|
|
|
--destructive: 0 72% 51%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--ring: 0 0% 50%;
|
|
|
|
--radius: 0.5rem;
|
|
|
|
--warning: 0 0% 45%;
|
|
|
|
/* Recipient tones: one step per recipient, legible on both surfaces. */
|
|
--recipient-1: 0 0% 36%;
|
|
--recipient-2: 0 0% 43%;
|
|
--recipient-3: 0 0% 50%;
|
|
--recipient-4: 0 0% 57%;
|
|
--recipient-5: 0 0% 64%;
|
|
--recipient-6: 0 0% 71%;
|
|
|
|
--envelope-editor-background: 0 0% 98%;
|
|
}
|
|
|
|
/* Dark, the house theme: @hanzo/ui DESIGN.md §4. A true-black page, #0a0a0a
|
|
surfaces, #171717 for hover and anything raised, and white-alpha hairlines composited
|
|
on black (border 10%, a control's edge 15%). Ink is #ededf1, never pure white on black. */
|
|
.dark:not(.dark-mode-disabled) {
|
|
--background: 0 0% 0%;
|
|
--foreground: 240 11% 94%;
|
|
|
|
--muted: 0 0% 9%;
|
|
--muted-foreground: 240 5% 65%;
|
|
|
|
--popover: 0 0% 4%;
|
|
--popover-foreground: 240 11% 94%;
|
|
|
|
--card: 0 0% 4%;
|
|
--card-border: 0 0% 10%;
|
|
--card-border-tint: 115 115 115;
|
|
--card-foreground: 240 11% 94%;
|
|
|
|
--widget: 0 0% 4%;
|
|
--widget-foreground: 0 0% 10%;
|
|
|
|
--border: 0 0% 10%;
|
|
--input: 0 0% 15%;
|
|
|
|
--field-border: 0 0% 91%;
|
|
|
|
--primary: 0 0% 98%;
|
|
--primary-foreground: 0 0% 0%;
|
|
|
|
--secondary: 0 0% 9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
|
|
--accent: 0 0% 9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
|
|
--destructive: 0 87% 62%;
|
|
--destructive-foreground: 0 87% 19%;
|
|
|
|
--ring: 0 0% 40%;
|
|
|
|
--radius: 0.5rem;
|
|
|
|
--warning: 0 0% 45%;
|
|
|
|
--envelope-editor-background: 0 0% 0%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
/* Zen's book weight is 497, not the generic 400 (@hanzo/ui DESIGN.md §1). */
|
|
body {
|
|
@apply bg-background font-normal text-foreground;
|
|
font-feature-settings:
|
|
'rlig' 1,
|
|
'calt' 1;
|
|
}
|
|
}
|
|
|
|
.gradient-border-mask::before {
|
|
mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
-webkit-mask-composite: xor;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
background: transparent;
|
|
border-radius: 10px;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
/* .custom-scrollbar::-webkit-scrollbar-track {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgb(100 116 139 / 1);
|
|
border-radius: 10px;
|
|
width: 8px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgb(100 116 139 / 0.5);
|
|
} */
|
|
|
|
/* Custom Swagger Dark Theme */
|
|
.swagger-dark-theme .swagger-ui {
|
|
filter: invert(88%) hue-rotate(180deg);
|
|
}
|
|
|
|
.swagger-dark-theme .swagger-ui .microlight {
|
|
filter: invert(100%) hue-rotate(180deg);
|
|
}
|