@tamagui/demos 1.2.2 → 1.2.4
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.
package/dist/cjs/ColorsDemo.js
CHANGED
|
@@ -25,7 +25,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
25
25
|
var import_tamagui = require("tamagui");
|
|
26
26
|
const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
|
|
27
27
|
function ColorsDemo() {
|
|
28
|
-
const colors = (0, import_tamagui.getTokens)().color;
|
|
28
|
+
const colors = (0, import_tamagui.getTokens)({ prefixed: false }).color;
|
|
29
29
|
const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
|
|
30
30
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { mt: "$4", space: "$8", children: [
|
|
31
31
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorsRow, { title: "Light", colors: colorsLight }),
|
|
@@ -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().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'))
|
|
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;
|
|
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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/ColorsDemo.js
CHANGED
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
} from "tamagui";
|
|
12
12
|
const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
|
|
13
13
|
function ColorsDemo() {
|
|
14
|
-
const colors = getTokens().color;
|
|
14
|
+
const colors = getTokens({ prefixed: false }).color;
|
|
15
15
|
const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
|
|
16
16
|
return /* @__PURE__ */ jsxs(YStack, { mt: "$4", space: "$8", children: [
|
|
17
17
|
/* @__PURE__ */ jsx(ColorsRow, { title: "Light", colors: colorsLight }),
|
|
@@ -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().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'))
|
|
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;
|
|
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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/ColorsDemo.js
CHANGED
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
} from "tamagui";
|
|
11
11
|
const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
|
|
12
12
|
function ColorsDemo() {
|
|
13
|
-
const colors = getTokens().color;
|
|
13
|
+
const colors = getTokens({ prefixed: false }).color;
|
|
14
14
|
const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
|
|
15
15
|
return <YStack mt="$4" space="$8">
|
|
16
16
|
<ColorsRow title="Light" colors={colorsLight} />
|
|
@@ -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().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'))
|
|
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;
|
|
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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/demos",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.4",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -29,27 +29,27 @@
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@tamagui/avatar": "^1.2.
|
|
33
|
-
"@tamagui/button": "^1.2.
|
|
34
|
-
"@tamagui/config-base": "^1.2.
|
|
35
|
-
"@tamagui/core": "^1.2.
|
|
36
|
-
"@tamagui/list-item": "^1.2.
|
|
37
|
-
"@tamagui/logo": "^1.2.
|
|
38
|
-
"@tamagui/menu": "^1.2.
|
|
39
|
-
"@tamagui/popover": "^1.2.
|
|
40
|
-
"@tamagui/progress": "^1.2.
|
|
41
|
-
"@tamagui/select": "^1.2.
|
|
42
|
-
"@tamagui/sheet": "^1.2.
|
|
43
|
-
"@tamagui/slider": "^1.2.
|
|
44
|
-
"@tamagui/stacks": "^1.2.
|
|
45
|
-
"tamagui": "^1.2.
|
|
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"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": "*",
|
|
49
49
|
"react-dom": "*"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@tamagui/build": "^1.2.
|
|
52
|
+
"@tamagui/build": "^1.2.4",
|
|
53
53
|
"react": "^18.2.0",
|
|
54
54
|
"react-dom": "^18.2.0"
|
|
55
55
|
},
|
package/src/ColorsDemo.tsx
CHANGED
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
const colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']
|
|
14
14
|
|
|
15
15
|
export function ColorsDemo() {
|
|
16
|
-
const colors = getTokens().color
|
|
16
|
+
const colors = getTokens({ prefixed: false }).color
|
|
17
17
|
const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]
|
|
18
18
|
|
|
19
19
|
return (
|
|
@@ -111,7 +111,7 @@ function getColors(colors: Record<string, Variable>, dark = false) {
|
|
|
111
111
|
.filter(
|
|
112
112
|
(color) =>
|
|
113
113
|
color.startsWith(group) &&
|
|
114
|
-
(dark ? color.endsWith('Dark') : !color.endsWith('Dark'))
|
|
114
|
+
(dark ? color.endsWith('Dark') : !color.endsWith('Dark'))
|
|
115
115
|
)
|
|
116
116
|
.map((key) => colors[key])
|
|
117
117
|
})
|