@tamagui/themes 1.121.10 → 1.121.12-1737177163952

package/src/v4-tamagui.ts

@@ -0,0 +1,241 @@
+import {
+  blue,
+  blueDark,
+  gray,
+  grayDark,
+  green,
+  greenDark,
+  orange,
+  orangeDark,
+  pink,
+  pinkDark,
+  purple,
+  purpleDark,
+  red,
+  redDark,
+  yellow,
+  yellowDark,
+} from '@tamagui/colors'
+import { createThemeSuite } from './v4-createTheme'
+
+const colorTokens = {
+  light: {
+    blue,
+    gray,
+    green,
+    orange,
+    pink,
+    purple,
+    red,
+    yellow,
+  },
+  dark: {
+    blue: blueDark,
+    gray: grayDark,
+    green: greenDark,
+    orange: orangeDark,
+    pink: pinkDark,
+    purple: purpleDark,
+    red: redDark,
+    yellow: yellowDark,
+  },
+}
+
+const darkPalette = [
+  '#050505',
+  '#151515',
+  '#191919',
+  '#232323',
+  '#282828',
+  '#323232',
+  '#424242',
+  '#494949',
+  '#545454',
+  '#626262',
+  '#a5a5a5',
+  '#fff',
+]
+
+const lightPalette = [
+  '#fff',
+  '#f8f8f8',
+  'hsl(0, 0%, 96.3%)',
+  'hsl(0, 0%, 94.1%)',
+  'hsl(0, 0%, 92.0%)',
+  'hsl(0, 0%, 90.0%)',
+  'hsl(0, 0%, 88.5%)',
+  'hsl(0, 0%, 81.0%)',
+  'hsl(0, 0%, 56.1%)',
+  'hsl(0, 0%, 50.3%)',
+  'hsl(0, 0%, 42.5%)',
+  'hsl(0, 0%, 9.0%)',
+]
+
+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)',
+}
+
+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.7)',
+}
+
+/**
+ * Default themes for the tamagui.dev site
+ * If you'd like to create your own themes, use `createThemeSuite`
+ */
+export const tamaguiThemes = createThemeSuite({
+  base: {
+    palette: {
+      dark: darkPalette,
+      light: lightPalette,
+    },
+
+    // we set a bunch of colors like $red1 => $red1
+    // we only want to set it on the base light/dark theme
+    extra: {
+      light: {
+        ...colorTokens.light.blue,
+        ...colorTokens.light.gray,
+        ...colorTokens.light.green,
+        ...colorTokens.light.orange,
+        ...colorTokens.light.pink,
+        ...colorTokens.light.purple,
+        ...colorTokens.light.red,
+        ...colorTokens.light.yellow,
+        ...lightShadows,
+        shadowColor: lightShadows.shadow1,
+      },
+      dark: {
+        ...colorTokens.dark.blue,
+        ...colorTokens.dark.gray,
+        ...colorTokens.dark.green,
+        ...colorTokens.dark.orange,
+        ...colorTokens.dark.pink,
+        ...colorTokens.dark.purple,
+        ...colorTokens.dark.red,
+        ...colorTokens.dark.yellow,
+        ...darkShadows,
+        shadowColor: darkShadows.shadow1,
+      },
+    },
+  },
+
+  accent: {
+    palette: {
+      dark: lightPalette,
+      light: darkPalette,
+    },
+    template: 'inverse',
+  },
+
+  childrenThemes: {
+    gray: {
+      palette: {
+        dark: Object.values(colorTokens.dark.gray),
+        light: Object.values(colorTokens.light.gray),
+      },
+    },
+    blue: {
+      palette: {
+        dark: Object.values(colorTokens.dark.blue),
+        light: Object.values(colorTokens.light.blue),
+      },
+    },
+    orange: {
+      palette: {
+        dark: Object.values(colorTokens.dark.orange),
+        light: Object.values(colorTokens.light.orange),
+      },
+    },
+    red: {
+      palette: {
+        dark: Object.values(colorTokens.dark.red),
+        light: Object.values(colorTokens.light.red),
+      },
+    },
+    yellow: {
+      palette: {
+        dark: Object.values(colorTokens.dark.yellow),
+        light: Object.values(colorTokens.light.yellow),
+      },
+    },
+    green: {
+      palette: {
+        dark: Object.values(colorTokens.dark.green),
+        light: Object.values(colorTokens.light.green),
+      },
+    },
+    purple: {
+      palette: {
+        dark: Object.values(colorTokens.dark.purple),
+        light: Object.values(colorTokens.light.purple),
+      },
+    },
+    pink: {
+      palette: {
+        dark: Object.values(colorTokens.dark.pink),
+        light: Object.values(colorTokens.light.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)',
+        ],
+      },
+    },
+  },
+
+  grandChildrenThemes: {
+    alt1: {
+      template: 'alt1',
+    },
+    alt2: {
+      template: 'alt2',
+    },
+    surface1: {
+      template: 'surface1',
+    },
+    surface2: {
+      template: 'surface2',
+    },
+    surface3: {
+      template: 'surface3',
+    },
+  },
+})

