@medway-ui/native 1.7.1 → 1.8.0

package/setup/tokens.native.css

@@ -247,12 +247,12 @@
 
   /* === Gold colors === */
   --color-gold: rgba(217, 172, 104, 1);
-  --color-gold-darken-1: rgba(209, 154, 72, 1);
-  --color-gold-darken-2: rgba(191, 134, 49, 1);
-  --color-gold-darken-3: rgba(159, 111, 40, 1);
-  --color-gold-darken-4: rgba(126, 88, 32, 1);
-  --color-gold-darken-5: rgba(94, 66, 24, 1);
-  --color-gold-darken-6: rgba(61, 43, 15, 1);
+  --color-gold-darken-1: rgba(200, 152, 81, 1);
+  --color-gold-darken-2: rgba(181, 132, 59, 1);
+  --color-gold-darken-3: rgba(151, 110, 48, 1);
+  --color-gold-darken-4: rgba(119, 87, 39, 1);
+  --color-gold-darken-5: rgba(89, 65, 29, 1);
+  --color-gold-darken-6: rgba(57, 42, 19, 1);
   --color-gold-lighten-1: rgba(221, 181, 121, 1);
   --color-gold-lighten-2: rgba(229, 199, 153, 1);
   --color-gold-lighten-3: rgba(233, 208, 170, 1);
@@ -366,8 +366,8 @@
   --color-secondary-0: rgba(1, 208, 180, 0);
 
   /* === Base drop-shadow colors === */
-  --color-drop-shadow-layer-a: rgba(33, 38, 49, 0.16);
-  --color-drop-shadow-layer-b: rgba(73, 85, 110, 0.16);
+  --color-drop-shadow-layer-a: rgba(33, 38, 49, 0.04);
+  --color-drop-shadow-layer-b: rgba(73, 85, 110, 0.08);
   --color-drop-shadow-subtle-layer-a: rgba(33, 38, 49, 0.04);
   --color-drop-shadow-subtle-layer-b: rgba(73, 85, 110, 0.08);
 
@@ -535,29 +535,29 @@
   /* === Base gold colors === */
   --color-gold-foreground: var(--color-gold-darken-4);
   --color-gold-foreground-emphasis: var(--color-gold-darken-5);
-  --color-gold-foreground-onfill: var(--color-gold-darken-5);
-  --color-gold-background-fill: var(--color-gold);
+  --color-gold-foreground-onfill: var(--color-gold-darken-6);
+  --color-gold-background-fill: var(--color-gold-lighten-1);
   --color-gold-background-fill-emphasis: var(--color-gold-darken-1);
-  --color-gold-background-soft: var(--color-gold-24);
-  --color-gold-background-soft-emphasis: var(--color-gold-16);
+  --color-gold-background-soft: var(--color-gold-16);
+  --color-gold-background-soft-emphasis: var(--color-gold-8);
 
   /* === Base silver colors === */
-  --color-silver-foreground: var(--color-silver-darken-4);
+  --color-silver-foreground: var(--color-silver-darken-3);
   --color-silver-foreground-emphasis: var(--color-silver-darken-6);
   --color-silver-foreground-onfill: var(--color-white);
-  --color-silver-background-fill: var(--color-silver);
-  --color-silver-background-fill-emphasis: var(--color-silver-darken-1);
-  --color-silver-background-soft: var(--color-silver-8);
-  --color-silver-background-soft-emphasis: var(--color-silver-4);
+  --color-silver-background-fill: var(--color-silver-darken-1);
+  --color-silver-background-fill-emphasis: var(--color-silver-darken-3);
+  --color-silver-background-soft: var(--color-silver-16);
+  --color-silver-background-soft-emphasis: var(--color-silver-8);
 
   /* === Base bronze colors === */
-  --color-bronze-foreground: var(--color-bronze-darken-3);
-  --color-bronze-foreground-emphasis: var(--color-bronze-darken-4);
+  --color-bronze-foreground: var(--color-bronze-darken-2);
+  --color-bronze-foreground-emphasis: var(--color-bronze-darken-3);
   --color-bronze-foreground-onfill: var(--color-white);
   --color-bronze-background-fill: var(--color-bronze);
   --color-bronze-background-fill-emphasis: var(--color-bronze-darken-1);
