jfs-components 0.1.50 → 0.1.54

package/src/components/Badge/Badge.tsx

@@ -15,6 +15,26 @@ import GlassFill from '../../utils/GlassFill/GlassFill'
 
 export type BadgeType = 'default' | 'glass'
 
+/**
+ * Figma still binds `badge/color/label`, but that alias is broken for
+ * `Semantic Intent=System` + `Emphasis=High` (missing VariableID:2811:2401).
+ * Use the published tokens that the chain is supposed to land on:
+ * - Brand → `Emphasis/badge/brand/fg`
+ * - System + High → `Emphasis/badge/high/fg Copy` (AppearanceSystem)
+ * - System + Medium/Low → `Emphasis/badge/system/fg`
+ */
+function badgeLabelColorToken(modes: Modes): string {
+  const intent = modes['Semantic Intent'] ?? 'Brand'
+  const emphasis = modes.Emphasis ?? 'High'
+  if (intent === 'System' && emphasis === 'High') {
+    return 'Emphasis/badge/high/fg Copy'
+  }
+  if (intent === 'System') {
+    return 'Emphasis/badge/system/fg'
+  }
+  return 'Emphasis/badge/brand/fg'
+}
+
 export type BadgeProps = {
   /** Visible label text shown inside the badge */
   label?: string
@@ -91,7 +111,7 @@ function Badge({
     (getVariableByName('badge/glass/color/label', modes) as string)
   const labelColor = isGlass
     ? glassLabelColor
-    : (getVariableByName('badge/color/label', modes) as string)
+    : (getVariableByName(badgeLabelColorToken(modes), modes) as string)
   const fontSize =
     Number(getVariableByName('badge/label/fontSize', modes) as unknown)
   const fontFamily =

package/src/components/Button/Button.tsx

@@ -13,11 +13,20 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import GlassFill from '../../utils/GlassFill/GlassFill'
 import Icon from '../../icons/Icon'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
 import type { Modes } from '../../design-tokens'
 
+/**
+ * Figma `Type` property on Button.
+ * - `'default'` — solid token-colored pill (hugs content)
+ * - `'glass'` — frosted translucent pill backed by {@link GlassFill}
+ * - `'fixed'` — solid pill constrained by `button/maxWidth`
+ */
+export type ButtonType = 'default' | 'glass' | 'fixed'
+
 export type ButtonProps = SafePressableProps & {
   label?: string;
   children?: React.ReactNode;
@@ -45,6 +54,22 @@ export type ButtonProps = SafePressableProps & {
    * Takes precedence over `trailing` if both are provided.
    */
   icon?: string;
+  /**
+   * Visual/layout type matching the Figma `Type` property. Defaults to
+   * `'default'`. `'glass'` also activates when `modes['Button type'] === 'glass'`.
+   */
+  type?: ButtonType;
+  /**
+   * Glass-only override for the translucent overlay color painted over the live
+   * blur. Defaults to the resolved `button/background` token under
+   * `Button type=glass`. Ignored for non-glass types.
+   */
+  glassOverlayColor?: string;
+  /**
+   * Glass-only override for blur intensity on the 0–100 scale. Defaults to the
+   * `blur/minimal` token. Ignored for non-glass types.
+   */
+  glassIntensity?: number;
   modes?: Modes;
   onPress?: () => void;
   disabled?: boolean;
@@ -115,6 +140,8 @@ const NO_WRAP_LABEL_STYLE: TextStyle = {
 // ---------------------------------------------------------------------------
 
 interface ButtonTokens {
+  isGlass: boolean;
+  isFixed: boolean;
   container: ViewStyle;
   baseLabel: TextStyle;
   hoverContainer: ViewStyle | null;
@@ -126,28 +153,101 @@ interface ButtonTokens {
   pressedIconColor: string;
   iconSize: number;
   accessoryOffset: number;
+  /** Idle glass overlay (token `button/background` under Button type=glass). */
+  glassOverlayIdle: string;
+  glassOverlayHover: string | null;
+  glassOverlayPressed: string;
+  /** `blur/minimal` mapped to GlassFill's 0–100 intensity scale. */
+  glassBlurIntensity: number;
+}
+
+type ButtonInteractiveState = 'Idle' | 'Hover' | 'Pressed' | 'Disabled'
+
+const BUTTON_STATE_VALUES = new Set<string>(['Idle', 'Hover', 'Pressed', 'Disabled'])
+const SOLID_STATE_COLLECTION = 'Button / State'
+const GLASS_STATE_COLLECTION = 'Button Glass State'
+
+function resolveIsGlass(type: ButtonType, modes: Modes): boolean {
+  return type === 'glass' || modes['Button type'] === 'glass'
+}
+
+/**
+ * Pick Idle/Hover/Pressed/Disabled from the active state collection, falling
+ * back to the sibling collection when callers pass the other key (e.g. glass
+ * buttons that still send `Button / State`). Never treats a collection name
+ * as a mode value.
+ */
+function pickButtonInteractiveState(
+  modes: Modes,
+  isGlass: boolean,
+): ButtonInteractiveState {
+  const primary = isGlass ? GLASS_STATE_COLLECTION : SOLID_STATE_COLLECTION
+  const sibling = isGlass ? SOLID_STATE_COLLECTION : GLASS_STATE_COLLECTION
+  const candidate = modes[primary] ?? modes[sibling]
+  if (typeof candidate === 'string' && BUTTON_STATE_VALUES.has(candidate)) {
+    return candidate as ButtonInteractiveState
+  }
+  return 'Idle'
 }
 
-function resolveButtonTokens(modes: Modes, disabled: boolean): ButtonTokens {
-  const backgroundColor = getVariableByName('button/background', modes)
-  const borderColor = getVariableByName('button/border/color', modes)
-  const borderWidth = getVariableByName('button/border/size', modes)
-  const radius = getVariableByName('button/radius', modes)
-  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes)
-  const paddingVertical = getVariableByName('button/padding/vertical', modes)
-  const gap = getVariableByName('button/gap', modes)
-
-  const fontFamily = getVariableByName('button/fontFamily', modes)
-  const fontWeightValue = getVariableByName('button/fontWeight', modes)
+/** Write a valid interactive state onto the correct collection for glass/solid. */
+function withButtonInteractiveState(
+  modes: Modes,
+  isGlass: boolean,
+  state: ButtonInteractiveState,
+): Modes {
+  const collection = isGlass ? GLASS_STATE_COLLECTION : SOLID_STATE_COLLECTION
+  const sibling = isGlass ? SOLID_STATE_COLLECTION : GLASS_STATE_COLLECTION
+  const { [sibling]: _dropSibling, ...rest } = modes
+  return { ...rest, [collection]: state }
+}
+
+function resolveButtonTokens(
+  modes: Modes,
+  disabled: boolean,
+  type: ButtonType,
+): ButtonTokens {
+  const isGlass = resolveIsGlass(type, modes)
+  const isFixed = type === 'fixed'
+
+  // Inject the Button type mode so token aliases (background/foreground) resolve
+  // to the glass palette. Callers can also drive glass solely via modes.
+  const effectiveModes: Modes = isGlass
+    ? { ...modes, 'Button type': 'glass' }
+    : modes
+
+  // Glass interactive states live on `Button Glass State`; solid on `Button / State`.
+  // Map Idle/Hover/Pressed/Disabled values through — never assign a collection name.
+  const idleState: ButtonInteractiveState =
+    disabled && isGlass ? 'Disabled' : pickButtonInteractiveState(effectiveModes, isGlass)
+  const idleModes = withButtonInteractiveState(effectiveModes, isGlass, idleState)
+
+  const backgroundColor = getVariableByName('button/background', idleModes)
+  const borderColor = getVariableByName('button/border/color', idleModes)
+  const borderWidth = getVariableByName('button/border/size', idleModes)
+  const radius = getVariableByName('button/radius', idleModes)
+  const paddingHorizontal = getVariableByName('button/padding/horizontal', idleModes)
+  const paddingVertical = getVariableByName('button/padding/vertical', idleModes)
+  const gap = getVariableByName('button/gap', idleModes)
+  const maxWidth = getVariableByName('button/maxWidth', idleModes)
+
+  const fontFamily = getVariableByName('button/fontFamily', idleModes)
+  const fontWeightValue = getVariableByName('button/fontWeight', idleModes)
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue
-  const lineHeight = getVariableByName('button/lineHeight', modes)
-  const fontSize = getVariableByName('button/fontSize', modes)
-  const textColor = getVariableByName('button/foreground', modes)
-  const iconSize = (getVariableByName('button/icon/size', modes) ?? 18) as number
-
-  // Pressed tokens are always resolved so the Pressable `style` callback can
-  // apply the pressed visual without scheduling a React render.
-  const pressedModes = { ...modes, 'Button / State': 'Pressed' }
+  const lineHeight = getVariableByName('button/lineHeight', idleModes)
+  const fontSize = getVariableByName('button/fontSize', idleModes)
+  const textColor = getVariableByName('button/foreground', idleModes)
+  const iconSize = (getVariableByName('button/icon/size', idleModes) ?? 18) as number
+
+  // Figma `blur/minimal` (px radius) -> GlassFill's 0–100 intensity scale.
+  const glassBlurIntensity = Math.max(
+    0,
+    Math.min(100, Math.round(Number(getVariableByName('blur/minimal', idleModes) ?? 29))),
+  )
+
+  // Pressed tokens are always resolved so the Pressable `style` callback /
+  // glass overlay can apply the pressed visual without a modes recompute.
+  const pressedModes = withButtonInteractiveState(effectiveModes, isGlass, 'Pressed')
   const pressedBg = getVariableByName('button/background', pressedModes)
   const pressedBorderColor = getVariableByName('button/border/color', pressedModes)
   const pressedTextColor = (getVariableByName('button/foreground', pressedModes)) as string
@@ -156,15 +256,22 @@ function resolveButtonTokens(modes: Modes, disabled: boolean): ButtonTokens {
   // ~3 token lookups + an object spread per render on every Button.
   let hoverContainer: ViewStyle | null = null
   let hoverTextColor: string | null = null
+  let glassOverlayHover: string | null = null
   if (IS_WEB) {
-    const hoverModes = { ...modes, 'Button / State': 'Hover' }
+    const hoverModes = withButtonInteractiveState(effectiveModes, isGlass, 'Hover')
     const hoverBg = getVariableByName('button/background', hoverModes)
     const hoverBorderColor = getVariableByName('button/border/color', hoverModes)
     hoverTextColor = (getVariableByName('button/foreground', hoverModes)) as string
-    hoverContainer = { backgroundColor: hoverBg as string, borderColor: hoverBorderColor as string }
+    glassOverlayHover = hoverBg as string
+    // Glass keeps the host transparent; hover only retints the GlassFill overlay.
+    hoverContainer = isGlass
+      ? null
+      : { backgroundColor: hoverBg as string, borderColor: hoverBorderColor as string }
   }
 
   return {
+    isGlass,
+    isFixed,
     container: {
       ...containerLayoutStyle,
       paddingHorizontal: paddingHorizontal as number,
@@ -172,9 +279,14 @@ function resolveButtonTokens(modes: Modes, disabled: boolean): ButtonTokens {
       borderRadius: radius as number,
       borderWidth: (borderWidth ?? 1) as number,
       borderColor: borderColor as string,
-      backgroundColor: backgroundColor as string,
+      // Glass: transparent host so GlassFill shows through. Fixed: clamp width.
+      backgroundColor: isGlass ? 'transparent' : (backgroundColor as string),
       gap: gap as number,
-      opacity: disabled ? 0.5 : 1,
+      // Glass disabled uses Button Glass State=Disabled foreground tokens —
+      // don't also apply the solid-button opacity fade.
+      opacity: disabled && !isGlass ? 0.5 : 1,
+      ...(isGlass ? { overflow: 'hidden' as const } : null),
+      ...(isFixed && maxWidth != null ? { maxWidth: maxWidth as number } : null),
     },
     baseLabel: {
       color: textColor as string,
@@ -184,10 +296,12 @@ function resolveButtonTokens(modes: Modes, disabled: boolean): ButtonTokens {
       lineHeight: lineHeight as number,
     },
     hoverContainer,
-    pressedContainer: {
-      backgroundColor: pressedBg as string,
-      borderColor: pressedBorderColor as string,
-    },
+    pressedContainer: isGlass
+      ? {}
+      : {
+          backgroundColor: pressedBg as string,
+          borderColor: pressedBorderColor as string,
+        },
     hoverTextColor,
     pressedTextColor,
     baseIconColor: textColor as string,
@@ -195,6 +309,10 @@ function resolveButtonTokens(modes: Modes, disabled: boolean): ButtonTokens {
     pressedIconColor: pressedTextColor,
     iconSize,
     accessoryOffset: (gap as number) / 2,
+    glassOverlayIdle: backgroundColor as string,
+    glassOverlayHover,
+    glassOverlayPressed: pressedBg as string,
+    glassBlurIntensity,
   }
 }
 
@@ -240,6 +358,9 @@ function ButtonImpl({
   leading,
   trailing,
   icon,
+  type = 'default',
+  glassOverlayColor,
+  glassIntensity,
   modes = EMPTY_MODES,
   onPress,
   disabled = false,
@@ -271,8 +392,8 @@ function ButtonImpl({
   userHandlersRef.current.onHoverOut = (rest as any)?.onHoverOut
 
   const tokens = useMemo(
-    () => resolveButtonTokens(modes, disabled),
-    [modes, disabled]
+    () => resolveButtonTokens(modes, disabled, type),
+    [modes, disabled, type]
   )
 
   // Skeleton context — read unconditionally so React's hook order stays
@@ -412,6 +533,26 @@ function ButtonImpl({
     )
   }
 
+  const body = (
+    <>
+      {leading ? (
+        <View style={leadingAccessoryStyle}>
+          {leading}
+        </View>
+      ) : null}
+      {content}
+      {icon ? (
+        <View style={trailingAccessoryStyle}>
+          <Icon name={icon} size={tokens.iconSize} color={activeIconColor} accessibilityElementsHidden={true} importantForAccessibility="no" />
+        </View>
+      ) : trailing ? (
+        <View style={trailingAccessoryStyle}>
+          {trailing}
+        </View>
+      ) : null}
+    </>
+  )
+
   return (
     <Pressable
       accessibilityRole="button"
@@ -431,21 +572,28 @@ function ButtonImpl({
       style={styleCallback}
       {...webProps}
     >
-      {leading ? (
-        <View style={leadingAccessoryStyle}>
-          {leading}
-        </View>
-      ) : null}
-      {content}
-      {icon ? (
-        <View style={trailingAccessoryStyle}>
-          <Icon name={icon} size={tokens.iconSize} color={activeIconColor} accessibilityElementsHidden={true} importantForAccessibility="no" />
-        </View>
-      ) : trailing ? (
-        <View style={trailingAccessoryStyle}>
-          {trailing}
-        </View>
-      ) : null}
+      {tokens.isGlass
+        ? ({ pressed }: PressableStateCallbackType) => {
+            const overlayColor =
+              glassOverlayColor ??
+              (pressed && !disabled
+                ? tokens.glassOverlayPressed
+                : isHovered && !disabled && tokens.glassOverlayHover
+                  ? tokens.glassOverlayHover
+                  : tokens.glassOverlayIdle)
+            return (
+              <>
+                <GlassFill
+                  tint="light"
+                  intensity={glassIntensity ?? tokens.glassBlurIntensity}
+                  overlayColor={overlayColor}
+                  androidTintWash={false}
+                />
+                {body}
+              </>
+            )
+          }
+        : body}
     </Pressable>
   )
 }

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -16,7 +16,7 @@ export type ButtonGroupProps = {
      */
     children?: React.ReactNode;
     /**
-     * Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
+     * Mode configuration for design tokens (e.g., {"Button / Size": "M", "Emphasis": "High"})
      * These modes are passed down to all child components.
      */
     modes?: Modes;
@@ -37,7 +37,7 @@ export type ButtonGroupProps = {
  * @component
  * @example
  * ```jsx
- * <ButtonGroup modes={{"Appearance": "light"}}>
+ * <ButtonGroup modes={{"Color Mode": "Light"}}>
  *   <IconButton iconName="ic_qr_code" />
  *   <Button label="Pay" />
  * </ButtonGroup>