diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index b2cb49a6..84bca0d5 100644 --- a/src/components/Badge.tsx +++ b/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' diff --git a/src/photo/PhotoRecipe.tsx b/src/photo/PhotoRecipe.tsx index 7bc9be4d..f48776f6 100644 --- a/src/photo/PhotoRecipe.tsx +++ b/src/photo/PhotoRecipe.tsx @@ -81,7 +81,7 @@ export default function PhotoRecipe({ )}>
diff --git a/src/simulation/PhotoFilmSimulation.tsx b/src/simulation/PhotoFilmSimulation.tsx index 330ece6b..311edddb 100644 --- a/src/simulation/PhotoFilmSimulation.tsx +++ b/src/simulation/PhotoFilmSimulation.tsx @@ -40,7 +40,10 @@ export default function PhotoFilmSimulation({ label={medium} labelSmall={small} href={pathForFilmSimulation(simulation)} - icon={} + icon={} title={`Film Simulation: ${large}`} type={type} badged={badged} diff --git a/tailwind.css b/tailwind.css index ee234e00..6aa846fe 100644 --- a/tailwind.css +++ b/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