@mediacubeco/expo-template-fsd 2.3.1 → 2.4.0

package/src/shared/lib/theme/constants/colors.ts

@@ -1,57 +1,350 @@
+import { withBrightness, withTransparency } from '../utils/color'
+
+// WEAK - 80
+// HALF - 40
+// STRONG - 20
+// LIGHT - 10
 const PALETTE = {
-  'LIGHT/WHITE': '#FFFFFF',
-  'LIGHT/BLACK': '#111416',
-  'LIGHT/GRAY': '#D4D4D4',
+  'transparent': 'rgba(0, 0, 0, 0)', // transparent
+
+  'black': 'rgba(0, 0, 0, 1)', // #000000
+  'black-80': 'rgba(0, 0, 0, 0.8)', // #00000080
+  'black-40': 'rgba(0, 0, 0, 0.4)', // #00000040
+  'black-20': 'rgba(0, 0, 0, 0.20)', // #00000020
+  'black-10': 'rgba(0, 0, 0, 0.1)', // #0000001A
+
+  'white': 'rgba(255, 255, 255, 1)', // #FFFFFF
+  'white-80': 'rgba(255, 255, 255, 0.8)', // #FFFFFF80
+  'white-40': 'rgba(255, 255, 255, 0.4)', // #FFFFFF40
+  'white-20': 'rgba(255, 255, 255, 0.20)', // #FFFFFF20
+  'white-10': 'rgba(255, 255, 255, 0.1)', // #FFFFFF1A
+
+  'glow': 'rgba(235, 250, 255, 1)', // #EBFAFF
+
+  'secondary/blue': 'rgba(37, 120, 244, 1)', // #2578F4
+  'secondary/blue-80': 'rgba(37, 120, 244, 0.8)', // #2578F480
+  'secondary/blue-40': 'rgba(37, 120, 244, 0.4)', // #2578F440
+  'secondary/blue-20': 'rgba(37, 120, 244, 0.20)', // #2578F420
+  'secondary/blue-10': 'rgba(37, 120, 244, 0.1)', // #2578F41A
+
+  'secondary/green': 'rgba(77, 203, 77, 1)', // #4DCB4D
+  'secondary/green-80': 'rgba(77, 203, 77, 0.8)', // #4DCB4D80
+  'secondary/green-40': 'rgba(77, 203, 77, 0.4)', // #4DCB4D40
+  'secondary/green-20': 'rgba(77, 203, 77, 0.20)', // #4DCB4D20
+  'secondary/green-10': 'rgba(77, 203, 77, 0.1)', // #4DCB4D1A
+
+  'secondary/orange': 'rgba(252, 177, 0, 1)', // #FCB100
+  'secondary/orange-80': 'rgba(252, 177, 0, 0.8)', // #FCB10080
+  'secondary/orange-40': 'rgba(252, 177, 0, 0.4)', // #FCB10040
+  'secondary/orange-20': 'rgba(252, 177, 0, 0.20)', // #FCB10020
+  'secondary/orange-10': 'rgba(252, 177, 0, 0.1)', // #FCB1001A
+
+  'secondary/red': 'rgba(245, 86, 61, 1)', // #F5563D
+  'secondary/red-80': 'rgba(245, 86, 61, 0.8)', // #F5563D80
+  'secondary/red-40': 'rgba(245, 86, 61, 0.4)', // #F5563D40
+  'secondary/red-20': 'rgba(245, 86, 61, 0.20)', // #F5563D20
+  'secondary/red-10': 'rgba(245, 86, 61, 0.1)', // #F5563D1A
+
+  'neutral/dark': 'rgba(92, 102, 112, 1)', // #5C6670
+  'neutral/dark-10': 'rgba(92, 102, 112, 0.1)', // #5C66701A
+
+  'neutral/black': 'rgba(32, 36, 39, 1)', // #202427
+  'neutral/black-80': 'rgba(32, 36, 39, 0.8)', // #20242780
+
+  'neutral/gray': 'rgba(143, 153, 163, 1)', // #8F99A3
+  'neutral/gray-80': 'rgba(143, 153, 163, 0.8)', // #8F99A3
+  'neutral/gray-40': 'rgba(143, 153, 163, 0.4)', // #8F99A3
+  'neutral/gray-20': 'rgba(143, 153, 163, 0.2)', // #8F99A3
+  'neutral/gray-10': 'rgba(143, 153, 163, 0.1)', // #8F99A3
+
+  'neutral/hover-gray': 'rgba(237, 240, 243, 1)', // #EDF0F3
+
+  'neutral/background': 'rgba(248, 249, 250, 1)', // #F8F9FA
+
+  'neutral/background-app': 'rgba(245, 246, 250, 1)', // #F5F6FA
+
+  'neutral/outline': 'rgba(199, 204, 209, 1)', // #C7CCD1
+  'neutral/outline-10': 'rgba(199, 204, 209, 0.1)', // #C7CCD11A
+
+  'neutral/outline-light': 'rgba(222, 224, 226, 1)', // #DEE0E2
+  'neutral/outline-light-80': 'rgba(222, 224, 226, 0.8)', // #DEE0E2
+  'neutral/outline-light-40': 'rgba(222, 224, 226, 0.4)', // #DEE0E2
+  'neutral/outline-light-20': 'rgba(222, 224, 226, 0.2)', // #DEE0E2
+  'neutral/outline-light-10': 'rgba(222, 224, 226, 0.1)', // #DEE0E2
+
+  'dark/dark': 'rgba(196, 198, 205, 1)', // #C4C6CD
+
+  'dark/white': 'rgba(240, 240, 240, 1)', // #F0F0F0
+  'dark/white-80': 'rgba(240, 240, 240, 0.8)', // #F0F0F080
+
+  'dark/gray': 'rgba(155, 158, 168, 1)', // #9B9EA8
+  'dark/gray-80': 'rgba(155, 158, 168, 0.8)',
+  'dark/gray-40': 'rgba(155, 158, 168, 0.4)',
+  'dark/gray-20': 'rgba(155, 158, 168, 0.2)',
+  'dark/gray-10': 'rgba(155, 158, 168, 0.1)',
+
+  'dark/hover-gray': 'rgba(66, 69, 72, 1)', // #424548
+
+  'dark/background': 'rgba(10, 5, 16, 1)', // #0A0510
+
+  'dark/outline': 'rgba(83, 83, 83, 1)', // #535353
+
+  'dark/outline-gray': 'rgba(83, 83, 83, 1)', // #535353
 
-  'LIGHT/NEUTRAL': '#57626F',
-  'LIGHT/DISABLED': '#C3CAD1',
-  'LIGHT/SURFACE': '#F5F8FD',
-  'LIGHT/FAINT': '#EFF2F7',
+  'dark/outline-gray-dark': 'rgba(53, 53, 53, 1)', // #353535
+  'dark/outline-gray-dark-80': 'rgba(53, 53, 53, 0.8)',
+  'dark/outline-gray-dark-40': 'rgba(53, 53, 53, 0.4)',
+  'dark/outline-gray-dark-20': 'rgba(53, 53, 53, 0.2)',
+  'dark/outline-gray-dark-10': 'rgba(53, 53, 53, 0.1)',
+} as const
 
