@graphprotocol/gds-css 0.0.1

package/styles/theme.css

@@ -0,0 +1,420 @@
+@theme static {
+  /* ================================================================= *
+   * Colors (complete override - no Tailwind defaults)                 *
+   * ================================================================= */
+
+  --color-*: initial;
+
+  /* --------------------------------------- *
+   * Primitive color tokens                  *
+   * --------------------------------------- */
+
+  /* Core colors */
+  --color-black: black;
+  --color-white: white;
+  --color-transparent: transparent;
+  --color-current: currentcolor;
+
+  /* Space (dark gray) scale */
+  --color-space-100: #f3f3f4;
+  --color-space-200: #dbdbdb;
+  --color-space-300: #c5c4c6;
+  --color-space-400: #b6b5b9;
+  --color-space-500: #a7a5ae;
+  --color-space-600: #918f9d;
+  --color-space-700: #848192;
+  --color-space-800: #757285;
+  --color-space-900: #666378;
+  --color-space-1000: #59556c;
+  --color-space-1100: #49465d;
+  --color-space-1200: #3a374d;
+  --color-space-1300: #2d2a3f;
+  --color-space-1400: #242236;
+  --color-space-1500: #1d1a30;
+  --color-space-1600: #16132a;
+  --color-space-1700: #0c0a1d;
+  --color-space-1800: #080618;
+
+  /* Foam (light gray) scale */
+  --color-foam-100: #fafafa;
+  --color-foam-200: #f3f3f4;
+  --color-foam-300: #ececec;
+  --color-foam-400: #e3e3e3;
+  --color-foam-500: #cacace;
+  --color-foam-600: #bfbfc5;
+  --color-foam-700: #c0c0c4;
+  --color-foam-800: #afafb6;
+  --color-foam-900: #9d9da4;
+  --color-foam-1000: #7d7d87;
+
+  /* Brand (purple) scale */
+  --color-brand-100: #e2dbff;
+  --color-brand-200: #c5b7ff;
+  --color-brand-300: #a994ff;
+  --color-brand-400: #8c70ff;
+  --color-brand-500: #6f4cff;
+  --color-brand-600: #6545e8;
+  --color-brand-700: #5138ba;
+  --color-brand-800: #3d2b8c;
+  --color-brand-900: #332476;
+  --color-brand-1000: #281c5c;
+  --color-brand-1100: #19123a;
+  --color-brand-1200: #140f2f;
+
+  /* Galactic (blue) scale */
+  --color-galactic-100: #dbecff;
+  --color-galactic-200: #b7d8ff;
+  --color-galactic-300: #94c5ff;
+  --color-galactic-400: #70b1ff;
+  --color-galactic-500: #4c9eff;
+  --color-galactic-600: #3f80d1;
+  --color-galactic-700: #3262a3;
+  --color-galactic-800: #254576;
+  --color-galactic-900: #182748;
+  --color-galactic-1000: #0f192e;
+  --color-galactic-1100: #0d1526;
+
+  /* Starfield (green) scale */
+  --color-starfield-100: #dbf4e6;
+  --color-starfield-200: #b7eacd;
+  --color-starfield-300: #93dfb3;
+  --color-starfield-400: #6fd59a;
+  --color-starfield-500: #4bca81;
+  --color-starfield-600: #3ea36c;
+  --color-starfield-700: #317d58;
+  --color-starfield-800: #255643;
+  --color-starfield-900: #18302f;
+  --color-starfield-1000: #112221;
+  --color-starfield-1100: #0e1b1b;
+
+  /* Solar (yellow) scale */
+  --color-solar-100: #ffeecc;
+  --color-solar-200: #ffdc99;
+  --color-solar-300: #ffcb67;
+  --color-solar-400: #ffb934;
+  --color-solar-500: #ffa801;
+  --color-solar-600: #ce8806;
+  --color-solar-700: #9d680b;
+  --color-solar-800: #6d4910;
+  --color-solar-900: #3c2915;
+  --color-solar-1000: #271b1b;
+  --color-solar-1100: #1d161a;
+
+  /* Sonja (red/pink) scale */
+  --color-sonja-100: #fbdbe2;
+  --color-sonja-200: #f8b7c5;
+  --color-sonja-300: #f492a7;
+  --color-sonja-400: #f16e8a;
+  --color-sonja-500: #ed4a6d;
+  --color-sonja-600: #c03d5c;
+  --color-sonja-700: #93304c;
+  --color-sonja-800: #65233b;
+  --color-sonja-900: #38162b;
+  --color-sonja-1000: #250e25;
+  --color-sonja-1100: #180b1d;
+
+  /* --------------------------------------- *
+   * Semantic color tokens                   *
+   * --------------------------------------- */
+
+  /* Foreground colors */
+  --text-color-default: light-dark(var(--color-space-1800), var(--color-white));
+  --text-color-subtle: light-dark(var(--color-space-600), var(--color-foam-1000));
+  --text-color-muted: light-dark(var(--color-space-1000), var(--color-foam-800));
+  --text-color-elevated: light-dark(var(--color-space-1400), var(--color-foam-600));
+  --text-color-strong: light-dark(var(--color-space-1600), var(--color-foam-200));
+  --text-color-inverse-default: light-dark(var(--color-white), var(--color-space-1800));
+  --text-color-inverse-subtle: light-dark(var(--color-foam-1000), var(--color-space-600));
+  --text-color-inverse-muted: light-dark(var(--color-foam-800), var(--color-space-1000));
+  --text-color-inverse-elevated: light-dark(var(--color-foam-600), var(--color-space-1400));
+  --text-color-inverse-strong: light-dark(var(--color-foam-200), var(--color-space-1600));
+  /* TODO: Turn these into component tokens? */
+  --text-color-link-idle: light-dark(var(--color-galactic-700), var(--color-galactic-500));
+  --text-color-link-hover: light-dark(var(--color-galactic-800), var(--color-galactic-400));
+  --text-color-link-active: light-dark(var(--color-galactic-700), var(--color-galactic-500));
+  --text-color-link-disabled: light-dark(var(--color-foam-800), var(--color-space-800));
+  --text-color-code: light-dark(var(--color-solar-900), var(--color-solar-400));
+  --text-color-code-added: light-dark(var(--color-starfield-800), var(--color-starfield-300));
+  --text-color-code-deleted: light-dark(var(--color-sonja-800), var(--color-sonja-200));
+
+  /* Background colors */
+  --background-color-canvas: light-dark(var(--color-white), var(--color-space-1800));
+  --background-color-subtle: light-dark(var(--color-foam-100), var(--color-space-1700));
+  --background-color-muted: light-dark(var(--color-foam-200), var(--color-space-1600));
+  --background-color-default: light-dark(var(--color-foam-300), var(--color-space-1500));
+  --background-color-elevated: light-dark(var(--color-foam-400), var(--color-space-1400));
+  --background-color-strong: light-dark(var(--color-foam-500), var(--color-space-1300));
+
+  --background-color-brand-subtle: light-dark(var(--color-brand-300), var(--color-brand-800));
+  --background-color-brand-muted: light-dark(var(--color-brand-400), var(--color-brand-700));
+  --background-color-brand-default: var(--color-brand-500);
+  --background-color-brand-elevated: light-dark(var(--color-brand-700), var(--color-brand-400));
+  --background-color-brand-strong: light-dark(var(--color-brand-800), var(--color-brand-300));
+
+  --background-color-inverse-canvas: light-dark(var(--color-space-1800), var(--color-space-100));
+  --background-color-inverse-subtle: light-dark(var(--color-space-1700), var(--color-space-200));
+  --background-color-inverse-muted: light-dark(var(--color-space-1600), var(--color-space-300));
+  --background-color-inverse-default: light-dark(var(--color-space-1500), var(--color-space-400));
+  --background-color-inverse-elevated: light-dark(var(--color-space-1400), var(--color-space-500));
+  --background-color-inverse-strong: light-dark(var(--color-space-1300), var(--color-space-600));
+
+  --background-color-code: light-dark(var(--color-solar-100), var(--color-solar-1000));
+  --background-color-code-added: light-dark(var(--color-starfield-100), var(--color-starfield-1000));
+  --background-color-code-deleted: light-dark(var(--color-sonja-100), var(--color-sonja-1000));
+  --background-color-code-highlighted: color-mix(in oklab, var(--color-solar-500) 20%, transparent);
+
+  --background-color-backdrop: color-mix(in oklab, var(--color-space-1800) 50%, transparent);
+
+  /* Border colors */
+  --border-color-focus: var(--color-brand-500);
+  --border-color-subtle: light-dark(var(--color-foam-300), var(--color-space-1500));
+  --border-color-muted: light-dark(var(--color-foam-400), var(--color-space-1400));
+  --border-color-default: light-dark(var(--color-foam-500), var(--color-space-1300));
+  --border-color-elevated: light-dark(var(--color-foam-800), var(--color-space-1200));
+  --border-color-strong: light-dark(var(--color-foam-1000), var(--color-space-1100));
+
+  --border-color-brand-subtle: light-dark(var(--color-brand-300), var(--color-brand-800));
+  --border-color-brand-muted: light-dark(var(--color-brand-400), var(--color-brand-700));
+  --border-color-brand-default: var(--color-brand-500);
+  --border-color-brand-elevated: light-dark(var(--color-brand-700), var(--color-brand-400));
+  --border-color-brand-strong: light-dark(var(--color-brand-800), var(--color-brand-300));
+
+  --border-color-code: light-dark(var(--color-solar-200), var(--color-solar-900));
+
+  /* Status colors */
+  --color-status-info-subtle: light-dark(var(--color-galactic-300), var(--color-galactic-800));
+  --color-status-info-muted: light-dark(var(--color-galactic-400), var(--color-galactic-700));
+  --color-status-info-default: var(--color-galactic-500);
+  --color-status-info-elevated: light-dark(var(--color-galactic-700), var(--color-galactic-400));
+  --color-status-info-strong: light-dark(var(--color-galactic-800), var(--color-galactic-300));
+
+  --color-status-warning-subtle: light-dark(var(--color-solar-300), var(--color-solar-800));
+  --color-status-warning-muted: light-dark(var(--color-solar-400), var(--color-solar-700));
+  --color-status-warning-default: var(--color-solar-500);
+  --color-status-warning-elevated: light-dark(var(--color-solar-700), var(--color-solar-400));
+  --color-status-warning-strong: light-dark(var(--color-solar-800), var(--color-solar-300));
+
+  --color-status-error-subtle: light-dark(var(--color-sonja-300), var(--color-sonja-800));
+  --color-status-error-muted: light-dark(var(--color-sonja-400), var(--color-sonja-700));
+  --color-status-error-default: var(--color-sonja-500);
+  --color-status-error-elevated: light-dark(var(--color-sonja-700), var(--color-sonja-400));
+  --color-status-error-strong: light-dark(var(--color-sonja-800), var(--color-sonja-300));
+
+  --color-status-success-subtle: light-dark(var(--color-starfield-300), var(--color-starfield-800));
+  --color-status-success-muted: light-dark(var(--color-starfield-400), var(--color-starfield-700));
+  --color-status-success-default: var(--color-starfield-500);
+  --color-status-success-elevated: light-dark(var(--color-starfield-700), var(--color-starfield-400));
+  --color-status-success-strong: light-dark(var(--color-starfield-800), var(--color-starfield-300));
+
+  /* ================================================================= *
+   * Component color tokens (semantic)                                 *
+   * ================================================================= */
+
+  /* Button fg colors */
+  --text-color-button-primary: var(--color-white);
+  --text-color-button-secondary: var(--text-color-default);
+  --text-color-button-tertiary: var(--text-color-default);
+  --text-color-button-inverse: var(--text-color-inverse-default);
+  --text-color-button-danger: var(--color-white);
+  --text-color-button-naked-idle: var(--text-color-muted);
+  --text-color-button-naked-hover: var(--text-color-default);
+  --text-color-button-naked-active: var(--text-color-muted);
+  --text-color-button-naked-toggled-idle: var(--text-color-default);
+  --text-color-button-naked-toggled-hover: var(--text-color-muted);
+  --text-color-button-naked-toggled-active: var(--text-color-default);
+
+  /* Button bg colors */
+  --background-color-button-primary-idle: var(--background-color-brand-default);
+  --background-color-button-primary-hover: var(--background-color-brand-elevated);
+  --background-color-button-primary-active: var(--background-color-brand-default);
+  --background-color-button-primary-disabled: var(--background-color-brand-subtle);
+
+  --background-color-button-secondary-idle: var(--background-color-default);
+  --background-color-button-secondary-hover: var(--background-color-elevated);
+  --background-color-button-secondary-active: var(--background-color-muted);
+  --background-color-button-secondary-disabled: var(--background-color-default);
+  --background-color-button-secondary-toggled-idle: light-dark(var(--color-brand-100), var(--color-brand-1100));
+  --background-color-button-secondary-toggled-hover: light-dark(var(--color-brand-200), var(--color-brand-1000));
+  --background-color-button-secondary-toggled-active: light-dark(var(--color-brand-100), var(--color-brand-1200));
+  --background-color-button-secondary-toggled-disabled: light-dark(var(--color-brand-100), var(--color-brand-1100));
+
+  --background-color-button-tertiary-idle: var(--color-transparent);
+  --background-color-button-tertiary-hover: var(--background-color-elevated);
+  --background-color-button-tertiary-active: var(--background-color-muted);
+  --background-color-button-tertiary-disabled: var(--color-transparent);
+  --background-color-button-tertiary-toggled-idle: var(--background-color-default);
+  --background-color-button-tertiary-toggled-hover: var(--background-color-strong);
+  --background-color-button-tertiary-toggled-active: var(--background-color-muted);
+  --background-color-button-tertiary-toggled-disabled: var(--background-color-default);
+
+  --background-color-button-inverse-idle: var(--background-color-inverse-canvas);
+  --background-color-button-inverse-hover: var(--background-color-inverse-subtle);
+  --background-color-button-inverse-active: var(--background-color-inverse-elevated);
+  --background-color-button-inverse-disabled: var(--background-color-inverse-default);
+
+  --background-color-button-danger-idle: var(--color-status-error-default);
+  --background-color-button-danger-hover: var(--color-status-error-elevated);
+  --background-color-button-danger-active: var(--color-status-error-muted);
+  --background-color-button-danger-disabled: var(--color-status-error-subtle);
+
+  /* Button border colors */
+  --border-color-button-primary-idle: var(--border-color-brand-elevated);
+  --border-color-button-primary-hover: var(--border-color-brand-strong);
+  --border-color-button-primary-active: var(--border-color-brand-elevated);
+  --border-color-button-primary-disabled: var(--color-transparent);
+
+  --border-color-button-secondary-idle: var(--border-color-default);
+  --border-color-button-secondary-hover: var(--border-color-elevated);
+  --border-color-button-secondary-active: var(--border-color-muted);
+  --border-color-button-secondary-disabled: var(--color-transparent);
+  --border-color-button-secondary-toggled-idle: var(--border-color-brand-default);
+  --border-color-button-secondary-toggled-hover: var(--border-color-brand-muted);
+  --border-color-button-secondary-toggled-active: var(--border-color-brand-subtle);
+  --border-color-button-secondary-toggled-disabled: var(--color-transparent);
+
+  --border-color-button-tertiary-idle: var(--border-color-default);
+  --border-color-button-tertiary-hover: var(--border-color-elevated);
+  --border-color-button-tertiary-active: var(--border-color-muted);
+  --border-color-button-tertiary-disabled: var(--border-color-muted);
+  --border-color-button-tertiary-toggled-idle: var(--border-color-default);
+  --border-color-button-tertiary-toggled-hover: var(--border-color-strong);
+  --border-color-button-tertiary-toggled-active: var(--border-color-muted);
+  --border-color-button-tertiary-toggled-disabled: var(--color-transparent);
+
+  --border-color-button-danger-idle: var(--color-status-error-elevated);
+  --border-color-button-danger-hover: var(--color-status-error-strong);
+  --border-color-button-danger-active: var(--color-status-error-default);
+  --border-color-button-danger-disabled: var(--color-transparent);
+
+  /* Form fg colors */
+  --text-color-form-text: var(--text-color-default);
+  --text-color-form-placeholder: var(--text-color-muted);
+  --text-color-form-disabled: var(--text-color-subtle);
+  --text-color-form-helper: var(--text-color-default);
+  --text-color-form-checked: var(--color-white);
+
+  /* Form bg colors */
+  --background-color-form-idle: var(--background-color-subtle);
+  --background-color-form-hover: var(--background-color-muted);
+  --background-color-form-focus: var(--background-color-subtle);
+  --background-color-form-disabled: var(--background-color-muted);
+  --background-color-form-checked-idle: var(--background-color-brand-default);
+  --background-color-form-checked-hover: var(--background-color-brand-elevated);
+  --background-color-form-checked-active: light-dark(var(--color-brand-300), var(--color-brand-1100));
+  --background-color-form-checked-disabled: light-dark(var(--color-brand-200), var(--color-brand-1000));
+
+  /* Form handle colors */
+  --background-color-form-handle-default: light-dark(var(--color-space-1000), var(--color-white));
+  --background-color-form-handle-checked: var(--color-white);
+  --background-color-form-handle-disabled: light-dark(var(--color-foam-600), var(--color-space-400));
+  --background-color-form-handle-checked-disabled: light-dark(var(--color-brand-400), var(--color-space-400));
+
+  /* Form border colors */
+  --border-color-form-idle: var(--border-color-default);
+  --border-color-form-hover: var(--border-color-elevated);
+  --border-color-form-active: var(--border-color-default);
+  --border-color-form-disabled: var(--border-color-subtle);
+  --border-color-form-checked-idle: var(--color-transparent);
+  --border-color-form-checked-hover: var(--color-transparent);
+  --border-color-form-checked-active: var(--border-color-brand-muted);
+  --border-color-form-checked-disabled: var(--color-transparent);
+
+  --border-color-form-status-warning-idle: var(--color-status-warning-subtle);
+  --border-color-form-status-warning-hover: var(--color-status-warning-muted);
+  --border-color-form-status-warning-focus: var(--color-status-warning-muted);
+  --border-color-form-status-error-idle: var(--color-status-error-subtle);
+  --border-color-form-status-error-hover: var(--color-status-error-muted);
+  --border-color-form-status-error-focus: var(--color-status-error-muted);
+  --border-color-form-status-success-idle: var(--color-status-success-subtle);
+  --border-color-form-status-success-hover: var(--color-status-success-muted);
+  --border-color-form-status-success-focus: var(--color-status-success-muted);
+
+  /* Card bg colors */
+  --background-color-card-primary-idle: light-dark(var(--color-brand-100), var(--color-brand-1200));
+  --background-color-card-primary-hover: light-dark(var(--color-brand-200), var(--color-brand-1100));
+  --background-color-card-primary-active: light-dark(var(--color-brand-100), var(--color-brand-1200));
+  --background-color-card-primary-disabled: light-dark(var(--color-brand-100), var(--color-brand-1200));
+
+  --background-color-card-secondary-idle: var(--background-color-muted);
+  --background-color-card-secondary-hover: var(--background-color-default);
+  --background-color-card-secondary-active: var(--background-color-muted);
+  --background-color-card-secondary-disabled: var(--background-color-muted);
+
+  --background-color-card-tertiary-idle: var(--color-transparent);
+  --background-color-card-tertiary-hover: var(--background-color-subtle);
+  --background-color-card-tertiary-active: var(--background-color-muted);
+  --background-color-card-tertiary-disabled: var(--color-transparent);
+
+  /* Card border colors */
+  --border-color-card-primary-idle: light-dark(var(--color-brand-300), var(--color-brand-800));
+  --border-color-card-primary-hover: light-dark(var(--color-brand-400), var(--color-brand-700));
+  --border-color-card-primary-active: light-dark(var(--color-brand-300), var(--color-brand-800));
+  --border-color-card-primary-disabled: var(--color-transparent);
+
+  --border-color-card-secondary-idle: var(--border-color-muted);
+  --border-color-card-secondary-hover: var(--border-color-elevated);
+  --border-color-card-secondary-active: var(--border-color-muted);
+  --border-color-card-secondary-disabled: var(--color-transparent);
+
+  --border-color-card-tertiary-idle: var(--border-color-default);
+  --border-color-card-tertiary-hover: var(--border-color-elevated);
+  --border-color-card-tertiary-active: var(--border-color-muted);
+  --border-color-card-tertiary-disabled: var(--border-color-muted);
+
+  /* ================================================================= *
+   * Border radius (complete override)                                 *
+   * ================================================================= */
+
+  --radius-*: initial;
+  --radius-none: 0;
+  --radius-2: 0.125rem;
+  --radius-4: 0.25rem;
+  --radius-6: 0.375rem;
+  --radius-8: 0.5rem;
+  --radius-10: 0.625rem;
+  --radius-12: 0.75rem;
+  --radius-16: 1rem;
+  --radius-full: 9999px; /* `calc(infinity * 1px)` is more technically correct, but it breaks some Motion animations (e.g. `SegmentedControl`) */
+
+  /* ================================================================= *
+   * Extend Tailwind defaults                                          *
+   * ================================================================= */
+
+  /* Breakpoints */
+  --breakpoint-2xs: 24rem; /* 384px */
+  --breakpoint-xs: 32rem; /* 512px */
+  --breakpoint-sm: 40rem; /* 640px */
+  --breakpoint-md: 48rem; /* 768px */
+  --breakpoint-lg: 64rem; /* 1024px */
+  --breakpoint-xl: 80rem; /* 1280px */
+  --breakpoint-2xl: 96rem; /* 1536px */
+  /* sm, md, lg, xl, 2xl are Tailwind defaults, but they are listed for reference purposes */
+
+  /* Spacings */
+  --spacing-em: 1em;
+  --spacing-lh: 1lh;
+  --gap-addon: min(0.25em, --spacing(1));
+
+  /* Opacities */
+  --opacity-disabled: 60%;
+
+  /* Easing functions */
+  --ease-linear: cubic-bezier(0, 0, 1, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.4, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.4, 1);
+
+  /* Default values */
+  --default-transition-duration: 150ms;
+  --default-transition-timing-function: var(--ease-out);
+  --default-animation-duration: 1s;
+  --default-animation-timing-function: var(--ease-out);
+
+  /* Misc. */
+  --content-nbsp: '\00a0';
+}
+
+/* Some theme values cannot be variables */
+@theme inline {
+  --radius-inherit: inherit;
+}

