mada-design-system 0.0.9 → 0.0.11

package/tailwind.config.js

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /** @type {import('tailwindcss').Config} */
 const plugin = require('tailwindcss/plugin')
+const { dgaToken } = require('./dga.config')
 module.exports = {
     darkMode: ['class'],
     content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx,mdx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx,mdx}'],
@@ -29,28 +30,31 @@ module.exports = {
             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%)`,
+                'gradient-neutral-60050090-deg': `linear-gradient(90deg, #475467 0%, #667085 100%)`,
+                'gradient-neutral-70060045-deg': `linear-gradient(45deg, #344054 0%, #475467 100%)`,
+                'gradient-neutral-80060045-deg': `linear-gradient(45deg, #182230 0%, #475467 100%))`,
+                'gradient-neutral-80060090-deg': `linear-gradient(63deg, #182230 16.72%, #475467 83.39%))`,
+                'gradient-neutral-800700265-deg': `linear-gradient(27deg, #182230 8.33%, #344054 91.67%))`,
+                'gradient-neutral-90060090-deg': `linear-gradient(45deg, #101828 0%, #475467 100%))`,
+                'gradient-brand-60050090-deg': `linear-gradient(90deg, ${theme('colors.cyan.600')} 0%, ${theme('colors.cyan.500')} 100%))`,
+                'gradient-brand-70060045-deg': `linear-gradient(45deg, ${theme('colors.cyan.700')} 0%, ${theme('colors.cyan.600')} 100%))`,
+                'gradient-brand-80060045-deg': `linear-gradient(45deg, ${theme('colors.cyan.800')} 0%, ${theme('colors.cyan.600')} 100%))`,
+                'gradient-brand-80060090-deg': `linear-gradient(63deg, ${theme('colors.cyan.800')} 16.72%, ${theme('colors.cyan.600')} 83.39%))`,
+                'gradient-brand-800700265-deg': `linear-gradient(27deg, ${theme('colors.cyan.800')} 8.33%, ${theme('colors.cyan.700')} 91.67%))`,
+                'gradient-brand-90060045-deg': `linear-gradient(45deg, ${theme('colors.cyan.900')} 0%, ${theme('colors.cyan.600')} 100%))`,
             }),
+            backdropBlur: {
+                sm: '4px',
+                md: '8px',
+                lg: '12px',
+                xl: '20px',
+            },
             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)',
@@ -142,6 +146,10 @@ module.exports = {
                 },
                 input: 'var(--input)',
                 ring: 'hsl(var(--ring))',
