refactor: implementing suggested changes

apps/docs/docs/learn/06-recipes/02-variants.mdx

@@ -21,6 +21,12 @@ Here’s how you can create a button component with different visual styles base
 import * as stylex from '@stylexjs/stylex';
 
 const styles = stylex.create({
+  base: {
+    appearance: 'none',
+    borderWidth: 0,
+  },
+});
+const variants = stylex.create({
   primary: {
     backgroundColor: {
       default: 'blue',
@@ -36,9 +42,8 @@ const styles = stylex.create({
     color: 'white',
   },
 });
-
 function Button({ variant = 'primary', ...props }) {
-  return <button {...props} {...stylex.props(styles[variant], props.style)} />;
+  return <button {...props} {...stylex.props(styles.base, variants[variant], props.style)} />;
 }
 
 // Usage

apps/docs/docs/learn/06-recipes/03-descendant styles.mdx

@@ -42,7 +42,7 @@ const styles = stylex.create({
     },
   },
   child: {
-    color: `var(${vars.childColor})`,
+    color: `vars.childColor`,
   },
 });