astro-payload-test/astro/src/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.light {

    --black: 10, 16, 19;
    --white: 243, 252, 248;
    --absolute-black: 0, 0, 0;
    --absolute-white: 255, 255, 255;

    /* Use these in tailwind.config.cjs */
    --primary: var(--black);
    --secondary: var(--black);
    --tertiary: var(--black);
    
    --text: var(--black);
    --textInverted: var(--absolute-white);
    --link: var(--black);
    --background: var(--white);
}

.dark {

    --black: 10, 16, 19;
    --white: 243, 252, 248;
    --absolute-black: 0, 0, 0;
    --absolute-white: 255, 255, 255;

    /* Use these in tailwind.config.cjs */
    --primary: var(--white);
    --secondary: var(--white);
    --tertiary: var(--white);
    
    --text: var(--white);
    --textInverted: var(--absolute-black);
    --link: var(--white);
    --background: var(--black);
}

.autonomic {
    /* Palette */
    /* RGBA instead of hex so that opacity will work */
    --absolute-white: 255, 255, 255;
    --white: 243, 252, 248;
    --shocking-pink: 253, 0, 159;
    --shamrock-green: 0, 198, 88;
    --bubblegum-pink: 255, 133, 203;
    --bright-orange: 255, 96, 21;

    /* Use these in tailwind.config.cjs */
    --primary: var(--shocking-pink);
    --secondary: var(--shamrock-green);
    --tertiary: var(--bright-orange);
    
    --text: var(--shocking-pink);
    --textInverted: var(--absolute-white);
    --link: var(--shamrock-green);
    --background: var(--white);
}

@layer components {

    :root {
        @apply ring-secondary;
    }

    h1 {
        @apply text-5xl font-bold;
    }
    
    h2 {
        @apply text-4xl font-semibold;
    }

    h3 {
        @apply text-2xl font-semibold;
    }

    h4, h5, h6 {
        @apply text-2xl font-medium;
    }

    p, span, li, a {
        @apply text-xl;
    }

    a {
        @apply text-link underline;
    }

    ol {
        @apply list-decimal;
    }
    
    ul {
        @apply list-disc;
    }

    select {
        @apply bg-background border-primary border px-2 h-8 text-lg;
    }

    input {
        @apply bg-background border-primary border px-2 h-8 text-lg;
    }
}