+
+                ...dgaToken,
+
+                black: '#161616',
                 gray: {
                     50: '#FAFAFA',
                     100: '#F9f9f9',
@@ -167,19 +175,35 @@ module.exports = {
                     800: '#313336',
                     900: '#242629',
                 },
+                neutral: {
+                    10: '#FFFFFF',
+                    25: '#FCFCFD',
+                    50: '#F9FAFB',
+                    100: '#F3F4F6',
+                    200: '#E5E7EB',
+                    300: '#D2D6DB',
+                    400: '#9DA4AE',
+                    500: '#6C737F',
+                    600: '#4D5761',
+                    700: '#384250',
+                    800: '#1F2A37',
+                    900: '#111927',
+                    950: '#0D121C',
+                },
                 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',
+                    25: '#FEFCFF',
+                    50: '#F9F5FA',
+                    100: '#F2E9F5',
+                    200: '#E1CCE8',
+                    300: '#CCADD9',
+                    400: '#A57BBA',
+                    500: '#80519F',
+                    600: '#6D428F',
+                    700: '#532D75',
+                    800: '#3D1D5E',
+                    900: '#281047',
+                    950: '#16072E',
                 },
                 middleBlue: {
                     10: '#FFFFFF',
@@ -196,40 +220,49 @@ module.exports = {
                     900: '#173D47',
                 },
                 blue: {
-                    50: '#F2F8FD',
-                    100: '#E4F0FA',
-                    200: '#C2E0F5',
-                    300: '#8DC7EC',
-                    400: '#50ABE0',
-                    500: '#2990CE',
-                    600: '#1A72AF',
-                    700: '#155685',
-                    800: '#164E76',
-                    900: '#184262',
+                    10: '#FFFFFF',
+                    25: '#F5FAFF',
+                    50: '#EFF8FF',
+                    100: '#D1E9FF',
+                    200: '#B2DDFF',
+                    300: '#84CAFF',
+                    400: '#53B1FD',
+                    500: '#2E90FA',
+                    600: '#1570EF',
+                    700: '#175CD3',
+                    800: '#1849A9',
+                    900: '#194185',
+                    950: '#102A56',
                 },
                 green: {
-                    50: '#E5F0E8',
-                    100: '#D5F5DE',
-                    200: '#BCDAC6',
-                    300: '#A5CDB2',
-                    400: '#8BBF9B',
-                    500: '#489961',
-                    600: '#398F54',
-                    700: '#2B6B3F',
-                    800: '#245934',
-                    900: '#1F4D2D',
+                    10: '#FFFFFF',
+                    25: '#F6FEF9',
+                    50: '#ECFDF3',
+                    100: '#DCFAE6',
+                    200: '#ABEFC6',
+                    300: '#75E0A7',
+                    400: '#47CD89',
+                    500: '#17B26A',
+                    600: '#079455',
+                    700: '#067647',
+                    800: '#085D3A',
+                    900: '#074D31',
+                    950: '#053321',
                 },
                 red: {
-                    50: '#FDF3F3',
-                    100: '#FCE4E4',
-                    200: '#FBCDCD',
-                    300: '#F7AAAA',
-                    400: '#F07979',
-                    500: '#E54E4E',
-                    600: '#CE2D2D',
-                    700: '#B02525',
-                    800: '#922222',
-                    900: '#7A2222',
+                    10: '#FFFFFF',
+                    25: '#FFFBFA',
+                    50: '#FEF3F2',
+                    100: '#FEE4E2',
+                    200: '#FECDCA',
+                    300: '#FDA29B',
+                    400: '#F97066',
+                    500: '#F04438',
+                    600: '#D92D20',
+                    700: '#B42318',
+                    800: '#912018',
+                    900: '#7A271A',
+                    950: '#55160C',
                 },
                 olivine: {
                     10: '#FFFFFF',
@@ -258,29 +291,49 @@ module.exports = {
                     900: '#194743',
                 },
                 marigold: {
-                    50: '#FFF8EB',
-                    100: '#FFF1D6',
-                    200: '#FEE2A9',
-                    300: '#FDCF72',
-                    400: '#FBBB3C',
-                    500: '#DB7712',
-                    600: '#B25E09',
-                    700: '#96530F',
-                    800: '#80460D',
-                    900: '#663B0F',
+                    10: '#FFFFFF',
+                    25: '#FFFCF5',
+                    50: '#FFFAEB',
+                    100: '#FEF0C7',
+                    200: '#FEDF89',
+                    300: '#FEC84B',
+                    400: '#FDB022',
+                    500: '#F79009',
+                    600: '#DC6803',
+                    700: '#B54708',
+                    800: '#93370D',
+                    900: '#7A2E0E',
+                    950: '#4E1D09',
+                },
+                gold: {
+                    10: '#FFFFFF',
+                    25: '#FFFEF7',
+                    50: '#FFFEF2',
+                    100: '#FFFCE6',
+                    200: '#FCF3BD',
+                    300: '#FAE996',
+                    400: '#F7D54D',
+                    500: '#F5BD02',
+                    600: '#DBA102',
+                    700: '#B87B02',
+                    800: '#945C01',
+                    900: '#6E3C00',
+                    950: '#472400',
                 },
                 cyan: {
-                    50: '#EEFBF6',
-                    25: '#F8FCFB',
-                    100: '#D6F5E7',
-                    200: '#B0EAD3',
-                    300: '#7CD9BA',
-                    400: '#46C19C',
-                    500: '#23A684',
-                    600: '#178F72',
-                    700: '#116B57',
-                    800: '#105547',
-                    900: '#0E463B',
+                    10: '#FFFFFF',
+                    25: '#F7FDF9',
+                    50: '#F3FCF6',
+                    100: '#DFF6E7',
+                    200: '#B8EACB',
+                    300: '#88D8AD',
+                    400: '#54C08A',
+                    500: '#25935F',
+                    600: '#1B8354',
+                    700: '#166A45',
+                    800: '#14573A',
+                    900: '#104631',
+                    950: '#092A1E',
                 },
                 azure: {
                     50: '#EAF3FB',
@@ -294,8 +347,62 @@ module.exports = {
                     800: '#184F77',
                     900: '#113651',
                 },
+                alpha: {
+                    'white-0': '#FFFFFF00',
+                    'black-0': '#16161600',
+                    'black-10': '#16161619',
+                    'black-20': '#16161633',
+                    'black-30': '#1616164C',
+                    'black-40': '#16161666',
+                    'black-50': '#1616167F',
+                    'black-60': '#16161699',
+                    'black-70': '#161616B2',
+                    'black-80': '#161616CC',
+                    'black-90': '#161616E5',
+                    'black-100': '#161616',
+                    'white-10': '#FFFFFF19',
+                    'white-20': '#FFFFFF33',
+                    'white-30': '#FFFFFF4C',
+                    'white-40': '#FFFFFF66',
+                    'white-50': '#FFFFFF7F',
+                    'white-60': '#FFFFFF99',
+                    'white-70': '#FFFFFFB2',
+                    'white-80': '#FFFFFFCC',
+                    'white-90': '#FFFFFFE5',
+                    'white-100': '#FFFFFF',
+                    'cyan-0': '#1B835400',
+                    'cyan-10': '#1B835419',
+                    'cyan-20': '#1B835433',
+                    'cyan-30': '#1B83544C',
+                    'cyan-40': '#1B835466',
+                    'cyan-50': '#1B83547F',
+                    'cyan-60': '#1B835499',
+                    'cyan-70': '#1B8354B2',
+                    'cyan-80': '#1B8354CC',
+                    'cyan-90': '#1B8354E5',
+                    //"cyan-100": var(--color-"cyan-600)",
+                    'green-10': '#07945519',
+                    'green-20': '#07945533',
+                    'blue-10': '#1570EF19',
+                    'blue-20': '#1570EF33',
+                    'red-10': '#D92D2019',
+                    'red-20': '#D92D2033',
+                    'marigold-10': '#DC680319',
+                    'marigold-20': '#DC680333',
+                    'Alpha-primary-10': '#1B83541A',
+                    'Alpha-primary-20': '#1B835433',
+                    'Alpha-warning-10': '#DC68031A',
+                    'Alpha-warning-20': '#DC680333',
+                    'Alpha-error-10': '#D92D201A',
+                    'Alpha-error-20': '#D92D2033',
+                    'Alpha-info-10': '#1570EF1A',
+                    'Alpha-info-20': '#1570EF33',
+                    'Alpha-success-10': '#0794551A',
+                    'Alpha-success-20': '#07945533',
+                },
             },
             borderRadius: {
+                DEFAULT: '4px',
                 lg: 'var(--radius)',
                 md: 'calc(var(--radius) - 2px)',
                 sm: 'calc(var(--radius) - 4px)',
@@ -362,12 +469,16 @@ module.exports = {
                 '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)',
+                xs: '0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
+                sm: '0px 1px 3px 0px rgba(16, 24, 40, 0.05), 0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
+                md: '0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
+                lg: '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)',
+                xl: ' 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03)',
+                '2xl': '0px 24px 48px -12px rgba(16, 24, 40, 0.18)',
+                '3xl': ' 0px 32px 64px -12px rgba(16, 24, 40, 0.14)',
             },
             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'],
+                IBMPlexSans: ['IBM Plex Sans Arabic', 'ui-sans-serif', 'system-ui'],
             },
         },
     },

package/tsconfig.json

@@ -2,11 +2,7 @@
     "compilerOptions": {
         "target": "ESNext",
         "useDefineForClassFields": true,
-        "lib": [
-            "ES2023",
-            "DOM",
-            "DOM.Iterable"
-        ],
+        "lib": ["ES2023", "DOM", "DOM.Iterable"],
         "module": "ESNext",
         "skipLibCheck": true,
         /* Bundler mode */
@@ -23,12 +19,10 @@
         "noFallthroughCasesInSwitch": true,
         "allowSyntheticDefaultImports": true
     },
-    "include": [
-        "src"
-    ],
+    "include": ["src"],
     "references": [
         {
             "path": "./tsconfig.node.json"
         }
     ]
-}
+}