Establish consistent theme system

Author: coder13

dev-dist/registerSW.js

@@ -0,0 +1,2 @@
+if ('serviceWorker' in navigator)
+  navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' });

dev-dist/sw.js

@@ -79,9 +79,13 @@ define(['./workbox-5357ef54'], function (workbox) {
    */
   workbox.precacheAndRoute(
     [
+      {
+        url: 'registerSW.js',
+        revision: '3ca0b8505b4bec776b69afdba2768812',
+      },
       {
         url: 'index.html',
-        revision: '0.4hfq3gsql8',
+        revision: '0.0mqaa5vqso8',
       },
     ],
     {},

src/components/ActivityRow/ActivityRow.tsx

@@ -31,14 +31,14 @@ export function ActivityRow({ activity, stage, timeZone, showRoom = true }: Acti
     <Link
       key={activity.id}
       className={classNames(
-        'flex flex-col w-full p-2 text-gray-900 dark:text-white even:bg-slate-50 even:dark:bg-gray-800 hover:bg-slate-100 dark:hover:bg-gray-700 even:hover:bg-slate-200 even:dark:hover:bg-gray-600',
+        'flex flex-col w-full p-2 type-body even:bg-slate-50 even:dark:bg-gray-800 hover:bg-slate-100 dark:hover:bg-gray-700 even:hover:bg-slate-200 even:dark:hover:bg-gray-600',
         {
           'opacity-50': isOver,
         },
       )}
       to={`/competitions/${competitionId}/activities/${activity.id}`}>
-      <span>{activityName}</span>
-      <span className="flex justify-between text-xs font-light md:text-sm">
+      <span className="type-body">{activityName}</span>
+      <span className="flex justify-between type-meta">
         {showRoom && stage && (
           <RoomPill
             className="px-1 mr-2 rounded"

src/components/AssignmentCodeCell/AssignmentCodeCell.tsx

@@ -79,7 +79,7 @@ export function AssignmentCodeCell<T extends React.ElementType = 'td'>({
       {count ? (
         <>
           {' '}
-          <span className="text-sm">({count})</span>
+          <span className="type-body-sm">({count})</span>
         </>
       ) : null}
     </Component>

src/components/AssignmentLabel/AssignmentLabel.tsx

@@ -11,7 +11,7 @@ export function AssignmentLabel({ assignmentCode }: AssignmentLabelProps) {
 
   if (assignmentCode.match(/judge/i)) {
     return (
-      <BaseAssignmentPill className="bg-blue-200 dark:bg-blue-900">
+      <BaseAssignmentPill className="bg-primary">
         {t('common.assignments.staff-judge.noun', {
           defaultValue: assignmentCode.replace('staff-', ''),
         })}
@@ -63,8 +63,6 @@ export function AssignmentLabel({ assignmentCode }: AssignmentLabelProps) {
         <BaseAssignmentPill className="bg-amber-500 dark:bg-amber-900">{name}</BaseAssignmentPill>
       );
     default:
-      return (
-        <BaseAssignmentPill className="bg-blue-100 dark:bg-blue-900">{name}</BaseAssignmentPill>
-      );
+      return <BaseAssignmentPill className="bg-primary">{name}</BaseAssignmentPill>;
   }
 }

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -22,7 +22,7 @@ export const Breadcrumbs = ({ breadcrumbs }: BreadcrumbsProps) => {
     <div className="flex items-center space-x-1">
       {breadcrumbs.map(({ label, ...breadcrumb }, index) => (
         <Fragment key={label}>
-          {index > 0 && <span className="text-gray-500 dark:text-gray-400">·</span>}
+          {index > 0 && <span className="text-muted">·</span>}
           {'href' in breadcrumb ? (
             <Link to={breadcrumb.href}>
               <BreadcrumbPill

src/components/Button/Button.tsx

@@ -1,29 +1,20 @@
 import classNames from 'classnames';
 import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
 
+export type ButtonVariant = 'blue' | 'green' | 'gray' | 'light';
+
 export interface ButtonProps extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> {
   className?: string;
-  variant?: 'blue' | 'green' | 'gray' | 'light';
+  variant?: ButtonVariant;
 }
 
-export const Button = ({ className, variant = 'blue', ...props }: ButtonProps) => {
-  const variantClasses = {
-    blue: 'bg-blue-200 hover:bg-blue-300 dark:bg-blue-700 dark:hover:bg-blue-600 text-gray-900 dark:text-white border border-blue-300 dark:border-blue-600',
-    green:
-      'bg-green-200 hover:bg-green-400 dark:bg-green-700 dark:hover:bg-green-600 text-gray-900 dark:text-white border border-green-300 dark:border-green-600',
-    gray: 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600',
-    light:
-      'bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600',
-  };
+const variantClasses: Record<ButtonVariant, string> = {
+  blue: 'btn-blue',
+  green: 'btn-green',
+  gray: 'btn-gray',
+  light: 'btn-light',
+};
 
-  return (
-    <button
-      className={classNames(
-        'px-4 py-2 rounded-md transition-colors',
-        variantClasses[variant],
-        className,
-      )}
-      {...props}
-    />
-  );
+export const Button = ({ className, variant = 'blue', ...props }: ButtonProps) => {
+  return <button className={classNames('btn', variantClasses[variant], className)} {...props} />;
 };

src/components/CompetitionList/CompetitionList.tsx

@@ -31,7 +31,7 @@ export function CompetitionListFragment({
 
   return (
     <div className="w-full p-2">
-      <span className="text-sm text-blue-800 dark:text-blue-400">{title}</span>
+      <span className="type-body-sm text-blue-800 dark:text-blue-400">{title}</span>
       {loading ? <BarLoader width="100%" /> : <div style={{ height: '4px' }} />}
       {!!competitions.length && (
         <ul className="px-0">
@@ -47,9 +47,7 @@ export function CompetitionListFragment({
       )}
       {!!lastFetchedAt && <LastFetchedAt lastFetchedAt={new Date(lastFetchedAt)} />}
       {!loading && !competitions.length && (
-        <div className="text-center text-gray-500 dark:text-gray-400">
-          {t('common.competitionList.noneFound')}
-        </div>
+        <div className="text-center text-muted">{t('common.competitionList.noneFound')}</div>
       )}
     </div>
   );

src/components/CompetitionListItem/CompetitionListItem.tsx

@@ -33,30 +33,33 @@ export const CompetitionListItem = ({
     <Link to={`/competitions/${id}`}>
       <li
         className={classNames(
-          'border bg-white dark:bg-gray-800 dark:border-gray-700 list-none rounded-md px-2 py-2 flex cursor-pointer hover:bg-slate-100 dark:hover:bg-gray-700 group transition-colors my-1 flex-row',
+          'link-card list-none flex flex-row cursor-pointer group transition-colors my-1 type-body',
           {
             'opacity-50': endDate < new Date(Date.now() - 1000 * 60 * 60 * 24),
           },
         )}>
         {hasFlag(country_iso2) && (
-          <div className="flex flex-shrink mr-2 text-2xl"> {getUnicodeFlagIcon(country_iso2)} </div>
+          <div className="flex flex-shrink mr-2 type-title">
+            {' '}
+            {getUnicodeFlagIcon(country_iso2)}{' '}
+          </div>
         )}
         <div className="flex-1">
-          <p className="font-normal leading-1 dark:text-white"> {name} </p>{' '}
-          <p className="text-gray-600 dark:text-gray-400 text-sm leading-1">
+          <p className="type-heading leading-1 dark:text-white"> {name} </p>{' '}
+          <p className="type-body-sm text-muted leading-1">
             {formatDateRange(start_date, end_date)}
             {'  '}&#8211;{'  '}
             {city}
           </p>
         </div>
         {isLive && (
-          <div className="flex flex-shrink text-2xl items-center px-2">
-            <span className="fa fa-tower-broadcast text-green-500" />
+          <div className="flex items-center flex-shrink px-2 type-title">
+            <span className="text-green-500 fa fa-tower-broadcast" />
           </div>
         )}
         {isBookmarked && !isLive && (
-          <div className="flex flex-shrink text-2xl items-center px-2">
-            <span className="fa fa-bookmark text-yellow-500" />
+          <div className="flex items-center flex-shrink px-2 type-title">
+            <span className="text-yellow-500 fa fa-bookmark" />
           </div>
         )}
       </li>

src/components/CompetitionListItem/__snapshots__/CompetitionListItem.test.tsx.snap

@@ -7,10 +7,10 @@ exports[`CompetitionListItem matches snapshot (default) 1`] = `
       href="/competitions/123"
     >
       <li
-        class="border bg-white dark:bg-gray-800 dark:border-gray-700 list-none rounded-md px-2 py-2 flex cursor-pointer hover:bg-slate-100 dark:hover:bg-gray-700 group transition-colors my-1 flex-row opacity-50"
+        class="link-card list-none flex flex-row cursor-pointer group transition-colors my-1 type-body opacity-50"
       >
         <div
-          class="flex flex-shrink mr-2 text-2xl"
+          class="flex flex-shrink mr-2 type-title"
         >
            
           🇺🇸
@@ -20,15 +20,15 @@ exports[`CompetitionListItem matches snapshot (default) 1`] = `
           class="flex-1"
         >
           <p
-            class="font-normal leading-1 dark:text-white"
+            class="type-heading leading-1 dark:text-white"
           >
              
             Test Competition
              
           </p>
            
           <p
-            class="text-gray-600 dark:text-gray-400 text-sm leading-1"
+            class="type-body-sm text-muted leading-1"
           >
             Jan 1 – 2, 2024
               
@@ -50,10 +50,10 @@ exports[`CompetitionListItem renders with all props (live and bookmarked) 1`] =
       href="/competitions/123"
     >
       <li
-        class="border bg-white dark:bg-gray-800 dark:border-gray-700 list-none rounded-md px-2 py-2 flex cursor-pointer hover:bg-slate-100 dark:hover:bg-gray-700 group transition-colors my-1 flex-row opacity-50"
+        class="link-card list-none flex flex-row cursor-pointer group transition-colors my-1 type-body opacity-50"
       >
         <div
-          class="flex flex-shrink mr-2 text-2xl"
+          class="flex flex-shrink mr-2 type-title"
         >
            
           🇺🇸
@@ -63,15 +63,15 @@ exports[`CompetitionListItem renders with all props (live and bookmarked) 1`] =
           class="flex-1"
         >
           <p
-            class="font-normal leading-1 dark:text-white"
+            class="type-heading leading-1 dark:text-white"
           >
              
             Test Competition
              
           </p>
            
           <p
-            class="text-gray-600 dark:text-gray-400 text-sm leading-1"
+            class="type-body-sm text-muted leading-1"
           >
             Jan 1 – 2, 2024
               
@@ -81,10 +81,10 @@ exports[`CompetitionListItem renders with all props (live and bookmarked) 1`] =
           </p>
         </div>
         <div
-          class="flex flex-shrink text-2xl items-center px-2"
+          class="flex items-center flex-shrink px-2 type-title"
         >
           <span
-            class="fa fa-tower-broadcast text-green-500"
+            class="text-green-500 fa fa-tower-broadcast"
           />
         </div>
       </li>