-  'LIGHT/PRIMARY': '#8756FF',
-  'LIGHT/PRIMARY_ACTIVE': '#7238FF',
-  'LIGHT/PRIMARY_DISABLED': '#D5C9FF',
+/** Идентификаторы акцентного цвета темы. */
+const ThemeAccent = {
+  Mint: 'mint',
+  Violet: 'violet',
+  Indigo: 'indigo',
+  Lime: 'lime',
+} as const
 
-  'LIGHT/ACCENT': '#FF2B75',
-  'LIGHT/ACCENT_ACTIVE': '#E62464',
-  'LIGHT/ACCENT_DISABLED': '#FFBAD2',
+/** Идентификатор акцентного цвета темы. */
+type ThemeAccent = (typeof ThemeAccent)[keyof typeof ThemeAccent]
 
-  'TRANSPARENT': '#FFFFFF00',
+/** Базовый акцентный цвет по идентификатору. */
+const ACCENT_COLORS = {
+  [ThemeAccent.Mint]: 'rgba(43, 172, 143, 1)', // #2BAC8F
+  [ThemeAccent.Violet]: 'rgba(135, 86, 255, 1)', // #8756FF
+  [ThemeAccent.Indigo]: 'rgba(74, 96, 214, 1)', // #4A60D6
+  [ThemeAccent.Lime]: 'rgba(211, 242, 11, 1)', // #D3F20B
+} as const
+
+/** Цвет контента поверх акцентного фона: тёмный для светлых акцентов, белый для остальных. */
+const ACCENT_CONTRAST_COLORS = {
+  [ThemeAccent.Mint]: PALETTE['white'],
+  [ThemeAccent.Violet]: PALETTE['white'],
+  [ThemeAccent.Indigo]: PALETTE['white'],
+  [ThemeAccent.Lime]: PALETTE['neutral/black'],
+} as const
+
+/** Собирает блок PRIMARY-токенов из акцентного цвета с альфа-вариантами. */
+const createPrimaryColors = (themeAccent: ThemeAccent) => {
+  const accentColor = ACCENT_COLORS[themeAccent]
+
+  return {
+    PRIMARY: accentColor,
+    PRIMARY_WEAK: withTransparency(accentColor, 0.8),
+    PRIMARY_HALF: withTransparency(accentColor, 0.4),
+    PRIMARY_STRONG: withTransparency(accentColor, 0.2),
+    PRIMARY_LIGHT: withTransparency(accentColor, 0.1),
+    PRIMARY_CONTRAST: ACCENT_CONTRAST_COLORS[themeAccent],
+  }
 }
 
