@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities; @layer cinder.components { /* ======================================== * FLOATING ACTION BUTTON (floating action) * ======================================== */ .cinder-floating-action { display: inline-flex; align-items: center; justify-content: center; gap: var(--cinder-space-2); white-space: nowrap; text-decoration: none; font-weight: var(--cinder-font-medium); font-size: var(--cinder-text-sm); line-height: 1; border: none; border-radius: var(--cinder-radius-full); cursor: pointer; /* Elevation shadow — floating actions float above the page surface. Held in a custom property * (shared shadow token, so the raw-color audit stays clean) so the focus-visible * rule can COMPOSE the ring with the current elevation instead of replacing it — * otherwise a hovered+focused floating action would lose its focus ring. */ --_cinder-floating-action-elevation: var(--cinder-shadow-md); box-shadow: var(--_cinder-floating-action-elevation); transition: background-color var(--cinder-duration-fast) var(--cinder-ease-standard), box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard), color var(--cinder-duration-fast) var(--cinder-ease-standard); } /* Focus ring — transparent outline + two-stop box-shadow per cinder convention. * The elevation shadow is appended so the ring and the float-shadow coexist (and the * ring survives :hover, which only changes --_cinder-floating-action-elevation, not this rule). */ .cinder-floating-action:focus-visible { outline: var(--cinder-ring-width) solid transparent; box-shadow: 0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color), 0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--_cinder-floating-action-ring, var(--cinder-ring-color)), var(--_cinder-floating-action-elevation); } /* Forced Colors Mode — box-shadow is invisible; use a real outline */ @media (forced-colors: active) { .cinder-floating-action:focus-visible { outline: var(--cinder-ring-width) solid ButtonText; outline-offset: 3px; } } /* Disabled */ .cinder-floating-action:disabled, .cinder-floating-action[aria-disabled='true'] { cursor: not-allowed; /* Block mouse activation of a disabled anchor (an has no native disabled, and * aria-disabled is advisory). The button arm is already inert via :disabled. */ pointer-events: none; background: var(--cinder-surface-inset); color: var(--cinder-text-disabled); box-shadow: none; } /* ---------------------------------------- * Size variants * Filled: equal inline-size and block-size (circle). * Extended: auto inline-size with padding-inline, fixed block-size (pill). * sm = --cinder-space-10 (2.5rem / 40px) * md = --cinder-space-12 (3rem / 48px) — standard floating action * lg = --cinder-space-16 (4rem / 64px) — large floating action * ---------------------------------------- */ .cinder-floating-action[data-cinder-size='sm'] { block-size: var(--cinder-space-10); font-size: var(--cinder-text-xs); } .cinder-floating-action[data-cinder-size='sm'][data-cinder-shape='filled'] { inline-size: var(--cinder-space-10); } .cinder-floating-action[data-cinder-size='sm'][data-cinder-shape='extended'] { padding-inline: var(--cinder-space-4); } .cinder-floating-action[data-cinder-size='md'] { block-size: var(--cinder-space-12); font-size: var(--cinder-text-sm); } .cinder-floating-action[data-cinder-size='md'][data-cinder-shape='filled'] { inline-size: var(--cinder-space-12); } .cinder-floating-action[data-cinder-size='md'][data-cinder-shape='extended'] { padding-inline: var(--cinder-space-6); } .cinder-floating-action[data-cinder-size='lg'] { block-size: var(--cinder-space-16); font-size: var(--cinder-text-lg); } .cinder-floating-action[data-cinder-size='lg'][data-cinder-shape='filled'] { inline-size: var(--cinder-space-16); } .cinder-floating-action[data-cinder-size='lg'][data-cinder-shape='extended'] { padding-inline: var(--cinder-space-8); } /* ---------------------------------------- * Color variants (via variant prop) * ---------------------------------------- */ /* primary — accent fill with contrast foreground */ .cinder-floating-action[data-cinder-variant='primary'] { --_cinder-floating-action-ring: var(--cinder-ring-on-accent); background: var(--cinder-accent); color: var(--cinder-accent-contrast); } .cinder-floating-action[data-cinder-variant='primary']:disabled, .cinder-floating-action[data-cinder-variant='primary'][aria-disabled='true'] { background: var(--cinder-surface-inset); color: var(--cinder-text-disabled); } /* secondary — surface-raised background with standard text */ .cinder-floating-action[data-cinder-variant='secondary'] { background: var(--cinder-surface-raised); color: var(--cinder-text); } .cinder-floating-action[data-cinder-variant='secondary']:disabled, .cinder-floating-action[data-cinder-variant='secondary'][aria-disabled='true'] { background: var(--cinder-surface-inset); color: var(--cinder-text-disabled); } /* surface — neutral surface color, suited for floating above content */ .cinder-floating-action[data-cinder-variant='surface'] { background: var(--cinder-surface); color: var(--cinder-text); } .cinder-floating-action[data-cinder-variant='surface']:disabled, .cinder-floating-action[data-cinder-variant='surface'][aria-disabled='true'] { background: var(--cinder-surface-inset); color: var(--cinder-text-disabled); } /* ---------------------------------------- * Hover states * Wrapped in hover media query to prevent sticky-hover on touch devices. * ---------------------------------------- */ @media (hover: hover) { .cinder-floating-action:hover:not(:disabled):not([aria-disabled='true']) { /* Raise the elevation on hover (md → lg) by updating the custom property, not * `box-shadow` directly — so a focused floating action keeps its ring (the focus-visible rule * reads --_cinder-floating-action-elevation) while still elevating. */ --_cinder-floating-action-elevation: var(--cinder-shadow-lg); } .cinder-floating-action[data-cinder-variant='primary']:hover:not(:disabled):not( [aria-disabled='true'] ) { background: var(--cinder-accent-hover); } .cinder-floating-action[data-cinder-variant='secondary']:hover:not(:disabled):not( [aria-disabled='true'] ) { background: var(--cinder-surface-raised-hover); } .cinder-floating-action[data-cinder-variant='surface']:hover:not(:disabled):not( [aria-disabled='true'] ) { background: var(--cinder-surface-hover); } } /* :active placed after hover media so press feedback fires on tap as well. Uses the gentler on-fill pressed token so the --cinder-accent-contrast label stays AA-legible on the pressed fill (see --cinder-accent-active-on-fill in tokens-base.css). */ .cinder-floating-action[data-cinder-variant='primary']:active:not(:disabled):not( [aria-disabled='true'] ) { background: var(--cinder-accent-active-on-fill); } .cinder-floating-action[data-cinder-variant='secondary']:active:not(:disabled):not( [aria-disabled='true'] ) { background: var(--cinder-surface-raised-pressed); } .cinder-floating-action[data-cinder-variant='surface']:active:not(:disabled):not( [aria-disabled='true'] ) { background: var(--cinder-surface-pressed); } /* Forced Colors — revert box-shadow effects; use system ButtonText/ButtonFace */ @media (forced-colors: active) { .cinder-floating-action { background: ButtonFace; color: ButtonText; border: 1px solid ButtonBorder; box-shadow: none; } .cinder-floating-action:disabled, .cinder-floating-action[aria-disabled='true'] { background: ButtonFace; color: GrayText; border-color: GrayText; } } }