@tamagui/theme-base 1.0.1-rc.1.4 → 1.0.1-rc.10

package/dist/jsx/tokens.js

@@ -0,0 +1,167 @@
+import {
+  blue,
+  blueDark,
+  gray,
+  grayA,
+  grayDark,
+  grayDarkA,
+  green,
+  greenDark,
+  orange,
+  orangeDark,
+  pink,
+  pinkDark,
+  purple,
+  purpleDark,
+  red,
+  redDark,
+  teal,
+  tealDark,
+  violet,
+  violetDark,
+  yellow,
+  yellowDark
+} from "@tamagui/colors";
+import { createTokens } from "@tamagui/core";
+const size = {
+  0: 0,
+  0.25: 2,
+  0.5: 4,
+  0.75: 8,
+  1: 20,
+  1.5: 24,
+  2: 28,
+  2.5: 32,
+  3: 36,
+  3.5: 40,
+  4: 44,
+  true: 44,
+  4.5: 48,
+  5: 52,
+  5.5: 59,
+  6: 64,
+  6.5: 69,
+  7: 74,
+  7.6: 79,
+  8: 84,
+  8.5: 89,
+  9: 94,
+  9.5: 99,
+  10: 104,
+  11: 124,
+  12: 144,
+  13: 164,
+  14: 184,
+  15: 204,
+  16: 224,
+  17: 224,
+  18: 244,
+  19: 264,
+  20: 284
+};
+const spaces = Object.entries(size).map(([k, v]) => [
+  k,
+  Math.max(0, v <= 16 ? Math.round(v * 0.333) : Math.floor(v * 0.7 - 12))
+]);
+const spacesNegative = spaces.map(([k, v]) => [`-${k}`, -v]);
+const space = {
+  ...Object.fromEntries(spaces),
+  ...Object.fromEntries(spacesNegative)
+};
+const zIndex = {
+  0: 0,
+  1: 100,
+  2: 200,
+  3: 300,
+  4: 400,
+  5: 500
+};
+const colorTokens = {
+  light: {
+    blue,
+    gray,
+    grayA,
+    green,
+    orange,
+    pink,
+    purple,
+    red,
+    violet,
+    yellow,
+    teal
+  },
+  dark: {
+    blue: blueDark,
+    gray: grayDark,
+    grayA: grayDarkA,
+    green: greenDark,
+    orange: orangeDark,
+    pink: pinkDark,
+    purple: purpleDark,
+    red: redDark,
+    violet: violetDark,
+    yellow: yellowDark,
+    teal: tealDark
+  }
+};
+const darkColors = {
+  ...colorTokens.dark.blue,
+  ...colorTokens.dark.gray,
+  ...colorTokens.dark.grayA,
+  ...colorTokens.dark.green,
+  ...colorTokens.dark.orange,
+  ...colorTokens.dark.pink,
+  ...colorTokens.dark.purple,
+  ...colorTokens.dark.red,
+  ...colorTokens.dark.violet,
+  ...colorTokens.dark.yellow,
+  ...colorTokens.dark.teal
+};
+const lightColors = {
+  ...colorTokens.light.blue,
+  ...colorTokens.light.gray,
+  ...colorTokens.light.grayA,
+  ...colorTokens.light.green,
+  ...colorTokens.light.orange,
+  ...colorTokens.light.pink,
+  ...colorTokens.light.purple,
+  ...colorTokens.light.red,
+  ...colorTokens.light.violet,
+  ...colorTokens.light.yellow,
+  ...colorTokens.light.teal
+};
+const allColors = {
+  ...postfixObjKeys(lightColors, "Light"),
+  ...postfixObjKeys(darkColors, "Dark")
+};
+function postfixObjKeys(obj, postfix) {
+  return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v]));
+}
+const radius = {
+  0: 0,
+  1: 3,
+  2: 5,
+  3: 7,
+  4: 9,
+  5: 10,
+  6: 16,
+  7: 19,
+  8: 22,
+  9: 26,
+  10: 34,
+  11: 42,
+  12: 50
+};
+const tokens = createTokens({
+  color: allColors,
+  radius,
+  zIndex,
+  space,
+  size
+});
+export {
+  darkColors,
+  lightColors,
+  tokens
+};
+//# sourceMappingURL=tokens.js.map

