MijnUI

Mijn-UI uses Tailwind CSS variables for theming with comprehensive light and dark mode support.

Color System

Mijn-UI uses a comprehensive color system with CSS variables that automatically adapt to light and dark modes. Each color has multiple variants for different use cases.

Base Colors

background and foreground - Primary background and text colors
border - Default border color
muted - Muted backgrounds and secondary elements
inverse - Inverted colors for contrast

:root {
  --background: 0 0 100%;
  --background-alt: 0 0 100%;
  --foreground: 240 10% 4%;
  --border: 240 5% 84%;
  
  --muted: 240 6% 90%;
  --muted-alt: 240 6% 90%;
  --muted-foreground: 240 4% 46%;
  --border-muted: 240 5% 96%;
  
  --inverse: 240 10% 4%;
  --inverse-foreground: 0 0 98%;
  --border-inverse: 240 5% 26%;
}

Primary Colors

The primary color system includes multiple variants for different emphasis levels:

:root {
  --primary: 21 90% 48%;
  --primary-foreground: 20 100% 96%;
  --primary-subtle: 20 100% 92%;
  --primary-foreground-subtle: 20 75% 28%;
  --primary-emphasis: 20 88% 40%;
  --border-primary: 20 88% 40%;
  --border-primary-subtle: 21 98% 83%;
}

Secondary Colors

:root {
  --secondary: 240 5% 96%;
  --secondary-foreground: 240 5% 26%;
  --border-secondary: 240 6% 90%;
}

Status Colors

Each status color (success, warning, danger) includes a full set of variants:

Success Colors

:root {
  --success: 142 76% 36%;
  --success-foreground: 143 76% 97%;
  --success-subtle: 143 84% 93%;
  --success-foreground-subtle: 142 61% 20%;
  --success-emphasis: 142 72% 29%;
  --border-success: 142 72% 29%;
  --border-success-subtle: 142 79% 85%;
}

Warning Colors

:root {
  --warning: 41 96% 40%;
  --warning-foreground: 41 92% 95%;
  --warning-subtle: 41 97% 88%;
  --warning-foreground-subtle: 40 73% 26%;
  --warning-emphasis: 41 92% 33%;
  --border-warning: 41 92% 33%;
  --border-warning-subtle: 41 98% 77%;
}

Danger Colors

:root {
  --danger: 0 72% 51%;
  --danger-foreground: 0 86% 97%;
  --danger-subtle: 0 93% 94%;
  --danger-foreground-subtle: 0 63% 31%;
  --danger-emphasis: 0 74% 42%;
  --border-danger: 0 74% 42%;
  --border-danger-subtle: 0 96% 89%;
}

Design Tokens

Border Radius

:root {
  --radius-2xs: 0.125rem; /* 2px */
  --radius-xs: 0.25rem;   /* 4px */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-base: 0.5rem;  /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.25rem;  /* 20px */
  --radius-full: 9999px;
}

Shadows

:root {
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px rgba(16, 24, 40, 0.1), 0 2px 4px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 16px rgba(16, 24, 40, 0.08), 0 4px 6px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0 20px 24px rgba(16, 24, 40, 0.08), 0 8px 8px rgba(16, 24, 40, 0.03);
  --shadow-2xl: 0 24px 48px rgba(16, 24, 40, 0.18);
  --shadow-3xl: 0 32px 64px rgba(16, 24, 40, 0.14);
}

Dark Mode

Dark mode is automatically handled through the .dark class. All colors are redefined for optimal contrast and readability:

.dark {
  --background: 240 10% 4%;
  --background-alt: 240 4% 16%;
  --foreground: 0 0 100%;
  --border: 240 5% 26%;
  
  --primary: 20 96% 61%;
  --primary-foreground: 21 81% 15%;
  /* ... other dark mode colors */
}

Color Variants Explained

Each color family includes several variants for different use cases:

Base color (--primary) - The main color
Foreground (--primary-foreground) - Text color when used on the base color
Subtle (--primary-subtle) - Lighter version for backgrounds
Foreground Subtle (--primary-foreground-subtle) - Text color for subtle backgrounds
Emphasis (--primary-emphasis) - Darker/more saturated version for emphasis
Border (--border-primary) - Border color matching the emphasis
Border Subtle (--border-primary-subtle) - Lighter border color

Adding Custom Colors

To add new colors, you need to add them to your CSS file and to your tailwind.config.js file.

:root {
  --custom: 280 100% 70%;
  --custom-foreground: 0 0% 100%;
  --custom-subtle: 280 100% 95%;
  --custom-foreground-subtle: 280 100% 25%;
  --border-custom: 280 100% 70%;
}

.dark {
  --custom: 280 100% 80%;
  --custom-foreground: 280 100% 10%;
  --custom-subtle: 280 100% 15%;
  --custom-foreground-subtle: 280 100% 90%;
  --border-custom: 280 100% 80%;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        custom: "hsl(var(--custom))",
        "custom-foreground": "hsl(var(--custom-foreground))",
        "custom-subtle": "hsl(var(--custom-subtle))",
        "custom-foreground-subtle": "hsl(var(--custom-foreground-subtle))",
      },
      borderColor: {
        custom: "hsl(var(--border-custom))",
      },
    },
  },
}

You can now use the new colors in your components:

<div className="bg-custom text-custom-foreground border border-custom">
  Custom themed element
</div>

Typography

The theme uses Inter as the default font family:

body {
  font-family: "Inter", sans-serif;
}

Best Practices

Use semantic color names - Prefer primary, success, danger over specific color names
Leverage color variants - Use -subtle for backgrounds, -emphasis for interactive states
Test in both modes - Always verify your designs work in both light and dark modes
Maintain contrast - Ensure sufficient contrast ratios for accessibility

For more information on using different color formats, refer to the Tailwind CSS documentation.

Theming