From a1e8cacad4a69e4093ec3ca3e4f63127f9876117 Mon Sep 17 00:00:00 2001
From: Daniel Imbert <daniel.imbert96@gmail.com>
Date: Thu, 7 May 2026 23:36:39 -0400
Subject: [PATCH 1/2] fix: align playground color tokens with ColorScheme

---
 playground/src/screens/BoxPlayground.svelte    | 4 ++--
 playground/src/screens/ColumnPlayground.svelte | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/playground/src/screens/BoxPlayground.svelte b/playground/src/screens/BoxPlayground.svelte
index f31e39b..97f7d60 100644
--- a/playground/src/screens/BoxPlayground.svelte
+++ b/playground/src/screens/BoxPlayground.svelte
@@ -72,8 +72,8 @@
                     <Surface modifier={Modifier.size(110).background(ColorScheme.Secondary).clip({ toCssBorderRadius: () => '16px' }).padding(12)}>
                         <Text color="onSecondary" textStyle="labelSmall">Medio</Text>
                     </Surface>
-                    <Surface modifier={Modifier.size(60).background(ColorScheme.Tertiary).clip({ toCssBorderRadius: () => '16px' }).padding(8)}>
-                         <Text color="onTertiary" textStyle="labelSmall">Top</Text>
+                    <Surface modifier={Modifier.size(60).background(ColorScheme.Outline).clip({ toCssBorderRadius: () => '16px' }).padding(8)}>
+                         <Text color="onSurface" textStyle="labelSmall">Top</Text>
                     </Surface>
                 </Box>
             </Surface>
diff --git a/playground/src/screens/ColumnPlayground.svelte b/playground/src/screens/ColumnPlayground.svelte
index 9a9b05b..df1b00e 100644
--- a/playground/src/screens/ColumnPlayground.svelte
+++ b/playground/src/screens/ColumnPlayground.svelte
@@ -68,7 +68,7 @@
                 >
                     <Surface modifier={Modifier.size(80).background(ColorScheme.Primary).clip({ toCssBorderRadius: () => '12px' })} />
                     <Surface modifier={Modifier.size(60).background(ColorScheme.Secondary).clip({ toCssBorderRadius: () => '12px' })} />
-                    <Surface modifier={Modifier.size(100).background(ColorScheme.Tertiary).clip({ toCssBorderRadius: () => '12px' })} />
+                    <Surface modifier={Modifier.size(100).background(ColorScheme.Outline).clip({ toCssBorderRadius: () => '12px' })} />
                 </Column>
             </Surface>
         </Column>

From beb7c38c49ad2997a9e3f9a11e7a6a213eb73d6e Mon Sep 17 00:00:00 2001
From: Daniel Imbert <daniel.imbert96@gmail.com>
Date: Fri, 8 May 2026 00:03:08 -0400
Subject: [PATCH 2/2] fix(playground): make app root fill viewport for
 fillMaxSize

---
 playground/src/app.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/playground/src/app.css b/playground/src/app.css
index 80ba942..04b322b 100644
--- a/playground/src/app.css
+++ b/playground/src/app.css
@@ -1,3 +1,12 @@
 *,:before,:after { box-sizing: border-box; }
-html,body { margin: 0; padding: 0; min-height: 100vh; }
+
+/* El root debe ocupar viewport completo para que fillMaxSize funcione */
+html, body, #app {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 body { font-family: Inter, system-ui, sans-serif; }