@tamagui/theme-base 1.0.1-beta.140 → 1.0.1-beta.143

package/dist/esm/tokens.js

@@ -2,9 +2,7 @@ import {
   blue,
   blueDark,
   gray,
-  grayA,
   grayDark,
-  grayDarkA,
   green,
   greenDark,
   orange,
@@ -15,10 +13,6 @@ import {
   purpleDark,
   red,
   redDark,
-  teal,
-  tealDark,
-  violet,
-  violetDark,
   yellow,
   yellowDark
 } from "@tamagui/colors";
@@ -80,55 +74,43 @@ const colorTokens = {
   light: {
     blue,
     gray,
-    grayA,
     green,
     orange,
     pink,
     purple,
     red,
-    violet,
-    yellow,
-    teal
+    yellow
   },
   dark: {
     blue: blueDark,
     gray: grayDark,
-    grayA: grayDarkA,
     green: greenDark,
     orange: orangeDark,
     pink: pinkDark,
     purple: purpleDark,
     red: redDark,
-    violet: violetDark,
-    yellow: yellowDark,
-    teal: tealDark
+    yellow: yellowDark
   }
 };
 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
+  ...colorTokens.dark.yellow
 };
 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
+  ...colorTokens.light.yellow
 };
 const allColors = {
   ...postfixObjKeys(lightColors, "Light"),

package/dist/esm/tokens.js.map

@@ -1,7 +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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",
+  "sourcesContent": ["import {\n  blue,\n  blueDark,\n  gray,\n  grayDark,\n  green,\n  greenDark,\n  orange,\n  orangeDark,\n  pink,\n  pinkDark,\n  purple,\n  purpleDark,\n  red,\n  redDark,\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    green: green,\n    orange: orange,\n    pink: pink,\n    purple: purple,\n    red: red,\n    yellow: yellow,\n  },\n  dark: {\n    blue: blueDark,\n    gray: grayDark,\n    green: greenDark,\n    orange: orangeDark,\n    pink: pinkDark,\n    purple: purpleDark,\n    red: redDark,\n    yellow: yellowDark,\n  },\n}\n\nexport const darkColors = {\n  ...colorTokens.dark.blue,\n  ...colorTokens.dark.gray,\n  ...colorTokens.dark.green,\n  ...colorTokens.dark.orange,\n  ...colorTokens.dark.pink,\n  ...colorTokens.dark.purple,\n  ...colorTokens.dark.red,\n  ...colorTokens.dark.yellow,\n}\n\nexport const lightColors = {\n  ...colorTokens.light.blue,\n  ...colorTokens.light.gray,\n  ...colorTokens.light.green,\n  ...colorTokens.light.orange,\n  ...colorTokens.light.pink,\n  ...colorTokens.light.purple,\n  ...colorTokens.light.red,\n  ...colorTokens.light.yellow,\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,10 +1,10 @@
 {
   "name": "@tamagui/theme-base",
-  "version": "1.0.1-beta.140",
+  "version": "1.0.1-beta.143",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
-  "module:jsx": "dist/jsx",
+  "sideEffects": false,
   "files": [
     "src",
     "types",
@@ -18,12 +18,19 @@
     "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.140",
-    "@tamagui/core": "^1.0.1-beta.140"
+    "@tamagui/colors": "^1.0.1-beta.143",
+    "@tamagui/core": "^1.0.1-beta.143"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.140"
+    "@tamagui/build": "^1.0.1-beta.143"
   },
   "publishConfig": {
     "access": "public"

package/src/themes.tsx

@@ -1,9 +1,7 @@
 import { Variable, createTheme, getVariableValue, isWeb } from '@tamagui/core'
 
 import { setColorAlpha } from './colorUtils'
-import { darkColors, lightColors, tokens } from './tokens'
-
-const { color } = tokens
+import { darkColors, lightColors } from './tokens'
 
 // spaghetti ahead
 
@@ -25,12 +23,36 @@ type ThemeCreatorProps = {
 
 // helpers
 
-const alternates = [1, 2, 3, 4] as const
-const alts = [1, 2, 3] as const
-type AltKeys = 1 | 2 | 3
+const alternates = [1, 2, 3] as const
+const alts = [1, 2] as const
+type AltKeys = 1 | 2
 type AltName<Name extends string, Keys extends string | number> = `${Name}_alt${Keys}`
 type ThemeCreator<A = any> = (str: number, props: ThemeCreatorProps) => A
 
+interface SubTheme {
+  background: Variable<any> | string
+  backgroundStrong: Variable<any> | string
+  backgroundSoft: Variable<any> | string
+  backgroundHover: Variable<any> | string
+  backgroundPress: Variable<any> | string
+  backgroundFocus: Variable<any> | string
+  backgroundTransparent: Variable<any> | string
+  color: Variable<any> | string
+  colorHover: Variable<any> | string
+  colorPress: Variable<any> | string
+  colorFocus: Variable<any> | string
+  colorTranslucent: Variable<any> | string
+  colorMid: Variable<any> | string
+  shadowColor: Variable<any> | string
+  shadowColorHover: Variable<any> | string
+  shadowColorPress: Variable<any> | string
+  shadowColorFocus: Variable<any> | string
+  borderColor: Variable<any> | string
+  borderColorHover: Variable<any> | string
+  borderColorPress: Variable<any> | string
+  borderColorFocus: Variable<any> | string
+}
+
 function createThemesFrom<Name extends string, GetTheme extends ThemeCreator = ThemeCreator>(
   name: Name,
   getTheme: GetTheme,
@@ -91,8 +113,8 @@ function createThemesFrom<Name extends string, GetTheme extends ThemeCreator = T
     ...altButtonThemes.slice(0, alts.length),
     [`${name}_Button`, altThemes2[1][1]],
     [`${name}_DrawerFrame`, altThemes2[1][1]],
-    [`${name}_SliderTrack`, altThemes[2][1]],
-    [`${name}_SliderTrackActive`, altThemes[3][1]],
+    [`${name}_SliderTrack`, altThemes[0][1]],
+    [`${name}_SliderTrackActive`, altThemes[2][1]],
     [`${name}_SliderThumb`, inverted[2]],
     [`${name}_Progress`, altThemes[2][1]],
     [`${name}_ProgressIndicator`, inverted[2]],
@@ -138,21 +160,21 @@ const themeCreator = (
 
   const colorTranslucent = setColorAlpha(getVariableValue(get(colors, 0 + str, 'color')), 0.5)
 
-  const theme = {
+  const theme: SubTheme = {
     background: get(backgrounds, str),
     backgroundStrong: backgroundStrong || get(backgrounds, str + strongerDir * 2),
     backgroundSoft: get(backgrounds, str + softerDir * 2),
     backgroundHover: get(backgrounds, str + lighterDir),
     backgroundPress: get(backgrounds, str + darkerDir),
     backgroundFocus: get(backgrounds, str + darkerDir * 2),
-    backgroundTransparent: color.grayA1Light,
+    backgroundTransparent: 'hsla(0, 0%, 0%, 0.012)',
     color: get(colors, 0 + str, 'color'),
     colorHover: get(colors, 1 + str, 'color'),
     colorPress: get(colors, 2 + str, 'color'),
     colorFocus: get(colors, 3 + str, 'color'),
     colorTranslucent,
     colorMid: (isLight ? colors : backgrounds)[Math.floor(colors.length / 2)],
-    shadowColor: isLight ? color.grayA2Light : color.grayA8Light,
+    shadowColor: isLight ? 'hsla(0, 0%, 0%, 0.03)' : 'hsla(0, 0%, 0%, 0.2)',
     shadowColorHover: darkColors[!isLight ? 1 : 8],
     shadowColorPress: darkColors[!isLight ? 1 : 8],
     shadowColorFocus: darkColors[!isLight ? 1 : 8],
@@ -210,18 +232,18 @@ const themeColors = {
   light: [
     '#fff',
     '#f4f4f4',
-    color.gray1Light,
-    color.gray2Light,
-    color.gray3Light,
-    color.gray4Light,
-    color.gray5Light,
-    color.gray6Light,
-    color.gray7Light,
-    color.gray8Light,
-    color.gray9Light,
-    color.gray10Light,
-    color.gray11Light,
-    color.gray12Light,
+    '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',
@@ -265,19 +287,19 @@ const darkThemes = createThemesFrom('dark', themeCreator, {
 darkThemes.dark_darker.background = '#030303'
 darkThemes.dark_darker.backgroundStrong = '#000'
 
+type BaseTheme = {
+  [key in keyof typeof lightColors | keyof SubTheme]: Variable<string>
+}
+
 const light = createTheme({
   ...lightColors,
   ...lightThemes.light,
-})
+}) as BaseTheme
 
 const dark = createTheme({
   ...darkColors,
   ...darkThemes.dark,
-})
-
-type ThemeBase = {
-  [Key in keyof typeof dark]: string
-}
+}) as BaseTheme
 
 const baseThemes = {
   // light
@@ -286,9 +308,9 @@ const baseThemes = {
   // reserving in types, updating later
   light_active: lightThemes.light,
   light_Card: lightThemes.light,
-  light_SliderTrack: lightThemes.light_alt2,
-  light_SliderTrackActive: lightThemes.light_alt3,
-  light_Switch: lightThemes.light_alt3,
+  light_SliderTrack: lightThemes.light_alt1,
+  light_SliderTrackActive: lightThemes.light_alt2,
+  light_Switch: lightThemes.light_alt2,
   light_SwitchThumb: lightThemes.light,
   light_DrawerFrame: lightThemes.light_alt1,
 
@@ -298,17 +320,17 @@ const baseThemes = {
   // reserving in types, updating later
   dark_active: darkThemes.dark,
   dark_Card: darkThemes.dark,
-  dark_DrawerFrame: darkThemes.dark_alt2,
+  dark_DrawerFrame: darkThemes.dark_alt1,
   dark_SliderTrack: darkThemes.dark_darker,
-  dark_SliderTrackActive: darkThemes.dark_alt3,
-  dark_Switch: darkThemes.dark_alt3,
+  dark_SliderTrackActive: darkThemes.dark_alt2,
+  dark_Switch: darkThemes.dark_alt2,
   dark_SwitchThumb: darkThemes.dark_darker,
   dark_Button: darkThemes.dark_alt1,
 }
 
 const darkEntries = Object.entries(dark)
 const lightEntries = Object.entries(light)
-function findColors(prefix: string, dark = false): ThemeBase {
+function findColors(prefix: string, dark = false): BaseTheme {
   return Object.fromEntries(
     (dark ? darkEntries : lightEntries).filter(([k]) => k.startsWith(prefix))
   ) as any
@@ -323,7 +345,6 @@ export const colorSchemes = [
   { name: 'purple', colors: findColors('purple'), darkColors: findColors('purple', true) },
   { name: 'red', colors: findColors('red'), darkColors: findColors('red', true) },
   { name: 'yellow', colors: findColors('yellow'), darkColors: findColors('yellow', true) },
-  { name: 'teal', colors: findColors('teal'), darkColors: findColors('teal', true) },
 ] as const
 
 export type ColorNames = typeof colorSchemes[number]['name']
@@ -331,14 +352,13 @@ export type ColorNames = typeof colorSchemes[number]['name']
 // nice and flat
 export const colorNames: ColorNames[] = [
   'blue',
-  'gray',
   'green',
   'orange',
   'pink',
   'purple',
   'red',
   'yellow',
-  'teal',
+  'gray',
 ]
 
 type ColorThemeNames =
@@ -367,8 +387,11 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
     // }
 
     const themeWithAlts = createThemesFrom(name, themeCreator, {
+      // @ts-ignore
       colors,
+      // @ts-ignore
       backgrounds,
+      // @ts-ignore
       borderColors: backgrounds,
       isLight,
       shift,
@@ -385,15 +408,19 @@ const colorThemeEntries = colorSchemes.flatMap(({ name, colors, darkColors }) =>
   return [...altLightThemes, ...altDarkThemes]
 })
 
-type MyThemeBase = typeof baseThemes['light_alt1']
+type TypedColorTheme = typeof lightThemes.light_alt1
+type TypedTheme = typeof light
+type TypedThemes = {
+  [key in keyof typeof allThemes]: TypedTheme
+}
 
 const colorThemes: {
-  [key in ColorThemeNames]: MyThemeBase
+  [key in ColorThemeNames]: TypedColorTheme
 } = Object.fromEntries(colorThemeEntries) as any
 
 // add in base _active themes
 baseThemes.dark_active = {
-  ...colorThemes.dark_blue_alt3,
+  ...colorThemes.dark_blue_alt2,
   background: darkColors.blue10,
   backgroundHover: darkColors.blue11,
   backgroundPress: darkColors.blue9,
@@ -412,6 +439,4 @@ const allThemes = {
   ...colorThemes,
 } as const
 
-export const themes: {
-  [key in keyof typeof allThemes]: typeof baseThemes['light']
-} = allThemes as any
+export const themes: TypedThemes = allThemes as any

package/src/tokens.tsx

@@ -2,9 +2,7 @@ import {
   blue,
   blueDark,
   gray,
-  grayA,
   grayDark,
-  grayDarkA,
   green,
   greenDark,
   orange,
@@ -15,10 +13,6 @@ import {
   purpleDark,
   red,
   redDark,
-  teal,
-  tealDark,
-  violet,
-  violetDark,
   yellow,
   yellowDark,
 } from '@tamagui/colors'
@@ -103,57 +97,45 @@ const colorTokens = {
   light: {
     blue: blue,
     gray: gray,
-    grayA: grayA,
     green: green,
     orange: orange,
     pink: pink,
     purple: purple,
     red: red,
-    violet: violet,
     yellow: yellow,
-    teal: teal,
   },
   dark: {
     blue: blueDark,
     gray: grayDark,
-    grayA: grayDarkA,
     green: greenDark,
     orange: orangeDark,
     pink: pinkDark,
     purple: purpleDark,
     red: redDark,
-    violet: violetDark,
     yellow: yellowDark,
-    teal: tealDark,
   },
 }
 
 export 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,
 }
 
 export 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 = {