Fix minor bugs

Author: TheUltDev

design/theme.ts

@@ -1,14 +1,105 @@
 export type Themes = keyof typeof themes;
 
 export const breakpoints = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1200,
-}
+  /** Phones (portrait) */
+  initial: 0,
+  /** Phones (landscape) */
+  xs: 520,
+  /** Tablets (portrait) */
+  sm: 768,
+  /** Tablets (landscape) */
+  md: 1024,
+  /** Laptops */
+  lg: 1280,
+  /** Desktops */
+  xl: 1640,
+  /** Televisions */
+  xxl: 1920,
+} as const;
 
-export const pallete = {
+export const display = {
+  space1: 4,
+  space2: 8,
+  space3: 12,
+  space4: 16,
+  space5: 24,
+  space6: 32,
+  space7: 40,
+  space8: 48,
+  space9: 64,
+  radius1: 3,
+  radius2: 4,
+  radius3: 6,
+  radius4: 8,
+  radius5: 12,
+  radius6: 16,
+} as const;
+
+export const typography = {
+  size1: 12,
+  size2: 14,
+  size3: 16,
+  size4: 18,
+  size5: 20,
+  size6: 24,
+  size7: 28,
+  size8: 35,
+  size9: 60,
+  weightThin: '200',
+  weightLight: '300',
+  weightRegular: '400',
+  weightMedium: '500',
+  weightSemiBold: '600',
+  weightBold: '700',
+  lineHeight1: 16,
+  lineHeight2: 20,
+  lineHeight3: 24,
+  lineHeight4: 26,
+  lineHeight5: 28,
+  lineHeight6: 30,
+  lineHeight7: 36,
+  lineHeight8: 40,
+  lineHeight9: 60,
+  letterSpacing1: 0.04,
+  letterSpacing2: 0,
+  letterSpacing3: 0,
+  letterSpacing4: -0.04,
+  letterSpacing5: -0.08,
+  letterSpacing6: -0.1,
+  letterSpacing7: -0.12,
+  letterSpacing8: -0.16,
+  letterSpacing9: -0.4,
+} as const;
+
+export const font = {
+  family: 'Inter',
+  size: typography.size1,
+  weight: typography.weightRegular,
+  spacing: typography.letterSpacing1,
+  height: typography.lineHeight1,
+  contentSize: typography.size2,
+  inputSize: typography.size2,
+  inputWeight: typography.weightMedium,
+  inputSpacing: typography.letterSpacing2,
+  inputHeight: typography.lineHeight2,
+  contentWeight: typography.weightRegular,
+  contentSpacing: typography.letterSpacing2,
+  contentHeight: typography.lineHeight2,
+  labelSize: typography.size3,
+  labelWeight: typography.weightMedium,
+  labelSpacing: typography.letterSpacing3,
+  labelHeight: typography.lineHeight3,
+  titleSize: typography.size4,
+  titleWeight: typography.weightSemiBold,
+  titleSpacing: typography.letterSpacing4,
+  titleHeight: typography.lineHeight4,
+  headerSize: typography.size5,
+  headerWeight: typography.weightMedium,
+  headerSpacing: typography.letterSpacing5,
+  headerHeight: typography.lineHeight5,
+} as const;
+
+export const palette = {
   white: '#ffffff',
   black: '#000000',
   slate50: '#f8fafc',
@@ -22,17 +113,17 @@ export const pallete = {
   slate800: '#1e293b',
   slate900: '#0f172a',
   slate950: '#020617',
-  gray50: '#f9fafb',
-  gray100: '#f3f4f6',
-  gray200: '#e5e7eb',
-  gray300: '#d1d5db',
-  gray400: '#9ca3af',
-  gray500: '#6b7280',
-  gray600: '#4b5563',
-  gray700: '#374151',
-  gray800: '#1f2937',
-  gray900: '#111827',
-  gray950: '#030712',
+  grey50: '#f9fafb',
+  grey100: '#f3f4f6',
+  grey200: '#e5e7eb',
+  grey300: '#d1d5db',
+  grey400: '#9ca3af',
+  grey500: '#6b7280',
+  grey600: '#4b5563',
+  grey700: '#374151',
+  grey800: '#1f2937',
+  grey900: '#111827',
+  grey950: '#030712',
   zinc50: '#fafafa',
   zinc100: '#f4f4f5',
   zinc200: '#e4e4e7',
@@ -253,57 +344,73 @@ export const pallete = {
   rose800: '#9f1239',
   rose900: '#881337',
   rose950: '#4c0519',
-}
+} as const;
 
 export const themes = {
   light: {
     colors: {
-      background: pallete.white,
-      foreground: pallete.zinc950,
-      card: pallete.white,
-      cardForeground: pallete.zinc950,
-      popover: pallete.white,
-      popoverForeground: pallete.zinc950,
-      primary: pallete.zinc900,
-      primaryForeground: pallete.zinc50,
-      secondary: pallete.zinc100,
-      secondaryForeground: pallete.zinc900,
-      muted: pallete.zinc100,
-      mutedForeground: pallete.zinc500,
-      accent: pallete.zinc100,
-      accentForeground: pallete.zinc900,
-      destructive: pallete.red500,
-      destructiveForeground: pallete.zinc50,
-      border: pallete.zinc200,
-      input: pallete.zinc200,
-      ring: pallete.zinc950,
-      outline: pallete.blue400,
+      background: palette.white,
+      foreground: palette.zinc950,
+      card: palette.white,
+      cardForeground: palette.zinc950,
+      popover: palette.white,
+      popoverForeground: palette.zinc950,
+      primary: palette.zinc900,
+      primaryForeground: palette.zinc50,
+      secondary: palette.zinc100,
+      secondaryForeground: palette.zinc900,
+      muted: palette.zinc100,
+      mutedForeground: palette.zinc500,
+      accent: palette.zinc100,
+      accentForeground: palette.zinc900,
+      info: palette.blue500,
+      success: palette.green500,
+      warning: palette.yellow500,
+      destructive: palette.red500,
+      destructiveForeground: palette.zinc50,
+      border: palette.zinc200,
+      input: palette.zinc200,
+      ring: palette.zinc950,
+      outline: palette.blue400,
     },
+    breakpoints,
+    display,
+    font,
+    palette,
+    typography,
   },
   dark: {
     colors: {
-      background: pallete.zinc950,
-      foreground: pallete.zinc50,
-      card: pallete.zinc950,
-      cardForeground: pallete.zinc50,
-      popover: pallete.zinc950,
-      popoverForeground: pallete.zinc50,
-      primary: pallete.zinc50,
-      primaryForeground: pallete.zinc900,
-      secondary: pallete.zinc800,
-      secondaryForeground: pallete.zinc50,
-      muted: pallete.zinc800,
-      mutedForeground: pallete.zinc400,
-      accent: pallete.zinc800,
-      accentForeground: pallete.zinc50,
-      destructive: pallete.red900,
-      destructiveForeground: pallete.zinc50,
-      border: pallete.zinc800,
-      input: pallete.zinc800,
-      ring: pallete.zinc300,
-      outline: pallete.blue400,
+      background: palette.zinc950,
+      foreground: palette.zinc50,
+      card: palette.zinc950,
+      cardForeground: palette.zinc50,
+      popover: palette.zinc950,
+      popoverForeground: palette.zinc50,
+      primary: palette.zinc50,
+      primaryForeground: palette.zinc900,
+      secondary: palette.zinc800,
+      secondaryForeground: palette.zinc50,
+      muted: palette.zinc800,
+      mutedForeground: palette.zinc400,
+      accent: palette.zinc800,
+      accentForeground: palette.zinc50,
+      info: palette.blue900,
+      success: palette.green900,
+      warning: palette.yellow900,
+      destructive: palette.red900,
+      destructiveForeground: palette.zinc50,
+      border: palette.zinc800,
+      input: palette.zinc800,
+      ring: palette.zinc300,
+      outline: palette.blue400,
     },
+    breakpoints,
+    display,
+    font,
+    palette,
+    typography,
   },
-}
+} as const;
 
 export const initialTheme: Themes = 'light'

toolkit/storybook/common/utils/blocks.tsx

@@ -7,7 +7,7 @@ import {useState, useEffect} from 'react';
 import {ColorPalette, ColorItem, IconGallery, IconItem} from '@storybook/blocks';
 import {extractBasics, extractScales, getBasicProps} from 'utils/colors';
 import {loadIconSet} from 'utils/icons';
-import {pallete} from 'design/theme';
+import {palette} from 'design/theme';
 import {Icon} from 'react-exo/icon';
 
 export function Story(props: React.PropsWithChildren) {
@@ -21,8 +21,8 @@ export function Story(props: React.PropsWithChildren) {
 export function Colors() {
   return (
     <ColorPalette>
-      <ColorItem {...getBasicProps(extractBasics(pallete))}/>
-      {Object.entries(extractScales(pallete)).map(([name, colors]) => (
+      <ColorItem {...getBasicProps(extractBasics(palette))}/>
+      {Object.entries(extractScales(palette)).map(([name, colors]) => (
         <ColorItem
           key={name}
           title={name.charAt(0).toUpperCase() + name.slice(1)}