diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 8cbf3cc..860a3de 100644 --- a/.storybook/preview.tsx +++ b/.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) => ( -
- -
- ), + withThemeByDataAttribute({ + themes: { light: 'light', dark: 'dark' }, + defaultTheme: 'light', + attributeName: 'data-theme', + }), ], }; diff --git a/package.json b/package.json index 13d933a..dfae359 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4b81700..5844ff9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,16 @@ settings: importers: .: + dependencies: + '@fontsource-variable/handjet': + specifier: ^5.2.8 + version: 5.3.0 + '@fontsource-variable/noto-sans': + specifier: ^5.2.8 + version: 5.3.0 + '@fontsource-variable/noto-sans-arabic': + specifier: ^5.2.8 + version: 5.3.0 devDependencies: '@eslint/js': specifier: ^10.0.1 @@ -316,6 +326,15 @@ packages: resolution: {integrity: sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==} engines: {node: ^20.19.0 || ^22.13.0 || >=24} + '@fontsource-variable/handjet@5.3.0': + resolution: {integrity: sha512-IQEVbZpn7sPTBQENwJCWyzNxQ+Ac6fzPRKEvSJV87b76XeHNc9aM4qQTW3tj1TnWzCRK9I6PBui61nmTSV0nwQ==} + + '@fontsource-variable/noto-sans-arabic@5.3.0': + resolution: {integrity: sha512-Rz8+DBzza3//cmN+DBQajJhx3x+Dx12eUgnQsTOgPWbOT0+In6APmE8z4I/QQnUWfAx+s8l93+60qDT5vJH1sA==} + + '@fontsource-variable/noto-sans@5.3.0': + resolution: {integrity: sha512-e3ZuxzY9AL2psXPZlhwhnYrHUHv6PMoyK9MQ7croF0CUgURLqu9EMjW7q2FgVLwij1tjLsIHQrnwQ8aUcg4BiA==} + '@humanfs/core@0.19.2': resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==} engines: {node: '>=18.18.0'} @@ -376,6 +395,7 @@ packages: engines: {node: ^22.20 || ^24.12 || >=25} cpu: [x64] os: [linux] + libc: [glibc] '@pkgjs/parseargs@0.11.0': resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} @@ -424,66 +444,79 @@ packages: resolution: {integrity: sha512-YDUNvVM85TI3g/1OpnqKP1h4NeW/j64DfWMf+G3M809xNk1bJSnpFp4sh83NpmVE5DXnkh8ULor4LTVZKoYLHw==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.63.1': resolution: {integrity: sha512-7Mcn71p9ZuQFAj+h+dhQXy/yeLePRS2yKRnmW1DijA9thKO5qap0GNOIQK4yQ6iP3SU0Mrb/yWo8h8vgRba8lw==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.63.1': resolution: {integrity: sha512-4YiLQTX6U4CSl0L9cluep9A9W6UmTfqBDc2/CH6wlu54pl4E7Jn3cOD8oxzvBDEGk/JMKgJ47C8g+radF7mwvg==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.63.1': resolution: {integrity: sha512-2ra8F7w8OquwZN9z2/fKFnli69wa8PLwaVzRMIPGb13ByMJwC28Fbp8YcVGoUhlYMTt7j5j9bNgpysrN2UM+vw==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/rollup-linux-loong64-gnu@4.63.1': resolution: {integrity: sha512-Sy20ncyhjmBP0Ml+UvQbimjlk6VFgjW5uNP+qqwHB00mTE8Bl2C1TuHTlRwK2YoXeZbee5lP2XevBWVkAQAtSQ==} cpu: [loong64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-loong64-musl@4.63.1': resolution: {integrity: sha512-noITLp8oNjYliPnGWmLyelIHwULGqbHloQHGw1rtxbWhTuWooRpnZarZQJ1y9EUC4szuCusCc+HEpUtxpIwYvA==} cpu: [loong64] os: [linux] + libc: [musl] '@rollup/rollup-linux-ppc64-gnu@4.63.1': resolution: {integrity: sha512-hlxxXd+F1mWiAcaFR7Sv9ZQT6m6UfI8+Vy/kFJzztq2pDMU/0wZ9sish0iszNZvsQDo8Gc0i5yuFEOz5dDf6fA==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-ppc64-musl@4.63.1': resolution: {integrity: sha512-EF7OpqQTQ/BvGqLzUi4rEHuagCV9MugAUXSHemwPW5vxZ75RR+jxO/2j95Ph2dalMpFHSVECjRoioHZgA9zOYA==} cpu: [ppc64] os: [linux] + libc: [musl] '@rollup/rollup-linux-riscv64-gnu@4.63.1': resolution: {integrity: sha512-wQO3JesW9PRkwlabQ27y7sPfVOOTLRG73I4F2UYHG5PXun3J9U3y+b7ezVKSYbsvSKGQ1k1cq8Qlun4C9kLt3w==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-musl@4.63.1': resolution: {integrity: sha512-ouAGwhO6wHRXdnOVCOsB0tRFkA7nhNB2Nwax6oECXN0YiN8EYUTBAOudADOB1PI+yDL61TeNx/u7MVCzksNbkQ==} cpu: [riscv64] os: [linux] + libc: [musl] '@rollup/rollup-linux-s390x-gnu@4.63.1': resolution: {integrity: sha512-q2R38Sn+1J8RxhfJ+T54wSWmyKXWec+9jgDfqO2AtArEqHO5R2aeayp5H5OYLr5UYDVGsVaZPEFUooMhYCdz5A==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.63.1': resolution: {integrity: sha512-gfI5T24WLLuFfSKw7Go/zDXjAAV0fny0swTaDv+WjK7vqcw4cRhFfdsyKL1n+ukI+ooBxn3bVQnyrn06WpI50w==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-musl@4.63.1': resolution: {integrity: sha512-4h6XqthmB4Hspji84wvgk+ElodTsGj+dbZqHJHHtKxj4mYq0ANSEEPX9ys3moJueqsRjwpaJYH7874Itwnj2ow==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/rollup-openbsd-x64@4.63.1': resolution: {integrity: sha512-dlfCOa87o1VAYegLQ9EKilx2JCeRofiyPGhTCmqnuXZ6bMPiycO1rq1+sKoulAp7pGLIsTIw+1x5R+zgh5LhhA==} @@ -1897,6 +1930,12 @@ snapshots: '@eslint/core': 1.2.1 levn: 0.4.1 + '@fontsource-variable/handjet@5.3.0': {} + + '@fontsource-variable/noto-sans-arabic@5.3.0': {} + + '@fontsource-variable/noto-sans@5.3.0': {} + '@humanfs/core@0.19.2': dependencies: '@humanfs/types': 0.15.0 diff --git a/src/fonts/index.css b/src/fonts/index.css index 19062b1..d41f937 100644 --- a/src/fonts/index.css +++ b/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'; diff --git a/src/styles/global.css b/src/styles/global.css index 5bd9407..f102458 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,6 +1,14 @@ -: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); } * { @@ -8,5 +16,5 @@ } .core-display { - font-family: "Handjet", sans-serif; + font-family: var(--core-display-font-family); } diff --git a/src/tokens/semantic.css b/src/tokens/semantic.css index 7c7150b..c761ea5 100644 --- a/src/tokens/semantic.css +++ b/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;