@aragon/gov-ui-kit 1.0.49

package/src/theme/tokens/index.css

@@ -0,0 +1 @@
+@import "./primitives/index.css";

package/src/theme/tokens/primitives/borderRadius.css

@@ -0,0 +1,9 @@
+:root {
+  --guk-border-rounded: 4px;
+  --guk-border-rounded-lg: 8px;
+  --guk-border-rounded-xl: 12px;
+  --guk-border-rounded-2xl: 16px;
+  --guk-border-rounded-3xl: 24px;
+  --guk-border-rounded-full: 9999px;
+  --guk-border-rounded-none: none;
+}

package/src/theme/tokens/primitives/colors.css

@@ -0,0 +1,73 @@
+:root {
+  /* Primary */
+  --guk-color-primary-50: #f5f8ff;
+  --guk-color-primary-100: #c4d7ff;
+  --guk-color-primary-200: #93b2ff;
+  --guk-color-primary-300: #628cfe;
+  --guk-color-primary-400: #3164fa;
+  --guk-color-primary-500: #003bf5;
+  --guk-color-primary-600: #0037d2;
+  --guk-color-primary-700: #0031ad;
+  --guk-color-primary-800: #002985;
+  --guk-color-primary-900: #001f5c;
+
+  /* Neutral */
+  --guk-color-neutral-0: #ffffff;
+  --guk-color-neutral-50: #f5f7fa;
+  --guk-color-neutral-100: #e4e7eb;
+  --guk-color-neutral-200: #cbd2d9;
+  --guk-color-neutral-300: #9aa5b1;
+  --guk-color-neutral-400: #7b8794;
+  --guk-color-neutral-500: #616e7c;
+  --guk-color-neutral-600: #52606d;
+  --guk-color-neutral-700: #3e4c59;
+  --guk-color-neutral-800: #323f4b;
+  --guk-color-neutral-900: #1f2933;
+
+  /* Info */
+  --guk-color-info-100: #d1fdfa;
+  --guk-color-info-200: #a4f9fb;
+  --guk-color-info-300: #75e8f3;
+  --guk-color-info-400: #52cfe7;
+  --guk-color-info-500: #1eadd8;
+  --guk-color-info-600: #1588b9;
+  --guk-color-info-700: #0f669b;
+  --guk-color-info-800: #09497d;
+  --guk-color-info-900: #053467;
+
+  /* Success */
+  --guk-color-success-100: #f3fccc;
+  --guk-color-success-200: #e4f99a;
+  --guk-color-success-300: #ccef66;
+  --guk-color-success-400: #b2e040;
+  --guk-color-success-500: #8ecc0a;
+  --guk-color-success-600: #74af07;
+  --guk-color-success-700: #5c9205;
+  --guk-color-success-800: #467603;
+  --guk-color-success-900: #366101;
+
+  /* Warning */
+  --guk-color-warning-100: #fff3d6;
+  --guk-color-warning-200: #ffe4ad;
+  --guk-color-warning-300: #ffd083;
+  --guk-color-warning-400: #ffbe65;
+  --guk-color-warning-500: #ff9f32;
+  --guk-color-warning-600: #db7d24;
+  --guk-color-warning-700: #b75e19;
+  --guk-color-warning-800: #93430f;
+  --guk-color-warning-900: #7a3009;
+
+  /* Critical */
+  --guk-color-critical-100: #fee4d6;
+  --guk-color-critical-200: #fec3ae;
+  --guk-color-critical-300: #fd9a86;
+  --guk-color-critical-400: #fb7467;
+  --guk-color-critical-500: #f93636;
+  --guk-color-critical-600: #d62736;
+  --guk-color-critical-700: #b31b35;
+  --guk-color-critical-800: #901132;
+  --guk-color-critical-900: #770a30;
+
+  /* Transparent */
+  --guk-color-transparent: transparent;
+}

package/src/theme/tokens/primitives/index.css

@@ -0,0 +1,5 @@
+@import "./borderRadius.css";
+@import "./colors.css";
+@import "./spacing.css";
+@import "./shadows.css";
+@import "./typography.css";

package/src/theme/tokens/primitives/shadows.css

