@marinae/nextgen-design-system 0.1.0

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@marinae/nextgen-design-system",
+  "version": "0.1.0",
+  "private": false,
+  "files": [
+    "src/style"
+    ],
+  "exports": {
+    "./style": "./src/style/main.scss",
+    "./style/*": "./src/style/*"
+  }
+}

package/src/style/abstracts/_mixins.scss

@@ -0,0 +1,16 @@
+@mixin typography($size, $weight: regular) {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-#{$size});
+  line-height: var(--line-height-#{$size});
+  font-weight: var(--font-weight-#{$weight});
+
+  @if $size == display-2xl or $size == display-xl or $size == display-lg or $size == display-md {
+    letter-spacing: var(--letter-spacing-#{$size});
+  }
+}
+
+@mixin container($size: xl) {
+  width: 100%;
+  max-width: var(--container-#{$size});
+  margin-inline: auto;
+}

package/src/style/abstracts/_tokens.scss

@@ -0,0 +1,55 @@
+:root {
+  // Spacing system
+  // Base: 16px
+
+  --space-1: 0.25rem; // 4px
+  --space-2: 0.5rem; // 8px
+  --space-3: 0.75rem; // 12px
+  --space-4: 1rem; // 16px
+  --space-5: 1.25rem; // 20px
+  --space-6: 1.5rem; // 24px
+  --space-8: 2rem; // 32px
+  --space-10: 2.5rem; // 40px
+  --space-12: 3rem; // 48px
+  --space-16: 4rem; // 64px
+  --space-20: 5rem; // 80px
+  --space-24: 6rem; // 96px
+  --space-32: 8rem; // 128px
+  --space-40: 10rem; // 160px
+  --space-48: 12rem; // 192px
+  --space-56: 14rem; // 224px
+  --space-64: 16rem; // 256px
+
+  // Container widths
+  // Based on 16px root font size
+
+  --container-sm: 40rem; // 640px
+  --container-md: 48rem; // 768px
+  --container-lg: 64rem; // 1024px
+  --container-xl: 80rem; // 1280px
+
+  // Radius
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-pill: 999px;
+
+  // Shadows
+  --shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
+  --shadow-sm: 0px 1px 3px 0px rgba(10, 13, 18, 0.10);
+  --shadow-md: 0px 4px 8px -2px rgba(10, 13, 18, 0.10);
+  --shadow-lg: 0px 12px 16px -4px rgba(10, 13, 18, 0.08);
+  --shadow-xl: 0px 20px 24px -4px rgba(10, 13, 18, 0.08);
+  --shadow-2xl: 0px 24px 48px -12px rgba(10, 13, 18, 0.18);
+  --shadow-3xl: 0px 32px 64px -12px rgba(10, 13, 18, 0.14);
+
+  // Blurs
+    --blur-sm: blur(8px);
+    --blur-md: blur(16px);
+    --blur-lg: blur(24px);
+    --blur-xl: blur(40px);
+
+  // Transitions
+  --transition-fast: 150ms ease;
+  --transition-base: 220ms ease;
+}

package/src/style/base/_colors.scss

@@ -0,0 +1,209 @@
+:root {
+
+    // PRIMARY COLORS
+
+    // Indico Gray
+  --indico-gray-50: #f5f5f6;
+  --indico-gray-100: #e5e6e8;
+  --indico-gray-200: #ced0d3;
+  --indico-gray-300: #abafb5;
+  --indico-gray-400: #81868f;
+  --indico-gray-500: #717680;
+  --indico-gray-600: #575a63;
+  --indico-gray-700: #4b4d53;
+  --indico-gray-800: #424448;
+  --indico-gray-900: #3a3b3f;
+  --indico-gray-950: #242528;
+
+  // Indico Primary Blue
+  --indico-primary-blue-50: #e7f8ff;
+  --indico-primary-blue-100: #def3ff;
+  --indico-primary-blue-200: #b6e9ff;
+  --indico-primary-blue-300: #75daff;
+  --indico-primary-blue-400: #2ccbff;
+  --indico-primary-blue-500: #00a4e4;
+  --indico-primary-blue-600: #008ed4;
+  --indico-primary-blue-700: #0071ab;
+  --indico-primary-blue-800: #005f8d;
+  --indico-primary-blue-900: #064f74;
+  --indico-primary-blue-950: #04324d;
+
+  // Indico Error
+  --indico-error-50: #ffefef;
+  --indico-error-100: #ffcdcc;
+  --indico-error-200: #ffbfbf;
+  --indico-error-300: #ff9292;
+  --indico-error-400: #ff5454;
+  --indico-error-500: #ff1f1f;
+  --indico-error-600: #ff0000;
+  --indico-error-700: #db0000;
+  --indico-error-800: #af0000;
+  --indico-error-900: #940808;
+  --indico-error-950: #520000;
+
+  // Indico Warning
+  --indico-warning-50: #fefaec;
+  --indico-warning-100: #fbf2ca;
+  --indico-warning-200: #f7e390;
+  --indico-warning-300: #f3d056;
+  --indico-warning-400: #f0bc2f;
+  --indico-warning-500: #e99e18;
+  --indico-warning-600: #ce7811;
+  --indico-warning-700: #ab5612;
+  --indico-warning-800: #8b4415;
+  --indico-warning-900: #733714;
+  --indico-warning-950: #421c06;
+
+  // Indico Success
+  --indico-success-50: #f1faeb;
+  --indico-success-100: #dff4d3;
+  --indico-success-200: #c2eaac;
+  --indico-success-300: #99dc7a;
+  --indico-success-400: #6cc644;
+  --indico-success-500: #57af33;
+  --indico-success-600: #418b25;
+  --indico-success-700: #336b20;
+  --indico-success-800: #2c551f;
+  --indico-success-900: #28491e;
+  --indico-success-950: #11280b;
+
+  //SECONDARY COLORS
+
+  // Indico Accent
+  --indico-accent-50: #fff6ed;
+  --indico-accent-100: #ffebd5;
+  --indico-accent-200: #ffd2a9;
+  --indico-accent-300: #feb273;
+  --indico-accent-400: #fd863a;
+  --indico-accent-500: #fb6514;
+  --indico-accent-600: #ec4a0a;
+  --indico-accent-700: #c4350a;
+  --indico-accent-800: #9b2b11;
+  --indico-accent-900: #7d2f11;
+  --indico-accent-950: #441006;
+
+  // Indico Blue Light
+  --indico-blue-light-50: #f0f9ff;
+  --indico-blue-light-100: #e0f2fe;
+  --indico-blue-light-200: #b9e6fe;
+  --indico-blue-light-300: #7bd3fe;
+  --indico-blue-light-400: #35bdfb;
+  --indico-blue-light-500: #0ba5ec;
+  --indico-blue-light-600: #0084ca;
+  --indico-blue-light-700: #0169a3;
+  --indico-blue-light-800: #055987;
+  --indico-blue-light-900: #0b496f;
+  --indico-blue-light-950: #072f4a;
+
+  // Indico Indigo
+  --indico-indigo-50: #faf4ff;
+  --indico-indigo-100: #f3e6ff;
+  --indico-indigo-200: #ead2ff;
+  --indico-indigo-300: #d9aeff;
+  --indico-indigo-400: #c27bff;
+  --indico-indigo-500: #ab49ff;
+  --indico-indigo-600: #9825f8;
+  --indico-indigo-700: #8315db;
+  --indico-indigo-800: #6f17b2;
+  --indico-indigo-900: #5b148f;
+  --indico-indigo-950: #4b0082;
+
+  // Indico Rosé
+  --indico-rose-50: #fff1f3;
+  --indico-rose-100: #ffe4e8;
+  --indico-rose-200: #fecdd6;
+  --indico-rose-300: #fea3b4;
+  --indico-rose-400: #fd6f8e;
+  --indico-rose-500: #f63d68;
+  --indico-rose-600: #e31b54;
+  --indico-rose-700: #c01048;
+  --indico-rose-800: #a11043;
+  --indico-rose-900: #89123e;
+  --indico-rose-950: #4d041d;
+
+  // GRADIENTS
+
+  // Gray gradients
+  --indico-gradient-gray-600: #575a63;
+
+  --indico-gradient-gray-600-500-90: linear-gradient(
+    90deg,
+    #575a63 0%,
+    #717680 100%
+  );
+
+  --indico-gradient-gray-700-600-45: linear-gradient(
+    45deg,
+    #414651 0%,
+    #535862 100%
+  );
+
+  --indico-gradient-gray-800-600-45: linear-gradient(
+    45deg,
+    #252b37 0%,
+    #535862 100%
+  );
+
+  --indico-gradient-gray-800-600-90: linear-gradient(
+    90deg,
+    #252b37 0%,
+    #535862 100%
+  );
+
+  --indico-gradient-gray-800-700-26: linear-gradient(
+    26.5deg,
+    #252b37 0%,
+    #414651 100%
+  );
+
+  --indico-gradient-gray-900-600-45: linear-gradient(
+    45deg,
+    #101828 0%,
+    #535862 100%
+  );
+
+  // Brand gradients
+  --indico-gradient-brand-600: #7f56d9;
+
+  --indico-gradient-brand-600-500-90: linear-gradient(
+    90deg,
+    #7f56d9 0%,
+    #9e77ed 100%
+  );
+
+  --indico-gradient-brand-700-600-45: linear-gradient(
+    45deg,
+    #6941c6 0%,
+    #7f56d9 100%
+  );
+
+  --indico-gradient-brand-800-600-45: linear-gradient(
+    45deg,
+    #53389e 0%,
+    #7f56d9 100%
+  );
+
+  --indico-gradient-brand-800-600-90: linear-gradient(
+    90deg,
+    #53389e 0%,
+    #7f56d9 100%
+  );
+
+  --indico-gradient-brand-800-700-26: linear-gradient(
+    26.5deg,
+    #53389e 0%,
+    #6941c6 100%
+  );
+
+  --indico-gradient-brand-900-600-45: linear-gradient(
+    45deg,
+    #42307d 0%,
+    #7f56d9 100%
+  );
+
+  --indico-gradient-indigo-500-blue-500-45: linear-gradient(
+    45deg,
+    #ab49ff  0%,
+    #0ba5ec 100%
+  );
+}

package/src/style/base/_global.scss

@@ -0,0 +1,10 @@
+body {
+  min-height: 100vh;
+  font-family: var(--font-family-base);
+  color: var(--color-text);
+  background: var(--color-surface-soft);
+}
+
+a {
+  color: inherit;
+}

package/src/style/base/_reset.scss

@@ -0,0 +1,31 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+img,
+picture,
+svg {
+  display: block;
+  max-width: 100%;
+}

package/src/style/base/_typography.scss

@@ -0,0 +1,58 @@
+:root {
+  // Font family
+  --font-family-base: 'Noto Sans', sans-serif;
+
+  // Font weights
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  // Display 2xl
+  --font-size-display-2xl: 4.5rem; // 72px
+  --line-height-display-2xl: 5.625rem; // 90px
+  --letter-spacing-display-2xl: -0.02em;
+
+  // Display xl
+  --font-size-display-xl: 3.75rem; // 60px
+  --line-height-display-xl: 4.5rem; // 72px
+  --letter-spacing-display-xl: -0.02em;
+
+  // Display lg
+  --font-size-display-lg: 3rem; // 48px
+  --line-height-display-lg: 3.75rem; // 60px
+  --letter-spacing-display-lg: -0.02em;
+
+  // Display md
+  --font-size-display-md: 2.25rem; // 36px
+  --line-height-display-md: 2.75rem; // 44px
+  --letter-spacing-display-md: -0.02em;
+
+  // Display sm
+  --font-size-display-sm: 1.875rem; // 30px
+  --line-height-display-sm: 2.375rem; // 38px
+
+  // Display xs
+  --font-size-display-xs: 1.5rem; // 24px
+  --line-height-display-xs: 2rem; // 32px
+
+  // Text xl
+  --font-size-text-xl: 1.25rem; // 20px
+  --line-height-text-xl: 1.875rem; // 30px
+
+  // Text lg
+  --font-size-text-lg: 1.125rem; // 18px
+  --line-height-text-lg: 1.75rem; // 28px
+
+  // Text md
+  --font-size-text-md: 1rem; // 16px
+  --line-height-text-md: 1.5rem; // 24px
+
+  // Text sm
+  --font-size-text-sm: 0.875rem; // 14px
+  --line-height-text-sm: 1.25rem; // 20px
+
+  // Text xs
+  --font-size-text-xs: 0.75rem; // 12px
+  --line-height-text-xs: 1.125rem; // 18px
+}

package/src/style/main.scss

@@ -0,0 +1,6 @@
+@use './abstracts/mixins';
+
+@use './base/colors';
+@use './base/typography';
+@use './base/reset';
+@use './base/global';