Foundations

Color

Communicate hierarchy, state and brand.

Code

Import the theme once in your application stylesheet. It exposes every palette value as a CSS custom property and as a Tailwind color utility.

app.css

@import '@dr-max/ui/theme.css';

Apply colors to components

Heading and Text accept a class prop. Use palette utilities when a design intentionally calls for a specific color.

ColorExample.vue

<script setup lang="ts">
import { Heading } from '@dr-max/ui/heading'
import { Text } from '@dr-max/ui/text'
</script>

<template>
  <section>
    <Heading class="text-green-700">
      Your health, our priority
    </Heading>

    <Text class="text-gray-700">
      Find trusted advice and products selected for you.
    </Text>

    <Text variant="label-medium-sm" class="text-red-600">
      Prescription required
    </Text>
  </section>
</template>

Override the text defaults

Headings use --color-black-primary; body text uses --color-black-secondary. Override those role tokens after the theme import to change the defaults across an application.

app.css

@import '@dr-max/ui/theme.css';

:root {
  --color-black-primary: var(--color-green-900);
  --color-black-secondary: var(--color-green-700);
}

Prefer overriding role tokens for broad theming. Keep palette tokens such as --color-green-700 stable so their names continue to describe their actual colors.

Scope an override

CSS custom properties inherit, so a theme can be limited to one part of the page without changing component props.

CampaignPanel.vue

<script setup lang="ts">
import { Heading } from '@dr-max/ui/heading'
import { Text } from '@dr-max/ui/text'
</script>

<template>
  <section class="campaign-theme">
    <Heading>Seasonal care</Heading>
    <Text>This copy inherits the campaign colors.</Text>
  </section>
</template>

<style scoped>
.campaign-theme {
  --color-black-primary: var(--color-purple-900);
  --color-black-secondary: var(--color-purple-700);
}
</style>

Use a token without Tailwind

The same variables work in plain CSS, CSS modules, and component styles.

.status-message {
  border-inline-start: 4px solid var(--color-green-400);
  background: var(--color-green-25);
  color: var(--color-green-800);
}