@@ -0,0 +1,52 @@
+:root {
+  /* Neutral */
+  --guk-shadow-neutral-sm: 0px 1px 2px 0px rgba(97, 110, 124, 0.05);
+  --guk-shadow-neutral: 0px 1px 3px 0px rgba(97, 110, 124, 0.1), 0px 1px 2px -1px rgba(97, 110, 124, 0.1);
+  --guk-shadow-neutral-md: 0px 4px 6px -1px rgba(82, 96, 109, 0.1), 0px 2px 4px -2px rgba(82, 96, 109, 0.1);
+  --guk-shadow-neutral-lg: 0px 10px 15px -3px rgba(82, 96, 109, 0.1), 0px 4px 6px -4px rgba(82, 96, 109, 0.1);
+  --guk-shadow-neutral-xl: 0px 20px 25px -5px rgba(82, 96, 109, 0.1), 0px 8px 10px -6px rgba(82, 96, 109, 0.1);
+  --guk-shadow-neutral-2xl: 0px 25px 50px -12px rgba(82, 96, 109, 0.24);
+
+  /* Primary */
+  --guk-shadow-primary-sm: 0px 1px 2px 0px rgba(0, 59, 245, 0.05);
+  --guk-shadow-primary: 0px 1px 3px 0px rgba(0, 59, 245, 0.1), 0px 1px 2px -1px rgba(0, 59, 245, 0.1);
+  --guk-shadow-primary-md: 0px 4px 6px -1px rgba(0, 59, 245, 0.1), 0px 2px 4px -2px rgba(0, 59, 245, 0.1);
+  --guk-shadow-primary-lg: 0px 10px 15px -3px rgba(0, 59, 245, 0.1), 0px 4px 6px -4px rgba(0, 59, 245, 0.1);
+  --guk-shadow-primary-xl: 0px 20px 25px -5px rgba(0, 59, 245, 0.1), 0px 8px 10px -6px rgba(0, 59, 245, 0.1);
+  --guk-shadow-primary-2xl: 0px 25px 50px -12px rgba(0, 59, 245, 0.24);
+
+  /* Success */
+  --guk-shadow-success-sm: 0px 1px 2px 0px rgba(116, 175, 7, 0.05);
+  --guk-shadow-success: 0px 1px 3px 0px rgba(116, 175, 7, 0.1), 0px 1px 2px -1px rgba(116, 175, 7, 0.1);
+  --guk-shadow-success-md: 0px 4px 6px -1px rgba(116, 175, 7, 0.1), 0px 2px 4px -2px rgba(116, 175, 7, 0.1);
+  --guk-shadow-success-lg: 0px 10px 15px -3px rgba(116, 175, 7, 0.1), 0px 4px 6px -4px rgba(116, 175, 7, 0.1);
+  --guk-shadow-success-xl: 0px 20px 25px -5px rgba(116, 175, 7, 0.1), 0px 8px 10px -6px rgba(116, 175, 7, 0.1);
+  --guk-shadow-success-2xl: 0px 25px 50px -12px rgba(116, 175, 7, 0.24);
+
+  /* Warning */
+  --guk-shadow-warning-sm: 0px 1px 2px 0px rgba(219, 125, 36, 0.05);
+  --guk-shadow-warning: 0px 1px 3px 0px rgba(219, 125, 36, 0.1), 0px 1px 2px -1px rgba(219, 125, 36, 0.1);
+  --guk-shadow-warning-md: 0px 4px 6px -1px rgba(219, 125, 36, 0.1), 0px 2px 4px -2px rgba(219, 125, 36, 0.1);
+  --guk-shadow-warning-lg: 0px 10px 15px -3px rgba(219, 125, 36, 0.1), 0px 4px 6px -4px rgba(219, 125, 36, 0.1);
+  --guk-shadow-warning-xl: 0px 20px 25px -5px rgba(219, 125, 36, 0.1), 0px 8px 10px -6px rgba(219, 125, 36, 0.1);
+  --guk-shadow-warning-2xl: 0px 25px 50px -12px rgba(219, 125, 36, 0.24);
+
+  /* Critical */
+  --guk-shadow-critical-sm: 0px 1px 2px 0px rgba(214, 39, 54, 0.05);
+  --guk-shadow-critical: 0px 1px 3px 0px rgba(214, 39, 54, 0.1), 0px 1px 2px -1px rgba(214, 39, 54, 0.1);
+  --guk-shadow-critical-md: 0px 4px 6px -1px rgba(214, 39, 54, 0.1), 0px 2px 4px -2px rgba(214, 39, 54, 0.1);
+  --guk-shadow-critical-lg: 0px 10px 15px -3px rgba(214, 39, 54, 0.1), 0px 4px 6px -4px rgba(214, 39, 54, 0.1);
+  --guk-shadow-critical-xl: 0px 20px 25px -5px rgba(214, 39, 54, 0.1), 0px 8px 10px -6px rgba(214, 39, 54, 0.1);
+  --guk-shadow-critical-2xl: 0px 25px 50px -12px rgba(214, 39, 54, 0.24);
+
+  /* Info */
+  --guk-shadow-info-sm: 0px 1px 2px 0px rgba(21, 136, 185, 0.05);
+  --guk-shadow-info: 0px 1px 3px 0px rgba(21, 136, 185, 0.1), 0px 1px 2px -1px rgba(21, 136, 185, 0.1);
+  --guk-shadow-info-md: 0px 4px 6px -1px rgba(21, 136, 185, 0.1), 0px 2px 4px -2px rgba(21, 136, 185, 0.1);
+  --guk-shadow-info-lg: 0px 10px 15px -3px rgba(21, 136, 185, 0.1), 0px 4px 6px -4px rgba(21, 136, 185, 0.1);
+  --guk-shadow-info-xl: 0px 20px 25px -5px rgba(21, 136, 185, 0.1), 0px 8px 10px -6px rgba(21, 136, 185, 0.1);
+  --guk-shadow-info-2xl: 0px 25px 50px -12px rgba(21, 136, 185, 0.24);
+
+  /* None */
+  --guk-shadow-none: 0px 0px #0000;
+}

