@tamagui/theme-base 1.0.1-beta.21 → 1.0.1-beta.211

package/package.json

@@ -1,26 +1,37 @@
 {
   "name": "@tamagui/theme-base",
-  "version": "1.0.1-beta.21",
-  "typings": "types",
+  "version": "1.0.1-beta.211",
+  "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
-  "module:jsx": "dist/jsx",
+  "sideEffects": false,
   "files": [
+    "src",
     "types",
     "dist"
   ],
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch",
+    "lint": "eslint",
+    "lint:fix": "yarn lint --fix",
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build"
   },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
   "dependencies": {
-    "@tamagui/colors": "^1.0.1-beta.21",
-    "@tamagui/core": "^1.0.1-beta.21"
+    "@tamagui/colors": "^1.0.1-beta.211",
+    "@tamagui/core": "^1.0.1-beta.211",
+    "@tamagui/create-themes": "^1.0.1-beta.211"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.21"
+    "@tamagui/build": "^1.0.1-beta.211"
   },
   "publishConfig": {
     "access": "public"

package/src/colorUtils.tsx

@@ -0,0 +1,42 @@
+import { Variable, getVariableValue } from '@tamagui/core'
+
+export const hexToRGBA = (hex: string, alpha = 1) => {
+  if (!isValidHex(hex)) {
+    throw new Error('Invalid HEX')
+  }
+  const chunkSize = Math.floor((hex.length - 1) / 3)
+  const hexArr = getChunksFromString(hex.slice(1), chunkSize)
+  const [r, g, b, a] = hexArr?.map(convertHexUnitTo256) ?? []
+  return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`
+}
+
+export const setColorAlpha = (colorIn: string | Variable, alpha = 1) => {
+  let color = `${getVariableValue(colorIn)}`
+  if (color.startsWith('hsl(')) {
+    return color.replace('hsl', 'hsla').replace(')', `, ${alpha})`)
+  }
+  if (color.startsWith('#')) {
+    return hexToRGBA(color, alpha)
+  }
+  if (color.startsWith('rgb(')) {
+    return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`)
+  }
+  return color
+}
+
+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 getAlphaFloat = (a: any, alpha = 1) => {
+  if (a !== undefined) {
+    return a / 255
+  }
+  if (typeof alpha != 'number' || alpha < 0 || alpha > 1) {
+    return 1
+  }
+  return alpha
+}

package/src/index.tsx

@@ -0,0 +1,3 @@
+export * from './themes'
+export * from './tokens'
+export * from '@tamagui/colors'

package/src/themes.tsx

@@ -0,0 +1,39 @@
+import { createThemes } from '@tamagui/create-themes'
+
+import { colorTokens } from './tokens'
+
+export const themes = createThemes<keyof typeof colorTokens.light>({
+  activeColor: 'blue',
+  light: [
+    '#fff',
+    '#f4f4f4',
+    'hsl(0, 0%, 99.0%)',
+    'hsl(0, 0%, 97.3%)',
+    'hsl(0, 0%, 95.1%)',
+    'hsl(0, 0%, 93.0%)',
+    'hsl(0, 0%, 90.9%)',
+    'hsl(0, 0%, 88.7%)',
+    'hsl(0, 0%, 85.8%)',
+    'hsl(0, 0%, 78.0%)',
+    'hsl(0, 0%, 56.1%)',
+    'hsl(0, 0%, 52.3%)',
+    'hsl(0, 0%, 43.5%)',
+    'hsl(0, 0%, 9.0%)',
+  ],
+  dark: [
+    '#111111',
+    '#151515',
+    '#191919',
+    '#232323',
+    '#282828',
+    '#323232',
+    '#383838',
+    '#424242',
+    '#494949',
+    '#545454',
+    '#626262',
+    '#777777',
+  ],
+  colorsLight: colorTokens.light,
+  colorsDark: colorTokens.dark,
+})

package/src/tokens.tsx

@@ -0,0 +1,172 @@
+import {
+  blue,
+  blueDark,
+  gray,
+  grayDark,
+  green,
+  greenDark,
+  orange,
+  orangeDark,
+  pink,
+  pinkDark,
+  purple,
+  purpleDark,
+  red,
+  redDark,
+  yellow,
+  yellowDark,
+} from '@tamagui/colors'
+import { Variable, createTokens } from '@tamagui/core'
+
+// should roughly map to button/input etc height at each level
+// fonts should match that height/lineHeight at each stop
+// so these are really non-linear on purpose
+// why?
+//   - at sizes <1, used for fine grained things (borders, smallest paddingY)
+//     - so smallest padY should be roughly 1-4px so it can join with lineHeight
+//   - at sizes >=1, have to consider "pressability" (jumps up)
+//   - after that it should go upwards somewhat naturally
+//   - H1 / headings top out at 10 naturally, so after 10 we can go upwards faster
+//  but also one more wrinkle...
+//  space is used in conjunction with size
+//  i'm setting space to generally just a fixed fraction of size (~1/3-2/3 still fine tuning)
+export 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,
+  6: 64,
+  7: 74,
+  8: 84,
+  9: 94,
+  10: 104,
+  11: 124,
+  12: 144,
+  13: 164,
+  14: 184,
+  15: 204,
+  16: 224,
+  17: 224,
+  18: 244,
+  19: 264,
+  20: 284,
+}
+
+type Sizes = typeof size
+type SizeKeys = `${keyof Sizes}`
+
+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])
+
+export const space: {
+  [Key in `-${SizeKeys}` | SizeKeys]: Key extends keyof Sizes ? Sizes[Key] : number
+} = {
+  ...Object.fromEntries(spaces),
+  ...Object.fromEntries(spacesNegative),
+} as any
+
+export const zIndex = {
+  0: 0,
+  1: 100,
+  2: 200,
+  3: 300,
+  4: 400,
+  5: 500,
+}
+
+export const colorTokens = {
+  light: {
+    blue: blue,
+    gray: gray,
+    green: green,
+    orange: orange,
+    pink: pink,
+    purple: purple,
+    red: red,
+    yellow: yellow,
+  },
+  dark: {
+    blue: blueDark,
+    gray: grayDark,
+    green: greenDark,
+    orange: orangeDark,
+    pink: pinkDark,
+    purple: purpleDark,
+    red: redDark,
+    yellow: yellowDark,
+  },
+}
+
+export const darkColors = {
+  ...colorTokens.dark.blue,
+  ...colorTokens.dark.gray,
+  ...colorTokens.dark.green,
+  ...colorTokens.dark.orange,
+  ...colorTokens.dark.pink,
+  ...colorTokens.dark.purple,
+  ...colorTokens.dark.red,
+  ...colorTokens.dark.yellow,
+}
+
+export const lightColors = {
+  ...colorTokens.light.blue,
+  ...colorTokens.light.gray,
+  ...colorTokens.light.green,
+  ...colorTokens.light.orange,
+  ...colorTokens.light.pink,
+  ...colorTokens.light.purple,
+  ...colorTokens.light.red,
+  ...colorTokens.light.yellow,
+}
+
+export const color = {
+  ...postfixObjKeys(lightColors, 'Light'),
+  ...postfixObjKeys(darkColors, 'Dark'),
+}
+
+function postfixObjKeys<A extends { [key: string]: Variable<string> | string }, B extends string>(
+  obj: A,
+  postfix: B
+): {
+  [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
+}
+
+export 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,
+}
+
+export const tokens = createTokens({
+  color,
+  radius,
+  zIndex,
+  space,
+  size,
+})