package/styles/typography.css

@@ -0,0 +1,198 @@
+/* Completely override Tailwind's default typography tokens */
+@theme static {
+  /* Font families */
+  --font-*: initial;
+  --font-sans: 'EuclidCircular', sans-serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+
+  /* Font weights */
+  --font-weight-*: initial;
+  --font-weight-lighter: 300;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-bolder: 500;
+
+  /* Font sizes and their default line heights */
+  --text-*: initial;
+  --text-128: 8rem;
+  --text-128--line-height: 8rem; /* 1 */
+  --text-128--line-height--loose: 10rem;
+  --text-96: 6rem;
+  --text-96--line-height: 6rem; /* 1 */
+  --text-96--line-height--loose: 8rem;
+  --text-64: 4rem;
+  --text-64--line-height: 4.5rem; /* 1.125 */
+  --text-64--line-height--loose: 5rem;
+  --text-56: 3.5rem;
+  --text-56--line-height: 4rem; /* 1.143 */
+  --text-56--line-height--loose: 4.5rem;
+  --text-48: 3rem;
+  --text-48--line-height: 3.5rem; /* 1.167 */
+  --text-48--line-height--loose: 4rem;
+  --text-40: 2.5rem;
+  --text-40--line-height: 3rem; /* 1.2 */
+  --text-40--line-height--loose: 3.5rem;
+  --text-32: 2rem;
+  --text-32--line-height: 2.5rem; /* 1.25 */
+  --text-32--line-height--loose: 2.75rem; /* 1.375 */
+  --text-24: 1.5rem;
+  --text-24--line-height: 2rem; /* 1.333 */
+  --text-24--line-height--loose: 2.25rem; /* 1.5 */
+  --text-20: 1.25rem;
+  --text-20--line-height: 1.75rem; /* 1.4 */
+  --text-20--line-height--loose: 2rem; /* 1.6 */
+  --text-18: 1.125rem;
+  --text-18--line-height: 1.5rem; /* 1.333 */
+  --text-18--line-height--loose: 1.75rem; /* 1.556 */
+  --text-16: 1rem;
+  --text-16--line-height: 1.5rem; /* 1.5 */
+  --text-16--line-height--loose: 1.75rem; /* 1.75 */
+  --text-14: 0.875rem;
+  --text-14--line-height: 1.25rem; /* 1.429 */
+  --text-14--line-height--loose: 1.5rem; /* 1.714 */
+  --text-12: 0.75rem;
+  --text-12--line-height: 1rem; /* 1.333 */
+  --text-12--line-height--loose: 1.25rem; /* 1.667 */
+  --text-10: 0.625rem;
+  --text-10--line-height: 0.875rem; /* 1.4 */
+  --text-10--line-height--loose: 1rem; /* 1.6 */
+
+  /* Line heights */
+  --leading-*: initial;
+  --leading-none: 1;
+  --leading-normal: var(--text-16--line-height);
+  --leading-loose: var(--text-16--line-height--loose);
+
+  /* Letter spacings */
+  --tracking-*: initial;
+  --tracking-normal: 0;
+  --tracking-caption: 0.15em;
+}
+
+/* Redefine the `normal` and `loose` leadings for every font size utility */
+@utility text-* {
+  --gds-font-size: --value(--text-*, [length]);
+  --leading-normal: --value(--text-* --line-height);
+  --leading-loose: --value(--text-* --line-height--loose);
+  /**
+   * Ensure changing the font size without specifying a leading uses the last specified one.
+   * This makes `prose text-16` work without `text-16` overriding the `loose` leading from `prose`.
+   */
+  --tw-leading: --modifier(--leading-*);
+}
+
+/* Redefine the `lighter` and `bolder` font weights for every font weight utility */
+@utility font-* {
+  --gds-font-weight: --value(--font-weight-*, [integer], [weight]);
+  @container style(--gds-font-weight: 300) {
+    --font-weight-lighter: 300;
+    --font-weight-bolder: 400;
+  }
+  @container style(--gds-font-weight: 400) {
+    --font-weight-lighter: 300;
+    --font-weight-bolder: 500;
+  }
+  @container style(--gds-font-weight: 500) {
+    --font-weight-lighter: 400;
+    --font-weight-bolder: 600;
+  }
+  @container style(--gds-font-weight: 600) {
+    --font-weight-lighter: 500;
+    --font-weight-bolder: 700;
+  }
+  @container style(--gds-font-weight: 700) {
+    --font-weight-lighter: 600;
+    --font-weight-bolder: 700;
+  }
+}
+
+/**
+ * Extend the default `italic` and `not-italic` utilities to work around Safari rendering issues.
+ * Safari needs manual `slnt` and `ital` axis settings to properly render a variable font in italic.
+ * See https://bugs.webkit.org/show_bug.cgi?id=209565
+ */
+@utility italic {
+  font-variation-settings:
+    'slnt' -11,
+    'ital' 1;
+}
+@utility not-italic {
+  font-variation-settings: initial;
+}
+
+/* Caption text style */
+@utility text-caption {
+  @apply tracking-caption uppercase;
+}
+
+/* Add a `prose` class to style long-form content with basic spacing and typography defaults */
+@layer base.components {
+  .prose {
+    @apply text-18/loose text-muted;
+
+    & :is(h1, h2, h3, h4, h5, h6, b, strong) {
+      @apply font-bolder text-default;
+    }
+
+    & h1 {
+      @apply text-40/loose;
+    }
+
+    & h2 {
+      @apply text-32/loose;
+    }
+
+    & h3 {
+      @apply text-24/loose;
+    }
+
+    & h4 {
+      @apply text-20/loose;
+    }
+
+    & :is(ul, ol) {
+      @apply ps-6;
+    }
+
+    & ul {
+      @apply list-disc;
+    }
+
+    & ol {
+      @apply list-decimal;
+    }
+
+    & li {
+      @apply ps-1;
+    }
+
+    & li + li {
+      @apply mt-2;
+    }
+
+    & > * + * {
+      @apply mt-6;
+
+      &:is(h1, h2) {
+        @apply mt-12;
+      }
+
+      &:is(h3) {
+        @apply mt-10;
+      }
+
+      &:is(h4, h5, h6) {
+        @apply mt-8;
+      }
+    }
+
+    & > :is(h2, h3, h4, h5, h6) + * {
+      @apply mt-4;
+    }
+  }
+}