From 8b607e7156639f4986191d91f46acbfe8e317099 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=BB=D1=8C=D1=8F=D1=81=20=D0=A1=D1=83=D0=BB=D1=82?= =?UTF-8?q?=D0=B0=D0=BD=D0=BE=D0=B2?= Date: Fri, 17 Jul 2026 18:41:23 +0300 Subject: [PATCH] =?UTF-8?q?feat(skins):=20=D1=83=D0=BB=D1=83=D1=87=D1=88?= =?UTF-8?q?=D0=B5=D0=BD=20Twenty-=D1=81=D0=BA=D0=B8=D0=BD=20=D0=BF=D0=BE?= =?UTF-8?q?=20=D1=80=D0=B5=D1=84=D0=B5=D1=80=D0=B5=D0=BD=D1=81=D1=83=20twe?= =?UTF-8?q?ntyhq/twenty?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Обновлены цвета 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. --- client/src/themes/skins/iistwin.ts | 58 ++++ client/src/themes/skins/omegaprom.ts | 58 ++++ client/src/themes/skins/twenty.ts | 227 ++++++++------ client/src/themes/styles/generated-skins.css | 294 ++++++++++++++----- client/src/themes/tokens.ts | 41 +++ tailwind.config.ts | 38 +++ 6 files changed, 553 insertions(+), 163 deletions(-) diff --git a/client/src/themes/skins/iistwin.ts b/client/src/themes/skins/iistwin.ts index 05ca50c..edb7b0b 100644 --- a/client/src/themes/skins/iistwin.ts +++ b/client/src/themes/skins/iistwin.ts @@ -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', diff --git a/client/src/themes/skins/omegaprom.ts b/client/src/themes/skins/omegaprom.ts index 44af3af..559ff2e 100644 --- a/client/src/themes/skins/omegaprom.ts +++ b/client/src/themes/skins/omegaprom.ts @@ -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', diff --git a/client/src/themes/skins/twenty.ts b/client/src/themes/skins/twenty.ts index e80ffe0..3b15635 100644 --- a/client/src/themes/skins/twenty.ts +++ b/client/src/themes/skins/twenty.ts @@ -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', diff --git a/client/src/themes/styles/generated-skins.css b/client/src/themes/styles/generated-skins.css index ad5eb52..c8b05da 100644 --- a/client/src/themes/styles/generated-skins.css +++ b/client/src/themes/styles/generated-skins.css @@ -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; } \ No newline at end of file diff --git a/client/src/themes/tokens.ts b/client/src/themes/tokens.ts index 57bffa2..80cdc96 100644 --- a/client/src/themes/tokens.ts +++ b/client/src/themes/tokens.ts @@ -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') { diff --git a/tailwind.config.ts b/tailwind.config.ts index b980689..c0afd04 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -14,6 +14,11 @@ export default { "tw-md": "var(--tw-border-radius-md)", "tw-lg": "var(--tw-border-radius-lg)", "tw-xl": "var(--tw-border-radius-xl)", + "tw-xxl": "var(--tw-border-radius-xxl)", + "tw-pill": "var(--tw-border-radius-pill)", + "tw-rounded": "var(--tw-border-radius-rounded)", + "tw-sm-round": "var(--tw-border-radius-sm-round)", + "tw-md-round": "var(--tw-border-radius-md-round)", }, colors: { background: "var(--background)", @@ -77,6 +82,35 @@ export default { DEFAULT: "var(--background)", secondary: "var(--tw-background-secondary)", tertiary: "var(--tw-background-tertiary)", + quaternary: "var(--tw-background-quaternary)", + transparent: { + primary: "var(--tw-background-transparent-primary)", + secondary: "var(--tw-background-transparent-secondary)", + tertiary: "var(--tw-background-transparent-tertiary)", + medium: "var(--tw-background-transparent-medium)", + light: "var(--tw-background-transparent-light)", + lighter: "var(--tw-background-transparent-lighter)", + strong: "var(--tw-background-transparent-strong)", + danger: "var(--tw-background-transparent-danger)", + blue: "var(--tw-background-transparent-blue)", + orange: "var(--tw-background-transparent-orange)", + success: "var(--tw-background-transparent-success)", + }, + overlay: { + primary: "var(--tw-background-overlay-primary)", + secondary: "var(--tw-background-overlay-secondary)", + tertiary: "var(--tw-background-overlay-tertiary)", + }, + }, + "tw-blur": { + light: "var(--tw-blur-light)", + medium: "var(--tw-blur-medium)", + strong: "var(--tw-blur-strong)", + }, + "tw-shadow": { + color: "var(--tw-box-shadow-color)", + underline: "var(--tw-box-shadow-underline)", + "super-heavy": "var(--tw-box-shadow-super-heavy)", }, "tw-font": { DEFAULT: "var(--foreground)", @@ -99,6 +133,10 @@ export default { "tw-lg": "var(--tw-font-size-lg)", "tw-xl": "var(--tw-font-size-xl)", }, + lineHeight: { + "tw-md": "var(--tw-line-height-md)", + "tw-lg": "var(--tw-line-height-lg)", + }, fontFamily: { sans: ["var(--font-sans)"], serif: ["var(--font-serif)"],