diff --git a/web/src/app.css b/web/src/app.css index 67d4ab2e..f8f75f3e 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -18,6 +18,7 @@ --color-background-subtle: #f9fafb; --color-background-inset: #f3f4f6; --color-background-muted: #e5e7eb; + --color-background-strong: #d1d5db; --color-background-canvas: #f3f4f6; --color-background-highlight: #fef08a; --color-background-success-subtle: #dcfce7; @@ -137,17 +138,6 @@ --color-alpha-dark-95: color-mix(in srgb, var(--color-foreground-default) 95%, transparent); } -/* ============================================================================= - Type scale — synced from Figma "Font Styles" (node 1:186) - - These are `typography-*` utilities rather than `--text-*` theme tokens on - purpose: named `text-heading-3` & co. they collided with `text-` in - tailwind-merge, which classes them as colours and drops the size as soon as a - colour follows. Declare `font-size` first in each block — Tailwind sorts a - custom utility by its first property, and that is what keeps an explicit - `font-medium`/`font-bold` winning over the weight baked in here. - ============================================================================= */ - @utility typography-heading-0 { font-size: 5rem; line-height: 5rem; @@ -200,17 +190,20 @@ } @utility typography-monospace-large { - font-size: 1rem; + @apply font-mono; + font-size: 1rem; line-height: 1.5rem; } @utility typography-monospace-regular { - font-size: 0.875rem; + @apply font-mono; + font-size: 0.875rem; line-height: 1.375rem; } @utility typography-monospace-small { - font-size: 0.75rem; + @apply font-mono; + font-size: 0.75rem; line-height: 1.25rem; } @@ -291,6 +284,7 @@ --color-background-subtle: #374151; --color-background-inset: #374151; --color-background-muted: #4b5563; + --color-background-strong: #6b7280; --color-background-canvas: #111827; --color-background-highlight: #713f12; --color-background-success-subtle: #14532d;