chore: cleanup

Author: quantizor

app/page.tsx

@@ -28,8 +28,8 @@ export default async function Index() {
               CSS for the <code>&lt;Component&gt;</code> Age
             </h1>
             <h2 className="hero-subtitle">
-              Fast, expressive styling for React. Server components, client components, streaming SSR, React Native—one
-              API.
+              Fast, expressive styling for React. Server components, client components, streaming SSR, React Native, all
+              one API.
             </h2>
 
             <HomepageBadges />

app/showcase/page.tsx

@@ -8,7 +8,7 @@ import { theme, font } from '@/utils/theme';
 
 export const metadata = {
   title: 'Showcase',
-  description: 'Production interfaces shipping styled-components today — IMDb, Spotify, Coinbase, Prisma, and more.',
+  description: 'Production interfaces shipping styled-components today, IMDb, Spotify, Coinbase, Prisma, and more.',
 };
 
 const companyByOwner = new Map(sortedCompanies.map(c => [c.name, c]));

app/theme-base.css

@@ -1,4 +1,4 @@
-/* Static base colors — loads before JS to prevent FOUC.
+/* Static base colors, loads before JS to prevent FOUC.
    Values must match the lightColors/darkColors partials in GlobalStyles.tsx. */
 
 :root,

companies-manifest.tsx

@@ -19,7 +19,7 @@ export interface Company {
    * Tranco rank (https://tranco-list.eu/). Tranco aggregates Cisco
    * Umbrella, Majestic, Farsight, Cloudflare Radar, and CrUX into a
    * single global popularity ranking that resists day-to-day churn.
-   * Used only to sort the showcase grid — lower = more prominent.
+   * Used only to sort the showcase grid: lower = more prominent.
    */
   globalRank: number;
   style: React.HTMLAttributes<HTMLElement>['style'];

components/BlogComments.tsx

@@ -39,7 +39,7 @@ const Wrapper = styled.div`
     max-width: none;
   }
 
-  /* Hide the "Comments" heading when there's no reply list to head —
+  /* Hide the "Comments" heading when there's no reply list to head;
      the package renders it unconditionally. onEmpty() can't be used because
      it only fires on errors, not on empty-reply threads. */
   [class*='_container_']:not(:has([class*='_commentsList_'])) [class*='_commentsTitle_'] {

components/Breadcrumbs.tsx

@@ -25,7 +25,7 @@ const SECTION_LABELS: Record<string, string> = {
   releases: 'Releases',
 };
 
-// Single source of truth for docs category titles — derived from docs.json
+// Single source of truth for docs category titles, derived from docs.json
 const DOCS_CATEGORY_LABELS: Record<string, string> = Object.fromEntries(
   docsJson.pages.map(page => [page.pathname, page.title])
 );

components/CaptureScroll.tsx

@@ -86,7 +86,7 @@ export default function captureScroll<T extends React.ComponentType>(Component:
     }, []);
 
     // React.ComponentType<P> doesn't model `ref` for generic T, so TS can't
-    // verify the callee accepts a ref. Runtime is fine — callers always pass
+    // verify the callee accepts a ref. Runtime is fine, callers always pass
     // ref-forwarding components.
     // @ts-expect-error see note above
     return <Component {...props} ref={ref} />;

components/CelebrationEffect.tsx

@@ -86,7 +86,7 @@ const PropertyRegistrations = createGlobalStyle`
 // Keyframes
 // ---------------------------------------------------------------------------
 
-// Opacity holds at 1 across the 35% plateau before fading — the eye reads
+// Opacity holds at 1 across the 35% plateau before fading, the eye reads
 // the plateau as "the explosion." With fill-mode: both the 0% state applies
 // during animation-delay, so particles stay invisible until ignition.
 const burstAnim = keyframes`
@@ -105,7 +105,7 @@ const burstAnim = keyframes`
 // animating via @property --trail-progress, which Safari doesn't reliably
 // animate inside translate calc expressions.
 // X: linear interpolation at each stop (p).
-// Y: quadratic ease-out 2p-p² evaluated at each stop — decelerating rise.
+// Y: quadratic ease-out 2p-p² evaluated at each stop, decelerating rise.
 // Y uses quadratic ease-out: f(p) = 2p - p². Evaluated at each stop:
 // p=0: 0, p=0.2: 0.36, p=0.4: 0.64, p=0.6: 0.84, p=0.8: 0.96,
 // p=0.86: 0.9804, p=0.92: 0.9936, p=1: 1

components/GlobalStyles.tsx

@@ -3,7 +3,7 @@
 import { createGlobalStyle } from 'styled-components';
 import { theme, font, darkColors } from '../utils/theme';
 
-// Dark color overrides derived from `theme.vars` — the bare CSS custom
+// Dark color overrides derived from `theme.vars`, the bare CSS custom
 // property names stay in sync with `createTheme`'s prefix/path derivation,
 // so if the prefix changes in `utils/theme.ts` the overrides still land.
 const darkColorCSS = Object.entries(darkColors)
@@ -14,7 +14,7 @@ const darkColorCSS = Object.entries(darkColors)
 
 const GlobalStyles = createGlobalStyle`
   /* ===================================================================
-   * @property — register tokens as typed so they're animatable.
+   * @property, register tokens as typed so they're animatable.
    * =================================================================== */
   @property --sc-color-bg {
     syntax: '<color>';
@@ -53,7 +53,7 @@ const GlobalStyles = createGlobalStyle`
   *,::after,::before{background-repeat:no-repeat;box-sizing:inherit}::after,::before{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;cursor:default;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}body{margin:0}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}nav ol,nav ul{list-style:none}pre{font-family:monospace,monospace;font-size:1em}a{text-decoration:none;color:inherit;background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,optgroup,select,textarea{margin:0}button,input,select,textarea{background-color:transparent;color:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button;cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}[aria-disabled]{cursor:default}
 
   /* ===================================================================
-   * Dark/light overrides — CSS-first for flash-free dark mode.
+   * Dark/light overrides, CSS-first for flash-free dark mode.
    * theme.GlobalStyle emits :root vars from ThemeProvider on hydration;
    * these class/media overrides have higher specificity and win.
    * =================================================================== */
@@ -72,7 +72,7 @@ const GlobalStyles = createGlobalStyle`
   }
 
   /* ===================================================================
-   * Base — global element styles referencing tokens.
+   * Base, global element styles referencing tokens.
    * =================================================================== */
   html, body {
     font-size: 16px;
@@ -277,7 +277,7 @@ const GlobalStyles = createGlobalStyle`
   }
 
   /* ===================================================================
-   * DocSearch theming — CSS variables for light/dark mode.
+   * DocSearch theming, CSS variables for light/dark mode.
    * =================================================================== */
   :root {
     --docsearch-primary-color: ${theme.color.accent};

components/Link.tsx

@@ -7,7 +7,7 @@ import { theme } from '../utils/theme';
 import rem from '../utils/rem';
 
 // ---------------------------------------------------------------------------
-// Link design system — all variants defined in one place
+// Link design system, all variants defined in one place
 // ---------------------------------------------------------------------------
 
 export type LinkVariant = 'inline' | 'heading' | 'block' | 'unstyled';