@12-apps/ui 6.33.1 → 6.35.0

package/src/components/typography/Text/Text.tsx

@@ -22,7 +22,8 @@ import {
 import type { TextProps } from './Text.types';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import type { ColorValue } from '../../../tokens/scales';
-import { px } from '../../../tokens/theme';
+import { rem } from '../../../tokens/relative';
+import type { UiTypeStep } from '../../../tokens/theme';
 
 const getColorFromTheme = (theme: Theme, color: ColorValue): string => {
   if (color === 'neutral') {
@@ -50,12 +51,13 @@ const getColorFromTheme = (theme: Theme, color: ColorValue): string => {
 
 // Derived from the shared metrics, not restated: the native `Text` reads the
 // same table, so the two renderers cannot disagree on a size.
-const SIZE_MAP: Record<string, { fontSize: string; lineHeight: number }> = Object.fromEntries(
-  Object.entries(TEXT_SIZES).map(([size, step]) => [
-    size,
-    { fontSize: px(step.fontSize), lineHeight: step.lineHeight },
-  ]),
-);
+// The table keeps the design px; the size is converted where it is read.
+const SIZE_MAP: Readonly<Record<string, UiTypeStep | undefined>> = TEXT_SIZES;
+
+const fontSizeFor = (theme: Theme, customSize: string | undefined): string | undefined => {
+  const drawnAt = SIZE_MAP[customSize ?? 'md']?.fontSize;
+  return drawnAt === undefined ? undefined : rem(theme, drawnAt);
+};
 
 const WEIGHT_MAP: Record<string, number> = TEXT_WEIGHTS;
 
@@ -77,7 +79,7 @@ const decorationFor = (underline?: boolean, strikethrough?: boolean): string =>
 
 const baseTextStyles = (theme: Theme, a: TextStyleArgs): CSSObject => ({
   color: getColorFromTheme(theme, a.customColor ?? 'neutral'),
-  fontSize: SIZE_MAP[a.customSize ?? 'md']?.fontSize,
+  fontSize: fontSizeFor(theme, a.customSize),
   lineHeight: SIZE_MAP[a.customSize ?? 'md']?.lineHeight,
   fontWeight: WEIGHT_MAP[a.customWeight ?? 'normal'],
   fontStyle: a.italic ? 'italic' : 'normal',
@@ -87,8 +89,12 @@ const baseTextStyles = (theme: Theme, a: TextStyleArgs): CSSObject => ({
 
 // Captions and code shrink relative to the body scale, but only at the default
 // size — an explicit size wins.
-const sizeOverride = (customSize: string | undefined, atDefault: string): string | undefined =>
-  (customSize ?? 'md') === 'md' ? atDefault : SIZE_MAP[customSize ?? 'md']?.fontSize;
+const sizeOverride = (
+  theme: Theme,
+  customSize: string | undefined,
+  atDefault: number,
+): string | undefined =>
+  (customSize ?? 'md') === 'md' ? rem(theme, atDefault) : fontSizeFor(theme, customSize);
 
 const textVariantStyles = (theme: Theme, a: TextStyleArgs, base: CSSObject): CSSObject => {
   const weight = a.customWeight ?? 'normal';
@@ -104,7 +110,7 @@ const textVariantStyles = (theme: Theme, a: TextStyleArgs, base: CSSObject): CSS
     case 'caption':
       return {
         ...base,
-        fontSize: sizeOverride(a.customSize, px(CAPTION_FONT_SIZE)),
+        fontSize: sizeOverride(theme, a.customSize, CAPTION_FONT_SIZE),
         opacity: CAPTION_OPACITY,
         letterSpacing: `${CAPTION_LETTER_SPACING_EM}em`,
       };
@@ -112,7 +118,7 @@ const textVariantStyles = (theme: Theme, a: TextStyleArgs, base: CSSObject): CSS
       return {
         ...base,
         fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Courier New", monospace',
-        fontSize: sizeOverride(a.customSize, px(CODE_FONT_SIZE)),
+        fontSize: sizeOverride(theme, a.customSize, CODE_FONT_SIZE),
         backgroundColor: alpha(theme.palette.primary.main, CODE_BACKGROUND_ALPHA),
         padding: `${CODE_PADDING.vertical}px ${CODE_PADDING.horizontal}px`,
         borderRadius: theme.shape.borderRadius * CODE_RADIUS_FACTOR,

package/src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts

@@ -22,13 +22,16 @@ import {
   wobbleAnimation,
 } from './AnimatedIcon.animations';
 import type { AnimationSize, AnimationVariant } from './AnimatedIcon.types';
+import { neutralTones, shadowInk, sheen } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
-export const sizeConfigs: Record<AnimationSize, { size: number; fontSize: number }> = {
-  xs: { size: 12, fontSize: 10 },
-  sm: { size: 24, fontSize: 20 },
-  md: { size: 32, fontSize: 28 },
-  lg: { size: 48, fontSize: 44 },
-  xl: { size: 64, fontSize: 60 },
+/** Per size: the ring's edge and the glyph's edge (its font size, width and height), in design px. */
+export const sizeConfigs: Record<AnimationSize, { size: number; glyph: number }> = {
+  xs: { size: 12, glyph: 10 },
+  sm: { size: 24, glyph: 20 },
+  md: { size: 32, glyph: 28 },
+  lg: { size: 48, glyph: 44 },
+  xl: { size: 64, glyph: 60 },
 };
 
 /**
@@ -70,10 +73,10 @@ const animationFor = (
 };
 
 const SHADOWS: Record<string, (theme: Theme) => string> = {
-  soft: (theme) => `0 4px 20px ${alpha(theme.palette.common.black, 0.15)}`,
-  hard: (theme) => `4px 4px 0px ${alpha(theme.palette.common.black, 0.25)}`,
+  soft: (theme) => `0 4px 20px ${shadowInk(theme, 0.15)}`,
+  hard: (theme) => `4px 4px 0px ${shadowInk(theme, 0.25)}`,
   elevated: (theme) =>
-    `0 10px 40px ${alpha(theme.palette.common.black, 0.2)}, 0 2px 10px ${alpha(theme.palette.common.black, 0.1)}`,
+    `0 10px 40px ${shadowInk(theme, 0.2)}, 0 2px 10px ${shadowInk(theme, 0.1)}`,
 };
 
 export interface IconStyleFlags {
@@ -113,20 +116,20 @@ const effectStyles = (
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,
       backdropFilter: 'blur(10px)',
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-      boxShadow: `inset 0 1px 1px ${alpha(theme.palette.common.white, 0.3)}, 0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
+      boxShadow: `inset 0 1px 1px ${sheen(theme, 0.3)}, 0 8px 32px ${shadowInk(theme, 0.1)}`,
     }),
     ...($metallic && {
       background: `linear-gradient(145deg,
-      ${theme.palette.grey[300]} 0%,
-      ${theme.palette.grey[500]} 25%,
-      ${theme.palette.grey[400]} 50%,
-      ${theme.palette.grey[600]} 75%,
-      ${theme.palette.grey[400]} 100%)`,
+      ${neutralTones(theme).track} 0%,
+      ${neutralTones(theme).muted} 25%,
+      ${neutralTones(theme).subtle} 50%,
+      ${neutralTones(theme).emphasis} 75%,
+      ${neutralTones(theme).subtle} 100%)`,
       backgroundSize: '200% 200%',
       animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,
-      boxShadow: `inset 0 2px 4px ${alpha(theme.palette.common.white, 0.5)},
-                inset 0 -2px 4px ${alpha(theme.palette.common.black, 0.3)},
-                0 4px 8px ${alpha(theme.palette.common.black, 0.2)}`,
+      boxShadow: `inset 0 2px 4px ${sheen(theme, 0.5)},
+                inset 0 -2px 4px ${shadowInk(theme, 0.3)},
+                0 4px 8px ${shadowInk(theme, 0.2)}`,
     }),
     ...($gradient && {
       background: `linear-gradient(135deg,
@@ -184,7 +187,7 @@ export const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {
 
   // Both selectors size the same glyph — MUI icons render an MuiSvgIcon-root,
   // a bare child renders an svg.
-  const glyphSize = { fontSize: $fontSize, width: $fontSize, height: $fontSize };
+  const glyphSize = { fontSize: rem(theme, $fontSize), width: $fontSize, height: $fontSize };
 
   return {
     display: 'inline-flex',

package/src/components/utility/AnimatedIcon/AnimatedIcon.tsx

@@ -43,7 +43,7 @@ export const AnimatedIcon: FC<AnimatedIconProps> = (props) => {
   return (
     <AnimationContainer
       $size={config.size}
-      $fontSize={config.fontSize}
+      $fontSize={config.glyph}
       $animationVariant={variant}
       $duration={duration}
       $delay={delay}

package/src/components/utility/WorkflowStep/WorkflowStep.helpers.ts

@@ -1,6 +1,7 @@
 import type { Theme } from '@mui/material/styles/index.js';
 
 import type { WorkflowStepItem, WorkflowStepProps } from './WorkflowStep.types';
+import { neutralTones } from '../../../tokens/ink';
 
 type StepColor = NonNullable<WorkflowStepProps['color']>;
 type StepSize = NonNullable<WorkflowStepProps['size']>;
@@ -24,9 +25,10 @@ interface StepPalette {
 /** `neutral` has no MUI palette entry, so its pair is derived from grey. */
 export const stepPalette = (theme: Theme, color?: StepColor): StepPalette => {
   if (color === 'neutral') {
+    const main = neutralTones(theme).emphasis;
     return {
-      main: theme.palette.grey[600],
-      contrastText: theme.palette.getContrastText(theme.palette.grey[600]),
+      main,
+      contrastText: theme.palette.getContrastText(main),
     };
   }
 
@@ -83,8 +85,8 @@ export const stepColors = (
   }
 
   return {
-    backgroundColor: theme.palette.grey[300],
-    borderColor: theme.palette.grey[300],
+    backgroundColor: neutralTones(theme).track,
+    borderColor: neutralTones(theme).track,
     textColor: theme.palette.text.secondary,
   };
 };

package/src/components/utility/WorkflowStep/WorkflowStep.parts.tsx

@@ -11,6 +11,8 @@ import type {
   StepIndicatorProps,
   WorkflowStepProps,
 } from './WorkflowStep.types';
+import { neutralTones } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 // `outlined` shows the surface through a coloured rim; the other three fill it and
 // differ only in what border they keep.
@@ -83,7 +85,7 @@ const StepIndicator = styled(Box, {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    fontSize: theme.typography.caption.fontSize,
+    fontSize: rem(theme, 12),
     fontWeight: theme.typography.fontWeightMedium,
     cursor: interactive && !disabled ? 'pointer' : 'default',
     transition: animated
@@ -133,7 +135,7 @@ const StepContent = styled(Box, {
   flex: 1,
 
   '& .step-title': {
-    fontSize: theme.typography.body2.fontSize,
+    fontSize: rem(theme, 14),
     fontWeight: theme.typography.fontWeightMedium,
     color: theme.palette.text.primary,
     marginBottom: theme.spacing(0.5),
@@ -144,7 +146,7 @@ const StepContent = styled(Box, {
   },
 
   '& .step-description': {
-    fontSize: theme.typography.caption.fontSize,
+    fontSize: rem(theme, 12),
     color: theme.palette.text.secondary,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -167,9 +169,9 @@ const StepConnector = styled(Box, {
 }>(({ theme, orientation, isCompleted, color, variant }) => {
   const colorKey = color || 'primary';
   const colorValue = colorKey === 'neutral' 
-    ? { main: theme.palette.grey[600] }
+    ? { main: neutralTones(theme).emphasis }
     : theme.palette[colorKey as 'primary' | 'secondary' | 'success' | 'warning' | 'error'];
-  const connectorColor = isCompleted ? colorValue.main : theme.palette.grey[300];
+  const connectorColor = isCompleted ? colorValue.main : neutralTones(theme).track;
 
   return {
     flex: 1,

package/src/icons/Icon.tsx

@@ -5,6 +5,7 @@ import { iconFill } from './icon-color';
 import { iconSize, type IconBaseProps } from './Icon.types';
 import { ICON_PATHS } from './paths.generated';
 import { resolveTestId } from '../platform/test-id';
+import { sxRem } from '../tokens/relative';
 import { useUiTheme } from '../provider/use-ui-theme';
 
 export interface IconProps extends IconBaseProps {
@@ -20,7 +21,6 @@ export interface IconProps extends IconBaseProps {
 export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
   ({ name, size, color, label, className, style, ...rest }, ref) => {
     const theme = useUiTheme();
-    const px = iconSize(size);
     const fill = iconFill(theme, color, 'currentColor');
     const testId = resolveTestId(rest, `icon-${name}`);
 
@@ -30,7 +30,7 @@ export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
         viewBox="0 0 24 24"
         className={className}
         style={style}
-        sx={{ fontSize: px, color: fill }}
+        sx={{ fontSize: sxRem(iconSize(size)), color: fill }}
         titleAccess={label}
         aria-hidden={label ? undefined : true}
         data-testid={testId}

package/src/social-login-button/social-login-button.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box/index.js';
 import Stack from '@mui/material/Stack/index.js';
-import type { Theme } from '@mui/material/styles/index.js';
+import { useTheme, type Theme } from '@mui/material/styles/index.js';
 import { Button } from '../components/form/Button';
 import { Card, CardContent } from '../components/layout/Card';
 import { Heading } from '../components/typography/Heading';
@@ -11,41 +11,48 @@ import { Text } from '../components/typography/Text';
 import { Separator } from '../components/layout/Separator';
 import type { SocialLoginCopy } from '../copy/form';
 import { EN_US_SOCIAL_LOGIN_COPY } from '../en-US.form';
+import { uiInk, type UiInk } from '../tokens/ink';
 
 export type SocialProvider = 'google' | 'facebook' | 'apple';
 
 /**
  * SVG Icons for social providers
  */
-const GoogleIcon = (): React.ReactElement => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-      fill="#4285F4"
-    />
-    <path
-      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-      fill="#34A853"
-    />
-    <path
-      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-      fill="#FBBC05"
-    />
-    <path
-      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-      fill="#EA4335"
-    />
-  </svg>
-);
+const GoogleIcon = (): React.ReactElement => {
+  const logo = uiInk(useTheme()).socialBrand.googleLogo;
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        fill={logo.blue}
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill={logo.green}
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill={logo.yellow}
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill={logo.red}
+      />
+    </svg>
+  );
+};
 
-const FacebookIcon = (): React.ReactElement => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12z"
-      fill="#1877F2"
-    />
-  </svg>
-);
+const FacebookIcon = (): React.ReactElement => {
+  const { logo } = uiInk(useTheme()).socialBrand.facebook;
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12z"
+        fill={logo}
+      />
+    </svg>
+  );
+};
 
 const AppleIcon = (): React.ReactElement => (
   <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@@ -93,6 +100,12 @@ const FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX = {
   '& .MuiButton-startIcon path': { fill: 'currentColor' },
 } as const;
 
+/** A provider's own colour, read from the theme's `uiInk.socialBrand` as an `sx` value. */
+const brand =
+  (pick: (colours: UiInk['socialBrand']) => string) =>
+  (theme: Theme): string =>
+    pick(uiInk(theme).socialBrand);
+
 interface ProviderConfig {
   Icon: () => React.ReactElement;
   variant: 'solid' | 'outline' | 'ghost';
@@ -106,12 +119,12 @@ const providerConfig: Record<SocialProvider, ProviderConfig> = {
     variant: 'outline',
     color: 'neutral',
     sx: {
-      backgroundColor: '#ffffff',
-      color: '#1f1f1f',
-      borderColor: '#dadce0',
+      backgroundColor: brand((c) => c.google.background),
+      color: brand((c) => c.google.text),
+      borderColor: brand((c) => c.google.border),
       '&:hover': {
-        backgroundColor: '#f5f5f5',
-        borderColor: '#dadce0',
+        backgroundColor: brand((c) => c.google.hover),
+        borderColor: brand((c) => c.google.hoverBorder),
       },
       ...GOOGLE_LOGO_WHEN_DISABLED_SX,
     },
@@ -121,10 +134,10 @@ const providerConfig: Record<SocialProvider, ProviderConfig> = {
     variant: 'solid',
     color: 'primary',
     sx: {
-      backgroundColor: '#1877F2',
-      color: '#ffffff',
+      backgroundColor: brand((c) => c.facebook.background),
+      color: brand((c) => c.facebook.text),
       '&:hover': {
-        backgroundColor: '#166fe5',
+        backgroundColor: brand((c) => c.facebook.hover),
       },
       ...FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX,
     },
@@ -134,10 +147,10 @@ const providerConfig: Record<SocialProvider, ProviderConfig> = {
     variant: 'solid',
     color: 'neutral',
     sx: {
-      backgroundColor: '#000000',
-      color: '#ffffff',
+      backgroundColor: brand((c) => c.apple.background),
+      color: brand((c) => c.apple.text),
       '&:hover': {
-        backgroundColor: '#1a1a1a',
+        backgroundColor: brand((c) => c.apple.hover),
       },
     },
   },

package/src/tokens/index.native.ts

@@ -15,3 +15,5 @@ export {
   fieldHeightPx,
   fieldHeightRem,
 } from './field-height.core';
+// The named colour sets a *.metrics.ts table reads (FUT-2593); no MUI behind them.
+export * from './ink.core';

package/src/tokens/ink.core.ts

@@ -0,0 +1,128 @@
+/**
+ * THE COLOURS THAT HAVE NO PALETTE ROLE, NAMED — with no renderer behind them.
+ *
+ * Every colour a component draws comes from the theme (FUT-2593, under
+ * FUT-2585). Most have a palette role — text, divider, a semantic main, a
+ * neutral tone (`./ink.ts`). These do not: a chart's neon series, a map's
+ * terrain, a code editor's syntax chrome, a vendor's brand. They were hex
+ * literals inside components; they are NAMED sets here, which a host can
+ * replace through `theme.uiInk` (`./ink.ts`), and each default is exactly the
+ * value the component drew before, so moving it here changed nothing on screen.
+ *
+ * This file imports nothing: `*.metrics.ts` tables, which the native renderer
+ * reads too, take their colours from it.
+ */
+
+/** The `neon` Chart variant: its series, its ground, its accent (`Chart`). */
+export const DATA_VIZ_NEON = {
+  series: ['#00ffff', '#ff00ff', '#ffff00', '#00ff00', '#ff0080', '#8000ff'],
+  ground: '#000',
+  accent: '#00ffff',
+} as const;
+
+/** The phases a `TimingDiagram` bar is split into, in order. */
+export const TIMING_PHASES = {
+  dns: '#9C27B0',
+  connect: '#2196F3',
+  tls: '#00BCD4',
+  request: '#4CAF50',
+  response: '#FF9800',
+} as const;
+
+/** `MapPreview`'s ground for the terrain and satellite map types. */
+export const MAP_SURFACE = {
+  terrainFrom: '#8BC34A',
+  terrainTo: '#4CAF50',
+  terrainTileFrom: '#7cb342',
+  terrainTileTo: '#558b2f',
+  satelliteTileFrom: '#1a1a1a',
+  satelliteTileTo: '#2a2a2a',
+} as const;
+
+/** `CodeEditor`'s Monaco chrome, per mode — GitHub's own light and dark. */
+export const CODE_EDITOR_CHROME = {
+  light: {
+    background: '#FFFFFF',
+    foreground: '#24292E',
+    lineHighlight: '#F6F8FA',
+    lineNumber: '#959DA5',
+    lineNumberActive: '#24292E',
+    gutterBorder: '#D1D5DA',
+    selection: '#C8E1FF',
+  },
+  dark: {
+    background: '#0D1117',
+    foreground: '#C9D1D9',
+    lineHighlight: '#161B22',
+    lineNumber: '#8B949E',
+    lineNumberActive: '#C9D1D9',
+    gutterBorder: '#21262D',
+    selection: '#3392FF44',
+  },
+} as const;
+
+/**
+ * The social-login providers' OWN colours. Brand rules fix these — a host may
+ * not "theme" Google's button — so the override exists only for a provider that
+ * changes its guideline.
+ */
+export const SOCIAL_BRAND = {
+  googleLogo: { blue: '#4285F4', green: '#34A853', yellow: '#FBBC05', red: '#EA4335' },
+  google: { background: '#ffffff', text: '#1f1f1f', border: '#dadce0', hover: '#f5f5f5', hoverBorder: '#dadce0' },
+  facebook: { background: '#1877F2', text: '#ffffff', hover: '#166fe5', logo: '#1877F2' },
+  apple: { background: '#000000', text: '#ffffff', hover: '#1a1a1a' },
+} as const;
+
+/** The two decorative gradients a completed step and a tutorial's call to action wear. */
+export const CELEBRATION_GRADIENTS = {
+  mint: ['#84fab0', '#8fd3f4'],
+  violet: ['#667eea', '#764ba2'],
+} as const;
+
+/** A count that wants attention before it is read (`NavigationMenu`'s badge). */
+export const ATTENTION_INK = { from: '#ff5252', to: '#ff1744', glow: 'rgb(255, 23, 68)' } as const;
+
+/** A search hit inside a row label (`CategorySelect`). */
+export const HIGHLIGHT_MARK = '#fff2a8';
+
+/** The slate a frosted breadcrumb bar is tinted with in dark mode. */
+export const GLASS_SLATE = 'rgb(17, 24, 39)';
+
+/** The ink of a raised floating panel's shadow (`CategorySelect`). */
+export const PANEL_SHADOW_INK = 'rgb(16, 20, 35)';
+
+/**
+ * Glows that were drawn in a FIXED hue rather than the host's primary: MUI's
+ * default blue (`Checkbox`, `NavigationMenu`) and the platform's default indigo
+ * (`Breadcrumbs`). Kept as they are — moving them onto `palette.primary` would
+ * recolour them for every host — and named so that a host can.
+ */
+export const EFFECT_GLOW = { muiBlue: 'rgb(25, 118, 210)', brandIndigo: 'rgb(99, 102, 241)' } as const;
+
+/**
+ * MUI's own elevation shadows 1, 2, 3 and 8 — what `theme.shadows[n]` holds at
+ * MUI's defaults — for the `*.metrics.ts` tables the native renderer reads.
+ */
+export const ELEVATION_SHADOWS = {
+  1: '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
+  2: '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)',
+  3: '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
+  8: '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
+} as const;
+
+/** The two absolutes, for a renderer with no palette to read them from. */
+export const ABSOLUTE_INK = { black: '#000', white: '#fff' } as const;
+
+/** The grey ramp's steps the neutral tones are drawn from (MUI's). */
+export const NEUTRAL_RAMP = {
+  50: '#fafafa',
+  100: '#f5f5f5',
+  200: '#eeeeee',
+  300: '#e0e0e0',
+  400: '#bdbdbd',
+  500: '#9e9e9e',
+  600: '#757575',
+  700: '#616161',
+  800: '#424242',
+  900: '#212121',
+} as const;