@orchard9ai/design-system
Version:
DaisyUI-based component library for Orchard9 applications
992 lines (987 loc) • 19.3 kB
text/typescript
interface ColorToken {
value: string;
rgb?: string;
hsl?: string;
}
interface SpacingToken {
value: string;
pixel: number;
rem: number;
}
interface TypographyToken {
fontSize: string;
lineHeight: string;
letterSpacing?: string;
}
interface Tokens {
colors: {
primary: string;
'primary-focus': string;
'primary-content': string;
secondary: string;
'secondary-focus': string;
'secondary-content': string;
accent: string;
'accent-focus': string;
'accent-content': string;
neutral: string;
'neutral-focus': string;
'neutral-content': string;
'base-100': string;
'base-200': string;
'base-300': string;
'base-content': string;
info: string;
success: string;
warning: string;
error: string;
};
spacing: Record<string, string>;
typography: {
fontSize: Record<string, [string, {
lineHeight: string;
}]>;
fontWeight: Record<string, string>;
};
animation: {
duration: Record<string, string>;
easing: Record<string, string>;
};
shadows: Record<string, string>;
borderRadius: Record<string, string>;
}
type Theme = 'light' | 'dark' | 'cupcake' | 'business' | 'grove-light' | 'grove-dark';
type ThemeTokens = Record<Theme, Tokens>;
/**
* Hook to get all design tokens for the current theme
* @returns Complete token object for the active theme
*/
declare const useTokens: () => Tokens;
/**
* Hook to get color tokens for the current theme
* @returns Color token object with all semantic color values
*/
declare const useColorTokens: () => {
primary: string;
'primary-focus': string;
'primary-content': string;
secondary: string;
'secondary-focus': string;
'secondary-content': string;
accent: string;
'accent-focus': string;
'accent-content': string;
neutral: string;
'neutral-focus': string;
'neutral-content': string;
'base-100': string;
'base-200': string;
'base-300': string;
'base-content': string;
info: string;
success: string;
warning: string;
error: string;
};
/**
* Hook to get spacing tokens
* @returns Spacing scale object with rem/px values
*/
declare const useSpacingTokens: () => Record<string, string>;
/**
* Hook to get typography tokens
* @returns Typography scale with font sizes, weights, and line heights
*/
declare const useTypographyTokens: () => {
fontSize: Record<string, [string, {
lineHeight: string;
}]>;
fontWeight: Record<string, string>;
};
/**
* Hook to get animation tokens
* @returns Animation duration and easing values
*/
declare const useAnimationTokens: () => {
duration: Record<string, string>;
easing: Record<string, string>;
};
/**
* Hook to get shadow tokens
* @returns Box shadow definitions for different elevations
*/
declare const useShadowTokens: () => Record<string, string>;
/**
* Hook to get border radius tokens
* @returns Border radius values for different corner styles
*/
declare const useBorderRadiusTokens: () => Record<string, string>;
/**
* Hook to get a specific color token value
* @param colorName - The color token name (e.g., 'primary', 'base-100')
* @returns The hex color value for the current theme
*/
declare const useColorValue: (colorName: keyof Tokens["colors"]) => string;
/**
* Hook to get a specific spacing token value
* @param spacing - The spacing token key (e.g., '4', '8', '16')
* @returns The spacing value in rem/px
*/
declare const useSpacingValue: (spacing: keyof Tokens["spacing"]) => string | undefined;
/**
* Complete token object for all themes
*/
declare const designTokens: ThemeTokens;
/**
* Available theme names
*/
declare const themes: Theme[];
/**
* Default theme
*/
declare const defaultTheme: Theme;
/**
* Light theme tokens
*/
declare const lightTokens: Tokens;
/**
* Dark theme tokens
*/
declare const darkTokens: Tokens;
/**
* Cupcake theme tokens
*/
declare const cupcakeTokens: Tokens;
/**
* Business theme tokens
*/
declare const businessTokens: Tokens;
/**
* Get tokens for a specific theme
* @param theme - Theme name
* @returns Token object for the specified theme
*/
declare const getThemeTokens: (theme: Theme) => Tokens;
/**
* Check if a theme exists
* @param theme - Theme name to check
* @returns Whether the theme is valid
*/
declare const isValidTheme: (theme: string) => theme is Theme;
var light = {
colors: {
primary: "#6419E6",
"primary-focus": "#5016C7",
"primary-content": "#FFFFFF",
secondary: "#E879F9",
"secondary-focus": "#D946EF",
"secondary-content": "#FFFFFF",
accent: "#F59E0B",
"accent-focus": "#D97706",
"accent-content": "#FFFFFF",
neutral: "#3D4451",
"neutral-focus": "#2A2E37",
"neutral-content": "#FFFFFF",
"base-100": "#FFFFFF",
"base-200": "#F2F2F2",
"base-300": "#E5E6E6",
"base-content": "#1F2937",
info: "#3ABFF8",
success: "#36D399",
warning: "#FBBD23",
error: "#F87272"
},
spacing: {
"0": "0px",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"8": "2rem",
"10": "2.5rem",
"12": "3rem",
"16": "4rem",
"20": "5rem",
"24": "6rem"
},
typography: {
fontSize: {
xs: [
"0.6875rem",
{
lineHeight: "0.9375rem"
}
],
sm: [
"0.8125rem",
{
lineHeight: "1.125rem"
}
],
base: [
"0.9375rem",
{
lineHeight: "1.375rem"
}
],
lg: [
"1rem",
{
lineHeight: "1.5rem"
}
],
xl: [
"1.0625rem",
{
lineHeight: "1.5rem"
}
],
"2xl": [
"1.1875rem",
{
lineHeight: "1.625rem"
}
],
"3xl": [
"1.375rem",
{
lineHeight: "1.75rem"
}
],
"4xl": [
"1.625rem",
{
lineHeight: "1.875rem"
}
],
"5xl": [
"2rem",
{
lineHeight: "1"
}
]
},
fontWeight: {
normal: "400",
medium: "500",
semibold: "600",
bold: "700"
}
},
animation: {
duration: {
fast: "150ms",
base: "300ms",
slow: "500ms",
slower: "700ms"
},
easing: {
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
linear: "linear",
"in": "cubic-bezier(0.4, 0, 1, 1)",
out: "cubic-bezier(0, 0, 0.2, 1)",
inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
}
},
shadows: {
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
},
borderRadius: {
none: "0",
sm: "0.125rem",
base: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
full: "9999px"
}
};
var dark = {
colors: {
primary: "#6419E6",
"primary-focus": "#5016C7",
"primary-content": "#FFFFFF",
secondary: "#E879F9",
"secondary-focus": "#D946EF",
"secondary-content": "#FFFFFF",
accent: "#F59E0B",
"accent-focus": "#D97706",
"accent-content": "#FFFFFF",
neutral: "#2A2E37",
"neutral-focus": "#16181D",
"neutral-content": "#A6ADBB",
"base-100": "#1D232A",
"base-200": "#191E24",
"base-300": "#15191E",
"base-content": "#A6ADBB",
info: "#3ABFF8",
success: "#36D399",
warning: "#FBBD23",
error: "#F87272"
},
spacing: {
"0": "0px",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"8": "2rem",
"10": "2.5rem",
"12": "3rem",
"16": "4rem",
"20": "5rem",
"24": "6rem"
},
typography: {
fontSize: {
xs: [
"0.6875rem",
{
lineHeight: "0.9375rem"
}
],
sm: [
"0.8125rem",
{
lineHeight: "1.125rem"
}
],
base: [
"0.9375rem",
{
lineHeight: "1.375rem"
}
],
lg: [
"1rem",
{
lineHeight: "1.5rem"
}
],
xl: [
"1.0625rem",
{
lineHeight: "1.5rem"
}
],
"2xl": [
"1.1875rem",
{
lineHeight: "1.625rem"
}
],
"3xl": [
"1.375rem",
{
lineHeight: "1.75rem"
}
],
"4xl": [
"1.625rem",
{
lineHeight: "1.875rem"
}
],
"5xl": [
"2rem",
{
lineHeight: "1"
}
]
},
fontWeight: {
normal: "400",
medium: "500",
semibold: "600",
bold: "700"
}
},
animation: {
duration: {
fast: "150ms",
base: "300ms",
slow: "500ms",
slower: "700ms"
},
easing: {
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
linear: "linear",
"in": "cubic-bezier(0.4, 0, 1, 1)",
out: "cubic-bezier(0, 0, 0.2, 1)",
inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
}
},
shadows: {
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
},
borderRadius: {
none: "0",
sm: "0.125rem",
base: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
full: "9999px"
}
};
var cupcake = {
colors: {
primary: "#0E7490",
"primary-focus": "#0F3F4F",
"primary-content": "#1F2937",
secondary: "#D946EF",
"secondary-focus": "#C026D3",
"secondary-content": "#1F2937",
accent: "#EEAF3A",
"accent-focus": "#E9A429",
"accent-content": "#1F2937",
neutral: "#291334",
"neutral-focus": "#1F0E2B",
"neutral-content": "#D7DDE4",
"base-100": "#FAF7F5",
"base-200": "#EFEAE6",
"base-300": "#E7E2DF",
"base-content": "#291334",
info: "#3ABFF8",
success: "#36D399",
warning: "#FBBD23",
error: "#F87272"
},
spacing: {
"0": "0px",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"8": "2rem",
"10": "2.5rem",
"12": "3rem",
"16": "4rem",
"20": "5rem",
"24": "6rem"
},
typography: {
fontSize: {
xs: [
"0.6875rem",
{
lineHeight: "0.9375rem"
}
],
sm: [
"0.8125rem",
{
lineHeight: "1.125rem"
}
],
base: [
"0.9375rem",
{
lineHeight: "1.375rem"
}
],
lg: [
"1rem",
{
lineHeight: "1.5rem"
}
],
xl: [
"1.0625rem",
{
lineHeight: "1.5rem"
}
],
"2xl": [
"1.1875rem",
{
lineHeight: "1.625rem"
}
],
"3xl": [
"1.375rem",
{
lineHeight: "1.75rem"
}
],
"4xl": [
"1.625rem",
{
lineHeight: "1.875rem"
}
],
"5xl": [
"2rem",
{
lineHeight: "1"
}
]
},
fontWeight: {
normal: "400",
medium: "500",
semibold: "600",
bold: "700"
}
},
animation: {
duration: {
fast: "150ms",
base: "300ms",
slow: "500ms",
slower: "700ms"
},
easing: {
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
linear: "linear",
"in": "cubic-bezier(0.4, 0, 1, 1)",
out: "cubic-bezier(0, 0, 0.2, 1)",
inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
}
},
shadows: {
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
},
borderRadius: {
none: "0",
sm: "0.125rem",
base: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
full: "9999px"
}
};
var business = {
colors: {
primary: "#1C4ED8",
"primary-focus": "#1E40AF",
"primary-content": "#FFFFFF",
secondary: "#7C3AED",
"secondary-focus": "#6D28D9",
"secondary-content": "#FFFFFF",
accent: "#F59E0B",
"accent-focus": "#D97706",
"accent-content": "#FFFFFF",
neutral: "#2D3748",
"neutral-focus": "#1A202C",
"neutral-content": "#A0AEC0",
"base-100": "#FFFFFF",
"base-200": "#F7FAFC",
"base-300": "#EDF2F7",
"base-content": "#1A202C",
info: "#3182CE",
success: "#38A169",
warning: "#D69E2E",
error: "#E53E3E"
},
spacing: {
"0": "0px",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"8": "2rem",
"10": "2.5rem",
"12": "3rem",
"16": "4rem",
"20": "5rem",
"24": "6rem"
},
typography: {
fontSize: {
xs: [
"0.6875rem",
{
lineHeight: "0.9375rem"
}
],
sm: [
"0.8125rem",
{
lineHeight: "1.125rem"
}
],
base: [
"0.9375rem",
{
lineHeight: "1.375rem"
}
],
lg: [
"1rem",
{
lineHeight: "1.5rem"
}
],
xl: [
"1.0625rem",
{
lineHeight: "1.5rem"
}
],
"2xl": [
"1.1875rem",
{
lineHeight: "1.625rem"
}
],
"3xl": [
"1.375rem",
{
lineHeight: "1.75rem"
}
],
"4xl": [
"1.625rem",
{
lineHeight: "1.875rem"
}
],
"5xl": [
"2rem",
{
lineHeight: "1"
}
]
},
fontWeight: {
normal: "400",
medium: "500",
semibold: "600",
bold: "700"
}
},
animation: {
duration: {
fast: "150ms",
base: "300ms",
slow: "500ms",
slower: "700ms"
},
easing: {
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
linear: "linear",
"in": "cubic-bezier(0.4, 0, 1, 1)",
out: "cubic-bezier(0, 0, 0.2, 1)",
inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
}
},
shadows: {
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
},
borderRadius: {
none: "0",
sm: "0.125rem",
base: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
full: "9999px"
}
};
var tokens = {
light: light,
dark: dark,
cupcake: cupcake,
business: business,
"grove-dark": {
colors: {
primary: "#22c55e",
"primary-focus": "#16a34a",
"primary-content": "#ffffff",
secondary: "#fbbf24",
"secondary-focus": "#f59e0b",
"secondary-content": "#000000",
accent: "#22c55e",
"accent-focus": "#16a34a",
"accent-content": "#ffffff",
neutral: "#27272a",
"neutral-focus": "#18181b",
"neutral-content": "#fafafa",
"base-100": "#09090b",
"base-200": "#18181b",
"base-300": "#27272a",
"base-content": "#fafafa",
info: "#3b82f6",
success: "#22c55e",
warning: "#fbbf24",
error: "#ef4444"
},
spacing: {
"0": "0px",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"8": "2rem",
"10": "2.5rem",
"12": "3rem",
"16": "4rem",
"20": "5rem",
"24": "6rem"
},
typography: {
fontSize: {
xs: [
"0.6875rem",
{
lineHeight: "0.9375rem"
}
],
sm: [
"0.8125rem",
{
lineHeight: "1.125rem"
}
],
base: [
"0.9375rem",
{
lineHeight: "1.375rem"
}
],
lg: [
"1rem",
{
lineHeight: "1.5rem"
}
],
xl: [
"1.0625rem",
{
lineHeight: "1.5rem"
}
],
"2xl": [
"1.1875rem",
{
lineHeight: "1.625rem"
}
],
"3xl": [
"1.375rem",
{
lineHeight: "1.75rem"
}
],
"4xl": [
"1.625rem",
{
lineHeight: "1.875rem"
}
],
"5xl": [
"2rem",
{
lineHeight: "1"
}
]
},
fontWeight: {
normal: "400",
medium: "500",
semibold: "600",
bold: "700"
}
},
animation: {
duration: {
fast: "150ms",
base: "300ms",
slow: "500ms",
slower: "700ms"
},
easing: {
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
linear: "linear",
"in": "cubic-bezier(0.4, 0, 1, 1)",
out: "cubic-bezier(0, 0, 0.2, 1)",
inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
}
},
shadows: {
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
},
borderRadius: {
none: "0",
sm: "0.125rem",
base: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
full: "9999px"
}
},
"grove-light": {
colors: {
primary: "#22c55e",
"primary-focus": "#16a34a",
"primary-content": "#ffffff",
secondary: "#fbbf24",
"secondary-focus": "#f59e0b",
"secondary-content": "#000000",
accent: "#22c55e",
"accent-focus": "#16a34a",
"accent-content": "#ffffff",
neutral: "#f5f5f4",
"neutral-focus": "#e7e5e4",
"neutral-content": "#1c1917",
"base-100": "#fefefe",
"base-200": "#f8f8f7",
"base-300": "#f5f5f4",
"base-content": "#1a1a1a",
info: "#3b82f6",
success: "#22c55e",
warning: "#f59e0b",
error: "#dc2626"
},
spacing: {
"0": "0px",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"8": "2rem",
"10": "2.5rem",
"12": "3rem",
"16": "4rem",
"20": "5rem",
"24": "6rem"
},
typography: {
fontSize: {
xs: [
"0.6875rem",
{
lineHeight: "0.9375rem"
}
],
sm: [
"0.8125rem",
{
lineHeight: "1.125rem"
}
],
base: [
"0.9375rem",
{
lineHeight: "1.375rem"
}
],
lg: [
"1rem",
{
lineHeight: "1.5rem"
}
],
xl: [
"1.0625rem",
{
lineHeight: "1.5rem"
}
],
"2xl": [
"1.1875rem",
{
lineHeight: "1.625rem"
}
],
"3xl": [
"1.375rem",
{
lineHeight: "1.75rem"
}
],
"4xl": [
"1.625rem",
{
lineHeight: "1.875rem"
}
],
"5xl": [
"2rem",
{
lineHeight: "1"
}
]
},
fontWeight: {
normal: "400",
medium: "500",
semibold: "600",
bold: "700"
}
},
animation: {
duration: {
fast: "150ms",
base: "300ms",
slow: "500ms",
slower: "700ms"
},
easing: {
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
linear: "linear",
"in": "cubic-bezier(0.4, 0, 1, 1)",
out: "cubic-bezier(0, 0, 0.2, 1)",
inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
}
},
shadows: {
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
},
borderRadius: {
none: "0",
sm: "0.125rem",
base: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
full: "9999px"
}
}
};
export { type ColorToken, type SpacingToken, type Theme, type ThemeTokens, type Tokens, type TypographyToken, businessTokens, cupcakeTokens, darkTokens, defaultTheme, designTokens, getThemeTokens, isValidTheme, lightTokens, themes, tokens, useAnimationTokens, useBorderRadiusTokens, useColorTokens, useColorValue, useShadowTokens, useSpacingTokens, useSpacingValue, useTokens, useTypographyTokens };