-  --color-bronze-background-soft: var(--color-bronze-24);
-  --color-bronze-background-soft-emphasis: var(--color-bronze-16);
+  --color-bronze-background-soft: var(--color-bronze-16);
+  --color-bronze-background-soft-emphasis: var(--color-bronze-8);
 
   /* === Base primary colors === */
   --color-primary-foreground: var(--color-primary);
@@ -795,7 +795,7 @@
     --color-surface-elevated: var(--color-gray-800);
     --color-surface-card: var(--color-gray-850);
     --color-surface-navigation: var(--color-gray-850);
-    --color-surface-section: var(--color-gray-900);
+    --color-surface-section: var(--color-gray-850);
     --color-surface-page: var(--color-gray-950);
     --color-surface-disable: var(--color-black-8);
     --color-surface-settings-on: var(--color-black-48);
@@ -903,6 +903,33 @@
     --color-prev-background-soft: var(--color-prev-24);
     --color-prev-background-soft-emphasis: var(--color-prev-48);
 
+    /* === Dark gold colors === */
+    --color-gold-foreground: var(--color-gold-lighten-1);
+    --color-gold-foreground-emphasis: var(--color-gold-lighten-2);
+    --color-gold-foreground-onfill: var(--color-gold-darken-6);
+    --color-gold-background-fill: var(--color-gold-darken-1);
+    --color-gold-background-fill-emphasis: var(--color-gold);
+    --color-gold-background-soft: var(--color-gold-8);
+    --color-gold-background-soft-emphasis: var(--color-gold-16);
+
+    /* === Dark silver colors === */
+    --color-silver-foreground: var(--color-silver-lighten-3);
+    --color-silver-foreground-emphasis: var(--color-silver-lighten-5);
+    --color-silver-foreground-onfill: var(--color-white);
+    --color-silver-background-fill: var(--color-silver-darken-1);
+    --color-silver-background-fill-emphasis: var(--color-silver);
+    --color-silver-background-soft: var(--color-silver-8);
+    --color-silver-background-soft-emphasis: var(--color-silver-16);
+
+    /* === Dark bronze colors === */
+    --color-bronze-foreground: var(--color-bronze-lighten-3);
+    --color-bronze-foreground-emphasis: var(--color-bronze-lighten-4);
+    --color-bronze-foreground-onfill: var(--color-bronze-darken-5);
+    --color-bronze-background-fill: var(--color-bronze-lighten-1);
+    --color-bronze-background-fill-emphasis: var(--color-bronze);
+    --color-bronze-background-soft: var(--color-bronze-8);
+    --color-bronze-background-soft-emphasis: var(--color-bronze-16);
+
     /* === Dark primary colors === */
     --color-primary-foreground: var(--color-gray-100);
     --color-primary-foreground-emphasis: var(--color-white);

package/src/components/Badge.tsx

@@ -1,5 +1,10 @@
 import { useEffect, type ReactNode } from "react";
