@tamagui/demos 1.2.4 → 1.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/cjs/ColorsDemo.js +2 -2
  2. package/dist/cjs/ColorsDemo.js.map +2 -2
  3. package/dist/esm/ColorsDemo.js +2 -2
  4. package/dist/esm/ColorsDemo.js.map +2 -2
  5. package/dist/jsx/ColorsDemo.js +2 -2
  6. package/dist/jsx/ColorsDemo.js.map +2 -2
  7. package/package.json +16 -16
  8. package/src/ColorsDemo.tsx +2 -2
package/dist/cjs/ColorsDemo.js CHANGED
@@ -63,7 +63,7 @@ function ColorsRow({ title, colors }) {
63
63
  import_tamagui.Paragraph,
64
64
  {
65
65
  col: "$color10",
66
- fow: "300",
66
+ ta: "center",
67
67
  w: "$4",
68
68
  $sm: {
69
69
  w: "$2"
@@ -77,7 +77,7 @@ function ColorsRow({ title, colors }) {
77
77
  );
78
78
  }) })
79
79
  ] }),
80
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { space: "$2", children: colorGroups.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
80
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { space: "$4", mt: "$2", children: colorGroups.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
81
81
  import_tamagui.Paragraph,
82
82
  {
83
83
  theme: name,
package/dist/cjs/ColorsDemo.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ColorsDemo.tsx"],
4
- "sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n H2,\n Paragraph,\n Separator,\n Square,\n XStack,\n YStack,\n getTokens,\n getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n const colors = getTokens({ prefixed: false }).color\n const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n return (\n <YStack mt=\"$4\" space=\"$8\">\n <ColorsRow title=\"Light\" colors={colorsLight} />\n <Separator />\n <ColorsRow title=\"Dark\" colors={colorsDark} />\n </YStack>\n )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n return (\n <YStack space $sm={{ space: '$2' }}>\n <H2 size=\"$2\">{title}</H2>\n\n <XStack space als=\"center\">\n <YStack space $sm={{ space: '$2' }} als=\"center\">\n {colors.map((group, index) => {\n return (\n <XStack space=\"$2\" key={index}>\n {group.map((color) => {\n return (\n <Square\n key={`${color.key}${index}`}\n br=\"$2\"\n size=\"$4\"\n h=\"$4\"\n bc={getVariableValue(color)}\n $sm={{\n size: '$2',\n }}\n $xs={{\n size: '$1',\n }}\n />\n )\n })}\n </XStack>\n )\n })}\n\n <XStack space=\"$2\" als=\"center\">\n {new Array(13)\n .fill(0)\n .slice(1)\n .map((_, index) => {\n return (\n <Paragraph\n col=\"$color10\"\n fow=\"300\"\n w=\"$4\"\n $sm={{\n w: '$2',\n }}\n $xs={{\n w: '$1',\n }}\n key={index}\n >\n {index}\n </Paragraph>\n )\n })}\n </XStack>\n </YStack>\n\n <YStack space=\"$2\">\n {colorGroups.map((name) => (\n <Paragraph\n theme={name as any}\n col=\"$color10\"\n h=\"$4\"\n rotate=\"-10deg\"\n $sm={{\n h: '$2',\n }}\n $xs={{\n h: '$1',\n }}\n key={name}\n >\n {name}\n </Paragraph>\n ))}\n </YStack>\n </XStack>\n </YStack>\n )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n return colorGroups.map((group) => {\n return Object.keys(colors)\n .filter(\n (color) =>\n color.startsWith(group) &&\n (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n )\n .map((key) => colors[key])\n })\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBI;AAlBJ,qBASO;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,aAAS,0BAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,6CAAC,yBAAO,IAAG,MAAK,OAAM,MACpB;AAAA,gDAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,4CAAC,4BAAU;AAAA,IACX,4CAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,6CAAC,yBAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,gDAAC,qBAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,6CAAC,yBAAO,OAAK,MAAC,KAAI,UAChB;AAAA,mDAAC,yBAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAAG,KAAI,UACrC;AAAA,eAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,4CAAC,yBAAO,OAAM,MACX,gBAAM,IAAI,CAAC,UAAU;AACpB,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,GAAE;AAAA,gBACF,QAAI,iCAAiB,KAAK;AAAA,gBAC1B,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA,gBACA,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA;AAAA,cAVK,GAAG,MAAM,MAAM;AAAA,YAWtB;AAAA,UAEJ,CAAC,KAjBqB,KAkBxB;AAAA,QAEJ,CAAC;AAAA,QAED,4CAAC,yBAAO,OAAM,MAAK,KAAI,UACpB,cAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,KAAI;AAAA,cACJ,KAAI;AAAA,cACJ,GAAE;AAAA,cACF,KAAK;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cACA,KAAK;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cAGC;AAAA;AAAA,YAFI;AAAA,UAGP;AAAA,QAEJ,CAAC,GACL;AAAA,SACF;AAAA,MAEA,4CAAC,yBAAO,OAAM,MACX,sBAAY,IAAI,CAAC,SAChB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,KAAI;AAAA,UACJ,GAAE;AAAA,UACF,QAAO;AAAA,UACP,KAAK;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UACA,KAAK;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UAGC;AAAA;AAAA,QAFI;AAAA,MAGP,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU,QAAkC,OAAO,OAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UAAU;AAChC,WAAO,OAAO,KAAK,MAAM,EACtB;AAAA,MACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,IAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,EAC7B,CAAC;AACH;",
4
+ "sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n H2,\n Paragraph,\n Separator,\n Square,\n XStack,\n YStack,\n getTokens,\n getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n const colors = getTokens({ prefixed: false }).color\n const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n return (\n <YStack mt=\"$4\" space=\"$8\">\n <ColorsRow title=\"Light\" colors={colorsLight} />\n <Separator />\n <ColorsRow title=\"Dark\" colors={colorsDark} />\n </YStack>\n )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n return (\n <YStack space $sm={{ space: '$2' }}>\n <H2 size=\"$2\">{title}</H2>\n\n <XStack space als=\"center\">\n <YStack space $sm={{ space: '$2' }} als=\"center\">\n {colors.map((group, index) => {\n return (\n <XStack space=\"$2\" key={index}>\n {group.map((color) => {\n return (\n <Square\n key={`${color.key}${index}`}\n br=\"$2\"\n size=\"$4\"\n h=\"$4\"\n bc={getVariableValue(color)}\n $sm={{\n size: '$2',\n }}\n $xs={{\n size: '$1',\n }}\n />\n )\n })}\n </XStack>\n )\n })}\n\n <XStack space=\"$2\" als=\"center\">\n {new Array(13)\n .fill(0)\n .slice(1)\n .map((_, index) => {\n return (\n <Paragraph\n col=\"$color10\"\n ta=\"center\"\n w=\"$4\"\n $sm={{\n w: '$2',\n }}\n $xs={{\n w: '$1',\n }}\n key={index}\n >\n {index}\n </Paragraph>\n )\n })}\n </XStack>\n </YStack>\n\n <YStack space=\"$4\" mt=\"$2\">\n {colorGroups.map((name) => (\n <Paragraph\n theme={name as any}\n col=\"$color10\"\n h=\"$4\"\n rotate=\"-10deg\"\n $sm={{\n h: '$2',\n }}\n $xs={{\n h: '$1',\n }}\n key={name}\n >\n {name}\n </Paragraph>\n ))}\n </YStack>\n </XStack>\n </YStack>\n )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n return colorGroups.map((group) => {\n return Object.keys(colors)\n .filter(\n (color) =>\n color.startsWith(group) &&\n (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n )\n .map((key) => colors[key])\n })\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBI;AAlBJ,qBASO;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,aAAS,0BAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,6CAAC,yBAAO,IAAG,MAAK,OAAM,MACpB;AAAA,gDAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,4CAAC,4BAAU;AAAA,IACX,4CAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,6CAAC,yBAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,gDAAC,qBAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,6CAAC,yBAAO,OAAK,MAAC,KAAI,UAChB;AAAA,mDAAC,yBAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAAG,KAAI,UACrC;AAAA,eAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,4CAAC,yBAAO,OAAM,MACX,gBAAM,IAAI,CAAC,UAAU;AACpB,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,GAAE;AAAA,gBACF,QAAI,iCAAiB,KAAK;AAAA,gBAC1B,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA,gBACA,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA;AAAA,cAVK,GAAG,MAAM,MAAM;AAAA,YAWtB;AAAA,UAEJ,CAAC,KAjBqB,KAkBxB;AAAA,QAEJ,CAAC;AAAA,QAED,4CAAC,yBAAO,OAAM,MAAK,KAAI,UACpB,cAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,KAAI;AAAA,cACJ,IAAG;AAAA,cACH,GAAE;AAAA,cACF,KAAK;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cACA,KAAK;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cAGC;AAAA;AAAA,YAFI;AAAA,UAGP;AAAA,QAEJ,CAAC,GACL;AAAA,SACF;AAAA,MAEA,4CAAC,yBAAO,OAAM,MAAK,IAAG,MACnB,sBAAY,IAAI,CAAC,SAChB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,KAAI;AAAA,UACJ,GAAE;AAAA,UACF,QAAO;AAAA,UACP,KAAK;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UACA,KAAK;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UAGC;AAAA;AAAA,QAFI;AAAA,MAGP,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU,QAAkC,OAAO,OAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UAAU;AAChC,WAAO,OAAO,KAAK,MAAM,EACtB;AAAA,MACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,IAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,EAC7B,CAAC;AACH;",
6
6
  "names": []
7
7
  }
package/dist/esm/ColorsDemo.js CHANGED
@@ -49,7 +49,7 @@ function ColorsRow({ title, colors }) {
49
49
  Paragraph,
50
50
  {
51
51
  col: "$color10",
52
- fow: "300",
52
+ ta: "center",
53
53
  w: "$4",
54
54
  $sm: {
55
55
  w: "$2"
@@ -63,7 +63,7 @@ function ColorsRow({ title, colors }) {
63
63
  );
64
64
  }) })
65
65
  ] }),
