@app-studio/components 0.10.17 → 0.10.19

package/dist/native/pages/designSystem.page.js

@@ -94,49 +94,67 @@ const defaultBrandTitleStyle = {
     letterSpacing: '-0.02em',
 };
 const getBrandTitleStyle = (config) => brandTitleStyles[config.metadata.id] ?? defaultBrandTitleStyle;
-const getLightPalette = (config) => {
-    const isDark = config.metadata.defaultAppearance === 'dark';
-    if (!isDark)
-        return { ...config.theme, appearance: 'light' };
+// Both palettes carry the brand's theme slots as CSS-ready values: a token
+// (`color-black`) becomes `var(--color-black)`, a literal (`#2563eb`) passes
+// through. The frame wraps its content in a DesignSystemProvider pinned to
+// `appearance`, so every `var(--…)` flips for that mode (`data-theme`). Because
+// the values are already CSS-ready, samples can drop them into a component prop
+// OR a raw inline `style` / gradient string and they resolve the same way — no
+// per-sample color detection, no light/dark branching. app-studio owns the flip.
+const buildPalette = (config, appearance) => {
+    const t = config.theme;
     return {
-        ...config.theme,
-        canvas: '#ffffff',
-        surface: '#f5f5f5',
-        text: '#1a1a1a',
-        muted: 'rgba(0,0,0,0.6)',
-        border: 'rgba(0,0,0,0.1)',
-        appearance: 'light',
+        canvas: toCss(t.canvas),
+        surface: toCss(t.surface),
+        text: toCss(t.text),
+        muted: toCss(t.muted),
+        border: toCss(t.border),
+        primary: toCss(t.primary),
+        secondary: toCss(t.secondary),
+        success: toCss(t.success),
+        warning: toCss(t.warning),
+        error: toCss(t.error),
+        onPrimary: toCss(t.onPrimary),
+        appearance,
     };
 };
-const getDarkPalette = (config) => {
-    const isDark = config.metadata.defaultAppearance === 'dark';
-    if (isDark)
-        return { ...config.theme, appearance: 'dark' };
-    return {
-        ...config.theme,
-        canvas: '#0d0d0d',
-        surface: '#1a1a1a',
-        text: '#ffffff',
-        muted: 'rgba(255,255,255,0.62)',
-        border: 'rgba(255,255,255,0.14)',
-        appearance: 'dark',
-    };
-};
-const PaletteFrame = ({ palette, label, children, }) => (<Vertical gap={10} flex="1 1 320px" minWidth={0}>
+const getLightPalette = (config) => buildPalette(config, 'light');
+const getDarkPalette = (config) => buildPalette(config, 'dark');
+const PaletteFrame = ({ palette, label, config, children, }) => (<Vertical gap={10} flex="1 1 320px" minWidth={0}>
     <Horizontal gap={8} alignItems="center">
       <View width={10} height={10} borderRadius={9999} backgroundColor={palette.appearance === 'dark' ? '#111111' : '#ffffff'} borderWidth={1} borderStyle="solid" borderColor="rgba(0,0,0,0.15)"/>
       <Text fontSize={11} fontWeight="700" letterSpacing="0.08em" textTransform="uppercase">
         {label}
       </Text>
     </Horizontal>
-    <View padding={20} borderRadius={16} borderWidth={1} borderStyle="solid" style={{
-        backgroundColor: palette.canvas,
-        borderColor: palette.border,
-        color: palette.text,
-    }}>
-      {children}
-    </View>
+    {/* Pin this frame to its appearance; app-studio resolves every theme/color
+        token inside it for that mode — light tokens render light here, dark
+        tokens render dark in the sibling frame. No manual color resolution. */}
+    <DesignSystemProvider config={config} mode={palette.appearance}>
+      <View padding={20} borderRadius={16} borderWidth={1} borderStyle="solid" backgroundColor="color-white" borderColor="color-gray-200" color="color-black">
+        {children}
+      </View>
+    </DesignSystemProvider>
   </Vertical>);
+// Token → CSS boundary. app-studio resolves design tokens (`color-*`,
+// `theme-*`, `light-*`, `dark-*`) only on component PROPS, never inside a raw
+// inline `style` object or a gradient/box-shadow string. Anything that has to
+// live in raw CSS must cross this boundary first: a token becomes the matching
+// `var(--token)` (which still flips per mode via `data-theme`), and any literal
+// (hex / rgba) passes through untouched. This is the ONLY place the showcase
+// translates a token — samples never inspect or branch on the color itself.
+const toCss = (value) => {
+    if (!value || typeof value !== 'string')
+        return value;
+    return /^(color|theme|light|dark)-/.test(value) ? `var(--${value})` : value;
+};
+// Translucent fill from any color (token or literal) for use in raw CSS.
+// `color-mix` accepts both `var(--token)` and hex, so the result flips per mode
+// when fed a token — no light/dark branching required.
+const softCss = (value, percent) => `color-mix(in srgb, ${toCss(value)} ${percent}%, transparent)`;
+// Inverse of `toCss` for DISPLAY only: turn `var(--color-black)` back into the
+// readable token name (`color-black`) when we want to show the token as text.
+const tokenLabel = (value) => value && value.startsWith('var(--') ? value.slice(6, -1) : value;
 const defaultPersonality = {
     cornerStyle: 'soft',
     typeWeight: 'bold',
@@ -190,7 +208,7 @@ const personalitySurfaceStyle = (p, palette) => {
             };
         case 'mono':
             return {
-                backgroundColor: palette.appearance === 'dark' ? '#0a0a0a' : palette.surface,
+                backgroundColor: palette.appearance === 'dark' ? '#0a0a0a' : toCss(palette.surface),
             };
         case 'matte':
             return {
@@ -198,27 +216,30 @@ const personalitySurfaceStyle = (p, palette) => {
             };
         case 'paper':
         default:
-            return { backgroundColor: palette.surface };
+            // `surface` already flips per mode via its token — no branching needed.
+            return { backgroundColor: toCss(palette.surface) };
     }
 };
 const personalityAccentBackground = (p, palette) => {
+    const primary = toCss(palette.primary);
+    const secondary = toCss(palette.secondary || palette.primary);
     switch (p.accentTreatment) {
         case 'gradient':
-            return `linear-gradient(135deg, ${palette.primary} 0%, ${palette.secondary || palette.primary} 100%)`;
+            return `linear-gradient(135deg, ${primary} 0%, ${secondary} 100%)`;
         case 'glow':
-            return palette.primary;
+            return primary;
         case 'stripe':
-            return `repeating-linear-gradient(45deg, ${palette.primary} 0 8px, ${palette.secondary || palette.primary} 8px 16px)`;
+            return `repeating-linear-gradient(45deg, ${primary} 0 8px, ${secondary} 8px 16px)`;
         case 'halftone':
-            return `radial-gradient(circle at 30% 30%, ${palette.primary} 0%, ${palette.secondary || palette.primary} 70%)`;
+            return `radial-gradient(circle at 30% 30%, ${primary} 0%, ${secondary} 70%)`;
         case 'flat':
         default:
-            return palette.primary;
+            return primary;
     }
 };
 const personalityAccentShadow = (p, palette) => {
     if (p.accentTreatment === 'glow') {
-        return `0 0 24px ${palette.primary}66, 0 0 4px ${palette.primary}`;
+        return `0 0 24px ${softCss(palette.primary, 40)}, 0 0 4px ${toCss(palette.primary)}`;
     }
     return undefined;
 };
@@ -371,10 +392,7 @@ const Swatch = ({ color, name, role, border, }) => (<View borderWidth={1} border
       </Text>
     </Vertical>
   </View>);
-const Section = ({ title, children, config, }) => (<Vertical gap={18} padding={24} borderWidth={1} borderStyle="solid" borderRadius={12} style={{
-        backgroundColor: config.theme.canvas,
-        borderColor: config.theme.border,
-    }}>
+const Section = ({ title, children, config, }) => (<Vertical gap={18} padding={24} borderWidth={1} borderStyle="solid" borderRadius={12} backgroundColor={config.theme.canvas} borderColor={config.theme.border}>
     <Text fontSize={18} lineHeight="24px" fontWeight="700" color={config.theme.text}>
       {title}
     </Text>
@@ -385,9 +403,7 @@ const HeroSection = ({ config }) => {
     const highlightTextColor = t.highlightStyle === 'background'
         ? config.theme.onPrimary
         : config.theme.primary;
-    return (<View width="100%" borderRadius={20} overflow="hidden" borderWidth={1} borderStyle="solid" borderColor={config.theme.border} style={{
-            backgroundColor: config.theme.surface,
-        }}>
+    return (<View width="100%" borderRadius={20} overflow="hidden" borderWidth={1} borderStyle="solid" borderColor={config.theme.border} backgroundColor={config.theme.surface}>
       <Horizontal width="100%" flexWrap="wrap" alignItems="stretch" gap={0}>
         <Vertical flex="1 1 360px" minWidth={0} padding={36} gap={20} justifyContent="center">
           <Badge variant="outline" content={`${config.metadata.label} hero`}/>
@@ -724,7 +740,7 @@ const TierPricingCardSample = ({ palette, tier, personality, }) => {
             <Text fontSize={13} color={tier.featured ? palette.onPrimary : palette.text} style={personalityLabelStyle(personality)}>
               {tier.name}
             </Text>
-            {tier.featured ? (<View paddingHorizontal={10} paddingVertical={4} borderRadius={personality.badgeRadius} backgroundColor="rgba(255,255,255,0.22)">
+            {tier.featured ? (<View paddingHorizontal={10} paddingVertical={4} borderRadius={personality.badgeRadius} backgroundColor={softCss(palette.onPrimary, 22)}>
                 <Horizontal gap={4} alignItems="center">
                   <Text fontSize={11} color={palette.onPrimary} style={{ lineHeight: 1 }}>
                     {personality.signatureMotif}
@@ -737,7 +753,7 @@ const TierPricingCardSample = ({ palette, tier, personality, }) => {
                 </Horizontal>
               </View>) : null}
           </Horizontal>
-          <Text fontSize={13} lineHeight="18px" color={tier.featured ? 'rgba(255,255,255,0.85)' : palette.muted} style={{ fontStyle: personality.typeStyle }}>
+          <Text fontSize={13} lineHeight="18px" color={tier.featured ? softCss(palette.onPrimary, 85) : palette.muted} style={{ fontStyle: personality.typeStyle }}>
             {tier.tagline}
           </Text>
         </Vertical>
@@ -745,13 +761,15 @@ const TierPricingCardSample = ({ palette, tier, personality, }) => {
           <Text fontSize={density.large + 8} color={tier.featured ? palette.onPrimary : palette.text} style={personalityHeadingStyle(personality)}>
             {tier.price}
           </Text>
-          {tier.period ? (<Text fontSize={14} color={tier.featured ? 'rgba(255,255,255,0.85)' : palette.muted} style={{ fontStyle: personality.typeStyle }}>
+          {tier.period ? (<Text fontSize={14} color={tier.featured ? softCss(palette.onPrimary, 85) : palette.muted} style={{ fontStyle: personality.typeStyle }}>
               {tier.period}
             </Text>) : null}
         </Horizontal>
         <Vertical gap={8}>
           {tier.features.map((feature) => (<Horizontal key={feature} gap={8} alignItems="center">
-              <View width={18} height={18} borderRadius={personality.cornerStyle === 'sharp' ? 2 : 9999} backgroundColor={tier.featured ? 'rgba(255,255,255,0.22)' : palette.primary} alignItems="center" justifyContent="center" style={{ display: 'flex', flexShrink: 0 }}>
+              <View width={18} height={18} borderRadius={personality.cornerStyle === 'sharp' ? 2 : 9999} backgroundColor={tier.featured
+                ? softCss(palette.onPrimary, 22)
+                : palette.primary} alignItems="center" justifyContent="center" style={{ display: 'flex', flexShrink: 0 }}>
                 <Text fontSize={11} color={palette.onPrimary} style={{
                 lineHeight: 1,
                 fontWeight: personalityFontWeight(personality, 'heavy'),
@@ -771,11 +789,12 @@ const TierPricingCardSample = ({ palette, tier, personality, }) => {
         <View alignSelf="stretch" paddingHorizontal={20} paddingVertical={12} borderRadius={personality.pillRadius} alignItems="center" justifyContent="center" style={{
             display: 'flex',
             cursor: 'pointer',
-            backgroundColor: tier.featured
-                ? 'rgba(255,255,255,0.95)'
-                : palette.text,
+            // Featured card sits on `primary`, so its CTA is the inverse chip
+            // (`onPrimary` ground, `primary` ink). Both flip together with the
+            // card, so contrast holds in light AND dark with no branching.
+            backgroundColor: tier.featured ? palette.onPrimary : palette.text,
         }}>
-          <Text fontSize={14} color={tier.featured ? palette.text : palette.canvas} style={{
+          <Text fontSize={14} color={tier.featured ? palette.primary : palette.canvas} style={{
             ...personalityLabelStyle(personality),
             letterSpacing: personality.typeCase === 'uppercase' ? '0.08em' : '0.02em',
         }}>
@@ -806,7 +825,7 @@ const ProductPricingCardSample = ({ palette, personality, }) => {
       <Vertical gap={density.gap} padding={density.padding}>
         <View height={120} borderRadius={personality.cardRadius} style={{
             background: personality.accentTreatment === 'gradient'
-                ? `linear-gradient(135deg, ${palette.primary}33 0%, ${palette.secondary || palette.primary}33 100%)`
+                ? `linear-gradient(135deg, ${softCss(palette.primary, 20)} 0%, ${softCss(palette.secondary || palette.primary, 20)} 100%)`
                 : palette.appearance === 'dark'
                     ? 'rgba(255,255,255,0.06)'
                     : 'rgba(0,0,0,0.04)',
@@ -933,7 +952,7 @@ const FeaturedPricingCardSample = ({ palette, personality, }) => {
         <Vertical gap={density.gap} padding={density.padding}>
           <View height={140} borderRadius={personality.cardRadius} style={{
             background: personality.accentTreatment === 'gradient'
-                ? `linear-gradient(135deg, ${palette.primary}33 0%, ${palette.secondary || palette.primary}33 100%)`
+                ? `linear-gradient(135deg, ${softCss(palette.primary, 20)} 0%, ${softCss(palette.secondary || palette.primary, 20)} 100%)`
                 : palette.appearance === 'dark'
                     ? 'rgba(255,255,255,0.06)'
                     : 'rgba(0,0,0,0.04)',
@@ -1438,7 +1457,7 @@ const BrandSnapshotSample = ({ palette, personality, config, }) => {
                 <Text fontSize={11} color={palette.text} style={{
                 fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
             }}>
-                  {swatch.value}
+                  {tokenLabel(swatch.value)}
                 </Text>
               </Vertical>
             </Horizontal>))}
@@ -1629,10 +1648,10 @@ const ComponentPreview = ({ config }) => {
     return (<Vertical gap={24}>
       <Section title="Brand Snapshot (Light & Dark)" config={config}>
         <Vertical gap={20}>
-          <PaletteFrame palette={lightPalette} label="On light surface">
+          <PaletteFrame config={config} palette={lightPalette} label="On light surface">
             <BrandSnapshotSample palette={lightPalette} personality={personality} config={config}/>
           </PaletteFrame>
-          <PaletteFrame palette={darkPalette} label="On dark surface">
+          <PaletteFrame config={config} palette={darkPalette} label="On dark surface">
             <BrandSnapshotSample palette={darkPalette} personality={personality} config={config}/>
           </PaletteFrame>
         </Vertical>
@@ -1640,10 +1659,10 @@ const ComponentPreview = ({ config }) => {
 
       <Section title="Buttons — Light & Dark" config={config}>
         <Horizontal gap={20} flexWrap="wrap" alignItems="flex-start">
-          <PaletteFrame palette={lightPalette} label="On light surface">
+          <PaletteFrame config={config} palette={lightPalette} label="On light surface">
             <ButtonsSample palette={lightPalette}/>
           </PaletteFrame>
-          <PaletteFrame palette={darkPalette} label="On dark surface">
+          <PaletteFrame config={config} palette={darkPalette} label="On dark surface">
             <ButtonsSample palette={darkPalette}/>
           </PaletteFrame>
         </Horizontal>
@@ -1651,10 +1670,10 @@ const ComponentPreview = ({ config }) => {
 
       <Section title="Status & Feedback — Light & Dark" config={config}>
         <Horizontal gap={20} flexWrap="wrap" alignItems="flex-start">
-          <PaletteFrame palette={lightPalette} label="On light surface">
+          <PaletteFrame config={config} palette={lightPalette} label="On light surface">
             <StatusFeedbackSample palette={lightPalette} config={config}/>
           </PaletteFrame>
-          <PaletteFrame palette={darkPalette} label="On dark surface">
+          <PaletteFrame config={config} palette={darkPalette} label="On dark surface">
             <StatusFeedbackSample palette={darkPalette} config={config}/>
           </PaletteFrame>
         </Horizontal>
@@ -1662,10 +1681,10 @@ const ComponentPreview = ({ config }) => {
 
       <Section title="Forms — Light & Dark" config={config}>
         <Horizontal gap={20} flexWrap="wrap" alignItems="flex-start">
-          <PaletteFrame palette={lightPalette} label="On light surface">
+          <PaletteFrame config={config} palette={lightPalette} label="On light surface">
             <FormsSample palette={lightPalette} config={config} mode="light"/>
           </PaletteFrame>
-          <PaletteFrame palette={darkPalette} label="On dark surface">
+          <PaletteFrame config={config} palette={darkPalette} label="On dark surface">
             <FormsSample palette={darkPalette} config={config} mode="dark"/>
           </PaletteFrame>
         </Horizontal>
@@ -1778,10 +1797,10 @@ const ComponentPreview = ({ config }) => {
 
       <Section title="Pricing — Booking (Light & Dark)" config={config}>
         <Horizontal gap={20} flexWrap="wrap" alignItems="flex-start">
-          <PaletteFrame palette={lightPalette} label="On light surface">
+          <PaletteFrame config={config} palette={lightPalette} label="On light surface">
             <PricingCardSample palette={lightPalette}/>
           </PaletteFrame>
-          <PaletteFrame palette={darkPalette} label="On dark surface">
+          <PaletteFrame config={config} palette={darkPalette} label="On dark surface">
             <PricingCardSample palette={darkPalette}/>
           </PaletteFrame>
         </Horizontal>
@@ -1789,12 +1808,12 @@ const ComponentPreview = ({ config }) => {
 
       <Section title="Pricing — SaaS Tiers (Light & Dark)" config={config}>
         <Vertical gap={20}>
-          <PaletteFrame palette={lightPalette} label="On light surface">
+          <PaletteFrame config={config} palette={lightPalette} label="On light surface">
             <Horizontal gap={16} flexWrap="wrap" alignItems="stretch">
               {tierPricingPlans.map((tier) => (<TierPricingCardSample key={tier.name} palette={lightPalette} tier={tier} personality={personality}/>))}
             </Horizontal>
           </PaletteFrame>
-          <PaletteFrame palette={darkPalette} label="On dark surface">
+          <PaletteFrame config={config} palette={darkPalette} label="On dark surface">
             <Horizontal gap={16} flexWrap="wrap" alignItems="stretch">
               {tierPricingPlans.map((tier) => (<TierPricingCardSample key={tier.name} palette={darkPalette} tier={tier} personality={personality}/>))}
             </Horizontal>
@@ -1804,10 +1823,10 @@ const ComponentPreview = ({ config }) => {
 
       <Section title="Pricing — Product (Light & Dark)" config={config}>
         <Horizontal gap={20} flexWrap="wrap" alignItems="flex-start">
-          <PaletteFrame palette={lightPalette} label="On light surface">
+          <PaletteFrame config={config} palette={lightPalette} label="On light surface">
             <ProductPricingCardSample palette={lightPalette} personality={personality}/>
           </PaletteFrame>
-          <PaletteFrame palette={darkPalette} label="On dark surface">
+          <PaletteFrame config={config} palette={darkPalette} label="On dark surface">
             <ProductPricingCardSample palette={darkPalette} personality={personality}/>
           </PaletteFrame>
         </Horizontal>
@@ -1815,10 +1834,10 @@ const ComponentPreview = ({ config }) => {
 
       <Section title="Pricing — Featured w/ Badge & Favorite (Light & Dark)" config={config}>
         <Horizontal gap={20} flexWrap="wrap" alignItems="flex-start">
-          <PaletteFrame palette={lightPalette} label="On light surface">
+          <PaletteFrame config={config} palette={lightPalette} label="On light surface">
             <FeaturedPricingCardSample palette={lightPalette} personality={personality}/>
           </PaletteFrame>
-          <PaletteFrame palette={darkPalette} label="On dark surface">
+          <PaletteFrame config={config} palette={darkPalette} label="On dark surface">
             <FeaturedPricingCardSample palette={darkPalette} personality={personality}/>
           </PaletteFrame>
         </Horizontal>
@@ -1832,12 +1851,12 @@ const ComponentPreview = ({ config }) => {
 
       <Section title="Content — Article Cards w/ Badge & Favorite (Light & Dark)" config={config}>
         <Vertical gap={20}>
-          <PaletteFrame palette={lightPalette} label="On light surface">
+          <PaletteFrame config={config} palette={lightPalette} label="On light surface">
             <Horizontal gap={16} flexWrap="wrap" alignItems="stretch">
               {contentArticles.map((article) => (<ContentCardWithBadgeSample key={article.id} palette={lightPalette} article={article} personality={personality}/>))}
             </Horizontal>
           </PaletteFrame>
-          <PaletteFrame palette={darkPalette} label="On dark surface">
+          <PaletteFrame config={config} palette={darkPalette} label="On dark surface">
             <Horizontal gap={16} flexWrap="wrap" alignItems="stretch">
               {contentArticles.map((article) => (<ContentCardWithBadgeSample key={article.id} palette={darkPalette} article={article} personality={personality}/>))}
             </Horizontal>
@@ -1847,10 +1866,10 @@ const ComponentPreview = ({ config }) => {
 
       <Section title="CTA Card — Light & Dark" config={config}>
         <Horizontal gap={20} flexWrap="wrap" alignItems="flex-start">
-          <PaletteFrame palette={lightPalette} label="On light surface">
+          <PaletteFrame config={config} palette={lightPalette} label="On light surface">
             <CTACardSample palette={lightPalette} config={config}/>
           </PaletteFrame>
-          <PaletteFrame palette={darkPalette} label="On dark surface">
+          <PaletteFrame config={config} palette={darkPalette} label="On dark surface">
             <CTACardSample palette={darkPalette} config={config}/>
           </PaletteFrame>
         </Horizontal>
@@ -1858,10 +1877,10 @@ const ComponentPreview = ({ config }) => {
 
       <Section title="Product Card — Light & Dark" config={config}>
         <Horizontal gap={20} flexWrap="wrap" alignItems="flex-start">
-          <PaletteFrame palette={lightPalette} label="On light surface">
+          <PaletteFrame config={config} palette={lightPalette} label="On light surface">
             <ProductCardSample palette={lightPalette} config={config}/>
           </PaletteFrame>
-          <PaletteFrame palette={darkPalette} label="On dark surface">
+          <PaletteFrame config={config} palette={darkPalette} label="On dark surface">
             <ProductCardSample palette={darkPalette} config={config}/>
           </PaletteFrame>
         </Horizontal>
@@ -2103,9 +2122,7 @@ export const DesignSystem = ({ config }) => {
       <Helmet>
         {config.metadata.googleFontLinks?.map((link) => (<link key={link} rel="stylesheet" href={link}/>))}
       </Helmet>
-      <View minHeight="100vh" padding={28} fontFamily={config.tokens.typography.fontFamily} style={{
-            backgroundColor: config.theme.canvas,
-            color: config.theme.text,
+      <View minHeight="100vh" padding={28} fontFamily={config.tokens.typography.fontFamily} backgroundColor={config.theme.canvas} color={config.theme.text} style={{
             textTransform: config.metadata.id === 'spacex' ? 'uppercase' : 'none',
         }}>
         <Vertical gap={28}>
@@ -2114,7 +2131,8 @@ export const DesignSystem = ({ config }) => {
               {config.metadata.label} Design System
             </Text>
             <Text fontSize={16} lineHeight="24px" color={config.theme.muted} fontFamily={config.tokens.typography.fontFamily}>
-              Live App Studio components rendered with the {config.metadata.label} config defaults.
+              Live App Studio components rendered with the{' '}
+              {config.metadata.label} config defaults.
             </Text>
           </Vertical>