@aragon/gov-ui-kit 2.0.1 → 2.2.0

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

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

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

@@ -1,56 +1,56 @@
 @theme {
-  --ring-color-*: initial;
+    --ring-color-*: initial;
 
-  --ring-color-primary: var(--color-primary-200);
-  --ring-color-success: var(--color-success-200);
-  --ring-color-warning: var(--color-warning-200);
-  --ring-color-critical: var(--color-critical-200);
+    --ring-color-primary: var(--color-primary-200);
+    --ring-color-success: var(--color-success-200);
+    --ring-color-warning: var(--color-warning-200);
+    --ring-color-critical: var(--color-critical-200);
 }
 
 @utility focus-ring {
-  &:focus,
-  &:has(:focus) {
-    outline: none;
-  }
-
-  &:focus-visible,
-  &:has(:focus-visible) {
-    @apply ring-3 ring-offset-3;
-  }
+    &:focus,
+    &:has(:focus) {
+        outline: none;
+    }
+
+    &:focus-visible,
+    &:has(:focus-visible) {
+        @apply ring-3 ring-offset-3;
+    }
 }
 
 @utility focus-ring-primary {
-  @apply focus-ring;
+    @apply focus-ring;
 
-  &:focus-visible,
-  &:has(:focus-visible) {
-    @apply ring-primary;
-  }
+    &:focus-visible,
+    &:has(:focus-visible) {
+        @apply ring-primary;
+    }
 }
 
 @utility focus-ring-success {
-  @apply focus-ring;
+    @apply focus-ring;
 
-  &:focus-visible,
-  &:has(:focus-visible) {
-    @apply ring-success;
-  }
+    &:focus-visible,
+    &:has(:focus-visible) {
+        @apply ring-success;
+    }
 }
 
 @utility focus-ring-warning {
-  @apply focus-ring;
+    @apply focus-ring;
 
-  &:focus-visible,
-  &:has(:focus-visible) {
-    @apply ring-warning;
-  }
+    &:focus-visible,
+    &:has(:focus-visible) {
+        @apply ring-warning;
+    }
 }
 
 @utility focus-ring-critical {
-  @apply focus-ring;
+    @apply focus-ring;
 
-  &:focus-visible,
-  &:has(:focus-visible) {
-    @apply ring-critical;
-  }
+    &:focus-visible,
+    &:has(:focus-visible) {
+        @apply ring-critical;
+    }
 }

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

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

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

@@ -1,3 +1,3 @@
 @theme {
-  --spacing: 4px;
+    --spacing: 4px;
 }

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

@@ -1,40 +1,40 @@
 @theme {
-  --font-*: initial;
+    --font-*: initial;
 
-  --font-sans:
-    "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-sans:
+        "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-weight-normal: 400;
-  --font-weight-semibold: 600;
+    --font-weight-normal: 400;
+    --font-weight-semibold: 600;
 
-  --text-xs: 0.75rem;
-  --text-sm: 0.875rem;
-  --text-base: 1rem;
-  --text-lg: 1.125rem;
-  --text-xl: 1.25rem;
-  --text-2xl: 1.5rem;
-  --text-3xl: 1.875rem;
-  --text-4xl: 2.25rem;
-  --text-5xl: 3rem;
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 1.875rem;
+    --text-4xl: 2.25rem;
+    --text-5xl: 3rem;
 
-  --leading-tight: 1.25;
-  --leading-normal: 1.5;
-  --leading-relaxed: 1.65;
+    --leading-tight: 1.25;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.65;
 }
 
 @font-face {
-  font-family: "Manrope";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("../../fonts/Manrope-Regular.ttf") format("truetype");
+    font-family: "Manrope";
+    font-style: normal;
+    font-weight: 400;
+    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");
+    font-family: "Manrope";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url("../../fonts/Manrope-SemiBold.ttf") format("truetype");
 }

package/src/theme/utils/animations.css

@@ -1,23 +1,23 @@
 @theme {
-  --animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    --animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 
-  @keyframes shake {
-    10%,
-    90% {
-      transform: translate3d(-1px, 0, 0);
+    @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);
+        }
     }