66
- /* @__PURE__ */ jsx(YStack, { space: "$2", children: colorGroups.map((name) => /* @__PURE__ */ jsx(
66
+ /* @__PURE__ */ jsx(YStack, { space: "$4", mt: "$2", children: colorGroups.map((name) => /* @__PURE__ */ jsx(
67
67
  Paragraph,
68
68
  {
69
69
  theme: name,
package/dist/esm/ColorsDemo.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ColorsDemo.tsx"],
4
- "sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n H2,\n Paragraph,\n Separator,\n Square,\n XStack,\n YStack,\n getTokens,\n getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n const colors = getTokens({ prefixed: false }).color\n const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n return (\n <YStack mt=\"$4\" space=\"$8\">\n <ColorsRow title=\"Light\" colors={colorsLight} />\n <Separator />\n <ColorsRow title=\"Dark\" colors={colorsDark} />\n </YStack>\n )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n return (\n <YStack space $sm={{ space: '$2' }}>\n <H2 size=\"$2\">{title}</H2>\n\n <XStack space als=\"center\">\n <YStack space $sm={{ space: '$2' }} als=\"center\">\n {colors.map((group, index) => {\n return (\n <XStack space=\"$2\" key={index}>\n {group.map((color) => {\n return (\n <Square\n key={`${color.key}${index}`}\n br=\"$2\"\n size=\"$4\"\n h=\"$4\"\n bc={getVariableValue(color)}\n $sm={{\n size: '$2',\n }}\n $xs={{\n size: '$1',\n }}\n />\n )\n })}\n </XStack>\n )\n })}\n\n <XStack space=\"$2\" als=\"center\">\n {new Array(13)\n .fill(0)\n .slice(1)\n .map((_, index) => {\n return (\n <Paragraph\n col=\"$color10\"\n fow=\"300\"\n w=\"$4\"\n $sm={{\n w: '$2',\n }}\n $xs={{\n w: '$1',\n }}\n key={index}\n >\n {index}\n </Paragraph>\n )\n })}\n </XStack>\n </YStack>\n\n <YStack space=\"$2\">\n {colorGroups.map((name) => (\n <Paragraph\n theme={name as any}\n col=\"$color10\"\n h=\"$4\"\n rotate=\"-10deg\"\n $sm={{\n h: '$2',\n }}\n $xs={{\n h: '$1',\n }}\n key={name}\n >\n {name}\n </Paragraph>\n ))}\n </YStack>\n </XStack>\n </YStack>\n )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n return colorGroups.map((group) => {\n return Object.keys(colors)\n .filter(\n (color) =>\n color.startsWith(group) &&\n (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n )\n .map((key) => colors[key])\n })\n}\n"],
5
- "mappings": "AAmBI,SACE,KADF;AAlBJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,qBAAC,UAAO,IAAG,MAAK,OAAM,MACpB;AAAA,wBAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,oBAAC,aAAU;AAAA,IACX,oBAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,qBAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,wBAAC,MAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,qBAAC,UAAO,OAAK,MAAC,KAAI,UAChB;AAAA,2BAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAAG,KAAI,UACrC;AAAA,eAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,oBAAC,UAAO,OAAM,MACX,gBAAM,IAAI,CAAC,UAAU;AACpB,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,GAAE;AAAA,gBACF,IAAI,iBAAiB,KAAK;AAAA,gBAC1B,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA,gBACA,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA;AAAA,cAVK,GAAG,MAAM,MAAM;AAAA,YAWtB;AAAA,UAEJ,CAAC,KAjBqB,KAkBxB;AAAA,QAEJ,CAAC;AAAA,QAED,oBAAC,UAAO,OAAM,MAAK,KAAI,UACpB,cAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,KAAI;AAAA,cACJ,KAAI;AAAA,cACJ,GAAE;AAAA,cACF,KAAK;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cACA,KAAK;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cAGC;AAAA;AAAA,YAFI;AAAA,UAGP;AAAA,QAEJ,CAAC,GACL;AAAA,SACF;AAAA,MAEA,oBAAC,UAAO,OAAM,MACX,sBAAY,IAAI,CAAC,SAChB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,KAAI;AAAA,UACJ,GAAE;AAAA,UACF,QAAO;AAAA,UACP,KAAK;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UACA,KAAK;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UAGC;AAAA;AAAA,QAFI;AAAA,MAGP,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU,QAAkC,OAAO,OAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UAAU;AAChC,WAAO,OAAO,KAAK,MAAM,EACtB;AAAA,MACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,IAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,EAC7B,CAAC;AACH;",
4
+ "sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n H2,\n Paragraph,\n Separator,\n Square,\n XStack,\n YStack,\n getTokens,\n getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n const colors = getTokens({ prefixed: false }).color\n const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n return (\n <YStack mt=\"$4\" space=\"$8\">\n <ColorsRow title=\"Light\" colors={colorsLight} />\n <Separator />\n <ColorsRow title=\"Dark\" colors={colorsDark} />\n </YStack>\n )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n return (\n <YStack space $sm={{ space: '$2' }}>\n <H2 size=\"$2\">{title}</H2>\n\n <XStack space als=\"center\">\n <YStack space $sm={{ space: '$2' }} als=\"center\">\n {colors.map((group, index) => {\n return (\n <XStack space=\"$2\" key={index}>\n {group.map((color) => {\n return (\n <Square\n key={`${color.key}${index}`}\n br=\"$2\"\n size=\"$4\"\n h=\"$4\"\n bc={getVariableValue(color)}\n $sm={{\n size: '$2',\n }}\n $xs={{\n size: '$1',\n }}\n />\n )\n })}\n </XStack>\n )\n })}\n\n <XStack space=\"$2\" als=\"center\">\n {new Array(13)\n .fill(0)\n .slice(1)\n .map((_, index) => {\n return (\n <Paragraph\n col=\"$color10\"\n ta=\"center\"\n w=\"$4\"\n $sm={{\n w: '$2',\n }}\n $xs={{\n w: '$1',\n }}\n key={index}\n >\n {index}\n </Paragraph>\n )\n })}\n </XStack>\n </YStack>\n\n <YStack space=\"$4\" mt=\"$2\">\n {colorGroups.map((name) => (\n <Paragraph\n theme={name as any}\n col=\"$color10\"\n h=\"$4\"\n rotate=\"-10deg\"\n $sm={{\n h: '$2',\n }}\n $xs={{\n h: '$1',\n }}\n key={name}\n >\n {name}\n </Paragraph>\n ))}\n </YStack>\n </XStack>\n </YStack>\n )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n return colorGroups.map((group) => {\n return Object.keys(colors)\n .filter(\n (color) =>\n color.startsWith(group) &&\n (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n )\n .map((key) => colors[key])\n })\n}\n"],
5
+ "mappings": "AAmBI,SACE,KADF;AAlBJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,qBAAC,UAAO,IAAG,MAAK,OAAM,MACpB;AAAA,wBAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,oBAAC,aAAU;AAAA,IACX,oBAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,qBAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,wBAAC,MAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,qBAAC,UAAO,OAAK,MAAC,KAAI,UAChB;AAAA,2BAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAAG,KAAI,UACrC;AAAA,eAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,oBAAC,UAAO,OAAM,MACX,gBAAM,IAAI,CAAC,UAAU;AACpB,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,GAAE;AAAA,gBACF,IAAI,iBAAiB,KAAK;AAAA,gBAC1B,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA,gBACA,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA;AAAA,cAVK,GAAG,MAAM,MAAM;AAAA,YAWtB;AAAA,UAEJ,CAAC,KAjBqB,KAkBxB;AAAA,QAEJ,CAAC;AAAA,QAED,oBAAC,UAAO,OAAM,MAAK,KAAI,UACpB,cAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,KAAI;AAAA,cACJ,IAAG;AAAA,cACH,GAAE;AAAA,cACF,KAAK;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cACA,KAAK;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cAGC;AAAA;AAAA,YAFI;AAAA,UAGP;AAAA,QAEJ,CAAC,GACL;AAAA,SACF;AAAA,MAEA,oBAAC,UAAO,OAAM,MAAK,IAAG,MACnB,sBAAY,IAAI,CAAC,SAChB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,KAAI;AAAA,UACJ,GAAE;AAAA,UACF,QAAO;AAAA,UACP,KAAK;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UACA,KAAK;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UAGC;AAAA;AAAA,QAFI;AAAA,MAGP,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU,QAAkC,OAAO,OAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UAAU;AAChC,WAAO,OAAO,KAAK,MAAM,EACtB;AAAA,MACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,IAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,EAC7B,CAAC;AACH;",
6
6
  "names": []
7
7
  }
package/dist/jsx/ColorsDemo.js CHANGED
@@ -43,7 +43,7 @@ function ColorsRow({ title, colors }) {
43
43
  <XStack space="$2" als="center">{new Array(13).fill(0).slice(1).map((_, index) => {
44
44
  return <Paragraph
45
45
  col="$color10"
46
- fow="300"
46
+ ta="center"
47
47
  w="$4"
48
48
  $sm={{
49
49
  w: "$2"
@@ -55,7 +55,7 @@ function ColorsRow({ title, colors }) {
55
55
  >{index}</Paragraph>;
56
56
  })}</XStack>
57
57
  </YStack>
58
- <YStack space="$2">{colorGroups.map((name) => <Paragraph
58
+ <YStack space="$4" mt="$2">{colorGroups.map((name) => <Paragraph
59
59
  theme={name}
60
60
  col="$color10"
61
61
  h="$4"
package/dist/jsx/ColorsDemo.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ColorsDemo.tsx"],
4
- "sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n H2,\n Paragraph,\n Separator,\n Square,\n XStack,\n YStack,\n getTokens,\n getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n const colors = getTokens({ prefixed: false }).color\n const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n return (\n <YStack mt=\"$4\" space=\"$8\">\n <ColorsRow title=\"Light\" colors={colorsLight} />\n <Separator />\n <ColorsRow title=\"Dark\" colors={colorsDark} />\n </YStack>\n )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n return (\n <YStack space $sm={{ space: '$2' }}>\n <H2 size=\"$2\">{title}</H2>\n\n <XStack space als=\"center\">\n <YStack space $sm={{ space: '$2' }} als=\"center\">\n {colors.map((group, index) => {\n return (\n <XStack space=\"$2\" key={index}>\n {group.map((color) => {\n return (\n <Square\n key={`${color.key}${index}`}\n br=\"$2\"\n size=\"$4\"\n h=\"$4\"\n bc={getVariableValue(color)}\n $sm={{\n size: '$2',\n }}\n $xs={{\n size: '$1',\n }}\n />\n )\n })}\n </XStack>\n )\n })}\n\n <XStack space=\"$2\" als=\"center\">\n {new Array(13)\n .fill(0)\n .slice(1)\n .map((_, index) => {\n return (\n <Paragraph\n col=\"$color10\"\n fow=\"300\"\n w=\"$4\"\n $sm={{\n w: '$2',\n }}\n $xs={{\n w: '$1',\n }}\n key={index}\n >\n {index}\n </Paragraph>\n )\n })}\n </XStack>\n </YStack>\n\n <YStack space=\"$2\">\n {colorGroups.map((name) => (\n <Paragraph\n theme={name as any}\n col=\"$color10\"\n h=\"$4\"\n rotate=\"-10deg\"\n $sm={{\n h: '$2',\n }}\n $xs={{\n h: '$1',\n }}\n key={name}\n >\n {name}\n </Paragraph>\n ))}\n </YStack>\n </XStack>\n </YStack>\n )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n return colorGroups.map((group) => {\n return Object.keys(colors)\n .filter(\n (color) =>\n color.startsWith(group) &&\n (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n )\n .map((key) => colors[key])\n })\n}\n"],
5
- "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,CAAC,OAAO,GAAG,KAAK,MAAM;AAAA,IACpB,CAAC,UAAU,MAAM,QAAQ,QAAQ,aAAa;AAAA,IAC9C,CAAC,UAAU;AAAA,IACX,CAAC,UAAU,MAAM,OAAO,QAAQ,YAAY;AAAA,EAC9C,EAJC;AAML;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,IAC/B,CAAC,GAAG,KAAK,MAAM,MAAM,EAApB;AAAA,IAED,CAAC,OAAO,MAAM,IAAI;AAAA,MAChB,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK,GAAG,IAAI;AAAA,SACrC,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,CAAC,OAAO,MAAM,KAAK,KAAK,QACrB,MAAM,IAAI,CAAC,UAAU;AACpB,mBACE,CAAC;AAAA,cACC,KAAK,GAAG,MAAM,MAAM;AAAA,cACpB,GAAG;AAAA,cACH,KAAK;AAAA,cACL,EAAE;AAAA,cACF,IAAI,iBAAiB,KAAK;AAAA,cAC1B,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,cACA,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,YACF;AAAA,UAEJ,CAAC,EACH,EAlBC;AAAA,QAoBL,CAAC;AAAA,QAED,CAAC,OAAO,MAAM,KAAK,IAAI,UACpB,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE,CAAC;AAAA,YACC,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,EAAE;AAAA,YACF,KAAK;AAAA,cACH,GAAG;AAAA,YACL;AAAA,YACA,KAAK;AAAA,cACH,GAAG;AAAA,YACL;AAAA,YACA,KAAK;AAAA,YAEJ,MACH,EAbC;AAAA,QAeL,CAAC,EACL,EAtBC;AAAA,MAuBH,EAhDC;AAAA,MAkDD,CAAC,OAAO,MAAM,MACX,YAAY,IAAI,CAAC,SAChB,CAAC;AAAA,QACC,OAAO;AAAA,QACP,IAAI;AAAA,QACJ,EAAE;AAAA,QACF,OAAO;AAAA,QACP,KAAK;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,KAAK;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,KAAK;AAAA,QAEJ,KACH,EAdC,UAeF,EACH,EAlBC;AAAA,IAmBH,EAtEC;AAAA,EAuEH,EA1EC;AA4EL;AAEA,SAAS,UAAU,QAAkC,OAAO,OAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UAAU;AAChC,WAAO,OAAO,KAAK,MAAM,EACtB;AAAA,MACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,IAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,EAC7B,CAAC;AACH;",
4
+ "sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n H2,\n Paragraph,\n Separator,\n Square,\n XStack,\n YStack,\n getTokens,\n getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n const colors = getTokens({ prefixed: false }).color\n const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n return (\n <YStack mt=\"$4\" space=\"$8\">\n <ColorsRow title=\"Light\" colors={colorsLight} />\n <Separator />\n <ColorsRow title=\"Dark\" colors={colorsDark} />\n </YStack>\n )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n return (\n <YStack space $sm={{ space: '$2' }}>\n <H2 size=\"$2\">{title}</H2>\n\n <XStack space als=\"center\">\n <YStack space $sm={{ space: '$2' }} als=\"center\">\n {colors.map((group, index) => {\n return (\n <XStack space=\"$2\" key={index}>\n {group.map((color) => {\n return (\n <Square\n key={`${color.key}${index}`}\n br=\"$2\"\n size=\"$4\"\n h=\"$4\"\n bc={getVariableValue(color)}\n $sm={{\n size: '$2',\n }}\n $xs={{\n size: '$1',\n }}\n />\n )\n })}\n </XStack>\n )\n })}\n\n <XStack space=\"$2\" als=\"center\">\n {new Array(13)\n .fill(0)\n .slice(1)\n .map((_, index) => {\n return (\n <Paragraph\n col=\"$color10\"\n ta=\"center\"\n w=\"$4\"\n $sm={{\n w: '$2',\n }}\n $xs={{\n w: '$1',\n }}\n key={index}\n >\n {index}\n </Paragraph>\n )\n })}\n </XStack>\n </YStack>\n\n <YStack space=\"$4\" mt=\"$2\">\n {colorGroups.map((name) => (\n <Paragraph\n theme={name as any}\n col=\"$color10\"\n h=\"$4\"\n rotate=\"-10deg\"\n $sm={{\n h: '$2',\n }}\n $xs={{\n h: '$1',\n }}\n key={name}\n >\n {name}\n </Paragraph>\n ))}\n </YStack>\n </XStack>\n </YStack>\n )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n return colorGroups.map((group) => {\n return Object.keys(colors)\n .filter(\n (color) =>\n color.startsWith(group) &&\n (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n )\n .map((key) => colors[key])\n })\n}\n"],
5
+ "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,CAAC,OAAO,GAAG,KAAK,MAAM;AAAA,IACpB,CAAC,UAAU,MAAM,QAAQ,QAAQ,aAAa;AAAA,IAC9C,CAAC,UAAU;AAAA,IACX,CAAC,UAAU,MAAM,OAAO,QAAQ,YAAY;AAAA,EAC9C,EAJC;AAML;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,IAC/B,CAAC,GAAG,KAAK,MAAM,MAAM,EAApB;AAAA,IAED,CAAC,OAAO,MAAM,IAAI;AAAA,MAChB,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK,GAAG,IAAI;AAAA,SACrC,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,CAAC,OAAO,MAAM,KAAK,KAAK,QACrB,MAAM,IAAI,CAAC,UAAU;AACpB,mBACE,CAAC;AAAA,cACC,KAAK,GAAG,MAAM,MAAM;AAAA,cACpB,GAAG;AAAA,cACH,KAAK;AAAA,cACL,EAAE;AAAA,cACF,IAAI,iBAAiB,KAAK;AAAA,cAC1B,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,cACA,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,YACF;AAAA,UAEJ,CAAC,EACH,EAlBC;AAAA,QAoBL,CAAC;AAAA,QAED,CAAC,OAAO,MAAM,KAAK,IAAI,UACpB,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE,CAAC;AAAA,YACC,IAAI;AAAA,YACJ,GAAG;AAAA,YACH,EAAE;AAAA,YACF,KAAK;AAAA,cACH,GAAG;AAAA,YACL;AAAA,YACA,KAAK;AAAA,cACH,GAAG;AAAA,YACL;AAAA,YACA,KAAK;AAAA,YAEJ,MACH,EAbC;AAAA,QAeL,CAAC,EACL,EAtBC;AAAA,MAuBH,EAhDC;AAAA,MAkDD,CAAC,OAAO,MAAM,KAAK,GAAG,MACnB,YAAY,IAAI,CAAC,SAChB,CAAC;AAAA,QACC,OAAO;AAAA,QACP,IAAI;AAAA,QACJ,EAAE;AAAA,QACF,OAAO;AAAA,QACP,KAAK;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,KAAK;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,KAAK;AAAA,QAEJ,KACH,EAdC,UAeF,EACH,EAlBC;AAAA,IAmBH,EAtEC;AAAA,EAuEH,EA1EC;AA4EL;AAEA,SAAS,UAAU,QAAkC,OAAO,OAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UAAU;AAChC,WAAO,OAAO,KAAK,MAAM,EACtB;AAAA,MACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,IAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,EAC7B,CAAC;AACH;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/demos",
3
- "version": "1.2.4",
3
+ "version": "1.2.5",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -29,27 +29,27 @@
29
29
  }
30
30
  },
31
31
  "dependencies": {
32
- "@tamagui/avatar": "^1.2.4",
33
- "@tamagui/button": "^1.2.4",
34
- "@tamagui/config-base": "^1.2.4",
35
- "@tamagui/core": "^1.2.4",
36
- "@tamagui/list-item": "^1.2.4",
37
- "@tamagui/logo": "^1.2.4",
38
- "@tamagui/menu": "^1.2.4",
39
- "@tamagui/popover": "^1.2.4",
40
- "@tamagui/progress": "^1.2.4",
41
- "@tamagui/select": "^1.2.4",
42
- "@tamagui/sheet": "^1.2.4",
43
- "@tamagui/slider": "^1.2.4",
44
- "@tamagui/stacks": "^1.2.4",
45
- "tamagui": "^1.2.4"
32
+ "@tamagui/avatar": "^1.2.5",
33
+ "@tamagui/button": "^1.2.5",
34
+ "@tamagui/config-base": "^1.2.5",
35
+ "@tamagui/core": "^1.2.5",
36
+ "@tamagui/list-item": "^1.2.5",
37
+ "@tamagui/logo": "^1.2.5",
38
+ "@tamagui/menu": "^1.2.5",
39
+ "@tamagui/popover": "^1.2.5",
40
+ "@tamagui/progress": "^1.2.5",
41
+ "@tamagui/select": "^1.2.5",
42
+ "@tamagui/sheet": "^1.2.5",
43
+ "@tamagui/slider": "^1.2.5",
44
+ "@tamagui/stacks": "^1.2.5",
45
+ "tamagui": "^1.2.5"
46
46
  },
47
47
  "peerDependencies": {
48
48
  "react": "*",
49
49
  "react-dom": "*"
50
50
  },
51
51
  "devDependencies": {
52
- "@tamagui/build": "^1.2.4",
52
+ "@tamagui/build": "^1.2.5",
53
53
  "react": "^18.2.0",
54
54
  "react-dom": "^18.2.0"
55
55
  },
package/src/ColorsDemo.tsx CHANGED
@@ -64,7 +64,7 @@ function ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {
64
64
  return (
65
65
  <Paragraph
66
66
  col="$color10"
67
- fow="300"
67
+ ta="center"
68
68
  w="$4"
69
69
  $sm={{
70
70
  w: '$2',
@@ -81,7 +81,7 @@ function ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {
81
81
  </XStack>
82
82
  </YStack>
83
83
 
84
- <YStack space="$2">
84
+ <YStack space="$4" mt="$2">
85
85
  {colorGroups.map((name) => (
86
86
  <Paragraph
87
87
  theme={name as any}