@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
203 lines (197 loc) • 9.66 kB
JavaScript
import{css as e,unsafeCSS as t}from"../../../node_modules/@lit/reactive-element/css-tag.js";import"../../../node_modules/lit/index.js";import{defineVars as n}from"../../../node_modules/@sandlada/jss/dist/define-vars.js";import{defineTokenRefsRecord as r}from"../../../node_modules/@sandlada/jss/dist/define-token-refs.js";import{overrideComponentTokens as i}from"../../../utils/tokens/override-component-tokens.js";import{stringTokens as a}from"../../../utils/tokens/string-tokens.js";import"../../../utils/tokens/index.js";import{PrimaryExtendedFabDefinition as o,SecondaryExtendedFabDefinition as s,TertiaryExtendedFabDefinition as c,TonalPrimaryExtendedFabDefinition as l,TonalSecondaryExtendedFabDefinition as u,TonalTertiaryExtendedFabDefinition as d}from"../../../component-definitions/fab.definition.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const f=r(l,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-fab`}),p=t(n(f,!0).join(``)),m=r(u,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-fab`}),h=t(n(m,!0).join(``)),g=r(d,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-fab`}),_=t(n(g,!0).join(``)),v=r(o,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-fab`}),y=t(n(v,!0).join(``)),b=r(s,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-fab`}),x=t(n(b,!0).join(``)),S=r(c,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-fab`}),C=t(n(S,!0).join(``)),w=()=>{let t=e=>a(i(`--mdc-elevation`,{"enabled-level":`var(--_${e}container-elevation)`}));return e`
mdc-elevation {
${a(i(`--mdc-elevation`,{"enabled-shadow-color":`var(--_enabled-container-shadow-color)`}))};
${t(`enabled-`)};
}
button:hover mdc-elevation {${t(`hovered-`)};}
button:focus-within mdc-elevation {${t(`focused-`)};}
button:active mdc-elevation {${t(`pressed-`)};}
`},T=()=>{let t=e=>a(i(`--mdc-focus-ring`,{"shape-end-end":`var(--_${e}-container-shape-end-end)`,"shape-end-start":`var(--_${e}-container-shape-end-start)`,"shape-start-end":`var(--_${e}-container-shape-start-end)`,"shape-start-start":`var(--_${e}-container-shape-start-start)`}));return e`
.button.small mdc-focus-ring {${t(`small`)};}
.button.medium mdc-focus-ring {${t(`medium`)};}
.button.large mdc-focus-ring {${t(`large`)};}
`},E=()=>{let t=a(i(`--mdc-ripple`,{"enabled-hovered-color":`var(--_hovered-state-layer-color)`,"enabled-hovered-opacity":`var(--_hovered-state-layer-opacity)`,"enabled-pressed-color":`var(--_pressed-state-layer-color)`,"enabled-pressed-opacity":`var(--_pressed-state-layer-opacity)`}));return e`
button mdc-ripple {${t};}
`},D=()=>{let n=e=>t(`
inline-size: var(--_${e}-icon-size);
block-size: var(--_${e}-icon-size);
font-size: var(--_${e}-icon-size);
`);return e`
.icon,
::slotted([name="icon"]) {
display: grid;
place-content: center;
position: relative;
writing-mode: horizontal-tb;
fill: currentColor;
flex-shrink: 0;
}
button.small :is(.icon, ::slotted([name="icon"])) {${n(`small`)};}
button.medium :is(.icon, ::slotted([name="icon"])) {${n(`medium`)};}
button.large :is(.icon, ::slotted([name="icon"])) {${n(`large`)};}
button.small .icon {${a(i(`--mdc-icon`,{"enabled-size":`var(--_small-icon-size)`}))};}
button.medium .icon {${a(i(`--mdc-icon`,{"enabled-size":`var(--_medium-icon-size)`}))};}
button.large .icon {${a(i(`--mdc-icon`,{"enabled-size":`var(--_large-icon-size)`}))};}
button :is(.icon, ::slotted([name="icon"])) {
color: var(--_enabled-icon-color);
}
button:hover :is(.icon, ::slotted([name="icon"])) {
color: var(--_hovered-icon-color);
}
button:focus-within :is(.icon, ::slotted([name="icon"])) {
color: var(--_focused-icon-color);
}
button:active :is(.icon, ::slotted([name="icon"])) {
color: var(--_pressed-icon-color);
}
button:not(.has-icon) .icon {
display: none;
}
`},O=e`
button.small {
border-end-end-radius: min(var(--_small-container-shape-end-end), calc(var(--_small-container-height) / 2));
border-end-start-radius: min(var(--_small-container-shape-end-start), calc(var(--_small-container-height) / 2));
border-start-end-radius: min(var(--_small-container-shape-start-end), calc(var(--_small-container-height) / 2));
border-start-start-radius: min(var(--_small-container-shape-start-start), calc(var(--_small-container-height) / 2));
}
button.medium {
border-end-end-radius: min(var(--_medium-container-shape-end-end), calc(var(--_medium-container-height) / 2));
border-end-start-radius: min(var(--_medium-container-shape-end-start), calc(var(--_medium-container-height) / 2));
border-start-end-radius: min(var(--_medium-container-shape-start-end), calc(var(--_medium-container-height) / 2));
border-start-start-radius: min(var(--_medium-container-shape-start-start), calc(var(--_medium-container-height) / 2));
}
button.large {
border-end-end-radius: min(var(--_large-container-shape-end-end), calc(var(--_large-container-height) / 2));
border-end-start-radius: min(var(--_large-container-shape-end-start), calc(var(--_large-container-height) / 2));
border-start-end-radius: min(var(--_large-container-shape-start-end), calc(var(--_large-container-height) / 2));
border-start-start-radius: min(var(--_large-container-shape-start-start), calc(var(--_large-container-height) / 2));
}
`,k=e`
button.small .label {
font-family: var(--_small-label-font);
line-height: var(--_small-label-line-height);
font-size: var(--_small-label-size);
letter-spacing: var(--_small-label-tracking);
font-weight: var(--_small-label-weight);
}
button.medium .label {
font-family: var(--_medium-label-font);
line-height: var(--_medium-label-line-height);
font-size: var(--_medium-label-size);
letter-spacing: var(--_medium-label-tracking);
font-weight: var(--_medium-label-weight);
}
button.large .label {
font-family: var(--_large-label-font);
line-height: var(--_large-label-line-height);
font-size: var(--_large-label-size);
letter-spacing: var(--_large-label-tracking);
font-weight: var(--_large-label-weight);
}
button .label {
color: var(--_enabled-label-color);
}
button:hover .label {
color: var(--_hovered-label-color);
}
button:focus-within .label {
color: var(--_focused-label-color);
}
button:active .label {
color: var(--_pressed-label-color);
}
button .label {
width: auto;
display: inline-flex;
overflow: hidden;
box-sizing: border-box;
will-change: width, opacity;
text-overflow: inherit;
text-wrap: nowrap;
}
button:not(.extended.has-label) .label {
display: none;
opacity: 0;
}
`,A=e`
:host([variant="primary"]) {${y};}
:host([variant="secondary"]) {${x};}
:host([variant="tertiary"]) {${C};}
:host([variant="tonal-primary"]) {${p};}
:host([variant="tonal-secondary"]) {${h};}
:host([variant="tonal-tertiary"]) {${_};}
`,j=e`
button {
all: unset;
cursor: pointer;
position: relative;
align-items: center;
background: var(--_enabled-container-color);
transition-property: width, background, padding;
transition-duration: 200ms;
}
button.extended {
width: fit-content;
}
button:not(.extended) {
place-content: center;
}
button:not(.extended).small {
width: var(--_small-container-width);
}
button:not(.extended).medium {
width: var(--_medium-container-width);
}
button:not(.extended).large {
width: var(--_large-container-width);
}
button.small {
gap: var(--_small-icon-label-padding-space);
height: var(--_small-container-height);
}
button.medium {
gap: var(--_medium-icon-label-padding-space);
height: var(--_medium-container-height);
}
button.large {
gap: var(--_large-icon-label-padding-space);
height: var(--_large-container-height);
}
button.extended.small {
padding-inline-start: var(--_small-container-inline-leading-padding-space);
padding-inline-end: var(--_small-container-inline-trailing-padding-space);
}
button.extended.medium {
padding-inline-start: var(--_medium-container-inline-leading-padding-space);
padding-inline-end: var(--_medium-container-inline-trailing-padding-space);
}
button.extended.large {
padding-inline-start: var(--_large-container-inline-leading-padding-space);
padding-inline-end: var(--_large-container-inline-trailing-padding-space);
}
:host([show]) button {
display: flex;
}
:host(:not([show])) button {
display: none;
}
`,M=[w(),T(),E(),D(),O,k,A,j,e`
@layer mdc.extended-fab.base {
:host {
border: none;
outline: none;
user-select: none;
display: inline-flex;
vertical-align: top;
contain: layout;
-webkit-tap-highlight-color: transparent;
}
}
`];export{M as fabStyles};
//# sourceMappingURL=fab.style.js.map