package/src/theme/tokens/primitives/spacing.css

@@ -0,0 +1,37 @@
+:root {
+  --guk-space-base: 4px;
+  --guk-space-0: calc(var(--guk-space-base) * 0);
+  --guk-space-0-25: calc(var(--guk-space-base) * 0.25);
+  --guk-space-0-5: calc(var(--guk-space-base) * 0.5);
+  --guk-space-1-5: calc(var(--guk-space-base) * 1.5);
+  --guk-space-2: calc(var(--guk-space-base) * 2);
+  --guk-space-2-5: calc(var(--guk-space-base) * 2.5);
+  --guk-space-3: calc(var(--guk-space-base) * 3);
+  --guk-space-3-5: calc(var(--guk-space-base) * 3.5);
+  --guk-space-4: calc(var(--guk-space-base) * 4);
+  --guk-space-5: calc(var(--guk-space-base) * 5);
+  --guk-space-6: calc(var(--guk-space-base) * 6);
+  --guk-space-7: calc(var(--guk-space-base) * 7);
+  --guk-space-8: calc(var(--guk-space-base) * 8);
+  --guk-space-9: calc(var(--guk-space-base) * 9);
+  --guk-space-10: calc(var(--guk-space-base) * 10);
+  --guk-space-11: calc(var(--guk-space-base) * 11);
+  --guk-space-12: calc(var(--guk-space-base) * 12);
+  --guk-space-14: calc(var(--guk-space-base) * 14);
+  --guk-space-16: calc(var(--guk-space-base) * 16);
+  --guk-space-20: calc(var(--guk-space-base) * 20);
+  --guk-space-24: calc(var(--guk-space-base) * 24);
+  --guk-space-28: calc(var(--guk-space-base) * 28);
+  --guk-space-32: calc(var(--guk-space-base) * 32);
+  --guk-space-36: calc(var(--guk-space-base) * 36);
+  --guk-space-40: calc(var(--guk-space-base) * 40);
+  --guk-space-44: calc(var(--guk-space-base) * 44);
+  --guk-space-48: calc(var(--guk-space-base) * 48);
+  --guk-space-52: calc(var(--guk-space-base) * 52);
+  --guk-space-56: calc(var(--guk-space-base) * 56);
+  --guk-space-60: calc(var(--guk-space-base) * 60);
+  --guk-space-64: calc(var(--guk-space-base) * 64);
+  --guk-space-72: calc(var(--guk-space-base) * 72);
+  --guk-space-80: calc(var(--guk-space-base) * 80);
+  --guk-space-96: calc(var(--guk-space-base) * 96);
+}

