@tamagui/tamagui-dev-config 2.7.7 → 3.0.0-beta.643.1

package/src/theme.dev.ts

@@ -1,583 +0,0 @@
-// ONLY USED BY KITCHEN SINK FOR TESTS
-
-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: {
-    accent: {
-      template: 'inverse',
-    },
-    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)