mirror of
https://github.com/hanzoai/insights.git
synced 2026-10-30 16:15:31 +00:00
zeekay
48f9b8faf0
The Geist->Zen rename reached the stylesheets and stopped there. Four layers were still handing users another vendor's face. frontend/public still carried Inter.woff2/woff, the real upstream binaries signed RSMS, and fonts.scss declared three static Inter weights on top of the variable face; one variable file spans 100-900, so those three collapse into it. The Zen pair here named only Hanzo in its copyright, which OFL does not allow for a cut of Geist — @hanzo/font's identity check reads family, vendor tag and both notices out of the name table and refuses to publish a face that fails, so the bytes now come from there. common/tailwind/dist/tailwind.css is a build artifact. .gitignore names it, `insightscli doctor` deletes it, nothing imports it (the app imports the source tailwind.css), and a single upstream merge dragged it in. Its --default-font-family still said MatterSQ, two renames behind the config it is supposed to come from. Untracked rather than hand-edited. @hanzo/quill's tokens set --font-sans behind [data-quill], a later declaration than base.scss's :root, so every component inside a quill subtree resolved to the token's own Inter stack instead of the app's. The token now leads with Zen, and each package's own build regenerates its dist. The preload lookup in build.mjs matched /Inter(-hash)?\.woff2/ and throws when it resolves empty, so it had to move with the file. It was also warming the second family in --font-sans rather than the first. Two smaller ones: the region picker fetched Inter from fonts.googleapis.com on an unauthenticated page, and quill's storybook depended on @fontsource-variable/inter, which declares the family "Inter Variable" — a name no stack in this repo asks for, so it downloaded and painted nothing.
900 lines
40 KiB
JavaScript
900 lines
40 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
const plugin = require('tailwindcss/plugin')
|
|
|
|
const commonColors = {
|
|
inherit: 'inherit',
|
|
current: 'currentColor',
|
|
transparent: 'transparent',
|
|
accent: 'var(--color-accent)',
|
|
'accent-inverted': 'var(--color-accent-inverted)',
|
|
'accent-hover': 'var(--color-accent-hover)',
|
|
'accent-active': 'var(--color-accent-active)',
|
|
'accent-highlight-primary': 'var(--color-accent-highlight-primary)',
|
|
'accent-highlight-secondary': 'var(--color-accent-highlight-secondary)',
|
|
ai: 'var(--color-ai)',
|
|
}
|
|
|
|
const deprecatedColors = {
|
|
'primary-highlight-light': 'var(--primary-highlight-light)',
|
|
'text-3000-light': 'var(--text-3000-light)',
|
|
'text-secondary-3000-light': 'var(--color-text-secondary-3000-light)',
|
|
'muted-3000-light': 'var(--muted-3000-light)',
|
|
'trace-3000-light': 'var(--trace-3000-light)',
|
|
'primary-3000-light': 'var(--primary-3000-light)',
|
|
'primary-3000-hover-light': 'var(--primary-3000-hover-light)',
|
|
'primary-3000-active-light': 'var(--primary-3000-active-light)',
|
|
'secondary-3000-light': 'var(--secondary-3000-light)',
|
|
'secondary-3000-hover-light': 'var(--secondary-3000-hover-light)',
|
|
'accent-3000-light': 'var(--color-accent-3000-light)',
|
|
'bg-3000-light': 'var(--color-bg-3000-light)',
|
|
'border-3000-light': 'var(--border-3000-light)',
|
|
'border-bold-3000-light': 'var(--border-bold-3000-light)',
|
|
'glass-bg-3000-light': 'var(--glass-bg-3000-light)',
|
|
'glass-border-3000-light': 'var(--glass-border-3000-light)',
|
|
'link-3000-light': 'var(--link-3000-light)',
|
|
'primary-3000-frame-bg-light': 'var(--primary-3000-frame-bg-light)',
|
|
'primary-3000-button-border-light': 'var(--primary-3000-button-border-light)',
|
|
'primary-3000-button-border-hover-light': 'var(--primary-3000-button-border-hover-light)',
|
|
'secondary-3000-frame-bg-light': 'var(--secondary-3000-frame-bg-light)',
|
|
'secondary-3000-button-bg-light': 'var(--secondary-3000-button-bg-light)',
|
|
'secondary-3000-button-border-light': 'var(--secondary-3000-button-border-light)',
|
|
'secondary-3000-button-border-hover-light': 'var(--secondary-3000-button-border-hover-light)',
|
|
'danger-3000-frame-bg-light': 'var(--danger-3000-frame-bg-light)',
|
|
'danger-3000-button-border-light': 'var(--danger-3000-button-border-light)',
|
|
'danger-3000-button-border-hover-light': 'var(--danger-3000-button-border-hover-light)',
|
|
|
|
// Insights 3000 - Dark mode
|
|
'text-3000-dark': 'var(--text-3000-dark)',
|
|
'text-secondary-3000-dark': 'var(--color-text-secondary-3000-dark)',
|
|
'muted-3000-dark': 'var(--muted-3000-dark)',
|
|
'trace-3000-dark': 'var(--trace-3000-dark)',
|
|
'primary-3000-dark': 'var(--primary-3000-dark)',
|
|
|
|
// --color-primary-highlight-dark: var(--primary-highlight-dark);
|
|
'primary-3000-hover-dark': 'var(--primary-3000-hover-dark)',
|
|
'primary-3000-active-dark': 'var(--primary-3000-active-dark)',
|
|
'primary-alt-highlight-light': 'var(--primary-alt-highlight-light)',
|
|
'secondary-3000-dark': 'var(--secondary-3000-dark)',
|
|
'secondary-3000-hover-dark': 'var(--secondary-3000-hover-dark)',
|
|
'accent-3000-dark': 'var(--color-accent-3000-dark)',
|
|
'bg-3000-dark': 'var(--color-bg-3000-dark)',
|
|
'border-3000-dark': 'var(--border-3000-dark)',
|
|
'border-bold-3000-dark': 'var(--border-bold-3000-dark)',
|
|
'glass-bg-3000-dark': 'var(--glass-bg-3000-dark)',
|
|
'glass-border-3000-dark': 'var(--glass-border-3000-dark)',
|
|
'link-3000-dark': 'var(--link-3000-dark)',
|
|
'primary-3000-frame-bg-dark': 'var(--primary-3000-frame-bg-dark)',
|
|
'primary-3000-button-border-dark': 'var(--primary-3000-button-border-dark)',
|
|
'primary-3000-button-border-hover-dark': 'var(--primary-3000-button-border-hover-dark)',
|
|
'primary-alt-highlight-dark': 'var(--primary-alt-highlight-dark)',
|
|
'secondary-3000-frame-bg-dark': 'var(--secondary-3000-frame-bg-dark)',
|
|
'secondary-3000-button-bg-dark': 'var(--secondary-3000-button-bg-dark)',
|
|
'secondary-3000-button-border-dark': 'var(--secondary-3000-button-border-dark)',
|
|
'secondary-3000-button-border-hover-dark': 'var(--secondary-3000-button-border-hover-dark)',
|
|
'danger-3000-frame-bg-dark': 'var(--danger-3000-frame-bg-dark)',
|
|
'danger-3000-button-border-dark': 'var(--danger-3000-button-border-dark)',
|
|
'danger-3000-button-border-hover-dark': 'var(--danger-3000-button-border-hover-dark)',
|
|
|
|
// Shadows
|
|
// --color-shadow-elevation-3000-light: var(--shadow-elevation-3000-light);
|
|
// --color-shadow-elevation-3000-dark: var(--shadow-elevation-3000-dark);
|
|
|
|
// The derived colors
|
|
// `--default` is a pre-3000 alias for "default text color" (`--text-3000` now)
|
|
// --color-default: var(--default);
|
|
// --color-text-3000: var(--text-3000);
|
|
// --color-text-secondary-3000: var(--color-text-secondary-3000);
|
|
// --color-muted-3000: var(--muted-3000);
|
|
// --color-primary-3000: var(--primary-3000);
|
|
// --color-secondary-3000: var(--secondary-3000);
|
|
// --color-secondary-3000-hover: var(--secondary-3000-hover);
|
|
// --color-accent-3000: var(--color-bg-surface-primary);
|
|
// --color-bg-3000: var(--color-bg-primary);
|
|
// --color-primary-highlight: var(--primary-highlight);
|
|
// --color-primary-alt-highlight: var(--primary-alt-highlight);
|
|
// --color-primary-alt: var(--primary-alt);
|
|
|
|
// 'primary': 'var(--primary-3000)',
|
|
muted: 'var(--muted-3000)',
|
|
default: 'var(--text-3000)',
|
|
'muted-alt': 'var(--muted-3000)',
|
|
'primary-alt': 'var(--text-3000)',
|
|
|
|
// --color-border: var(--color-border-primary);
|
|
// --color-border-bold: var(--border-bold-3000);
|
|
// --color-data-color-1: var(--data-color-1);
|
|
// --color-data-color-10: var(--data-color-10);
|
|
|
|
'bg-bridge': 'var(--color-bg-bridge)',
|
|
|
|
// Non-color vars
|
|
'modal-shadow-elevation': 'var(--modal-shadow-elevation)',
|
|
'opacity-disabled': 'var(--opacity-disabled)',
|
|
'font-medium': 'var(--font-medium)',
|
|
'font-semibold': 'var(--font-semibold)',
|
|
'font-sans': 'var(--font-sans)',
|
|
'font-title': 'var(--font-title)',
|
|
'font-mono': 'var(--font-mono)',
|
|
|
|
// Dashboard item colors
|
|
blue: 'var(--blue)',
|
|
purple: 'var(--purple)',
|
|
green: 'var(--green)',
|
|
black: 'var(--black)',
|
|
|
|
//// Data colors (e.g. insight series). Note: colors.ts relies on these values being hexadecimal
|
|
'data-color-1': 'var(--data-color-1)',
|
|
'data-color-1-hover': 'var(--data-color-1-hover)',
|
|
'data-color-2': 'var(--data-color-2)',
|
|
'data-color-3': 'var(--data-color-3)',
|
|
'data-color-4': 'var(--data-color-4)',
|
|
'data-color-5': 'var(--data-color-5)',
|
|
'data-color-6': 'var(--data-color-6)',
|
|
'data-color-7': 'var(--data-color-7)',
|
|
'data-color-8': 'var(--data-color-8)',
|
|
'data-color-9': 'var(--data-color-9)',
|
|
'data-color-10': 'var(--data-color-10)',
|
|
'data-color-11': 'var(--data-color-11)',
|
|
'data-color-12': 'var(--data-color-12)',
|
|
'data-color-13': 'var(--data-color-13)',
|
|
'data-color-14': 'var(--data-color-14)',
|
|
'data-color-15': 'var(--data-color-15)',
|
|
|
|
// Lifecycle series (compiled)
|
|
'color-lifecycle-new': 'var(--color-lifecycle-new)',
|
|
'color-lifecycle-returning': 'var(--color-lifecycle-returning)',
|
|
'color-lifecycle-resurrecting': 'var(--color-lifecycle-resurrecting)',
|
|
'color-lifecycle-dormant': 'var(--color-lifecycle-dormant)',
|
|
'color-lifecycle-new-hover': 'var(--color-lifecycle-new-hover)',
|
|
'color-lifecycle-returning-hover': 'var(--color-lifecycle-returning-hover)',
|
|
'color-lifecycle-resurrecting-hover': 'var(--color-lifecycle-resurrecting-hover)',
|
|
'color-lifecycle-dormant-hover': 'var(--color-lifecycle-dormant-hover)',
|
|
|
|
// Revenue analytics MRR series (compiled)
|
|
'color-revenue-analytics-new': 'var(--color-revenue-analytics-new)',
|
|
'color-revenue-analytics-expansion': 'var(--color-revenue-analytics-expansion)',
|
|
'color-revenue-analytics-contraction': 'var(--color-revenue-analytics-contraction)',
|
|
'color-revenue-analytics-churn': 'var(--color-revenue-analytics-churn)',
|
|
'color-revenue-analytics-new-hover': 'var(--color-revenue-analytics-new-hover)',
|
|
'color-revenue-analytics-expansion-hover': 'var(--color-revenue-analytics-expansion-hover)',
|
|
'color-revenue-analytics-contraction-hover': 'var(--color-revenue-analytics-contraction-hover)',
|
|
'color-revenue-analytics-churn-hover': 'var(--color-revenue-analytics-churn-hover)',
|
|
|
|
// Z-indexes
|
|
'z-top': 'var(--z-top)',
|
|
'z-bottom-notice': 'var(--z-bottom-notice)',
|
|
'z-shortcut-menu': 'var(--z-shortcut-menu)',
|
|
'z-force-modal-above-popovers': 'var(--z-force-modal-above-popovers)',
|
|
'z-tooltip': 'var(--z-tooltip)',
|
|
|
|
// 1066 through 1069 are reserved to be set from code
|
|
'z-definition-popover': 'var(--z-definition-popover)',
|
|
'z-popover': 'var(--z-popover)',
|
|
'z-graph-tooltip': 'var(--z-graph-tooltip)',
|
|
|
|
// 1061 and 1062 are reserved to be set from code
|
|
'z-modal': 'var(--z-modal)',
|
|
'z-mascot-buddy': 'var(--z-mascot-buddy)',
|
|
'z-annotation-popover': 'var(--z-annotation-popover)',
|
|
'z-drawer': 'var(--z-drawer)',
|
|
'z-notifications-popover': 'var(--z-notifications-popover)',
|
|
'z-main-nav': 'var(--z-main-nav)',
|
|
'z-lemon-sidebar': 'var(--z-lemon-sidebar)',
|
|
'z-lemon-activation-sidebar': 'var(--z-lemon-activation-sidebar)',
|
|
'z-mobile-nav-overlay': 'var(--z-mobile-nav-overlay)',
|
|
'z-top-navigation': 'var(--z-top-navigation)',
|
|
'z-content-overlay': 'var(--z-content-overlay)',
|
|
'z-raised': 'var(--z-raised)',
|
|
|
|
// Toasts
|
|
// Update and override from react-toastify
|
|
// which attaches these variables to :root
|
|
// which means they aren't available in the toolbar
|
|
'toastify-color-dark': 'var(--toastify-color-dark)',
|
|
'toastify-color-light': 'var(--toastify-color-light)',
|
|
'toastify-color-info': 'var(--toastify-color-info)',
|
|
'toastify-color-success': 'var(--toastify-color-success)',
|
|
'toastify-color-warning': 'var(--toastify-color-warning)',
|
|
'toastify-color-error': 'var(--toastify-color-error)',
|
|
'toastify-color-progress-info': 'var(--toastify-color-progress-info)',
|
|
'toastify-color-progress-success': 'var(--toastify-color-progress-success)',
|
|
'toastify-color-progress-warning': 'var(--toastify-color-progress-warning)',
|
|
'toastify-color-progress-error': 'var(--toastify-color-progress-error)',
|
|
'toastify-toast-background': 'var(--toastify-toast-background)',
|
|
|
|
// TODO: --color-toastify-toast-width: var(--toastify-toast-width);
|
|
// TODO: --color-toastify-toast-min-height: var(--toastify-toast-min-height);
|
|
// TODO: --color-toastify-toast-max-height: var(--toastify-toast-max-height);
|
|
'toastify-text-color-light': 'var(--toastify-text-color-light)',
|
|
|
|
// In-app prompts
|
|
'in-app-prompts-width': 'var(--in-app-prompts-width)',
|
|
'lettermark-1-bg': 'var(--lettermark-1-bg)',
|
|
'lettermark-1-text': 'var(--lettermark-1-text)',
|
|
'lettermark-2-bg': 'var(--lettermark-2-bg)',
|
|
'lettermark-2-text': 'var(--lettermark-2-text)',
|
|
'lettermark-3-bg': 'var(--lettermark-3-bg)',
|
|
'lettermark-3-text': 'var(--lettermark-3-text)',
|
|
'lettermark-4-bg': 'var(--lettermark-4-bg)',
|
|
'lettermark-4-text': 'var(--lettermark-4-text)',
|
|
'lettermark-5-bg': 'var(--lettermark-5-bg)',
|
|
'lettermark-5-text': 'var(--lettermark-5-text)',
|
|
'lettermark-6-bg': 'var(--lettermark-6-bg)',
|
|
'lettermark-6-text': 'var(--lettermark-6-text)',
|
|
'lettermark-7-bg': 'var(--lettermark-7-bg)',
|
|
'lettermark-7-text': 'var(--lettermark-7-text)',
|
|
'lettermark-8-bg': 'var(--lettermark-8-bg)',
|
|
'lettermark-8-text': 'var(--lettermark-8-text)',
|
|
'lettermark-9-bg': 'var(--lettermark-9-bg)',
|
|
'lettermark-9-text': 'var(--lettermark-9-text)',
|
|
'lettermark-10-bg': 'var(--lettermark-10-bg)',
|
|
'lettermark-10-text': 'var(--lettermark-10-text)',
|
|
'lettermark-11-bg': 'var(--lettermark-11-bg)',
|
|
'lettermark-11-text': 'var(--lettermark-11-text)',
|
|
'lettermark-12-bg': 'var(--lettermark-12-bg)',
|
|
'lettermark-12-text': 'var(--lettermark-12-text)',
|
|
'lettermark-13-bg': 'var(--lettermark-13-bg)',
|
|
'lettermark-13-text': 'var(--lettermark-13-text)',
|
|
'lettermark-14-bg': 'var(--lettermark-14-bg)',
|
|
'lettermark-14-text': 'var(--lettermark-14-text)',
|
|
'lettermark-15-bg': 'var(--lettermark-15-bg)',
|
|
'lettermark-15-text': 'var(--lettermark-15-text)',
|
|
'lettermark-16-bg': 'var(--lettermark-16-bg)',
|
|
'lettermark-16-text': 'var(--lettermark-16-text)',
|
|
|
|
// Modals
|
|
// TODO: --color-modal-backdrop-blur: var(--modal-backdrop-blur);
|
|
'modal-backdrop-color': 'var(--modal-backdrop-color)',
|
|
|
|
// TODO: --color-modal-transition-time: var(--modal-transition-time);
|
|
|
|
// Tooltips
|
|
'tooltip-bg-light': 'var(--tooltip-bg-light)',
|
|
'tooltip-bg-dark': 'var(--tooltip-bg-dark)',
|
|
|
|
// Notebooks
|
|
'notebook-popover-transition-properties': 'var(--notebook-popover-transition-properties)',
|
|
'notebook-column-left-width': 'var(--notebook-column-left-width)',
|
|
'notebook-column-right-width': 'var(--notebook-column-right-width)',
|
|
|
|
// Light mode
|
|
danger: 'var(--danger)',
|
|
'danger-light': 'var(--danger-light)',
|
|
'danger-lighter': 'var(--danger-lighter)',
|
|
'danger-dark': 'var(--danger-dark)',
|
|
'danger-highlight': 'var(--danger-highlight)',
|
|
warning: 'var(--warning)',
|
|
'warning-highlight': 'var(--warning-highlight)',
|
|
'warning-dark': 'var(--warning-dark)',
|
|
highlight: 'var(--highlight)',
|
|
success: 'var(--success)',
|
|
'success-light': 'var(--success-light)',
|
|
'success-lighter': 'var(--success-lighter)',
|
|
'success-dark': 'var(--success-dark)',
|
|
'success-highlight': 'var(--success-highlight)',
|
|
|
|
// --color-muted: var(--color-text-secondary);
|
|
// --color-muted-alt: var(--color-text-secondary);
|
|
// --color-primary-alt: var(--primary-alt);
|
|
mark: 'var(--mark)',
|
|
white: 'var(--white)',
|
|
|
|
// --color-bg-light: var(--color-bg-surface-primary);
|
|
side: 'var(--side)',
|
|
mid: 'var(--mid)',
|
|
border: 'var(--border)',
|
|
'border-light': 'var(--border-light)',
|
|
'border-bold': 'var(--border-bold)',
|
|
transparent: 'var(--transparent)',
|
|
link: 'var(--link)',
|
|
'brand-blue': 'var(--brand-blue)',
|
|
'brand-red': 'var(--brand-red)',
|
|
'brand-yellow': 'var(--brand-yellow)',
|
|
'brand-key': 'var(--brand-key)',
|
|
accent: 'var(--color-accent)',
|
|
'text-3000': 'var(--text-3000)',
|
|
'text-secondary-3000': 'var(--color-text-secondary-3000)',
|
|
'muted-3000': 'var(--muted-3000)',
|
|
'trace-3000': 'var(--trace-3000)',
|
|
'primary-3000': 'var(--color-accent)',
|
|
|
|
'primary-3000-hover': 'var(--color-accent-hover)',
|
|
'primary-3000-active': 'var(--color-accent-active)',
|
|
'secondary-3000': 'var(--secondary-3000)',
|
|
'secondary-3000-hover': 'var(--secondary-3000-hover)',
|
|
'accent-3000': 'var(--color-bg-surface-primary)',
|
|
'bg-3000': 'var(--color-bg-primary)',
|
|
'border-3000': 'var(--color-border-primary)',
|
|
'border-light-opaque': 'var(--border-light-opaque)',
|
|
'border-bold-3000': 'var(--border-bold-3000)',
|
|
'glass-bg-3000': 'var(--glass-bg-3000)',
|
|
'glass-border-3000': 'var(--color-border-primary)',
|
|
'bg-light': 'var(--color-bg-surface-primary)',
|
|
'bg-table': 'var(--color-bg-table)',
|
|
|
|
// --color-link: var(--link);
|
|
// TODO: --color-shadow-elevation-3000: var(--shadow-elevation-3000);
|
|
'primary-3000-frame-bg': 'var(--primary-3000-frame-bg)',
|
|
'primary-3000-button-bg': 'var(--primary-3000-button-bg)',
|
|
'primary-3000-button-border': 'var(--primary-3000-button-border)',
|
|
'primary-3000-button-border-hover': 'var(--primary-3000-button-border-hover)',
|
|
'primary-alt-highlight': 'var(--primary-alt-highlight)',
|
|
'secondary-3000-frame-bg': 'var(--secondary-3000-frame-bg)',
|
|
'secondary-3000-button-bg': 'var(--secondary-3000-button-bg)',
|
|
'secondary-3000-button-border': 'var(--secondary-3000-button-border)',
|
|
'secondary-3000-button-border-hover': 'var(--secondary-3000-button-border-hover)',
|
|
'danger-3000-frame-bg': 'var(--danger-3000-frame-bg)',
|
|
'danger-3000-button-border': 'var(--danger-3000-button-border)',
|
|
'danger-3000-button-border-hover': 'var(--danger-3000-button-border-hover)',
|
|
'tooltip-bg': 'var(--tooltip-bg)',
|
|
}
|
|
|
|
const config = {
|
|
content: [
|
|
// Starting all paths with '../.." to share this between frontend/, playwright/ and common/storybook/
|
|
'../../frontend/src/**/*.{ts,tsx}',
|
|
'../../frontend/src/index.html',
|
|
'../../products/**/frontend/**/*.{ts,tsx}',
|
|
'../../products/**/mcp/apps/**/*.{ts,tsx}',
|
|
'../../services/mcp/src/ui-apps/lib/**/*.{ts,tsx}',
|
|
// @hanzo/quill ships BEM CSS for component look, but uses Tailwind
|
|
// utilities for layout/spacing in its compiled JS. Scan dist here so
|
|
// those utilities get compiled into this pre-built Tailwind bundle.
|
|
'../../packages/quill/packages/quill/dist/**/*.{js,cjs}',
|
|
// @hanzo/quill-charts is consumed from source; its overlays, legends and
|
|
// blocks use Tailwind utilities, so scan its src or those classes get purged.
|
|
'../../packages/quill/packages/charts/src/**/*.{ts,tsx}',
|
|
'!../../frontend/src/**/*Type.ts',
|
|
],
|
|
darkMode: ['selector', '[theme="dark"]'],
|
|
important: true,
|
|
theme: {
|
|
colors: {
|
|
red: {
|
|
50: 'var(--color-red-50)',
|
|
100: 'var(--color-red-100)',
|
|
200: 'var(--color-red-200)',
|
|
300: 'var(--color-red-300)',
|
|
400: 'var(--color-red-400)',
|
|
500: 'var(--color-red-500)',
|
|
600: 'var(--color-red-600)',
|
|
700: 'var(--color-red-700)',
|
|
800: 'var(--color-red-800)',
|
|
900: 'var(--color-red-900)',
|
|
950: 'var(--color-red-950)',
|
|
},
|
|
orange: {
|
|
50: 'var(--color-orange-50)',
|
|
100: 'var(--color-orange-100)',
|
|
200: 'var(--color-orange-200)',
|
|
300: 'var(--color-orange-300)',
|
|
400: 'var(--color-orange-400)',
|
|
500: 'var(--color-orange-500)',
|
|
600: 'var(--color-orange-600)',
|
|
700: 'var(--color-orange-700)',
|
|
800: 'var(--color-orange-800)',
|
|
900: 'var(--color-orange-900)',
|
|
950: 'var(--color-orange-950)',
|
|
},
|
|
amber: {
|
|
50: 'var(--color-amber-50)',
|
|
100: 'var(--color-amber-100)',
|
|
200: 'var(--color-amber-200)',
|
|
300: 'var(--color-amber-300)',
|
|
400: 'var(--color-amber-400)',
|
|
500: 'var(--color-amber-500)',
|
|
600: 'var(--color-amber-600)',
|
|
700: 'var(--color-amber-700)',
|
|
800: 'var(--color-amber-800)',
|
|
900: 'var(--color-amber-900)',
|
|
950: 'var(--color-amber-950)',
|
|
},
|
|
yellow: {
|
|
50: 'var(--color-yellow-50)',
|
|
100: 'var(--color-yellow-100)',
|
|
200: 'var(--color-yellow-200)',
|
|
300: 'var(--color-yellow-300)',
|
|
400: 'var(--color-yellow-400)',
|
|
500: 'var(--color-yellow-500)',
|
|
600: 'var(--color-yellow-600)',
|
|
700: 'var(--color-yellow-700)',
|
|
800: 'var(--color-yellow-800)',
|
|
900: 'var(--color-yellow-900)',
|
|
950: 'var(--color-yellow-950)',
|
|
},
|
|
lime: {
|
|
50: 'var(--color-lime-50)',
|
|
100: 'var(--color-lime-100)',
|
|
200: 'var(--color-lime-200)',
|
|
300: 'var(--color-lime-300)',
|
|
400: 'var(--color-lime-400)',
|
|
500: 'var(--color-lime-500)',
|
|
600: 'var(--color-lime-600)',
|
|
700: 'var(--color-lime-700)',
|
|
800: 'var(--color-lime-800)',
|
|
900: 'var(--color-lime-900)',
|
|
950: 'var(--color-lime-950)',
|
|
},
|
|
green: {
|
|
50: 'var(--color-green-50)',
|
|
100: 'var(--color-green-100)',
|
|
200: 'var(--color-green-200)',
|
|
300: 'var(--color-green-300)',
|
|
400: 'var(--color-green-400)',
|
|
500: 'var(--color-green-500)',
|
|
600: 'var(--color-green-600)',
|
|
700: 'var(--color-green-700)',
|
|
800: 'var(--color-green-800)',
|
|
900: 'var(--color-green-900)',
|
|
950: 'var(--color-green-950)',
|
|
},
|
|
emerald: {
|
|
50: 'var(--color-emerald-50)',
|
|
100: 'var(--color-emerald-100)',
|
|
200: 'var(--color-emerald-200)',
|
|
300: 'var(--color-emerald-300)',
|
|
400: 'var(--color-emerald-400)',
|
|
500: 'var(--color-emerald-500)',
|
|
600: 'var(--color-emerald-600)',
|
|
700: 'var(--color-emerald-700)',
|
|
800: 'var(--color-emerald-800)',
|
|
900: 'var(--color-emerald-900)',
|
|
950: 'var(--color-emerald-950)',
|
|
},
|
|
teal: {
|
|
50: 'var(--color-teal-50)',
|
|
100: 'var(--color-teal-100)',
|
|
200: 'var(--color-teal-200)',
|
|
300: 'var(--color-teal-300)',
|
|
400: 'var(--color-teal-400)',
|
|
500: 'var(--color-teal-500)',
|
|
600: 'var(--color-teal-600)',
|
|
700: 'var(--color-teal-700)',
|
|
800: 'var(--color-teal-800)',
|
|
900: 'var(--color-teal-900)',
|
|
950: 'var(--color-teal-950)',
|
|
},
|
|
cyan: {
|
|
50: 'var(--color-cyan-50)',
|
|
100: 'var(--color-cyan-100)',
|
|
200: 'var(--color-cyan-200)',
|
|
300: 'var(--color-cyan-300)',
|
|
400: 'var(--color-cyan-400)',
|
|
500: 'var(--color-cyan-500)',
|
|
600: 'var(--color-cyan-600)',
|
|
700: 'var(--color-cyan-700)',
|
|
800: 'var(--color-cyan-800)',
|
|
900: 'var(--color-cyan-900)',
|
|
950: 'var(--color-cyan-950)',
|
|
},
|
|
sky: {
|
|
50: 'var(--color-sky-50)',
|
|
100: 'var(--color-sky-100)',
|
|
200: 'var(--color-sky-200)',
|
|
300: 'var(--color-sky-300)',
|
|
400: 'var(--color-sky-400)',
|
|
500: 'var(--color-sky-500)',
|
|
600: 'var(--color-sky-600)',
|
|
700: 'var(--color-sky-700)',
|
|
800: 'var(--color-sky-800)',
|
|
900: 'var(--color-sky-900)',
|
|
950: 'var(--color-sky-950)',
|
|
},
|
|
blue: {
|
|
50: 'var(--color-blue-50)',
|
|
100: 'var(--color-blue-100)',
|
|
200: 'var(--color-blue-200)',
|
|
300: 'var(--color-blue-300)',
|
|
400: 'var(--color-blue-400)',
|
|
500: 'var(--color-blue-500)',
|
|
600: 'var(--color-blue-600)',
|
|
700: 'var(--color-blue-700)',
|
|
800: 'var(--color-blue-800)',
|
|
900: 'var(--color-blue-900)',
|
|
950: 'var(--color-blue-950)',
|
|
},
|
|
indigo: {
|
|
50: 'var(--color-indigo-50)',
|
|
100: 'var(--color-indigo-100)',
|
|
200: 'var(--color-indigo-200)',
|
|
300: 'var(--color-indigo-300)',
|
|
400: 'var(--color-indigo-400)',
|
|
500: 'var(--color-indigo-500)',
|
|
600: 'var(--color-indigo-600)',
|
|
700: 'var(--color-indigo-700)',
|
|
800: 'var(--color-indigo-800)',
|
|
900: 'var(--color-indigo-900)',
|
|
950: 'var(--color-indigo-950)',
|
|
},
|
|
violet: {
|
|
50: 'var(--color-violet-50)',
|
|
100: 'var(--color-violet-100)',
|
|
200: 'var(--color-violet-200)',
|
|
300: 'var(--color-violet-300)',
|
|
400: 'var(--color-violet-400)',
|
|
500: 'var(--color-violet-500)',
|
|
600: 'var(--color-violet-600)',
|
|
700: 'var(--color-violet-700)',
|
|
800: 'var(--color-violet-800)',
|
|
900: 'var(--color-violet-900)',
|
|
950: 'var(--color-violet-950)',
|
|
},
|
|
purple: {
|
|
50: 'var(--color-purple-50)',
|
|
100: 'var(--color-purple-100)',
|
|
200: 'var(--color-purple-200)',
|
|
300: 'var(--color-purple-300)',
|
|
400: 'var(--color-purple-400)',
|
|
500: 'var(--color-purple-500)',
|
|
600: 'var(--color-purple-600)',
|
|
700: 'var(--color-purple-700)',
|
|
800: 'var(--color-purple-800)',
|
|
900: 'var(--color-purple-900)',
|
|
950: 'var(--color-purple-950)',
|
|
},
|
|
fuchsia: {
|
|
50: 'var(--color-fuchsia-50)',
|
|
100: 'var(--color-fuchsia-100)',
|
|
200: 'var(--color-fuchsia-200)',
|
|
300: 'var(--color-fuchsia-300)',
|
|
400: 'var(--color-fuchsia-400)',
|
|
500: 'var(--color-fuchsia-500)',
|
|
600: 'var(--color-fuchsia-600)',
|
|
700: 'var(--color-fuchsia-700)',
|
|
800: 'var(--color-fuchsia-800)',
|
|
900: 'var(--color-fuchsia-900)',
|
|
950: 'var(--color-fuchsia-950)',
|
|
},
|
|
pink: {
|
|
50: 'var(--color-pink-50)',
|
|
100: 'var(--color-pink-100)',
|
|
200: 'var(--color-pink-200)',
|
|
300: 'var(--color-pink-300)',
|
|
400: 'var(--color-pink-400)',
|
|
500: 'var(--color-pink-500)',
|
|
600: 'var(--color-pink-600)',
|
|
700: 'var(--color-pink-700)',
|
|
800: 'var(--color-pink-800)',
|
|
900: 'var(--color-pink-900)',
|
|
950: 'var(--color-pink-950)',
|
|
},
|
|
rose: {
|
|
50: 'var(--color-rose-50)',
|
|
100: 'var(--color-rose-100)',
|
|
200: 'var(--color-rose-200)',
|
|
300: 'var(--color-rose-300)',
|
|
400: 'var(--color-rose-400)',
|
|
500: 'var(--color-rose-500)',
|
|
600: 'var(--color-rose-600)',
|
|
700: 'var(--color-rose-700)',
|
|
800: 'var(--color-rose-800)',
|
|
900: 'var(--color-rose-900)',
|
|
950: 'var(--color-rose-950)',
|
|
},
|
|
slate: {
|
|
50: 'var(--color-slate-50)',
|
|
100: 'var(--color-slate-100)',
|
|
200: 'var(--color-slate-200)',
|
|
300: 'var(--color-slate-300)',
|
|
400: 'var(--color-slate-400)',
|
|
500: 'var(--color-slate-500)',
|
|
600: 'var(--color-slate-600)',
|
|
700: 'var(--color-slate-700)',
|
|
800: 'var(--color-slate-800)',
|
|
900: 'var(--color-slate-900)',
|
|
950: 'var(--color-slate-950)',
|
|
},
|
|
gray: {
|
|
50: 'var(--color-gray-50)',
|
|
100: 'var(--color-gray-100)',
|
|
200: 'var(--color-gray-200)',
|
|
300: 'var(--color-gray-300)',
|
|
400: 'var(--color-gray-400)',
|
|
500: 'var(--color-gray-500)',
|
|
600: 'var(--color-gray-600)',
|
|
700: 'var(--color-gray-700)',
|
|
800: 'var(--color-gray-800)',
|
|
900: 'var(--color-gray-900)',
|
|
950: 'var(--color-gray-950)',
|
|
},
|
|
zinc: {
|
|
50: 'var(--color-zinc-50)',
|
|
100: 'var(--color-zinc-100)',
|
|
200: 'var(--color-zinc-200)',
|
|
300: 'var(--color-zinc-300)',
|
|
400: 'var(--color-zinc-400)',
|
|
500: 'var(--color-zinc-500)',
|
|
600: 'var(--color-zinc-600)',
|
|
700: 'var(--color-zinc-700)',
|
|
800: 'var(--color-zinc-800)',
|
|
900: 'var(--color-zinc-900)',
|
|
950: 'var(--color-zinc-950)',
|
|
},
|
|
neutral: {
|
|
50: 'var(--color-neutral-50)',
|
|
100: 'var(--color-neutral-100)',
|
|
200: 'var(--color-neutral-200)',
|
|
300: 'var(--color-neutral-300)',
|
|
400: 'var(--color-neutral-400)',
|
|
500: 'var(--color-neutral-500)',
|
|
600: 'var(--color-neutral-600)',
|
|
700: 'var(--color-neutral-700)',
|
|
800: 'var(--color-neutral-800)',
|
|
900: 'var(--color-neutral-900)',
|
|
950: 'var(--color-neutral-950)',
|
|
},
|
|
stone: {
|
|
50: 'var(--color-stone-50)',
|
|
100: 'var(--color-stone-100)',
|
|
200: 'var(--color-stone-200)',
|
|
300: 'var(--color-stone-300)',
|
|
400: 'var(--color-stone-400)',
|
|
500: 'var(--color-stone-500)',
|
|
600: 'var(--color-stone-600)',
|
|
700: 'var(--color-stone-700)',
|
|
800: 'var(--color-stone-800)',
|
|
900: 'var(--color-stone-900)',
|
|
950: 'var(--color-stone-950)',
|
|
},
|
|
black: 'var(--color-black)',
|
|
white: 'var(--color-white)',
|
|
},
|
|
extend: {
|
|
animation: {
|
|
// Default pulse animation but run for only 5 iterations
|
|
'pulse-5': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 5',
|
|
// Pulsing glow effect for highlighting UI elements
|
|
'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
|
|
// Fade out after a delay
|
|
'fade-out-delayed': 'fade-out-delayed 5s ease-out forwards',
|
|
// Quick horizontal shake
|
|
shake: 'shake 0.5s ease-in-out',
|
|
'slide-in-right': 'slide-in-right 0.28s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
},
|
|
keyframes: {
|
|
'pulse-glow': {
|
|
'0%, 100%': {
|
|
boxShadow: '0 0 2px 1px var(--color-accent)',
|
|
},
|
|
'50%': {
|
|
boxShadow: '0 0 6px 2px var(--color-accent)',
|
|
},
|
|
},
|
|
'fade-out-delayed': {
|
|
'0%, 30%': { opacity: '1' },
|
|
'100%': { opacity: '0' },
|
|
},
|
|
shake: {
|
|
'0%, 100%': { transform: 'translateX(0)' },
|
|
'20%': { transform: 'translateX(-3px)' },
|
|
'40%': { transform: 'translateX(3px)' },
|
|
'60%': { transform: 'translateX(-2px)' },
|
|
'80%': { transform: 'translateX(2px)' },
|
|
},
|
|
'slide-in-right': {
|
|
'0%': { opacity: '0', transform: 'translateX(calc(100% + 1.5rem))' },
|
|
'100%': { opacity: '1', transform: 'translateX(0)' },
|
|
},
|
|
},
|
|
colors: {
|
|
...deprecatedColors,
|
|
// TODO: Move all colors over to Tailwind
|
|
// Currently color utility classes are still generated with SCSS in colors.scss due to relying on our color
|
|
// CSS vars in lots of stylesheets
|
|
|
|
// purple: '#B62AD9',
|
|
'primary-highlight': 'var(--primary-highlight)',
|
|
},
|
|
backgroundColor: {
|
|
...commonColors,
|
|
primary: 'var(--color-bg-primary)',
|
|
|
|
'surface-primary': 'var(--color-bg-surface-primary)',
|
|
'surface-secondary': 'var(--color-bg-surface-secondary)',
|
|
'surface-tertiary': 'var(--color-bg-surface-tertiary)',
|
|
'surface-tooltip': 'var(--color-bg-surface-tooltip)',
|
|
'surface-tooltip-inverse': 'var(--color-bg-surface-tooltip-inverse)',
|
|
'surface-popover': 'var(--color-bg-surface-popover)',
|
|
'surface-popover-inverse': 'var(--color-bg-surface-popover-inverse)',
|
|
'fill-primary': 'var(--color-bg-fill-primary)',
|
|
'fill-secondary': 'var(--color-bg-fill-secondary)',
|
|
'fill-tertiary': 'var(--color-bg-fill-tertiary)',
|
|
'fill-highlight-50': 'var(--color-bg-fill-highlight-50)',
|
|
'fill-highlight-inverse-50': 'var(--color-bg-fill-highlight-inverse-50)',
|
|
'fill-highlight-100': 'var(--color-bg-fill-highlight-100)',
|
|
'fill-highlight-inverse-100': 'var(--color-bg-fill-highlight-inverse-100)',
|
|
'fill-highlight-150': 'var(--color-bg-fill-highlight-150)',
|
|
'fill-highlight-inverse-150': 'var(--color-bg-fill-highlight-inverse-150)',
|
|
'fill-highlight-200': 'var(--color-bg-fill-highlight-200)',
|
|
'fill-highlight-inverse-200': 'var(--color-bg-fill-highlight-inverse-200)',
|
|
'fill-primary-highlight': 'var(--color-bg-fill-primary-highlight)',
|
|
'fill-info-secondary': 'var(--color-bg-fill-info-secondary)',
|
|
'fill-info-tertiary': 'var(--color-bg-fill-info-tertiary)',
|
|
'fill-info-highlight': 'var(--color-bg-fill-info-highlight)',
|
|
'fill-warning-secondary': 'var(--color-bg-fill-warning-secondary)',
|
|
'fill-warning-tertiary': 'var(--color-bg-fill-warning-tertiary)',
|
|
'fill-warning-highlight': 'var(--color-bg-fill-warning-highlight)',
|
|
'fill-error-secondary': 'var(--color-bg-fill-error-secondary)',
|
|
'fill-error-tertiary': 'var(--color-bg-fill-error-tertiary)',
|
|
'fill-error-highlight': 'var(--color-bg-fill-error-highlight)',
|
|
'fill-success-secondary': 'var(--color-bg-fill-success-secondary)',
|
|
'fill-success-tertiary': 'var(--color-bg-fill-success-tertiary)',
|
|
'fill-success-highlight': 'var(--color-bg-fill-success-highlight)',
|
|
'fill-button-group-tertiary-hover': 'var(--color-bg-fill-button-group-tertiary-hover)',
|
|
'fill-button-tertiary-hover': 'var(--color-bg-fill-button-tertiary-hover)',
|
|
'fill-button-tertiary-hover-inverse': 'var(--color-bg-fill-button-tertiary-hover-inverse)',
|
|
'fill-button-tertiary-active': 'var(--color-bg-fill-button-tertiary-active)',
|
|
'fill-button-tertiary-active-inverse': 'var(--color-bg-fill-button-tertiary-active-inverse)',
|
|
'fill-input': 'var(--color-bg-fill-input)',
|
|
'fill-switch': 'var(--color-bg-fill-switch)',
|
|
'fill-slider-rail': 'var(--color-bg-fill-slider-rail)',
|
|
'fill-scroll-thumb': 'var(--color-bg-fill-scroll-thumb)',
|
|
'border-primary': 'var(--color-bg-border-primary)',
|
|
'border-secondary': 'var(--color-bg-border-secondary)',
|
|
},
|
|
textColor: {
|
|
...commonColors,
|
|
|
|
primary: 'var(--color-text-primary)',
|
|
'primary-inverse': 'var(--color-text-primary-inverse)',
|
|
'secondary-inverse': 'var(--color-text-secondary-inverse)',
|
|
secondary: 'var(--color-text-secondary)',
|
|
tertiary: 'var(--color-text-tertiary)',
|
|
success: 'var(--color-text-success)',
|
|
warning: 'var(--color-text-warning)',
|
|
error: 'var(--color-text-error)',
|
|
},
|
|
fill: {
|
|
// theme-aware SVG fill, mirrors text-primary (flips with [theme="dark"])
|
|
primary: 'var(--color-text-primary)',
|
|
},
|
|
borderColor: {
|
|
...commonColors,
|
|
|
|
primary: 'var(--color-border-primary)',
|
|
secondary: 'var(--color-border-secondary)',
|
|
info: 'var(--color-border-info)',
|
|
warning: 'var(--color-border-warning)',
|
|
error: 'var(--color-border-error)',
|
|
success: 'var(--color-border-success)',
|
|
},
|
|
ringColor: {
|
|
...commonColors,
|
|
|
|
primary: 'var(--color-border-primary)',
|
|
secondary: 'var(--color-border-secondary)',
|
|
info: 'var(--color-border-info)',
|
|
warning: 'var(--color-border-warning)',
|
|
error: 'var(--color-border-error)',
|
|
success: 'var(--color-border-success)',
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'Emoji Flags Polyfill',
|
|
'Zen',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'Segoe UI',
|
|
'Roboto',
|
|
'Helvetica Neue',
|
|
'Helvetica',
|
|
'Arial',
|
|
'sans-serif',
|
|
'Apple Color Emoji',
|
|
'Segoe UI Emoji',
|
|
'Segoe UI Symbol',
|
|
],
|
|
title: [
|
|
'Emoji Flags Polyfill',
|
|
'Zen',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'Segoe UI',
|
|
'Roboto',
|
|
'Helvetica Neue',
|
|
'Helvetica',
|
|
'Arial',
|
|
'sans-serif',
|
|
'Apple Color Emoji',
|
|
'Segoe UI Emoji',
|
|
'Segoe UI Symbol',
|
|
],
|
|
mono: [
|
|
'Emoji Flags Polyfill',
|
|
'ui-monospace',
|
|
'SFMono-Regular',
|
|
'SF Mono',
|
|
'Menlo',
|
|
'Consolas',
|
|
'Liberation Mono',
|
|
'monospace',
|
|
],
|
|
},
|
|
screens: {
|
|
// Sync with vars.scss
|
|
sm: '576px',
|
|
md: '768px',
|
|
lg: '992px',
|
|
xl: '1200px',
|
|
'2xl': '1600px',
|
|
},
|
|
borderRadius: {
|
|
none: '0',
|
|
sm: 'var(--radius-sm)',
|
|
DEFAULT: 'var(--radius)',
|
|
lg: 'var(--radius-lg)',
|
|
full: '9999px',
|
|
},
|
|
spacing: {
|
|
// Some additional larger widths for compatibility with our pre-Tailwind system
|
|
// Don't add new ones here, in new code just use the `w-[32rem]` style for arbitrary values
|
|
13: '3.25rem',
|
|
15: '3.75rem',
|
|
18: '4.5rem',
|
|
// All whole number values up to 18 ensured above
|
|
30: '7.5rem',
|
|
50: '12.5rem',
|
|
60: '15rem',
|
|
80: '20rem',
|
|
100: '25rem',
|
|
120: '30rem',
|
|
140: '35rem',
|
|
160: '40rem',
|
|
180: '45rem',
|
|
192: '48rem',
|
|
200: '50rem',
|
|
// All whole number values divisible by 20 up to 200 ensured above
|
|
248: '62rem',
|
|
300: '75rem',
|
|
'scene-padding': 'var(--scene-padding)',
|
|
},
|
|
rotate: {
|
|
270: '270deg',
|
|
},
|
|
minWidth: {
|
|
'1/3': '33.333333%',
|
|
},
|
|
maxWidth: {
|
|
'1/2': '50%',
|
|
},
|
|
boxShadow: {
|
|
DEFAULT: 'var(--shadow-elevation-3000)',
|
|
},
|
|
flex: {
|
|
2: '2 2 0%',
|
|
3: '3 3 0%',
|
|
},
|
|
zIndex: {
|
|
top: 'var(--z-top)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/container-queries'),
|
|
plugin(({ addUtilities, theme }) => {
|
|
const spacing = theme('spacing')
|
|
const newUtilities = {}
|
|
|
|
// Standard spacing utilities for backwards compatibility
|
|
for (const [key, value] of Object.entries(spacing)) {
|
|
if (!key.includes('.')) {
|
|
newUtilities[`.deprecated-space-y-${key} > :not([hidden]) ~ :not([hidden])`] = {
|
|
'--tw-space-y-reverse': '0',
|
|
'margin-top': `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
|
|
'margin-bottom': `calc(${value} * var(--tw-space-y-reverse))`,
|
|
}
|
|
newUtilities[`.deprecated-space-x-${key} > :not([hidden]) ~ :not([hidden])`] = {
|
|
'--tw-space-x-reverse': '0',
|
|
'margin-right': `calc(${value} * var(--tw-space-x-reverse))`,
|
|
'margin-left': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
|
|
}
|
|
}
|
|
}
|
|
|
|
addUtilities(newUtilities)
|
|
}),
|
|
],
|
|
}
|
|
|
|
module.exports = config
|