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
5.1 KiB
JavaScript
166 lines
5.1 KiB
JavaScript
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
const { fontFamily } = require('tailwindcss/defaultTheme');
|
|
const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette');
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: ['variant', '&:is(.dark:not(.dark-mode-disabled) *)'],
|
|
content: ['src/**/*.{ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['var(--font-sans)', ...fontFamily.sans],
|
|
mono: ['var(--font-mono)', ...fontFamily.mono],
|
|
signature: ['var(--font-signature)'],
|
|
noto: ['var(--font-noto)'],
|
|
},
|
|
// Zen is variable; these are where it reads on a screen (@hanzo/ui DESIGN.md ยง1).
|
|
fontWeight: {
|
|
normal: '497',
|
|
medium: '606',
|
|
semibold: '680',
|
|
bold: '760',
|
|
},
|
|
zIndex: {
|
|
9999: '9999',
|
|
},
|
|
aspectRatio: {
|
|
'signature-pad': '16 / 7',
|
|
},
|
|
colors: {
|
|
border: 'hsl(var(--border))',
|
|
'field-border': 'hsl(var(--field-border))',
|
|
input: 'hsl(var(--input))',
|
|
ring: 'hsl(var(--ring))',
|
|
background: 'hsl(var(--background))',
|
|
foreground: 'hsl(var(--foreground))',
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary))',
|
|
foreground: 'hsl(var(--primary-foreground))',
|
|
},
|
|
'envelope-editor-background': 'hsl(var(--envelope-editor-background))',
|
|
secondary: {
|
|
DEFAULT: 'hsl(var(--secondary))',
|
|
foreground: 'hsl(var(--secondary-foreground))',
|
|
},
|
|
warning: {
|
|
DEFAULT: 'hsl(var(--warning))',
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))',
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted))',
|
|
foreground: 'hsl(var(--muted-foreground))',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(var(--accent))',
|
|
foreground: 'hsl(var(--accent-foreground))',
|
|
},
|
|
popover: {
|
|
DEFAULT: 'hsl(var(--popover))',
|
|
foreground: 'hsl(var(--popover-foreground))',
|
|
},
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card))',
|
|
foreground: 'hsl(var(--card-foreground))',
|
|
},
|
|
'field-card': {
|
|
DEFAULT: 'hsl(var(--field-card))',
|
|
border: 'hsl(var(--field-card-border))',
|
|
foreground: 'hsl(var(--field-card-foreground))',
|
|
},
|
|
widget: {
|
|
DEFAULT: 'hsl(var(--widget))',
|
|
foreground: 'hsl(var(--widget-foreground))',
|
|
},
|
|
sign: {
|
|
DEFAULT: '#ADADAD',
|
|
50: '#FFFFFF',
|
|
100: '#FCFCFC',
|
|
200: '#EBEBEB',
|
|
300: '#D6D6D6',
|
|
400: '#BFBFBF',
|
|
500: '#ADADAD',
|
|
600: '#8F8F8F',
|
|
700: '#737373',
|
|
800: '#575757',
|
|
900: '#3B3B3B',
|
|
950: '#2E2E2E',
|
|
},
|
|
// Recipients are told apart by tone, one step per recipient.
|
|
recipient: {
|
|
1: 'hsl(var(--recipient-1))',
|
|
2: 'hsl(var(--recipient-2))',
|
|
3: 'hsl(var(--recipient-3))',
|
|
4: 'hsl(var(--recipient-4))',
|
|
5: 'hsl(var(--recipient-5))',
|
|
6: 'hsl(var(--recipient-6))',
|
|
},
|
|
},
|
|
// Tailwind's stock ring is blue; an unqualified ring follows the theme instead.
|
|
ringColor: {
|
|
DEFAULT: 'hsl(var(--ring))',
|
|
},
|
|
ringOffsetColor: {
|
|
DEFAULT: 'hsl(var(--background))',
|
|
},
|
|
backgroundImage: {
|
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
|
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: 'calc(var(--radius) - 3px)',
|
|
'2xl': 'calc(var(--radius) + 4px)',
|
|
xl: 'calc(var(--radius) + 2px)',
|
|
lg: 'var(--radius)',
|
|
md: 'calc(var(--radius) - 2px)',
|
|
sm: 'calc(var(--radius) - 4px)',
|
|
},
|
|
keyframes: {
|
|
'accordion-down': {
|
|
from: { height: 0 },
|
|
to: { height: 'var(--radix-accordion-content-height)' },
|
|
},
|
|
'accordion-up': {
|
|
from: { height: 'var(--radix-accordion-content-height)' },
|
|
to: { height: 0 },
|
|
},
|
|
'caret-blink': {
|
|
'0%,70%,100%': { opacity: '1' },
|
|
'20%,50%': { opacity: '0' },
|
|
},
|
|
},
|
|
animation: {
|
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
'caret-blink': 'caret-blink 1.25s ease-out infinite',
|
|
},
|
|
screens: {
|
|
'3xl': '1920px',
|
|
'4xl': '2560px',
|
|
'5xl': '3840px',
|
|
print: { raw: 'print' },
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('tailwindcss-animate'),
|
|
require('@tailwindcss/typography'),
|
|
require('@tailwindcss/container-queries'),
|
|
addVariablesForColors,
|
|
],
|
|
};
|
|
|
|
function addVariablesForColors({ addBase, theme }) {
|
|
let allColors = flattenColorPalette(theme('colors'));
|
|
let newVars = Object.fromEntries(
|
|
Object.entries(allColors).map(([key, val]) => [`--${key}`, val]),
|
|
);
|
|
|
|
addBase({
|
|
':root': newVars,
|
|
});
|
|
}
|