feat(skins): улучшен Twenty-скин по референсу twentyhq/twenty
- Обновлены цвета 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:
@@ -34,14 +34,32 @@ export const iistwinSkin: Skin = {
|
|||||||
|
|
||||||
backgroundSecondary: 'hsl(0 0% 98%)',
|
backgroundSecondary: 'hsl(0 0% 98%)',
|
||||||
backgroundTertiary: 'hsl(0 0% 96%)',
|
backgroundTertiary: 'hsl(0 0% 96%)',
|
||||||
|
backgroundQuaternary: 'hsl(0 0% 94%)',
|
||||||
backgroundTransparentPrimary: 'hsl(220 10% 15% / 0.04)',
|
backgroundTransparentPrimary: 'hsl(220 10% 15% / 0.04)',
|
||||||
backgroundTransparentSecondary: 'hsl(220 10% 15% / 0.08)',
|
backgroundTransparentSecondary: 'hsl(220 10% 15% / 0.08)',
|
||||||
backgroundTransparentTertiary: 'hsl(220 10% 15% / 0.12)',
|
backgroundTransparentTertiary: 'hsl(220 10% 15% / 0.12)',
|
||||||
backgroundTransparentMedium: 'hsl(220 10% 15% / 0.06)',
|
backgroundTransparentMedium: 'hsl(220 10% 15% / 0.06)',
|
||||||
backgroundTransparentLight: 'hsl(220 10% 15% / 0.03)',
|
backgroundTransparentLight: 'hsl(220 10% 15% / 0.03)',
|
||||||
backgroundTransparentLighter: 'hsl(220 10% 15% / 0.02)',
|
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%)',
|
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%)',
|
fontPrimary: 'hsl(220 10% 15%)',
|
||||||
fontSecondary: 'hsl(220 5% 45%)',
|
fontSecondary: 'hsl(220 5% 45%)',
|
||||||
fontTertiary: 'hsl(220 5% 55%)',
|
fontTertiary: 'hsl(220 5% 55%)',
|
||||||
@@ -79,12 +97,19 @@ export const iistwinSkin: Skin = {
|
|||||||
md: '0.375rem',
|
md: '0.375rem',
|
||||||
lg: '0.5rem',
|
lg: '0.5rem',
|
||||||
xl: '0.75rem',
|
xl: '0.75rem',
|
||||||
|
xxl: '2.5rem',
|
||||||
|
pill: '999px',
|
||||||
|
rounded: '100%',
|
||||||
|
smRound: '0.25rem',
|
||||||
|
mdRound: '0.5rem',
|
||||||
},
|
},
|
||||||
shadows: {
|
shadows: {
|
||||||
sm: 'none',
|
sm: 'none',
|
||||||
md: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
|
md: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
|
||||||
lg: '0 1px 3px 0 rgba(0, 0, 0, 0.05)',
|
lg: '0 1px 3px 0 rgba(0, 0, 0, 0.05)',
|
||||||
xl: '0 2px 4px 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: {
|
font: {
|
||||||
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
||||||
@@ -101,6 +126,10 @@ export const iistwinSkin: Skin = {
|
|||||||
medium: 500,
|
medium: 500,
|
||||||
semibold: 600,
|
semibold: 600,
|
||||||
},
|
},
|
||||||
|
lineHeight: {
|
||||||
|
md: '1.1',
|
||||||
|
lg: '1.5',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
spacing: {
|
spacing: {
|
||||||
unit: '0.25rem',
|
unit: '0.25rem',
|
||||||
@@ -130,14 +159,32 @@ export const iistwinSkin: Skin = {
|
|||||||
|
|
||||||
backgroundSecondary: 'hsl(220 10% 10%)',
|
backgroundSecondary: 'hsl(220 10% 10%)',
|
||||||
backgroundTertiary: 'hsl(220 10% 14%)',
|
backgroundTertiary: 'hsl(220 10% 14%)',
|
||||||
|
backgroundQuaternary: 'hsl(220 10% 16%)',
|
||||||
backgroundTransparentPrimary: 'hsl(0 0% 100% / 0.04)',
|
backgroundTransparentPrimary: 'hsl(0 0% 100% / 0.04)',
|
||||||
backgroundTransparentSecondary: 'hsl(0 0% 100% / 0.08)',
|
backgroundTransparentSecondary: 'hsl(0 0% 100% / 0.08)',
|
||||||
backgroundTransparentTertiary: 'hsl(0 0% 100% / 0.12)',
|
backgroundTransparentTertiary: 'hsl(0 0% 100% / 0.12)',
|
||||||
backgroundTransparentMedium: 'hsl(0 0% 100% / 0.06)',
|
backgroundTransparentMedium: 'hsl(0 0% 100% / 0.06)',
|
||||||
backgroundTransparentLight: 'hsl(0 0% 100% / 0.03)',
|
backgroundTransparentLight: 'hsl(0 0% 100% / 0.03)',
|
||||||
backgroundTransparentLighter: 'hsl(0 0% 100% / 0.02)',
|
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%)',
|
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%)',
|
fontPrimary: 'hsl(220 5% 92%)',
|
||||||
fontSecondary: 'hsl(220 5% 65%)',
|
fontSecondary: 'hsl(220 5% 65%)',
|
||||||
fontTertiary: 'hsl(220 5% 55%)',
|
fontTertiary: 'hsl(220 5% 55%)',
|
||||||
@@ -175,12 +222,19 @@ export const iistwinSkin: Skin = {
|
|||||||
md: '0.375rem',
|
md: '0.375rem',
|
||||||
lg: '0.5rem',
|
lg: '0.5rem',
|
||||||
xl: '0.75rem',
|
xl: '0.75rem',
|
||||||
|
xxl: '2.5rem',
|
||||||
|
pill: '999px',
|
||||||
|
rounded: '100%',
|
||||||
|
smRound: '0.25rem',
|
||||||
|
mdRound: '0.5rem',
|
||||||
},
|
},
|
||||||
shadows: {
|
shadows: {
|
||||||
sm: 'none',
|
sm: 'none',
|
||||||
md: '0 1px 2px 0 rgba(0, 0, 0, 0.15)',
|
md: '0 1px 2px 0 rgba(0, 0, 0, 0.15)',
|
||||||
lg: '0 2px 4px 0 rgba(0, 0, 0, 0.2)',
|
lg: '0 2px 4px 0 rgba(0, 0, 0, 0.2)',
|
||||||
xl: '0 4px 6px -1px 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: {
|
font: {
|
||||||
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
||||||
@@ -197,6 +251,10 @@ export const iistwinSkin: Skin = {
|
|||||||
medium: 500,
|
medium: 500,
|
||||||
semibold: 600,
|
semibold: 600,
|
||||||
},
|
},
|
||||||
|
lineHeight: {
|
||||||
|
md: '1.1',
|
||||||
|
lg: '1.5',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
spacing: {
|
spacing: {
|
||||||
unit: '0.25rem',
|
unit: '0.25rem',
|
||||||
|
|||||||
@@ -34,14 +34,32 @@ export const omegapromSkin: Skin = {
|
|||||||
|
|
||||||
backgroundSecondary: 'hsl(220 20% 98%)',
|
backgroundSecondary: 'hsl(220 20% 98%)',
|
||||||
backgroundTertiary: 'hsl(220 14% 96%)',
|
backgroundTertiary: 'hsl(220 14% 96%)',
|
||||||
|
backgroundQuaternary: 'hsl(220 14% 94%)',
|
||||||
backgroundTransparentPrimary: 'hsl(221 83% 53% / 0.04)',
|
backgroundTransparentPrimary: 'hsl(221 83% 53% / 0.04)',
|
||||||
backgroundTransparentSecondary: 'hsl(221 83% 53% / 0.08)',
|
backgroundTransparentSecondary: 'hsl(221 83% 53% / 0.08)',
|
||||||
backgroundTransparentTertiary: 'hsl(221 83% 53% / 0.12)',
|
backgroundTransparentTertiary: 'hsl(221 83% 53% / 0.12)',
|
||||||
backgroundTransparentMedium: 'hsl(220 15% 18% / 0.06)',
|
backgroundTransparentMedium: 'hsl(220 15% 18% / 0.06)',
|
||||||
backgroundTransparentLight: 'hsl(220 15% 18% / 0.03)',
|
backgroundTransparentLight: 'hsl(220 15% 18% / 0.03)',
|
||||||
backgroundTransparentLighter: 'hsl(220 15% 18% / 0.02)',
|
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%)',
|
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%)',
|
fontPrimary: 'hsl(220 15% 18%)',
|
||||||
fontSecondary: 'hsl(220 9% 46%)',
|
fontSecondary: 'hsl(220 9% 46%)',
|
||||||
fontTertiary: 'hsl(220 9% 56%)',
|
fontTertiary: 'hsl(220 9% 56%)',
|
||||||
@@ -79,12 +97,19 @@ export const omegapromSkin: Skin = {
|
|||||||
md: '0.5rem',
|
md: '0.5rem',
|
||||||
lg: '0.75rem',
|
lg: '0.75rem',
|
||||||
xl: '1rem',
|
xl: '1rem',
|
||||||
|
xxl: '2.5rem',
|
||||||
|
pill: '999px',
|
||||||
|
rounded: '100%',
|
||||||
|
smRound: '0.25rem',
|
||||||
|
mdRound: '0.5rem',
|
||||||
},
|
},
|
||||||
shadows: {
|
shadows: {
|
||||||
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
|
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
|
||||||
md: '0 2px 4px 0 rgba(0, 0, 0, 0.05)',
|
md: '0 2px 4px 0 rgba(0, 0, 0, 0.05)',
|
||||||
lg: '0 4px 8px -2px rgba(0, 0, 0, 0.06)',
|
lg: '0 4px 8px -2px rgba(0, 0, 0, 0.06)',
|
||||||
xl: '0 8px 16px -4px rgba(0, 0, 0, 0.08)',
|
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: {
|
font: {
|
||||||
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
||||||
@@ -101,6 +126,10 @@ export const omegapromSkin: Skin = {
|
|||||||
medium: 500,
|
medium: 500,
|
||||||
semibold: 600,
|
semibold: 600,
|
||||||
},
|
},
|
||||||
|
lineHeight: {
|
||||||
|
md: '1.1',
|
||||||
|
lg: '1.5',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
spacing: {
|
spacing: {
|
||||||
unit: '0.25rem',
|
unit: '0.25rem',
|
||||||
@@ -130,14 +159,32 @@ export const omegapromSkin: Skin = {
|
|||||||
|
|
||||||
backgroundSecondary: 'hsl(220 20% 10%)',
|
backgroundSecondary: 'hsl(220 20% 10%)',
|
||||||
backgroundTertiary: 'hsl(220 20% 14%)',
|
backgroundTertiary: 'hsl(220 20% 14%)',
|
||||||
|
backgroundQuaternary: 'hsl(220 20% 16%)',
|
||||||
backgroundTransparentPrimary: 'hsl(217 91% 60% / 0.04)',
|
backgroundTransparentPrimary: 'hsl(217 91% 60% / 0.04)',
|
||||||
backgroundTransparentSecondary: 'hsl(217 91% 60% / 0.08)',
|
backgroundTransparentSecondary: 'hsl(217 91% 60% / 0.08)',
|
||||||
backgroundTransparentTertiary: 'hsl(217 91% 60% / 0.12)',
|
backgroundTransparentTertiary: 'hsl(217 91% 60% / 0.12)',
|
||||||
backgroundTransparentMedium: 'hsl(0 0% 100% / 0.06)',
|
backgroundTransparentMedium: 'hsl(0 0% 100% / 0.06)',
|
||||||
backgroundTransparentLight: 'hsl(0 0% 100% / 0.03)',
|
backgroundTransparentLight: 'hsl(0 0% 100% / 0.03)',
|
||||||
backgroundTransparentLighter: 'hsl(0 0% 100% / 0.02)',
|
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%)',
|
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%)',
|
fontPrimary: 'hsl(220 10% 92%)',
|
||||||
fontSecondary: 'hsl(220 10% 65%)',
|
fontSecondary: 'hsl(220 10% 65%)',
|
||||||
fontTertiary: 'hsl(220 10% 55%)',
|
fontTertiary: 'hsl(220 10% 55%)',
|
||||||
@@ -175,12 +222,19 @@ export const omegapromSkin: Skin = {
|
|||||||
md: '0.5rem',
|
md: '0.5rem',
|
||||||
lg: '0.75rem',
|
lg: '0.75rem',
|
||||||
xl: '1rem',
|
xl: '1rem',
|
||||||
|
xxl: '2.5rem',
|
||||||
|
pill: '999px',
|
||||||
|
rounded: '100%',
|
||||||
|
smRound: '0.25rem',
|
||||||
|
mdRound: '0.5rem',
|
||||||
},
|
},
|
||||||
shadows: {
|
shadows: {
|
||||||
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.2)',
|
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.2)',
|
||||||
md: '0 2px 4px 0 rgba(0, 0, 0, 0.25)',
|
md: '0 2px 4px 0 rgba(0, 0, 0, 0.25)',
|
||||||
lg: '0 4px 8px -2px rgba(0, 0, 0, 0.3)',
|
lg: '0 4px 8px -2px rgba(0, 0, 0, 0.3)',
|
||||||
xl: '0 8px 16px -4px rgba(0, 0, 0, 0.35)',
|
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: {
|
font: {
|
||||||
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
||||||
@@ -197,6 +251,10 @@ export const omegapromSkin: Skin = {
|
|||||||
medium: 500,
|
medium: 500,
|
||||||
semibold: 600,
|
semibold: 600,
|
||||||
},
|
},
|
||||||
|
lineHeight: {
|
||||||
|
md: '1.1',
|
||||||
|
lg: '1.5',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
spacing: {
|
spacing: {
|
||||||
unit: '0.25rem',
|
unit: '0.25rem',
|
||||||
|
|||||||
@@ -3,7 +3,8 @@ import type { Skin } from '../tokens';
|
|||||||
/**
|
/**
|
||||||
* Скин в стиле Twenty CRM.
|
* Скин в стиле Twenty CRM.
|
||||||
* Референс: https://github.com/twentyhq/twenty
|
* Референс: https://github.com/twentyhq/twenty
|
||||||
* Акцентный цвет — indigo/blue, нейтральная серая палитра, мягкие тени.
|
* Акцентный цвет — indigo/blue, нейтральная серая палитра, мягкие тени,
|
||||||
|
* стеклянные dropdown, super-heavy тени для модалок, noise-текстура хедера.
|
||||||
*/
|
*/
|
||||||
export const twentySkin: Skin = {
|
export const twentySkin: Skin = {
|
||||||
id: 'twenty',
|
id: 'twenty',
|
||||||
@@ -15,65 +16,84 @@ export const twentySkin: Skin = {
|
|||||||
light: {
|
light: {
|
||||||
colors: {
|
colors: {
|
||||||
background: '#ffffff',
|
background: '#ffffff',
|
||||||
foreground: '#333333',
|
foreground: '#303030',
|
||||||
card: '#ffffff',
|
card: '#ffffff',
|
||||||
cardForeground: '#333333',
|
cardForeground: '#303030',
|
||||||
popover: '#ffffff',
|
popover: '#ffffff',
|
||||||
popoverForeground: '#333333',
|
popoverForeground: '#303030',
|
||||||
primary: '#3e63dd',
|
primary: '#3c63de',
|
||||||
primaryForeground: '#ffffff',
|
primaryForeground: '#ffffff',
|
||||||
secondary: '#f4f4f5',
|
secondary: '#f1f1f1',
|
||||||
secondaryForeground: '#333333',
|
secondaryForeground: '#303030',
|
||||||
muted: '#f4f4f5',
|
muted: '#f1f1f1',
|
||||||
mutedForeground: '#666666',
|
mutedForeground: '#666666',
|
||||||
accent: '#e0e7ff',
|
accent: '#d3dfff',
|
||||||
accentForeground: '#1e1b4b',
|
accentForeground: '#19295b',
|
||||||
destructive: '#dc2626',
|
destructive: '#e6474c',
|
||||||
destructiveForeground: '#ffffff',
|
destructiveForeground: '#ffffff',
|
||||||
border: '#e4e4e7',
|
border: '#ececec',
|
||||||
input: '#ffffff',
|
input: '#ffffff',
|
||||||
ring: '#3e63dd',
|
ring: '#3c63de',
|
||||||
|
|
||||||
backgroundSecondary: '#fcfcfc',
|
backgroundSecondary: '#fcfcfc',
|
||||||
backgroundTertiary: '#f4f4f5',
|
backgroundTertiary: '#f1f1f1',
|
||||||
backgroundTransparentPrimary: 'rgba(0, 0, 0, 0.04)',
|
backgroundQuaternary: '#ececec',
|
||||||
backgroundTransparentSecondary: 'rgba(0, 0, 0, 0.08)',
|
backgroundTransparentPrimary: 'rgba(255, 255, 255, 0.5)',
|
||||||
|
backgroundTransparentSecondary: 'rgba(255, 255, 255, 0.4)',
|
||||||
backgroundTransparentTertiary: 'rgba(0, 0, 0, 0.12)',
|
backgroundTransparentTertiary: 'rgba(0, 0, 0, 0.12)',
|
||||||
backgroundTransparentMedium: 'rgba(0, 0, 0, 0.06)',
|
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)',
|
backgroundTransparentLighter: 'rgba(0, 0, 0, 0.02)',
|
||||||
|
backgroundTransparentStrong: 'rgba(0, 0, 0, 0.16)',
|
||||||
|
backgroundTransparentDanger: '#f3000d14',
|
||||||
|
backgroundTransparentBlue: '#0047f112',
|
||||||
|
backgroundTransparentOrange: '#ff9c0029',
|
||||||
|
backgroundTransparentSuccess: '#00a43319',
|
||||||
backgroundNoisy: '#ffffff',
|
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',
|
fontSecondary: '#666666',
|
||||||
fontTertiary: '#999999',
|
fontTertiary: '#9a9a9a',
|
||||||
fontLight: '#a1a1aa',
|
fontLight: '#b4b4b4',
|
||||||
fontExtraLight: '#c4c4c7',
|
fontExtraLight: '#cccccc',
|
||||||
fontInverted: '#ffffff',
|
fontInverted: '#ffffff',
|
||||||
|
|
||||||
borderLight: '#f4f4f5',
|
borderLight: '#f1f1f1',
|
||||||
borderMedium: '#e4e4e7',
|
borderMedium: '#ececec',
|
||||||
borderStrong: '#d4d4d8',
|
borderStrong: '#d4d4d8',
|
||||||
|
|
||||||
statusDone: '#22c55e',
|
statusDone: '#009239',
|
||||||
statusProgress: '#f59e0b',
|
statusProgress: '#fd7600',
|
||||||
statusOverdue: '#ef4444',
|
statusOverdue: '#e6474c',
|
||||||
statusPaused: '#a1a1aa',
|
statusPaused: '#a1a1aa',
|
||||||
|
|
||||||
chart1: '#333333',
|
chart1: '#303030',
|
||||||
chart2: '#22c55e',
|
chart2: '#009239',
|
||||||
chart3: '#f59e0b',
|
chart3: '#fd7600',
|
||||||
chart4: '#3b82f6',
|
chart4: '#3c63de',
|
||||||
chart5: '#ef4444',
|
chart5: '#e6474c',
|
||||||
|
|
||||||
sidebar: '#fcfcfc',
|
sidebar: '#fcfcfc',
|
||||||
sidebarForeground: '#333333',
|
sidebarForeground: '#303030',
|
||||||
sidebarPrimary: '#3e63dd',
|
sidebarPrimary: '#3c63de',
|
||||||
sidebarPrimaryForeground: '#ffffff',
|
sidebarPrimaryForeground: '#ffffff',
|
||||||
sidebarAccent: '#f4f4f5',
|
sidebarAccent: '#f1f1f1',
|
||||||
sidebarAccentForeground: '#333333',
|
sidebarAccentForeground: '#303030',
|
||||||
sidebarBorder: '#e4e4e7',
|
sidebarBorder: '#ececec',
|
||||||
sidebarRing: '#3e63dd',
|
sidebarRing: '#3c63de',
|
||||||
},
|
},
|
||||||
radius: {
|
radius: {
|
||||||
xs: '2px',
|
xs: '2px',
|
||||||
@@ -81,12 +101,20 @@ export const twentySkin: Skin = {
|
|||||||
md: '8px',
|
md: '8px',
|
||||||
lg: '16px',
|
lg: '16px',
|
||||||
xl: '20px',
|
xl: '20px',
|
||||||
|
xxl: '40px',
|
||||||
|
pill: '999px',
|
||||||
|
rounded: '100%',
|
||||||
|
smRound: '4px',
|
||||||
|
mdRound: '8px',
|
||||||
},
|
},
|
||||||
shadows: {
|
shadows: {
|
||||||
sm: '0px 1px 2px 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: '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.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)',
|
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)',
|
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: {
|
font: {
|
||||||
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
||||||
@@ -103,6 +131,10 @@ export const twentySkin: Skin = {
|
|||||||
medium: 500,
|
medium: 500,
|
||||||
semibold: 600,
|
semibold: 600,
|
||||||
},
|
},
|
||||||
|
lineHeight: {
|
||||||
|
md: '1.1',
|
||||||
|
lg: '1.5',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
spacing: {
|
spacing: {
|
||||||
unit: '4px',
|
unit: '4px',
|
||||||
@@ -110,45 +142,64 @@ export const twentySkin: Skin = {
|
|||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
colors: {
|
colors: {
|
||||||
background: '#171717',
|
background: '#101010',
|
||||||
foreground: '#ededed',
|
foreground: '#ececec',
|
||||||
card: '#1f1f1f',
|
card: '#141414',
|
||||||
cardForeground: '#ededed',
|
cardForeground: '#ececec',
|
||||||
popover: '#1f1f1f',
|
popover: '#141414',
|
||||||
popoverForeground: '#ededed',
|
popoverForeground: '#ececec',
|
||||||
primary: '#5b7ee3',
|
primary: '#3c63de',
|
||||||
primaryForeground: '#0a0a0a',
|
primaryForeground: '#ffffff',
|
||||||
secondary: '#262626',
|
secondary: '#171717',
|
||||||
secondaryForeground: '#ededed',
|
secondaryForeground: '#ececec',
|
||||||
muted: '#262626',
|
muted: '#1c1c1c',
|
||||||
mutedForeground: '#a1a1aa',
|
mutedForeground: '#b4b4b4',
|
||||||
accent: '#312e81',
|
accent: '#203675',
|
||||||
accentForeground: '#e0e7ff',
|
accentForeground: '#d7e2ff',
|
||||||
destructive: '#ef4444',
|
destructive: '#e6474c',
|
||||||
destructiveForeground: '#ffffff',
|
destructiveForeground: '#ffffff',
|
||||||
border: '#27272a',
|
border: '#1c1c1c',
|
||||||
input: '#1f1f1f',
|
input: '#171717',
|
||||||
ring: '#5b7ee3',
|
ring: '#3c63de',
|
||||||
|
|
||||||
backgroundSecondary: '#1f1f1f',
|
backgroundSecondary: '#141414',
|
||||||
backgroundTertiary: '#262626',
|
backgroundTertiary: '#171717',
|
||||||
backgroundTransparentPrimary: 'rgba(255, 255, 255, 0.04)',
|
backgroundQuaternary: '#1c1c1c',
|
||||||
backgroundTransparentSecondary: 'rgba(255, 255, 255, 0.08)',
|
backgroundTransparentPrimary: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
backgroundTransparentSecondary: 'rgba(0, 0, 0, 0.4)',
|
||||||
backgroundTransparentTertiary: 'rgba(255, 255, 255, 0.12)',
|
backgroundTransparentTertiary: 'rgba(255, 255, 255, 0.12)',
|
||||||
backgroundTransparentMedium: 'rgba(255, 255, 255, 0.06)',
|
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)',
|
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',
|
backgroundOverlayPrimary: 'rgba(0, 0, 0, 0.72)',
|
||||||
fontSecondary: '#a1a1aa',
|
backgroundOverlaySecondary: 'rgba(0, 0, 0, 0.36)',
|
||||||
fontTertiary: '#71717a',
|
backgroundOverlayTertiary: 'rgba(0, 0, 0, 0.36)',
|
||||||
fontLight: '#52525b',
|
|
||||||
fontExtraLight: '#3f3f46',
|
|
||||||
fontInverted: '#171717',
|
|
||||||
|
|
||||||
borderLight: '#262626',
|
blurLight: 'blur(6px) saturate(200%) contrast(100%) brightness(130%)',
|
||||||
borderMedium: '#27272a',
|
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',
|
borderStrong: '#3f3f46',
|
||||||
|
|
||||||
statusDone: '#4ade80',
|
statusDone: '#4ade80',
|
||||||
@@ -162,14 +213,14 @@ export const twentySkin: Skin = {
|
|||||||
chart4: '#60a5fa',
|
chart4: '#60a5fa',
|
||||||
chart5: '#f87171',
|
chart5: '#f87171',
|
||||||
|
|
||||||
sidebar: '#171717',
|
sidebar: '#101010',
|
||||||
sidebarForeground: '#ededed',
|
sidebarForeground: '#ececec',
|
||||||
sidebarPrimary: '#5b7ee3',
|
sidebarPrimary: '#3c63de',
|
||||||
sidebarPrimaryForeground: '#0a0a0a',
|
sidebarPrimaryForeground: '#ffffff',
|
||||||
sidebarAccent: '#262626',
|
sidebarAccent: '#171717',
|
||||||
sidebarAccentForeground: '#ededed',
|
sidebarAccentForeground: '#ececec',
|
||||||
sidebarBorder: '#27272a',
|
sidebarBorder: '#1c1c1c',
|
||||||
sidebarRing: '#5b7ee3',
|
sidebarRing: '#3c63de',
|
||||||
},
|
},
|
||||||
radius: {
|
radius: {
|
||||||
xs: '2px',
|
xs: '2px',
|
||||||
@@ -177,12 +228,20 @@ export const twentySkin: Skin = {
|
|||||||
md: '8px',
|
md: '8px',
|
||||||
lg: '16px',
|
lg: '16px',
|
||||||
xl: '20px',
|
xl: '20px',
|
||||||
|
xxl: '40px',
|
||||||
|
pill: '999px',
|
||||||
|
rounded: '100%',
|
||||||
|
smRound: '4px',
|
||||||
|
mdRound: '8px',
|
||||||
},
|
},
|
||||||
shadows: {
|
shadows: {
|
||||||
sm: '0px 1px 2px 0px rgba(0, 0, 0, 0.2)',
|
sm: '0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 0px 4px 0px rgba(0, 0, 0, 0.3)',
|
||||||
md: '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)',
|
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)',
|
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: {
|
font: {
|
||||||
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
||||||
@@ -199,6 +258,10 @@ export const twentySkin: Skin = {
|
|||||||
medium: 500,
|
medium: 500,
|
||||||
semibold: 600,
|
semibold: 600,
|
||||||
},
|
},
|
||||||
|
lineHeight: {
|
||||||
|
md: '1.1',
|
||||||
|
lg: '1.5',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
spacing: {
|
spacing: {
|
||||||
unit: '4px',
|
unit: '4px',
|
||||||
|
|||||||
@@ -22,13 +22,28 @@
|
|||||||
--ring: hsl(220 10% 15%);
|
--ring: hsl(220 10% 15%);
|
||||||
--tw-background-secondary: hsl(0 0% 98%);
|
--tw-background-secondary: hsl(0 0% 98%);
|
||||||
--tw-background-tertiary: hsl(0 0% 96%);
|
--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-primary: hsl(220 10% 15% / 0.04);
|
||||||
--tw-background-transparent-secondary: hsl(220 10% 15% / 0.08);
|
--tw-background-transparent-secondary: hsl(220 10% 15% / 0.08);
|
||||||
--tw-background-transparent-tertiary: hsl(220 10% 15% / 0.12);
|
--tw-background-transparent-tertiary: hsl(220 10% 15% / 0.12);
|
||||||
--tw-background-transparent-medium: hsl(220 10% 15% / 0.06);
|
--tw-background-transparent-medium: hsl(220 10% 15% / 0.06);
|
||||||
--tw-background-transparent-light: hsl(220 10% 15% / 0.03);
|
--tw-background-transparent-light: hsl(220 10% 15% / 0.03);
|
||||||
--tw-background-transparent-lighter: hsl(220 10% 15% / 0.02);
|
--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-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-primary: hsl(220 10% 15%);
|
||||||
--tw-font-secondary: hsl(220 5% 45%);
|
--tw-font-secondary: hsl(220 5% 45%);
|
||||||
--tw-font-tertiary: hsl(220 5% 55%);
|
--tw-font-tertiary: hsl(220 5% 55%);
|
||||||
@@ -60,6 +75,11 @@
|
|||||||
--tw-border-radius-md: 0.375rem;
|
--tw-border-radius-md: 0.375rem;
|
||||||
--tw-border-radius-lg: 0.5rem;
|
--tw-border-radius-lg: 0.5rem;
|
||||||
--tw-border-radius-xl: 0.75rem;
|
--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-sm: none;
|
||||||
--tw-box-shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
|
--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);
|
--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-regular: 400;
|
||||||
--tw-font-weight-medium: 500;
|
--tw-font-weight-medium: 500;
|
||||||
--tw-font-weight-semibold: 600;
|
--tw-font-weight-semibold: 600;
|
||||||
|
--tw-line-height-md: 1.1;
|
||||||
|
--tw-line-height-lg: 1.5;
|
||||||
--tw-spacing-unit: 0.25rem;
|
--tw-spacing-unit: 0.25rem;
|
||||||
--radius: 0.5rem;
|
--radius: 0.5rem;
|
||||||
}
|
}
|
||||||
@@ -100,13 +122,28 @@
|
|||||||
--ring: hsl(0 0% 100%);
|
--ring: hsl(0 0% 100%);
|
||||||
--tw-background-secondary: hsl(220 10% 10%);
|
--tw-background-secondary: hsl(220 10% 10%);
|
||||||
--tw-background-tertiary: hsl(220 10% 14%);
|
--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-primary: hsl(0 0% 100% / 0.04);
|
||||||
--tw-background-transparent-secondary: hsl(0 0% 100% / 0.08);
|
--tw-background-transparent-secondary: hsl(0 0% 100% / 0.08);
|
||||||
--tw-background-transparent-tertiary: hsl(0 0% 100% / 0.12);
|
--tw-background-transparent-tertiary: hsl(0 0% 100% / 0.12);
|
||||||
--tw-background-transparent-medium: hsl(0 0% 100% / 0.06);
|
--tw-background-transparent-medium: hsl(0 0% 100% / 0.06);
|
||||||
--tw-background-transparent-light: hsl(0 0% 100% / 0.03);
|
--tw-background-transparent-light: hsl(0 0% 100% / 0.03);
|
||||||
--tw-background-transparent-lighter: hsl(0 0% 100% / 0.02);
|
--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-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-primary: hsl(220 5% 92%);
|
||||||
--tw-font-secondary: hsl(220 5% 65%);
|
--tw-font-secondary: hsl(220 5% 65%);
|
||||||
--tw-font-tertiary: hsl(220 5% 55%);
|
--tw-font-tertiary: hsl(220 5% 55%);
|
||||||
@@ -138,6 +175,11 @@
|
|||||||
--tw-border-radius-md: 0.375rem;
|
--tw-border-radius-md: 0.375rem;
|
||||||
--tw-border-radius-lg: 0.5rem;
|
--tw-border-radius-lg: 0.5rem;
|
||||||
--tw-border-radius-xl: 0.75rem;
|
--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-sm: none;
|
||||||
--tw-box-shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
|
--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);
|
--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-regular: 400;
|
||||||
--tw-font-weight-medium: 500;
|
--tw-font-weight-medium: 500;
|
||||||
--tw-font-weight-semibold: 600;
|
--tw-font-weight-semibold: 600;
|
||||||
|
--tw-line-height-md: 1.1;
|
||||||
|
--tw-line-height-lg: 1.5;
|
||||||
--tw-spacing-unit: 0.25rem;
|
--tw-spacing-unit: 0.25rem;
|
||||||
--radius: 0.5rem;
|
--radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-skin="twenty"][data-theme="light"] {
|
[data-skin="twenty"][data-theme="light"] {
|
||||||
--background: #ffffff;
|
--background: #ffffff;
|
||||||
--foreground: #333333;
|
--foreground: #303030;
|
||||||
--card: #ffffff;
|
--card: #ffffff;
|
||||||
--card-foreground: #333333;
|
--card-foreground: #303030;
|
||||||
--popover: #ffffff;
|
--popover: #ffffff;
|
||||||
--popover-foreground: #333333;
|
--popover-foreground: #303030;
|
||||||
--primary: #3e63dd;
|
--primary: #3c63de;
|
||||||
--primary-foreground: #ffffff;
|
--primary-foreground: #ffffff;
|
||||||
--secondary: #f4f4f5;
|
--secondary: #f1f1f1;
|
||||||
--secondary-foreground: #333333;
|
--secondary-foreground: #303030;
|
||||||
--muted: #f4f4f5;
|
--muted: #f1f1f1;
|
||||||
--muted-foreground: #666666;
|
--muted-foreground: #666666;
|
||||||
--accent: #e0e7ff;
|
--accent: #d3dfff;
|
||||||
--accent-foreground: #1e1b4b;
|
--accent-foreground: #19295b;
|
||||||
--destructive: #dc2626;
|
--destructive: #e6474c;
|
||||||
--destructive-foreground: #ffffff;
|
--destructive-foreground: #ffffff;
|
||||||
--border: #e4e4e7;
|
--border: #ececec;
|
||||||
--input: #ffffff;
|
--input: #ffffff;
|
||||||
--ring: #3e63dd;
|
--ring: #3c63de;
|
||||||
--tw-background-secondary: #fcfcfc;
|
--tw-background-secondary: #fcfcfc;
|
||||||
--tw-background-tertiary: #f4f4f5;
|
--tw-background-tertiary: #f1f1f1;
|
||||||
--tw-background-transparent-primary: rgba(0, 0, 0, 0.04);
|
--tw-background-quaternary: #ececec;
|
||||||
--tw-background-transparent-secondary: rgba(0, 0, 0, 0.08);
|
--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-tertiary: rgba(0, 0, 0, 0.12);
|
||||||
--tw-background-transparent-medium: rgba(0, 0, 0, 0.06);
|
--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-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-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-secondary: #666666;
|
||||||
--tw-font-tertiary: #999999;
|
--tw-font-tertiary: #9a9a9a;
|
||||||
--tw-font-light: #a1a1aa;
|
--tw-font-light: #b4b4b4;
|
||||||
--tw-font-extra-light: #c4c4c7;
|
--tw-font-extra-light: #cccccc;
|
||||||
--tw-font-inverted: #ffffff;
|
--tw-font-inverted: #ffffff;
|
||||||
--tw-border-light: #f4f4f5;
|
--tw-border-light: #f1f1f1;
|
||||||
--tw-border-medium: #e4e4e7;
|
--tw-border-medium: #ececec;
|
||||||
--tw-border-strong: #d4d4d8;
|
--tw-border-strong: #d4d4d8;
|
||||||
--status-done: #22c55e;
|
--status-done: #009239;
|
||||||
--status-progress: #f59e0b;
|
--status-progress: #fd7600;
|
||||||
--status-overdue: #ef4444;
|
--status-overdue: #e6474c;
|
||||||
--status-paused: #a1a1aa;
|
--status-paused: #a1a1aa;
|
||||||
--chart1: #333333;
|
--chart1: #303030;
|
||||||
--chart2: #22c55e;
|
--chart2: #009239;
|
||||||
--chart3: #f59e0b;
|
--chart3: #fd7600;
|
||||||
--chart4: #3b82f6;
|
--chart4: #3c63de;
|
||||||
--chart5: #ef4444;
|
--chart5: #e6474c;
|
||||||
--sidebar: #fcfcfc;
|
--sidebar: #fcfcfc;
|
||||||
--sidebar-foreground: #333333;
|
--sidebar-foreground: #303030;
|
||||||
--sidebar-primary: #3e63dd;
|
--sidebar-primary: #3c63de;
|
||||||
--sidebar-primary-foreground: #ffffff;
|
--sidebar-primary-foreground: #ffffff;
|
||||||
--sidebar-accent: #f4f4f5;
|
--sidebar-accent: #f1f1f1;
|
||||||
--sidebar-accent-foreground: #333333;
|
--sidebar-accent-foreground: #303030;
|
||||||
--sidebar-border: #e4e4e7;
|
--sidebar-border: #ececec;
|
||||||
--sidebar-ring: #3e63dd;
|
--sidebar-ring: #3c63de;
|
||||||
--tw-border-radius-xs: 2px;
|
--tw-border-radius-xs: 2px;
|
||||||
--tw-border-radius-sm: 4px;
|
--tw-border-radius-sm: 4px;
|
||||||
--tw-border-radius-md: 8px;
|
--tw-border-radius-md: 8px;
|
||||||
--tw-border-radius-lg: 16px;
|
--tw-border-radius-lg: 16px;
|
||||||
--tw-border-radius-xl: 20px;
|
--tw-border-radius-xl: 20px;
|
||||||
--tw-box-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
|
--tw-border-radius-xxl: 40px;
|
||||||
--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-border-radius-pill: 999px;
|
||||||
--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-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);
|
--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-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
--font-mono: "DM Mono", "SF Mono", "Monaco", monospace;
|
--font-mono: "DM Mono", "SF Mono", "Monaco", monospace;
|
||||||
@@ -230,47 +294,64 @@
|
|||||||
--tw-font-weight-regular: 400;
|
--tw-font-weight-regular: 400;
|
||||||
--tw-font-weight-medium: 500;
|
--tw-font-weight-medium: 500;
|
||||||
--tw-font-weight-semibold: 600;
|
--tw-font-weight-semibold: 600;
|
||||||
|
--tw-line-height-md: 1.1;
|
||||||
|
--tw-line-height-lg: 1.5;
|
||||||
--tw-spacing-unit: 4px;
|
--tw-spacing-unit: 4px;
|
||||||
--radius: 16px;
|
--radius: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-skin="twenty"][data-theme="dark"] {
|
[data-skin="twenty"][data-theme="dark"] {
|
||||||
--background: #171717;
|
--background: #101010;
|
||||||
--foreground: #ededed;
|
--foreground: #ececec;
|
||||||
--card: #1f1f1f;
|
--card: #141414;
|
||||||
--card-foreground: #ededed;
|
--card-foreground: #ececec;
|
||||||
--popover: #1f1f1f;
|
--popover: #141414;
|
||||||
--popover-foreground: #ededed;
|
--popover-foreground: #ececec;
|
||||||
--primary: #5b7ee3;
|
--primary: #3c63de;
|
||||||
--primary-foreground: #0a0a0a;
|
--primary-foreground: #ffffff;
|
||||||
--secondary: #262626;
|
--secondary: #171717;
|
||||||
--secondary-foreground: #ededed;
|
--secondary-foreground: #ececec;
|
||||||
--muted: #262626;
|
--muted: #1c1c1c;
|
||||||
--muted-foreground: #a1a1aa;
|
--muted-foreground: #b4b4b4;
|
||||||
--accent: #312e81;
|
--accent: #203675;
|
||||||
--accent-foreground: #e0e7ff;
|
--accent-foreground: #d7e2ff;
|
||||||
--destructive: #ef4444;
|
--destructive: #e6474c;
|
||||||
--destructive-foreground: #ffffff;
|
--destructive-foreground: #ffffff;
|
||||||
--border: #27272a;
|
--border: #1c1c1c;
|
||||||
--input: #1f1f1f;
|
--input: #171717;
|
||||||
--ring: #5b7ee3;
|
--ring: #3c63de;
|
||||||
--tw-background-secondary: #1f1f1f;
|
--tw-background-secondary: #141414;
|
||||||
--tw-background-tertiary: #262626;
|
--tw-background-tertiary: #171717;
|
||||||
--tw-background-transparent-primary: rgba(255, 255, 255, 0.04);
|
--tw-background-quaternary: #1c1c1c;
|
||||||
--tw-background-transparent-secondary: rgba(255, 255, 255, 0.08);
|
--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-tertiary: rgba(255, 255, 255, 0.12);
|
||||||
--tw-background-transparent-medium: rgba(255, 255, 255, 0.06);
|
--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-transparent-lighter: rgba(255, 255, 255, 0.02);
|
||||||
--tw-background-noisy: #171717;
|
--tw-background-transparent-strong: rgba(255, 255, 255, 0.14);
|
||||||
--tw-font-primary: #ededed;
|
--tw-background-transparent-danger: #ff173f2d;
|
||||||
--tw-font-secondary: #a1a1aa;
|
--tw-background-transparent-blue: #3566ff57;
|
||||||
--tw-font-tertiary: #71717a;
|
--tw-background-transparent-orange: #ff590039;
|
||||||
--tw-font-light: #52525b;
|
--tw-background-transparent-success: #11ff992d;
|
||||||
--tw-font-extra-light: #3f3f46;
|
--tw-background-noisy: #101010;
|
||||||
--tw-font-inverted: #171717;
|
--tw-background-overlay-primary: rgba(0, 0, 0, 0.72);
|
||||||
--tw-border-light: #262626;
|
--tw-background-overlay-secondary: rgba(0, 0, 0, 0.36);
|
||||||
--tw-border-medium: #27272a;
|
--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;
|
--tw-border-strong: #3f3f46;
|
||||||
--status-done: #4ade80;
|
--status-done: #4ade80;
|
||||||
--status-progress: #fbbf24;
|
--status-progress: #fbbf24;
|
||||||
@@ -281,21 +362,26 @@
|
|||||||
--chart3: #fbbf24;
|
--chart3: #fbbf24;
|
||||||
--chart4: #60a5fa;
|
--chart4: #60a5fa;
|
||||||
--chart5: #f87171;
|
--chart5: #f87171;
|
||||||
--sidebar: #171717;
|
--sidebar: #101010;
|
||||||
--sidebar-foreground: #ededed;
|
--sidebar-foreground: #ececec;
|
||||||
--sidebar-primary: #5b7ee3;
|
--sidebar-primary: #3c63de;
|
||||||
--sidebar-primary-foreground: #0a0a0a;
|
--sidebar-primary-foreground: #ffffff;
|
||||||
--sidebar-accent: #262626;
|
--sidebar-accent: #171717;
|
||||||
--sidebar-accent-foreground: #ededed;
|
--sidebar-accent-foreground: #ececec;
|
||||||
--sidebar-border: #27272a;
|
--sidebar-border: #1c1c1c;
|
||||||
--sidebar-ring: #5b7ee3;
|
--sidebar-ring: #3c63de;
|
||||||
--tw-border-radius-xs: 2px;
|
--tw-border-radius-xs: 2px;
|
||||||
--tw-border-radius-sm: 4px;
|
--tw-border-radius-sm: 4px;
|
||||||
--tw-border-radius-md: 8px;
|
--tw-border-radius-md: 8px;
|
||||||
--tw-border-radius-lg: 16px;
|
--tw-border-radius-lg: 16px;
|
||||||
--tw-border-radius-xl: 20px;
|
--tw-border-radius-xl: 20px;
|
||||||
--tw-box-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
|
--tw-border-radius-xxl: 40px;
|
||||||
--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-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-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);
|
--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;
|
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
@@ -308,6 +394,8 @@
|
|||||||
--tw-font-weight-regular: 400;
|
--tw-font-weight-regular: 400;
|
||||||
--tw-font-weight-medium: 500;
|
--tw-font-weight-medium: 500;
|
||||||
--tw-font-weight-semibold: 600;
|
--tw-font-weight-semibold: 600;
|
||||||
|
--tw-line-height-md: 1.1;
|
||||||
|
--tw-line-height-lg: 1.5;
|
||||||
--tw-spacing-unit: 4px;
|
--tw-spacing-unit: 4px;
|
||||||
--radius: 16px;
|
--radius: 16px;
|
||||||
}
|
}
|
||||||
@@ -334,13 +422,28 @@
|
|||||||
--ring: hsl(221 83% 53%);
|
--ring: hsl(221 83% 53%);
|
||||||
--tw-background-secondary: hsl(220 20% 98%);
|
--tw-background-secondary: hsl(220 20% 98%);
|
||||||
--tw-background-tertiary: hsl(220 14% 96%);
|
--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-primary: hsl(221 83% 53% / 0.04);
|
||||||
--tw-background-transparent-secondary: hsl(221 83% 53% / 0.08);
|
--tw-background-transparent-secondary: hsl(221 83% 53% / 0.08);
|
||||||
--tw-background-transparent-tertiary: hsl(221 83% 53% / 0.12);
|
--tw-background-transparent-tertiary: hsl(221 83% 53% / 0.12);
|
||||||
--tw-background-transparent-medium: hsl(220 15% 18% / 0.06);
|
--tw-background-transparent-medium: hsl(220 15% 18% / 0.06);
|
||||||
--tw-background-transparent-light: hsl(220 15% 18% / 0.03);
|
--tw-background-transparent-light: hsl(220 15% 18% / 0.03);
|
||||||
--tw-background-transparent-lighter: hsl(220 15% 18% / 0.02);
|
--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-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-primary: hsl(220 15% 18%);
|
||||||
--tw-font-secondary: hsl(220 9% 46%);
|
--tw-font-secondary: hsl(220 9% 46%);
|
||||||
--tw-font-tertiary: hsl(220 9% 56%);
|
--tw-font-tertiary: hsl(220 9% 56%);
|
||||||
@@ -372,6 +475,11 @@
|
|||||||
--tw-border-radius-md: 0.5rem;
|
--tw-border-radius-md: 0.5rem;
|
||||||
--tw-border-radius-lg: 0.75rem;
|
--tw-border-radius-lg: 0.75rem;
|
||||||
--tw-border-radius-xl: 1rem;
|
--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-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-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);
|
--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-regular: 400;
|
||||||
--tw-font-weight-medium: 500;
|
--tw-font-weight-medium: 500;
|
||||||
--tw-font-weight-semibold: 600;
|
--tw-font-weight-semibold: 600;
|
||||||
|
--tw-line-height-md: 1.1;
|
||||||
|
--tw-line-height-lg: 1.5;
|
||||||
--tw-spacing-unit: 0.25rem;
|
--tw-spacing-unit: 0.25rem;
|
||||||
--radius: 0.75rem;
|
--radius: 0.75rem;
|
||||||
}
|
}
|
||||||
@@ -412,13 +522,28 @@
|
|||||||
--ring: hsl(217 91% 60%);
|
--ring: hsl(217 91% 60%);
|
||||||
--tw-background-secondary: hsl(220 20% 10%);
|
--tw-background-secondary: hsl(220 20% 10%);
|
||||||
--tw-background-tertiary: hsl(220 20% 14%);
|
--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-primary: hsl(217 91% 60% / 0.04);
|
||||||
--tw-background-transparent-secondary: hsl(217 91% 60% / 0.08);
|
--tw-background-transparent-secondary: hsl(217 91% 60% / 0.08);
|
||||||
--tw-background-transparent-tertiary: hsl(217 91% 60% / 0.12);
|
--tw-background-transparent-tertiary: hsl(217 91% 60% / 0.12);
|
||||||
--tw-background-transparent-medium: hsl(0 0% 100% / 0.06);
|
--tw-background-transparent-medium: hsl(0 0% 100% / 0.06);
|
||||||
--tw-background-transparent-light: hsl(0 0% 100% / 0.03);
|
--tw-background-transparent-light: hsl(0 0% 100% / 0.03);
|
||||||
--tw-background-transparent-lighter: hsl(0 0% 100% / 0.02);
|
--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-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-primary: hsl(220 10% 92%);
|
||||||
--tw-font-secondary: hsl(220 10% 65%);
|
--tw-font-secondary: hsl(220 10% 65%);
|
||||||
--tw-font-tertiary: hsl(220 10% 55%);
|
--tw-font-tertiary: hsl(220 10% 55%);
|
||||||
@@ -450,6 +575,11 @@
|
|||||||
--tw-border-radius-md: 0.5rem;
|
--tw-border-radius-md: 0.5rem;
|
||||||
--tw-border-radius-lg: 0.75rem;
|
--tw-border-radius-lg: 0.75rem;
|
||||||
--tw-border-radius-xl: 1rem;
|
--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-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-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);
|
--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-regular: 400;
|
||||||
--tw-font-weight-medium: 500;
|
--tw-font-weight-medium: 500;
|
||||||
--tw-font-weight-semibold: 600;
|
--tw-font-weight-semibold: 600;
|
||||||
|
--tw-line-height-md: 1.1;
|
||||||
|
--tw-line-height-lg: 1.5;
|
||||||
--tw-spacing-unit: 0.25rem;
|
--tw-spacing-unit: 0.25rem;
|
||||||
--radius: 0.75rem;
|
--radius: 0.75rem;
|
||||||
}
|
}
|
||||||
@@ -49,14 +49,32 @@ export interface ColorTokens {
|
|||||||
// Twenty-style extended tokens
|
// Twenty-style extended tokens
|
||||||
backgroundSecondary: string;
|
backgroundSecondary: string;
|
||||||
backgroundTertiary: string;
|
backgroundTertiary: string;
|
||||||
|
backgroundQuaternary: string;
|
||||||
backgroundTransparentPrimary: string;
|
backgroundTransparentPrimary: string;
|
||||||
backgroundTransparentSecondary: string;
|
backgroundTransparentSecondary: string;
|
||||||
backgroundTransparentTertiary: string;
|
backgroundTransparentTertiary: string;
|
||||||
backgroundTransparentMedium: string;
|
backgroundTransparentMedium: string;
|
||||||
backgroundTransparentLight: string;
|
backgroundTransparentLight: string;
|
||||||
backgroundTransparentLighter: string;
|
backgroundTransparentLighter: string;
|
||||||
|
backgroundTransparentStrong: string;
|
||||||
|
backgroundTransparentDanger: string;
|
||||||
|
backgroundTransparentBlue: string;
|
||||||
|
backgroundTransparentOrange: string;
|
||||||
|
backgroundTransparentSuccess: string;
|
||||||
backgroundNoisy: string;
|
backgroundNoisy: string;
|
||||||
|
|
||||||
|
backgroundOverlayPrimary: string;
|
||||||
|
backgroundOverlaySecondary: string;
|
||||||
|
backgroundOverlayTertiary: string;
|
||||||
|
|
||||||
|
blurLight: string;
|
||||||
|
blurMedium: string;
|
||||||
|
blurStrong: string;
|
||||||
|
|
||||||
|
boxShadowColor: string;
|
||||||
|
boxShadowUnderline: string;
|
||||||
|
boxShadowSuperHeavy: string;
|
||||||
|
|
||||||
fontPrimary: string;
|
fontPrimary: string;
|
||||||
fontSecondary: string;
|
fontSecondary: string;
|
||||||
fontTertiary: string;
|
fontTertiary: string;
|
||||||
@@ -98,6 +116,11 @@ export interface RadiusTokens {
|
|||||||
md: string;
|
md: string;
|
||||||
lg: string;
|
lg: string;
|
||||||
xl: string;
|
xl: string;
|
||||||
|
xxl: string;
|
||||||
|
pill: string;
|
||||||
|
rounded: string;
|
||||||
|
smRound: string;
|
||||||
|
mdRound: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ShadowTokens {
|
export interface ShadowTokens {
|
||||||
@@ -105,6 +128,8 @@ export interface ShadowTokens {
|
|||||||
md: string;
|
md: string;
|
||||||
lg: string;
|
lg: string;
|
||||||
xl: string;
|
xl: string;
|
||||||
|
underline: string;
|
||||||
|
superHeavy: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface FontTokens {
|
export interface FontTokens {
|
||||||
@@ -122,6 +147,10 @@ export interface FontTokens {
|
|||||||
medium: number;
|
medium: number;
|
||||||
semibold: number;
|
semibold: number;
|
||||||
};
|
};
|
||||||
|
lineHeight: {
|
||||||
|
md: string;
|
||||||
|
lg: string;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SpacingTokens {
|
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.backgroundSecondary', label: 'Secondary фон', category: 'Twenty' },
|
||||||
{ key: 'colors.backgroundTertiary', label: 'Tertiary фон', 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.fontPrimary', label: 'Primary текст', category: 'Twenty' },
|
||||||
{ key: 'colors.fontSecondary', label: 'Secondary текст', category: 'Twenty' },
|
{ key: 'colors.fontSecondary', label: 'Secondary текст', category: 'Twenty' },
|
||||||
{ key: 'colors.fontTertiary', label: 'Tertiary текст', category: 'Twenty' },
|
{ key: 'colors.fontTertiary', label: 'Tertiary текст', category: 'Twenty' },
|
||||||
{ key: 'colors.borderLight', label: 'Light граница', category: 'Twenty' },
|
{ key: 'colors.borderLight', label: 'Light граница', category: 'Twenty' },
|
||||||
{ key: 'colors.borderMedium', label: 'Medium граница', category: 'Twenty' },
|
{ key: 'colors.borderMedium', label: 'Medium граница', category: 'Twenty' },
|
||||||
{ key: 'colors.borderStrong', label: 'Strong граница', 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.statusDone', label: 'Готово', category: 'Status' },
|
||||||
{ key: 'colors.statusProgress', 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.md', label: 'MD radius' },
|
||||||
{ key: 'radius.lg', label: 'LG radius' },
|
{ key: 'radius.lg', label: 'LG radius' },
|
||||||
{ key: 'radius.xl', label: 'XL 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.md', label: 'MD shadow' },
|
||||||
{ key: 'shadows.lg', label: 'LG shadow' },
|
{ key: 'shadows.lg', label: 'LG shadow' },
|
||||||
{ key: 'shadows.xl', label: 'XL 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([
|
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] === 'mono') return '--font-mono';
|
||||||
if (path[1] === 'size') return '--tw-font-size-' + camelToKebab(path[2]);
|
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] === 'weight') return '--tw-font-weight-' + camelToKebab(path[2]);
|
||||||
|
if (path[1] === 'lineHeight') return '--tw-line-height-' + camelToKebab(path[2]);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (path[0] === 'spacing') {
|
if (path[0] === 'spacing') {
|
||||||
|
|||||||
@@ -14,6 +14,11 @@ export default {
|
|||||||
"tw-md": "var(--tw-border-radius-md)",
|
"tw-md": "var(--tw-border-radius-md)",
|
||||||
"tw-lg": "var(--tw-border-radius-lg)",
|
"tw-lg": "var(--tw-border-radius-lg)",
|
||||||
"tw-xl": "var(--tw-border-radius-xl)",
|
"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: {
|
colors: {
|
||||||
background: "var(--background)",
|
background: "var(--background)",
|
||||||
@@ -77,6 +82,35 @@ export default {
|
|||||||
DEFAULT: "var(--background)",
|
DEFAULT: "var(--background)",
|
||||||
secondary: "var(--tw-background-secondary)",
|
secondary: "var(--tw-background-secondary)",
|
||||||
tertiary: "var(--tw-background-tertiary)",
|
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": {
|
"tw-font": {
|
||||||
DEFAULT: "var(--foreground)",
|
DEFAULT: "var(--foreground)",
|
||||||
@@ -99,6 +133,10 @@ export default {
|
|||||||
"tw-lg": "var(--tw-font-size-lg)",
|
"tw-lg": "var(--tw-font-size-lg)",
|
||||||
"tw-xl": "var(--tw-font-size-xl)",
|
"tw-xl": "var(--tw-font-size-xl)",
|
||||||
},
|
},
|
||||||
|
lineHeight: {
|
||||||
|
"tw-md": "var(--tw-line-height-md)",
|
||||||
|
"tw-lg": "var(--tw-line-height-lg)",
|
||||||
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ["var(--font-sans)"],
|
sans: ["var(--font-sans)"],
|
||||||
serif: ["var(--font-serif)"],
|
serif: ["var(--font-serif)"],
|
||||||
|
|||||||
Reference in New Issue
Block a user