Skip to main content
Tw Twintrinsic

Theming

Twintrinsic uses CSS variables and Tailwind CSS for theming. You can customize the look and feel of your application by modifying these variables.

Base Colors

Background
--color-background
Surface
--color-surface
Border
--color-border
Text
--color-text
Muted
--color-muted

Color Scales

Twintrinsic provides a comprehensive color system with 10 shades for each color scale (50-900). These color scales provide a consistent palette for your application.

Aa
50
Aa
100
Aa
200
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
800
Aa
900
/* CSS Variable */
var(--color-primary-500)

/* Tailwind Class */
.bg-primary-500
.text-primary-500
.border-primary-500
Aa
50
Aa
100
Aa
200
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
800
Aa
900
/* CSS Variable */
var(--color-secondary-500)

/* Tailwind Class */
.bg-secondary-500
.text-secondary-500
.border-secondary-500
Aa
50
Aa
100
Aa
200
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
800
Aa
900
/* CSS Variable */
var(--color-success-500)

/* Tailwind Class */
.bg-success-500
.text-success-500
.border-success-500
Aa
50
Aa
100
Aa
200
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
800
Aa
900
/* CSS Variable */
var(--color-warning-500)

/* Tailwind Class */
.bg-warning-500
.text-warning-500
.border-warning-500
Aa
50
Aa
100
Aa
200
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
800
Aa
900
/* CSS Variable */
var(--color-error-500)

/* Tailwind Class */
.bg-error-500
.text-error-500
.border-error-500
Aa
50
Aa
100
Aa
200
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
800
Aa
900
/* CSS Variable */
var(--color-info-500)

/* Tailwind Class */
.bg-info-500
.text-info-500
.border-info-500

Text & Background Combinations

Here are some common text and background color combinations that provide good contrast and follow accessibility guidelines. Use these combinations for consistent UI elements.

Aa
Default
Default text on background
text-text + bg-background
Aa
Primary
Primary text on light primary background
text-primary-700 + bg-primary-50
Aa
Primary Inverse
White text on dark primary background
text-white + bg-primary-700
Aa
Secondary
Secondary text on light secondary background
text-secondary-700 + bg-secondary-50
Aa
Secondary Inverse
White text on dark secondary background
text-white + bg-secondary-700
Aa
Success
Success text on light success background
text-success-700 + bg-success-50
Aa
Warning
Warning text on light warning background
text-warning-700 + bg-warning-50
Aa
Error
Error text on light error background
text-error-700 + bg-error-50
Aa
Info
Info text on light info background
text-info-700 + bg-info-50
Aa
Muted
Muted text on surface background
text-muted + bg-surface

UI Component Examples

The color system is applied consistently across all UI components. Here are some examples of how the colors are used in buttons:

CSS Variables

To customize the theme, override these CSS variables in your stylesheet:

css
:root {
  /* Base colors */
  --color-background: #ffffff;    /* White */
  --color-surface: #f8fafc;       /* Slate 50 */
  --color-border: #e2e8f0;        /* Slate 200 */
  --color-text: #1e293b;          /* Slate 800 */
  --color-muted: #64748b;         /* Slate 500 */

  /* Primary colors (Purple) */
  --color-primary-50: #f5f3ff;
  --color-primary-100: #ede9fe;
  --color-primary-200: #ddd6fe;
  --color-primary-300: #c4b5fd;
  --color-primary-400: #a78bfa;
  --color-primary-500: #8b5cf6;
  --color-primary-600: #7c3aed;
  --color-primary-700: #6d28d9;
  --color-primary-800: #5b21b6;
  --color-primary-900: #4c1d95;
  
  /* Secondary colors (Indigo) */
  --color-secondary-50: #eef2ff;
  --color-secondary-100: #e0e7ff;
  --color-secondary-200: #c7d2fe;
  --color-secondary-300: #a5b4fc;
  --color-secondary-400: #818cf8;
  --color-secondary-500: #6366f1;
  --color-secondary-600: #4f46e5;
  --color-secondary-700: #4338ca;
  --color-secondary-800: #3730a3;
  --color-secondary-900: #312e81;
  
  /* Success colors (Green) */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #14532d;
  
  /* Warning colors (Amber) */
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;
  
  /* Error colors (Red) */
  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;
  
  /* Info colors (Blue) */
  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-200: #bfdbfe;
  --color-info-300: #93c5fd;
  --color-info-400: #60a5fa;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;
  --color-info-800: #1e40af;
  --color-info-900: #1e3a8a;
}

