Fix some nits in example

facebook · Dec 10, 2023 · bad0b30 · bad0b30
1 parent 891c561
commit bad0b30
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 13 deletions.
diff --git a/apps/esbuild-example/public/index.html b/apps/esbuild-example/public/index.html
@@ -4,7 +4,7 @@
     <title>@stylexjs/esbuild-plugin</title>
     <meta charset="utf-8" />
     <style>
-      * {
+      body {
         box-sizing: border-box;
         padding: 0;
         margin: 0;

diff --git a/apps/esbuild-example/src/App.jsx b/apps/esbuild-example/src/App.jsx
@@ -12,7 +12,7 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
-import { spacings, colors } from './tokens.stylex.js';
+import { spacing, color } from './tokens.stylex.js';
 
 const styles = stylex.create({
   main: {
@@ -21,13 +21,12 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: colors.pink,
+    backgroundColor: color.pink,
   },
   card: {
-    width: 100,
-    height: 100,
-    backgroundColor: colors.blue,
-    padding: spacings.medium,
+    backgroundColor: color.blue,
+    padding: spacing.medium,
+    borderRadius: spacing.small,
     justifyContent: 'center',
     display: 'flex',
     alignItems: 'center',
@@ -39,7 +38,7 @@ function App() {
   return (
     <div {...stylex.props(styles.main)}>
       <div {...stylex.props(styles.card)}>
-        <span>Blue box</span>
+        <span>Blue rounded rectangle</span>
       </div>
     </div>
   );

diff --git a/apps/esbuild-example/src/tokens.stylex.js b/apps/esbuild-example/src/tokens.stylex.js
@@ -11,13 +11,13 @@
 
 import * as stylex from '@stylexjs/stylex';
 
-export const spacings = stylex.defineVars({
-  small: 10,
-  medium: 20,
-  large: 30,
+export const spacing = stylex.defineVars({
+  small: '10px',
+  medium: '20px',
+  large: '30px',
 });
 
-export const colors = stylex.defineVars({
+export const color = stylex.defineVars({
   blue: 'blue',
   pink: 'pink',
 });