@tamagui/tamagui-dev-config 1.125.26 → 1.125.27

package/src/theme.dev.ts

@@ -0,0 +1,578 @@
+import * as Colors from '@tamagui/colors'
+import { createThemes, defaultComponentThemes } from '@tamagui/theme-builder'
+import { desaturate } from 'color2k'
+
+const desat = (colors: Record<string, string>, amount: number) => {
+  return Object.fromEntries(
+    Object.entries(colors).map(([key, value]) => [key, desaturate(value, amount)])
+  )
+}
+
+const colorsGreenDark = desat(Colors.greenDark, 0.2) as typeof Colors.greenDark
+const colorsGreen = desat(Colors.green, 0.2) as typeof Colors.green
+
+// with color2k:
+
+/**
+ * Default themes for the tamagui.dev site
+ * If you'd like to create your own themes, use `createThemes`
+ */
+
+const darkPalette = [
+  '#040404',
+  '#090909',
+  '#111',
+  '#151515',
+  '#222',
+  '#282828',
+  '#343434',
+  '#424242',
+  '#515151',
+  '#626262',
+  '#a5a5a5',
+  '#fff',
+]
+
+const lightPalette = [
+  '#fff',
+  '#f2f2f2',
+  'hsl(0, 0%, 93%)',
+  'hsl(0, 0%, 91%)',
+  'hsl(0, 0%, 88%)',
+  'hsl(0, 0%, 85%)',
+  'hsl(0, 0%, 82%)',
+  'hsl(0, 0%, 76%)',
+  'hsl(0, 0%, 56%)',
+  'hsl(0, 0%, 50%)',
+  'hsl(0, 0%, 42%)',
+  'hsl(0, 0%, 9%)',
+]
+
+const lightShadows = {
+  shadow1: 'rgba(0,0,0,0.04)',
+  shadow2: 'rgba(0,0,0,0.08)',
+  shadow3: 'rgba(0,0,0,0.16)',
+  shadow4: 'rgba(0,0,0,0.24)',
+  shadow5: 'rgba(0,0,0,0.32)',
+  shadow6: 'rgba(0,0,0,0.4)',
+  shadow7: 'rgba(0,0,0,0.5)',
+  shadow8: 'rgba(0,0,0,0.6)',
+  shadow9: 'rgba(0,0,0,0.7)',
+  shadow10: 'rgba(0,0,0,0.8)',
+}
+
+const darkShadows = {
+  shadow1: 'rgba(0,0,0,0.2)',
+  shadow2: 'rgba(0,0,0,0.3)',
+  shadow3: 'rgba(0,0,0,0.4)',
+  shadow4: 'rgba(0,0,0,0.5)',
+  shadow5: 'rgba(0,0,0,0.6)',
+  shadow6: 'rgba(0,0,0,0.65)',
+  shadow7: 'rgba(0,0,0,0.75)',
+  shadow8: 'rgba(0,0,0,0.8)',
+  shadow9: 'rgba(0,0,0,0.85)',
+  shadow10: 'rgba(0,0,0,0.9)',
+}
+
+const blackColors = {
+  black1: darkPalette[0],
+  black2: darkPalette[1],
+  black3: darkPalette[2],
+  black4: darkPalette[3],
+  black5: darkPalette[4],
+  black6: darkPalette[5],
+  black7: darkPalette[6],
+  black8: darkPalette[7],
+  black9: darkPalette[8],
+  black10: darkPalette[9],
+  black11: darkPalette[10],
+  black12: darkPalette[11],
+}
+
+const whiteColors = {
+  white1: lightPalette[0],
+  white2: lightPalette[1],
+  white3: lightPalette[2],
+  white4: lightPalette[3],
+  white5: lightPalette[4],
+  white6: lightPalette[5],
+  white7: lightPalette[6],
+  white8: lightPalette[7],
+  white9: lightPalette[8],
+  white10: lightPalette[9],
+  white11: lightPalette[10],
+  white12: lightPalette[11],
+}
+
+const jadeDark = [
+  'hsla(165, 100%, 4%, 1)',
+  'hsla(165, 100%, 8%, 1)',
+  'hsla(165, 100%, 12%, 1)',
+  'hsla(165, 100%, 18%, 1)',
+  'hsla(165, 100%, 25%, 1)',
+  'hsla(165, 100%, 35%, 1)',
+  'hsla(165, 100%, 45%, 1)',
+  'hsla(165, 100%, 55%, 1)',
+  'hsla(165, 100%, 65%, 1)',
+  'hsla(165, 100%, 75%, 1)',
+  'hsla(165, 100%, 85%, 1)',
+  'hsla(165, 100%, 90%, 1)',
+]
+
+const jadeLight = [
+  'hsla(165, 100%, 90%, 1)',
+  'hsla(165, 100%, 85%, 1)',
+  'hsla(165, 100%, 75%, 1)',
+  'hsla(165, 100%, 65%, 1)',
+  'hsla(165, 100%, 55%, 1)',
+  'hsla(165, 100%, 45%, 1)',
+  'hsla(165, 100%, 35%, 1)',
+  'hsla(165, 100%, 25%, 1)',
+  'hsla(165, 100%, 18%, 1)',
+  'hsla(165, 100%, 12%, 1)',
+  'hsla(165, 100%, 8%, 1)',
+  'hsla(165, 100%, 4%, 1)',
+]
+
+const supremeDark = [
+  'hsla(358, 100%, 35%, 1)',
+  'hsla(358, 100%, 38%, 1)',
+  'hsla(358, 100%, 40%, 1)',
+  'hsla(358, 100%, 43%, 1)',
+  'hsla(358, 100%, 45%, 1)',
+  'hsla(358, 100%, 48%, 1)',
+  'hsla(358, 100%, 50%, 1)',
+  'hsla(358, 100%, 53%, 1)',
+  'hsla(358, 100%, 55%, 1)',
+  'hsla(358, 100%, 65%, 1)',
+  'hsla(358, 100%, 75%, 1)',
+  'hsla(358, 100%, 95%, 1)',
+]
+const supremeLight = [
+  'hsla(358, 100%, 50%, 1)',
+  'hsla(358, 100%, 49%, 1)',
+  'hsla(358, 100%, 48%, 1)',
+  'hsla(358, 100%, 46%, 1)',
+  'hsla(358, 100%, 45%, 1)',
+  'hsla(358, 100%, 44%, 1)',
+  'hsla(358, 100%, 43%, 1)',
+  'hsla(358, 100%, 41%, 1)',
+  'hsla(358, 100%, 40%, 1)',
+  'hsla(358, 100%, 35%, 1)',
+  'hsla(358, 100%, 100%, 1)',
+  'hsla(358, 100%, 100%, 1)',
+]
+
+const orangeRedDark = [
+  'hsla(17, 100%, 5%, 1)',
+  'hsla(17, 100%, 10%, 1)',
+  'hsla(17, 100%, 15%, 1)',
+  'hsla(17, 100%, 20%, 1)',
+  'hsla(17, 100%, 25%, 1)',
+  'hsla(17, 100%, 38%, 1)',
+  'hsla(17, 100%, 45%, 1)',
+  'hsla(17, 100%, 50%, 1)',
+  'hsla(17, 100%, 55%, 1)',
+  'hsla(17, 100%, 60%, 1)',
+  'hsla(17, 100%, 65%, 1)',
+  'hsla(17, 100%, 70%, 1)',
+]
+
+const orangeRedLight = [
+  'hsla(17, 100%, 70%, 1)',
+  'hsla(17, 100%, 65%, 1)',
+  'hsla(17, 100%, 60%, 1)',
+  'hsla(17, 100%, 55%, 1)',
+  'hsla(17, 100%, 50%, 1)',
+  'hsla(17, 100%, 45%, 1)',
+  'hsla(17, 100%, 38%, 1)',
+  'hsla(17, 100%, 25%, 1)',
+  'hsla(17, 100%, 20%, 1)',
+  'hsla(17, 100%, 15%, 1)',
+  'hsla(17, 100%, 10%, 1)',
+  'hsla(17, 100%, 5%, 1)',
+]
+
+const royalBlueDark = [
+  'hsla(243, 90%, 5%, 1)',
+  'hsla(243, 90%, 10%, 1)',
+  'hsla(243, 90%, 15%, 1)',
+  'hsla(243, 90%, 20%, 1)',
+  'hsla(243, 90%, 25%, 1)',
+  'hsla(243, 70%, 41%, 1)',
+  'hsla(243, 90%, 45%, 1)',
+  'hsla(243, 90%, 50%, 1)',
+  'hsla(243, 90%, 55%, 1)',
+  'hsla(243, 90%, 60%, 1)',
+  'hsla(243, 90%, 65%, 1)',
+  'hsla(243, 90%, 70%, 1)',
+]
+
+const royalBlueLight = [
+  'hsla(243, 90%, 70%, 1)',
+  'hsla(243, 90%, 65%, 1)',
+  'hsla(243, 90%, 60%, 1)',
+  'hsla(243, 90%, 55%, 1)',
+  'hsla(243, 90%, 50%, 1)',
+  'hsla(243, 90%, 45%, 1)',
+  'hsla(243, 70%, 41%, 1)',
+  'hsla(243, 90%, 25%, 1)',
+  'hsla(243, 90%, 20%, 1)',
+  'hsla(243, 90%, 15%, 1)',
+  'hsla(243, 90%, 10%, 1)',
+  'hsla(243, 90%, 5%, 1)',
+]
+
+const burgundyDark = [
+  'hsla(334, 60%, 5%, 1)',
+  'hsla(334, 60%, 10%, 1)',
+  'hsla(334, 60%, 15%, 1)',
+  'hsla(334, 60%, 20%, 1)',
+  'hsla(334, 60%, 25%, 1)',
+  'hsla(334, 60%, 27%, 1)',
+  'hsla(334, 60%, 35%, 1)',
+  'hsla(334, 60%, 40%, 1)',
+  'hsla(334, 60%, 45%, 1)',
+  'hsla(334, 60%, 50%, 1)',
+  'hsla(334, 60%, 55%, 1)',
+  'hsla(334, 60%, 60%, 1)',
+]
+
+const burgundyLight = [
+  'hsla(334, 60%, 60%, 1)',
+  'hsla(334, 60%, 55%, 1)',
+  'hsla(334, 60%, 50%, 1)',
+  'hsla(334, 60%, 45%, 1)',
+  'hsla(334, 60%, 40%, 1)',
+  'hsla(334, 60%, 35%, 1)',
+  'hsla(334, 60%, 27%, 1)',
+  'hsla(334, 60%, 25%, 1)',
+  'hsla(334, 60%, 20%, 1)',
+  'hsla(334, 60%, 15%, 1)',
+  'hsla(334, 60%, 10%, 1)',
+  'hsla(334, 60%, 5%, 1)',
+]
+
+const tealDark = [
+  'hsla(187, 94%, 5%, 1)',
+  'hsla(187, 94%, 10%, 1)',
+  'hsla(187, 94%, 15%, 1)',
+  'hsla(187, 94%, 20%, 1)',
+  'hsla(187, 94%, 25%, 1)',
+  'hsla(187, 94%, 32%, 1)',
+  'hsla(187, 94%, 38%, 1)',
+  'hsla(187, 94%, 43%, 1)',
+  'hsla(187, 94%, 48%, 1)',
+  'hsla(187, 94%, 53%, 1)',
+  'hsla(187, 94%, 58%, 1)',
+  'hsla(187, 94%, 63%, 1)',
+]
+
+const tealLight = [
+  'hsla(187, 94%, 63%, 1)',
+  'hsla(187, 94%, 58%, 1)',
+  'hsla(187, 94%, 53%, 1)',
+  'hsla(187, 94%, 48%, 1)',
+  'hsla(187, 94%, 43%, 1)',
+  'hsla(187, 94%, 38%, 1)',
+  'hsla(187, 94%, 32%, 1)',
+  'hsla(187, 94%, 25%, 1)',
+  'hsla(187, 94%, 20%, 1)',
+  'hsla(187, 94%, 15%, 1)',
+  'hsla(187, 94%, 10%, 1)',
+  'hsla(187, 94%, 5%, 1)',
+]
+
+const forestDark = [
+  'hsla(162, 64%, 5%, 1)',
+  'hsla(162, 64%, 10%, 1)',
+  'hsla(162, 64%, 15%, 1)',
+  'hsla(162, 64%, 20%, 1)',
+  'hsla(162, 64%, 25%, 1)',
+  'hsla(162, 64%, 30%, 1)',
+  'hsla(162, 64%, 35%, 1)',
+  'hsla(162, 64%, 40%, 1)',
+  'hsla(162, 64%, 45%, 1)',
+  'hsla(162, 64%, 50%, 1)',
+  'hsla(162, 64%, 55%, 1)',
+  'hsla(162, 64%, 60%, 1)',
+]
+
+const forestLight = [
+  'hsla(162, 64%, 60%, 1)',
+  'hsla(162, 64%, 55%, 1)',
+  'hsla(162, 64%, 50%, 1)',
+  'hsla(162, 64%, 45%, 1)',
+  'hsla(162, 64%, 40%, 1)',
+  'hsla(162, 64%, 35%, 1)',
+  'hsla(162, 64%, 30%, 1)',
+  'hsla(162, 64%, 25%, 1)',
+  'hsla(162, 64%, 20%, 1)',
+  'hsla(162, 64%, 15%, 1)',
+  'hsla(162, 64%, 10%, 1)',
+  'hsla(162, 64%, 5%, 1)',
+]
+
+const cyanDark = [
+  'hsla(186, 32%, 5%, 1)',
+  'hsla(186, 32%, 10%, 1)',
+  'hsla(186, 32%, 15%, 1)',
+  'hsla(186, 32%, 20%, 1)',
+  'hsla(186, 32%, 25%, 1)',
+  'hsla(186, 32%, 46%, 1)',
+  'hsla(186, 32%, 50%, 1)',
+  'hsla(186, 32%, 55%, 1)',
+  'hsla(186, 32%, 60%, 1)',
+  'hsla(186, 32%, 65%, 1)',
+  'hsla(186, 32%, 70%, 1)',
+  'hsla(186, 32%, 75%, 1)',
+]
+
+const cyanLight = [
+  'hsla(186, 32%, 75%, 1)',
+  'hsla(186, 32%, 70%, 1)',
+  'hsla(186, 32%, 65%, 1)',
+  'hsla(186, 32%, 60%, 1)',
+  'hsla(186, 32%, 55%, 1)',
+  'hsla(186, 32%, 50%, 1)',
+  'hsla(186, 32%, 46%, 1)',
+  'hsla(186, 32%, 25%, 1)',
+  'hsla(186, 32%, 20%, 1)',
+  'hsla(186, 32%, 15%, 1)',
+  'hsla(186, 32%, 10%, 1)',
+  'hsla(186, 32%, 5%, 1)',
+]
+
+const themes = createThemes({
+  componentThemes: defaultComponentThemes,
+
+  base: {
+    palette: {
+      dark: darkPalette,
+      light: lightPalette,
+    },
+
+    // for values we don't want being inherited onto sub-themes
+    extra: {
+      light: {
+        ...Colors.blue,
+        ...Colors.gray,
+        ...colorsGreen,
+        ...Colors.orange,
+        ...Colors.pink,
+        ...Colors.purple,
+        ...Colors.red,
+        ...Colors.yellow,
+        ...lightShadows,
+        ...blackColors,
+        ...whiteColors,
+        shadowColor: lightShadows.shadow1,
+        colorBg: '#fff',
+      },
+      dark: {
+        ...Colors.blueDark,
+        ...Colors.grayDark,
+        ...colorsGreenDark,
+        ...Colors.orangeDark,
+        ...Colors.pinkDark,
+        ...Colors.purpleDark,
+        ...Colors.redDark,
+        ...Colors.yellowDark,
+        ...darkShadows,
+        ...blackColors,
+        ...whiteColors,
+        shadowColor: darkShadows.shadow1,
+        colorBg: '#000',
+      },
+    },
+  },
+
+  // inverse accent theme
+  accent: {
+    palette: {
+      dark: lightPalette,
+      light: darkPalette,
+    },
+  },
+
+  childrenThemes: {
+    black: {
+      palette: {
+        dark: Object.values(blackColors),
+        light: Object.values(blackColors),
+      },
+    },
+    white: {
+      palette: {
+        dark: Object.values(whiteColors),
+        light: Object.values(whiteColors),
+      },
+    },
+    gray: {
+      palette: {
+        dark: Object.values(Colors.grayDark),
+        light: Object.values(Colors.gray),
+      },
+    },
+    blue: {
+      palette: {
+        dark: Object.values(Colors.blueDark),
+        light: Object.values(Colors.blue),
+      },
+    },
+    orange: {
+      palette: {
+        dark: Object.values(Colors.orangeDark),
+        light: Object.values(Colors.orange),
+      },
+    },
+    red: {
+      palette: {
+        dark: Object.values(Colors.redDark),
+        light: Object.values(Colors.red),
+      },
+    },
+    yellow: {
+      palette: {
+        dark: Object.values(Colors.yellowDark),
+        light: Object.values(Colors.yellow),
+      },
+    },
+    green: {
+      palette: {
+        dark: Object.values(colorsGreenDark),
+        light: Object.values(colorsGreen),
+      },
+    },
+    purple: {
+      palette: {
+        dark: Object.values(Colors.purpleDark),
+        light: Object.values(Colors.purple),
+      },
+    },
+    pink: {
+      palette: {
+        dark: Object.values(Colors.pinkDark),
+        light: Object.values(Colors.pink),
+      },
+    },
+    tan: {
+      palette: {
+        light: [
+          'hsla(40, 30%, 98%, 1)',
+          'hsla(40, 24%, 94%, 1)',
+          'hsla(38, 23%, 91%, 1)',
+          'hsla(36, 20%, 90%, 1)',
+          'hsla(36, 20%, 88%, 1)',
+          'hsla(35, 20%, 85%, 1)',
+          'hsla(35, 21%, 74%, 1)',
+          'hsla(34, 20%, 70%, 1)',
+          'hsla(35, 20%, 67%, 1)',
+          'hsla(34, 19%, 47%, 1)',
+          'hsla(35, 18%, 37%, 1)',
+          'hsla(35, 17%, 20%, 1)',
+        ],
+        dark: [
+          'hsla(30, 9%, 10%, 1)',
+          'hsla(30, 10%, 12%, 1)',
+          'hsla(31, 11%, 18%, 1)',
+          'hsla(30, 12%, 23%, 1)',
+          'hsla(30, 14%, 28%, 1)',
+          'hsla(30, 16%, 33%, 1)',
+          'hsla(30, 18%, 38%, 1)',
+          'hsla(30, 20%, 45%, 1)',
+          'hsla(30, 21%, 50%, 1)',
+          'hsla(29, 22%, 58%, 1)',
+          'hsla(34, 24%, 70%, 1)',
+          'hsla(11, 12%, 79%, 1)',
+        ],
+      },
+    },
+
+    jade: {
+      palette: {
+        dark: jadeDark,
+        light: jadeLight,
+      },
+    },
+
+    supreme: {
+      palette: {
+        dark: supremeDark,
+        light: supremeLight,
+      },
+    },
+
+    orangeRed: {
+      palette: {
+        dark: orangeRedDark,
+        light: orangeRedLight,
+      },
+    },
+
+    royalBlue: {
+      palette: {
+        dark: royalBlueDark,
+        light: royalBlueLight,
+      },
+    },
+
+    burgundy: {
+      palette: {
+        dark: burgundyDark,
+        light: burgundyLight,
+      },
+    },
+
+    teal: {
+      palette: {
+        dark: tealDark,
+        light: tealLight,
+      },
+    },
+
+    forest: {
+      palette: {
+        dark: forestDark,
+        light: forestLight,
+      },
+    },
+
+    cyan: {
+      palette: {
+        dark: cyanDark,
+        light: cyanLight,
+      },
+    },
+  },
+
+  grandChildrenThemes: {
+    alt1: {
+      template: 'alt1',
+    },
+    alt2: {
+      template: 'alt2',
+    },
+    surface1: {
+      template: 'surface1',
+    },
+    surface2: {
+      template: 'surface2',
+    },
+    surface3: {
+      template: 'surface3',
+    },
+  },
+})
+
+export type TamaguiThemes = typeof themes
+
+/**
+ * This is an optional production optimization: themes JS can get to 20Kb or more.
+ * Tamagui has <1Kb of logic to hydrate themes from CSS, so you can remove the JS.
+ * So long as you server render your Tamagui CSS, this will save you bundle size:
+ */
+export const themeDev: TamaguiThemes =
+  process.env.TAMAGUI_ENVIRONMENT === 'client' && process.env.NODE_ENV === 'production'
+    ? ({} as any)
+    : (themes as any)