@netlify/spark-ui 0.0.46 → 0.0.47

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@preact/preset-vite": "^2.10.1",
+    "@shikijs/transformers": "^3.3.0",
     "glob": "^11.0.1",
     "preact": "^10.26.4",
     "vite": "^6.2.5",
@@ -41,7 +42,7 @@
     "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {
-    "@terrazzo/cli": "^0.6.3",
+    "@terrazzo/cli": "^0.7.0",
     "@terrazzo/plugin-css": "^0.6.0",
     "@types/gtag.js": "^0.0.20",
     "tslib": "^2.8.1",

package/packages/assets/fonts/README.md

@@ -0,0 +1,5 @@
+# Fonts
+
+- [Figtree](https://github.com/erikdkennedy/figtree)
+- [Instrument Sans](https://github.com/Instrument/instrument-sans)
+- [Martian Mono](https://github.com/evilmartians/mono.git)

package/packages/components/CodeBlock.astro

@@ -0,0 +1,208 @@
+---
+import { Code } from 'astro:components';
+import '../styles/code-block.css';
+import poimandresTheme from '../../themes/poimandres.json';
+import {
+  transformerMetaHighlight,
+  transformerNotationDiff,
+  transformerNotationFocus,
+} from '@shikijs/transformers';
+
+interface Props {
+  code: string;
+  lang?: string;
+  highlight?: string;
+  del?: string;
+  ins?: string;
+  frame?: 'code' | 'terminal' | 'none';
+  theme?: string;
+  wrap?: boolean;
+  title?: string;
+  class?: string;
+  showLineNumbers?: boolean;
+}
+
+const {
+  code,
+  lang = '',
+  highlight = '',
+  del = '',
+  ins = '',
+  frame = 'none',
+  theme = 'poimandres',
+  wrap = false,
+  title = '',
+  class: className,
+  showLineNumbers = false,
+  ...rest
+} = Astro.props;
+
+// Process highlighting ranges (e.g. {2-3,6})
+const highlightRanges = highlight
+  ? highlight
+      .replace(/[{}]/g, '')
+      .split(',')
+      .map((range: string) => {
+        if (range.includes('-')) {
+          const [start, end] = range.split('-').map(Number);
+          return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+        }
+        return [Number(range)];
+      })
+      .flat()
+  : [];
+
+// Process deleted lines
+const delRanges = del
+  ? del
+      .split(',')
+      .map((range: string) => {
+        if (range.includes('-')) {
+          const [start, end] = range.split('-').map(Number);
+          return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+        }
+        return [Number(range)];
+      })
+      .flat()
+  : [];
+
+// Process inserted lines
+const insRanges = ins
+  ? ins
+      .split(',')
+      .map((range: string) => {
+        if (range.includes('-')) {
+          const [start, end] = range.split('-').map(Number);
+          return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+        }
+        return [Number(range)];
+      })
+      .flat()
+  : [];
+
+// Apply highlighting, deletions, and insertions using Shiki's transformers
+const codeWithMeta = code
+  .split('\n')
+  .map((line: string, i: number) => {
+    const lineNumber = i + 1;
+    const meta = [];
+
+    if (highlightRanges.includes(lineNumber)) {
+      meta.push('focus');
+    }
+    if (delRanges.includes(lineNumber)) {
+      meta.push('--');
+    }
+    if (insRanges.includes(lineNumber)) {
+      meta.push('++');
+    }
+
+    return meta.length > 0 ? `${line} // [!code ${meta.join(' ')}]` : line;
+  })
+  .join('\n');
+
+// Determine which theme to use
+const selectedTheme = theme === 'poimandres' ? poimandresTheme : theme;
+
+// Determine if we should show line numbers
+const showNumbers = showLineNumbers && code.split('\n').length > 1;
+---
+
+<div
+  class:list={[
+    'code-block',
+    frame === 'terminal' && 'terminal-frame',
+    frame === 'code' && 'code-frame',
+    frame === 'none' && 'no-frame',
+    showNumbers && 'with-line-numbers',
+    className,
+  ]}
+  {...rest}
+>
+  {
+    (title || lang) && frame !== 'none' && frame !== 'terminal' && (
+      <div class="code-block-title">
+        {lang && <span class="code-language">{lang}</span>}
+        {title && <span class="code-title">{title}</span>}
+      </div>
+    )
+  }
+  <div class="code-block-content">
+    <Code
+      code={codeWithMeta}
+      lang={lang}
+      theme={selectedTheme}
+      wrap={wrap}
+      transformers={[
+        transformerMetaHighlight(),
+        transformerNotationDiff(),
+        transformerNotationFocus(),
+      ]}
+    />
+    <button class="copy-button" aria-label="Copy code to clipboard" data-tooltip="Copy">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="copy-icon">
+        <path
+          d="M18 3c0-1.657-1.343-3-3-3v0h-12c-1.657 0-3 1.343-3 3v0 12c0 1.657 1.343 3 3 3v0h12c1.657 0 3-1.343 3-3v0zM15 1.5c0.828 0 1.5 0.672 1.5 1.5v0 12c0 0.828-0.672 1.5-1.5 1.5v0h-12c-0.828 0-1.5-0.672-1.5-1.5v0-12c0-0.828 0.672-1.5 1.5-1.5v0zM21 7.5c0.828 0 1.5 0.672 1.5 1.5v0 12c0 0.828-0.672 1.5-1.5 1.5v0h-12c-0.828 0-1.5-0.672-1.5-1.5v0-1.5h-1.5v1.5c0 1.657 1.343 3 3 3v0h12c1.657 0 3-1.343 3-3v0-12c0-1.657-1.343-3-3-3v0h-1.5v1.5z"
+        ></path>
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="check-icon">
+        <path
+          d="M22.942 6.582l-13.778 13.778c-0.156 0.156-0.371 0.253-0.609 0.253s-0.453-0.097-0.609-0.253v0l-6.028-6.028c-0.156-0.156-0.252-0.371-0.252-0.609 0-0.476 0.386-0.862 0.862-0.862 0.238 0 0.453 0.096 0.609 0.252v0l5.418 5.42 13.168-13.169c0.156-0.156 0.371-0.252 0.609-0.252 0.476 0 0.862 0.386 0.862 0.862 0 0.238-0.096 0.453-0.252 0.609v0z"
+        ></path>
+      </svg>
+    </button>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('astro:page-load', () => {
+    setupCopyBtn();
+  });
+
+  // Also initialize immediately in case the page is not using transitions
+  if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    setupCopyBtn();
+  } else {
+    document.addEventListener('DOMContentLoaded', setupCopyBtn);
+  }
+
+  function setupCopyBtn() {
+    const copyButtons = document.querySelectorAll(
+      '.code-block .copy-button'
+    ) as NodeListOf<HTMLButtonElement>;
+    copyButtons.forEach(button => {
+      button.addEventListener('click', async () => {
+        const codeBlock = button.closest('.code-block');
+        if (!codeBlock) return;
+
+        const pre = codeBlock.querySelector('pre');
+        if (!pre) return;
+
+        // Get the text content, remove the Shiki annotations if present
+        const rawText = pre.textContent || '';
+        const code = rawText.replace(/\/\/\s*\[!.*?\]/g, '').trim();
+
+        // Copy to clipboard
+        try {
+          await navigator.clipboard.writeText(code);
+          button.classList.add('copied');
+          button.setAttribute('data-tooltip', 'Copied!');
+          setTimeout(() => {
+            button.classList.remove('copied');
+            button.setAttribute('data-tooltip', 'Copy');
+            button.blur();
+          }, 2000);
+        } catch (error) {
+          console.error('Failed to copy code: ', error);
+          button.classList.add('error');
+          button.setAttribute('data-tooltip', 'Failed to copy!');
+          setTimeout(() => {
+            button.classList.remove('error');
+            button.setAttribute('data-tooltip', 'Copy');
+            button.blur();
+          }, 2000);
+        }
+      });
+    });
+  }
+</script>

package/packages/global.d.ts

@@ -0,0 +1,5 @@
+// Define Astro components module to avoid TypeScript errors
+declare module 'astro:components' {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export const Code: any;
+} 

package/packages/styles/base.css

@@ -1,3 +1,4 @@
+@import 'reset.css';
 @import 'tokens.css';
 @import 'utils.css';
 @import 'fonts.css';

package/packages/styles/code-block.css

@@ -0,0 +1,249 @@
+.code-block {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid var(--neutral-700);
+  border-radius: 6px;
+  font-size: 0.9em;
+  line-height: 1.5;
+  background-color: var(--neutral-800);
+}
+
+/* Title */
+.code-block-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+  padding-block: var(--space-2xs);
+  padding-inline: var(--space-s);
+  border-bottom: 1px solid var(--neutral-700);
+  font-size: 0.9em;
+  color: var(--neutral-200);
+}
+
+.code-block-title .code-language {
+  padding: 0.1em 0.5em;
+  border-radius: 2px;
+  background-color: var(--neutral-700);
+  letter-spacing: 0.05em;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.code-block-title .code-title {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+/* Code */
+.code-block .code-block-content {
+  position: relative;
+  overflow: auto;
+  margin: 0
+}
+
+.code-block pre {
+  border: 0;
+  border-radius: 6px;
+  padding-block: var(--space-m);
+  padding-inline: var(--space-s);
+  margin: 0
+}
+
+.code-block .code-block-content:not(:only-child) pre {
+  border-radius: 0 0 6px 6px;
+}
+
+.code-block pre:focus-visible {
+  outline-offset: -2px;
+}
+
+.code-block :where(pre, code) {
+  font-family: var(--font-monospace, monospace);
+}
+
+/* Copy button */
+.code-block .copy-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  margin: 0;
+  border: 1px solid var(--neutral-700);
+  border-radius: 4px;
+  background-color: var(--neutral-800);
+  color: var(--neutral-400);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.code-block .copy-button:hover,
+.code-block .copy-button:focus {
+  background-color: var(--neutral-900);
+  color: var(--neutral-200);
+  outline: none;
+}
+
+.code-block .copy-button svg {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  color: inherit;
+  fill: currentColor;
+}
+
+.code-block .copy-button .copy-icon {
+  display: block;
+}
+
+.code-block .copy-button .check-icon {
+  display: none;
+}
+
+/* Copy button tooltip */
+.code-block .copy-button::before,
+.code-block .copy-button::after {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.2s ease, visibility 0s 0.2s ease;
+}
+
+.code-block .copy-button::before {
+  content: attr(data-tooltip);
+  right: calc(100% + 10px);
+  padding: 0.15em 0.5em;
+  border-radius: 2px;
+  background-color: var(--color-brand-alt);
+  color: var(--neutral-800);
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+
+.code-block .copy-button::after {
+  content: '';
+  right: calc(100%);
+  border: 5px solid transparent;
+  border-left-color: var(--color-brand-alt);
+}
+
+.code-block .copy-button:hover::before,
+.code-block .copy-button:hover::after,
+.code-block .copy-button:focus::before,
+.code-block .copy-button:focus::after,
+.code-block .copy-button.copied::before,
+.code-block .copy-button.copied::after,
+.code-block .copy-button.error::before,
+.code-block .copy-button.error::after {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.2s ease;
+}
+
+.code-block .copy-button.copied .copy-icon {
+  display: none;
+}
+
+.code-block .copy-button.copied .check-icon {
+  display: block;
+}
+
+.code-block .copy-button.error::before {
+  background-color: var(--red-500);
+}
+
+.code-block .copy-button.error::after {
+  border-left-color: var(--red-500);
+}
+
+/* Frame styling */
+.code-block.terminal-frame {
+  background-color: #1e1e1e;
+}
+
+.code-block.terminal-frame::before {
+  position: relative;
+  display: block;
+  content: '';
+  height: 1.6rem;
+  background-color: var(--neutral-800);
+  border-bottom: 1px solid var(--neutral-700);
+}
+
+.code-block.terminal-frame::after {
+  position: absolute;
+  top: 0.5rem;
+  left: 1rem;
+  width: 0.6rem;
+  height: 0.6rem;
+  content: '';
+  border-radius: 50%;
+  background-color: var(--neutral-600);
+  box-shadow: 1.25rem 0 0 var(--neutral-600), 2.5rem 0 0 var(--neutral-600);
+}
+
+/* Line highlighting styles */
+.code-block [data-highlighted-line],
+.code-block .line.focused,
+.code-block .line:has(.focus),
+.code-block .line:has(.highlighted),
+.code-block pre.has-focused .line.focused {
+  background-color: color-mix(in srgb, var(--neutral-000) 10%, transparent);
+  display: inline-block;
+  width: 100%;
+}
+
+.code-block [data-deleted-line],
+.code-block .line.diff.remove,
+.code-block .line:has(.diff.remove),
+.code-block .line:has(.deleted),
+.code-block .line:has(.diff-remove) {
+  background-color: color-mix(in srgb, var(--red-500) 30%, transparent);
+  text-decoration: line-through;
+  text-decoration-color: var(--neutral-400);
+  opacity: 0.7;
+}
+
+.code-block [data-inserted-line],
+.code-block .line.diff.add,
+.code-block .line:has(.diff.add),
+.code-block .line:has(.inserted),
+.code-block .line:has(.diff-add) {
+  background-color: color-mix(in srgb, var(--green-500) 30%, transparent);
+}
+
+/* Line numbers styling */
+.code-block.with-line-numbers pre {
+  padding-left: var(--space-xl);
+  counter-reset: line;
+}
+
+.code-block.with-line-numbers code>span {
+  position: relative;
+}
+
+.code-block.with-line-numbers code>span::before {
+  position: absolute;
+  left: -2.5rem;
+  width: 2rem;
+  padding-right: var(--space-2xs);
+  border-right: 1px solid var(--neutral-700);
+  counter-increment: line;
+  content: counter(line);
+  user-select: none;
+  color: var(--neutral-500);
+  font-size: 0.9em;
+  line-height: 1.75;
+  text-align: right;
+}

package/packages/styles/fonts.css

@@ -1,17 +1,132 @@
+/* font-face: Text */
 @font-face {
-  font-family: Pacaembu;
-  src: url('../assets/fonts/pacaembu/PacaembuNetlify-Variable.woff2') format('woff2');
-  unicode-range: U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A, U+D7, U+2019, U+201C,
-    U+201D;
-  font-weight: 100 1000;
+  font-family: 'Instrument Sans';
+  src: url('../assets/fonts/instrument-sans/InstrumentSans[wdth,wght].woff2') format('woff2');
   font-display: swap;
+  font-weight: 100 900;
+  unicode-range:
+    U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A, U+D7, U+2019,
+    U+201C, U+201D;
 }
 
 @font-face {
-  font-family: Mulish;
-  src: url('../assets/fonts/mulish/MulishVar-latin.woff2') format('woff2');
-  unicode-range: U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A, U+D7, U+2019, U+201C,
-    U+201D;
-  font-weight: 200 900;
+  font-family: 'Instrument Sans';
+  src: url('../assets/fonts/instrument-sans/InstrumentSans-Italic[wdth,wght].woff2') format('woff2');
   font-display: swap;
+  font-style: italic;
+  font-weight: 100 900;
+  unicode-range:
+    U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A, U+D7, U+2019,
+    U+201C, U+201D;
+}
+
+/* font-face: Display */
+@font-face {
+  font-family: 'Figtree';
+  src: url('../assets/fonts/figtree/Figtree-Variable.woff2') format('woff2');
+  font-display: swap;
+  font-weight: 100 900;
+  unicode-range:
+    U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A, U+D7, U+2019,
+    U+201C, U+201D;
+}
+
+/* font-face: Monospace */
+@font-face {
+  font-family: 'Martian Mono';
+  src: url('../assets/fonts/martian-mono/MartianMono-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Martian Mono';
+  src: url('../assets/fonts/martian-mono/MartianMono-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Martian Mono';
+  src: url('../assets/fonts/martian-mono/MartianMono-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Martian Mono';
+  src: url('../assets/fonts/martian-mono/MartianMono-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-display: swap;
+}
+
+/* Text */
+body {
+  font-family: var(--font-family-text);
+  font-size: var(--font-size-text-lg);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-text);
+}
+
+b,
+strong {
+  font-weight: var(--font-weight-bold);
+}
+
+i,
+em {
+  font-style: italic;
+  font-weight: var(--font-weight-normal);
+}
+
+/* Headings */
+h1,
+.h1 {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-display-2xl);
+  font-weight: var(--font-weight-extrabold);
+  line-height: var(--line-height-heading);
+}
+
+h2,
+.h2 {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-display-xl);
+  font-weight: var(--font-weight-extrabold);
+  line-height: var(--line-height-heading);
+}
+
+h3,
+.h3 {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-display-lg);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+}
+
+h4,
+.h4 {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-display-sm);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+}
+
+/* Lists */
+li::marker {
+  color: var(--color-brand);
+}
+
+ol li::marker {
+  font-weight: var(--font-weight-bold);
+}
+
+/* Code */
+pre,
+code,
+kbd {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-text-md);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-text);
 }

package/packages/styles/reset.css

@@ -0,0 +1,79 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+figure,
+blockquote,
+dl,
+dd,
+ul,
+ol,
+pre,
+code {
+  margin: 0;
+}
+
+:where(p, h1, h2, h3, h4, h5, h6) {
+  overflow-wrap: break-word;
+}
+
+:where(ul, ol) {
+  padding-inline-start: 1em;
+}
+
+:where(ul[role='list'], ol[role='list'], ul[class], ol[class]) {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html:focus-within {
+    scroll-behavior: smooth;
+  }
+}
+
+html {
+  /* Prevent font size inflation */
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+body {
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+a {
+  color: currentcolor;
+}
+
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+picture,
+img,
+video,
+iframe,
+object {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}

package/packages/styles/tokens.css

@@ -37,15 +37,29 @@
   --color-warning-bg: var(--gold-100);
   --color-warning-border: var(--gold-300);
   --color-warning-text: var(--gold-800);
-  --font-bold: 800;
-  --font-light: 300;
-  --font-medium: 500;
-  --font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
-  --font-primary: "Mulish", system-ui, "Helvetica", sans-serif;
-  --font-regular: 400;
-  --font-secondary: "Pacaembu", system-ui, "Helvetica", sans-serif;
-  --font-semibold: 680;
-  --font-semilight: 350;
+  --font-family-display: "Figtree", system-ui, "Helvetica", sans-serif;
+  --font-family-monospace: "Martian Mono", ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
+  --font-family-text: "Instrument Sans", system-ui, "Helvetica", sans-serif;
+  --font-size-display-2xl: 4rem;
+  --font-size-display-2xs: 1.125rem;
+  --font-size-display-3xl: 4.5rem;
+  --font-size-display-4xl: 5rem;
+  --font-size-display-lg: 3rem;
+  --font-size-display-md: 2.5rem;
+  --font-size-display-sm: 2rem;
+  --font-size-display-xl: 3.5rem;
+  --font-size-display-xs: 1.5rem;
+  --font-size-text-lg: 1.125rem;
+  --font-size-text-md: 1rem;
+  --font-size-text-sm: 0.875rem;
+  --font-size-text-xl: 1.375rem;
+  --font-size-text-xs: 0.75rem;
+  --font-weight-bold: 700;
+  --font-weight-light: 200;
+  --font-weight-medium: 500;
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --font-weight-semilight: 300;
   --gold-000: color(srgb 0.9921568627450981 0.9607843137254902 0.8470588235294118);
   --gold-100: color(srgb 0.9647058823529412 0.8784313725490196 0.6470588235294118);
   --gold-200: color(srgb 0.9803921568627451 0.803921568627451 0.43529411764705883);
@@ -68,7 +82,7 @@
   --green-900: color(srgb 0.08235294117647059 0.16470588235294117 0.09803921568627451);
   --line-height-heading: 1.2;
   --line-height-none: 1;
-  --line-height-prose: 1.5;
+  --line-height-text: 1.5;
   --neutral-000: color(srgb 1 1 1);
   --neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
   --neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
@@ -133,15 +147,6 @@
   --teal-700: color(srgb 0.00392156862745098 0.4117647058823529 0.40784313725490196);
   --teal-800: color(srgb 0.00392156862745098 0.2823529411764706 0.2784313725490196);
   --teal-900: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
-  --text-2xl: 1.74rem;
-  --text-3xl: 2.3rem;
-  --text-4xl: 3.04rem;
-  --text-5xl: 4.01rem;
-  --text-base: 1rem;
-  --text-lg: 1.125rem;
-  --text-sm: 0.875rem;
-  --text-xl: 1.32rem;
-  --text-xs: 0.8125rem;
 }
 
 @media (prefers-color-scheme: light) {