-const LIGHT_COLORS_COMMON = {
-  PRIMARY: PALETTE['LIGHT/PRIMARY'],
-  PRIMARY_ACTIVE: PALETTE['LIGHT/PRIMARY_ACTIVE'],
-  PRIMARY_DISABLED: PALETTE['LIGHT/PRIMARY_DISABLED'],
+/** Собирает общие токены цвета для заданного акцента. */
+const createCommonColors = (themeAccent: ThemeAccent) => ({
+  ...createPrimaryColors(themeAccent),
+
+  TRANSPARENT: PALETTE['transparent'],
+
+  MATTER: PALETTE['black'],
+  MATTER_WEAK: PALETTE['black-80'],
+  MATTER_HALF: PALETTE['black-40'],
+  MATTER_STRONG: PALETTE['black-20'],
+  MATTER_LIGHT: PALETTE['black-10'],
+
+  CONTRAST: PALETTE['white'],
+  CONTRAST_WEAK: PALETTE['white-80'],
+  CONTRAST_HALF: PALETTE['white-40'],
+  CONTRAST_STRONG: PALETTE['white-20'],
+  CONTRAST_LIGHT: PALETTE['white-10'],
+
+  INFO: PALETTE['secondary/blue'],
+  INFO_WEAK: PALETTE['secondary/blue-80'],
+  INFO_HALF: PALETTE['secondary/blue-40'],
+  INFO_STRONG: PALETTE['secondary/blue-20'],
+  INFO_LIGHT: PALETTE['secondary/blue-10'],
+
+  SUCCESS: PALETTE['secondary/green'],
+  SUCCESS_WEAK: PALETTE['secondary/green-80'],
+  SUCCESS_HALF: PALETTE['secondary/green-40'],
+  SUCCESS_STRONG: PALETTE['secondary/green-20'],
+  SUCCESS_LIGHT: PALETTE['secondary/green-10'],
+
+  WARNING: PALETTE['secondary/orange'],
+  WARNING_WEAK: PALETTE['secondary/orange-80'],
+  WARNING_HALF: PALETTE['secondary/orange-40'],
+  WARNING_STRONG: PALETTE['secondary/orange-20'],
+  WARNING_LIGHT: PALETTE['secondary/orange-10'],
+
+  DANGER: PALETTE['secondary/red'],
+  DANGER_WEAK: PALETTE['secondary/red-80'],
+  DANGER_HALF: PALETTE['secondary/red-40'],
+  DANGER_STRONG: PALETTE['secondary/red-20'],
+  DANGER_LIGHT: PALETTE['secondary/red-10'],
+})
+
+/** Собирает общие токены светлой темы для заданного акцента. */
+const createCommonLightColors = (themeAccent: ThemeAccent) => ({
+  ...createCommonColors(themeAccent),
+
+  NEUTRAL: PALETTE['neutral/gray'],
+  NEUTRAL_WEAK: PALETTE['neutral/gray-80'],
+  NEUTRAL_HALF: PALETTE['neutral/gray-40'],
+  NEUTRAL_STRONG: PALETTE['neutral/gray-20'],
+  NEUTRAL_LIGHT: PALETTE['neutral/gray-10'],
 
-  ACCENT: PALETTE['LIGHT/ACCENT'],
-  ACCENT_ACTIVE: PALETTE['LIGHT/ACCENT_ACTIVE'],
-  ACCENT_DISABLED: PALETTE['LIGHT/ACCENT_DISABLED'],
+  OUTLINE: PALETTE['neutral/outline-light'],
+  OUTLINE_WEAK: PALETTE['neutral/outline-light-80'],
+  OUTLINE_HALF: PALETTE['neutral/outline-light-40'],
+  OUTLINE_STRONG: PALETTE['neutral/outline-light-20'],
+  OUTLINE_LIGHT: PALETTE['neutral/outline-light-10'],
+})
 
-  TRANSPARENT: PALETTE['TRANSPARENT'],
+/** Собирает общие токены тёмной темы для заданного акцента. */
+const createCommonDarkColors = (themeAccent: ThemeAccent) => ({
+  ...createCommonColors(themeAccent),
+
+  NEUTRAL: PALETTE['dark/gray'],
+  NEUTRAL_WEAK: PALETTE['dark/gray-80'],
+  NEUTRAL_HALF: PALETTE['dark/gray-40'],
+  NEUTRAL_STRONG: PALETTE['dark/gray-20'],
+  NEUTRAL_LIGHT: PALETTE['dark/gray-10'],
+
+  OUTLINE: PALETTE['dark/outline-gray-dark'],
+  OUTLINE_WEAK: PALETTE['dark/outline-gray-dark-80'],
+  OUTLINE_HALF: PALETTE['dark/outline-gray-dark-40'],
+  OUTLINE_STRONG: PALETTE['dark/outline-gray-dark-20'],
+  OUTLINE_LIGHT: PALETTE['dark/outline-gray-dark-10'],
+})
+
+/** Собирает цвета светлой темы для заданного акцента. */
+const createLightColors = (themeAccent: ThemeAccent) => {
+  const accentColor = ACCENT_COLORS[themeAccent]
+  const commonLightColors = createCommonLightColors(themeAccent)
+
+  return {
+    // special colors
+    BACKGROUND: {
+      BASE: PALETTE['neutral/background-app'],
+      SECONDARY: PALETTE['white'],
+      DISABLED: PALETTE['transparent'],
+      GLOW: PALETTE['glow'],
+    },
+    BAR: {
+      BASE: PALETTE['white'],
+      SECONDARY: PALETTE['neutral/dark-10'],
+      DISABLED: PALETTE['neutral/outline-10'],
+    },
+    INPUT: {
+      BASE: PALETTE['neutral/background-app'],
+      SECONDARY: PALETTE['white'],
+      DISABLED: PALETTE['neutral/hover-gray'],
+    },
+
+    // common colors
+    FILL: {
+      BASE: PALETTE['neutral/hover-gray'],
+      SECONDARY: PALETTE['white'],
+      DISABLED: PALETTE['neutral/outline'],
+      NEUTRAL_SURFACE: PALETTE['neutral/black'],
+      NEUTRAL_SURFACE_WEAK: PALETTE['neutral/black-80'],
+      NEUTRAL_SURFACE_STRONG: PALETTE['neutral/outline-light'],
+      NEUTRAL_SURFACE_LIGHT: PALETTE['neutral/hover-gray'],
+      ...commonLightColors,
+    },
+    STROKE: {
+      BASE: PALETTE['neutral/outline'],
+      SECONDARY: PALETTE['neutral/dark'],
+      DISABLED: PALETTE['neutral/hover-gray'],
+      ...commonLightColors,
+    },
+    TYPOGRAPHY: {
+      BASE: PALETTE['neutral/black'],
+      SECONDARY: PALETTE['neutral/dark'],
+      DISABLED: PALETTE['neutral/outline'],
+      ...commonLightColors,
+    },
+    GRADIENT: {
+      PRIMARY: [
+        { offset: 0, color: withBrightness(accentColor, 0.55) },
+        { offset: 0.37, color: accentColor },
+        { offset: 0.57, color: PALETTE['neutral/background'] },
+      ],
+    },
+  }
 }
 
-const LIGHT_COLORS = {
-  FILL: {
-    BASE: PALETTE['LIGHT/SURFACE'],
-    NEUTRAL: PALETTE['LIGHT/FAINT'],
-    CONTRAST: PALETTE['LIGHT/WHITE'],
-    DISABLED: PALETTE['LIGHT/GRAY'],
-    ...LIGHT_COLORS_COMMON,
-  },
-  STROKE: {
-    BASE: PALETTE['LIGHT/FAINT'],
-    ...LIGHT_COLORS_COMMON,
-  },
-  TYPOGRAPHY: {
-    BASE: PALETTE['LIGHT/BLACK'],
-    NEUTRAL: PALETTE['LIGHT/NEUTRAL'],
-    CONTRAST: PALETTE['LIGHT/WHITE'],
-    DISABLED: PALETTE['LIGHT/DISABLED'],
-    ...LIGHT_COLORS_COMMON,
-  },
+/** Собирает цвета тёмной темы для заданного акцента. */
+const createDarkColors = (themeAccent: ThemeAccent) => {
+  const commonDarkColors = createCommonDarkColors(themeAccent)
+
+  return {
+    // special colors
+    BACKGROUND: {
+      BASE: PALETTE['dark/background'],
+      SECONDARY: PALETTE['dark/background'],
+      DISABLED: PALETTE['transparent'],
+      GLOW: PALETTE['glow'],
+    },
+    BAR: {
+      BASE: PALETTE['white-10'],
+      SECONDARY: PALETTE['neutral/dark-10'],
+      DISABLED: PALETTE['neutral/outline-10'],
+    },
+    INPUT: {
+      BASE: PALETTE['white-10'],
+      SECONDARY: PALETTE['white-10'],
+      DISABLED: PALETTE['white-20'],
+    },
+
+    // common colors
+    FILL: {
+      BASE: PALETTE['dark/hover-gray'],
+      SECONDARY: PALETTE['white-10'],
+      DISABLED: PALETTE['dark/outline'],
+      NEUTRAL_SURFACE: PALETTE['dark/white'],
+      NEUTRAL_SURFACE_WEAK: PALETTE['dark/white-80'],
+      NEUTRAL_SURFACE_STRONG: PALETTE['white-10'],
+      NEUTRAL_SURFACE_LIGHT: PALETTE['white-20'],
+      ...commonDarkColors,
+    },
+    STROKE: {
+      BASE: PALETTE['dark/outline'],
+      SECONDARY: PALETTE['dark/dark'],
+      DISABLED: PALETTE['dark/hover-gray'],
+      ...commonDarkColors,
+    },
+    TYPOGRAPHY: {
+      BASE: PALETTE['dark/white'],
+      SECONDARY: PALETTE['dark/dark'],
+      DISABLED: PALETTE['dark/outline'],
+      ...commonDarkColors,
+    },
+    GRADIENT: {
+      PRIMARY: [
+        { offset: 0, color: PALETTE['dark/background'] },
+        { offset: 1, color: PALETTE['dark/background'] },
+      ],
+    },
+  }
 }
 
-const DARK_COLORS = LIGHT_COLORS
+const COLOR_BY_VARIANT = {
+  base: 'BASE',
+  secondary: 'SECONDARY',
+  disabled: 'DISABLED',
+
+  transparent: 'TRANSPARENT',
+  matter: 'MATTER',
+  contrast: 'CONTRAST',
+
+  primary: 'PRIMARY',
+  info: 'INFO',
+  success: 'SUCCESS',
+  warning: 'WARNING',
+  danger: 'DANGER',
+
+  neutral: 'NEUTRAL',
+  outline: 'OUTLINE',
+}
 
-export { LIGHT_COLORS, DARK_COLORS }
+export { ThemeAccent, ACCENT_COLORS, COLOR_BY_VARIANT, createDarkColors, createLightColors }

package/src/shared/lib/theme/constants/delays.ts

@@ -3,6 +3,6 @@ const DELAYS = {
   SHORT: 100,
   BASE: 200,
   LONG: 500,
-}
+} as const
 
 export { DELAYS }

package/src/shared/lib/theme/constants/durations.ts

@@ -3,6 +3,6 @@ const DURATIONS = {
   SHORT: 100,
   BASE: 200,
   LONG: 500,
-}
+} as const
 
 export { DURATIONS }

