/* * ============================================================================ * UME HEALTH — CANONICAL DESIGN TOKENS * ============================================================================ * * Source: Brand Guideline - UME.pdf (pages 6, 8) * Logo SVGs extracted from /Downloads/UME & LUMEN BRAND GUIDELINE/ * * Usage: Load globally via LWR Head Markup or loadStyle(this, umeDesignTokens) * Static Resource name: umeDesignTokens * * Prefix: --ume- (per .cursor/rules/experience-cloud.mdc convention) * * Sections: * 1. Core Brand Colors & Tint/Shade Scales * 2. Semantic / Feedback Colors * 3. Slot & Availability State Colors * 4. Surface & Background * 5. Text Colors * 6. Border Colors * 7. Link Colors * 8. Typography — Font Families * 9. Typography — Type Scale (Major Third 1.25×) * 10. Typography — Font Weights * 11. Typography — Line Heights * 12. Typography — Letter Spacing * 13. Spacing Scale (4 px base) * 14. Border Radius / Shape * 15. Elevation / Shadows * 16. Z-Index Scale * 17. Transitions & Motion * 18. Responsive Breakpoints (documentation tokens) * 19. Opacity Scale * 20. Interactive State Tokens * 21. Focus Ring * 22. Component Tokens — Buttons * 23. Component Tokens — Cards * 24. Component Tokens — Form Inputs * 25. Component Tokens — Navigation / Header * 26. Component Tokens — Badges & Tags * 27. Component Tokens — Alerts / Toasts * 28. Component Tokens — Tables * 29. Component Tokens — Stepper / Wizard * 30. Component Tokens — Slot Grid * 31. Portal Layout Tokens * 32. Logo Asset References * * ============================================================================ */ :root { /* ======================================================================== * 1. CORE BRAND COLORS & TINT / SHADE SCALES * ======================================================================== */ /* Primary Blue — #1CA8E1 (Brand Guideline - UME.pdf, page 6; logo SVG) */ --ume-color-primary: #1CA8E1; --ume-color-primary-5: #F0FAFD; --ume-color-primary-10: #E1F4FC; --ume-color-primary-20: #B3E4F7; --ume-color-primary-30: #85D4F2; --ume-color-primary-40: #57C4ED; --ume-color-primary-50: #1CA8E1; --ume-color-primary-60: #178EC0; --ume-color-primary-70: #12749F; --ume-color-primary-80: #0D5A7E; --ume-color-primary-90: #08405D; --ume-color-primary-95: #04202F; --ume-color-on-primary: #FFFFFF; /* Secondary Green — #94CCB4 (Brand Guideline - UME.pdf, page 6; logo SVG) */ --ume-color-secondary: #94CCB4; --ume-color-secondary-5: #F4FAF7; --ume-color-secondary-10: #E9F5EF; --ume-color-secondary-20: #D3EBDF; --ume-color-secondary-30: #BDE1CF; --ume-color-secondary-40: #A8D7C2; --ume-color-secondary-50: #94CCB4; --ume-color-secondary-60: #74B89A; --ume-color-secondary-70: #56A380; --ume-color-secondary-80: #3F7E62; --ume-color-secondary-90: #2A5944; --ume-color-secondary-95: #152D22; --ume-color-on-secondary: #003942; /* Accent / Logo Light Blue — #69C4DB (logo SVG) */ --ume-color-accent: #69C4DB; --ume-color-accent-light: #A8DCEA; --ume-color-accent-dark: #3AACCA; --ume-color-on-accent: #003942; /* Dark Teal — #003942 (Brand Guideline - UME.pdf, page 6) */ --ume-color-dark: #003942; --ume-color-dark-light: #005C6A; --ume-color-dark-lighter: #007F92; --ume-color-on-dark: #FFFFFF; /* Black */ --ume-color-black: #000000; --ume-color-white: #FFFFFF; /* ======================================================================== * 2. SEMANTIC / FEEDBACK COLORS * ======================================================================== */ /* Success */ --ume-color-success: #059669; --ume-color-success-light: #D1FAE5; --ume-color-success-dark: #065F46; --ume-color-on-success: #FFFFFF; /* Warning */ --ume-color-warning: #D97706; --ume-color-warning-light: #FEF3C7; --ume-color-warning-dark: #92400E; --ume-color-on-warning: #FFFFFF; /* Error / Destructive */ --ume-color-error: #DC2626; --ume-color-error-light: #FEE2E2; --ume-color-error-dark: #991B1B; --ume-color-on-error: #FFFFFF; /* Info */ --ume-color-info: #2563EB; --ume-color-info-light: #DBEAFE; --ume-color-info-dark: #1E40AF; --ume-color-on-info: #FFFFFF; /* ======================================================================== * 3. SLOT & AVAILABILITY STATE COLORS * ======================================================================== */ --ume-color-slot-available: #059669; --ume-color-slot-limited: #D97706; --ume-color-slot-blocked: #9CA3AF; --ume-color-slot-selected: #1CA8E1; --ume-color-slot-unavailable: #E5E7EB; /* ======================================================================== * 4. SURFACE & BACKGROUND * ======================================================================== */ --ume-color-surface: #EDF8FD; --ume-color-surface-elevated: #FFFFFF; --ume-color-surface-muted: #F4F6F9; --ume-color-surface-sunken: #E8EDF2; --ume-color-surface-inverse: #003942; --ume-color-surface-overlay: rgba(0, 57, 66, 0.5); --ume-color-surface-scrim: rgba(0, 0, 0, 0.4); --ume-color-background-app: #FFFFFF; --ume-color-background-page: #F4F6F9; /* ======================================================================== * 5. TEXT COLORS * ======================================================================== */ --ume-color-text: #000000; --ume-color-text-primary: #000000; --ume-color-text-secondary: #003942; --ume-color-text-tertiary: #4B5563; --ume-color-text-muted: #6B7280; --ume-color-text-disabled: #9CA3AF; --ume-color-text-placeholder: #9CA3AF; --ume-color-text-inverse: #FFFFFF; --ume-color-text-on-primary: #FFFFFF; --ume-color-text-on-dark: #FFFFFF; --ume-color-text-brand: #1CA8E1; /* ======================================================================== * 6. BORDER COLORS * ======================================================================== */ --ume-color-border: #E5E7EB; --ume-color-border-subtle: #F3F4F6; --ume-color-border-strong: #D1D5DB; --ume-color-border-inverse: rgba(255, 255, 255, 0.2); --ume-color-border-focus: #1CA8E1; --ume-color-border-error: #DC2626; --ume-color-border-success: #059669; --ume-color-border-warning: #D97706; /* ======================================================================== * 7. LINK COLORS * ======================================================================== */ --ume-color-link: #1CA8E1; --ume-color-link-hover: #12749F; --ume-color-link-active: #0D5A7E; --ume-color-link-visited: #6B21A8; --ume-color-link-inverse: #85D4F2; /* ======================================================================== * 8. TYPOGRAPHY — FONT FAMILIES * ======================================================================== */ /* Primary typeface: Avenir Next (Brand Guideline - UME.pdf, page 8) Nunito Sans is the metric-compatible open-source substitute loaded via Google Fonts */ --ume-font-family: 'Avenir Next', 'Nunito Sans', 'Avenir', -apple-system, BlinkMacSystemFont, 'Salesforce Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ume-font-family-heading: 'Avenir Next', 'Nunito Sans', 'Avenir', -apple-system, BlinkMacSystemFont, 'Salesforce Sans', sans-serif; --ume-font-family-body: 'Avenir Next', 'Nunito Sans', 'Avenir', -apple-system, BlinkMacSystemFont, 'Salesforce Sans', 'Segoe UI', Roboto, sans-serif; --ume-font-family-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Courier New', monospace; /* ======================================================================== * 9. TYPOGRAPHY — TYPE SCALE (Major Third 1.25×, Brand Guideline page 8) * * Base = 0.875rem (14px) — matches SLDS compact density * Each step × 1.25 * ======================================================================== */ --ume-font-size-2xs: 0.625rem; /* 10px */ --ume-font-size-xs: 0.75rem; /* 12px */ --ume-font-size-sm: 0.8125rem; /* 13px */ --ume-font-size-base: 0.875rem; /* 14px */ --ume-font-size-lg: 1rem; /* 16px */ --ume-font-size-xl: 1.25rem; /* 20px */ --ume-font-size-2xl: 1.5625rem; /* 25px */ --ume-font-size-3xl: 1.953rem; /* ~31px */ --ume-font-size-4xl: 2.441rem; /* ~39px */ --ume-font-size-5xl: 3.052rem; /* ~49px */ /* Aliases matching the old umeSchedulingTokens naming */ --ume-font: var(--ume-font-family); /* ======================================================================== * 10. TYPOGRAPHY — FONT WEIGHTS * ======================================================================== */ --ume-font-weight-light: 300; --ume-font-weight-regular: 400; --ume-font-weight-medium: 500; --ume-font-weight-semibold: 600; --ume-font-weight-bold: 700; --ume-font-weight-extrabold: 800; /* ======================================================================== * 11. TYPOGRAPHY — LINE HEIGHTS * ======================================================================== */ --ume-line-height-none: 1; --ume-line-height-tight: 1.25; --ume-line-height-snug: 1.375; --ume-line-height-normal: 1.5; --ume-line-height-relaxed: 1.625; --ume-line-height-loose: 1.75; /* Backward-compat alias */ --ume-line-height: 1.5; /* ======================================================================== * 12. TYPOGRAPHY — LETTER SPACING * ======================================================================== */ --ume-letter-spacing-tighter: -0.05em; --ume-letter-spacing-tight: -0.025em; --ume-letter-spacing-normal: 0em; --ume-letter-spacing-wide: 0.025em; --ume-letter-spacing-wider: 0.05em; --ume-letter-spacing-widest: 0.1em; --ume-letter-spacing-caps: 0.08em; /* ======================================================================== * 13. SPACING SCALE (4 px base unit) * * Numeric scale: --ume-space-{n} where n = rem/0.25 * Named aliases: xs / sm / md / lg / xl / 2xl / 3xl * ======================================================================== */ --ume-space-px: 1px; --ume-space-0: 0; --ume-space-0-5: 0.125rem; /* 2px */ --ume-space-1: 0.25rem; /* 4px */ --ume-space-1-5: 0.375rem; /* 6px */ --ume-space-2: 0.5rem; /* 8px */ --ume-space-2-5: 0.625rem; /* 10px */ --ume-space-3: 0.75rem; /* 12px */ --ume-space-3-5: 0.875rem; /* 14px */ --ume-space-4: 1rem; /* 16px */ --ume-space-5: 1.25rem; /* 20px */ --ume-space-6: 1.5rem; /* 24px */ --ume-space-7: 1.75rem; /* 28px */ --ume-space-8: 2rem; /* 32px */ --ume-space-9: 2.25rem; /* 36px */ --ume-space-10: 2.5rem; /* 40px */ --ume-space-12: 3rem; /* 48px */ --ume-space-14: 3.5rem; /* 56px */ --ume-space-16: 4rem; /* 64px */ --ume-space-20: 5rem; /* 80px */ --ume-space-24: 6rem; /* 96px */ /* Named aliases */ --ume-space-xs: 0.25rem; /* 4px */ --ume-space-sm: 0.5rem; /* 8px */ --ume-space-md: 0.75rem; /* 12px */ --ume-space-lg: 1rem; /* 16px */ --ume-space-xl: 1.5rem; /* 24px */ --ume-space-2xl: 2rem; /* 32px */ --ume-space-3xl: 3rem; /* 48px */ --ume-space-4xl: 4rem; /* 64px */ /* ======================================================================== * 14. BORDER RADIUS / SHAPE * ======================================================================== */ --ume-radius-none: 0; --ume-radius-xs: 0.125rem; /* 2px */ --ume-radius-sm: 0.25rem; /* 4px */ --ume-radius: 0.5rem; /* 8px — default */ --ume-radius-md: 0.5rem; /* 8px */ --ume-radius-lg: 0.75rem; /* 12px */ --ume-radius-xl: 1rem; /* 16px */ --ume-radius-2xl: 1.5rem; /* 24px */ --ume-radius-full: 9999px; --ume-radius-pill: 9999px; /* ======================================================================== * 15. ELEVATION / SHADOWS * ======================================================================== */ --ume-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --ume-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --ume-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --ume-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); --ume-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12); --ume-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); --ume-shadow-inner-lg: inset 0 4px 8px rgba(0, 0, 0, 0.08); --ume-shadow-none: none; /* Branded shadows (use primary color hue) */ --ume-shadow-primary-sm: 0 2px 8px rgba(28, 168, 225, 0.15); --ume-shadow-primary-md: 0 4px 16px rgba(28, 168, 225, 0.2); --ume-shadow-primary-lg: 0 8px 32px rgba(28, 168, 225, 0.25); /* Card interactions */ --ume-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08); --ume-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12); --ume-shadow-card-active: 0 2px 6px rgba(0, 0, 0, 0.1); /* ======================================================================== * 16. Z-INDEX SCALE * ======================================================================== */ --ume-z-hide: -1; --ume-z-base: 0; --ume-z-raised: 1; --ume-z-dropdown: 1000; --ume-z-sticky: 1100; --ume-z-banner: 1200; --ume-z-overlay: 1300; --ume-z-modal: 1400; --ume-z-popover: 1500; --ume-z-toast: 1600; --ume-z-tooltip: 1700; --ume-z-skip-nav: 1800; /* ======================================================================== * 17. TRANSITIONS & MOTION * ======================================================================== */ /* Duration scale */ --ume-duration-instant: 0ms; --ume-duration-fast: 100ms; --ume-duration-normal: 150ms; --ume-duration-moderate: 250ms; --ume-duration-slow: 350ms; --ume-duration-slower: 500ms; --ume-duration-slowest: 700ms; /* Easing curves */ --ume-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ume-ease-in: cubic-bezier(0.4, 0, 1, 1); --ume-ease-out: cubic-bezier(0, 0, 0.2, 1); --ume-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ume-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Shorthand composites (backward-compat aliases) */ --ume-transition-fast: 150ms ease; --ume-transition-base: 250ms ease; --ume-transition-slow: 350ms ease; /* ======================================================================== * 18. RESPONSIVE BREAKPOINTS (documentation tokens) * * These exist for reference; actual breakpoints must use @media queries. * Per .cursor/rules/experience-cloud.mdc: * mobile 320px+, tablet 768px+, desktop 1024px+ * ======================================================================== */ --ume-breakpoint-mobile: 320px; --ume-breakpoint-mobile-lg: 480px; --ume-breakpoint-tablet: 768px; --ume-breakpoint-desktop: 1024px; --ume-breakpoint-wide: 1280px; --ume-breakpoint-ultra: 1536px; /* Content widths */ --ume-content-max-width: 96rem; /* 1536px */ --ume-content-narrow: 42rem; /* 672px */ --ume-content-wide: 90rem; /* 1440px */ /* ======================================================================== * 19. OPACITY SCALE * ======================================================================== */ --ume-opacity-0: 0; --ume-opacity-5: 0.05; --ume-opacity-10: 0.1; --ume-opacity-20: 0.2; --ume-opacity-30: 0.3; --ume-opacity-40: 0.4; --ume-opacity-50: 0.5; --ume-opacity-60: 0.6; --ume-opacity-70: 0.7; --ume-opacity-80: 0.8; --ume-opacity-90: 0.9; --ume-opacity-100: 1; --ume-opacity-disabled: 0.45; /* ======================================================================== * 20. INTERACTIVE STATE TOKENS * ======================================================================== */ /* Hover */ --ume-hover-opacity: 0.88; --ume-hover-bg: rgba(28, 168, 225, 0.08); --ume-hover-bg-neutral: rgba(0, 0, 0, 0.04); --ume-hover-lift: -2px; --ume-hover-shadow: var(--ume-shadow-card-hover); /* Active / Pressed */ --ume-active-opacity: 0.76; --ume-active-bg: rgba(28, 168, 225, 0.14); --ume-active-bg-neutral: rgba(0, 0, 0, 0.08); --ume-active-scale: 0.98; /* Disabled */ --ume-disabled-opacity: 0.45; --ume-disabled-cursor: not-allowed; /* Selected */ --ume-selected-bg: rgba(28, 168, 225, 0.12); --ume-selected-border: #1CA8E1; /* ======================================================================== * 21. FOCUS RING * * WCAG 2.1 AA: visible, 3:1 contrast against adjacent colors. * Uses box-shadow approach for compatibility inside shadow DOM. * ======================================================================== */ --ume-focus-ring-color: rgba(28, 168, 225, 0.5); --ume-focus-ring-width: 3px; --ume-focus-ring-offset: 2px; --ume-focus-ring: 0 0 0 var(--ume-focus-ring-offset) var(--ume-color-surface-elevated), 0 0 0 calc(var(--ume-focus-ring-offset) + var(--ume-focus-ring-width)) var(--ume-focus-ring-color); --ume-focus-ring-inset: inset 0 0 0 var(--ume-focus-ring-width) var(--ume-focus-ring-color); /* ======================================================================== * 22. COMPONENT TOKENS — BUTTONS * ======================================================================== */ /* Primary button */ --ume-btn-primary-bg: #1CA8E1; --ume-btn-primary-color: #FFFFFF; --ume-btn-primary-border: transparent; --ume-btn-primary-bg-hover: #178EC0; --ume-btn-primary-bg-active: #12749F; --ume-btn-primary-shadow: 0 2px 8px rgba(28, 168, 225, 0.3); --ume-btn-primary-shadow-hover: 0 4px 14px rgba(28, 168, 225, 0.4); /* Secondary / Outline button */ --ume-btn-secondary-bg: transparent; --ume-btn-secondary-color: #1CA8E1; --ume-btn-secondary-border: #1CA8E1; --ume-btn-secondary-bg-hover: rgba(28, 168, 225, 0.08); --ume-btn-secondary-bg-active: rgba(28, 168, 225, 0.14); /* Ghost / Subtle button */ --ume-btn-ghost-bg: transparent; --ume-btn-ghost-color: #003942; --ume-btn-ghost-border: transparent; --ume-btn-ghost-bg-hover: rgba(0, 57, 66, 0.06); --ume-btn-ghost-bg-active: rgba(0, 57, 66, 0.1); /* Danger / Destructive button */ --ume-btn-danger-bg: #DC2626; --ume-btn-danger-color: #FFFFFF; --ume-btn-danger-border: transparent; --ume-btn-danger-bg-hover: #B91C1C; --ume-btn-danger-bg-active: #991B1B; --ume-btn-danger-shadow: 0 2px 8px rgba(220, 38, 38, 0.3); /* Button sizing */ --ume-btn-height-sm: 2rem; /* 32px */ --ume-btn-height-md: 2.5rem; /* 40px */ --ume-btn-height-lg: 3rem; /* 48px */ --ume-btn-padding-x-sm: 0.75rem; --ume-btn-padding-x-md: 1rem; --ume-btn-padding-x-lg: 1.5rem; --ume-btn-font-size: 0.875rem; --ume-btn-font-weight: 700; --ume-btn-radius: 0.5rem; --ume-btn-transition: background 150ms ease, box-shadow 150ms ease, transform 180ms ease; --ume-btn-disabled-opacity: 0.45; /* ======================================================================== * 23. COMPONENT TOKENS — CARDS * ======================================================================== */ --ume-card-bg: #FFFFFF; --ume-card-border: #E5E7EB; --ume-card-border-width: 1px; --ume-card-radius: 0.75rem; --ume-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --ume-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12); --ume-card-padding: 1.25rem; --ume-card-padding-sm: 0.875rem; --ume-card-padding-lg: 1.5rem; --ume-card-header-border: #F3F4F6; --ume-card-header-bg: #FAFBFC; /* ======================================================================== * 24. COMPONENT TOKENS — FORM INPUTS * ======================================================================== */ --ume-input-height: 2.5rem; /* 40px */ --ume-input-height-sm: 2rem; /* 32px */ --ume-input-height-lg: 3rem; /* 48px */ --ume-input-padding-x: 0.75rem; --ume-input-bg: #FFFFFF; --ume-input-color: #000000; --ume-input-border: #D1D5DB; --ume-input-border-hover: #9CA3AF; --ume-input-border-focus: #1CA8E1; --ume-input-border-error: #DC2626; --ume-input-border-success: #059669; --ume-input-radius: 0.5rem; --ume-input-font-size: 0.875rem; --ume-input-placeholder-color: #9CA3AF; --ume-input-disabled-bg: #F3F4F6; --ume-input-disabled-color: #9CA3AF; --ume-input-focus-shadow: 0 0 0 3px rgba(28, 168, 225, 0.15); --ume-input-error-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); /* Labels */ --ume-label-font-size: 0.75rem; --ume-label-font-weight: 600; --ume-label-color: #4B5563; --ume-label-margin-bottom: 0.375rem; /* Help / Error text below inputs */ --ume-help-font-size: 0.75rem; --ume-help-color: #6B7280; --ume-help-error-color: #DC2626; --ume-help-success-color: #059669; /* ======================================================================== * 25. COMPONENT TOKENS — NAVIGATION / HEADER * ======================================================================== */ --ume-nav-bg: #FFFFFF; --ume-nav-border: #E5E7EB; --ume-nav-height: 3.5rem; /* 56px */ --ume-nav-item-color: #4B5563; --ume-nav-item-color-hover: #1CA8E1; --ume-nav-item-color-active: #1CA8E1; --ume-nav-item-font-size: 0.875rem; --ume-nav-item-font-weight: 500; --ume-nav-item-padding-x: 1rem; --ume-nav-indicator-color: #1CA8E1; --ume-nav-indicator-height: 3px; /* Mobile nav / hamburger */ --ume-nav-mobile-bg: #FFFFFF; --ume-nav-mobile-overlay: rgba(0, 0, 0, 0.4); --ume-nav-mobile-width: 280px; /* ======================================================================== * 26. COMPONENT TOKENS — BADGES & TAGS * ======================================================================== */ --ume-badge-font-size: 0.6875rem; /* 11px */ --ume-badge-font-weight: 700; --ume-badge-padding: 0.125rem 0.5rem; --ume-badge-radius: 9999px; --ume-badge-letter-spacing: 0.04em; --ume-badge-primary-bg: rgba(28, 168, 225, 0.12); --ume-badge-primary-color: #12749F; --ume-badge-success-bg: #D1FAE5; --ume-badge-success-color: #065F46; --ume-badge-warning-bg: #FEF3C7; --ume-badge-warning-color: #92400E; --ume-badge-error-bg: #FEE2E2; --ume-badge-error-color: #991B1B; --ume-badge-neutral-bg: #F3F4F6; --ume-badge-neutral-color: #4B5563; /* ======================================================================== * 27. COMPONENT TOKENS — ALERTS / TOASTS * ======================================================================== */ --ume-alert-radius: 0.5rem; --ume-alert-padding: 0.875rem 1rem; --ume-alert-font-size: 0.8125rem; --ume-alert-border-width: 1px; --ume-alert-icon-size: 1.25rem; --ume-alert-info-bg: #DBEAFE; --ume-alert-info-border: #93C5FD; --ume-alert-info-color: #1E40AF; --ume-alert-success-bg: #D1FAE5; --ume-alert-success-border: #6EE7B7; --ume-alert-success-color: #065F46; --ume-alert-warning-bg: #FEF3C7; --ume-alert-warning-border: #FCD34D; --ume-alert-warning-color: #92400E; --ume-alert-error-bg: #FEE2E2; --ume-alert-error-border: #FCA5A5; --ume-alert-error-color: #991B1B; /* Toast positioning */ --ume-toast-offset-top: 1rem; --ume-toast-max-width: 28rem; --ume-toast-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* ======================================================================== * 28. COMPONENT TOKENS — TABLES * ======================================================================== */ --ume-table-header-bg: #F9FAFB; --ume-table-header-color: #4B5563; --ume-table-header-font-size: 0.75rem; --ume-table-header-font-weight: 700; --ume-table-header-letter-spacing: 0.05em; --ume-table-header-text-transform: uppercase; --ume-table-header-padding: 0.625rem 1rem; --ume-table-cell-padding: 0.75rem 1rem; --ume-table-cell-font-size: 0.8125rem; --ume-table-cell-color: #000000; --ume-table-border: #F3F4F6; --ume-table-row-hover-bg: rgba(28, 168, 225, 0.04); --ume-table-row-selected-bg: rgba(28, 168, 225, 0.08); --ume-table-row-stripe-bg: #F9FAFB; /* ======================================================================== * 29. COMPONENT TOKENS — STEPPER / WIZARD * ======================================================================== */ --ume-stepper-track-color: #E5E7EB; --ume-stepper-track-active: #1CA8E1; --ume-stepper-track-height: 2px; --ume-stepper-dot-size: 2rem; --ume-stepper-dot-bg: #FFFFFF; --ume-stepper-dot-border: #E5E7EB; --ume-stepper-dot-active-bg: #1CA8E1; --ume-stepper-dot-active-border: #1CA8E1; --ume-stepper-dot-active-color: #FFFFFF; --ume-stepper-dot-complete-bg: #059669; --ume-stepper-dot-complete-border: #059669; --ume-stepper-dot-complete-color: #FFFFFF; --ume-stepper-label-font-size: 0.75rem; --ume-stepper-label-color: #6B7280; --ume-stepper-label-active-color: #003942; --ume-stepper-label-active-weight: 700; /* ======================================================================== * 30. COMPONENT TOKENS — SLOT GRID (Scheduling-specific) * ======================================================================== */ --ume-slot-min-width: 105px; --ume-slot-padding: 0.55rem 0.7rem; --ume-slot-font-size: 0.8125rem; --ume-slot-radius: 0.5rem; --ume-slot-border: #E5E7EB; --ume-slot-bg: #FFFFFF; --ume-slot-bg-hover: #F4F6F9; --ume-slot-bg-selected: #1CA8E1; --ume-slot-color-selected: #FFFFFF; --ume-slot-shadow-selected: 0 2px 8px rgba(28, 168, 225, 0.25); --ume-slot-available-indicator: #059669; --ume-slot-limited-indicator: #D97706; --ume-slot-blocked-indicator: #9CA3AF; --ume-slot-unavailable-opacity: 0.35; /* ======================================================================== * 31. PORTAL LAYOUT TOKENS * ======================================================================== */ --ume-portal-header-height: 3.5rem; /* 56px */ --ume-portal-header-height-mobile: 3rem; /* 48px */ --ume-portal-header-bg: #FFFFFF; --ume-portal-header-border: #E5E7EB; --ume-portal-header-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --ume-portal-sidebar-width: 260px; --ume-portal-sidebar-collapsed: 64px; --ume-portal-sidebar-bg: #FFFFFF; --ume-portal-content-max-width: 96rem; --ume-portal-content-padding: 1.5rem; --ume-portal-content-padding-mobile: 0.75rem; --ume-portal-footer-bg: #003942; --ume-portal-footer-color: #FFFFFF; --ume-portal-footer-link-color: #69C4DB; --ume-portal-footer-padding: 3rem 1.5rem; /* Login page */ --ume-portal-login-bg: #003942; --ume-portal-login-card-bg: #FFFFFF; --ume-portal-login-card-radius: 0.75rem; --ume-portal-login-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); --ume-portal-login-card-max-width: 420px; /* Session timeout / idle (30 min per experience-cloud.mdc) */ --ume-portal-session-timeout: 1800000; /* 30 min in ms */ /* ======================================================================== * 32. LOGO ASSET REFERENCES * * These map to static resource paths for each logo variant from * /Downloads/UME & LUMEN BRAND GUIDELINE/Logo - UME/ * Upload logos as a static resource named "umeLogos" and reference: * url('/resource/umeLogos/Logo_Colored.svg') * ======================================================================== */ --ume-logo-colored: url('/resource/umeLogos/Logo_Colored.svg'); --ume-logo-colored-alt: url('/resource/umeLogos/Logo_Colored_Alt.svg'); --ume-logo-black: url('/resource/umeLogos/Logo_Black.svg'); --ume-logo-white: url('/resource/umeLogos/Logo_White.svg'); --ume-logo-tagline-colored: url('/resource/umeLogos/Logo_Tagline_Colored.svg'); --ume-logo-tagline-colored-alt: url('/resource/umeLogos/Logo_Tagline_Colored_Alt.svg'); --ume-logo-tagline-black: url('/resource/umeLogos/Logo_Tagline_Black.svg'); --ume-logo-tagline-white: url('/resource/umeLogos/Logo_Tagline_White.svg'); --ume-logo-height: 40px; --ume-logo-height-sm: 28px; --ume-logo-height-lg: 56px; /* ======================================================================== * 33. SLDS BASE COMPONENT HOOK OVERRIDES * * Maps UME design tokens to Salesforce Lightning Design System * styling hooks so , , etc. * inherit UME branding globally across both portals. * * Ref: https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview * ======================================================================== */ /* --- Buttons: Brand variant (variant="brand") --- */ --slds-c-button-brand-color-background: var(--ume-btn-primary-bg); --slds-c-button-brand-color-border: var(--ume-btn-primary-bg); --slds-c-button-brand-color-background-hover: var(--ume-btn-primary-bg-hover); --slds-c-button-brand-color-border-hover: var(--ume-btn-primary-bg-hover); --slds-c-button-brand-color-background-active: var(--ume-btn-primary-bg-active); --slds-c-button-brand-color-border-active: var(--ume-btn-primary-bg-active); --slds-c-button-brand-text-color: var(--ume-btn-primary-color); --slds-c-button-brand-text-color-hover: var(--ume-btn-primary-color); /* --- Buttons: Neutral variant (default) --- */ --slds-c-button-text-color: var(--ume-color-primary); --slds-c-button-text-color-hover: var(--ume-color-primary-60); --slds-c-button-color-border: var(--ume-color-border-strong); --slds-c-button-color-border-hover: var(--ume-color-primary); /* --- Buttons: Destructive variant --- */ --slds-c-button-destructive-color-background: var(--ume-btn-danger-bg); --slds-c-button-destructive-color-border: var(--ume-btn-danger-bg); --slds-c-button-destructive-color-background-hover: var(--ume-btn-danger-bg-hover); --slds-c-button-destructive-color-border-hover: var(--ume-btn-danger-bg-hover); --slds-c-button-destructive-text-color: var(--ume-btn-danger-color); /* --- Buttons: Success variant --- */ --slds-c-button-success-color-background: var(--ume-color-success); --slds-c-button-success-color-border: var(--ume-color-success); --slds-c-button-success-color-background-hover: var(--ume-color-success-dark); --slds-c-button-success-color-border-hover: var(--ume-color-success-dark); /* --- Buttons: Shared sizing / shape --- */ --slds-c-button-spacing-inline-start: var(--ume-btn-padding-x-md); --slds-c-button-spacing-inline-end: var(--ume-btn-padding-x-md); --slds-c-button-radius-border: var(--ume-btn-radius); /* --- Inputs: lightning-input, lightning-combobox, lightning-textarea --- */ --slds-c-input-radius-border: var(--ume-input-radius); --slds-c-input-color-border: var(--ume-input-border); --slds-c-input-color-border-focus: var(--ume-input-border-focus); --slds-c-input-shadow-focus: var(--ume-input-focus-shadow); /* --- Cards: lightning-card --- */ --slds-c-card-radius-border: var(--ume-card-radius); --slds-c-card-color-background: var(--ume-card-bg); }