Corex Templates: Advanced CSS Variable Architecture

Corex Templates represent a sophisticated approach to CSS variable management, offering three distinct architectural patterns that scale from simple styling to complex multi-theme systems. Each template provides a different level of abstraction and functionality while maintaining component consistency.

Template	Modes	Themes	Export
Corex			CSS & Tailwind
Modex			CSS & Tailwind
Themex			CSS & Tailwind

Corex Template

This is the default template for Corex.

The template consists of Global tokens, Semantic tokens and Components

Corex CSS Corex Tailwind Corex Design Tokens

Corex CSS

npm install @netoum/corex-css

In you main CSS file import all Corex CSS components or only some components

            @import "@netoum/corex-css";

Corex Tailwind

npm install @netoum/corex-tailwind

In you main CSS file import all Corex CSS components or only some components

               @import "@netoum/corex-tailwind";

Modex Template

Based on the default Corex template, it adds refencing for dark and light mode to each color with [data-mode="light"] and [data-mode="dark"]

The template consists of Global tokens, Modes tokens and Components

Modex CSS Modex Tailwind Modex Design Tokens

Modex CSS

npm install @netoum/modex-css

In you main CSS file import all Modex CSS components or only some components

           @import "@netoum/modex-css";

Modex Tailwind

npm install @netoum/modex-tailwind

In you main CSS file import all Modex CSS components or only some components

               @import "@netoum/modex-tailwind";

Themex Template

Based on the default Corex template, it adds refencing for multi level themes and modes to each color with [data-theme="${theme}"] and [data-mode="${mode}"]

The template consists of Global tokens, Themes tokens and Components

Themex CSS Themex Tailwind Themex Design Tokens

Themex CSS

npm install @netoum/themex-css

In you main CSS file import all Themex CSS components or only some components

         @import "@netoum/themex-css";

Themex Tailwind

npm install @netoum/themex-tailwind

In you main CSS file import all Themex CSS components or only some components

             @import "@netoum/themex-tailwind";

Corex: Foundation Template

The simplest architecture focuses on direct variable mapping with minimal abstraction.


    /* Corex Template - Direct Mapping */
    --color-gray-2: #f7f7f7;
    --color-base-2: var(--color-gray-2);
    .button {
      background-color: var(--color-base-2);
    }

Architecture Characteristics:

Direct Token Mapping: Colors map directly to semantic tokens
Minimal Abstraction: One layer of indirection between raw values and components
Single Context: No mode or theme switching capabilities
Ideal For: Simple projects, prototypes, or applications with static styling needs

Modex: Mode-Aware Template

Introduces light/dark mode capabilities through conditional variable resolution.


    /* Modex Template - Mode-Aware System */
    --color-gray-2: #f7f7f7;
    --color-dark-gray-2: #050504;
    --color-base-2: var(--mode-color-base-2);
    [data-mode=light] {
      --mode-color-base-2: var(--color-gray-2);
    }
    [data-mode=dark] {
      --mode-color-base-2: var(--color-dark-gray-2);
    }
    .button {
      background-color: var(--color-base-2);
    }

Architecture Characteristics:

Mode-Conditional Resolution: Variables resolve differently based on data-mode attribute
Dual Color Palettes: Maintains separate color definitions for light and dark contexts
Contextual Switching: Automatic theme switching through CSS attribute selectors
Ideal For: Applications requiring light/dark mode support with consistent UX patterns

Themex: Multi-Theme Template

The most sophisticated system supporting multiple themes with mode variations.


    /* Themex Template - Multi-Theme Architecture */
    --color-gray-2: #f7f7f7;
    --color-dark-gray-2: #050504;
    --color-pastel-gray-2: #f7f7f7;
    --color-pastel-dark-gray-2: #050504;
    --color-base-2: var(--theme-color-base-2);
    [data-theme=neo][data-mode=light] {
      --theme-color-base-2: var(--color-gray-2);
    }
    [data-theme=neo][data-mode=dark] {
      --theme-color-base-2: var(--color-dark-gray-2);
    }
    [data-theme=revo][data-mode=light] {
      --theme-color-base-2: var(--color-pastel-gray-2);
    }
    [data-theme=revo][data-mode=dark] {
      --theme-color-base-2: var(--color-pastel-dark-gray-2);
    }
    .button {
      background-color: var(--color-base-2);
    }

Architecture Characteristics:

Multi-Dimensional Theming: Supports multiple themes, each with mode variations
Comprehensive Color Palettes: Maintains distinct color sets for each theme-mode combination
Complex Conditional Logic: Uses compound CSS selectors for precise variable resolution
Maximum Flexibility: Enables brand variations, user preferences, and contextual styling
Ideal For: Enterprise applications, white-label products, or platforms requiring extensive customization

Installation Theming