atls · comfrt1k · Mar 17, 2026 · Mar 17, 2026 · Mar 18, 2026 · Mar 18, 2026
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,6 +1,6 @@
 compressionLevel: mixed
 
-defaultSemverRangePrefix: ""
+defaultSemverRangePrefix: ''
 
 enableGlobalCache: true
 
@@ -13,11 +13,11 @@ initFields:
 
 nodeLinker: node-modules
 
-npmRegistryServer: "https://registry.npmjs.org"
+npmRegistryServer: 'https://registry.npmjs.org'
 
 npmScopes:
   atls:
-    npmRegistryServer: "https://registry.npmjs.org"
+    npmRegistryServer: 'https://registry.npmjs.org'
 
 preferReuse: true
 

diff --git a/frontend/app/entrypoint/CHANGELOG.md b/frontend/app/entrypoint/CHANGELOG.md
diff --git a/frontend/app/entrypoint/next.config.ts b/frontend/app/entrypoint/next.config.ts
@@ -1,12 +1,16 @@
-import type { NextConfig } from 'next'
+import type { NextConfig }            from 'next'
 
-import { dirname }         from 'node:path'
-import { resolve }         from 'node:path'
-import { fileURLToPath }   from 'node:url'
+import { dirname }                    from 'node:path'
+import { resolve }                    from 'node:path'
+import { fileURLToPath }              from 'node:url'
+
+import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin'
 
 const rootDir = dirname(fileURLToPath(import.meta.url))
 const workspaceRoot = resolve(rootDir, '../../..')
 
+const withVanillaExtract = createVanillaExtractPlugin({ turbopackMode: 'on', identifiers: 'short' })
+
 const nextConfig: NextConfig = {
   turbopack: {
     root: workspaceRoot,
@@ -17,4 +21,4 @@ const nextConfig: NextConfig = {
   },
 }
 
-export default nextConfig
+export default withVanillaExtract(nextConfig)
diff --git a/frontend/app/entrypoint/package.json b/frontend/app/entrypoint/package.json
@@ -23,6 +23,7 @@
     "@types/node": "22.10.10",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
+    "@vanilla-extract/next-plugin": "2.4.16",
     "typescript": "5.7.3"
   },
   "nx": {

diff --git a/frontend/app/entrypoint/src/app/layout.tsx b/frontend/app/entrypoint/src/app/layout.tsx
@@ -1,8 +1,14 @@
-import type { ReactNode } from 'react'
+import type { ReactNode }   from 'react'
+
+import { sfProDisplayFont } from '@frontend/ui-theme/fonts'
+
+import { Providers }        from './providers.js'
 
 const RootLayout = ({ children }: { children: ReactNode }) => (
-  <html lang='ru'>
-    <body>{children}</body>
+  <html lang='ru' className={sfProDisplayFont.variable}>
+    <body>
+      <Providers>{children}</Providers>
+    </body>
   </html>
 )
 

diff --git a/frontend/app/entrypoint/src/app/providers.tsx b/frontend/app/entrypoint/src/app/providers.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import { ThemeProvider }  from '@frontend/ui-theme'
+
+export const Providers = ({ children }: { children: ReactNode }) => (
+  <ThemeProvider>{children}</ThemeProvider>
+)
diff --git a/frontend/pages/home/CHANGELOG.md b/frontend/pages/home/CHANGELOG.md
diff --git a/frontend/ui/theme/assets/fonts/sf-pro-display/SF-Pro-Display-Regular.ttf b/frontend/ui/theme/assets/fonts/sf-pro-display/SF-Pro-Display-Regular.ttf
diff --git a/frontend/ui/theme/assets/fonts/sf-pro-display/SF-Pro-Display-Semibold.ttf b/frontend/ui/theme/assets/fonts/sf-pro-display/SF-Pro-Display-Semibold.ttf
diff --git a/frontend/ui/theme/package.json b/frontend/ui/theme/package.json
@@ -5,12 +5,23 @@
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
+    "./fonts": "./src/fonts/index.ts",
     "./theme-css": "./src/theme.css.ts"
   },
+  "scripts": {
+    "generate-theme": "generate-theme nHx3fiO1BYaBFUHbBwNa2I -o src/tokens --method secondary"
+  },
+  "dependencies": {
+    "effector": "23.4.2",
+    "effector-react": "23.3.0",
+    "next-themes": "0.4.6"
+  },
   "devDependencies": {
+    "@atls/figma-theme-cli": "2.0.13",
     "@types/react": "19.2.2",
     "@vanilla-extract/css": "1.17.4",
     "@vanilla-extract/dynamic": "2.1.5",
+    "next": "16.1.6",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },

