Unify DS tokens integration

.prettierrc

@@ -1,6 +1,7 @@
 # https://github.com/prettier/prettier#configuration-file
 semi: true
 singleQuote: true
+trailingComma: none
 overrides:
 - files: ".prettierrc"
   options:

.storybook/fonts.css

@@ -0,0 +1,55 @@
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-Regular.otf') format('opentype');
+	font-weight: 400;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-RegularIt.otf') format('opentype');
+	font-weight: 400;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-Light.otf') format('opentype');
+	font-weight: 300;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-LightIt.otf') format('opentype');
+	font-weight: 300;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-Semibold.otf') format('opentype');
+	font-weight: 600;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-SemiboldIt.otf') format('opentype');
+	font-weight: 600;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
+	font-weight: 700;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-BoldIt.otf') format('opentype');
+	font-weight: 700;
+	font-style: italic;
+}

.storybook/main.ts

@@ -11,7 +11,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-themes',
     '@storybook/addon-interactions',
-    '@storybook/addon-docs',
+    '@storybook/addon-docs'
   ],
   framework: {
     name: '@storybook/react-vite',

.storybook/manager.ts

@@ -1,4 +1,5 @@
 import { addons } from '@storybook/manager-api';
+
 import theme from './theme';
 
 addons.setConfig({

.storybook/preview-head.html

@@ -1,4 +1,8 @@
 <title>reablocks</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
 <style>
   body {
     font-weight: 400;

.storybook/preview.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
-import theme from './theme';
-import { Preview } from '@storybook/react';
-import { withThemeByClassName } from '@storybook/addon-themes';
+import '../src/assets/css/index.css';
+import './fonts.css';
+
 import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { withThemeByClassName } from '@storybook/addon-themes';
+import type { Preview } from '@storybook/react';
+import React from 'react';
 
 import { ThemeProvider } from '../src/utils/Theme/ThemeProvider';
 import { theme as reablocksTheme } from '../src/utils/Theme/themes/theme';
-
-import '../src/index.css';
+import theme from './theme';
 
 const withProvider = (Story, context) => (
   <ThemeProvider theme={reablocksTheme}>
@@ -21,10 +22,10 @@ const preview: Preview = {
     withThemeByClassName({
       themes: {
         light: 'theme-light',
-        dark: 'theme-dark',
+        dark: 'theme-dark'
       },
-      defaultTheme: 'dark',
-    }),
+      defaultTheme: 'dark'
+    })
   ],
   parameters: {
     layout: 'centered',
@@ -35,7 +36,8 @@ const preview: Preview = {
       container: ({ children, ...props }: any) => {
         // For whatever reason the theme is not getting applied to docs
         // This is a workaround to apply the theme to the docs
-        const isLight = props.context?.store?.globals?.globals?.theme === 'light';
+        const isLight =
+          props.context?.store?.globals?.globals?.theme === 'light';
 
         return (
           <DocsContainer {...props}>
@@ -52,13 +54,7 @@ const preview: Preview = {
       storySort: {
         order: [
           'Docs',
-          [
-            'Intro',
-            'Getting Started',
-
-            'Changelog',
-            'Support',
-          ],
+          ['Intro', 'Getting Started', 'Changelog', 'Support'],
           'Components',
           '*'
         ]

.storybook/theme.ts

@@ -1,4 +1,5 @@
 import { create } from '@storybook/theming/create';
+
 import ReablocksLogo from '../docs/assets/logo.svg';
 
 export default create({
@@ -10,7 +11,8 @@ export default create({
   appContentBg: '#11111F',
   appPreviewBg: '#11111F',
   fontBase: 'Inter,Arial,Helvetica,sans-serif',
-  fontCode: 'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace',
+  fontCode:
+    'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace',
   appBg: '#11111F',
   textColor: '#FFFFFF',
   barBg: '#11111F',