fix: restore Storybook styles, dark mode and brand fonts

.storybook/preview.tsx

@@ -1,28 +1,25 @@
 import type { Preview } from '@storybook/react';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import '../src/styles/index.css';
+import '../src/experimental/styles.css';
 import '../src/styles/global.css';
 
 const preview: Preview = {
   parameters: {
-    controls: {
-      expanded: true,
-    },
+    controls: { expanded: true },
     options: {
       storySort: {
-        order: [
-          'Introduction',
-          'Foundations',
-          'Components',
-          'Patterns',
-        ],
+        order: ['Introduction', 'Foundations', 'Components', 'Experimental', 'Patterns'],
       },
     },
+    backgrounds: { disable: true },
   },
   decorators: [
-    (Story) => (
-      <div dir="rtl" lang="fa">
-        <Story />
-      </div>
-    ),
+    withThemeByDataAttribute({
+      themes: { light: 'light', dark: 'dark' },
+      defaultTheme: 'light',
+      attributeName: 'data-theme',
+    }),
   ],
 };
 

package.json

@@ -19,7 +19,11 @@
   "peerDependencies": {
     "react": ">=18"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@fontsource-variable/handjet": "^5.2.8",
+    "@fontsource-variable/noto-sans": "^5.2.8",
+    "@fontsource-variable/noto-sans-arabic": "^5.2.8"
+  },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@storybook/addon-essentials": "^8.6.18",

src/fonts/index.css

@@ -1,18 +1,3 @@
-@font-face {
-  font-family: 'Noto Sans';
-  src: local('Noto Sans');
-}
-
-@font-face {
-  font-family: 'Noto Sans Arabic';
-  src: local('Noto Sans Arabic');
-}
-
-@font-face {
-  font-family: 'Handjet';
-  src: local('Handjet');
-}
-
-:root {
-  font-family: 'Noto Sans', 'Noto Sans Arabic', sans-serif;
-}
+@import '@fontsource-variable/noto-sans/wght.css';
+@import '@fontsource-variable/noto-sans-arabic/wght.css';
+@import '@fontsource-variable/handjet/wght.css';

src/styles/global.css

@@ -1,12 +1,20 @@
-:root {
-  font-family: "Noto Sans Arabic", "Noto Sans", system-ui, sans-serif;
-  direction: rtl;
+html,
+body {
+  margin: 0;
+  min-block-size: 100%;
+  background: var(--core-color-surface-page);
+  color: var(--core-color-text-primary);
+  font-family: var(--core-font-family);
+}
+
+body {
+  padding: var(--core-space-4);
 }
 
 * {
   box-sizing: border-box;
 }
 
 .core-display {
-  font-family: "Handjet", sans-serif;
+  font-family: var(--core-display-font-family);
 }

src/tokens/semantic.css

@@ -1,4 +1,8 @@
 :root {
+  --core-font-family-latin: 'Noto Sans Variable', system-ui, sans-serif;
+  --core-font-family-arabic: 'Noto Sans Arabic Variable', 'Noto Sans Variable', system-ui, sans-serif;
+  --core-font-family: var(--core-font-family-latin);
+  --core-display-font-family: 'Handjet Variable', var(--core-font-family-latin);
   --core-color-action-primary: #0066ff;
   --core-color-action-primary-hover: #0052cc;
   --core-color-action-danger: #b42318;
@@ -37,6 +41,13 @@
   --core-control-lg: 52px;
 }
 
+.core-root[lang='fa'],
+.core-root[lang='ar'],
+[lang='fa'] .core-root,
+[lang='ar'] .core-root {
+  --core-font-family: var(--core-font-family-arabic);
+}
+
 [data-theme='dark'] {
   --core-color-action-primary: #66a3ff;
   --core-color-action-primary-hover: #8fbbff;