feat(themes): optimization of bundle size barrel file (#4230)

* feat(themes): optimization of bundle size barrel file

* fix: feedback ac for direct import if three shaking is not working

.changeset/fuzzy-singers-own.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/themes": patch
+---
+
+Improve bundle size by removing barrel file for exporting themes

packages/themes/README.md

@@ -18,7 +18,8 @@ $ pnpm add @ultraviolet/ui @ultraviolet/themes @emotion/react @emotion/styled
 
 ```js
 import { normalize, Button } from '@ultraviolet/ui'
-import { consoleDarkTheme } from '@ultraviolet/themes' // << Here we import the theme we want to use
+import { consoleDarkTheme } from '@ultraviolet/themes' // Here we import the theme we want to use
+// import { consoleLightTheme } from "@ultraviolet/themes/console/light" // Alternatively you can directly import the light theme if your bundler doesn't have tree-shaking capabilities
 import { Global, css, ThemeProvider } from '@emotion/react'
 
 const App = () => (

packages/themes/package.json

@@ -46,6 +46,11 @@
       "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
+    },
+    "./console/*": {
+      "types": "./dist/themes/console/index.d.ts",
+      "require": "./dist/themes/console/index.cjs",
+      "default": "./dist/themes/console/index.js"
     }
   },
   "dependencies": {

packages/themes/src/index.ts

@@ -1,5 +1,2 @@
-export {
-  consoleLightTheme,
-  consoleDarkTheme,
-  consoleDarkerTheme,
-} from './themes'
+// eslint-disable-next-line no-restricted-syntax
+export * from './themes'

packages/themes/src/themes/console/dark/index.ts

@@ -0,0 +1,6 @@
+import deepmerge from 'deepmerge'
+import { deprecatedDarkTokens } from '../deprecated/dark'
+import { darkTheme } from './__generated__'
+
+export const consoleDarkTheme: typeof darkTheme & typeof deprecatedDarkTokens =
+  deepmerge(darkTheme, deprecatedDarkTokens)

packages/themes/src/themes/console/darker/index.ts

@@ -0,0 +1,6 @@
+import deepmerge from 'deepmerge'
+import { deprecatedDarkerTokens } from '../deprecated/darker'
+import { darkerTheme } from './__generated__'
+
+export const consoleDarkerTheme: typeof darkerTheme &
+  typeof deprecatedDarkerTokens = deepmerge(darkerTheme, deprecatedDarkerTokens)

packages/themes/src/themes/console/deprecated/dark.ts

@@ -2,6 +2,13 @@
  * @deprecated Those are old tokens usages and will be removed in the next major version.
  */
 export const deprecatedDarkTokens = {
+  screens: {
+    xsmall: 0,
+    small: 576,
+    medium: 768,
+    large: 992,
+    xlarge: 1200,
+  },
   colors: {
     danger: {
       backgroundWeak: '#151a2d',

packages/themes/src/themes/console/deprecated/darker.ts

@@ -2,6 +2,13 @@
  * @deprecated Those are old tokens usages and will be removed in the next major version.
  */
 export const deprecatedDarkerTokens = {
+  screens: {
+    xsmall: 0,
+    small: 576,
+    medium: 768,
+    large: 992,
+    xlarge: 1200,
+  },
   colors: {
     danger: {
       backgroundWeak: '#000000',

packages/themes/src/themes/console/deprecated/light.ts

@@ -2,6 +2,13 @@
  * @deprecated Those are old tokens usages and will be removed in the next major version.
  */
 export const deprecatedLightTokens = {
+  screens: {
+    xsmall: 0,
+    small: 576,
+    medium: 768,
+    large: 992,
+    xlarge: 1200,
+  },
   colors: {
     danger: {
       backgroundWeak: '#ffffff',

packages/themes/src/themes/console/light/index.ts

@@ -0,0 +1,6 @@
+import deepmerge from 'deepmerge'
+import { deprecatedLightTokens } from '../deprecated/light'
+import { lightTheme } from './__generated__'
+
+export const consoleLightTheme: typeof lightTheme &
+  typeof deprecatedLightTokens = deepmerge(lightTheme, deprecatedLightTokens)

packages/themes/src/themes/index.ts

@@ -1,5 +1,3 @@
-export {
-  consoleLightTheme,
-  consoleDarkTheme,
-  consoleDarkerTheme,
-} from './console'
+export { consoleLightTheme } from './console/light'
+export { consoleDarkTheme } from './console/dark'
+export { consoleDarkerTheme } from './console/darker'

scripts/figma-synchronise-tokens.mjs

@@ -222,7 +222,7 @@ export const generatePalette = (figmaTokensJson, themeMatch) => {
   // For each theme
   themesMatches.map(async themeMatch => {
     const output = generatePalette(figmaTokensJson, themeMatch)
-    const filePath = `packages/themes/src/themes/console/${themeMatch.outputTheme}.ts`
+    const filePath = `packages/themes/src/themes/console/${themeMatch.outputTheme}/__generated__/index.ts`
     await fs.writeFile(
       filePath,
       `${header}export const ${themeMatch.outputTheme}Theme = ${JSON.stringify(