Something went wrong. Try again.
fork of ozone with nix stuff
Something went wrong. Try again.
ozone tailwind.config.js
11 kB · 263 lines
JavaScript
at customized
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264const colors = require('tailwindcss/colors')const plugin = require('tailwindcss/plugin')
/** * Design tokens are defined as CSS custom properties in `styles/theme.css` * (ported from tangled's `web/src/app.css`); this file only gives them utility * names. Tokens are plain hex, not channel triplets, so slash-opacity * (`bg-background-subtle/50`) does not work on them — use the raw `gray`/ * `indigo` ramps when a translucent tint is genuinely needed. */const token = (name) => `var(--color-${name})`
/** @type {import('tailwindcss').Config} */module.exports = { content: [ './app/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './node_modules/react-tailwindcss-select/dist/index.esm.js', ], theme: { extend: { fontFamily: { sans: ['InterVariable', 'system-ui', 'sans-serif', 'ui-sans-serif'], mono: [ 'IBMPlexMono', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace', ], }, colors: { // Semantic tokens — the palette to reach for in new code. background: { default: token('background-default'), subtle: token('background-subtle'), inset: token('background-inset'), muted: token('background-muted'), strong: token('background-strong'), canvas: token('background-canvas'), emphasis: token('background-emphasis'), highlight: token('background-highlight'), 'success-subtle': token('background-success-subtle'), 'success-subtle-hover': token('background-success-subtle-hover'), 'success-emphasis': token('background-success-emphasis'), 'success-emphasis-hover': token('background-success-emphasis-hover'), 'danger-subtle': token('background-danger-subtle'), 'danger-subtle-hover': token('background-danger-subtle-hover'), 'danger-emphasis': token('background-danger-emphasis'), 'danger-emphasis-hover': token('background-danger-emphasis-hover'), 'warning-subtle': token('background-warning-subtle'), 'warning-subtle-hover': token('background-warning-subtle-hover'), 'warning-emphasis': token('background-warning-emphasis'), 'info-subtle': token('background-info-subtle'), 'info-subtle-hover': token('background-info-subtle-hover'), 'info-emphasis': token('background-info-emphasis'), 'navigation-frame': token('background-navigation-frame'), 'navigation-item': token('background-navigation-item'), }, foreground: { default: token('foreground-default'), muted: token('foreground-muted'), subtle: token('foreground-subtle'), placeholder: token('foreground-placeholder'), disabled: token('foreground-disabled'), 'on-emphasis': token('foreground-on-emphasis'), inverted: token('foreground-inverted'), highlight: token('foreground-highlight'), success: token('foreground-success'), 'success-strong': token('foreground-success-strong'), 'success-disabled': token('foreground-success-disabled'), danger: token('foreground-danger'), 'danger-strong': token('foreground-danger-strong'), 'danger-subtle': token('foreground-danger-subtle'), 'danger-disabled': token('foreground-danger-disabled'), warning: token('foreground-warning'), 'warning-strong': token('foreground-warning-strong'), 'warning-disabled': token('foreground-warning-disabled'), info: token('foreground-info'), 'info-strong': token('foreground-info-strong'), 'link-default': token('foreground-link-default'), 'link-hover': token('foreground-link-hover'), 'link-disabled': token('foreground-link-disabled'), 'link-danger': token('foreground-link-danger'), 'link-danger-hover': token('foreground-link-danger-hover'), 'link-success': token('foreground-link-success'), 'link-success-hover': token('foreground-link-success-hover'), 'link-warning': token('foreground-link-warning'), 'link-warning-hover': token('foreground-link-warning-hover'), 'link-info': token('foreground-link-info'), 'link-info-hover': token('foreground-link-info-hover'), }, border: { default: token('border-default'), subtle: token('border-subtle'), strong: token('border-strong'), disabled: token('border-disabled'), focus: token('border-focus'), 'focus-success': token('border-focus-success'), 'focus-danger': token('border-focus-danger'), success: token('border-success'), danger: token('border-danger'), 'danger-subtle': token('border-danger-subtle'), 'navigation-item-active': token('border-navigation-item-active'), }, ansi: { black: token('ansi-black'), red: token('ansi-red'), green: token('ansi-green'), yellow: token('ansi-yellow'), blue: token('ansi-blue'), magenta: token('ansi-magenta'), cyan: token('ansi-cyan'), white: token('ansi-white'), },
// Families that the tangled palette does not contain: `slate` was the // bluish dark-mode neutral (tangled's neutral ramp *is* Tailwind gray), // and rose/teal/sky/violet were a second and third accent where tangled // has exactly one — indigo. // // Ozone's own components no longer reference these, but // react-tailwindcss-select (in the content globs above) hardcodes them // as its selectable primary colours, so the aliases keep that vendored // component on-palette too. slate: colors.gray, rose: colors.indigo, teal: colors.indigo, sky: colors.indigo, violet: colors.indigo, lime: colors.green, }, boxShadow: { // Ambient shadow colours are transparent in dark mode (per app.css), so // every `shadow-*` utility flattens there instead of smearing black // over already-dark surfaces. sm: '0 2px 4px var(--color-shadow-ambient-strong)', small: '0 2px 4px var(--color-shadow-ambient-strong)', DEFAULT: '0 4px 12px var(--color-shadow-ambient-subtle), 0 2px 4px var(--color-shadow-ambient-subtle)', regular: '0 4px 12px var(--color-shadow-ambient-subtle), 0 2px 4px var(--color-shadow-ambient-subtle)', md: '0 4px 12px var(--color-shadow-ambient-subtle), 0 2px 4px var(--color-shadow-ambient-subtle)', lg: '0 6px 16px var(--color-shadow-ambient-subtle), 0 4px 6px var(--color-shadow-ambient-subtle)', large: '0 6px 16px var(--color-shadow-ambient-subtle), 0 4px 6px var(--color-shadow-ambient-subtle)', xl: '0 6px 16px var(--color-shadow-ambient-subtle), 0 4px 6px var(--color-shadow-ambient-subtle)', }, keyframes: { 'spin-step': { '0%': { transform: 'rotate(0deg)', 'animation-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)', }, '50%': { transform: 'rotate(180deg)', 'animation-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)', }, '100%': { transform: 'rotate(360deg)' }, }, }, animation: { 'spin-step': 'spin-step 2.5s infinite', }, typography: ({ theme }) => ({ DEFAULT: { css: { '--tw-prose-body': token('foreground-muted'), '--tw-prose-headings': token('foreground-default'), '--tw-prose-lead': token('foreground-muted'), '--tw-prose-links': token('foreground-link-default'), '--tw-prose-bold': token('foreground-default'), '--tw-prose-counters': token('foreground-subtle'), '--tw-prose-bullets': token('background-strong'), '--tw-prose-hr': token('border-default'), '--tw-prose-quotes': token('foreground-default'), '--tw-prose-quote-borders': token('border-default'), '--tw-prose-captions': token('foreground-subtle'), '--tw-prose-code': token('foreground-default'), '--tw-prose-pre-code': token('foreground-inverted'), '--tw-prose-pre-bg': token('background-emphasis'), '--tw-prose-th-borders': token('border-strong'), '--tw-prose-td-borders': token('border-default'), }, }, }), }, }, plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), // Type scale, mirroring app.css's `@utility typography-*` rules. plugin(({ addUtilities, theme }) => { // theme() flattens font stacks to a string, so use the value as-is. const mono = { fontFamily: theme('fontFamily.mono') } addUtilities({ '.typography-heading-0': { fontSize: '5rem', lineHeight: '5rem', fontWeight: '600', letterSpacing: '-0.25px', }, '.typography-heading-1': { fontSize: '3rem', lineHeight: '3.5rem', fontWeight: '500', }, '.typography-heading-2': { fontSize: '1.875rem', lineHeight: '1.875rem', fontWeight: '600', }, '.typography-heading-3': { fontSize: '1.5rem', lineHeight: '1.875rem', fontWeight: '500', }, '.typography-heading-4': { fontSize: '1.25rem', lineHeight: '1.75rem', fontWeight: '500', }, '.typography-paragraph-large': { fontSize: '1rem', lineHeight: '1.6875rem', }, '.typography-paragraph-regular': { fontSize: '0.875rem', lineHeight: '1.5rem', }, '.typography-paragraph-small': { fontSize: '0.75rem', lineHeight: '1.25rem', }, '.typography-paragraph-mini': { fontSize: '0.625rem', lineHeight: '1rem', }, '.typography-monospace-large': { ...mono, fontSize: '1rem', lineHeight: '1.5rem', }, '.typography-monospace-regular': { ...mono, fontSize: '0.875rem', lineHeight: '1.375rem', }, '.typography-monospace-small': { ...mono, fontSize: '0.75rem', lineHeight: '1.25rem', }, }) }), ], darkMode: 'class',}