package/src/v4.tsx

@@ -0,0 +1,4 @@
+export * from './v4-createTheme'
+export { tokens } from './v3-themes'
+
+export * as tamaguiThemes from './v4-tamagui-out'

package/tsconfig.json

@@ -4,7 +4,6 @@
     "composite": true
   },
   "exclude": [
-    "generate.ts",
     "types",
     "v2.d.ts",
     "v2.js",
@@ -14,6 +13,8 @@
     "v3.js",
     "v3-themes.js",
     "v3-themes.d.ts",
+    "v4.d.ts",
+    "v4.js",
     "dist",
     "**/__tests__"
   ],

package/types/getThemeSuitePalettes.d.ts

@@ -0,0 +1,7 @@
+import type { BuildPalette } from './types';
+export declare const PALETTE_BACKGROUND_OFFSET = 4;
+export declare function getThemeSuitePalettes(palette: BuildPalette): {
+    light: string[];
+    dark: string[];
+};
+//# sourceMappingURL=getThemeSuitePalettes.d.ts.map

package/types/types.d.ts

@@ -0,0 +1,72 @@
+import type { Template, ThemeDefinitions } from '@tamagui/create-theme';
+type ThemeSuiteItem = {
+    id: string;
+    name: string;
+    createdAt: number;
+    updatedAt: number;
+    schemes: {
+        light: boolean;
+        dark: boolean;
+    };
+    palettes: Record<string, BuildPalette>;
+    templates: BuildTemplates;
+    baseTheme: BuildTheme;
+    subThemes: BuildSubTheme[];
+    componentThemes: ThemeDefinitions;
+};
+export type ThemeSuiteItemData = Omit<ThemeSuiteItem, 'id' | 'createdAt' | 'updatedAt'>;
+export type BuildTemplates = Record<string, Template>;
+export type BuildSubTheme = BuildTheme;
+export type BuildPalettes = Record<string, BuildPalette>;
+export type BuildPalette = {
+    name: string;
+    scale?: ScaleTypeName;
+    anchors: BuildThemeAnchor[];
+};
+export type BuildThemeSuiteProps = Omit<ThemeSuiteItemData, 'name'>;
+export type BuildThemeSuitePalettes = {
+    light: string[];
+    dark: string[];
+    lightAccent?: string[];
+    darkAccent?: string[];
+};
+export type ScaleTypeName = 'custom' | 'radix' | 'radix-b' | 'radius-bold' | 'radius-bright' | 'linear' | 'pastel' | 'pastel-desaturating' | 'neon' | 'neon-bright' | 'neon-c';
+export type BuildThemeBase = {
+    id: string;
+    name: string;
+    errors?: string[];
+};
+export type BuildThemeAnchor = {
+    index: number;
+    hue: {
+        light: number;
+        dark: number;
+        sync?: boolean;
+        syncLeft?: boolean;
+    };
+    sat: {
+        light: number;
+        dark: number;
+        sync?: boolean;
+        syncLeft?: boolean;
+    };
+    lum: {
+        light: number;
+        dark: number;
+    };
+};
+export type BuildPaletteAnchors = BuildThemeAnchor[];
+export type BuildTheme = BuildThemeBase & {
+    type: 'theme';
+    template: string;
+    palette: string;
+    accent?: BuildTheme;
+};
+export type ThemeStepProps = {
+    theme: BuildTheme;
+    isAccent?: boolean;
+    vertical?: boolean;
+    onUpdate: (val: Partial<BuildTheme>) => void;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/types/utils.d.ts

@@ -0,0 +1,21 @@
+export declare function postfixObjKeys<A extends {
+    [key: string]: string;
+}, B extends string>(obj: A, postfix: B): {
+    [Key in `${keyof A extends string ? keyof A : never}${B}`]: string;
+};
+export declare function sizeToSpace(v: number): number;
+export declare function objectFromEntries<ARR_T extends EntriesType>(arr: ARR_T): EntriesToObject<ARR_T>;
+export type EntriesType = [PropertyKey, unknown][] | ReadonlyArray<readonly [PropertyKey, unknown]>;
+export type DeepWritable<OBJ_T> = {
+    -readonly [P in keyof OBJ_T]: DeepWritable<OBJ_T[P]>;
+};
+export type UnionToIntersection<UNION_T> = (UNION_T extends any ? (k: UNION_T) => void : never) extends (k: infer I) => void ? I : never;
+export type UnionObjectFromArrayOfPairs<ARR_T extends EntriesType> = DeepWritable<ARR_T> extends (infer R)[] ? R extends [infer key, infer val] ? {
+    [prop in key & PropertyKey]: val;
+} : never : never;
+export type MergeIntersectingObjects<ObjT> = {
+    [key in keyof ObjT]: ObjT[key];
+};
+export type EntriesToObject<ARR_T extends EntriesType> = MergeIntersectingObjects<UnionToIntersection<UnionObjectFromArrayOfPairs<ARR_T>>>;
+export declare function objectKeys<O extends Object>(obj: O): Array<keyof O>;
+//# sourceMappingURL=utils.d.ts.map

package/types/v3-themes.d.ts

@@ -16366,25 +16366,5 @@ export declare const tokens: {
         $20: import("@tamagui/web").Variable<number>;
     };
 }, "color" | "space" | "size" | "radius" | "zIndex">;
