@myelmut/design-system 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myelmut/design-system",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Design system for Elmut project",
   "repository": {
     "type": "git",
@@ -15,11 +15,15 @@
   "style": "dist/index.css",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "styles",
+    "assets"
   ],
   "peerDependencies": {
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "i18next": "^25.0.0",
+    "react-i18next": "^16.0.0"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^9.1.10",
@@ -65,7 +69,8 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && pnpm run copy-static-assets",
+    "copy-static-assets": "cp -r src/styles styles && cp -r src/assets assets",
     "build:with-assets": "vite build && pnpm run copy-assets",
     "copy-assets": "mkdir -p dist/public/assets && cp -r src/assets/* dist/public/assets/ && cp -r dist/public/assets/* ../public/design-system/",
     "storybook": "storybook dev -p 6006",

package/styles/globals.css

@@ -0,0 +1,187 @@
+@import 'tailwindcss';
+
+@font-face {
+    font-family: 'Pangaia';
+    src: url('../assets/fonts/PPPangaia-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pangaia';
+    src: url('../assets/fonts/PPPangaia-MediumItalic.woff2') format('woff2');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pangaia';
+    src: url('../assets/fonts/PPPangaia-Ultralight.woff2') format('woff2');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mori';
+    src: url('../assets/fonts/PPMori-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mori';
+    src: url('../assets/fonts/PPMori-Semibold.woff2') format('woff2');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mori';
+    src: url('../assets/fonts/PPMori-RegularItalic.woff2') format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@theme {
+    /* Colors */
+    --color-claret-violet-dark: #671a36; /* Claret Violet 500 */
+    --color-claret-violet-light: #802948; /* Claret Violet 400 */
+    --color-pink-oyster-dark: #eeaeb4; /* Pink Oyster 600 */
+    --color-pink-oyster-light: #f7c8cc; /* Pink Oyster 500 */
+    --color-beige-ultra-light: #fffbf3; /* Beige Ultra Light */
+    --color-beige-dark: #f0e4c8; /* Beige 600 */
+    --color-beige-light: #f7efdc; /* Beige 500 */
+    --color-beige-ultra-dark: #dfd0ac; /* Beige ultra dark */
+    --color-lavender-blue-dark: #adadf0; /* Lavender Blue 600 */
+    --color-lavender-blue-light: #c3c3fe; /* Lavender Blue 500 */
+    --color-red-error: #b1002c;
+    /* Fonts */
+    --font-pangaia: 'Pangaia', serif;
+    --font-mori: 'Mori', sans-serif;
+
+    /* Title font sizes */
+    --text-display-xl: 8rem; /* Display 01 */
+    --text-display-xl-mobile: 2.5rem; /* Display */
+    --text-display-lg: 6rem; /* Display 02 */
+    --text-display-lg-mobile: 1.5rem; /* Heading 01 */
+    --text-display-md: 3rem; /* Display 03 */
+    --text-display-md-mobile: 1.5rem; /* Heading 01 italic */
+    --text-heading-xl: 4rem; /* Heading 01 */
+    --text-heading-xl-mobile: 1.25rem; /* Heading 02 */
+    --text-heading-lg: 3rem; /* Heading 02 */
+    --text-heading-lg-mobile: 1rem; /* Heading 03 | Big text when semibold */
+    --text-heading-md: 2rem; /* Heading 03 */
+    --text-heading-md-mobile: 0.875rem; /* Regular Text */
+
+    /* Body font sizes */
+    --text-xl: 1.25rem; /* Big text */
+    --text-xl-mobile: 0.875rem; /* Button */
+    --text-lg: 1.25rem; /* Big Text */
+    --text-lg-mobile: 0.75rem; /* Small Text */
+    --text-md: 1rem; /* Regular Text */
+    --text-md-mobile: 0.75rem; /* Small Text */
+    --text-sm: 0.875rem; /* Small Text */
+    --text-sm-mobile: 0.625rem; /* Overline */
+    --text-legend: 0.875rem; /* Legend */
+    --text-button: 1rem; /* Button */
+    --text-button-mobile: 0.875rem; /* Button */
+
+    /* Border radius */
+    --radius-card: 1.25rem;
+    --radius-illustrated-card-button: 1.125rem;
+    --radius-card-button-mobile: 0.625rem;
+    --radius-input: 0.625rem;
+    --radius-food-card: 1rem;
+    --radius-table: 1.875rem;
+
+    /* Custom breakpoints (affect all @md, @lg, etc. utilities) */
+    --breakpoint-xs: 155;
+
+    /* Custom container widths */
+    --container-xs: 100vw;
+    --container-sm: 640px;
+    --container-md: 768px;
+    --container-lg: 1024px;
+    --container-xl: 1280px;
+    --container-2xl: 1536px;
+}
+
+@layer base {
+    html {
+        font-family: var(--font-mori);
+        color: var(--color-claret-violet-dark);
+        background-color: var(--color-beige-light);
+    }
+}
+
+@layer utilities {
+    /* Delete the arrows on the number inputs */
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number']::-webkit-outer-spin-button {
+        @apply m-0 appearance-none;
+    }
+
+    input[type='number'] {
+        @apply [appearance:textfield]; /* standard + Firefox */
+    }
+
+    @keyframes fade-in {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-out {
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+        }
+    }
+
+    .animate-fade-in {
+        animation: fade-in 300ms ease-in;
+    }
+
+    .animate-fade-out {
+        animation: fade-out 150ms ease-out;
+    }
+}
+
+@utility container {
+    width: 100%;
+    margin-inline: auto;
+    padding-inline: 1.5rem;
+    max-width: var(--container-xs);
+
+    @variant sm {
+        max-width: var(--container-sm);
+    }
+
+    @variant md {
+        padding-inline: 2rem;
+        max-width: var(--container-md);
+    }
+
+    @variant lg {
+        max-width: var(--container-lg);
+    }
+
+    @variant xl {
+        max-width: var(--container-xl);
+    }
+
+    @variant 2xl {
+        max-width: var(--container-2xl);
+    }
+}