@m3e/fab 1.0.0-rc.1 → 1.0.0-rc.2

package/src/styles/FabSizeToken.ts

@@ -1,102 +0,0 @@
-import { CSSResult, unsafeCSS } from "lit";
-
-import { DesignToken } from "@m3e/core";
-import { FabSize } from "../FabSize";
-
-/** @private */
-type _FabSizeToken = {
-  containerHeight: CSSResult;
-  labelTextFontSize: CSSResult;
-  labelTextFontWeight: CSSResult;
-  labelTextLineHeight: CSSResult;
-  labelTextTracking: CSSResult;
-  iconSize: CSSResult;
-  extendedIconSize: CSSResult;
-  shape: CSSResult;
-  leadingSpace: CSSResult;
-  trailingSpace: CSSResult;
-  extendedLeadingSpace: CSSResult;
-  extendedTrailingSpace: CSSResult;
-  iconLabelSpace: CSSResult;
-};
-
-/**
- * Component design tokens that control the `M3eFabElement` for all size variants.
- * @internal
- */
-export const FabSizeToken: Record<FabSize, _FabSizeToken> = {
-  /** Design tokens that control the `small` `size` variant. */
-  small: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-fab-small-container-height, 3.5rem) + ${DesignToken.density.calc(-3)})`),
-    labelTextFontSize: unsafeCSS(
-      `var(--m3e-fab-small-label-text-font-size, ${DesignToken.typescale.standard.title.medium.fontSize})`
-    ),
-    labelTextFontWeight: unsafeCSS(
-      `var(--m3e-fab-small-label-text-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight})`
-    ),
-    labelTextLineHeight: unsafeCSS(
-      `var(--m3e-fab-small-label-text-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight})`
-    ),
-    labelTextTracking: unsafeCSS(
-      `var(--m3e-fab-small-label-text-tracking, ${DesignToken.typescale.standard.title.medium.tracking})`
-    ),
-    iconSize: unsafeCSS(`calc(var(--m3e-fab-small-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)})`),
-    extendedIconSize: unsafeCSS("var(--m3e-fab-small-icon-size, 1.5rem)"),
-    shape: unsafeCSS(`var(--m3e-fab-small-shape, ${DesignToken.shape.corner.large})`),
-    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, 1rem) + ${DesignToken.density.calc(-3)})`),
-    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, 1rem) + ${DesignToken.density.calc(-3)})`),
-    iconLabelSpace: unsafeCSS("var(--m3e-fab-small-icon-label-space, 0.5rem)"),
-    extendedLeadingSpace: unsafeCSS("var(--m3e-fab-small-leading-space, 1rem)"),
-    extendedTrailingSpace: unsafeCSS("var(--m3e-fab-small-trailing-space, 1rem)"),
-  },
-
-  /** Design tokens that control the `medium` `size` variant. */
-  medium: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-fab-medium-container-height, 5rem) + ${DesignToken.density.calc(-3)})`),
-    labelTextFontSize: unsafeCSS(
-      `var(--m3e-fab-medium-label-text-font-size, ${DesignToken.typescale.standard.title.large.fontSize})`
-    ),
-    labelTextFontWeight: unsafeCSS(
-      `var(--m3e-fab-medium-label-text-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight})`
-    ),
-    labelTextLineHeight: unsafeCSS(
-      `var(--m3e-fab-medium-label-text-line-height, ${DesignToken.typescale.standard.title.large.lineHeight})`
-    ),
-    labelTextTracking: unsafeCSS(
-      `var(--m3e-fab-medium-label-text-tracking, ${DesignToken.typescale.standard.title.large.tracking})`
-    ),
-    iconSize: unsafeCSS(`calc(var(--m3e-fab-medium-icon-size, 1.75rem) + ${DesignToken.density.calc(-3)})`),
-    extendedIconSize: unsafeCSS("var(--m3e-fab-medium-icon-size, 1.75rem)"),
-    shape: unsafeCSS(`var(--m3e-fab-medium-shape, ${DesignToken.shape.corner.largeIncreased})`),
-    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, 1.625rem) + ${DesignToken.density.calc(-3)})`),
-    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, 1.625rem) + ${DesignToken.density.calc(-3)})`),
-    iconLabelSpace: unsafeCSS("var(--m3e-fab-medium-icon-label-space, 0.75rem)"),
-    extendedLeadingSpace: unsafeCSS("var(--m3e-fab-medium-leading-space, 1.625rem)"),
-    extendedTrailingSpace: unsafeCSS("var(--m3e-fab-medium-trailing-space, 1.625rem)"),
-  },
-
-  /** Design tokens that control the `large` `size` variant. */
-  large: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-fab-large-container-height, 6rem) + ${DesignToken.density.calc(-3)})`),
-    labelTextFontSize: unsafeCSS(
-      `var(--m3e-fab-large-label-text-font-size, ${DesignToken.typescale.standard.headline.small.fontSize})`
-    ),
-    labelTextFontWeight: unsafeCSS(
-      `var(--m3e-fab-large-label-text-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight})`
-    ),
-    labelTextLineHeight: unsafeCSS(
-      `var(--m3e-fab-large-label-text-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight})`
-    ),
-    labelTextTracking: unsafeCSS(
-      `var(--m3e-fab-large-label-text-tracking, ${DesignToken.typescale.standard.headline.small.tracking})`
-    ),
-    iconSize: unsafeCSS(`calc(var(--m3e-fab-large-icon-size, 2.25rem) + ${DesignToken.density.calc(-3)})`),
-    extendedIconSize: unsafeCSS("var(--m3e-fab-large-icon-size, 2.25rem)"),
-    shape: unsafeCSS(`var(--m3e-fab-large-shape, ${DesignToken.shape.corner.extraLarge})`),
-    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, 1.75rem) + ${DesignToken.density.calc(-3)})`),
-    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, 1.75rem) + ${DesignToken.density.calc(-3)})`),
-    iconLabelSpace: unsafeCSS("var(--m3e-fab-large-icon-label-space, 1rem)"),
-    extendedLeadingSpace: unsafeCSS("var(--m3e-fab-large-leading-space, 1.75rem)"),
-    extendedTrailingSpace: unsafeCSS("var(--m3e-fab-large-trailing-space, 1.75rem)"),
-  },
-} as const;

package/src/styles/FabStyle.ts

@@ -1,155 +0,0 @@
-import { css, CSSResultGroup, unsafeCSS } from "lit";
-
-import { DesignToken } from "@m3e/core";
-
-/**
- * Baseline styles for `M3eFabElement`.
- * @internal
- */
-export const FabStyle: CSSResultGroup = css`
-  :host {
-    display: inline-block;
-    outline: none;
-    user-select: none;
-  }
-  .base {
-    box-sizing: border-box;
-    vertical-align: middle;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: 100%;
-    transition: ${unsafeCSS(
-      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`
-    )};
-  }
-  .touch {
-    position: absolute;
-    height: 3rem;
-    left: 0;
-    right: 0;
-  }
-  .wrapper {
-    width: 100%;
-    overflow: hidden;
-    display: inline-flex;
-    align-items: center;
-  }
-  .label {
-    justify-self: center;
-    flex: 1 1 auto;
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
-  }
-  .icon {
-    transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
-  }
-  :host(:not(:disabled):not([disabled-interactive])) {
-    cursor: pointer;
-  }
-  :host([disabled-interactive]) {
-    cursor: not-allowed;
-  }
-  .close-icon,
-  ::slotted(:not([slot])),
-  ::slotted([slot="close-icon"]) {
-    font-size: inherit !important;
-    flex: none;
-  }
-  .close-icon,
-  ::slotted(svg:not([slot])),
-  ::slotted(svg[slot="close-icon"]) {
-    width: 1em;
-    height: 1em;
-  }
-  :host(:not([extended])) ::slotted([slot="label"]),
-  .base.-with-menu ::slotted([slot="label"]),
-  .base:not(.-with-menu) ::slotted([slot="close-icon"]),
-  .base:not(.-with-menu) .close-icon,
-  :host([aria-expanded="true"]) .base.-with-menu ::slotted(:not([slot])),
-  :host([aria-expanded="false"]) .base.-with-menu ::slotted([slot="close-icon"]),
-  :host([aria-expanded="false"]) .base.-with-menu .close-icon {
-    display: none;
-  }
-  :host([aria-expanded="true"]) .base.-with-menu {
-    border-radius: var(--m3e-fab-menu-close-button-container-shape, ${DesignToken.shape.corner.full});
-    height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken.density.calc(-3)});
-  }
-  :host([aria-expanded="true"]) .base.-with-menu .wrapper {
-    padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${DesignToken.density.calc(-3)});
-    padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken.density.calc(-3)});
-  }
-  :host([aria-expanded="true"]) .base.-with-menu .icon {
-    font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)});
-    --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)});
-  }
-  .base.-with-menu {
-    transition: height ${DesignToken.motion.spring.fastSpatial};
-  }
-  .base.-with-menu .wrapper {
-    transition: padding ${DesignToken.motion.spring.fastSpatial};
-  }
-  a {
-    all: unset;
-    display: block;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    z-index: 1;
-  }
-  @media (forced-colors: active) {
-    .base,
-    .icon {
-      transition: none;
-    }
-    .base {
-      outline-style: solid;
-    }
-    :host([variant]:not(:disabled):not([disabled-interactive])) .base {
-      background-color: ButtonFace;
-      outline-color: ButtonText;
-    }
-    :host([variant]:not(:disabled):not([disabled-interactive])) .label,
-    :host([variant]:not(:disabled):not([disabled-interactive])) .icon {
-      color: ButtonText;
-    }
-    :host([variant]:disabled) .base,
-    :host([variant][disabled-interactive]) .base {
-      outline-color: GrayText;
-      background-color: unset;
-    }
-    :host([variant]:disabled) .label,
-    :host([variant][disabled-interactive]) .label,
-    :host([variant]:disabled) .icon,
-    :host([variant][disabled-interactive]) .icon {
-      color: GrayText;
-    }
-    :host([size="small"]) .base {
-      outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px));
-      outline-width: var(--m3e-button-small-outline-thickness, 1px);
-    }
-    :host([size="medium"]) .base {
-      outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px));
-      outline-width: var(--m3e-button-medium-outline-thickness, 1px);
-    }
-    :host([size="large"]) .base {
-      outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 0.125rem));
-      outline-width: var(--m3e-button-large-outline-thickness, 0.125rem);
-    }
-  }
-  @media (prefers-reduced-motion) {
-    .base,
-    .base.resting,
-    .base.pressed,
-    .label,
-    .icon {
-      transition: none;
-    }
-  }
-`;

package/src/styles/FabVariantStyle.ts

@@ -1,95 +0,0 @@
-import { css, CSSResult, CSSResultGroup, unsafeCSS } from "lit";
-
-import { FabVariant } from "../FabVariant";
-import { FabVariantToken } from "./FabVariantToken";
-
-/** @private */
-function fabVariantStyle(variant: FabVariant): CSSResult {
-  return css`
-    :host([variant="${unsafeCSS(variant)}"]:not([lowered])) .base {
-      background-color: ${FabVariantToken[variant].containerColor};
-      --m3e-elevation-level: ${FabVariantToken[variant].containerElevation};
-      --m3e-elevation-hover-level: ${FabVariantToken[variant].hover.containerElevation};
-      --m3e-elevation-focus-level: ${FabVariantToken[variant].focus.containerElevation};
-      --m3e-elevation-pressed-level: ${FabVariantToken[variant].pressed.containerElevation};
-    }
-    :host([variant="${unsafeCSS(variant)}"][lowered]) .base {
-      background-color: ${FabVariantToken[variant].loweredContainerColor ?? FabVariantToken[variant].containerColor};
-      --m3e-elevation-level: ${FabVariantToken[variant].loweredContainerElevation};
-      --m3e-elevation-hover-level: ${FabVariantToken[variant].hover.loweredContainerElevation};
-      --m3e-elevation-focus-level: ${FabVariantToken[variant].focus.loweredContainerElevation};
-      --m3e-elevation-pressed-level: ${FabVariantToken[variant].pressed.loweredContainerElevation};
-    }
-    :host([variant="${unsafeCSS(variant)}"]) .base {
-      --m3e-state-layer-hover-color: ${FabVariantToken[variant].hover.stateLayerColor};
-      --m3e-state-layer-hover-opacity: ${FabVariantToken[variant].hover.stateLayerOpacity};
-      --m3e-state-layer-focus-color: ${FabVariantToken[variant].focus.stateLayerColor};
-      --m3e-state-layer-focus-opacity: ${FabVariantToken[variant].focus.stateLayerOpacity};
-      --m3e-ripple-color: ${FabVariantToken[variant].pressed.stateLayerColor};
-      --m3e-ripple-opacity: ${FabVariantToken[variant].pressed.stateLayerOpacity};
-    }
-    :host([variant="${unsafeCSS(variant)}"]) .label {
-      color: ${FabVariantToken[variant].labelTextColor};
-    }
-    :host([variant="${unsafeCSS(variant)}"]:focus) .label {
-      color: ${FabVariantToken[variant].focus.labelTextColor};
-    }
-    :host([variant="${unsafeCSS(variant)}"]:hover) .label {
-      color: ${FabVariantToken[variant].hover.labelTextColor};
-    }
-    :host([variant="${unsafeCSS(variant)}"]) .base.pressed .label {
-      color: ${FabVariantToken[variant].pressed.labelTextColor};
-    }
-    :host([variant="${unsafeCSS(variant)}"]) .icon {
-      color: ${FabVariantToken[variant].iconColor};
-    }
-    :host([variant="${unsafeCSS(variant)}"]:focus) .icon {
-      color: ${FabVariantToken[variant].focus.iconColor};
-    }
-    :host([variant="${unsafeCSS(variant)}"]:hover) .icon {
-      color: ${FabVariantToken[variant].hover.iconColor};
-    }
-    :host([variant="${unsafeCSS(variant)}"]) .base.pressed .icon {
-      color: ${FabVariantToken[variant].pressed.iconColor};
-    }
-    :host([variant="${unsafeCSS(variant)}"]:disabled) .base,
-    :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base {
-      --m3e-elevation-level: ${FabVariantToken[variant].disabled.containerElevation};
-      background-color: color-mix(
-        in srgb,
-        ${FabVariantToken[variant].disabled.containerColor} ${FabVariantToken[variant].disabled.containerOpacity},
-        transparent
-      );
-    }
-    :host([variant="${unsafeCSS(variant)}"]:disabled) .label,
-    :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .label {
-      color: color-mix(
-        in srgb,
-        ${FabVariantToken[variant].disabled.labelTextColor} ${FabVariantToken[variant].disabled.labelTextOpacity},
-        transparent
-      );
-    }
-    :host([variant="${unsafeCSS(variant)}"]:disabled) .icon,
-    :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon {
-      color: color-mix(
-        in srgb,
-        ${FabVariantToken[variant].disabled.iconColor} ${FabVariantToken[variant].disabled.iconOpacity},
-        transparent
-      );
-    }
-  `;
-}
-
-/**
- * Appearance variant styles for `M3eFabElement`.
- * @internal
- */
-export const FabVariantStyle: CSSResultGroup = [
-  fabVariantStyle("primary"),
-  fabVariantStyle("secondary"),
-  fabVariantStyle("tertiary"),
-  fabVariantStyle("primary-container"),
-  fabVariantStyle("secondary-container"),
-  fabVariantStyle("tertiary-container"),
-  fabVariantStyle("surface"),
-];