-    20%,
-    80% {
-      transform: translate3d(2px, 0, 0);
-    }
-    30%,
-    50%,
-    70% {
-      transform: translate3d(-4px, 0, 0);
-    }
-    40%,
-    60% {
-      transform: translate3d(4px, 0, 0);
-    }
-  }
 }

package/src/theme/utils/prose.css

@@ -1,72 +1,72 @@
 @plugin "@tailwindcss/typography";
 
 @utility prose {
-  h1 {
-    @apply mt-2 mb-10 text-2xl md:text-3xl;
-  }
-
-  h2 {
-    @apply mt-2 mb-8 text-xl md:text-2xl;
-  }
-
-  h3 {
-    @apply mt-2 mb-6 text-lg md:text-xl;
-  }
-
-  h4 {
-    @apply mt-0 mb-4 text-base md:text-lg;
-  }
-
-  h5 {
-    @apply mt-0 mb-2 text-sm md:text-base;
-  }
-
-  h6 {
-    @apply mt-0 mb-1 text-xs md:text-sm;
-  }
-
-  p {
-    @apply mt-0 mb-0 text-base md:text-lg;
-  }
-
-  a {
-    @apply text-primary-400 hover:text-primary-600 active:text-primary-800 no-underline;
-  }
-
-  strong {
-    @apply text-base text-neutral-500 md:text-lg;
-  }
-
-  em {
-    @apply text-base text-neutral-500 md:text-lg;
-  }
-
-  blockquote {
-    @apply shadow-neutral-md rounded-lg border border-neutral-200 bg-neutral-50 p-10;
-  }
-
-  pre {
-    @apply rounded-lg bg-neutral-900 text-neutral-50;
-  }
-
-  code {
-    @apply rounded-md bg-neutral-900 p-1 text-neutral-50 before:pl-1 before:content-[''] after:pr-1 after:content-[''];
-  }
-
-  img,
-  video {
-    @apply shadow-neutral-md overflow-hidden rounded-xl;
-  }
-
-  hr {
-    @apply mt-10 border border-neutral-200;
-  }
+    h1 {
+        @apply mt-2 mb-10 text-2xl md:text-3xl;
+    }
+
+    h2 {
+        @apply mt-2 mb-8 text-xl md:text-2xl;
+    }
+
+    h3 {
+        @apply mt-2 mb-6 text-lg md:text-xl;
+    }
+
+    h4 {
+        @apply mt-0 mb-4 text-base md:text-lg;
+    }
+
+    h5 {
+        @apply mt-0 mb-2 text-sm md:text-base;
+    }
+
+    h6 {
+        @apply mt-0 mb-1 text-xs md:text-sm;
+    }
+
+    p {
+        @apply mt-0 mb-0 text-sm md:text-base;
+    }
+
+    a {
+        @apply text-primary-400 hover:text-primary-600 active:text-primary-800 no-underline;
+    }
+
+    strong {
+        @apply text-sm text-neutral-500 md:text-base;
+    }
+
+    em {
+        @apply text-sm text-neutral-500 md:text-base;
+    }
+
+    blockquote {
+        @apply shadow-neutral-md rounded-lg border border-neutral-200 bg-neutral-50 p-10;
+    }
+
+    pre {
+        @apply rounded-lg bg-neutral-900 text-neutral-50;
+    }
+
+    code {
+        @apply rounded-md bg-neutral-900 p-1 text-neutral-50 before:pl-1 before:content-[''] after:pr-1 after:content-[''];
+    }
+
+    img,
+    video {
+        @apply shadow-neutral-md overflow-hidden rounded-xl;
+    }
+
+    hr {
+        @apply mt-10 border border-neutral-200;
+    }
 }
 
 @utility prose-neutral {
-  --tw-prose-body: var(--color-neutral-500);
-  --tw-prose-headings: var(--color-neutral-800);
-  --tw-prose-lead: var(--color-neutral-600);
-  --tw-prose-links: var(--color-primary-400);
-  --tw-prose-quotes: var(--color-neutral-800);
+    --tw-prose-body: var(--color-neutral-500);
+    --tw-prose-headings: var(--color-neutral-800);
+    --tw-prose-lead: var(--color-neutral-600);
+    --tw-prose-links: var(--color-primary-400);
+    --tw-prose-quotes: var(--color-neutral-800);
 }