package/src/shared/lib/theme/constants/fonts.ts

@@ -1,5 +1,6 @@
+/** Логические имена семейств шрифтов; значение совпадает с ключом регистрации в `useFonts` (см. `~shared/assets/fonts`). */
 const FONTS = {
-  BASE_MEDIUM: 'BASE_MEDIUM',
+  BASE_REGULAR: 'BASE_REGULAR',
   BASE_SEMIBOLD: 'BASE_SEMIBOLD',
   BASE_BOLD: 'BASE_BOLD',
 }

package/src/shared/lib/theme/constants/index.ts

@@ -1,15 +1,20 @@
-import { BORDERS } from './borders'
-import { DARK_COLORS, LIGHT_COLORS } from './colors'
+import { ANIMATIONS } from './animations'
+import {
+  ACCENT_COLORS,
+  COLOR_BY_VARIANT,
+  createDarkColors,
+  createLightColors,
+  ThemeAccent,
+} from './colors'
 import { DELAYS } from './delays'
 import { DURATIONS } from './durations'
 import { FONTS } from './fonts'
 import { SHADOWS } from './shadows'
 import { SIZES } from './sizes'
 import { TRANSPARENCIES } from './transparencies'
-import { WEIGHTS } from './weights'
 
 const common = {
-  BORDERS,
+  ANIMATIONS,
   // COLORS,
   DELAYS,
   DURATIONS,
@@ -17,40 +22,57 @@ const common = {
   SHADOWS,
   SIZES,
   TRANSPARENCIES,
-  WEIGHTS,
-}
-
-const lightTheme = {
-  ...common,
-  COLORS: LIGHT_COLORS,
-}
-
-const darkTheme = {
-  ...common,
-  COLORS: DARK_COLORS,
 }
 
+/** Режим темы, выбранный пользователем. */
 enum ThemeMode {
   Light = 'light',
   Dark = 'dark',
   System = 'system',
 }
 
+/** Фактический режим отображения после разрешения системного. */
 enum ThemeModeSystem {
   Light = 'light',
   Dark = 'dark',
 }
 
+/** Стиль системного статус-бара по режиму отображения. */
 enum ThemeModeStatusBar {
   Dark = 'dark-content',
   Light = 'light-content',
 }
 
-const themes = {
-  [ThemeModeSystem.Light]: lightTheme,
-  [ThemeModeSystem.Dark]: darkTheme,
+/** Собирает пару светлой/тёмной темы для заданного акцента. */
+const createThemes = (themeAccent: ThemeAccent) => ({
+  [ThemeModeSystem.Light]: {
+    ...common,
+    COLORS: createLightColors(themeAccent),
+  },
+  [ThemeModeSystem.Dark]: {
+    ...common,
+    COLORS: createDarkColors(themeAccent),
+  },
+})
+
+/** Наборы тем по акцентному цвету. */
+const themesByAccent = {
+  [ThemeAccent.Mint]: createThemes(ThemeAccent.Mint),
+  [ThemeAccent.Violet]: createThemes(ThemeAccent.Violet),
+  [ThemeAccent.Indigo]: createThemes(ThemeAccent.Indigo),
+  [ThemeAccent.Lime]: createThemes(ThemeAccent.Lime),
 }
 
-const hasDarkMode = LIGHT_COLORS !== DARK_COLORS
+/** Темы акцента по умолчанию. */
+const themes = themesByAccent[ThemeAccent.Mint]
 
-export { ThemeMode, ThemeModeSystem, ThemeModeStatusBar, themes, hasDarkMode }
+export {
+  ACCENT_COLORS,
+  COLOR_BY_VARIANT,
+  ThemeAccent,
+  ThemeMode,
+  ThemeModeStatusBar,
+  ThemeModeSystem,
+  themes,
+  themesByAccent,
+}

package/src/shared/lib/theme/constants/shadows.ts

@@ -8,33 +8,15 @@ const SHADOWS = {
       height: 0,
     },
   },
-  THIN: {
-    elevation: 2,
-    shadowOpacity: 0.2,
-    shadowRadius: 1.5,
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-  },
+  THIN: {},
   BASE: {
-    elevation: 12,
-    shadowOpacity: 0.4,
-    shadowRadius: 6,
-    shadowOffset: {
-      width: 0,
-      height: 6,
-    },
-  },
-  FAT: {
-    elevation: 24,
-    shadowRadius: 16,
-    shadowOpacity: 0.6,
-    shadowOffset: {
-      width: 0,
-      height: 12,
-    },
+    shadowColor: 'rgba(0,0,0, 0.4)',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.2,
+    shadowRadius: 5,
+    elevation: 20,
   },
+  FAT: {},
 }
 
 export { SHADOWS }

