/* Theme Name: Gladding Digital Child Theme Theme URI: https://gladdingdigital.co.uk Description: GeneratePress child theme with Gladding Digital Design System tokens Author: Gladding Digital Author URI: https://gladdingdigital.co.uk Template: generatepress Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: gladding-digital */ /* ========================================================================== GLADDING DIGITAL DESIGN SYSTEM CSS Custom Properties (Design Tokens) ========================================================================== */ :root { /* ====================================================================== SPACING SCALE Based on 8px grid, using rem units Usage: var(--spacing-md) for padding, margin, gap, etc. ====================================================================== */ --spacing-xs: 0.5rem; /* 8px */ --spacing-sm: 1rem; /* 16px */ --spacing-md: 1.5rem; /* 24px */ --spacing-lg: 2rem; /* 32px */ --spacing-xl: 3rem; /* 48px */ --spacing-2xl: 4rem; /* 64px */ --spacing-3xl: 6rem; /* 96px */ --spacing-4xl: 8rem; /* 128px */ /* ====================================================================== BORDER RADIUS Usage: var(--radius-md) for buttons, cards, etc. ====================================================================== */ --radius-sm: 0.25rem; /* 4px - Subtle rounding */ --radius-md: 0.5rem; /* 8px - Buttons, inputs */ --radius-lg: 1rem; /* 16px - Cards, panels */ --radius-xl: 1.5rem; /* 24px - Large containers */ --radius-full: 9999px; /* Pills, avatars */ /* ====================================================================== SHADOWS Usage: var(--shadow-md) for cards, dropdowns, etc. ====================================================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); /* ====================================================================== TRANSITIONS Usage: var(--transition-normal) for hover states, animations, etc. ====================================================================== */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 500ms ease; /* ====================================================================== EXTENDED COLOUR SYSTEM Built on GeneratePress Global Colors using color-mix() Browser support: ~94% (no IE11, older Safari < 16.4) ====================================================================== */ /* ---------------------------------------------------------------------- ACCENT COLOUR VARIANTS Base: var(--accent) from GP Customizer ---------------------------------------------------------------------- */ /* Accent - Alpha (Transparency) Use for: overlays, hover backgrounds, focus rings, subtle fills */ --accent-alpha-10: color-mix(in srgb, var(--accent) 10%, transparent); --accent-alpha-20: color-mix(in srgb, var(--accent) 20%, transparent); --accent-alpha-30: color-mix(in srgb, var(--accent) 30%, transparent); --accent-alpha-40: color-mix(in srgb, var(--accent) 40%, transparent); --accent-alpha-50: color-mix(in srgb, var(--accent) 50%, transparent); --accent-alpha-60: color-mix(in srgb, var(--accent) 60%, transparent); --accent-alpha-70: color-mix(in srgb, var(--accent) 70%, transparent); --accent-alpha-80: color-mix(in srgb, var(--accent) 80%, transparent); --accent-alpha-90: color-mix(in srgb, var(--accent) 90%, transparent); /* Accent - Tints (mixed with white) Use for: light backgrounds, hover states on light themes, badges */ --accent-tint-90: color-mix(in srgb, var(--accent) 10%, white); --accent-tint-80: color-mix(in srgb, var(--accent) 20%, white); --accent-tint-70: color-mix(in srgb, var(--accent) 30%, white); --accent-tint-60: color-mix(in srgb, var(--accent) 40%, white); --accent-tint-50: color-mix(in srgb, var(--accent) 50%, white); --accent-tint-40: color-mix(in srgb, var(--accent) 60%, white); --accent-tint-30: color-mix(in srgb, var(--accent) 70%, white); --accent-tint-20: color-mix(in srgb, var(--accent) 80%, white); --accent-tint-10: color-mix(in srgb, var(--accent) 90%, white); /* Accent - Shades (mixed with black) Use for: hover/active states on buttons, dark accents */ --accent-shade-10: color-mix(in srgb, var(--accent) 90%, black); --accent-shade-20: color-mix(in srgb, var(--accent) 80%, black); --accent-shade-30: color-mix(in srgb, var(--accent) 70%, black); --accent-shade-40: color-mix(in srgb, var(--accent) 60%, black); --accent-shade-50: color-mix(in srgb, var(--accent) 50%, black); /* ---------------------------------------------------------------------- CONTRAST COLOUR VARIANTS Base: var(--contrast) from GP Customizer ---------------------------------------------------------------------- */ /* Contrast - Alpha (Transparency) Use for: text on coloured backgrounds, overlay text, borders */ --contrast-alpha-10: color-mix(in srgb, var(--contrast) 10%, transparent); --contrast-alpha-20: color-mix(in srgb, var(--contrast) 20%, transparent); --contrast-alpha-30: color-mix(in srgb, var(--contrast) 30%, transparent); --contrast-alpha-40: color-mix(in srgb, var(--contrast) 40%, transparent); --contrast-alpha-50: color-mix(in srgb, var(--contrast) 50%, transparent); --contrast-alpha-60: color-mix(in srgb, var(--contrast) 60%, transparent); --contrast-alpha-70: color-mix(in srgb, var(--contrast) 70%, transparent); --contrast-alpha-80: color-mix(in srgb, var(--contrast) 80%, transparent); --contrast-alpha-90: color-mix(in srgb, var(--contrast) 90%, transparent); /* Contrast - Tints (mixed with white) Use for: secondary text, borders, disabled states */ --contrast-tint-90: color-mix(in srgb, var(--contrast) 10%, white); --contrast-tint-80: color-mix(in srgb, var(--contrast) 20%, white); --contrast-tint-70: color-mix(in srgb, var(--contrast) 30%, white); --contrast-tint-60: color-mix(in srgb, var(--contrast) 40%, white); --contrast-tint-50: color-mix(in srgb, var(--contrast) 50%, white); --contrast-tint-40: color-mix(in srgb, var(--contrast) 60%, white); --contrast-tint-30: color-mix(in srgb, var(--contrast) 70%, white); --contrast-tint-20: color-mix(in srgb, var(--contrast) 80%, white); --contrast-tint-10: color-mix(in srgb, var(--contrast) 90%, white); /* ---------------------------------------------------------------------- BASE COLOUR VARIANTS Base: var(--base) from GP Customizer ---------------------------------------------------------------------- */ /* Base - Alpha (Transparency) Use for: glass effects, light overlays on dark backgrounds */ --base-alpha-10: color-mix(in srgb, var(--base) 10%, transparent); --base-alpha-20: color-mix(in srgb, var(--base) 20%, transparent); --base-alpha-30: color-mix(in srgb, var(--base) 30%, transparent); --base-alpha-40: color-mix(in srgb, var(--base) 40%, transparent); --base-alpha-50: color-mix(in srgb, var(--base) 50%, transparent); --base-alpha-60: color-mix(in srgb, var(--base) 60%, transparent); --base-alpha-70: color-mix(in srgb, var(--base) 70%, transparent); --base-alpha-80: color-mix(in srgb, var(--base) 80%, transparent); --base-alpha-90: color-mix(in srgb, var(--base) 90%, transparent); /* Base - Shades (mixed with black) Use for: subtle backgrounds, zebra striping, hover states */ --base-shade-10: color-mix(in srgb, var(--base) 90%, black); --base-shade-20: color-mix(in srgb, var(--base) 80%, black); --base-shade-30: color-mix(in srgb, var(--base) 70%, black); /* ---------------------------------------------------------------------- SEMANTIC / UTILITY COLOURS Brand-independent colours for common UI states ---------------------------------------------------------------------- */ /* Success (Green) */ --color-success: #16a34a; --color-success-light: #dcfce7; --color-success-dark: #166534; --color-success-alpha-20: color-mix(in srgb, var(--color-success) 20%, transparent); /* Warning (Amber) */ --color-warning: #d97706; --color-warning-light: #fef3c7; --color-warning-dark: #92400e; --color-warning-alpha-20: color-mix(in srgb, var(--color-warning) 20%, transparent); /* Error / Danger (Red) */ --color-error: #dc2626; --color-error-light: #fee2e2; --color-error-dark: #991b1b; --color-error-alpha-20: color-mix(in srgb, var(--color-error) 20%, transparent); /* Info (Blue) */ --color-info: #2563eb; --color-info-light: #dbeafe; --color-info-dark: #1e40af; --color-info-alpha-20: color-mix(in srgb, var(--color-info) 20%, transparent); /* ---------------------------------------------------------------------- NEUTRAL GREYS For borders, disabled states, placeholders, subtle backgrounds Independent of brand colours for consistent UI elements ---------------------------------------------------------------------- */ --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4; --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040; --neutral-800: #262626; --neutral-900: #171717; /* ---------------------------------------------------------------------- COMMON SEMANTIC ALIASES Descriptive names for frequent use cases ---------------------------------------------------------------------- */ /* Borders */ --border-light: var(--neutral-200); --border-default: var(--neutral-300); --border-dark: var(--neutral-400); /* Text hierarchy (for use when GP contrast vars aren't suitable) */ --text-primary: var(--neutral-900); --text-secondary: var(--neutral-600); --text-tertiary: var(--neutral-500); --text-disabled: var(--neutral-400); --text-inverse: var(--neutral-50); /* Backgrounds */ --bg-subtle: var(--neutral-50); --bg-muted: var(--neutral-100); --bg-disabled: var(--neutral-200); /* Focus ring */ --focus-ring: var(--accent-alpha-50); } /* ========================================================================== UTILITY CLASSES Optional helper classes for common patterns ========================================================================== */ /* Focus ring utility - apply to interactive elements */ .focus-ring:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Screen reader only - visually hidden but accessible */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== NOTES FOR DEVELOPERS ========================================================================== COLOUR SYSTEM OVERVIEW ---------------------- This system extends GeneratePress Global Colors with variants generated using CSS color-mix(). Change the base colour in GP Customizer and all variants update automatically. Browser Support: ~94% (all modern browsers, no IE11) GP BASE COLOURS (set in Customizer > Colors): - var(--accent) Primary brand colour - var(--contrast) Dark text/backgrounds - var(--contrast-2) Secondary dark - var(--contrast-3) Tertiary dark - var(--base) Light backgrounds - var(--base-2) Secondary light - var(--base-3) Tertiary light EXTENDED VARIANTS: Alpha (transparency): - var(--accent-alpha-10) to var(--accent-alpha-90) - var(--contrast-alpha-10) to var(--contrast-alpha-90) - var(--base-alpha-10) to var(--base-alpha-90) Tints (mixed with white - lighter): - var(--accent-tint-90) = 10% accent + 90% white (very light) - var(--accent-tint-10) = 90% accent + 10% white (barely lighter) Shades (mixed with black - darker): - var(--accent-shade-10) = 90% accent + 10% black (slightly darker) - var(--accent-shade-50) = 50% accent + 50% black (much darker) NAMING CONVENTION: --{color}-{variant}-{amount} - color: accent, contrast, base - variant: alpha, tint, shade - amount: 10, 20, 30, 40, 50, 60, 70, 80, 90 For tints: higher number = more white (lighter result) For shades: higher number = more black (darker result) For alpha: number = opacity percentage COMMON USE CASES: | Need | Use | |------|-----| | Hover background on light | var(--accent-alpha-10) | | Button hover (darker) | var(--accent-shade-20) | | Light accent background | var(--accent-tint-90) | | Subtle border | var(--contrast-alpha-20) | | Focus ring | var(--focus-ring) or var(--accent-alpha-50) | | Disabled text | var(--text-disabled) | | Form validation error | var(--color-error) | | Success message bg | var(--color-success-light) | ========================================================================== */