@orchard9ai/design-system
Version:
DaisyUI-based component library for Orchard9 applications
951 lines (945 loc) • 22.1 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/tokens/index.ts
var tokens_exports = {};
__export(tokens_exports, {
businessTokens: () => businessTokens,
cupcakeTokens: () => cupcakeTokens,
darkTokens: () => darkTokens,
defaultTheme: () => defaultTheme,
designTokens: () => designTokens,
getThemeTokens: () => getThemeTokens,
isValidTheme: () => isValidTheme,
lightTokens: () => lightTokens,
themes: () => themes,
tokens: () => tokens_default,
useAnimationTokens: () => useAnimationTokens,
useBorderRadiusTokens: () => useBorderRadiusTokens,
useColorTokens: () => useColorTokens,
useColorValue: () => useColorValue,
useShadowTokens: () => useShadowTokens,
useSpacingTokens: () => useSpacingTokens,
useSpacingValue: () => useSpacingValue,
useTokens: () => useTokens,
useTypographyTokens: () => useTypographyTokens
});
module.exports = __toCommonJS(tokens_exports);
// src/theme/ThemeProvider.tsx
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var ThemeContext = (0, import_react.createContext)(void 0);
var useTheme = () => {
const context = (0, import_react.useContext)(ThemeContext);
if (!context) {
throw new Error("useTheme must be used within ThemeProvider");
}
return context;
};
// src/tokens/hooks.ts
var import_react2 = require("react");
// src/tokens/tokens.json
var tokens_default = {
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"
}
},
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"
}
},
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"
}
},
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"
}
},
"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"
}
}
};
// src/tokens/hooks.ts
var useTokens = () => {
const { theme } = useTheme();
return (0, import_react2.useMemo)(() => {
const themeTokens = tokens_default[theme] || tokens_default.light;
return themeTokens;
}, [theme]);
};
var useColorTokens = () => {
const tokens = useTokens();
return tokens.colors;
};
var useSpacingTokens = () => {
const tokens = useTokens();
return tokens.spacing;
};
var useTypographyTokens = () => {
const tokens = useTokens();
return tokens.typography;
};
var useAnimationTokens = () => {
const tokens = useTokens();
return tokens.animation;
};
var useShadowTokens = () => {
const tokens = useTokens();
return tokens.shadows;
};
var useBorderRadiusTokens = () => {
const tokens = useTokens();
return tokens.borderRadius;
};
var useColorValue = (colorName) => {
const colors = useColorTokens();
return colors[colorName];
};
var useSpacingValue = (spacing) => {
const spacingTokens = useSpacingTokens();
return spacingTokens[spacing];
};
// src/tokens/constants.ts
var designTokens = tokens_default;
var themes = ["light", "dark", "cupcake", "business", "grove-light", "grove-dark"];
var defaultTheme = "light";
var lightTokens = designTokens.light;
var darkTokens = designTokens.dark;
var cupcakeTokens = designTokens.cupcake;
var businessTokens = designTokens.business;
var getThemeTokens = (theme) => {
return designTokens[theme];
};
var isValidTheme = (theme) => {
return themes.includes(theme);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
businessTokens,
cupcakeTokens,
darkTokens,
defaultTheme,
designTokens,
getThemeTokens,
isValidTheme,
lightTokens,
themes,
tokens,
useAnimationTokens,
useBorderRadiusTokens,
useColorTokens,
useColorValue,
useShadowTokens,
useSpacingTokens,
useSpacingValue,
useTokens,
useTypographyTokens
});
//# sourceMappingURL=tokens.js.map