package/src/shared/lib/theme/constants/sizes.ts

@@ -1,11 +1,16 @@
 const SIZES = {
-  'EMPTY': 0,
+  'MIN': '0%',
+  '4XS': 0.125,
+  '3XS': 0.25,
   '2XS': 0.5,
   'XS': 1,
   'S': 2,
   'M': 4,
+  'M-L': 6,
   'L': 8,
+  'L-XL': 10,
   'XL': 12,
+  'XL-2XL': 14,
   '2XL': 16,
   '3XL': 20,
   '4XL': 24,
@@ -25,8 +30,12 @@ const SIZES = {
   '18XL': 80,
   '19XL': 84,
   '20XL': 88,
+  '21XL': 92,
+  '22XL': 96,
+  '23XL': 100,
+  '24XL': 104,
   'MAX': '100%' as const,
   'INFINITY': Number.MAX_SAFE_INTEGER,
-}
+} as const
 
 export { SIZES }

package/src/shared/lib/theme/constants/transparencies.ts

@@ -5,6 +5,6 @@ const TRANSPARENCIES = {
   STRONG: 0.2,
   LIGHT: 0.1,
   INVISIBLE: 0,
-}
+} as const
 
 export { TRANSPARENCIES }

package/src/shared/lib/theme/hooks/use-theme-setup.ts

