chore: add example compound variables with media variant value

Temzasse · Dec 9, 2022 · d95a9ae · d95a9ae
1 parent cbe1369
commit d95a9ae
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/example/src/Example.tsx b/example/src/Example.tsx
@@ -48,7 +48,22 @@ export default function Example() {
               <Heading underlined heading="h5">
                 Heading
               </Heading>
-              <Heading>Media</Heading>
+              <Heading
+                // NOTE: test compound variants with media.
+                // If it work text color and border color are same
+                // as text size will be changed by device size.
+                heading={{
+                  '@xxl': 'h1',
+                  '@xl': 'h1',
+                  '@lg': 'h2',
+                  '@md': 'h3',
+                }}
+                underlined={{
+                  '@initial': true,
+                }}
+              >
+                Media
+              </Heading>
               <Heading
                 heading={{
                   '@initial': 'h5',