-export declare function postfixObjKeys<A extends {
-    [key: string]: string;
-}, B extends string>(obj: A, postfix: B): {
-    [Key in `${keyof A extends string ? keyof A : never}${B}`]: string;
-};
-export declare function sizeToSpace(v: number): number;
-export declare function objectFromEntries<ARR_T extends EntriesType>(arr: ARR_T): EntriesToObject<ARR_T>;
-export type EntriesType = [PropertyKey, unknown][] | ReadonlyArray<readonly [PropertyKey, unknown]>;
-export type DeepWritable<OBJ_T> = {
-    -readonly [P in keyof OBJ_T]: DeepWritable<OBJ_T[P]>;
-};
-export type UnionToIntersection<UNION_T> = (UNION_T extends any ? (k: UNION_T) => void : never) extends (k: infer I) => void ? I : never;
-export type UnionObjectFromArrayOfPairs<ARR_T extends EntriesType> = DeepWritable<ARR_T> extends (infer R)[] ? R extends [infer key, infer val] ? {
-    [prop in key & PropertyKey]: val;
-} : never : never;
-export type MergeIntersectingObjects<ObjT> = {
-    [key in keyof ObjT]: ObjT[key];
-};
-export type EntriesToObject<ARR_T extends EntriesType> = MergeIntersectingObjects<UnionToIntersection<UnionObjectFromArrayOfPairs<ARR_T>>>;
-export declare function objectKeys<O extends Object>(obj: O): Array<keyof O>;
 export {};
 //# sourceMappingURL=v3-themes.d.ts.map

package/types/v4-createTheme.d.ts