@@ -4,7 +4,7 @@ import { ThemeMode, ThemeModeSystem } from '../constants'
 import { useTheme } from './use-theme'
 
 const useThemeSetup = () => {
-  const { themeMode, themeModeSystem, setThemeMode } = useTheme()
+  const { themeAccent, themeMode, themeModeSystem, setThemeAccent, setThemeMode } = useTheme()
 
   const isThemeModeSystem = themeMode === ThemeMode.System
   const isThemeModeSystemLight = isThemeModeSystem && themeModeSystem === ThemeModeSystem.Light
@@ -32,6 +32,7 @@ const useThemeSetup = () => {
   }, [setThemeMode])
 
   return {
+    themeAccent,
     themeMode,
     themeModeSystem,
     isThemeModeSystem,
@@ -39,6 +40,7 @@ const useThemeSetup = () => {
     isThemeModeSystemDark,
     isThemeModeLight,
     isThemeModeDark,
+    setThemeAccent,
     setThemeMode,
     setThemeModeLight,
     setThemeModeDark,

package/src/shared/lib/theme/index.ts

@@ -1,4 +1,13 @@
-export { ThemeMode, ThemeModeSystem } from './constants'
+export {
+  ACCENT_COLORS,
+  COLOR_BY_VARIANT,
+  ThemeAccent,
+  ThemeMode,
+  ThemeModeSystem,
+  themesByAccent,
+} from './constants'
 export { useThemeSetup, useThemeMode } from './hooks'
 export { default as ThemeProvider } from './theme.provider'
+export { default as ThemeScope, ThemeScopeLight, ThemeScopeDark } from './theme.scope'
 export type { Theme } from './theme.types'
+export { themeSnapshot, withBrightness, withTransparency } from './utils'