@peace_node/core
Version:
Core design system with Tailwind CSS tokens, typography, and semantic styling
519 lines (499 loc) • 17.1 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.styledocCSSVariables = exports.styledocConfig = exports.styledocSemanticPlugin = exports.styledocTypographyPlugin = void 0;
exports.createStyledocConfig = createStyledocConfig;
const plugin_1 = __importDefault(require("tailwindcss/plugin"));
// Typography plugin
exports.styledocTypographyPlugin = (0, plugin_1.default)(function ({ addUtilities }) {
const fontTokens = {
// Sans tokens
'.text-sans-xs': {
'font-family': 'var(--font-inter)',
'font-size': '0.75rem',
'line-height': '1rem',
'letter-spacing': '-0.02em'
},
'.text-sans-sm': {
'font-family': 'var(--font-inter)',
'font-size': '0.875rem',
'line-height': '1.25rem',
'letter-spacing': '-0.02em'
},
'.text-sans-base': {
'font-family': 'var(--font-inter)',
'font-size': '1rem',
'line-height': '1.5rem',
'letter-spacing': '-0.04em'
},
'.text-sans-lg': {
'font-family': 'var(--font-inter)',
'font-size': '1.125rem',
'line-height': '1.75rem',
'letter-spacing': '-0.04em'
},
'.text-sans-xl': {
'font-family': 'var(--font-inter)',
'font-size': '1.25rem',
'line-height': '1.75rem',
'letter-spacing': '-0.04em'
},
'.text-sans-2xl': {
'font-family': 'var(--font-inter)',
'font-size': '1.5rem',
'line-height': '2rem',
'letter-spacing': '-0.05em'
},
'.text-sans-3xl': {
'font-family': 'var(--font-inter)',
'font-size': '1.875rem',
'line-height': '2.25rem',
'letter-spacing': '-0.05em'
},
'.text-sans-4xl': {
'font-family': 'var(--font-inter)',
'font-size': '2.25rem',
'line-height': '2.5rem',
'letter-spacing': '-0.05em'
},
'.text-sans-5xl': {
'font-family': 'var(--font-inter)',
'font-size': '3rem',
'line-height': '1',
'letter-spacing': '-0.06em'
},
'.text-sans-6xl': {
'font-family': 'var(--font-inter)',
'font-size': '3.75rem',
'line-height': '1',
'letter-spacing': '-0.07em'
},
'.text-sans-7xl': {
'font-family': 'var(--font-inter)',
'font-size': '4.5rem',
'line-height': '1',
'letter-spacing': '-0.07em'
},
'.text-sans-8xl': {
'font-family': 'var(--font-inter)',
'font-size': '6rem',
'line-height': '1',
'letter-spacing': '-0.07em'
},
'.text-sans-9xl': {
'font-family': 'var(--font-inter)',
'font-size': '8rem',
'line-height': '1',
'letter-spacing': '-0.08em'
},
// Serif tokens
'.text-serif-xs': {
'font-family': 'Times New Roman',
'font-size': '0.75rem',
'line-height': '1',
'letter-spacing': '-0.04em'
},
'.text-serif-sm': {
'font-family': 'Times New Roman',
'font-size': '0.875rem',
'line-height': '1',
'letter-spacing': '-0.04em'
},
'.text-serif-base': {
'font-family': 'Times New Roman',
'font-size': '1rem',
'line-height': '1',
'letter-spacing': '-0.04em'
},
'.text-serif-lg': {
'font-family': 'Times New Roman',
'font-size': '1.125rem',
'line-height': '1',
'letter-spacing': '-0.04em'
},
'.text-serif-xl': {
'font-family': 'Times New Roman',
'font-size': '1.25rem',
'line-height': '1',
'letter-spacing': '-0.04em'
},
'.text-serif-2xl': {
'font-family': 'Times New Roman',
'font-size': '1.5rem',
'line-height': '.85',
'letter-spacing': '-0.075em'
},
'.text-serif-3xl': {
'font-family': 'Times New Roman',
'font-size': '1.875rem',
'line-height': '.85',
'letter-spacing': '-0.075em'
},
'.text-serif-4xl': {
'font-family': 'Times New Roman',
'font-size': '2.25rem',
'line-height': '.85',
'letter-spacing': '-0.075em'
},
'.text-serif-5xl': {
'font-family': 'Times New Roman',
'font-size': '3rem',
'line-height': '.85',
'letter-spacing': '-0.075em'
},
'.text-serif-6xl': {
'font-family': 'Times New Roman',
'font-size': '3.75rem',
'line-height': '.8',
'letter-spacing': '-0.08em'
},
'.text-serif-7xl': {
'font-family': 'Times New Roman',
'font-size': '4.5rem',
'line-height': '.8',
'letter-spacing': '-0.08em'
},
'.text-serif-8xl': {
'font-family': 'Times New Roman',
'font-size': '6rem',
'line-height': '.8',
'letter-spacing': '-0.09em'
},
'.text-serif-9xl': {
'font-family': 'Times New Roman',
'font-size': '8rem',
'line-height': '.8',
'letter-spacing': '-0.1em'
},
// Mono tokens
'.text-mono-xs': {
'font-family': 'var(--font-geist-mono)',
'font-size': '0.75rem',
'line-height': '1rem',
'letter-spacing': '-0.05em'
},
'.text-mono-sm': {
'font-family': 'var(--font-geist-mono)',
'font-size': '0.875rem',
'line-height': '1.25rem',
'letter-spacing': '0'
},
'.text-mono-base': {
'font-family': 'var(--font-geist-mono)',
'font-size': '1rem',
'line-height': '1.5rem',
'letter-spacing': '-0.06em'
},
'.text-mono-lg': {
'font-family': 'var(--font-geist-mono)',
'font-size': '1.125rem',
'line-height': '1.75rem',
'letter-spacing': '-0.07em'
},
'.text-mono-xl': {
'font-family': 'var(--font-geist-mono)',
'font-size': '1.25rem',
'line-height': '1.75rem',
'letter-spacing': '-0.07em'
},
'.text-mono-2xl': {
'font-family': 'var(--font-geist-mono)',
'font-size': '1.5rem',
'line-height': '2rem',
'letter-spacing': '-0.08em'
},
'.text-mono-3xl': {
'font-family': 'var(--font-geist-mono)',
'font-size': '1.875rem',
'line-height': '2.25rem',
'letter-spacing': '-0.08em'
},
'.text-mono-4xl': {
'font-family': 'var(--font-geist-mono)',
'font-size': '2.25rem',
'line-height': '2.5rem',
'letter-spacing': '-0.08em'
},
'.text-mono-5xl': {
'font-family': 'var(--font-geist-mono)',
'font-size': '3rem',
'line-height': '1',
'letter-spacing': '-0.08em'
},
'.text-mono-6xl': {
'font-family': 'var(--font-geist-mono)',
'font-size': '3.75rem',
'line-height': '1',
'letter-spacing': '-0.08em'
},
'.text-mono-7xl': {
'font-family': 'var(--font-geist-mono)',
'font-size': '4.5rem',
'line-height': '1',
'letter-spacing': '-0.09em'
},
'.text-mono-8xl': {
'font-family': 'var(--font-geist-mono)',
'font-size': '6rem',
'line-height': '1',
'letter-spacing': '-0.09em'
},
'.text-mono-9xl': {
'font-family': 'var(--font-geist-mono)',
'font-size': '8rem',
'line-height': '1',
'letter-spacing': '-0.1em'
}
};
addUtilities(fontTokens);
});
// Semantic HTML plugin
exports.styledocSemanticPlugin = (0, plugin_1.default)(function ({ addBase }) {
addBase({
// Headings
'h1': {
'@apply text-sans-4xl font-extrabold tracking-tight scroll-m-20 lg:text-5xl': {},
},
'h2': {
'@apply text-sans-3xl font-semibold tracking-tight scroll-m-20 border-b pb-2 first:mt-0': {},
},
'h3': {
'@apply text-sans-2xl font-semibold tracking-tight scroll-m-20': {},
},
'h4': {
'@apply text-sans-xl font-semibold tracking-tight scroll-m-20': {},
},
'h5': {
'@apply text-sans-lg font-semibold tracking-tight scroll-m-20': {},
},
'h6': {
'@apply text-sans-base font-semibold tracking-tight scroll-m-20': {},
},
// Paragraph
'p': {
'@apply text-sans-base leading-7 [&:not(:first-child)]:mt-6': {},
},
// Lists
'ul': {
'@apply my-6 ml-6 list-disc [&>li]:mt-2': {},
},
'ol': {
'@apply my-6 ml-6 list-decimal [&>li]:mt-2': {},
},
// Blockquote
'blockquote': {
'@apply mt-6 border-l-2 pl-6 italic': {},
},
// Code
'code': {
'@apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm': {},
},
// Tables
'table': {
'@apply w-full': {},
},
'thead': {
'@apply bg-muted/50': {},
},
'th': {
'@apply border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right': {},
},
'td': {
'@apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right': {},
},
// Figure
'figcaption': {
'@apply text-sm text-muted-foreground mt-2 text-center': {},
},
// Definition lists
'dt': {
'@apply font-semibold': {},
},
'dd': {
'@apply ml-4': {},
},
// Mark
'mark': {
'@apply bg-yellow-200 px-1 rounded dark:bg-yellow-800': {},
},
});
});
// Export the main Tailwind configuration
exports.styledocConfig = {
darkMode: 'class',
theme: {
extend: {
colors: {
border: "oklch(var(--border) / <alpha-value>)",
input: "oklch(var(--input) / <alpha-value>)",
ring: "oklch(var(--ring) / <alpha-value>)",
background: "oklch(var(--background) / <alpha-value>)",
foreground: "oklch(var(--foreground) / <alpha-value>)",
primary: {
DEFAULT: "oklch(var(--primary) / <alpha-value>)",
foreground: "oklch(var(--primary-foreground) / <alpha-value>)",
},
secondary: {
DEFAULT: "oklch(var(--secondary) / <alpha-value>)",
foreground: "oklch(var(--secondary-foreground) / <alpha-value>)",
},
destructive: {
DEFAULT: "oklch(var(--destructive) / <alpha-value>)",
foreground: "oklch(var(--destructive-foreground) / <alpha-value>)",
},
muted: {
DEFAULT: "oklch(var(--muted) / <alpha-value>)",
foreground: "oklch(var(--muted-foreground) / <alpha-value>)",
},
accent: {
DEFAULT: "oklch(var(--accent) / <alpha-value>)",
foreground: "oklch(var(--accent-foreground) / <alpha-value>)",
},
popover: {
DEFAULT: "oklch(var(--popover) / <alpha-value>)",
foreground: "oklch(var(--popover-foreground) / <alpha-value>)",
},
card: {
DEFAULT: "oklch(var(--card) / <alpha-value>)",
foreground: "oklch(var(--card-foreground) / <alpha-value>)",
},
dodger: {
'50': 'oklch(97% 0.05 253.21)',
'100': 'oklch(92% 0.08 253.21)',
'200': 'oklch(85% 0.12 253.21)',
'300': 'oklch(78% 0.15 253.21)',
'400': 'oklch(71% 0.17 253.21)',
'500': 'oklch(65.2% 0.1901 253.21)',
'600': 'oklch(58% 0.17 253.21)',
'700': 'oklch(51% 0.15 253.21)',
'800': 'oklch(44% 0.12 253.21)',
'900': 'oklch(37% 0.08 253.21)',
'950': 'oklch(30% 0.05 253.21)',
},
hydrant: {
'50': 'oklch(97% 0.06 29.23)',
'100': 'oklch(92% 0.09 29.23)',
'200': 'oklch(85% 0.14 29.23)',
'300': 'oklch(78% 0.18 29.23)',
'400': 'oklch(70% 0.22 29.23)',
'500': 'oklch(62.8% 0.2577 29.23)',
'600': 'oklch(56% 0.22 29.23)',
'700': 'oklch(49% 0.18 29.23)',
'800': 'oklch(42% 0.14 29.23)',
'900': 'oklch(35% 0.09 29.23)',
'950': 'oklch(28% 0.06 29.23)',
},
},
borderRadius: {
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" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
}
}
},
plugins: [
// @ts-ignore
require("tailwindcss-animate"),
exports.styledocTypographyPlugin,
exports.styledocSemanticPlugin,
],
};
// CSS variables as a string export
exports.styledocCSSVariables = `
@layer base {
:root {
/* Light mode semantic tokens */
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 250 64% 50%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 30 64% 50%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--radius: 0.5rem;
}
:root.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 250 71% 50%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 30 71% 50%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
`;
// Helper function to create a complete Tailwind config
function createStyledocConfig(userConfig = {}) {
return {
...exports.styledocConfig,
...userConfig,
content: userConfig.content || [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
theme: {
...exports.styledocConfig.theme,
...userConfig.theme,
extend: {
...exports.styledocConfig.theme?.extend,
...userConfig.theme?.extend,
},
},
plugins: [
...(exports.styledocConfig.plugins || []),
...(userConfig.plugins || []),
],
};
}
exports.default = exports.styledocConfig;