@@ -0,0 +1,157 @@
+import { type ThemeBuilder } from '@tamagui/theme-builder';
+import type { BuildPalettes, BuildTemplates, BuildThemeSuiteProps } from './types';
+import { defaultTemplates } from './v4-defaultTemplates';
+export { getThemeSuitePalettes, PALETTE_BACKGROUND_OFFSET } from './getThemeSuitePalettes';
+export type * from './types';
+export { defaultTemplates } from './v4-defaultTemplates';
+/**
+ * TODO
+ *
+ *  - we avoidNestingWithin accent, but sometimes want it eg v4-tamagui grandChildren
+ *    a good default would be to IF palette is set, dont nest, IF only template, nest
+ *    needs to update both runtime logic and types
+ */
+type ExtraThemeValues = Record<string, string>;
+type ExtraThemeValuesByScheme<Values extends ExtraThemeValues = ExtraThemeValues> = {
+    dark: Values;
+    light: Values;
+};
+type SimpleThemeDefinition = {
+    palette?: Palette;
+    template?: string;
+};
+type BaseThemeDefinition<Extra extends ExtraThemeValuesByScheme> = {
+    palette: Palette;
+    template?: string;
+    extra?: Extra;
+};
+type SimpleThemesDefinition = Record<string, SimpleThemeDefinition>;
+type SimplePaletteDefinitions = Record<string, string[]>;
+type SinglePalette = string[];
+type SchemePalette = {
+    light: SinglePalette;
+    dark: SinglePalette;
+};
+type Palette = SinglePalette | SchemePalette;
+export type CreateThemesProps<Accent extends BaseThemeDefinition<Extra> | undefined = undefined, GrandChildrenThemes extends SimpleThemesDefinition | undefined = undefined, Extra extends ExtraThemeValuesByScheme = ExtraThemeValuesByScheme, ChildrenThemes extends SimpleThemesDefinition = SimpleThemesDefinition, ComponentThemes extends SimpleThemesDefinition = SimpleThemesDefinition, Templates extends BuildTemplates = typeof defaultTemplates> = {
+    base: BaseThemeDefinition<Extra>;
+    accent?: Accent;
+    childrenThemes?: ChildrenThemes;
+    grandChildrenThemes?: GrandChildrenThemes;
+    templates?: Templates;
+    componentThemes?: ComponentThemes;
+    colorsToTheme?: (props: {
+        colors: string[];
+        name: string;
+        scheme?: 'light' | 'dark';
+    }) => Record<string, string>;
+};
+export declare function createThemeSuite<Extra extends ExtraThemeValuesByScheme, SubThemes extends SimpleThemesDefinition, ComponentThemes extends SimpleThemesDefinition, GrandChildrenThemes extends SimpleThemesDefinition | undefined = undefined, Accent extends BaseThemeDefinition<Extra> | undefined = undefined>(props: CreateThemesProps<Accent, GrandChildrenThemes, Extra, SubThemes, ComponentThemes>): { [Key in "light" | "dark" | ((Accent extends undefined ? false : true) extends infer T ? T extends (Accent extends undefined ? false : true) ? T extends true ? "light_accent" | "dark_accent" : never : never : never) | (keyof SubThemes extends string ? `light_${(GrandChildrenThemes extends undefined ? undefined : Record<keyof GrandChildrenThemes, any>) extends infer T_1 ? T_1 extends (GrandChildrenThemes extends undefined ? undefined : Record<keyof GrandChildrenThemes, any>) ? T_1 extends undefined ? string & keyof SubThemes : NamesWithChildrenNames<string & keyof SubThemes, keyof T_1> : never : never}` | `dark_${(GrandChildrenThemes extends undefined ? undefined : Record<keyof GrandChildrenThemes, any>) extends infer T_2 ? T_2 extends (GrandChildrenThemes extends undefined ? undefined : Record<keyof GrandChildrenThemes, any>) ? T_2 extends undefined ? string & keyof SubThemes : NamesWithChildrenNames<string & keyof SubThemes, keyof T_2> : never : never}` : never)]: { [ThemeKey in "borderColor" | "borderColorHover" | "borderColorPress" | "borderColorFocus" | "color" | "shadowColor" | "shadowColorHover" | "shadowColorPress" | "shadowColorFocus" | "colorHover" | "colorFocus" | "colorPress" | "color1" | "color2" | "color3" | "color4" | "color5" | "color6" | "color7" | "color8" | "color9" | "color10" | "color11" | "color12" | "background" | "backgroundHover" | "backgroundPress" | "backgroundFocus" | "colorTransparent" | "placeholderColor" | "outlineColor" | "accentBackground" | "accentColor" | "background0" | "background025" | "background05" | "background075" | "color0" | "color025" | "color05" | "color075" | keyof Extra["dark"]]: string; }; };
+type NamesWithChildrenNames<ParentNames extends string, ChildNames> = ParentNames | (ChildNames extends string ? `${ParentNames}_${ChildNames}` : never);
+export declare function createSimpleThemeBuilder<Extra extends ExtraThemeValuesByScheme, Templates extends BuildTemplates, Palettes extends SimplePaletteDefinitions, ChildrenThemes extends Record<string, {
+    template: keyof Templates extends string ? keyof Templates : never;
+    palette?: string;
+}>, GrandChildrenThemes extends undefined | Record<string, {
+    template: keyof Templates extends string ? keyof Templates : never;
+    palette?: string;
+}>, HasAccent extends boolean, ComponentThemes extends SimpleThemesDefinition, FullTheme = {
+    [ThemeKey in keyof Templates['light_base'] | keyof Extra['dark']]: string;
+}>(props: {
+    palettes?: Palettes;
+    accentTheme?: HasAccent;
+    templates?: Templates;
+    childrenThemes?: ChildrenThemes;
+    grandChildrenThemes?: GrandChildrenThemes;
+    componentThemes?: ComponentThemes;
+    extra?: Extra;
+}): {
+    themeBuilder: ThemeBuilder<any>;
+    themes: {
+        [Key in 'light' | 'dark' | (HasAccent extends true ? 'light_accent' | 'dark_accent' : never) | (keyof ChildrenThemes extends string ? `${'light' | 'dark'}_${GrandChildrenThemes extends undefined ? keyof ChildrenThemes : NamesWithChildrenNames<keyof ChildrenThemes, keyof GrandChildrenThemes>}` : never)]: FullTheme;
+    };
+};
+export declare function createThemes(props: BuildThemeSuiteProps): {
+    themeBuilder: ThemeBuilder<any>;
+    themes: {
+        [x: `light_${string}`]: {
+            [x: string]: string;
+            [x: number]: string;
+        };
+        [x: `dark_${string}`]: {
+            [x: string]: string;
+            [x: number]: string;
+        };
+        light: {
+            [x: string]: string;
+            [x: number]: string;
+        };
+        dark: {
+            [x: string]: string;
+            [x: number]: string;
+        };
+    };
+};
+export declare const getComponentThemes: (components: SimpleThemesDefinition) => {
+    [k: string]: {
+        parent: string;
+        template: string;
+    };
+};
+export declare const defaultComponentThemes: {
+    ListItem: {
+        template: string;
+    };
+    SelectTrigger: {
+        template: string;
+    };
+    Card: {
+        template: string;
+    };
+    Button: {
+        template: string;
+    };
+    Checkbox: {
+        template: string;
+    };
+    Switch: {
+        template: string;
+    };
+    SwitchThumb: {
+        template: string;
+    };
+    TooltipContent: {
+        template: string;
+    };
+    Progress: {
+        template: string;
+    };
+    RadioGroupItem: {
+        template: string;
+    };
+    TooltipArrow: {
+        template: string;
+    };
+    SliderTrackActive: {
+        template: string;
+    };
+    SliderTrack: {
+        template: string;
+    };
+    SliderThumb: {
+        template: string;
+    };
+    Tooltip: {
+        template: string;
+    };
+    ProgressIndicator: {
+        template: string;
+    };
+    Input: {
+        template: string;
+    };
+    TextArea: {
+        template: string;
+    };
+};
+export declare function createPalettes(palettes: BuildPalettes): SimplePaletteDefinitions;
+//# sourceMappingURL=v4-createTheme.d.ts.map