refactor: css variables (#19146)

This commit is contained in:
Jason Rasmussen 2025-06-12 19:06:38 -04:00 committed by GitHub
parent 2f3d4e15d2
commit 8923d5b0a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 63 additions and 101 deletions

View file

@ -1,29 +1,16 @@
<script lang="ts" module>
export type Color = 'primary' | 'secondary';
export type Rounded = false | true | 'full';
</script>
<script lang="ts">
import type { Snippet } from 'svelte';
interface Props {
color?: Color;
rounded?: Rounded;
rounded?: boolean | 'full';
children?: Snippet;
}
let { color = 'primary', rounded = true, children }: Props = $props();
const colorClasses: Record<Color, string> = {
primary: 'text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary',
secondary: 'text-immich-dark-bg dark:text-immich-gray dark:bg-gray-600 bg-gray-300 dark:text-immich-gray',
};
let { rounded = true, children }: Props = $props();
</script>
<span
class="inline-block h-min whitespace-nowrap px-3 py-1 text-center align-baseline text-xs leading-none {colorClasses[
color
]}"
class="bg-primary text-subtle inline-block h-min whitespace-nowrap px-3 py-1 text-center align-baseline text-xs leading-none"
class:rounded-md={rounded === true}
class:rounded-full={rounded === 'full'}
>