> ## Documentation Index > Fetch the complete documentation index at: https://docs.monolex.ai/llms.txt > Use this file to discover all available pages before exploring further. # Transparency Flow Patterns > Deriving semi-transparent colors from Core using color-mix() for overlays and backgrounds ## What is Transparency Flow? Transparency Flow is the process of deriving semi-transparent versions of Core Colors using the `color-mix()` function with the `transparent` keyword. Unlike traditional `rgba()` or opacity property approaches, Transparency Flow: 1. Maintains perceptual color accuracy through OKLAB color space 2. Derives from CSS variables (dynamic, themeable) 3. Creates consistent visual hierarchy across UI elements ``` ┌──────────────────────────────────────────────────────────────────────────────┐ │ TRANSPARENCY FLOW ARCHITECTURE │ ├──────────────────────────────────────────────────────────────────────────────┤ │ │ │ CORE COLOR (100% Opacity) │ │ ═════════════════════════ │ │ --oklch-primary: oklch(55% 0.15 230); │ │ │ │ │ │ color-mix(in oklab, CORE, transparent N%) │ │ │ │ │ └────────────────────────────────────────────────────────────── │ │ │ │ │ ▼ │ │ ┌────────────────────────────────────────────────────────────────────────┐ │ │ │ TRANSPARENCY SPECTRUM │ │ │ │ │ │ │ │ 100% 80% 60% 40% 20% 10% 5% 0% │ │ │ │ #### #### ..## ...# .... .... .... .... │ │ │ │ │ │ │ │ solid subtle medium light very almost trace fully │ │ │ │ color tint fill wash light gone hint transparent │ │ │ │ │ │ │ │ Badge Status Hover Select Subtle Focus Glow None │ │ │ │ Label BG State BG Tint Ring Effect │ │ │ └────────────────────────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ ``` ### The transparent Keyword in CSS The `transparent` keyword in CSS represents `rgba(0, 0, 0, 0)` - a fully transparent color with no RGB component. When used in `color-mix()`: ```css theme={null} /* Mixing with transparent reduces opacity while preserving hue */ color-mix(in oklab, var(--color), transparent 80%) /* This creates a color with: - Same hue as --color - Same saturation as --color - 20% of original opacity (100% - 80% = 20%) */ ``` ### Why OKLAB for Transparency? OKLAB is chosen because: 1. **Perceptual accuracy**: The perceived opacity matches the specified percentage 2. **Color fidelity**: The underlying hue is preserved during transparency 3. **No color shift**: Unlike sRGB mixing, OKLAB does not shift toward gray *** ## Light Overlay System Light overlays create subtle highlights on dark backgrounds. They add visual feedback without overwhelming the content. ```css theme={null} /* Light overlays (using color-mix in oklab) */ --color-overlay-light-1: color-mix(in oklab, var(--color-text-primary), transparent 92%); --color-overlay-light-2: color-mix(in oklab, var(--color-text-primary), transparent 88%); --color-overlay-light-3: color-mix(in oklab, var(--color-text-primary), transparent 84%); --color-overlay-light-4: color-mix(in oklab, var(--color-text-primary), transparent 80%); ``` ### Light Overlay Opacity Progression ``` ┌──────────────────────────────────────────────────────────────────────────────┐ │ LIGHT OVERLAY OPACITY PROGRESSION │ ├──────────────────────────────────────────────────────────────────────────────┤ │ │ │ Variable Transparent % Resulting Opacity │ │ ═════════════════════════ ═════════════ ═══════════════════ │ │ │ │ --color-overlay-light-1 92% 8% (100 - 92) │ │ --color-overlay-light-2 88% 12% (100 - 88) │ │ --color-overlay-light-3 84% 16% (100 - 84) │ │ --color-overlay-light-4 80% 20% (100 - 80) │ │ │ │ Progression Pattern: +4% opacity per step │ │ Base value: 8% -> 12% -> 16% -> 20% │ │ │ │ Visual Representation: │ │ │ │ Light-1 (8%) .................... Barely visible │ │ Light-2 (12%) =................... Subtle hint │ │ Light-3 (16%) ==.................. Noticeable tint │ │ Light-4 (20%) ===................. Clear overlay │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ ``` ### Light Overlay Usage Patterns ```css theme={null} /* Hover state - subtle feedback */ .list-item:hover { background: var(--color-overlay-light-1); /* 8% overlay */ } /* Focus state - more visible */ .list-item:focus { background: var(--color-overlay-light-2); /* 12% overlay */ } /* Selected state - clear indication */ .list-item.selected { background: var(--color-overlay-light-3); /* 16% overlay */ } /* Active/pressed state - strongest */ .list-item:active { background: var(--color-overlay-light-4); /* 20% overlay */ } ``` ### Legacy Fallback Variables ```css theme={null} /* Legacy rgba fallbacks */ --color-overlay-light-1-fallback: rgba(147, 161, 161, 0.08); --color-overlay-light-2-fallback: rgba(147, 161, 161, 0.12); --color-overlay-dark-1-fallback: rgba(0, 0, 0, 0.05); --color-overlay-dark-2-fallback: rgba(0, 0, 0, 0.1); ``` These fallbacks exist for: 1. Older browsers without `color-mix()` support 2. Static color values when CSS variable resolution fails 3. Documentation of intended opacity values *** ## Dark Overlay System Dark overlays create shadows and depth in the UI. They use black as the base color for universal darkening. ```css theme={null} /* Dark overlays (using color-mix in oklab) */ --color-overlay-dark-1: color-mix(in oklab, black, transparent 95%); --color-overlay-dark-2: color-mix(in oklab, black, transparent 90%); --color-overlay-dark-3: color-mix(in oklab, black, transparent 80%); --color-overlay-dark-4: color-mix(in oklab, black, transparent 70%); ``` ### Dark Overlay Opacity Progression ``` ┌──────────────────────────────────────────────────────────────────────────────┐ │ DARK OVERLAY OPACITY PROGRESSION │ ├──────────────────────────────────────────────────────────────────────────────┤ │ │ │ Variable Transparent % Resulting Opacity │ │ ═════════════════════════ ═════════════ ═══════════════════ │ │ │ │ --color-overlay-dark-1 95% 5% (100 - 95) │ │ --color-overlay-dark-2 90% 10% (100 - 90) │ │ --color-overlay-dark-3 80% 20% (100 - 80) │ │ --color-overlay-dark-4 70% 30% (100 - 70) │ │ │ │ Progression Pattern: Accelerating (+5, +10, +10) │ │ Base value: 5% -> 10% -> 20% -> 30% │ │ │ │ Visual Representation (on light background): │ │ │ │ Dark-1 (5%) .................... Very subtle shadow │ │ Dark-2 (10%) =................... Light shadow │ │ Dark-3 (20%) ===................. Medium shadow │ │ Dark-4 (30%) ======.............. Heavy shadow/scrim │ │ │ │ NOTE: Dark overlays use larger jumps because visual perception │ │ of darkness requires more contrast to notice differences. │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ ``` ### Light vs Dark Overlay Comparison ``` ┌──────────────────────────────────────────────────────────────────────────────┐ │ LIGHT VS DARK OVERLAY COMPARISON │ ├──────────────────────────────────────────────────────────────────────────────┤ │ │ │ LIGHT OVERLAYS DARK OVERLAYS │ │ ══════════════ ═════════════ │ │ │ │ Source: --color-text-primary Source: black │ │ (Theme-dependent, adapts) (Fixed, universal) │ │ │ │ Opacity steps: 8, 12, 16, 20% Opacity steps: 5, 10, 20, 30% │ │ (Linear +4% progression) (Accelerating progression) │ │ │ │ Use case: Use case: │ │ • Hover states on dark BG • Shadows │ │ • Selection highlights • Scrims/backdrops │ │ • Active indicators • Disabled overlays │ │ • Focus rings • Modal backgrounds │ │ │ │ Appearance: Appearance: │ │ Lightens the background Darkens the background │ │ (white tint on dark theme) (universal darkening) │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ ``` *** ## Semantic Color Transparency (Muted Variants) Muted colors are semi-transparent versions of semantic colors. They are used for backgrounds that need to convey meaning without overwhelming content. ```css theme={null} /* Complete muted color derivations */ --oklch-primary-muted: color-mix(in oklab, var(--oklch-primary), transparent 80%); --oklch-success-muted: color-mix(in oklab, var(--oklch-success), transparent 80%); --oklch-danger-muted: color-mix(in oklab, var(--oklch-danger), transparent 80%); --oklch-warning-muted: color-mix(in oklab, var(--oklch-warning), transparent 80%); ``` ### Muted Color Architecture ``` ┌──────────────────────────────────────────────────────────────────────────────┐ │ MUTED COLOR DERIVATION ARCHITECTURE │ ├──────────────────────────────────────────────────────────────────────────────┤ │ │ │ CORE COLORS (OKLCH) MUTED VARIANTS (OKLAB + transparent) │ │ ═══════════════════ ════════════════════════════════════ │ │ │ │ --oklch-primary ───────────────► --oklch-primary-muted │ │ oklch(55% 0.15 230) color-mix(..., transparent 80%) │ │ #################### ................#### │ │ 100% opacity 20% opacity │ │ │ │ --oklch-success ───────────────► --oklch-success-muted │ │ oklch(55% 0.15 130) color-mix(..., transparent 80%) │ │ #################### ................#### │ │ 100% opacity 20% opacity │ │ │ │ --oklch-danger ────────────────► --oklch-danger-muted │ │ oklch(55% 0.18 25) color-mix(..., transparent 80%) │ │ #################### ................#### │ │ 100% opacity 20% opacity │ │ │ │ --oklch-warning ───────────────► --oklch-warning-muted │ │ oklch(65% 0.15 85) color-mix(..., transparent 80%) │ │ #################### ................#### │ │ 100% opacity 20% opacity │ │ │ │ PATTERN: All muted variants use 80% transparent = 20% opacity │ │ This creates consistent visual weight across semantic colors │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ ``` *** ## Selection Background Transparency Selection states use the primary color at 20% opacity to indicate selected items without obscuring content. ```css theme={null} /* Selection state - using color-mix for transparency */ --color-bg-selected: color-mix(in oklab, var(--oklch-primary), transparent 80%); --color-bg-selected-fallback: rgba(35, 128, 199, 0.2); /* Legacy fallback */ ``` ### Selection Transparency Analysis ``` ┌──────────────────────────────────────────────────────────────────────────────┐ │ SELECTION BACKGROUND TRANSPARENCY │ ├──────────────────────────────────────────────────────────────────────────────┤ │ │ │ Selection Background Formula: │ │ ════════════════════════════ │ │ │ │ color-mix(in oklab, var(--oklch-primary), transparent 80%) │ │ │ │ Components: │ │ ├── Color space: oklab (perceptually uniform) │ │ ├── Primary color: var(--oklch-primary) = oklch(55% 0.15 230) [Blue] │ │ ├── Mix target: transparent │ │ └── Mix ratio: 80% transparent = 20% of primary visible │ │ │ │ Legacy Fallback Analysis: │ │ ═════════════════════════ │ │ │ │ rgba(35, 128, 199, 0.2) │ │ ├── R: 35 (dark blue) │ │ ├── G: 128 (medium) │ │ ├── B: 199 (dominant) │ │ └── A: 0.2 (20% opacity) - matches the color-mix result │ │ │ │ Visual Result: │ │ ┌────────────────────────────────────────────────────────────────────────┐ │ │ │ ══════════════════════════════════════════════════════════════════ │ │ │ │ ................................................................ │ │ │ │ ...... Selected file: package.json ........................... │ │ │ │ ................................................................ │ │ │ │ ................................................................ │ │ │ │ │ │ │ │ = = Selected row (20% blue tint) │ │ │ │ . = Normal rows (no tint) │ │ │ └────────────────────────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ ``` *** ## Status Badge Transparency System Status badges use a three-color system: full opacity for icons/text, 20% opacity for backgrounds. ```css theme={null} /* Success Status (Running, Active, Connected) */ --status-success: var(--oklch-success); --status-success-bg: color-mix(in oklab, var(--oklch-success), transparent 80%); --status-success-text: var(--oklch-success); /* Warning Status (Pending, Not Started, Orphan) */ --status-warning: var(--oklch-warning); --status-warning-bg: color-mix(in oklab, var(--oklch-warning), transparent 80%); --status-warning-text: var(--oklch-warning); /* Danger Status (Error, Failed, Disconnected) */ --status-danger: var(--oklch-danger); --status-danger-bg: color-mix(in oklab, var(--oklch-danger), transparent 80%); --status-danger-text: var(--oklch-danger); /* Info Status (Informational, Neutral) */ --status-info: var(--oklch-info); --status-info-bg: color-mix(in oklab, var(--oklch-info), transparent 80%); --status-info-text: var(--oklch-info); ``` ### Status Badge Visual System ``` ┌──────────────────────────────────────────────────────────────────────────────┐ │ STATUS BADGE TRANSPARENCY SYSTEM │ ├──────────────────────────────────────────────────────────────────────────────┤ │ │ │ Each status badge has three color components: │ │ │ │ 1. --status-* : Full opacity color (icons, borders) │ │ 2. --status-*-bg : 20% opacity background (badge fill) │ │ 3. --status-*-text : Full opacity text color (label) │ │ │ │ ┌────────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ SUCCESS BADGE │ │ │ │ ┌───────────────────────────────────────────────┐ │ │ │ │ │ #### .............................. │ │ │ │ │ │ icon Running (text) bg fill │ │ │ │ │ │ 100% 100% 20% │ │ │ │ │ └───────────────────────────────────────────────┘ │ │ │ │ border: 1px solid var(--status-success); /* 100% */ │ │ │ │ background: var(--status-success-bg); /* 20% */ │ │ │ │ color: var(--status-success-text); /* 100% */ │ │ │ │ │ │ │ └────────────────────────────────────────────────────────────────────────┘ │ │ │ │ CONSISTENCY: All status backgrounds use exactly 80% transparent (20% opacity)│ │ │ └──────────────────────────────────────────────────────────────────────────────┘ ``` *** ## Light Theme Transparency Overrides Light themes require different overlay values because dark elements on white backgrounds are more visible than light elements on dark backgrounds. ```css theme={null} [data-theme="light"] { /* Overlay/Transparency - Light Theme */ --color-overlay-light-1: rgba(0, 0, 0, 0.03); --color-overlay-light-2: rgba(0, 0, 0, 0.05); --color-overlay-light-3: rgba(0, 0, 0, 0.08); --color-overlay-light-4: rgba(0, 0, 0, 0.12); --color-overlay-dark-1: rgba(0, 0, 0, 0.05); --color-overlay-dark-2: rgba(0, 0, 0, 0.1); --color-overlay-dark-3: rgba(0, 0, 0, 0.15); --color-overlay-dark-4: rgba(0, 0, 0, 0.2); } ``` ### Dark vs Light Theme Comparison ``` ┌──────────────────────────────────────────────────────────────────────────────┐ │ TRANSPARENCY COMPARISON: DARK VS LIGHT THEME │ ├──────────────────────────────────────────────────────────────────────────────┤ │ │ │ LIGHT OVERLAYS │ │ ══════════════ │ │ │ │ Variable Dark Theme Light Theme │ │ ────────────────────────────────────────────────────────────────────────── │ │ overlay-light-1 color-mix(..., 92%) rgba(0,0,0, 0.03) │ │ = 8% light on dark = 3% dark on light │ │ │ │ overlay-light-2 color-mix(..., 88%) rgba(0,0,0, 0.05) │ │ = 12% light on dark = 5% dark on light │ │ │ │ overlay-light-3 color-mix(..., 84%) rgba(0,0,0, 0.08) │ │ = 16% light on dark = 8% dark on light │ │ │ │ overlay-light-4 color-mix(..., 80%) rgba(0,0,0, 0.12) │ │ = 20% light on dark = 12% dark on light │ │ │ │ ────────────────────────────────────────────────────────────────────────── │ │ │ │ KEY INSIGHT: Light theme overlays use LOWER opacity values because │ │ dark elements on white backgrounds are more visible than light │ │ elements on dark backgrounds. │ │ │ │ ALSO NOTE: Light theme uses rgba() instead of color-mix() because │ │ the overlays are simple black with varying opacity, not derived │ │ from theme colors. │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ ``` *** ## THE CENTER ### How Transparency Communicates Information Flow ``` Connection to Core-Flow: ├── Transparency levels encode information hierarchy ├── 20% = background context (muted) ├── 8-20% = interactive states (overlays) └── 100% = primary information (foreground) ``` Transparency is a fundamental tool for communicating information hierarchy. When a color becomes more transparent, it signals "this is context, not primary content." The human eye naturally focuses on high-contrast (opaque) elements while perceiving transparent elements as environmental. In the Gestalt Color System: * **Full opacity** (100%): Primary actions, important text, active states * **Mid opacity** (20%): Selection backgrounds, status badges, semantic regions * **Low opacity** (5-12%): Hover states, subtle separators, ambient feedback This creates a clear visual language where opacity directly maps to information priority. *** Learn how shadows create depth and elevation in the UI