New folder structure for website (#4159)

New folder structure

packages/twenty-website/src/app/_components/ui/theme/background.ts

@@ -0,0 +1,13 @@
+import { Color, rgba } from './colors';
+
+export const Background = {
+  primary: Color.white,
+  secondary: Color.gray10,
+  tertiary: Color.gray20,
+  transparent: {
+    strong: rgba(Color.gray60, 0.16),
+    medium: rgba(Color.gray60, 0.08),
+    light: rgba(Color.gray60, 0.06),
+    lighter: rgba(Color.gray60, 0.04),
+  },
+};

packages/twenty-website/src/app/_components/ui/theme/border.ts

@@ -0,0 +1,19 @@
+import { Color } from './colors';
+
+const common = {
+  radius: {
+    xs: '2px',
+    sm: '4px',
+    md: '8px',
+    xl: '20px',
+    pill: '999px',
+    rounded: '100%',
+  },
+};
+
+export const Border = {
+  color: {
+    plain: Color.gray60,
+  },
+  ...common,
+};

packages/twenty-website/src/app/_components/ui/theme/colors.ts

@@ -0,0 +1,24 @@
+import hexRgb from 'hex-rgb';
+
+export const mainColors = {
+  white: '#ffffff',
+};
+
+export const secondaryColors = {
+  gray60: '#141414',
+  gray50: '#474747',
+  gray40: '#818181',
+  gray30: '#b3b3b3',
+  gray20: '#f1f1f1',
+  gray10: '#fafafa',
+};
+
+export const Color = {
+  ...mainColors,
+  ...secondaryColors,
+};
+
+export const rgba = (hex: string, alpha: number) => {
+  const rgb = hexRgb(hex, { format: 'array' }).slice(0, -1).join(',');
+  return `rgba(${rgb},${alpha})`;
+};

packages/twenty-website/src/app/_components/ui/theme/font.ts

@@ -0,0 +1,14 @@
+export const Font = {
+  size: {
+    xs: '0.875rem',
+    sm: '1rem',
+    base: '1.125rem',
+    lg: '1.25rem',
+    xl: '1.5rem',
+  },
+  weight: {
+    regular: 400,
+    medium: 500,
+  },
+  family: 'Inter, sans-serif',
+};

packages/twenty-website/src/app/_components/ui/theme/icon.ts

@@ -0,0 +1,13 @@
+export const Icon = {
+  size: {
+    sm: 14,
+    md: 16,
+    lg: 20,
+    xl: 40,
+  },
+  stroke: {
+    sm: 1.6,
+    md: 2,
+    lg: 2.5,
+  },
+};

packages/twenty-website/src/app/_components/ui/theme/text.ts

@@ -0,0 +1,22 @@
+import { Color } from './colors';
+
+export const Text = {
+  color: {
+    primary: Color.gray60,
+    secondary: Color.gray50,
+    tertiary: Color.gray40,
+    quarternary: Color.gray30,
+    Inverted: Color.white,
+  },
+  lineHeight: {
+    lg: 1.5,
+    md: 1.2,
+  },
+
+  iconSizeMedium: 16,
+  iconSizeSmall: 14,
+
+  iconStrikeLight: 1.6,
+  iconStrikeMedium: 2,
+  iconStrikeBold: 2.5,
+};

packages/twenty-website/src/app/_components/ui/theme/theme.ts

@@ -0,0 +1,18 @@
+import { Background } from '@/app/_components/ui/theme/background';
+import { Border } from '@/app/_components/ui/theme/border';
+import { Color } from '@/app/_components/ui/theme/colors';
+import { Font } from '@/app/_components/ui/theme/font';
+import { Icon } from '@/app/_components/ui/theme/icon';
+import { Text } from '@/app/_components/ui/theme/text';
+
+export const Theme = {
+  color: Color,
+  border: Border,
+  background: Background,
+  text: Text,
+  spacingMultiplicator: 4,
+  icon: Icon,
+  font: Font,
+  spacing: (...args: number[]) =>
+    args.map((multiplicator) => `${multiplicator * 4}px`).join(' '),
+};