diff --git a/frontend/ui/theme/src/constants/font-vars.ts b/frontend/ui/theme/src/constants/font-vars.ts
@@ -0,0 +1,3 @@
+export const fontsVars = {
+  sfProDisplay: '--font-sf-pro-display',
+} as const
diff --git a/frontend/ui/theme/src/constants/index.ts b/frontend/ui/theme/src/constants/index.ts
@@ -0,0 +1,2 @@
+export * from './font-vars.js'
+export * from './theme.js'
diff --git a/frontend/ui/theme/src/constants/theme.ts b/frontend/ui/theme/src/constants/theme.ts
@@ -0,0 +1,10 @@
+export const ThemeEnum = {
+  LIGHT: 'light',
+  DARK: 'dark',
+} as const
+
+export type ThemeValue = (typeof ThemeEnum)[keyof typeof ThemeEnum]
+
+export const DEFAULT_THEME = ThemeEnum.LIGHT
+
+export const THEME_KEY = 'widget-theme'
diff --git a/frontend/ui/theme/src/fonts/index.ts b/frontend/ui/theme/src/fonts/index.ts
@@ -0,0 +1,3 @@
+/// <reference path="./next-font.d.ts" />
+
+export * from './sf-pro-display.js'
diff --git a/frontend/ui/theme/src/fonts/next-font.d.ts b/frontend/ui/theme/src/fonts/next-font.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="next" />
+
+declare module 'next/font/local' {
+  import localFont from 'next/dist/compiled/@next/font/local'
+
+  export default localFont.default
+}
diff --git a/frontend/ui/theme/src/fonts/sf-pro-display.tsx b/frontend/ui/theme/src/fonts/sf-pro-display.tsx
@@ -0,0 +1,18 @@
+import localFont from 'next/font/local'
+
+export const sfProDisplayFont = localFont({
+  src: [
+    {
+      path: '../../assets/fonts/sf-pro-display/SF-Pro-Display-Regular.ttf',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: '../../assets/fonts/sf-pro-display/SF-Pro-Display-Semibold.ttf',
+      weight: '600',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-sf-pro-display',
+})
diff --git a/frontend/ui/theme/src/index.ts b/frontend/ui/theme/src/index.ts
@@ -1 +1,2 @@
+export * from './store/index.js'
 export * from './theme.css.js'
diff --git a/frontend/ui/theme/src/semantic/index.ts b/frontend/ui/theme/src/semantic/index.ts
@@ -0,0 +1 @@
+export * from './typography.js'
diff --git a/frontend/ui/theme/src/semantic/typography.ts b/frontend/ui/theme/src/semantic/typography.ts
@@ -0,0 +1,96 @@
+import { fontSizes }   from '../tokens/base/typography/font-sizes.js'
+import { fontWeights } from '../tokens/base/typography/font-weights.js'
+import { fonts }       from '../tokens/base/typography/fonts.js'
+import { lineHeights } from '../tokens/base/typography/line-heights.js'
+
+export const typography = {
+  displayLarge: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.giant,
+    lineHeight: lineHeights.giant,
+    fontWeight: fontWeights.semibold,
+  },
+  displayMedium: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.massive,
+    lineHeight: lineHeights.massive,
+    fontWeight: fontWeights.semibold,
+  },
+  displaySmall: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.huge,
+    lineHeight: lineHeights.huge,
+    fontWeight: fontWeights.semibold,
+  },
+
+  headingLarge: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.xxxxl,
+    lineHeight: lineHeights.xxxxl,
+    fontWeight: fontWeights.semibold,
+  },
+  headingMedium: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.xxxl,
+    lineHeight: lineHeights.xxxl,
+    fontWeight: fontWeights.semibold,
+  },
+  headingSmall: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.xxl,
+    lineHeight: lineHeights.xxl,
+    fontWeight: fontWeights.semibold,
+  },
+
+  subheadingLarge: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.xl,
+    lineHeight: lineHeights.xl,
+    fontWeight: fontWeights.semibold,
+  },
+  subheadingMedium: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.lg,
+    lineHeight: lineHeights.lg,
+    fontWeight: fontWeights.semibold,
+  },
+  subheadingSmall: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.md,
+    lineHeight: lineHeights.md,
+    fontWeight: fontWeights.semibold,
+  },
+
+  bodyLarge: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.xl,
+    lineHeight: lineHeights.xl,
+    fontWeight: fontWeights.regular,
+  },
+  bodyMedium: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.lg,
+    lineHeight: lineHeights.lg,
+    fontWeight: fontWeights.regular,
+  },
+  bodySmall: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.md,
+    lineHeight: lineHeights.md,
+    fontWeight: fontWeights.regular,
+  },
+
+  captionSmall: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.sm,
+    lineHeight: lineHeights.sm,
+    fontWeight: fontWeights.regular,
+  },
+
+  labelSmall: {
+    fontFamily: fonts.primary,
+    fontSize: fontSizes.xs,
+    lineHeight: lineHeights.xs,
+    fontWeight: fontWeights.regular,
+  },
+} as const
diff --git a/frontend/ui/theme/src/store/index.ts b/frontend/ui/theme/src/store/index.ts
@@ -0,0 +1,3 @@
+export * from './provider.js'
+export * from './model.js'
+export type * from './interfaces.js'
diff --git a/frontend/ui/theme/src/store/interfaces.ts b/frontend/ui/theme/src/store/interfaces.ts
@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react'
+
+import type { ThemeValue }        from '../constants/index.js'
+
+export type ApplyTheme = (theme: string) => void
+
+export interface ThemeProviderProps extends PropsWithChildren {
+  forcedTheme?: ThemeValue
+}
diff --git a/frontend/ui/theme/src/store/model.ts b/frontend/ui/theme/src/store/model.ts
@@ -0,0 +1,21 @@
+import type { ThemeValue } from '../constants/index.js'
+import type { ApplyTheme } from './interfaces.js'
+
+import { createEvent }     from 'effector'
+import { createStore }     from 'effector'
+
+import { DEFAULT_THEME }   from '../constants/index.js'
+
+export const changeTheme = createEvent<ThemeValue>()
+export const changeApplyTheme = createEvent<ApplyTheme>()
+
+export const $theme = createStore<ThemeValue>(DEFAULT_THEME)
+export const $applyTheme = createStore<ApplyTheme>(() => undefined)
+
+$theme.on(changeTheme, (state, theme) => theme)
+
+$applyTheme.on(changeTheme, (apply, theme) => {
+  apply(theme)
+  return apply
+})
+$applyTheme.on(changeApplyTheme, (state, apply) => apply)
diff --git a/frontend/ui/theme/src/store/provider.tsx b/frontend/ui/theme/src/store/provider.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import type { ThemeProviderProps }            from './interfaces.js'
+
+import { ThemeProvider as NextThemeProvider } from 'next-themes'
+
+import { ThemeEnum }                          from '../constants/index.js'
+import { THEME_KEY }                          from '../constants/index.js'
+import { UseTheme }                           from './use-theme.js'
+import { darkTheme }                          from '../theme.css.js'
+import { lightTheme }                         from '../theme.css.js'
+
+export const ThemeProvider = ({ children, forcedTheme }: ThemeProviderProps) => (
+  <NextThemeProvider
+    attribute='class'
+    storageKey={THEME_KEY}
+    defaultTheme={ThemeEnum.LIGHT}
+    forcedTheme={forcedTheme}
+    themes={Object.values(ThemeEnum)}
+    value={{
+      [ThemeEnum.LIGHT]: lightTheme,
+      [ThemeEnum.DARK]: darkTheme,
+    }}
+  >
+    <UseTheme forcedTheme={forcedTheme} />
+    {children}
+  </NextThemeProvider>
+)
diff --git a/frontend/ui/theme/src/store/use-theme.ts b/frontend/ui/theme/src/store/use-theme.ts
@@ -0,0 +1,38 @@
+'use client'
+
+import type { ThemeProviderProps } from './interfaces.js'
+
+import { useUnit }                 from 'effector-react'
+import { useTheme }                from 'next-themes'
+import { useEffect }               from 'react'
+
+import { $theme }                  from './model.js'
+import { isThemeEnum }             from '../utils/index.js'
+import { changeTheme }             from './model.js'
+import { changeApplyTheme }        from './model.js'
+
+export const UseTheme = ({ forcedTheme }: ThemeProviderProps): null => {
+  const { resolvedTheme, setTheme } = useTheme()
+  const [activeTheme, setActiveTheme, setApplyTheme] = useUnit([
+    $theme,
+    changeTheme,
+    changeApplyTheme,
+  ])
+
+  useEffect(() => {
+    setApplyTheme(setTheme)
+  }, [setApplyTheme, setTheme])
+
+  useEffect(() => {
+    if (forcedTheme && isThemeEnum(forcedTheme)) {
+      if (forcedTheme !== activeTheme) setActiveTheme(forcedTheme)
+      return
+    }
+
+    if (resolvedTheme && isThemeEnum(resolvedTheme) && resolvedTheme !== activeTheme) {
+      setActiveTheme(resolvedTheme)
+    }
+  }, [forcedTheme, resolvedTheme, activeTheme, setActiveTheme])
+
+  return null
+}
diff --git a/frontend/ui/theme/src/styles/global.css.ts b/frontend/ui/theme/src/styles/global.css.ts
@@ -0,0 +1,16 @@
+import { globalStyle } from '@vanilla-extract/css'
+
+globalStyle('html', {
+  margin: 0,
+  padding: 0,
+  WebkitFontSmoothing: 'antialiased',
+  WebkitOverflowScrolling: 'touch',
+  height: '100%',
+})
+
+globalStyle('body', {
+  margin: 0,
+  padding: 0,
+  minHeight: '100%',
+  overflowX: 'hidden',
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './font-vars.js'
		export * from './theme.js'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		/// <reference path="./next-font.d.ts" />

		export * from './sf-pro-display.js'
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './store/index.js'
		export * from './theme.css.js'