@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
181 lines (176 loc) • 8.61 kB
JavaScript
import{a as e,r as t}from"../../lit-element-Ho-VPzO1.js";import{TertiaryExtendedFabDefinition as a,SecondaryExtendedFabDefinition as n,PrimaryExtendedFabDefinition as r,TonalTertiaryExtendedFabDefinition as i,TonalSecondaryExtendedFabDefinition as o,TonalPrimaryExtendedFabDefinition as l}from"../../component-definitions/fab.definition.js";import{createWrappedTokens as s}from"../../utils/tokens/create-wrapped-tokens.js";import{overrideComponentTokens as c}from"../../utils/tokens/override-component-tokens.js";import{stringTokens as d}from"../../utils/tokens/string-tokens.js";import"../../color-CigMJnjV.js";import"../../elevation-dUQez_WX.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../typescale-Bh1NLwSE.js";import"../../utils/tokens/create-logic-shape-tokens.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/const m={tpe:s("--mdc-fab",l),tse:s("--mdc-fab",o),tte:s("--mdc-fab",i),pe:s("--mdc-fab",r),se:s("--mdc-fab",n),te:s("--mdc-fab",a)},v=d(m.tpe),h=d(m.tse),u=d(m.tte),b=d(m.pe),p=d(m.se),g=d(m.te),_=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));
}
`,f=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(--_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 {
}
button:not(.extended.has-label) .label {
display: none;
opacity: 0;
}
`,$=e`
:host([variant="primary"]) {${b};}
:host([variant="secondary"]) {${p};}
:host([variant="tertiary"]) {${g};}
:host([variant="tonal-primary"]) {${v};}
:host([variant="tonal-secondary"]) {${h};}
:host([variant="tonal-tertiary"]) {${u};}
`,y=e`
button {
all: unset;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
background: var(--_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-space);
height: var(--_small-container-height);
}
button.medium {
gap: var(--_medium-icon-label-space);
height: var(--_medium-container-height);
}
button.large {
gap: var(--_large-icon-label-space);
height: var(--_large-container-height);
}
button.extended.small {
padding-inline-start: var(--_small-leading-space);
padding-inline-end: var(--_small-trailing-space);
}
button.extended.medium {
padding-inline-start: var(--_medium-leading-space);
padding-inline-end: var(--_medium-trailing-space);
}
button.extended.large {
padding-inline-start: var(--_large-leading-space);
padding-inline-end: var(--_large-trailing-space);
}
`,w=[(()=>{const t=e=>d(c("--mdc-elevation",{level:`var(--_${e}container-elevation)`}));return e`
mdc-elevation {
${d(c("--mdc-elevation",{"shadow-color":"var(--_container-shadow-color)"}))};
${t("")};
}
button:hover mdc-elevation {${t("hovered-")};}
button:focus-within mdc-elevation {${t("focused-")};}
button:active mdc-elevation {${t("pressed-")};}
`})(),(()=>{const t=e=>d(c("--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")};}
`})(),(()=>{const t=d(c("--mdc-ripple",{"hovered-color":"var(--_hovered-state-layer-color)","hovered-opacity":"var(--_hovered-state-layer-opacity)","pressed-color":"var(--_pressed-state-layer-color)","pressed-opacity":"var(--_pressed-state-layer-opacity)"}));return e`
button mdc-ripple {${t};}
`})(),(()=>{const a=e=>t(`\n inline-size: var(--_${e}-icon-size);\n block-size: var(--_${e}-icon-size);\n font-size: var(--_${e}-icon-size);\n `);return e`
.icon,
::slotted([name="icon"]) {
display: inline-flex;
position: relative;
writing-mode: horizontal-tb;
fill: currentColor;
flex-shrink: 0;
}
button.small :is(.icon, ::slotted([name="icon"])) {${a("small")};}
button.medium :is(.icon, ::slotted([name="icon"])) {${a("medium")};}
button.large :is(.icon, ::slotted([name="icon"])) {${a("large")};}
button.small .icon mdc-icon {${d(c("--mdc-icon",{size:"var(--_small-icon-size)"}))};}
button.medium .icon mdc-icon {${d(c("--mdc-icon",{size:"var(--_medium-icon-size)"}))};}
button.large .icon mdc-icon {${d(c("--mdc-icon",{size:"var(--_large-icon-size)"}))};}
button :is(.icon, ::slotted([name="icon"])) {
color: var(--_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;
}
`})(),_,f,$,y,e`
@layer mdc.extended-fab.base {
:host {
border: none;
outline: none;
user-select: none;
display: inline-flex;
vertical-align: top;
}
}
`];export{w as fabStyles};