-import { View, type LayoutChangeEvent, type ViewProps } from "react-native";
+import {
+  View,
+  type LayoutChangeEvent,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
 import Animated, {
   Easing,
   cancelAnimation,
@@ -16,71 +21,180 @@ import { cn } from "@/lib/utils";
 
 type BadgeAnimation = "shine";
 
-interface BadgeProps extends ViewProps, VariantProps<typeof badgeVariants> {
+type BadgeLayout = "tag" | "dot";
+
+type BadgeBaseProps = ViewProps & VariantProps<typeof badgeVariants>;
+
+interface BadgeTagProps extends BadgeBaseProps {
+  layout?: "tag";
   icon?: ReactNode;
   animation?: BadgeAnimation;
   children?: ReactNode;
 }
 
-const ICON_ONLY_SIZES: Record<"sm" | "md" | "lg" | "xl", string> = {
-  sm: "h-4 w-4 p-0",
-  md: "h-5 w-5 p-0",
-  lg: "h-6 w-6 p-0",
-  xl: "h-7 w-7 p-0",
-};
+// A dot has no content, so the types flag what it would drop.
+interface BadgeDotProps extends BadgeBaseProps {
+  layout: "dot";
+  icon?: never;
+  animation?: never;
+  children?: never;
+}
 
-const CHAR_PADDING: Record<"sm" | "md" | "lg" | "xl", string> = {
-  sm: "px-1",
-  md: "px-1",
-  lg: "px-1",
-  xl: "px-1.5",
-};
+type BadgeProps = BadgeTagProps | BadgeDotProps;
 
-const badgeVariants = cva(
-  "flex-row items-center justify-center rounded-full px-2",
-  {
-    variants: {
-      variant: {
-        regular: "bg-secondary-background-fill",
-        error: "bg-red-background-soft",
-        warning: "bg-yellow-background-soft",
-        freemium: "bg-primary-background-fill",
-      },
-      size: {
-        sm: "min-h-4 min-w-4",
-        md: "min-h-5 min-w-5",
-        lg: "min-h-6 min-w-6",
-        xl: "min-h-7 min-w-7",
-      },
+const badgeVariants = cva("flex-row items-center justify-center rounded-pill", {
+  variants: {
+    variant: {
+      primary: "bg-primary-background-fill",
+      "primary-soft": "bg-surface-card",
+      secondary: "bg-secondary-background-fill",
+      "secondary-soft": "bg-surface-card",
+      regular: "bg-secondary-background-fill",
+      cm: "bg-cm-background-fill",
+      "cm-soft": "bg-surface-card",
+      go: "bg-go-background-fill",
+      "go-soft": "bg-surface-card",
+      cir: "bg-cir-background-fill",
+      "cir-soft": "bg-surface-card",
+      // The design paints pediatrics with the warning tokens, all but the filled label.
+      ped: "bg-yellow-background-fill",
+      "ped-soft": "bg-surface-card",
+      prev: "bg-prev-background-fill",
+      "prev-soft": "bg-surface-card",
+      freemium: "bg-primary",
+      error: "bg-red-background-soft",
+      warning: "bg-yellow-background-soft",
+      neutral: "bg-gray-background-soft",
     },
-    defaultVariants: {
-      variant: "regular",
-      size: "md",
+    size: {
+      sm: "min-h-4 min-w-4 gap-1 px-1 py-0.5",
+      md: "min-h-5 min-w-5 gap-1 px-1 py-0.5",
+      lg: "min-h-6 min-w-6 gap-1.5 px-1.5 py-1",
+      xl: "min-h-7 min-w-7 gap-2 px-2 py-1",
     },
-  }
-);
+  },
+  compoundVariants: [
+    { variant: "freemium", size: "md", className: "px-1.5 py-1" },
+    { variant: "freemium", size: "lg", className: "px-2" },
+    { variant: "freemium", size: "xl", className: "px-2.5" },
+  ],
+  defaultVariants: {
+    variant: "secondary",
+    size: "md",
+  },
+});
 
-const badgeTextVariants = cva("font-semibold", {
+type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>["variant"]>;
+
+// Laid over `surface-card`, as in the design, so a soft badge stays opaque on any surface.
+const SOFT_TINT: Partial<Record<BadgeVariant, string>> = {
+  "primary-soft": "bg-primary-background-soft",
+  "secondary-soft": "bg-secondary-background-soft",
+  "cm-soft": "bg-cm-background-soft",
+  "go-soft": "bg-go-background-soft",
+  "cir-soft": "bg-cir-background-soft",
+  "ped-soft": "bg-yellow-background-soft",
+  "prev-soft": "bg-prev-background-soft",
+};
+
+const badgeTextVariants = cva("font-bold", {
   variants: {
     variant: {
+      primary: "text-primary-foreground-onfill",
+      "primary-soft": "text-primary-foreground",
+      secondary: "text-secondary-foreground-onfill",
+      "secondary-soft": "text-secondary-foreground",
       regular: "text-secondary-foreground-onfill",
+      cm: "text-cm-foreground-onfill",
+      "cm-soft": "text-cm-foreground",
+      go: "text-go-foreground-onfill",
+      "go-soft": "text-go-foreground",
+      cir: "text-cir-foreground-onfill",
+      "cir-soft": "text-cir-foreground",
+      ped: "text-ped-foreground-onfill",
+      "ped-soft": "text-yellow-foreground",
+      prev: "text-prev-foreground-onfill",
+      "prev-soft": "text-prev-foreground",
+      // White, not the design's onfill token: that one turns dark in dark mode, on a fill that stays navy.
+      freemium: "font-semibold text-white",
       error: "text-red-stroke-emphasis",
       warning: "text-yellow-foreground",
-      freemium: "text-white",
+      neutral: "text-primary-foreground",
     },
     size: {
-      sm: "text-xs",
-      md: "text-xs",
-      lg: "text-xs",
-      xl: "text-sm",
+      sm: "text-xxs leading-xxs",
+      md: "text-xs leading-xs",
+      lg: "text-xs leading-xs",
+      xl: "text-sm leading-sm",
     },
   },
+  compoundVariants: [
+    { variant: "freemium", size: "md", className: "text-xxs leading-xxs" },
+  ],
   defaultVariants: {
-    variant: "regular",
+    variant: "secondary",
     size: "md",
   },
 });
 
+const badgeDotVariants = cva("rounded-circular", {
+  variants: {
+    variant: {
+      primary: "bg-primary-background-fill",
+      "primary-soft": "bg-primary-background-fill",
+      secondary: "bg-secondary-background-fill",
+      "secondary-soft": "bg-secondary-background-fill",
+      regular: "bg-secondary-background-fill",
+      cm: "bg-cm-background-fill",
+      "cm-soft": "bg-cm-background-fill",
+      go: "bg-go-background-fill",
+      "go-soft": "bg-go-background-fill",
+      cir: "bg-cir-background-fill",
+      "cir-soft": "bg-cir-background-fill",
+      ped: "bg-yellow-background-fill",
+      "ped-soft": "bg-yellow-background-fill",
+      prev: "bg-prev-background-fill",
+      "prev-soft": "bg-prev-background-fill",
+      freemium: "bg-primary",
+      error: "bg-red-background-fill",
+      warning: "bg-yellow-background-fill",
+      neutral: "bg-gray-background-fill",
+    },
+    size: {
+      sm: "size-1",
+      md: "size-2",
+      lg: "size-3",
+      xl: "size-4",
+    },
+  },
+  defaultVariants: {
+    variant: "secondary",
+    size: "md",
+  },
+});
+
+// The design's 10, 12, 16 and 20px as a minimum: a bigger icon grows the badge instead of
+// spilling over its gap and padding.
+const ICON_BOX: Record<"sm" | "md" | "lg" | "xl", string> = {
+  sm: "min-h-2.5 min-w-2.5",
+  md: "min-h-3 min-w-3",
+  lg: "min-h-4 min-w-4",
+  xl: "min-h-5 min-w-5",
+};
+
+const ICON_ONLY_PADDING: Record<"sm" | "md" | "lg" | "xl", string> = {
+  sm: "p-0.5",
+  md: "px-1 py-0.5",
+  lg: "p-1",
+  xl: "p-1",
+};
+
+// Corner to corner like the design's at any width, unlike the web's fixed 46deg.
+const FREEMIUM_GRADIENT: ViewStyle = {
+  experimental_backgroundImage:
+    "radial-gradient(135.09% 111.8% at 0% 50%, rgba(24, 98, 188, 0.02) 0%, rgba(0, 32, 91, 0) 100%), linear-gradient(to top right, rgba(62, 218, 199, 0.56) 6.54%, rgba(24, 98, 188, 0.17) 85.21%)",
+};
+
 const SHINE_DURATION_MS = 2000;
 
 function BadgeShine() {
@@ -94,7 +208,13 @@ function BadgeShine() {
   const bandStyle = useAnimatedStyle(() => ({
     width: width.value / 2,
     transform: [
-      { translateX: interpolate(progress.value, [0, 1], [width.value, -width.value / 2]) },
+      {
+        translateX: interpolate(
+          progress.value,
+          [0, 1],
+          [width.value, -width.value / 2]
+        ),
+      },
       { skewX: "-20deg" },
     ],
   }));
@@ -111,10 +231,13 @@ function BadgeShine() {
   return (
     <View
       pointerEvents="none"
-      className="absolute inset-0 overflow-hidden rounded-full"
+      className="absolute inset-0 overflow-hidden rounded-pill"
       onLayout={handleLayout}
     >
-      <Animated.View className="absolute bottom-0 top-0 bg-white-24" style={bandStyle} />
+      <Animated.View
+        className="absolute bottom-0 top-0 bg-white-24"
+        style={bandStyle}
+      />
     </View>
   );
 }
@@ -125,39 +248,62 @@ function Badge({
   size,
   icon,
   animation,
+  layout = "tag",
+  style,
   children,
   ...props
 }: BadgeProps) {
-  const childText =
-    typeof children === "string" || typeof children === "number"
-      ? String(children).trim()
-      : "";
-  const isSingleAlphaNum = /^[A-Za-z0-9]$/.test(childText);
-  const isShortAlnumUpTo3 = /^[A-Za-z0-9]{2,3}$/.test(childText);
-  const isDigitsWithSuffix = /^\d{1,2}\S$/.test(childText);
-  const isIconOnly = !!icon && !children;
-  const isShortUpTo3 = isShortAlnumUpTo3 || isDigitsWithSuffix;
+  if (layout === "dot") {
+    return (
+      <View
+        className={cn(badgeDotVariants({ variant, size }), className)}
+        style={style}
+        {...props}
+      />
+    );
+  }
+
+  const resolvedSize = size ?? "md";
+  const tint = SOFT_TINT[variant ?? "secondary"];
+  const hasContent =
+    children != null && typeof children !== "boolean" && children !== "";
+  const isIconOnly = !!icon && !hasContent;
 
   return (
     <View
       className={cn(
         badgeVariants({ variant, size }),
-        (isIconOnly || isSingleAlphaNum) && ICON_ONLY_SIZES[size ?? "md"],
-        !isIconOnly && isShortUpTo3 && CHAR_PADDING[size ?? "md"],
+        isIconOnly && ICON_ONLY_PADDING[resolvedSize],
         className
       )}
+      style={variant === "freemium" ? [FREEMIUM_GRADIENT, style] : style}
       {...props}
     >
+      {tint ? (
+        <View
+          pointerEvents="none"
+          className={cn("absolute inset-0 rounded-pill", tint)}
+        />
+      ) : null}
       {animation === "shine" ? <BadgeShine /> : null}
-      {icon}
-      {children != null && (
-        <Text className={cn(badgeTextVariants({ variant, size }))}>
+      {icon ? (
+        <View
+          className={cn("items-center justify-center", ICON_BOX[resolvedSize])}
+        >
+          {icon}
+        </View>
+      ) : null}
+      {hasContent ? (
+        <Text
+          numberOfLines={1}
+          className={cn(badgeTextVariants({ variant, size }))}
+        >
           {children}
         </Text>
-      )}
+      ) : null}
     </View>
   );
 }
 
 export { Badge, badgeVariants };
-export type { BadgeAnimation, BadgeProps };
+export type { BadgeAnimation, BadgeLayout, BadgeProps };

package/src/components/Choice.tsx

@@ -1,10 +1,10 @@
 import type { ReactNode } from "react";
-import { Pressable, View } from "react-native";
+import { Pressable, View, type Insets } from "react-native";
 import * as MedwayIcons from "@medway-ui/icons/native";
 
 import { Text } from "@/components/Text";
 import { ThemedIcon } from "@/components/ThemedIcon";
-import { useThemeColor } from "@/hooks/useThemeColor";
+import { RaisedSurface } from "@/lib/raised-surface";
 import { cn } from "@/lib/utils";
 
 type ChoiceSize = "sm" | "md" | "lg";
@@ -33,13 +33,29 @@ interface ChoiceProps {
   className?: string;
 }
 
+// The design's padding minus the 2px ring (`p-0.5`) around the inner card. The vertical hit slop
+// takes the 32, 40 and 48pt chips to the package's 44pt touch target (`MIN_TOUCH_TARGET`).
 const SIZE_MAP: Record<
   ChoiceSize,
-  { container: string; text: string; icon: number }
+  { container: string; text: string; icon: number; hitSlop?: Insets }
 > = {
-  sm: { container: "gap-2 px-3 py-2", text: "text-xs", icon: 16 },
-  md: { container: "gap-2.5 px-3.5 py-2.5", text: "text-sm", icon: 20 },
-  lg: { container: "gap-3 px-4 py-3", text: "text-base", icon: 24 },
+  sm: {
+    container: "gap-2 px-2.5 py-1.5",
+    text: "text-xs leading-xs",
+    icon: 16,
+    hitSlop: { top: 6, bottom: 6 },
+  },
+  md: {
+    container: "gap-2.5 px-3 py-2",
+    text: "text-sm leading-sm",
+    icon: 20,
+    hitSlop: { top: 2, bottom: 2 },
+  },
+  lg: {
+    container: "gap-3 px-3.5 py-2.5",
+    text: "text-md leading-md",
+    icon: 24,
+  },
 };
 
 const THEME_SELECTED_OUTER_BG: Record<ChoiceTheme, string> = {
@@ -70,13 +86,6 @@ const THEME_CHECK_COLOR_TOKEN: Record<ChoiceTheme, string> = {
   prev: "prev-foreground",
 };
 
-const SHADOW_STYLE = {
-  shadowOffset: { width: 0, height: 2 },
-  shadowOpacity: 0.08,
-  shadowRadius: 4,
-  elevation: 2,
-};
-
 function Choice({
   label,
   selected = false,
@@ -88,49 +97,61 @@ function Choice({
   className,
 }: ChoiceProps) {
   const sz = SIZE_MAP[size] ?? SIZE_MAP.md;
-  const shadowColor = useThemeColor("gray-700");
+  const isRaised = selected && !disabled;
 
   const outerBg = disabled
     ? "bg-gray-background-soft-muted"
     : selected
       ? THEME_SELECTED_OUTER_BG[theme]
-      : "bg-gray-background-soft";
-
-  const textClass = disabled
-    ? "font-medium text-gray-foreground-muted"
-    : selected
-      ? "font-semibold text-primary-foreground"
-      : "font-medium text-gray-foreground";
+      : "bg-gray-background-soft active:bg-gray-background-soft-emphasis";
 
   return (
     <Pressable
       onPress={disabled ? undefined : onPress}
       disabled={disabled}
-      accessibilityRole="button"
-      accessibilityState={{ selected, disabled }}
-      className={cn("rounded-md", outerBg, className)}
-      style={{ padding: 2 }}
+      hitSlop={sz.hitSlop}
+      accessibilityRole="togglebutton"
+      accessibilityLabel={label}
+      accessibilityState={{ checked: selected, disabled }}
+      className={cn("rounded-md p-0.5", outerBg, className)}
     >
-      <View
-        className={cn(
-          "flex-row items-center justify-center rounded-md",
-          sz.container,
-          selected ? "bg-surface-card" : "bg-transparent",
-        )}
-        style={selected ? { ...SHADOW_STYLE, shadowColor } : undefined}
-      >
-        {icon ? <View className="shrink-0">{icon}</View> : null}
-        <Text className={cn("text-center", sz.text, textClass)}>{label}</Text>
-        {selected ? (
-          <View className="shrink-0">
-            <ThemedIcon
-              icon={MedwayIcons.Check}
-              size={sz.icon}
-              colorToken={THEME_CHECK_COLOR_TOKEN[theme]}
-            />
-          </View>
-        ) : null}
-      </View>
+      {({ pressed }) => (
+        <View
+          className={cn("flex-row items-center justify-center", sz.container)}
+        >
+          {isRaised ? <RaisedSurface /> : null}
+          {icon ? <View className="shrink-0">{icon}</View> : null}
+          <Text
+            numberOfLines={1}
+            className={cn(
+              "shrink text-center",
+              sz.text,
+              disabled
+                ? "font-medium text-gray-foreground-muted"
+                : selected
+                  ? "font-semibold text-primary-foreground"
+                  : pressed
+                    ? "font-medium text-gray-foreground-emphasis"
+                    : "font-medium text-gray-foreground"
+            )}
+          >
+            {label}
+          </Text>
+          {selected ? (
+            <View className="shrink-0">
+              <ThemedIcon
+                icon={MedwayIcons.CheckMedium}
+                size={sz.icon}
+                colorToken={
+                  disabled
+                    ? "gray-foreground-muted"
+                    : THEME_CHECK_COLOR_TOKEN[theme]
+                }
+              />
+            </View>
+          ) : null}
+        </View>
+      )}
     </Pressable>
   );
 }