package/dist/jsx/tokens.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tokens.tsx"],
+  "sourcesContent": ["import {\n  blue,\n  blueDark,\n  gray,\n  grayA,\n  grayDark,\n  grayDarkA,\n  green,\n  greenDark,\n  orange,\n  orangeDark,\n  pink,\n  pinkDark,\n  purple,\n  purpleDark,\n  red,\n  redDark,\n  teal,\n  tealDark,\n  violet,\n  violetDark,\n  yellow,\n  yellowDark,\n} from '@tamagui/colors'\nimport { Variable, createTokens } from '@tamagui/core'\n\n// should roughly map to button/input etc height at each level\n// fonts should match that height/lineHeight at each stop\n// so these are really non-linear on purpose\n// why?\n//   - at sizes <1, used for fine grained things (borders, smallest paddingY)\n//     - so smallest padY should be roughly 1-4px so it can join with lineHeight\n//   - at sizes >=1, have to consider \"pressability\" (jumps up)\n//   - after that it should go upwards somewhat naturally\n//   - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster\n//  but also one more wrinkle...\n//  space is used in conjunction with size\n//  i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)\nconst size = {\n  0: 0,\n  0.25: 2,\n  0.5: 4,\n  0.75: 8,\n  1: 20,\n  1.5: 24,\n  2: 28,\n  2.5: 32,\n  3: 36,\n  3.5: 40,\n  4: 44,\n  true: 44,\n  4.5: 48,\n  5: 52,\n  5.5: 59,\n  6: 64,\n  6.5: 69,\n  7: 74,\n  7.6: 79,\n  8: 84,\n  8.5: 89,\n  9: 94,\n  9.5: 99,\n  10: 104,\n  11: 124,\n  12: 144,\n  13: 164,\n  14: 184,\n  15: 204,\n  16: 224,\n  17: 224,\n  18: 244,\n  19: 264,\n  20: 284,\n}\n\ntype Sizes = typeof size\ntype SizeKeys = `${keyof Sizes}`\n\nconst spaces = Object.entries(size).map(([k, v]) => [\n  k,\n  Math.max(0, v <= 16 ? Math.round(v * 0.333) : Math.floor(v * 0.7 - 12)),\n])\n\nconst spacesNegative = spaces.map(([k, v]) => [`-${k}`, -v])\n\nconst space: {\n  [Key in `-${SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number\n} = {\n  ...Object.fromEntries(spaces),\n  ...Object.fromEntries(spacesNegative),\n} as any\n\nconst zIndex = {\n  0: 0,\n  1: 100,\n  2: 200,\n  3: 300,\n  4: 400,\n  5: 500,\n}\n\nconst colorTokens = {\n  light: {\n    blue: blue,\n    gray: gray,\n    grayA: grayA,\n    green: green,\n    orange: orange,\n    pink: pink,\n    purple: purple,\n    red: red,\n    violet: violet,\n    yellow: yellow,\n    teal: teal,\n  },\n  dark: {\n    blue: blueDark,\n    gray: grayDark,\n    grayA: grayDarkA,\n    green: greenDark,\n    orange: orangeDark,\n    pink: pinkDark,\n    purple: purpleDark,\n    red: redDark,\n    violet: violetDark,\n    yellow: yellowDark,\n    teal: tealDark,\n  },\n}\n\nexport const darkColors = {\n  ...colorTokens.dark.blue,\n  ...colorTokens.dark.gray,\n  ...colorTokens.dark.grayA,\n  ...colorTokens.dark.green,\n  ...colorTokens.dark.orange,\n  ...colorTokens.dark.pink,\n  ...colorTokens.dark.purple,\n  ...colorTokens.dark.red,\n  ...colorTokens.dark.violet,\n  ...colorTokens.dark.yellow,\n  ...colorTokens.dark.teal,\n}\n\nexport const lightColors = {\n  ...colorTokens.light.blue,\n  ...colorTokens.light.gray,\n  ...colorTokens.light.grayA,\n  ...colorTokens.light.green,\n  ...colorTokens.light.orange,\n  ...colorTokens.light.pink,\n  ...colorTokens.light.purple,\n  ...colorTokens.light.red,\n  ...colorTokens.light.violet,\n  ...colorTokens.light.yellow,\n  ...colorTokens.light.teal,\n}\n\nconst allColors = {\n  ...postfixObjKeys(lightColors, 'Light'),\n  ...postfixObjKeys(darkColors, 'Dark'),\n}\n\nfunction postfixObjKeys<A extends { [key: string]: Variable<string> | string }, B extends string>(\n  obj: A,\n  postfix: B\n): {\n  [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string\n} {\n  return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])) as any\n}\n\nconst radius = {\n  0: 0,\n  1: 3,\n  2: 5,\n  3: 7,\n  4: 9,\n  5: 10,\n  6: 16,\n  7: 19,\n  8: 22,\n  9: 26,\n  10: 34,\n  11: 42,\n  12: 50,\n}\n\nexport const tokens = createTokens({\n  color: allColors,\n  radius,\n  zIndex,\n  space,\n  size,\n})\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/theme-base",
-  "version": "1.0.1-rc.1.4",
+  "version": "1.0.1-rc.10",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -13,8 +13,8 @@
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch",
-    "lint": "eslint src",
-    "lint:fix": "yarn lint --fix",
+    "lint": "../../node_modules/.bin/rome check src",
+    "lint:fix": "../../node_modules/.bin/rome check --apply-suggested src",
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build"
   },