Dark Mode

Dark mode is supported through the data-theme="dark" attribute on the root element. Customize dark mode colors by overriding these variables:

css
:root.dark, :root[data-theme="dark"] {
  /* Base colors */
  --color-background: #0f172a;       /* Slate 900 */
  --color-surface: #1e293b;          /* Slate 800 */
  --color-border: #334155;           /* Slate 700 */
  --color-text: #f1f5f9;             /* Slate 100 */
  --color-muted: #94a3b8;            /* Slate 400 */
  
  /* Primary colors (Purple) - Dark Mode */
  --color-primary-50: #2d2b55;
  --color-primary-100: #393679;
  --color-primary-200: #44408c;
  --color-primary-300: #5b54bc;
  --color-primary-400: #6e66d9;
  --color-primary-500: #8b5cf6;
  --color-primary-600: #9f75ff;
  --color-primary-700: #b18aff;
  --color-primary-800: #c3a0ff;
  --color-primary-900: #d4b6ff;
  
  /* Secondary colors (Indigo) - Dark Mode */
  --color-secondary-50: #2a2954;
  --color-secondary-100: #343275;
  --color-secondary-200: #3e3b8f;
  --color-secondary-300: #5149b9;
  --color-secondary-400: #625ad7;
  --color-secondary-500: #6366f1;
  --color-secondary-600: #7f7cf4;
  --color-secondary-700: #9895f6;
  --color-secondary-800: #b2b0f8;
  --color-secondary-900: #cdccfa;
  
  /* And other color scales... */
}

Tailwind Configuration

The theme is also available through Tailwind CSS utility classes. Here's how to configure your tailwind.config.js:

javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          50: 'var(--color-primary-50)',
          100: 'var(--color-primary-100)',
          200: 'var(--color-primary-200)',
          300: 'var(--color-primary-300)',
          400: 'var(--color-primary-400)',
          500: 'var(--color-primary-500)',
          600: 'var(--color-primary-600)',
          700: 'var(--color-primary-700)',
          800: 'var(--color-primary-800)',
          900: 'var(--color-primary-900)',
          DEFAULT: 'var(--color-primary-500)'
        },
        secondary: {
          50: 'var(--color-secondary-50)',
          100: 'var(--color-secondary-100)',
          200: 'var(--color-secondary-200)',
          300: 'var(--color-secondary-300)',
          400: 'var(--color-secondary-400)',
          500: 'var(--color-secondary-500)',
          600: 'var(--color-secondary-600)',
          700: 'var(--color-secondary-700)',
          800: 'var(--color-secondary-800)',
          900: 'var(--color-secondary-900)',
          DEFAULT: 'var(--color-secondary-500)'
        },
        success: {
          50: 'var(--color-success-50)',
          100: 'var(--color-success-100)',
          200: 'var(--color-success-200)',
          300: 'var(--color-success-300)',
          400: 'var(--color-success-400)',
          500: 'var(--color-success-500)',
          600: 'var(--color-success-600)',
          700: 'var(--color-success-700)',
          800: 'var(--color-success-800)',
          900: 'var(--color-success-900)',
          DEFAULT: 'var(--color-success-500)'
        },
        // ... other color scales
        background: 'var(--color-background)',
        surface: 'var(--color-surface)',
        border: 'var(--color-border)',
        text: 'var(--color-text)',
        muted: 'var(--color-muted)',
      },
    },
  },
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
}

Using Colors in Components

When building components, use the Tailwind classes to apply colors consistently. Here are some examples:

svelte
<script>
  // Component props
  const { color = "primary" } = $props();
</script>

<!-- Using color variants in a component -->
<button class="bg-{color}-500 hover:bg-{color}-600 text-white px-4 py-2 rounded-md">
  {@render children?.()}
</button>

<style lang="postcss">
  @reference "../../twintrinsic.css";
  
  /* You can also use CSS variables directly in your styles */
  button {
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px var(--color-shadow);
  }
</style>