feat: add basic webui
This commit is contained in:
106
packages/tailwind-config/config.ts
Normal file
106
packages/tailwind-config/config.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
import typography from '@tailwindcss/typography';
|
||||
import type { Config } from 'tailwindcss';
|
||||
import animate from 'tailwindcss-animate';
|
||||
import defaultTheme from 'tailwindcss/defaultTheme';
|
||||
import typographyConfig from './typography.config';
|
||||
|
||||
export const config: Config = {
|
||||
darkMode: ['class'],
|
||||
content: [
|
||||
'./node_modules/@konobangu/design-system/components/**/*.{ts,tsx}',
|
||||
'./node_modules/@konobangu/design-system/lib/**/*.{ts,tsx}',
|
||||
'./node_modules/@konobangu/design-system/index.tsx',
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./lib/**/*.{ts,tsx}',
|
||||
'./app/**/*.{ts,tsx}',
|
||||
'./providers/**/*.{ts,tsx}',
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: '2rem',
|
||||
screens: {
|
||||
'2xl': '1400px',
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: 'hsl(var(--border) / <alpha-value>)',
|
||||
input: 'hsl(var(--input) / <alpha-value>)',
|
||||
ring: 'hsl(var(--ring) / <alpha-value>)',
|
||||
background: 'hsl(var(--background) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--foreground) / <alpha-value>)',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
|
||||
},
|
||||
success: {
|
||||
DEFAULT: 'hsl(var(--success) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--success-foreground) / <alpha-value>)',
|
||||
},
|
||||
warning: {
|
||||
DEFAULT: 'hsl(var(--warning) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--warning-foreground) / <alpha-value>)',
|
||||
},
|
||||
brand: {
|
||||
DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
|
||||
},
|
||||
sidebar: {
|
||||
DEFAULT: 'hsl(var(--sidebar-background))',
|
||||
foreground: 'hsl(var(--sidebar-foreground))',
|
||||
primary: 'hsl(var(--sidebar-primary))',
|
||||
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
||||
accent: 'hsl(var(--sidebar-accent))',
|
||||
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
||||
border: 'hsl(var(--sidebar-border))',
|
||||
ring: 'hsl(var(--sidebar-ring))',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['var(--font-geist-sans)', ...defaultTheme.fontFamily.sans],
|
||||
mono: ['var(--font-geist-mono)', ...defaultTheme.fontFamily.mono],
|
||||
},
|
||||
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',
|
||||
},
|
||||
typography: typographyConfig,
|
||||
},
|
||||
},
|
||||
plugins: [animate, typography],
|
||||
};
|
||||
4
packages/tailwind-config/index.ts
Normal file
4
packages/tailwind-config/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
import resolveConfig from 'tailwindcss/resolveConfig';
|
||||
import { config } from './config';
|
||||
|
||||
export const tailwind = resolveConfig(config);
|
||||
18
packages/tailwind-config/package.json
Normal file
18
packages/tailwind-config/package.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "@konobangu/tailwind-config",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"clean": "git clean -xdf .cache .turbo dist node_modules",
|
||||
"typecheck": "tsc --noEmit --emitDeclarationOnly false"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"tailwind-merge": "^2.5.5",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@konobangu/typescript-config": "workspace:*",
|
||||
"tailwindcss": "^3.4.16"
|
||||
}
|
||||
}
|
||||
8
packages/tailwind-config/tsconfig.json
Normal file
8
packages/tailwind-config/tsconfig.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "@konobangu/typescript-config/react-library.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "."
|
||||
},
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
96
packages/tailwind-config/typography.config.ts
Normal file
96
packages/tailwind-config/typography.config.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
const typographyConfig = (theme: (path: string) => string) => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
':first-child': {
|
||||
marginTop: theme('margin.0'),
|
||||
},
|
||||
'h1, h2, h3, h4, h5, h6': {
|
||||
fontWeight: theme('fontWeight.semibold'),
|
||||
letterSpacing: theme('letterSpacing.tight'),
|
||||
marginBottom: theme('margin.4'),
|
||||
|
||||
'+ h1, + h2, + h3, + h4, + h5, + h6': {
|
||||
marginTop: theme('margin.0'),
|
||||
},
|
||||
},
|
||||
h1: {
|
||||
fontSize: theme('fontSize.3xl'),
|
||||
marginTop: theme('margin.16'),
|
||||
},
|
||||
h2: {
|
||||
fontSize: theme('fontSize.2xl'),
|
||||
},
|
||||
h3: {
|
||||
fontSize: theme('fontSize.xl'),
|
||||
},
|
||||
h4: {
|
||||
fontSize: theme('fontSize.lg'),
|
||||
},
|
||||
h5: {
|
||||
fontSize: theme('fontSize.base'),
|
||||
},
|
||||
h6: {
|
||||
fontSize: theme('fontSize.base'),
|
||||
},
|
||||
table: {
|
||||
boxShadow: `0 0 0 1px ${theme('colors.gray.200')}`,
|
||||
borderRadius: theme('borderRadius.md'),
|
||||
overflow: 'hidden',
|
||||
p: {
|
||||
margin: 0,
|
||||
},
|
||||
th: {
|
||||
paddingTop: '0.5714286em',
|
||||
paddingRight: '0.5714286em',
|
||||
paddingBottom: '0.5714286em',
|
||||
paddingLeft: '0.5714286em',
|
||||
backgroundColor: theme('colors.gray.100'),
|
||||
'&:not(:last-child)': {
|
||||
borderRightWidth: '1px',
|
||||
borderRightColor: theme('colors.gray.200'),
|
||||
},
|
||||
},
|
||||
'tbody td, tfoot td': {
|
||||
paddingLeft: '0.5714286em',
|
||||
'&:not(:last-child)': {
|
||||
borderRightWidth: '1px',
|
||||
borderRightColor: theme('colors.gray.200'),
|
||||
},
|
||||
},
|
||||
},
|
||||
code: {
|
||||
'&::before, &::after': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
pre: {
|
||||
backgroundColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
borderColor: theme('colors.gray.200'),
|
||||
},
|
||||
},
|
||||
},
|
||||
invert: {
|
||||
css: {
|
||||
table: {
|
||||
boxShadow: `0 0 0 1px ${theme('colors.gray.700')}`,
|
||||
th: {
|
||||
backgroundColor: theme('colors.gray.800'),
|
||||
'&:not(:last-child)': {
|
||||
borderRightColor: theme('colors.gray.700'),
|
||||
},
|
||||
},
|
||||
'tbody td, tfoot td': {
|
||||
'&:not(:last-child)': {
|
||||
borderRightColor: theme('colors.gray.700'),
|
||||
},
|
||||
},
|
||||
},
|
||||
pre: {
|
||||
borderColor: theme('colors.gray.800'),
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default typographyConfig;
|
||||
Reference in New Issue
Block a user