si/iistwin
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat(skins): улучшен Twenty-скин по референсу twentyhq/twenty

Browse Source 
- Обновлены цвета Twenty light/dark ближе к оригиналу (display-p3 → sRGB).
- Темная тема: фон #101010, карточки #141414, границы #1c1c1c, primary #3c63de.
- Добавлены токены: backgroundQuaternary, прозрачные фоны danger/blue/orange/success,
  overlay-фоны, blur-эффекты, box-shadow underline/super-heavy.
- Добавлены радиусы: xxl, pill, rounded, smRound, mdRound.
- Добавлены line-height токены.
- Все встроенные скины (iistwin, omegaprom) приведены к новой схеме токенов.
- Tailwind config расширен новыми utility-классами.
- Перегенерирован generated-skins.css.
This commit is contained in:
Ильяс Султанов
2026-07-17 18:41:23 +03:00
parent 240dcd2f7e
commit 8b607e7156
6 changed files with 553 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
client/src/themes/skins/iistwin.ts
View File

@@ -34,14 +34,32 @@ export const iistwinSkin: Skin = {
backgroundSecondary: 'hsl(0 0% 98%)',
backgroundTertiary: 'hsl(0 0% 96%)',
backgroundQuaternary: 'hsl(0 0% 94%)',
backgroundTransparentPrimary: 'hsl(220 10% 15% / 0.04)',
backgroundTransparentSecondary: 'hsl(220 10% 15% / 0.08)',
backgroundTransparentTertiary: 'hsl(220 10% 15% / 0.12)',
backgroundTransparentMedium: 'hsl(220 10% 15% / 0.06)',
backgroundTransparentLight: 'hsl(220 10% 15% / 0.03)',
backgroundTransparentLighter: 'hsl(220 10% 15% / 0.02)',
backgroundTransparentStrong: 'hsl(220 10% 15% / 0.16)',
backgroundTransparentDanger: 'hsl(0 72% 51% / 0.12)',
backgroundTransparentBlue: 'hsl(220 70% 50% / 0.12)',
backgroundTransparentOrange: 'hsl(30 90% 50% / 0.12)',
backgroundTransparentSuccess: 'hsl(142 60% 40% / 0.12)',
backgroundNoisy: 'hsl(0 0% 100%)',
backgroundOverlayPrimary: 'hsl(220 10% 5% / 0.72)',
backgroundOverlaySecondary: 'hsl(220 10% 5% / 0.36)',
backgroundOverlayTertiary: 'hsl(220 10% 5% / 0.07)',
blurLight: 'blur(6px)',
blurMedium: 'blur(12px)',
blurStrong: 'blur(20px)',
boxShadowColor: 'rgba(0, 0, 0, 0.04)',
boxShadowUnderline: '0px 1px 0px 0px rgba(0, 0, 0, 0.15)',
boxShadowSuperHeavy: '0px 0px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 32px -8px rgba(0, 0, 0, 0.12)',
fontPrimary: 'hsl(220 10% 15%)',
fontSecondary: 'hsl(220 5% 45%)',
fontTertiary: 'hsl(220 5% 55%)',
@@ -79,12 +97,19 @@ export const iistwinSkin: Skin = {
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
xxl: '2.5rem',
pill: '999px',
rounded: '100%',
smRound: '0.25rem',
mdRound: '0.5rem',
},
shadows: {
sm: 'none',
md: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
lg: '0 1px 3px 0 rgba(0, 0, 0, 0.05)',
xl: '0 2px 4px 0 rgba(0, 0, 0, 0.05)',
underline: '0px 1px 0px 0px rgba(0, 0, 0, 0.15)',
superHeavy: '0px 0px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 32px -8px rgba(0, 0, 0, 0.12)',
},
font: {
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
@@ -101,6 +126,10 @@ export const iistwinSkin: Skin = {
medium: 500,
semibold: 600,
},
lineHeight: {
md: '1.1',
lg: '1.5',
},
},
spacing: {
unit: '0.25rem',
@@ -130,14 +159,32 @@ export const iistwinSkin: Skin = {
backgroundSecondary: 'hsl(220 10% 10%)',
backgroundTertiary: 'hsl(220 10% 14%)',
backgroundQuaternary: 'hsl(220 10% 16%)',
backgroundTransparentPrimary: 'hsl(0 0% 100% / 0.04)',
backgroundTransparentSecondary: 'hsl(0 0% 100% / 0.08)',
backgroundTransparentTertiary: 'hsl(0 0% 100% / 0.12)',
backgroundTransparentMedium: 'hsl(0 0% 100% / 0.06)',
backgroundTransparentLight: 'hsl(0 0% 100% / 0.03)',
backgroundTransparentLighter: 'hsl(0 0% 100% / 0.02)',
backgroundTransparentStrong: 'hsl(0 0% 100% / 0.14)',
backgroundTransparentDanger: 'hsl(0 70% 55% / 0.18)',
backgroundTransparentBlue: 'hsl(220 70% 50% / 0.18)',
backgroundTransparentOrange: 'hsl(30 90% 50% / 0.18)',
backgroundTransparentSuccess: 'hsl(142 60% 50% / 0.18)',
backgroundNoisy: 'hsl(220 10% 8%)',
backgroundOverlayPrimary: 'hsl(220 10% 3% / 0.8)',
backgroundOverlaySecondary: 'hsl(220 10% 3% / 0.4)',
backgroundOverlayTertiary: 'hsl(220 10% 3% / 0.08)',
blurLight: 'blur(6px)',
blurMedium: 'blur(12px)',
blurStrong: 'blur(20px)',
boxShadowColor: 'rgba(0, 0, 0, 0.4)',
boxShadowUnderline: '0px 1px 0px 0px rgba(255, 255, 255, 0.1)',
boxShadowSuperHeavy: '0px 0px 8px 0px rgba(0, 0, 0, 0.3), 0px 8px 32px -8px rgba(0, 0, 0, 0.4)',
fontPrimary: 'hsl(220 5% 92%)',
fontSecondary: 'hsl(220 5% 65%)',
fontTertiary: 'hsl(220 5% 55%)',
@@ -175,12 +222,19 @@ export const iistwinSkin: Skin = {
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
xxl: '2.5rem',
pill: '999px',
rounded: '100%',
smRound: '0.25rem',
mdRound: '0.5rem',
},
shadows: {
sm: 'none',
md: '0 1px 2px 0 rgba(0, 0, 0, 0.15)',
lg: '0 2px 4px 0 rgba(0, 0, 0, 0.2)',
xl: '0 4px 6px -1px rgba(0, 0, 0, 0.2)',
underline: '0px 1px 0px 0px rgba(255, 255, 255, 0.1)',
superHeavy: '0px 0px 8px 0px rgba(0, 0, 0, 0.3), 0px 8px 32px -8px rgba(0, 0, 0, 0.4)',
},
font: {
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
@@ -197,6 +251,10 @@ export const iistwinSkin: Skin = {
medium: 500,
semibold: 600,
},
lineHeight: {
md: '1.1',
lg: '1.5',
},
},
spacing: {
unit: '0.25rem',

58
client/src/themes/skins/omegaprom.ts
View File

@@ -34,14 +34,32 @@ export const omegapromSkin: Skin = {
backgroundSecondary: 'hsl(220 20% 98%)',
backgroundTertiary: 'hsl(220 14% 96%)',
backgroundQuaternary: 'hsl(220 14% 94%)',
backgroundTransparentPrimary: 'hsl(221 83% 53% / 0.04)',
backgroundTransparentSecondary: 'hsl(221 83% 53% / 0.08)',
backgroundTransparentTertiary: 'hsl(221 83% 53% / 0.12)',
backgroundTransparentMedium: 'hsl(220 15% 18% / 0.06)',
backgroundTransparentLight: 'hsl(220 15% 18% / 0.03)',
backgroundTransparentLighter: 'hsl(220 15% 18% / 0.02)',
backgroundTransparentStrong: 'hsl(220 15% 18% / 0.16)',
backgroundTransparentDanger: 'hsl(0 72% 51% / 0.12)',
backgroundTransparentBlue: 'hsl(221 83% 53% / 0.12)',
backgroundTransparentOrange: 'hsl(30 90% 50% / 0.12)',
backgroundTransparentSuccess: 'hsl(142 55% 45% / 0.12)',
backgroundNoisy: 'hsl(0 0% 100%)',
backgroundOverlayPrimary: 'hsl(220 15% 8% / 0.72)',
backgroundOverlaySecondary: 'hsl(220 15% 8% / 0.36)',
backgroundOverlayTertiary: 'hsl(220 15% 8% / 0.07)',
blurLight: 'blur(6px)',
blurMedium: 'blur(12px)',
blurStrong: 'blur(20px)',
boxShadowColor: 'rgba(0, 0, 0, 0.04)',
boxShadowUnderline: '0px 1px 0px 0px rgba(0, 0, 0, 0.15)',
boxShadowSuperHeavy: '0px 0px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 32px -8px rgba(0, 0, 0, 0.12)',
fontPrimary: 'hsl(220 15% 18%)',
fontSecondary: 'hsl(220 9% 46%)',
fontTertiary: 'hsl(220 9% 56%)',
@@ -79,12 +97,19 @@ export const omegapromSkin: Skin = {
md: '0.5rem',
lg: '0.75rem',
xl: '1rem',
xxl: '2.5rem',
pill: '999px',
rounded: '100%',
smRound: '0.25rem',
mdRound: '0.5rem',
},
shadows: {
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
md: '0 2px 4px 0 rgba(0, 0, 0, 0.05)',
lg: '0 4px 8px -2px rgba(0, 0, 0, 0.06)',
xl: '0 8px 16px -4px rgba(0, 0, 0, 0.08)',
underline: '0px 1px 0px 0px rgba(0, 0, 0, 0.15)',
superHeavy: '0px 0px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 32px -8px rgba(0, 0, 0, 0.12)',
},
font: {
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
@@ -101,6 +126,10 @@ export const omegapromSkin: Skin = {
medium: 500,
semibold: 600,
},
lineHeight: {
md: '1.1',
lg: '1.5',
},
},
spacing: {
unit: '0.25rem',
@@ -130,14 +159,32 @@ export const omegapromSkin: Skin = {
backgroundSecondary: 'hsl(220 20% 10%)',
backgroundTertiary: 'hsl(220 20% 14%)',
backgroundQuaternary: 'hsl(220 20% 16%)',
backgroundTransparentPrimary: 'hsl(217 91% 60% / 0.04)',
backgroundTransparentSecondary: 'hsl(217 91% 60% / 0.08)',
backgroundTransparentTertiary: 'hsl(217 91% 60% / 0.12)',
backgroundTransparentMedium: 'hsl(0 0% 100% / 0.06)',
backgroundTransparentLight: 'hsl(0 0% 100% / 0.03)',
backgroundTransparentLighter: 'hsl(0 0% 100% / 0.02)',
backgroundTransparentStrong: 'hsl(0 0% 100% / 0.14)',
backgroundTransparentDanger: 'hsl(0 70% 55% / 0.18)',
backgroundTransparentBlue: 'hsl(217 91% 60% / 0.18)',
backgroundTransparentOrange: 'hsl(30 90% 50% / 0.18)',
backgroundTransparentSuccess: 'hsl(142 55% 55% / 0.18)',
backgroundNoisy: 'hsl(220 20% 8%)',
backgroundOverlayPrimary: 'hsl(220 20% 4% / 0.8)',
backgroundOverlaySecondary: 'hsl(220 20% 4% / 0.4)',
backgroundOverlayTertiary: 'hsl(220 20% 4% / 0.08)',
blurLight: 'blur(6px)',
blurMedium: 'blur(12px)',
blurStrong: 'blur(20px)',
boxShadowColor: 'rgba(0, 0, 0, 0.4)',
boxShadowUnderline: '0px 1px 0px 0px rgba(255, 255, 255, 0.1)',
boxShadowSuperHeavy: '0px 0px 8px 0px rgba(0, 0, 0, 0.3), 0px 8px 32px -8px rgba(0, 0, 0, 0.4)',
fontPrimary: 'hsl(220 10% 92%)',
fontSecondary: 'hsl(220 10% 65%)',
fontTertiary: 'hsl(220 10% 55%)',
@@ -175,12 +222,19 @@ export const omegapromSkin: Skin = {
md: '0.5rem',
lg: '0.75rem',
xl: '1rem',
xxl: '2.5rem',
pill: '999px',
rounded: '100%',
smRound: '0.25rem',
mdRound: '0.5rem',
},
shadows: {
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.2)',
md: '0 2px 4px 0 rgba(0, 0, 0, 0.25)',
lg: '0 4px 8px -2px rgba(0, 0, 0, 0.3)',
xl: '0 8px 16px -4px rgba(0, 0, 0, 0.35)',
underline: '0px 1px 0px 0px rgba(255, 255, 255, 0.1)',
superHeavy: '0px 0px 8px 0px rgba(0, 0, 0, 0.3), 0px 8px 32px -8px rgba(0, 0, 0, 0.4)',
},
font: {
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
@@ -197,6 +251,10 @@ export const omegapromSkin: Skin = {
medium: 500,
semibold: 600,
},
lineHeight: {
md: '1.1',
lg: '1.5',
},
},
spacing: {
unit: '0.25rem',

227
client/src/themes/skins/twenty.ts
View File

@@ -3,7 +3,8 @@ import type { Skin } from '../tokens';
/**
* Скин в стиле Twenty CRM.
* Референс: https://github.com/twentyhq/twenty
* Акцентный цвет — indigo/blue, нейтральная серая палитра, мягкие тени.
* Акцентный цвет — indigo/blue, нейтральная серая палитра, мягкие тени,
* стеклянные dropdown, super-heavy тени для модалок, noise-текстура хедера.
*/
export const twentySkin: Skin = {
id: 'twenty',
@@ -15,65 +16,84 @@ export const twentySkin: Skin = {
light: {
colors: {
background: '#ffffff',
foreground: '#333333',
foreground: '#303030',
card: '#ffffff',
cardForeground: '#333333',
cardForeground: '#303030',
popover: '#ffffff',
popoverForeground: '#333333',
primary: '#3e63dd',
popoverForeground: '#303030',
primary: '#3c63de',
primaryForeground: '#ffffff',
secondary: '#f4f4f5',
secondaryForeground: '#333333',
muted: '#f4f4f5',
secondary: '#f1f1f1',
secondaryForeground: '#303030',
muted: '#f1f1f1',
mutedForeground: '#666666',
accent: '#e0e7ff',
accentForeground: '#1e1b4b',
destructive: '#dc2626',
accent: '#d3dfff',
accentForeground: '#19295b',
destructive: '#e6474c',
destructiveForeground: '#ffffff',
border: '#e4e4e7',
border: '#ececec',
input: '#ffffff',
ring: '#3e63dd',
ring: '#3c63de',
backgroundSecondary: '#fcfcfc',
backgroundTertiary: '#f4f4f5',
backgroundTransparentPrimary: 'rgba(0, 0, 0, 0.04)',
backgroundTransparentSecondary: 'rgba(0, 0, 0, 0.08)',
backgroundTertiary: '#f1f1f1',
backgroundQuaternary: '#ececec',
backgroundTransparentPrimary: 'rgba(255, 255, 255, 0.5)',
backgroundTransparentSecondary: 'rgba(255, 255, 255, 0.4)',
backgroundTransparentTertiary: 'rgba(0, 0, 0, 0.12)',
backgroundTransparentMedium: 'rgba(0, 0, 0, 0.06)',
backgroundTransparentLight: 'rgba(0, 0, 0, 0.03)',
backgroundTransparentLight: 'rgba(0, 0, 0, 0.04)',
backgroundTransparentLighter: 'rgba(0, 0, 0, 0.02)',
backgroundTransparentStrong: 'rgba(0, 0, 0, 0.16)',
backgroundTransparentDanger: '#f3000d14',
backgroundTransparentBlue: '#0047f112',
backgroundTransparentOrange: '#ff9c0029',
backgroundTransparentSuccess: '#00a43319',
backgroundNoisy: '#ffffff',
fontPrimary: '#333333',
backgroundOverlayPrimary: 'rgba(0, 0, 0, 0.72)',
backgroundOverlaySecondary: 'rgba(0, 0, 0, 0.36)',
backgroundOverlayTertiary: 'rgba(0, 0, 0, 0.07)',
blurLight: 'blur(6px) saturate(200%) contrast(50%) brightness(130%)',
blurMedium: 'blur(12px) saturate(200%) contrast(50%) brightness(130%)',
blurStrong: 'blur(20px) saturate(200%) contrast(50%) brightness(130%)',
boxShadowColor: 'rgba(0, 0, 0, 0.04)',
boxShadowUnderline: '0px 1px 0px 0px rgba(0, 0, 0, 0.36)',
boxShadowSuperHeavy:
'0px 0px 8px 0px rgba(0, 0, 0, 0.16), 0px 8px 64px -16px rgba(0, 0, 0, 0.48), 0px 24px 56px -16px rgba(0, 0, 0, 0.08)',
fontPrimary: '#303030',
fontSecondary: '#666666',
fontTertiary: '#999999',
fontLight: '#a1a1aa',
fontExtraLight: '#c4c4c7',
fontTertiary: '#9a9a9a',
fontLight: '#b4b4b4',
fontExtraLight: '#cccccc',
fontInverted: '#ffffff',
borderLight: '#f4f4f5',
borderMedium: '#e4e4e7',
borderLight: '#f1f1f1',
borderMedium: '#ececec',
borderStrong: '#d4d4d8',
statusDone: '#22c55e',
statusProgress: '#f59e0b',
statusOverdue: '#ef4444',
statusDone: '#009239',
statusProgress: '#fd7600',
statusOverdue: '#e6474c',
statusPaused: '#a1a1aa',
chart1: '#333333',
chart2: '#22c55e',
chart3: '#f59e0b',
chart4: '#3b82f6',
chart5: '#ef4444',
chart1: '#303030',
chart2: '#009239',
chart3: '#fd7600',
chart4: '#3c63de',
chart5: '#e6474c',
sidebar: '#fcfcfc',
sidebarForeground: '#333333',
sidebarPrimary: '#3e63dd',
sidebarForeground: '#303030',
sidebarPrimary: '#3c63de',
sidebarPrimaryForeground: '#ffffff',
sidebarAccent: '#f4f4f5',
sidebarAccentForeground: '#333333',
sidebarBorder: '#e4e4e7',
sidebarRing: '#3e63dd',
sidebarAccent: '#f1f1f1',
sidebarAccentForeground: '#303030',
sidebarBorder: '#ececec',
sidebarRing: '#3c63de',
},
radius: {
xs: '2px',
@@ -81,12 +101,20 @@ export const twentySkin: Skin = {
md: '8px',
lg: '16px',
xl: '20px',
xxl: '40px',
pill: '999px',
rounded: '100%',
smRound: '4px',
mdRound: '8px',
},
shadows: {
sm: '0px 1px 2px 0px rgba(0, 0, 0, 0.04)',
md: '0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
lg: '2px 4px 16px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)',
sm: '0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
md: '2px 4px 16px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.08)',
lg: '2px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)',
xl: '0px 0px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 32px -8px rgba(0, 0, 0, 0.12)',
underline: '0px 1px 0px 0px rgba(0, 0, 0, 0.36)',
superHeavy:
'0px 0px 8px 0px rgba(0, 0, 0, 0.16), 0px 8px 64px -16px rgba(0, 0, 0, 0.48), 0px 24px 56px -16px rgba(0, 0, 0, 0.08)',
},
font: {
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
@@ -103,6 +131,10 @@ export const twentySkin: Skin = {
medium: 500,
semibold: 600,
},
lineHeight: {
md: '1.1',
lg: '1.5',
},
},
spacing: {
unit: '4px',
@@ -110,45 +142,64 @@ export const twentySkin: Skin = {
},
dark: {
colors: {
background: '#171717',
foreground: '#ededed',
card: '#1f1f1f',
cardForeground: '#ededed',
popover: '#1f1f1f',
popoverForeground: '#ededed',
primary: '#5b7ee3',
primaryForeground: '#0a0a0a',
secondary: '#262626',
secondaryForeground: '#ededed',
muted: '#262626',
mutedForeground: '#a1a1aa',
accent: '#312e81',
accentForeground: '#e0e7ff',
destructive: '#ef4444',
background: '#101010',
foreground: '#ececec',
card: '#141414',
cardForeground: '#ececec',
popover: '#141414',
popoverForeground: '#ececec',
primary: '#3c63de',
primaryForeground: '#ffffff',
secondary: '#171717',
secondaryForeground: '#ececec',
muted: '#1c1c1c',
mutedForeground: '#b4b4b4',
accent: '#203675',
accentForeground: '#d7e2ff',
destructive: '#e6474c',
destructiveForeground: '#ffffff',
border: '#27272a',
input: '#1f1f1f',
ring: '#5b7ee3',
border: '#1c1c1c',
input: '#171717',
ring: '#3c63de',
backgroundSecondary: '#1f1f1f',
backgroundTertiary: '#262626',
backgroundTransparentPrimary: 'rgba(255, 255, 255, 0.04)',
backgroundTransparentSecondary: 'rgba(255, 255, 255, 0.08)',
backgroundSecondary: '#141414',
backgroundTertiary: '#171717',
backgroundQuaternary: '#1c1c1c',
backgroundTransparentPrimary: 'rgba(0, 0, 0, 0.5)',
backgroundTransparentSecondary: 'rgba(0, 0, 0, 0.4)',
backgroundTransparentTertiary: 'rgba(255, 255, 255, 0.12)',
backgroundTransparentMedium: 'rgba(255, 255, 255, 0.06)',
backgroundTransparentLight: 'rgba(255, 255, 255, 0.03)',
backgroundTransparentLight: 'rgba(255, 255, 255, 0.04)',
backgroundTransparentLighter: 'rgba(255, 255, 255, 0.02)',
backgroundNoisy: '#171717',
backgroundTransparentStrong: 'rgba(255, 255, 255, 0.14)',
backgroundTransparentDanger: '#ff173f2d',
backgroundTransparentBlue: '#3566ff57',
backgroundTransparentOrange: '#ff590039',
backgroundTransparentSuccess: '#11ff992d',
backgroundNoisy: '#101010',
fontPrimary: '#ededed',
fontSecondary: '#a1a1aa',
fontTertiary: '#71717a',
fontLight: '#52525b',
fontExtraLight: '#3f3f46',
fontInverted: '#171717',
backgroundOverlayPrimary: 'rgba(0, 0, 0, 0.72)',
backgroundOverlaySecondary: 'rgba(0, 0, 0, 0.36)',
backgroundOverlayTertiary: 'rgba(0, 0, 0, 0.36)',
borderLight: '#262626',
borderMedium: '#27272a',
blurLight: 'blur(6px) saturate(200%) contrast(100%) brightness(130%)',
blurMedium: 'blur(12px) saturate(200%) contrast(100%) brightness(130%)',
blurStrong: 'blur(20px) saturate(200%) contrast(100%) brightness(130%)',
boxShadowColor: 'rgba(0, 0, 0, 0.6)',
boxShadowUnderline: '0px 1px 0px 0px rgba(0, 0, 0, 0.32)',
boxShadowSuperHeavy:
'2px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)',
fontPrimary: '#ececec',
fontSecondary: '#b4b4b4',
fontTertiary: '#828282',
fontLight: '#666666',
fontExtraLight: '#4d4d4d',
fontInverted: '#101010',
borderLight: '#171717',
borderMedium: '#1c1c1c',
borderStrong: '#3f3f46',
statusDone: '#4ade80',
@@ -162,14 +213,14 @@ export const twentySkin: Skin = {
chart4: '#60a5fa',
chart5: '#f87171',
sidebar: '#171717',
sidebarForeground: '#ededed',
sidebarPrimary: '#5b7ee3',
sidebarPrimaryForeground: '#0a0a0a',
sidebarAccent: '#262626',
sidebarAccentForeground: '#ededed',
sidebarBorder: '#27272a',
sidebarRing: '#5b7ee3',
sidebar: '#101010',
sidebarForeground: '#ececec',
sidebarPrimary: '#3c63de',
sidebarPrimaryForeground: '#ffffff',
sidebarAccent: '#171717',
sidebarAccentForeground: '#ececec',
sidebarBorder: '#1c1c1c',
sidebarRing: '#3c63de',
},
radius: {
xs: '2px',
@@ -177,12 +228,20 @@ export const twentySkin: Skin = {
md: '8px',
lg: '16px',
xl: '20px',
xxl: '40px',
pill: '999px',
rounded: '100%',
smRound: '4px',
mdRound: '8px',
},
shadows: {
sm: '0px 1px 2px 0px rgba(0, 0, 0, 0.2)',
md: '0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 0px 4px 0px rgba(0, 0, 0, 0.3)',
sm: '0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 0px 4px 0px rgba(0, 0, 0, 0.3)',
md: '2px 4px 16px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.08)',
lg: '2px 4px 16px 0px rgba(0, 0, 0, 0.35), 0px 2px 4px 0px rgba(0, 0, 0, 0.2)',
xl: '0px 0px 8px 0px rgba(0, 0, 0, 0.3), 0px 8px 32px -8px rgba(0, 0, 0, 0.4)',
underline: '0px 1px 0px 0px rgba(0, 0, 0, 0.32)',
superHeavy:
'2px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)',
},
font: {
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
@@ -199,6 +258,10 @@ export const twentySkin: Skin = {
medium: 500,
semibold: 600,
},
lineHeight: {
md: '1.1',
lg: '1.5',
},
},
spacing: {
unit: '4px',

294
client/src/themes/styles/generated-skins.css
View File

@@ -22,13 +22,28 @@
--ring: hsl(220 10% 15%);
--tw-background-secondary: hsl(0 0% 98%);
--tw-background-tertiary: hsl(0 0% 96%);
--tw-background-quaternary: hsl(0 0% 94%);
--tw-background-transparent-primary: hsl(220 10% 15% / 0.04);
--tw-background-transparent-secondary: hsl(220 10% 15% / 0.08);
--tw-background-transparent-tertiary: hsl(220 10% 15% / 0.12);
--tw-background-transparent-medium: hsl(220 10% 15% / 0.06);
--tw-background-transparent-light: hsl(220 10% 15% / 0.03);
--tw-background-transparent-lighter: hsl(220 10% 15% / 0.02);
--tw-background-transparent-strong: hsl(220 10% 15% / 0.16);
--tw-background-transparent-danger: hsl(0 72% 51% / 0.12);
--tw-background-transparent-blue: hsl(220 70% 50% / 0.12);
--tw-background-transparent-orange: hsl(30 90% 50% / 0.12);
--tw-background-transparent-success: hsl(142 60% 40% / 0.12);
--tw-background-noisy: hsl(0 0% 100%);
--tw-background-overlay-primary: hsl(220 10% 5% / 0.72);
--tw-background-overlay-secondary: hsl(220 10% 5% / 0.36);
--tw-background-overlay-tertiary: hsl(220 10% 5% / 0.07);
--tw-blur-light: blur(6px);
--tw-blur-medium: blur(12px);
--tw-blur-strong: blur(20px);
--tw-box-shadow-color: rgba(0, 0, 0, 0.04);
--tw-box-shadow-underline: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
--tw-box-shadow-super-heavy: 0px 0px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 32px -8px rgba(0, 0, 0, 0.12);
--tw-font-primary: hsl(220 10% 15%);
--tw-font-secondary: hsl(220 5% 45%);
--tw-font-tertiary: hsl(220 5% 55%);
@@ -60,6 +75,11 @@
--tw-border-radius-md: 0.375rem;
--tw-border-radius-lg: 0.5rem;
--tw-border-radius-xl: 0.75rem;
--tw-border-radius-xxl: 2.5rem;
--tw-border-radius-pill: 999px;
--tw-border-radius-rounded: 100%;
--tw-border-radius-sm-round: 0.25rem;
--tw-border-radius-md-round: 0.5rem;
--tw-box-shadow-sm: none;
--tw-box-shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
--tw-box-shadow-lg: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
@@ -74,6 +94,8 @@
--tw-font-weight-regular: 400;
--tw-font-weight-medium: 500;
--tw-font-weight-semibold: 600;
--tw-line-height-md: 1.1;
--tw-line-height-lg: 1.5;
--tw-spacing-unit: 0.25rem;
--radius: 0.5rem;
}
@@ -100,13 +122,28 @@
--ring: hsl(0 0% 100%);
--tw-background-secondary: hsl(220 10% 10%);
--tw-background-tertiary: hsl(220 10% 14%);
--tw-background-quaternary: hsl(220 10% 16%);
--tw-background-transparent-primary: hsl(0 0% 100% / 0.04);
--tw-background-transparent-secondary: hsl(0 0% 100% / 0.08);
--tw-background-transparent-tertiary: hsl(0 0% 100% / 0.12);
--tw-background-transparent-medium: hsl(0 0% 100% / 0.06);
--tw-background-transparent-light: hsl(0 0% 100% / 0.03);
--tw-background-transparent-lighter: hsl(0 0% 100% / 0.02);
--tw-background-transparent-strong: hsl(0 0% 100% / 0.14);
--tw-background-transparent-danger: hsl(0 70% 55% / 0.18);
--tw-background-transparent-blue: hsl(220 70% 50% / 0.18);
--tw-background-transparent-orange: hsl(30 90% 50% / 0.18);
--tw-background-transparent-success: hsl(142 60% 50% / 0.18);
--tw-background-noisy: hsl(220 10% 8%);
--tw-background-overlay-primary: hsl(220 10% 3% / 0.8);
--tw-background-overlay-secondary: hsl(220 10% 3% / 0.4);
--tw-background-overlay-tertiary: hsl(220 10% 3% / 0.08);
--tw-blur-light: blur(6px);
--tw-blur-medium: blur(12px);
--tw-blur-strong: blur(20px);
--tw-box-shadow-color: rgba(0, 0, 0, 0.4);
--tw-box-shadow-underline: 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
--tw-box-shadow-super-heavy: 0px 0px 8px 0px rgba(0, 0, 0, 0.3), 0px 8px 32px -8px rgba(0, 0, 0, 0.4);
--tw-font-primary: hsl(220 5% 92%);
--tw-font-secondary: hsl(220 5% 65%);
--tw-font-tertiary: hsl(220 5% 55%);
@@ -138,6 +175,11 @@
--tw-border-radius-md: 0.375rem;
--tw-border-radius-lg: 0.5rem;
--tw-border-radius-xl: 0.75rem;
--tw-border-radius-xxl: 2.5rem;
--tw-border-radius-pill: 999px;
--tw-border-radius-rounded: 100%;
--tw-border-radius-sm-round: 0.25rem;
--tw-border-radius-md-round: 0.5rem;
--tw-box-shadow-sm: none;
--tw-box-shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
--tw-box-shadow-lg: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
@@ -152,73 +194,95 @@
--tw-font-weight-regular: 400;
--tw-font-weight-medium: 500;
--tw-font-weight-semibold: 600;
--tw-line-height-md: 1.1;
--tw-line-height-lg: 1.5;
--tw-spacing-unit: 0.25rem;
--radius: 0.5rem;
}
[data-skin="twenty"][data-theme="light"] {
--background: #ffffff;
--foreground: #333333;
--foreground: #303030;
--card: #ffffff;
--card-foreground: #333333;
--card-foreground: #303030;
--popover: #ffffff;
--popover-foreground: #333333;
--primary: #3e63dd;
--popover-foreground: #303030;
--primary: #3c63de;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #333333;
--muted: #f4f4f5;
--secondary: #f1f1f1;
--secondary-foreground: #303030;
--muted: #f1f1f1;
--muted-foreground: #666666;
--accent: #e0e7ff;
--accent-foreground: #1e1b4b;
--destructive: #dc2626;
--accent: #d3dfff;
--accent-foreground: #19295b;
--destructive: #e6474c;
--destructive-foreground: #ffffff;
--border: #e4e4e7;
--border: #ececec;
--input: #ffffff;
--ring: #3e63dd;
--ring: #3c63de;
--tw-background-secondary: #fcfcfc;
--tw-background-tertiary: #f4f4f5;
--tw-background-transparent-primary: rgba(0, 0, 0, 0.04);
--tw-background-transparent-secondary: rgba(0, 0, 0, 0.08);
--tw-background-tertiary: #f1f1f1;
--tw-background-quaternary: #ececec;
--tw-background-transparent-primary: rgba(255, 255, 255, 0.5);
--tw-background-transparent-secondary: rgba(255, 255, 255, 0.4);
--tw-background-transparent-tertiary: rgba(0, 0, 0, 0.12);
--tw-background-transparent-medium: rgba(0, 0, 0, 0.06);
--tw-background-transparent-light: rgba(0, 0, 0, 0.03);
--tw-background-transparent-light: rgba(0, 0, 0, 0.04);
--tw-background-transparent-lighter: rgba(0, 0, 0, 0.02);
--tw-background-transparent-strong: rgba(0, 0, 0, 0.16);
--tw-background-transparent-danger: #f3000d14;
--tw-background-transparent-blue: #0047f112;
--tw-background-transparent-orange: #ff9c0029;
--tw-background-transparent-success: #00a43319;
--tw-background-noisy: #ffffff;
--tw-font-primary: #333333;
--tw-background-overlay-primary: rgba(0, 0, 0, 0.72);
--tw-background-overlay-secondary: rgba(0, 0, 0, 0.36);
--tw-background-overlay-tertiary: rgba(0, 0, 0, 0.07);
--tw-blur-light: blur(6px) saturate(200%) contrast(50%) brightness(130%);
--tw-blur-medium: blur(12px) saturate(200%) contrast(50%) brightness(130%);
--tw-blur-strong: blur(20px) saturate(200%) contrast(50%) brightness(130%);
--tw-box-shadow-color: rgba(0, 0, 0, 0.04);
--tw-box-shadow-underline: 0px 1px 0px 0px rgba(0, 0, 0, 0.36);
--tw-box-shadow-super-heavy: 0px 0px 8px 0px rgba(0, 0, 0, 0.16), 0px 8px 64px -16px rgba(0, 0, 0, 0.48), 0px 24px 56px -16px rgba(0, 0, 0, 0.08);
--tw-font-primary: #303030;
--tw-font-secondary: #666666;
--tw-font-tertiary: #999999;
--tw-font-light: #a1a1aa;
--tw-font-extra-light: #c4c4c7;
--tw-font-tertiary: #9a9a9a;
--tw-font-light: #b4b4b4;
--tw-font-extra-light: #cccccc;
--tw-font-inverted: #ffffff;
--tw-border-light: #f4f4f5;
--tw-border-medium: #e4e4e7;
--tw-border-light: #f1f1f1;
--tw-border-medium: #ececec;
--tw-border-strong: #d4d4d8;
--status-done: #22c55e;
--status-progress: #f59e0b;
--status-overdue: #ef4444;
--status-done: #009239;
--status-progress: #fd7600;
--status-overdue: #e6474c;
--status-paused: #a1a1aa;
--chart1: #333333;
--chart2: #22c55e;
--chart3: #f59e0b;
--chart4: #3b82f6;
--chart5: #ef4444;
--chart1: #303030;
--chart2: #009239;
--chart3: #fd7600;
--chart4: #3c63de;
--chart5: #e6474c;
--sidebar: #fcfcfc;
--sidebar-foreground: #333333;
--sidebar-primary: #3e63dd;
--sidebar-foreground: #303030;
--sidebar-primary: #3c63de;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #f4f4f5;
--sidebar-accent-foreground: #333333;
--sidebar-border: #e4e4e7;
--sidebar-ring: #3e63dd;
--sidebar-accent: #f1f1f1;
--sidebar-accent-foreground: #303030;
--sidebar-border: #ececec;
--sidebar-ring: #3c63de;
--tw-border-radius-xs: 2px;
--tw-border-radius-sm: 4px;
--tw-border-radius-md: 8px;
--tw-border-radius-lg: 16px;
--tw-border-radius-xl: 20px;
--tw-box-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
--tw-box-shadow-md: 0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
--tw-box-shadow-lg: 2px 4px 16px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
--tw-border-radius-xxl: 40px;
--tw-border-radius-pill: 999px;
--tw-border-radius-rounded: 100%;
--tw-border-radius-sm-round: 4px;
--tw-border-radius-md-round: 8px;
--tw-box-shadow-sm: 0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
--tw-box-shadow-md: 2px 4px 16px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
--tw-box-shadow-lg: 2px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
--tw-box-shadow-xl: 0px 0px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 32px -8px rgba(0, 0, 0, 0.12);
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "DM Mono", "SF Mono", "Monaco", monospace;
@@ -230,47 +294,64 @@
--tw-font-weight-regular: 400;
--tw-font-weight-medium: 500;
--tw-font-weight-semibold: 600;
--tw-line-height-md: 1.1;
--tw-line-height-lg: 1.5;
--tw-spacing-unit: 4px;
--radius: 16px;
}
[data-skin="twenty"][data-theme="dark"] {
--background: #171717;
--foreground: #ededed;
--card: #1f1f1f;
--card-foreground: #ededed;
--popover: #1f1f1f;
--popover-foreground: #ededed;
--primary: #5b7ee3;
--primary-foreground: #0a0a0a;
--secondary: #262626;
--secondary-foreground: #ededed;
--muted: #262626;
--muted-foreground: #a1a1aa;
--accent: #312e81;
--accent-foreground: #e0e7ff;
--destructive: #ef4444;
--background: #101010;
--foreground: #ececec;
--card: #141414;
--card-foreground: #ececec;
--popover: #141414;
--popover-foreground: #ececec;
--primary: #3c63de;
--primary-foreground: #ffffff;
--secondary: #171717;
--secondary-foreground: #ececec;
--muted: #1c1c1c;
--muted-foreground: #b4b4b4;
--accent: #203675;
--accent-foreground: #d7e2ff;
--destructive: #e6474c;
--destructive-foreground: #ffffff;
--border: #27272a;
--input: #1f1f1f;
--ring: #5b7ee3;
--tw-background-secondary: #1f1f1f;
--tw-background-tertiary: #262626;
--tw-background-transparent-primary: rgba(255, 255, 255, 0.04);
--tw-background-transparent-secondary: rgba(255, 255, 255, 0.08);
--border: #1c1c1c;
--input: #171717;
--ring: #3c63de;
--tw-background-secondary: #141414;
--tw-background-tertiary: #171717;
--tw-background-quaternary: #1c1c1c;
--tw-background-transparent-primary: rgba(0, 0, 0, 0.5);
--tw-background-transparent-secondary: rgba(0, 0, 0, 0.4);
--tw-background-transparent-tertiary: rgba(255, 255, 255, 0.12);
--tw-background-transparent-medium: rgba(255, 255, 255, 0.06);
--tw-background-transparent-light: rgba(255, 255, 255, 0.03);
--tw-background-transparent-light: rgba(255, 255, 255, 0.04);
--tw-background-transparent-lighter: rgba(255, 255, 255, 0.02);
--tw-background-noisy: #171717;
--tw-font-primary: #ededed;
--tw-font-secondary: #a1a1aa;
--tw-font-tertiary: #71717a;
--tw-font-light: #52525b;
--tw-font-extra-light: #3f3f46;
--tw-font-inverted: #171717;
--tw-border-light: #262626;
--tw-border-medium: #27272a;
--tw-background-transparent-strong: rgba(255, 255, 255, 0.14);
--tw-background-transparent-danger: #ff173f2d;
--tw-background-transparent-blue: #3566ff57;
--tw-background-transparent-orange: #ff590039;
--tw-background-transparent-success: #11ff992d;
--tw-background-noisy: #101010;
--tw-background-overlay-primary: rgba(0, 0, 0, 0.72);
--tw-background-overlay-secondary: rgba(0, 0, 0, 0.36);
--tw-background-overlay-tertiary: rgba(0, 0, 0, 0.36);
--tw-blur-light: blur(6px) saturate(200%) contrast(100%) brightness(130%);
--tw-blur-medium: blur(12px) saturate(200%) contrast(100%) brightness(130%);
--tw-blur-strong: blur(20px) saturate(200%) contrast(100%) brightness(130%);
--tw-box-shadow-color: rgba(0, 0, 0, 0.6);
--tw-box-shadow-underline: 0px 1px 0px 0px rgba(0, 0, 0, 0.32);
--tw-box-shadow-super-heavy: 2px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
--tw-font-primary: #ececec;
--tw-font-secondary: #b4b4b4;
--tw-font-tertiary: #828282;
--tw-font-light: #666666;
--tw-font-extra-light: #4d4d4d;
--tw-font-inverted: #101010;
--tw-border-light: #171717;
--tw-border-medium: #1c1c1c;
--tw-border-strong: #3f3f46;
--status-done: #4ade80;
--status-progress: #fbbf24;
@@ -281,21 +362,26 @@
--chart3: #fbbf24;
--chart4: #60a5fa;
--chart5: #f87171;
--sidebar: #171717;
--sidebar-foreground: #ededed;
--sidebar-primary: #5b7ee3;
--sidebar-primary-foreground: #0a0a0a;
--sidebar-accent: #262626;
--sidebar-accent-foreground: #ededed;
--sidebar-border: #27272a;
--sidebar-ring: #5b7ee3;
--sidebar: #101010;
--sidebar-foreground: #ececec;
--sidebar-primary: #3c63de;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #171717;
--sidebar-accent-foreground: #ececec;
--sidebar-border: #1c1c1c;
--sidebar-ring: #3c63de;
--tw-border-radius-xs: 2px;
--tw-border-radius-sm: 4px;
--tw-border-radius-md: 8px;
--tw-border-radius-lg: 16px;
--tw-border-radius-xl: 20px;
--tw-box-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
--tw-box-shadow-md: 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
--tw-border-radius-xxl: 40px;
--tw-border-radius-pill: 999px;
--tw-border-radius-rounded: 100%;
--tw-border-radius-sm-round: 4px;
--tw-border-radius-md-round: 8px;
--tw-box-shadow-sm: 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
--tw-box-shadow-md: 2px 4px 16px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
--tw-box-shadow-lg: 2px 4px 16px 0px rgba(0, 0, 0, 0.35), 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
--tw-box-shadow-xl: 0px 0px 8px 0px rgba(0, 0, 0, 0.3), 0px 8px 32px -8px rgba(0, 0, 0, 0.4);
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -308,6 +394,8 @@
--tw-font-weight-regular: 400;
--tw-font-weight-medium: 500;
--tw-font-weight-semibold: 600;
--tw-line-height-md: 1.1;
--tw-line-height-lg: 1.5;
--tw-spacing-unit: 4px;
--radius: 16px;
}
@@ -334,13 +422,28 @@
--ring: hsl(221 83% 53%);
--tw-background-secondary: hsl(220 20% 98%);
--tw-background-tertiary: hsl(220 14% 96%);
--tw-background-quaternary: hsl(220 14% 94%);
--tw-background-transparent-primary: hsl(221 83% 53% / 0.04);
--tw-background-transparent-secondary: hsl(221 83% 53% / 0.08);
--tw-background-transparent-tertiary: hsl(221 83% 53% / 0.12);
--tw-background-transparent-medium: hsl(220 15% 18% / 0.06);
--tw-background-transparent-light: hsl(220 15% 18% / 0.03);
--tw-background-transparent-lighter: hsl(220 15% 18% / 0.02);
--tw-background-transparent-strong: hsl(220 15% 18% / 0.16);
--tw-background-transparent-danger: hsl(0 72% 51% / 0.12);
--tw-background-transparent-blue: hsl(221 83% 53% / 0.12);
--tw-background-transparent-orange: hsl(30 90% 50% / 0.12);
--tw-background-transparent-success: hsl(142 55% 45% / 0.12);
--tw-background-noisy: hsl(0 0% 100%);
--tw-background-overlay-primary: hsl(220 15% 8% / 0.72);
--tw-background-overlay-secondary: hsl(220 15% 8% / 0.36);
--tw-background-overlay-tertiary: hsl(220 15% 8% / 0.07);
--tw-blur-light: blur(6px);
--tw-blur-medium: blur(12px);
--tw-blur-strong: blur(20px);
--tw-box-shadow-color: rgba(0, 0, 0, 0.04);
--tw-box-shadow-underline: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
--tw-box-shadow-super-heavy: 0px 0px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 32px -8px rgba(0, 0, 0, 0.12);
--tw-font-primary: hsl(220 15% 18%);
--tw-font-secondary: hsl(220 9% 46%);
--tw-font-tertiary: hsl(220 9% 56%);
@@ -372,6 +475,11 @@
--tw-border-radius-md: 0.5rem;
--tw-border-radius-lg: 0.75rem;
--tw-border-radius-xl: 1rem;
--tw-border-radius-xxl: 2.5rem;
--tw-border-radius-pill: 999px;
--tw-border-radius-rounded: 100%;
--tw-border-radius-sm-round: 0.25rem;
--tw-border-radius-md-round: 0.5rem;
--tw-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
--tw-box-shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
--tw-box-shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.06);
@@ -386,6 +494,8 @@
--tw-font-weight-regular: 400;
--tw-font-weight-medium: 500;
--tw-font-weight-semibold: 600;
--tw-line-height-md: 1.1;
--tw-line-height-lg: 1.5;
--tw-spacing-unit: 0.25rem;
--radius: 0.75rem;
}
@@ -412,13 +522,28 @@
--ring: hsl(217 91% 60%);
--tw-background-secondary: hsl(220 20% 10%);
--tw-background-tertiary: hsl(220 20% 14%);
--tw-background-quaternary: hsl(220 20% 16%);
--tw-background-transparent-primary: hsl(217 91% 60% / 0.04);
--tw-background-transparent-secondary: hsl(217 91% 60% / 0.08);
--tw-background-transparent-tertiary: hsl(217 91% 60% / 0.12);
--tw-background-transparent-medium: hsl(0 0% 100% / 0.06);
--tw-background-transparent-light: hsl(0 0% 100% / 0.03);
--tw-background-transparent-lighter: hsl(0 0% 100% / 0.02);
--tw-background-transparent-strong: hsl(0 0% 100% / 0.14);
--tw-background-transparent-danger: hsl(0 70% 55% / 0.18);
--tw-background-transparent-blue: hsl(217 91% 60% / 0.18);
--tw-background-transparent-orange: hsl(30 90% 50% / 0.18);
--tw-background-transparent-success: hsl(142 55% 55% / 0.18);
--tw-background-noisy: hsl(220 20% 8%);
--tw-background-overlay-primary: hsl(220 20% 4% / 0.8);
--tw-background-overlay-secondary: hsl(220 20% 4% / 0.4);
--tw-background-overlay-tertiary: hsl(220 20% 4% / 0.08);
--tw-blur-light: blur(6px);
--tw-blur-medium: blur(12px);
--tw-blur-strong: blur(20px);
--tw-box-shadow-color: rgba(0, 0, 0, 0.4);
--tw-box-shadow-underline: 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
--tw-box-shadow-super-heavy: 0px 0px 8px 0px rgba(0, 0, 0, 0.3), 0px 8px 32px -8px rgba(0, 0, 0, 0.4);
--tw-font-primary: hsl(220 10% 92%);
--tw-font-secondary: hsl(220 10% 65%);
--tw-font-tertiary: hsl(220 10% 55%);
@@ -450,6 +575,11 @@
--tw-border-radius-md: 0.5rem;
--tw-border-radius-lg: 0.75rem;
--tw-border-radius-xl: 1rem;
--tw-border-radius-xxl: 2.5rem;
--tw-border-radius-pill: 999px;
--tw-border-radius-rounded: 100%;
--tw-border-radius-sm-round: 0.25rem;
--tw-border-radius-md-round: 0.5rem;
--tw-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
--tw-box-shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
--tw-box-shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.3);
@@ -464,6 +594,8 @@
--tw-font-weight-regular: 400;
--tw-font-weight-medium: 500;
--tw-font-weight-semibold: 600;
--tw-line-height-md: 1.1;
--tw-line-height-lg: 1.5;
--tw-spacing-unit: 0.25rem;
--radius: 0.75rem;
}

41
client/src/themes/tokens.ts
View File

@@ -49,14 +49,32 @@ export interface ColorTokens {
// Twenty-style extended tokens
backgroundSecondary: string;
backgroundTertiary: string;
backgroundQuaternary: string;
backgroundTransparentPrimary: string;
backgroundTransparentSecondary: string;
backgroundTransparentTertiary: string;
backgroundTransparentMedium: string;
backgroundTransparentLight: string;
backgroundTransparentLighter: string;
backgroundTransparentStrong: string;
backgroundTransparentDanger: string;
backgroundTransparentBlue: string;
backgroundTransparentOrange: string;
backgroundTransparentSuccess: string;
backgroundNoisy: string;
backgroundOverlayPrimary: string;
backgroundOverlaySecondary: string;
backgroundOverlayTertiary: string;
blurLight: string;
blurMedium: string;
blurStrong: string;
boxShadowColor: string;
boxShadowUnderline: string;
boxShadowSuperHeavy: string;
fontPrimary: string;
fontSecondary: string;
fontTertiary: string;
@@ -98,6 +116,11 @@ export interface RadiusTokens {
md: string;
lg: string;
xl: string;
xxl: string;
pill: string;
rounded: string;
smRound: string;
mdRound: string;
}
export interface ShadowTokens {
@@ -105,6 +128,8 @@ export interface ShadowTokens {
md: string;
lg: string;
xl: string;
underline: string;
superHeavy: string;
}
export interface FontTokens {
@@ -122,6 +147,10 @@ export interface FontTokens {
medium: number;
semibold: number;
};
lineHeight: {
md: string;
lg: string;
};
}
export interface SpacingTokens {
@@ -152,12 +181,19 @@ export const EDITABLE_COLOR_TOKENS: Array<{ key: string; label: string; category
{ key: 'colors.backgroundSecondary', label: 'Secondary фон', category: 'Twenty' },
{ key: 'colors.backgroundTertiary', label: 'Tertiary фон', category: 'Twenty' },
{ key: 'colors.backgroundQuaternary', label: 'Quaternary фон', category: 'Twenty' },
{ key: 'colors.fontPrimary', label: 'Primary текст', category: 'Twenty' },
{ key: 'colors.fontSecondary', label: 'Secondary текст', category: 'Twenty' },
{ key: 'colors.fontTertiary', label: 'Tertiary текст', category: 'Twenty' },
{ key: 'colors.borderLight', label: 'Light граница', category: 'Twenty' },
{ key: 'colors.borderMedium', label: 'Medium граница', category: 'Twenty' },
{ key: 'colors.borderStrong', label: 'Strong граница', category: 'Twenty' },
{ key: 'colors.backgroundOverlayPrimary', label: 'Overlay primary', category: 'Twenty' },
{ key: 'colors.backgroundOverlaySecondary', label: 'Overlay secondary', category: 'Twenty' },
{ key: 'colors.backgroundOverlayTertiary', label: 'Overlay tertiary', category: 'Twenty' },
{ key: 'colors.blurLight', label: 'Blur light', category: 'Twenty' },
{ key: 'colors.blurMedium', label: 'Blur medium', category: 'Twenty' },
{ key: 'colors.blurStrong', label: 'Blur strong', category: 'Twenty' },
{ key: 'colors.statusDone', label: 'Готово', category: 'Status' },
{ key: 'colors.statusProgress', label: 'В работе', category: 'Status' },
@@ -181,6 +217,8 @@ export const EDITABLE_RADIUS_TOKENS: Array<{ key: string; label: string }> = [
{ key: 'radius.md', label: 'MD radius' },
{ key: 'radius.lg', label: 'LG radius' },
{ key: 'radius.xl', label: 'XL radius' },
{ key: 'radius.xxl', label: 'XXL radius' },
{ key: 'radius.pill', label: 'Pill radius' },
];
/** Список редактируемых теней. */
@@ -189,6 +227,8 @@ export const EDITABLE_SHADOW_TOKENS: Array<{ key: string; label: string }> = [
{ key: 'shadows.md', label: 'MD shadow' },
{ key: 'shadows.lg', label: 'LG shadow' },
{ key: 'shadows.xl', label: 'XL shadow' },
{ key: 'shadows.underline', label: 'Underline shadow' },
{ key: 'shadows.superHeavy', label: 'Super heavy shadow' },
];
const SHADCN_COLOR_VARS = new Set([
@@ -238,6 +278,7 @@ export function tokenPathToCssVar(path: string[]): string {
if (path[1] === 'mono') return '--font-mono';
if (path[1] === 'size') return '--tw-font-size-' + camelToKebab(path[2]);
if (path[1] === 'weight') return '--tw-font-weight-' + camelToKebab(path[2]);
if (path[1] === 'lineHeight') return '--tw-line-height-' + camelToKebab(path[2]);
}
if (path[0] === 'spacing') {