mada-design-system 0.0.9

package/tailwind.config.js

@@ -0,0 +1,384 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/** @type {import('tailwindcss').Config} */
+const plugin = require('tailwindcss/plugin')
+module.exports = {
+    darkMode: ['class'],
+    content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx,mdx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx,mdx}'],
+    theme: {
+        container: {
+            center: true,
+            padding: {
+                DEFAULT: '1.6rem',
+                sm: '1.6rem',
+                md: '3.2rem',
+                lg: '3.2rem',
+                xl: '6.4rem',
+                '2xl': '6.4rem',
+            },
+            screens: {
+                DEFAULT: '100%',
+                sm: '100%',
+                md: '100%',
+                lg: '100%',
+                xl: '100%',
+                '2xl': '1592px',
+            },
+        },
+
+        extend: {
+            backgroundImage: theme => ({
+                gradientPrimary: `linear-gradient(0deg, ${theme('colors.primary.dark')} 0%, ${theme('colors.primary.DEFAULT')} 100%)`,
+                HeaderGradient: `linear-gradient(180deg, ${theme('colors.primary.container')} -15%, ${theme('colors.card.DEFAULT')} 80%)`,
+            }),
+            colors: {
+                border: {
+                    DEFAULT: 'var(--border)',
+                    secondary: 'var(--border-secondary)',
+                },
+                background: {
+                    DEFAULT: 'var(--background)',
+                    secondary: 'var(--background-secondary)',
+                    overlay: 'var(--overlay)',
+                    foreground: 'var(--background-foreground)',
+                    brand: 'var(--background-brand)',
+                },
+                foreground: {
+                    DEFAULT: 'var(--foreground)',
+                    secondary: 'var(--foreground-secondary)',
+                    tertiary: 'var(--foreground-tertiary)',
+                },
+                disabled: {
+                    DEFAULT: 'var(--disabled)',
+                    secondary: 'var(--disabled-foreground)',
+                },
+                primary: {
+                    DEFAULT: 'var(--primary)',
+                    foreground: 'var(--primary-foreground)',
+                    light: 'var(--primary-light)',
+                    dark: 'var(--primary-dark)',
+                    oncontainer: 'var(--primary-oncontainer)',
+                    container: 'var(--primary-container)',
+                },
+                secondary: {
+                    DEFAULT: 'var(--secondary)',
+                    foreground: 'var(--secondary-foreground)',
+                    light: 'var(--secondary-light)',
+                    dark: 'var(--secondary-dark)',
+                    oncontainer: 'var(--secondary-oncontainer)',
+                    container: 'var(--secondary-container)',
+                },
+                tertiary: {
+                    DEFAULT: 'var(--tertiary)',
+                    foreground: 'var(--tertiary-foreground)',
+                    light: 'var(--tertiary-light)',
+                    dark: 'var(--tertiary-dark)',
+                    oncontainer: 'var(--tertiary-oncontainer)',
+                    container: 'var(--tertiary-container)',
+                },
+                success: {
+                    DEFAULT: 'var(--sucess)',
+                    foreground: 'var(--sucess-foreground)',
+                    light: 'var(--sucess-light)',
+                    dark: 'var(--sucess-dark)',
+                    oncontainer: 'var(--sucess-oncontainer)',
+                    container: 'var(--sucess-container)',
+                },
+                error: {
+                    DEFAULT: 'var(--error)',
+                    foreground: 'var(--error-foreground)',
+                    light: 'var(--error-light)',
+                    dark: 'var(--error-dark)',
+                    oncontainer: 'var(--error-oncontainer)',
+                    container: 'var(--error-container)',
+                },
+                warning: {
+                    DEFAULT: 'var(--warning)',
+                    foreground: 'var(--warning-foreground)',
+                    light: 'var(--warning-light)',
+                    dark: 'var(--warning-dark)',
+                    oncontainer: 'var(--warning-oncontainer)',
+                    container: 'var(--warning-container)',
+                },
+                info: {
+                    DEFAULT: 'var(--info)',
+                    foreground: 'var(--info-foreground)',
+                    light: 'var(--info-light)',
+                    dark: 'var(--info-dark)',
+                    oncontainer: 'var(--info-oncontainer)',
+                    container: 'var(--info-container)',
+                },
+                destructive: {
+                    DEFAULT: 'var(--destructive)',
+                    foreground: 'var(--destructive-foreground)',
+                },
+                muted: {
+                    DEFAULT: 'var(--muted)',
+                    foreground: 'var(--muted-foreground)',
+                },
+                accent: {
+                    DEFAULT: 'hsl(var(--accent))',
+                    foreground: 'hsl(var(--accent-foreground))',
+                },
+                popover: {
+                    DEFAULT: 'var(--popover)',
+                    foreground: 'var(--popover-foreground)',
+                },
+                card: {
+                    DEFAULT: 'var(--card)',
+                    foreground: 'var(--card-foreground)',
+                    hover: 'var(--card-hover)',
+                    active: 'var(--card-active)',
+                },
+                inverted: {
+                    DEFAULT: 'var(--inverted)',
+                    secondary: 'var(--inverted-foreground)',
+                    foreground: 'var(--inverted-foreground)',
+                },
+                skeleton: {
+                    DEFAULT: 'var(--skeleton)',
+                },
+                divider: {
+                    DEFAULT: 'var(--divider)',
+                },
+                input: 'var(--input)',
+                ring: 'hsl(var(--ring))',
+                gray: {
+                    50: '#FAFAFA',
+                    100: '#F9f9f9',
+                    200: '#7E7E7E0D',
+                    300: '#EBEBEB',
+                    400: '#353B3A33',
+                    500: '#353B3A3B',
+                    600: '#393A404D',
+                    700: '#353B3A99',
+                    800: '#212625BD',
+                    900: '#0F0F0F',
+                },
+                grayDark: {
+                    10: '#FFFFFF',
+                    50: '#CECECE',
+                    100: '#B7BBBC',
+                    200: '#8F9395',
+                    300: '#7F8B91',
+                    400: '#636F77',
+                    500: '#555E65',
+                    600: '#494F55',
+                    700: '#414549',
+                    800: '#313336',
+                    900: '#242629',
+                },
+                lavender: {
+                    10: '#FFFFFF',
+                    25: '#F9F8FC',
+                    50: '#F7F6FB',
+                    100: '#F0EEF9',
+                    200: '#E3DFF5',
+                    300: '#CFC6EC',
+                    400: '#B5A4E1',
+                    500: '#9A7FD4',
+                    600: '#8966C5',
+                    700: '#7751B0',
+                    800: '#644394',
+                    900: '#533979',
+                },
+                middleBlue: {
+                    10: '#FFFFFF',
+                    25: '#F8FBFC',
+                    50: '#F3FAFC',
+                    100: '#E2F6FC',
+                    200: '#D1EFF8',
+                    300: '#BEE6F3',
+                    400: '#BEE6F3',
+                    500: '#5DB5CE',
+                    600: '#038BA7',
+                    700: '#007E99',
+                    800: '#007B97',
+                    900: '#173D47',
+                },
+                blue: {
+                    50: '#F2F8FD',
+                    100: '#E4F0FA',
+                    200: '#C2E0F5',
+                    300: '#8DC7EC',
+                    400: '#50ABE0',
+                    500: '#2990CE',
+                    600: '#1A72AF',
+                    700: '#155685',
+                    800: '#164E76',
+                    900: '#184262',
+                },
+                green: {
+                    50: '#E5F0E8',
+                    100: '#D5F5DE',
+                    200: '#BCDAC6',
+                    300: '#A5CDB2',
+                    400: '#8BBF9B',
+                    500: '#489961',
+                    600: '#398F54',
+                    700: '#2B6B3F',
+                    800: '#245934',
+                    900: '#1F4D2D',
+                },
+                red: {
+                    50: '#FDF3F3',
+                    100: '#FCE4E4',
+                    200: '#FBCDCD',
+                    300: '#F7AAAA',
+                    400: '#F07979',
+                    500: '#E54E4E',
+                    600: '#CE2D2D',
+                    700: '#B02525',
+                    800: '#922222',
+                    900: '#7A2222',
+                },
+                olivine: {
+                    10: '#FFFFFF',
+                    50: '#F5F9EC',
+                    100: '#E8F2D5',
+                    200: '#D4E6B0',
+                    300: '#B8D482',
+                    400: '#A2C566',
+                    500: '#7CA63C',
+                    600: '#61832D',
+                    700: '#4B6526',
+                    800: '#3D5123',
+                    900: '#344720',
+                },
+                puertoRico: {
+                    10: '#FFFFFF',
+                    50: '#F2FBF9',
+                    100: '#D2F5ED',
+                    200: '#A4EBDB',
+                    300: '#6FD8C7',
+                    400: '#4AC3B1',
+                    500: '#28A594',
+                    600: '#1D8479',
+                    700: '#1B6A62',
+                    800: '#1B6A62',
+                    900: '#194743',
+                },
+                marigold: {
+                    50: '#FFF8EB',
+                    100: '#FFF1D6',
+                    200: '#FEE2A9',
+                    300: '#FDCF72',
+                    400: '#FBBB3C',
+                    500: '#DB7712',
+                    600: '#B25E09',
+                    700: '#96530F',
+                    800: '#80460D',
+                    900: '#663B0F',
+                },
+                cyan: {
+                    50: '#EEFBF6',
+                    25: '#F8FCFB',
+                    100: '#D6F5E7',
+                    200: '#B0EAD3',
+                    300: '#7CD9BA',
+                    400: '#46C19C',
+                    500: '#23A684',
+                    600: '#178F72',
+                    700: '#116B57',
+                    800: '#105547',
+                    900: '#0E463B',
+                },
+                azure: {
+                    50: '#EAF3FB',
+                    100: '#D9EBF7',
+                    200: '#B2D6F0',
+                    300: '#8CC1E9',
+                    400: '#66AEE1',
+                    500: '#2683C4',
+                    600: '#2683C4',
+                    700: '#20689D',
+                    800: '#184F77',
+                    900: '#113651',
+                },
+            },
+            borderRadius: {
+                lg: 'var(--radius)',
+                md: 'calc(var(--radius) - 2px)',
+                sm: 'calc(var(--radius) - 4px)',
+                1: '8px',
+                2: '12px',
+                3: '16px',
+                4: '24px',
+                5: '32px',
+                6: '40px',
+                7: '48px',
+                8: '64px',
+            },
+            keyframes: {
+                'accordion-down': {
+                    from: { height: 0 },
+                    to: { height: 'var(--radix-accordion-content-height)' },
+                },
+                'accordion-up': {
+                    from: { height: 'var(--radix-accordion-content-height)' },
+                    to: { height: 0 },
+                },
+            },
+            animation: {
+                'accordion-down': 'accordion-down 0.2s ease-out',
+                'accordion-up': 'accordion-up 0.2s ease-out',
+            },
+            spacing: {
+                'space-00': '0px',
+                'space-01': '4px',
+                'space-02': '8px',
+                'space-03': '12px',
+                'space-04': '16px',
+                'space-05': '24px',
+                'space-06': '32px',
+                'space-07': '40px',
+                'space-08': '48px',
+                'space-09': '64px',
+                'space-10': '80px',
+                'space-11': '96px',
+                'space-12': '160px',
+            },
+            fontSize: {
+                xs: ['1.2rem', '1.6rem'],
+                sm: ['1.4rem', '2.0rem'],
+                base: '1.6rem',
+                lg: ['1.8rem', '2.8rem'],
+                xl: ['2.0rem', '2.8rem'],
+                '2xl': ['2.4rem', '3.2rem'],
+                '3xl': ['3.0rem', '3.6rem'],
+                '4xl': ['3.6rem', '4rem'],
+                'caption-01': ['1.2rem', '1.6rem'],
+                'caption-02': ['1rem', '1.4rem'],
+                'body-01': ['1.4rem', '2rem'],
+                'body-02': ['1.6rem', '2.4rem'],
+                'subtitle-01': ['1.6rem', { lineHeight: '2.4rem', fontWeight: '600' }],
+                'subtitle-02': ['2rem', '2.8rem'],
+            },
+            boxShadow: {
+                xsm: '0px 10px 16px 0px rgba(38, 36, 36, 0.04), 0px 1px 0px 0px rgba(5, 6, 12, 0.02), 0px 0px 8px 0px rgba(5, 6, 12, 0.02)',
+                sharp: '0px 1px 4px 0px rgba(169, 169, 169, 0.25);',
+                hover: '0px 3px 12px 0px rgba(169, 169, 169, 0.50);',
+                '01': '0px 10px 16px 0px rgba(38, 36, 36, 0.04), 0px 1px 0px 0px rgba(5, 6, 12, 0.02), 0px 0px 8px 0px rgba(5, 6, 12, 0.02)',
+                '03': '0px 10px 16px 0px rgba(38, 36, 36, 0.04), 0px 1px 0px 0px rgba(5, 6, 12, 0.02), 0px 0px 8px 0px rgba(5, 6, 12, 0.02)',
+                'surface-01': '0px 0px 8px 0px rgba(0,0,0,0.10)',
+                'card-shadow': '0px 0px 2px -1px rgba(0,0,0,0.10), 0px 1px 3px 0px rgba(0,0,0,0.10)',
+                'card-hover-02': '0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.10)',
+            },
+            fontFamily: {
+                IBMReguler: ['IBM Reguler', 'ui-sans-serif', 'system-ui'],
+                NotoSans: ['Noto Sans', 'ui-sans-serif', 'system-ui'],
+                NotoKufiArabic: ['Noto Kufi Arabic', 'ui-sans-serif', 'system-ui'],
+                IBMBold: ['IBM Bold', 'ui-sans-serif', 'system-ui'],
+            },
+        },
+    },
+    plugins: [
+        require('tailwindcss-animate'),
+        require('@tailwindcss/typography'),
+        require('tailwind-scrollbar'),
+        plugin(function ({ addBase }) {
+            addBase({
+                html: { fontSize: '10px' },
+            })
+        }),
+    ],
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": [
+            "ES2023",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        /* Bundler mode */
+        "moduleResolution": "Bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "src"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}