@@ -26,12 +26,12 @@
     }
   },
   "dependencies": {
-    "@tamagui/colors": "^1.0.1-rc.1.4",
-    "@tamagui/core": "^1.0.1-rc.1.4",
-    "@tamagui/create-themes": "^1.0.1-rc.1.4"
+    "@tamagui/colors": "^1.0.1-rc.10",
+    "@tamagui/core": "^1.0.1-rc.10",
+    "@tamagui/create-themes": "^1.0.1-rc.10"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-rc.1.4"
+    "@tamagui/build": "^1.0.1-rc.10"
   },
   "publishConfig": {
     "access": "public"

package/src/colorUtils.tsx

@@ -29,13 +29,14 @@ const isValidHex = (hex: string) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)
 const getChunksFromString = (st: string, chunkSize = 0) =>
   st.match(new RegExp(`.{${chunkSize}}`, 'g'))
 
-const convertHexUnitTo256 = (hexStr: string) => parseInt(hexStr.repeat(2 / hexStr.length), 16)
+const convertHexUnitTo256 = (hexStr: string) =>
+  parseInt(hexStr.repeat(2 / hexStr.length), 16)
 
 const getAlphaFloat = (a: any, alpha = 1) => {
   if (a !== undefined) {
     return a / 255
   }
-  if (typeof alpha != 'number' || alpha < 0 || alpha > 1) {
+  if (typeof alpha !== 'number' || alpha < 0 || alpha > 1) {
     return 1
   }
   return alpha

package/src/themes.tsx

@@ -32,7 +32,7 @@ export const themes = createThemes<keyof typeof colorTokens.light>({
     '#494949',
     '#545454',
     '#626262',
-    '#777777',
+    '#a5a5a5',
   ],
   colorsLight: colorTokens.light,
   colorsDark: colorTokens.dark,

package/src/tokens.tsx

@@ -138,13 +138,20 @@ export const color = {
   ...postfixObjKeys(darkColors, 'Dark'),
 }
 
-function postfixObjKeys<A extends { [key: string]: Variable<string> | string }, B extends string>(
+function postfixObjKeys<
+  A extends { [key: string]: Variable<string> | string },
+  B extends string,
+>(
   obj: A,
-  postfix: B
+  postfix: B,
 ): {
-  [Key in `${keyof A extends string ? keyof A : never}${B}`]: Variable<string> | string
+  [Key in `${keyof A extends string ? keyof A : never}${B}`]:
+    | Variable<string>
+    | string
 } {
-  return Object.fromEntries(Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v])) as any
+  return Object.fromEntries(
+    Object.entries(obj).map(([k, v]) => [`${k}${postfix}`, v]),
+  ) as any
 }
 
 export const radius = {