/* ============================================================================= CF Button — design-system variants for Elementor's core Button widget ============================================================================= Owned by the cf-elementor-custom-widgets plugin. The PHP side (customizations/class-cf-button-variants.php) replaces the "Type" dropdown, adds a "Disabled" switcher, and stamps `cf-button--` (and `cf-button--disabled`) on the widget wrapper. All visuals live here. Depends on cf-design-system.css for the tier 1 + tier 2 tokens. --------------------------------------------------------------------------- FIGMA MAPPING (read by column; default / hover / focus / disabled) --------------------------------------------------------------------------- Green Filled : green fill, white text → darker green on hover White Filled : WHITE fill, green text → green fill, white text on hover Blue Outline : transparent, blue border+text → blue fill, white text on hover Blue Filled : blue fill, white text → darker blue on hover Focus keeps the default fill + a layered ring, EXCEPT Blue Outline whose focus fill turns white (per Figma). Disabled = near-white fill, light grey text, for every variant. --------------------------------------------------------------------------- SPECIFICITY STRATEGY — the (0,3,0) sweet spot --------------------------------------------------------------------------- Several layers style `.elementor-button` globally, observed in Elementor's compiled page CSS: • Elementor global (kit accent): `.elementor-widget-button .elementor-button` → (0,2,0) • Astra "Inherit theme button styles": `.elementor-widget-button .elementor-button` (bg/border)→ (0,2,0) `body .elementor-button.elementor-size-*` (pad/radius)→ (0,2,1) • Elementor PER-WIDGET overrides (Style tab on one button): `.elementor- .elementor-element.elementor-element- .elementor-button` → (0,4,0) So we target (0,3,0): add `.elementor-widget-button` (already on the wrapper, alongside our `cf-button--`) to the selector. (0,3,0) beats every GLOBAL layer by specificity alone — no load-order tricks needed — and still loses to PER-WIDGET overrides (0,4,0), so per-widget Background / Text / Border / Padding / Radius edits keep working, granularly. No `!important`. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. COMPONENT TOKENS (tier 3) — reference semantic tokens. No raw hex. ----------------------------------------------------------------------------- */ .cf-button--blue-filled { --cf-btn-bg: var(--cf-color-action); --cf-btn-color: var(--cf-color-on-action); --cf-btn-border: transparent; --cf-btn-bg-hover: var(--cf-color-action-hover); --cf-btn-color-hover: var(--cf-color-on-action); --cf-btn-border-hover: transparent; --cf-btn-bg-focus: var(--cf-color-action); /* keeps fill + ring */ --cf-btn-ring: var(--cf-color-action); --cf-btn-bg-disabled: var(--cf-color-disabled-bg); --cf-btn-color-disabled: var(--cf-color-disabled-fg); --cf-btn-border-disabled: transparent; } .cf-button--blue-outline { --cf-btn-bg: transparent; --cf-btn-color: var(--cf-color-action); --cf-btn-border: var(--cf-color-action); --cf-btn-bg-hover: var(--cf-color-action); --cf-btn-color-hover: var(--cf-color-on-action); --cf-btn-border-hover: var(--cf-color-action); --cf-btn-bg-focus: var(--cf-color-surface); /* focus fill = white */ --cf-btn-ring: var(--cf-color-action); --cf-btn-bg-disabled: var(--cf-color-disabled-bg); /* #f7f7f7 like the rest */ --cf-btn-color-disabled: var(--cf-color-disabled-fg); --cf-btn-border-disabled: var(--cf-color-disabled-border); } .cf-button--green-filled { --cf-btn-bg: var(--cf-color-success); --cf-btn-color: var(--cf-color-on-success); --cf-btn-border: transparent; --cf-btn-bg-hover: var(--cf-color-success-hover); --cf-btn-color-hover: var(--cf-color-on-success); --cf-btn-border-hover: transparent; --cf-btn-bg-focus: var(--cf-color-success); /* keeps fill + ring */ --cf-btn-ring: var(--cf-color-success); --cf-btn-bg-disabled: var(--cf-color-disabled-bg); --cf-btn-color-disabled: var(--cf-color-disabled-fg); --cf-btn-border-disabled: transparent; } .cf-button--white-filled { --cf-btn-bg: var(--cf-color-surface); /* SOLID WHITE fill */ --cf-btn-color: var(--cf-color-success); /* green text/icon */ --cf-btn-border: transparent; /* no outline */ --cf-btn-bg-hover: var(--cf-color-success); --cf-btn-color-hover: var(--cf-color-on-success); --cf-btn-border-hover: var(--cf-color-success); --cf-btn-bg-focus: var(--cf-color-surface); /* focus fill = white */ --cf-btn-ring: var(--cf-color-success); /* green ring */ --cf-btn-bg-disabled: var(--cf-color-disabled-bg); --cf-btn-color-disabled: var(--cf-color-disabled-fg); --cf-btn-border-disabled: transparent; } /* Shared structural tokens — identical across variants, from primitive scales. */ [class*="cf-button--"] { --cf-btn-radius: var(--cf-radius-pill); --cf-btn-border-width: var(--cf-border-width); --cf-btn-padding-y: var(--cf-space-2-5); /* 10px */ --cf-btn-padding-x: var(--cf-space-6); /* 24px */ --cf-btn-font-family: var(--cf-font-family-base); --cf-btn-font-size: var(--cf-font-size-md); /* 16px */ --cf-btn-font-weight: var(--cf-font-weight-medium); /* 500 */ /* 22px line-height → 44px total height: 22 + (10 padding ×2) + (1 border ×2). */ --cf-btn-line-height: 22px; --cf-btn-gap: var(--cf-space-2); /* 8px icon↔label */ --cf-btn-transition: background-color var(--cf-transition-base), color var(--cf-transition-base), border-color var(--cf-transition-base), box-shadow var(--cf-transition-base); } /* ----------------------------------------------------------------------------- 2. THE CONSUMER RULE — (0,3,0): widget wrapper + variant class + button. Beats all global button layers; still loses to per-widget overrides (0,4,0). Widget targets share the SAME variant tokens (the wrapper carries the `cf-button--` class in every case): - core Button : `.elementor-widget-button … .elementor-button` → (0,3,0) - Slides : `.elementor-widget-slides … .swiper-slide-inner .elementor-slide-button` → (0,4,0) - Call To Action: `.elementor-widget-call-to-action … .elementor-cta__button.elementor-button` → (0,4,0) Slides + CTA need (0,4,0) because Elementor Pro ships DEFAULT button styles at (0,3,0) that would otherwise tie our rule and win on source order: - Slides: `.elementor-slides .swiper-slide-inner .elementor-slide-button` { background: transparent; border: 2px solid #fff; color: #fff } - CTA: `.elementor-cta--skin-* .elementor-cta__button.elementor-button` { border-color; color } (+ a transparent/bordered base) (0,4,0) beats those defaults by specificity while still losing to per-widget overrides (also (0,4,0) but printed later in the page CSS). ----------------------------------------------------------------------------- */ .elementor-widget-button[class*="cf-button--"] .elementor-button, .elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-slide-button, .elementor-widget-call-to-action[class*="cf-button--"] .elementor-cta__button.elementor-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--cf-btn-gap); vertical-align: middle; /* 44px total height: 22px line-height + 10px×2 padding + 1px×2 border. */ padding: var(--cf-btn-padding-y) var(--cf-btn-padding-x); background-color: var(--cf-btn-bg); color: var(--cf-btn-color); border-style: solid; border-width: var(--cf-btn-border-width); border-color: var(--cf-btn-border); border-radius: var(--cf-btn-radius); font-family: var(--cf-btn-font-family); font-size: var(--cf-btn-font-size); font-weight: var(--cf-btn-font-weight); line-height: var(--cf-btn-line-height); letter-spacing: 0; text-align: center; text-decoration: none; cursor: pointer; transition: var(--cf-btn-transition); } /* Icon (font icon or inline SVG) follows the text colour. */ .elementor-widget-button[class*="cf-button--"] .elementor-button .elementor-button-icon, .elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-slide-button .elementor-button-icon, .elementor-widget-call-to-action[class*="cf-button--"] .elementor-cta__button.elementor-button .elementor-button-icon { display: inline-flex; align-items: center; color: inherit; } .elementor-widget-button[class*="cf-button--"] .elementor-button .elementor-button-icon svg, .elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-slide-button .elementor-button-icon svg, .elementor-widget-call-to-action[class*="cf-button--"] .elementor-cta__button.elementor-button .elementor-button-icon svg { fill: currentColor; } /* --- Hover ----------------------------------------------------------------- */ .elementor-widget-button[class*="cf-button--"] .elementor-button:hover, .elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-slide-button:hover, .elementor-widget-call-to-action[class*="cf-button--"] .elementor-cta__button.elementor-button:hover { background-color: var(--cf-btn-bg-hover); color: var(--cf-btn-color-hover); border-color: var(--cf-btn-border-hover); } /* --- Focus (keyboard) ----------------------------------------------------- Default fill (or the variant's focus fill — white for Blue Outline) plus a layered ring: inner band + outer coloured ring. `:focus-visible` only. WCAG 2.4.7 / 1.4.11. */ .elementor-widget-button[class*="cf-button--"] .elementor-button:focus-visible, .elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-slide-button:focus-visible, .elementor-widget-call-to-action[class*="cf-button--"] .elementor-cta__button.elementor-button:focus-visible { background-color: var(--cf-btn-bg-focus); box-shadow: 0 0 0 var(--cf-focus-ring-gap) var(--cf-focus-ring-gap-color), 0 0 0 calc(var(--cf-focus-ring-gap) + var(--cf-focus-ring-width)) var(--cf-btn-ring); outline: var(--cf-focus-ring-width) solid transparent; /* Windows High Contrast Mode fallback. */ outline-offset: var(--cf-focus-ring-gap); } /* Mouse `:focus` without `:focus-visible` — hover styling is enough. */ .elementor-widget-button[class*="cf-button--"] .elementor-button:focus:not(:focus-visible), .elementor-widget-slides[class*="cf-button--"] .swiper-slide-inner .elementor-slide-button:focus:not(:focus-visible), .elementor-widget-call-to-action[class*="cf-button--"] .elementor-cta__button.elementor-button:focus:not(:focus-visible) { outline: none; } /* ----------------------------------------------------------------------------- 3. DISABLED state — driven by the widget's "Disabled" switcher (adds `cf-button--disabled` on the wrapper + aria-disabled/tabindex on the ). Near-white fill, light grey text. ----------------------------------------------------------------------------- */ .elementor-widget-button[class*="cf-button--"].cf-button--disabled .elementor-button, .elementor-widget-button[class*="cf-button--"] .elementor-button:disabled, .elementor-widget-button[class*="cf-button--"] .elementor-button[disabled], .elementor-widget-button[class*="cf-button--"] .elementor-button[aria-disabled="true"] { background-color: var(--cf-btn-bg-disabled); color: var(--cf-btn-color-disabled); border-color: var(--cf-btn-border-disabled); box-shadow: none; cursor: not-allowed; pointer-events: none; }