package/src/theme/tokens/primitives/typography.css

@@ -0,0 +1,42 @@
+:root {
+  /******* Font Weight *******/
+  --guk-font-weight-normal: 500;
+  --guk-font-weight-semibold: 600;
+
+  /******* Font Size *******/
+  --guk-font-size-xs: 0.75rem;
+  --guk-font-size-sm: 0.875rem;
+  --guk-font-size-base: 1rem;
+  --guk-font-size-lg: 1.125rem;
+  --guk-font-size-xl: 1.25rem;
+  --guk-font-size-2xl: 1.5rem;
+  --guk-font-size-3xl: 1.875rem;
+  --guk-font-size-4xl: 2.25rem;
+  --guk-font-size-5xl: 3rem;
+
+  /******* Line Height *******/
+  --guk-line-height-normal: 1.5;
+  --guk-line-height-tight: 1.25;
+  --guk-line-height-relaxed: 1.65;
+
+  /******* Font Family *******/
+  --guk-font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+}
+
+@font-face {
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../../fonts/Manrope-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../../fonts/Manrope-SemiBold.ttf") format("truetype");
+}

package/tailwind.config.js

@@ -0,0 +1,374 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./src/**/*.{jsx,ts,tsx,mdx}', './docs/**/*.{jsx,tsx,mdx}', '.storybook/*.{jsx,tsx}'],
+    theme: {
+        colors: {
+            primary: {
+                50: 'var(--guk-color-primary-50)',
+                100: 'var(--guk-color-primary-100)',
+                200: 'var(--guk-color-primary-200)',
+                300: 'var(--guk-color-primary-300)',
+                400: 'var(--guk-color-primary-400)',
+                500: 'var(--guk-color-primary-500)',
+                600: 'var(--guk-color-primary-600)',
+                700: 'var(--guk-color-primary-700)',
+                800: 'var(--guk-color-primary-800)',
+                900: 'var(--guk-color-primary-900)',
+            },
+            neutral: {
+                0: 'var(--guk-color-neutral-0)',
+                50: 'var(--guk-color-neutral-50)',
+                100: 'var(--guk-color-neutral-100)',
+                200: 'var(--guk-color-neutral-200)',
+                300: 'var(--guk-color-neutral-300)',
+                400: 'var(--guk-color-neutral-400)',
+                500: 'var(--guk-color-neutral-500)',
+                600: 'var(--guk-color-neutral-600)',
+                700: 'var(--guk-color-neutral-700)',
+                800: 'var(--guk-color-neutral-800)',
+                900: 'var(--guk-color-neutral-900)',
+            },
+            info: {
+                100: 'var(--guk-color-info-100)',
+                200: 'var(--guk-color-info-200)',
+                300: 'var(--guk-color-info-300)',
+                400: 'var(--guk-color-info-400)',
+                500: 'var(--guk-color-info-500)',
+                600: 'var(--guk-color-info-600)',
+                700: 'var(--guk-color-info-700)',
+                800: 'var(--guk-color-info-800)',
+                900: 'var(--guk-color-info-900)',
+            },
+            success: {
+                100: 'var(--guk-color-success-100)',
+                200: 'var(--guk-color-success-200)',
+                300: 'var(--guk-color-success-300)',
+                400: 'var(--guk-color-success-400)',
+                500: 'var(--guk-color-success-500)',
+                600: 'var(--guk-color-success-600)',
+                700: 'var(--guk-color-success-700)',
+                800: 'var(--guk-color-success-800)',
+                900: 'var(--guk-color-success-900)',
+            },
+            warning: {
+                100: 'var(--guk-color-warning-100)',
+                200: 'var(--guk-color-warning-200)',
+                300: 'var(--guk-color-warning-300)',
+                400: 'var(--guk-color-warning-400)',
+                500: 'var(--guk-color-warning-500)',
+                600: 'var(--guk-color-warning-600)',
+                700: 'var(--guk-color-warning-700)',
+                800: 'var(--guk-color-warning-800)',
+                900: 'var(--guk-color-warning-900)',
+            },
+            critical: {
+                100: 'var(--guk-color-critical-100)',
+                200: 'var(--guk-color-critical-200)',
+                300: 'var(--guk-color-critical-300)',
+                400: 'var(--guk-color-critical-400)',
+                500: 'var(--guk-color-critical-500)',
+                600: 'var(--guk-color-critical-600)',
+                700: 'var(--guk-color-critical-700)',
+                800: 'var(--guk-color-critical-800)',
+                900: 'var(--guk-color-critical-900)',
+            },
+            transparent: 'var(--guk-color-transparent)',
+        },
+        spacing: {
+            0: 'var(--guk-space-0)', // 0px
+            0.25: 'var(--guk-space-0-25)', // 1px
+            0.5: 'var(--guk-space-0-5)', // 2px
+            1: 'var(--guk-space-base)', // 4px
+            1.5: 'var(--guk-space-1-5)', // 6px
+            2: 'var(--guk-space-2)', // 8px
+            2.5: 'var(--guk-space-2-5)', // 10px
+            3: 'var(--guk-space-3)', // 12px
+            3.5: 'var(--guk-space-3-5)', // 14px
+            4: 'var(--guk-space-4)', // 16px
+            5: 'var(--guk-space-5)', // 20px
+            6: 'var(--guk-space-6)', // 24px
+            7: 'var(--guk-space-7)', // 28px
+            8: 'var(--guk-space-8)', // 32px
+            9: 'var(--guk-space-9)', // 36px
+            10: 'var(--guk-space-10)', // 40px
+            11: 'var(--guk-space-11)', // 44px
+            12: 'var(--guk-space-12)', // 48px
+            14: 'var(--guk-space-14)', // 56px
+            16: 'var(--guk-space-16)', // 64px
+            20: 'var(--guk-space-20)', // 80px
+            24: 'var(--guk-space-24)', // 96px
+            28: 'var(--guk-space-28)', // 112px
+            32: 'var(--guk-space-32)', // 128px
+            36: 'var(--guk-space-36)', // 144px
+            40: 'var(--guk-space-40)', // 160px
+            44: 'var(--guk-space-44)', // 176px
+            48: 'var(--guk-space-48)', // 192px
+            52: 'var(--guk-space-52)', // 208px
+            56: 'var(--guk-space-56)', // 224px
+            60: 'var(--guk-space-60)', // 240px
+            64: 'var(--guk-space-64)', // 256px
+            72: 'var(--guk-space-72)', // 288px
+            80: 'var(--guk-space-80)', // 320px
+            96: 'var(--guk-space-96)', // 384px
+        },
+        ringWidth: {
+            DEFAULT: '3px',
+        },
+        ringColor: {
+            primary: 'var(--guk-color-primary-200)',
+            success: 'var(--guk-color-success-200)',
+            warning: 'var(--guk-color-warning-200)',
+            critical: 'var(--guk-color-critical-200)',
+        },
+        ringOffsetWidth: {
+            DEFAULT: '2px',
+        },
+        borderRadius: {
+            DEFAULT: 'var(--guk-border-rounded)',
+            lg: 'var(--guk-border-rounded-lg)',
+            xl: 'var(--guk-border-rounded-xl)',
+            '2xl': 'var(--guk-border-rounded-2xl)',
+            '3xl': 'var(--guk-border-rounded-3xl)',
+            full: 'var(--guk-border-rounded-full)',
+            none: 'var(--guk-border-rounded-none)',
+        },
+        boxShadow: {
+            'neutral-sm': 'var(--guk-shadow-neutral-sm)',
+            neutral: 'var(--guk-shadow-neutral)',
+            'neutral-md': 'var(--guk-shadow-neutral-md)',
+            'neutral-ld': 'var(--guk-shadow-neutral-lg)',
+            'neutral-xl': 'var(--guk-shadow-neutral-xl)',
+            'neutral-2xl': 'var(--guk-shadow-neutral-2xl)',
+
+            'primary-sm': 'var(--guk-shadow-primary-sm)',
+            primary: 'var(--guk-shadow-primary)',
+            'primary-md': 'var(--guk-shadow-primary-md)',
+            'primary-lg': 'var(--guk-shadow-primary-lg)',
+            'primary-xl': 'var(--guk-shadow-primary-xl)',
+            'primary-2xl': 'var(--guk-shadow-primary-2xl)',
+
+            'success-sm': 'var(--guk-shadow-success-sm)',
+            success: 'var(--guk-shadow-success)',
+            'success-md': 'var(--guk-shadow-success-md)',
+            'success-lg': 'var(--guk-shadow-success-lg)',
+            'success-xl': 'var(--guk-shadow-success-xl)',
+            'success-2xl': 'var(--guk-shadow-success-2xl)',
+
+            'warning-sm': 'var(--guk-shadow-warning-sm)',
+            warning: 'var(--guk-shadow-warning)',
+            'warning-md': 'var(--guk-shadow-warning-md)',
+            'warning-lg': 'var(--guk-shadow-warning-lg)',
+            'warning-xl': 'var(--guk-shadow-warning-xl)',
+            'warning-2xl': 'var(--guk-shadow-warning-2xl)',
+
+            'critical-sm': 'var(--guk-shadow-critical-sm)',
+            critical: 'var(--guk-shadow-critical)',
+            'critical-md': 'var(--guk-shadow-critical-md)',
+            'critical-lg': 'var(--guk-shadow-critical-lg)',
+            'critical-xl': 'var(--guk-shadow-critical-xl)',
+            'critical-2xl': 'var(--guk-shadow-critical-2xl)',
+
+            'info-sm': 'var(--guk-shadow-info-sm)',
+            info: 'var(--guk-shadow-info)',
+            'info-md': 'var(--guk-shadow-info-md)',
+            'info-lg': 'var(--guk-shadow-info-lg)',
+            'info-xl': 'var(--guk-shadow-info-xl)',
+            'info-2xl': 'var(--guk-shadow-info-2xl)',
+
+            none: 'var(--guk-shadow-none)',
+        },
+        screens: {
+            sm: '640px',
+            md: '786px',
+            lg: '1024px',
+            xl: '1280px',
+            '2xl': '1536px',
+        },
+        fontFamily: {
+            sans: [`var(--guk-font-family)`],
+        },
+        fontSize: {
+            xs: 'var(--guk-font-size-xs)',
+            sm: 'var(--guk-font-size-sm)',
+            base: 'var(--guk-font-size-base)',
+            lg: 'var(--guk-font-size-lg)',
+            xl: 'var(--guk-font-size-xl)',
+            '2xl': 'var(--guk-font-size-2xl)',
+            '3xl': 'var(--guk-font-size-3xl)',
+            '4xl': 'var(--guk-font-size-4xl)',
+            '5xl': 'var(--guk-font-size-5xl)',
+        },
+        fontWeight: {
+            normal: 'var(--guk-font-weight-normal)',
+            semibold: 'var(--guk-font-weight-semibold)',
+        },
+        lineHeight: {
+            normal: 'var(--guk-line-height-normal)',
+            tight: 'var(--guk-line-height-tight)',
+            relaxed: 'var(--guk-line-height-relaxed)',
+        },
+        extend: {
+            animation: {
+                shake: 'shake 0.82s cubic-bezier(0.36,0.07,0.19,0.97) both',
+            },
+            keyframes: {
+                shake: {
+                    '10%, 90%': {
+                        transform: 'translate3d(-1px, 0, 0)',
+                    },
+                    '20%, 80%': {
+                        transform: 'translate3d(2px, 0, 0)',
+                    },
+                    '30%, 50%, 70%': {
+                        transform: 'translate3d(-4px, 0, 0)',
+                    },
+                    '40%, 60%': {
+                        transform: 'translate3d(4px, 0, 0)',
+                    },
+                },
+            },
+            backgroundImage: {
+                'modal-overlay': 'linear-gradient(180deg, rgba(245, 247, 250, 0) 0%, #F5F7FA 100%)',
+                'modal-header': 'linear-gradient(180deg, #F5F7FA 0%, rgba(245, 247, 250, 0) 100%)',
+                'modal-footer': 'linear-gradient(180deg, rgba(245, 247, 250, 0) 0%, #F5F7FA 100%)',
+            },
+            typography: ({ theme }) => ({
+                DEFAULT: {
+                    css: {
+                        '--tw-prose-body': theme('colors.neutral.500'),
+                        '--tw-prose-headings': theme('colors.neutral.800'),
+                        '--tw-prose-lead': theme('colors.neutral.600'),
+                        '--tw-prose-links': theme('colors.primary.400'),
+
+                        color: theme('colors.neutral.500'),
+                        maxWidth: 'none',
+
+                        h1: {
+                            marginTop: theme('spacing.2'),
+                            marginBottom: theme('spacing.10'),
+                            fontSize: theme('fontSize.2xl'),
+                            '@screen md': {
+                                fontSize: theme('fontSize.3xl'),
+                            },
+                        },
+                        h2: {
+                            marginTop: theme('spacing.2'),
+                            marginBottom: theme('spacing.8'),
+                            fontSize: theme('fontSize.xl'),
+                            '@screen md': {
+                                fontSize: theme('fontSize.2xl'),
+                            },
+                        },
+                        h3: {
+                            marginTop: theme('spacing.2'),
+                            marginBottom: theme('spacing.6'),
+                            fontSize: theme('fontSize.lg'),
+                            '@screen md': {
+                                fontSize: theme('fontSize.xl'),
+                            },
+                        },
+                        h4: {
+                            marginBottom: theme('spacing.4'),
+                            fontSize: theme('fontSize.base'),
+                            '@screen md': {
+                                fontSize: theme('fontSize.lg'),
+                            },
+                        },
+                        h5: {
+                            marginBottom: theme('spacing.2'),
+                            fontSize: theme('fontSize.sm'),
+                            '@screen md': {
+                                fontSize: theme('fontSize.base'),
+                            },
+                        },
+                        h6: {
+                            marginBottom: theme('spacing.1'),
+                            fontSize: theme('fontSize.xs'),
+                            '@screen md': {
+                                fontSize: theme('fontSize.sm'),
+                            },
+                        },
+                        p: {
+                            fontSize: theme('fontSize.base'),
+                            '@screen md': {
+                                fontSize: theme('fontSize.lg'),
+                            },
+                        },
+                        a: {
+                            color: theme('colors.primary.400'),
+                            textDecoration: 'none',
+                            '&:hover': {
+                                color: theme('colors.primary.600'),
+                            },
+                            '&:active': {
+                                color: theme('colors.primary.800'),
+                            },
+                        },
+                        strong: {
+                            fontSize: theme('fontSize.base'),
+                            '@screen md': {
+                                fontSize: theme('fontSize.lg'),
+                            },
+                            color: theme('colors.neutral.500'),
+                        },
+                        em: {
+                            fontSize: theme('fontSize.base'),
+                            '@screen md': {
+                                fontSize: theme('fontSize.lg'),
+                            },
+                            color: theme('colors.neutral.500'),
+                        },
+                        blockquote: {
+                            borderRadius: theme('borderRadius.lg'),
+                            border: `1px solid ${theme('colors.neutral.200')}`,
+                            backgroundColor: theme('colors.neutral.50'),
+                            padding: theme('spacing.10'),
+                            boxShadow: theme('boxShadow.md'),
+                        },
+                        pre: {
+                            borderRadius: theme('borderRadius.lg'),
+                            backgroundColor: theme('colors.neutral.900'),
+                            color: theme('colors.neutral.50'),
+                        },
+                        code: {
+                            backgroundColor: theme('colors.neutral.900'),
+                            color: theme('colors.neutral.50'),
+                            padding: theme('spacing.1'),
+                            'border-radius': '0.25rem',
+                        },
+                        'code::before': {
+                            content: '""',
+                            'padding-left': '0.25rem',
+                        },
+                        'code::after': {
+                            content: '""',
+                            'padding-right': '0.25rem',
+                        },
+                        img: {
+                            overflow: 'hidden',
+                            borderRadius: theme('borderRadius.xl'),
+                            boxShadow: theme('boxShadow.md'),
+                        },
+                        video: {
+                            overflow: 'hidden',
+                            borderRadius: theme('borderRadius.xl'),
+                            boxShadow: theme('boxShadow.md'),
+                        },
+                        hr: {
+                            marginTop: theme('spacing.10'),
+                            borderColor: theme('colors.neutral.200'),
+                        },
+                    },
+                },
+            }),
+        },
+    },
+    plugins: [
+        require('@tailwindcss/typography'),
+        require('tailwindcss/plugin')(({ addVariant }) => {
+            addVariant('search-cancel', '&::-webkit-search-cancel-button');
+            addVariant('calendar-icon', ['&::-webkit-calendar-picker-indicator', '&::-webkit-inner-spin-button']);
+            addVariant('spin-buttons', ['&::-webkit-inner-spin-button', '&::-webkit-outer-spin-button']);
+        }),
+    ],
+};