Rationalize frosted badge

src/components/Badge.tsx

@@ -13,7 +13,7 @@ export default function Badge({
   className?: string
   type?: 'large' | 'small' | 'text-only'
   dimContent?: boolean
-  contrast?: 'low' | 'medium' | 'high' | 'frost'
+  contrast?: 'low' | 'medium' | 'high' | 'frosted'
   uppercase?: boolean
   interactive?: boolean
 }) {
@@ -32,7 +32,7 @@ export default function Badge({
         'text-[0.7rem] font-medium rounded-[0.25rem]',
         contrast === 'high'
           ? 'text-invert bg-invert'
-          : contrast === 'frost'
+          : contrast === 'frosted'
             ? 'text-black bg-white/30'
             : 'text-medium bg-gray-300/30 dark:bg-gray-700/50',
         interactive && (contrast === 'high'

src/photo/PhotoRecipe.tsx

@@ -81,7 +81,7 @@ export default function PhotoRecipe({
     )}>
       <div className="flex items-center gap-2">
         <PhotoFilmSimulation
-          contrast="frost"
+          contrast="frosted"
           className="grow"
           simulation={simulation}
         />

src/simulation/PhotoFilmSimulation.tsx

@@ -40,7 +40,10 @@ export default function PhotoFilmSimulation({
           label={medium}
           labelSmall={small}
           href={pathForFilmSimulation(simulation)}
-          icon={<PhotoFilmSimulationIcon simulation={simulation} />}
+          icon={<PhotoFilmSimulationIcon
+            simulation={simulation}
+            className={clsx(contrast === 'frosted' && 'text-dark')}
+          />}
           title={`Film Simulation: ${large}`}
           type={type}
           badged={badged}

tailwind.css

@@ -86,14 +86,22 @@
   }
 }
 
+/* Text Primitives */
+@utility text-dark {
+  @apply text-gray-900
+}
+@utility text-light {
+  @apply text-gray-100
+}
+
 /* Text */
 @utility text-main {
   @apply
-    text-gray-900 dark:text-gray-100
+    text-dark dark:text-light
 }
 @utility text-invert {
   @apply
-    text-white dark:text-black
+    text-light dark:text-dark
 }
 @utility text-medium {
   @apply