@hanzogui/themes 2.0.0

package/types/v3-tokens.d.ts

@@ -0,0 +1,184 @@
+export declare const size: {
+    $0: number;
+    '$0.25': number;
+    '$0.5': number;
+    '$0.75': number;
+    $1: number;
+    '$1.5': number;
+    $2: number;
+    '$2.5': number;
+    $3: number;
+    '$3.5': number;
+    $4: number;
+    $true: number;
+    '$4.5': number;
+    $5: number;
+    $6: number;
+    $7: number;
+    $8: number;
+    $9: number;
+    $10: number;
+    $11: number;
+    $12: number;
+    $13: number;
+    $14: number;
+    $15: number;
+    $16: number;
+    $17: number;
+    $18: number;
+    $19: number;
+    $20: number;
+};
+type SizeKeysIn = keyof typeof size;
+type Sizes = {
+    [Key in SizeKeysIn as Key extends `$${infer K}` ? K : Key]: number;
+};
+type SizeKeys = keyof Sizes;
+export declare const spaces: (readonly [string, number])[];
+export declare const spacesNegative: (string | number)[][];
+type SizeKeysWithNegatives = Exclude<`-${SizeKeys extends `$${infer Key}` ? Key : SizeKeys}`, '-0'> | SizeKeys;
+export declare const space: {
+    [Key in SizeKeysWithNegatives]: Key extends keyof Sizes ? Sizes[Key] : number;
+};
+export declare const zIndex: {
+    0: number;
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    5: number;
+};
+export declare const radius: {
+    0: number;
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    true: number;
+    5: number;
+    6: number;
+    7: number;
+    8: number;
+    9: number;
+    10: number;
+    11: number;
+    12: number;
+};
+export declare const tokens: {
+    readonly radius: {
+        0: number;
+        1: number;
+        2: number;
+        3: number;
+        4: number;
+        true: number;
+        5: number;
+        6: number;
+        7: number;
+        8: number;
+        9: number;
+        10: number;
+        11: number;
+        12: number;
+    };
+    readonly zIndex: {
+        0: number;
+        1: number;
+        2: number;
+        3: number;
+        4: number;
+        5: number;
+    };
+    readonly space: {
+        0: number;
+        0.25: number;
+        0.5: number;
+        0.75: number;
+        1: number;
+        1.5: number;
+        2: number;
+        2.5: number;
+        3: number;
+        3.5: number;
+        4: number;
+        true: number;
+        4.5: number;
+        5: number;
+        6: number;
+        7: number;
+        8: number;
+        9: number;
+        10: number;
+        11: number;
+        12: number;
+        13: number;
+        14: number;
+        15: number;
+        16: number;
+        17: number;
+        18: number;
+        19: number;
+        20: number;
+        [-0.25]: number;
+        [-0.5]: number;
+        [-0.75]: number;
+        [-1]: number;
+        [-1.5]: number;
+        [-2]: number;
+        [-2.5]: number;
+        [-3]: number;
+        [-3.5]: number;
+        [-4]: number;
+        "-true": number;
+        [-4.5]: number;
+        [-5]: number;
+        [-6]: number;
+        [-7]: number;
+        [-8]: number;
+        [-9]: number;
+        [-10]: number;
+        [-11]: number;
+        [-12]: number;
+        [-13]: number;
+        [-14]: number;
+        [-15]: number;
+        [-16]: number;
+        [-17]: number;
+        [-18]: number;
+        [-19]: number;
+        [-20]: number;
+    };
+    readonly size: {
+        $0: number;
+        '$0.25': number;
+        '$0.5': number;
+        '$0.75': number;
+        $1: number;
+        '$1.5': number;
+        $2: number;
+        '$2.5': number;
+        $3: number;
+        '$3.5': number;
+        $4: number;
+        $true: number;
+        '$4.5': number;
+        $5: number;
+        $6: number;
+        $7: number;
+        $8: number;
+        $9: number;
+        $10: number;
+        $11: number;
+        $12: number;
+        $13: number;
+        $14: number;
+        $15: number;
+        $16: number;
+        $17: number;
+        $18: number;
+        $19: number;
+        $20: number;
+    };
+};
+export {};
+//# sourceMappingURL=v3-tokens.d.ts.map

package/types/v3.d.ts

@@ -0,0 +1,11 @@
+export { themes } from './generated-v3';
+export { tokens } from './v3-themes';
+export { blue, blueDark } from '@hanzogui/colors/legacy';
+export { green, greenDark } from '@hanzogui/colors/legacy';
+export { red, redDark } from '@hanzogui/colors/legacy';
+export { orange, orangeDark } from '@hanzogui/colors/legacy';
+export { yellow, yellowDark } from '@hanzogui/colors/legacy';
+export { pink, pinkDark } from '@hanzogui/colors/legacy';
+export { purple, purpleDark } from '@hanzogui/colors/legacy';
+export { gray, grayDark } from '@hanzogui/colors/legacy';
+//# sourceMappingURL=v3.d.ts.map

package/types/v4-default.d.ts

@@ -0,0 +1,274 @@
+declare const generatedThemes: Record<"light_blue" | "light_green" | "light_red" | "light_yellow" | "dark_blue" | "dark_green" | "dark_red" | "dark_yellow" | "light" | "dark" | "light_accent" | "dark_accent" | "light_black" | "light_white" | "light_blue_accent" | "light_green_accent" | "light_red_accent" | "light_yellow_accent" | "light_black_accent" | "light_white_accent" | "dark_black" | "dark_white" | "dark_blue_accent" | "dark_green_accent" | "dark_red_accent" | "dark_yellow_accent" | "dark_black_accent" | "dark_white_accent", {
+    yellow1: string;
+    yellow2: string;
+    yellow3: string;
+    yellow4: string;
+    yellow5: string;
+    yellow6: string;
+    yellow7: string;
+    yellow8: string;
+    yellow9: string;
+    yellow10: string;
+    yellow11: string;
+    yellow12: string;
+    red1: string;
+    red2: string;
+    red3: string;
+    red4: string;
+    red5: string;
+    red6: string;
+    red7: string;
+    red8: string;
+    red9: string;
+    red10: string;
+    red11: string;
+    red12: string;
+    green1: string;
+    green2: string;
+    green3: string;
+    green4: string;
+    green5: string;
+    green6: string;
+    green7: string;
+    green8: string;
+    green9: string;
+    green10: string;
+    green11: string;
+    green12: string;
+    blue1: string;
+    blue2: string;
+    blue3: string;
+    blue4: string;
+    blue5: string;
+    blue6: string;
+    blue7: string;
+    blue8: string;
+    blue9: string;
+    blue10: string;
+    blue11: string;
+    blue12: string;
+    color: string;
+    shadowColor: string;
+    borderColor: string;
+    borderColorHover: string;
+    colorHover: string;
+    colorFocus: string;
+    colorPress: string;
+    color1: string;
+    color2: string;
+    color3: string;
+    color4: string;
+    color5: string;
+    color6: string;
+    color7: string;
+    color8: string;
+    color9: string;
+    color10: string;
+    color11: string;
+    color12: string;
+    background: string;
+    placeholderColor: string;
+    colorTransparent: string;
+    backgroundHover: string;
+    backgroundPress: string;
+    backgroundFocus: string;
+    borderColorFocus: string;
+    borderColorPress: string;
+    accentBackground: string;
+    accentColor: string;
+    background0: string;
+    background02: string;
+    background04: string;
+    background06: string;
+    background08: string;
+    color0: string;
+    color02: string;
+    color04: string;
+    color06: string;
+    color08: string;
+    black2: string;
+    black1: string;
+    black4: string;
+    black8: string;
+    black12: string;
+    black3: string;
+    black5: string;
+    black7: string;
+    black9: string;
+    black10: string;
+    black6: string;
+    black11: string;
+    white2: string;
+    white1: string;
+    white4: string;
+    white8: string;
+    white12: string;
+    white3: string;
+    white5: string;
+    white7: string;
+    white9: string;
+    white10: string;
+    white6: string;
+    white11: string;
+    shadow1: string;
+    shadow2: string;
+    shadow3: string;
+    shadow4: string;
+    shadow5: string;
+    shadow6: string;
+    outlineColor: string;
+    accent0: string;
+    accent2: string;
+    accent1: string;
+    accent4: string;
+    accent8: string;
+    accent12: string;
+    accent3: string;
+    accent5: string;
+    accent7: string;
+    accent9: string;
+    accent10: string;
+    accent6: string;
+    accent11: string;
+} & Record<string, string>>;
+export type GuiThemes = typeof generatedThemes;
+export declare const themes: Record<"light_blue" | "light_green" | "light_red" | "light_yellow" | "dark_blue" | "dark_green" | "dark_red" | "dark_yellow" | "light" | "dark" | "light_accent" | "dark_accent" | "light_black" | "light_white" | "light_blue_accent" | "light_green_accent" | "light_red_accent" | "light_yellow_accent" | "light_black_accent" | "light_white_accent" | "dark_black" | "dark_white" | "dark_blue_accent" | "dark_green_accent" | "dark_red_accent" | "dark_yellow_accent" | "dark_black_accent" | "dark_white_accent", {
+    yellow1: string;
+    yellow2: string;
+    yellow3: string;
+    yellow4: string;
+    yellow5: string;
+    yellow6: string;
+    yellow7: string;
+    yellow8: string;
+    yellow9: string;
+    yellow10: string;
+    yellow11: string;
+    yellow12: string;
+    red1: string;
+    red2: string;
+    red3: string;
+    red4: string;
+    red5: string;
+    red6: string;
+    red7: string;
+    red8: string;
+    red9: string;
+    red10: string;
+    red11: string;
+    red12: string;
+    green1: string;
+    green2: string;
+    green3: string;
+    green4: string;
+    green5: string;
+    green6: string;
+    green7: string;
+    green8: string;
+    green9: string;
+    green10: string;
+    green11: string;
+    green12: string;
+    blue1: string;
+    blue2: string;
+    blue3: string;
+    blue4: string;
+    blue5: string;
+    blue6: string;
+    blue7: string;
+    blue8: string;
+    blue9: string;
+    blue10: string;
+    blue11: string;
+    blue12: string;
+    color: string;
+    shadowColor: string;
+    borderColor: string;
+    borderColorHover: string;
+    colorHover: string;
+    colorFocus: string;
+    colorPress: string;
+    color1: string;
+    color2: string;
+    color3: string;
+    color4: string;
+    color5: string;
+    color6: string;
+    color7: string;
+    color8: string;
+    color9: string;
+    color10: string;
+    color11: string;
+    color12: string;
+    background: string;
+    placeholderColor: string;
+    colorTransparent: string;
+    backgroundHover: string;
+    backgroundPress: string;
+    backgroundFocus: string;
+    borderColorFocus: string;
+    borderColorPress: string;
+    accentBackground: string;
+    accentColor: string;
+    background0: string;
+    background02: string;
+    background04: string;
+    background06: string;
+    background08: string;
+    color0: string;
+    color02: string;
+    color04: string;
+    color06: string;
+    color08: string;
+    black2: string;
+    black1: string;
+    black4: string;
+    black8: string;
+    black12: string;
+    black3: string;
+    black5: string;
+    black7: string;
+    black9: string;
+    black10: string;
+    black6: string;
+    black11: string;
+    white2: string;
+    white1: string;
+    white4: string;
+    white8: string;
+    white12: string;
+    white3: string;
+    white5: string;
+    white7: string;
+    white9: string;
+    white10: string;
+    white6: string;
+    white11: string;
+    shadow1: string;
+    shadow2: string;
+    shadow3: string;
+    shadow4: string;
+    shadow5: string;
+    shadow6: string;
+    outlineColor: string;
+    accent0: string;
+    accent2: string;
+    accent1: string;
+    accent4: string;
+    accent8: string;
+    accent12: string;
+    accent3: string;
+    accent5: string;
+    accent7: string;
+    accent9: string;
+    accent10: string;
+    accent6: string;
+    accent11: string;
+} & Record<string, string>>;
+export {};
+/**
+ * This is an optional production optimization: themes JS can get to 20Kb or more.
+ * Hanzo GUI has ~1Kb of logic to hydrate themes from CSS, so you can remove the JS.
+ * So long as you server render your Hanzo GUI CSS, this will save you bundle size:
+ */
+//# sourceMappingURL=v4-default.d.ts.map

package/types/v4-gui.d.ts

@@ -0,0 +1,195 @@
+declare const themes: Record<"light_blue" | "light_gray" | "light_green" | "light_orange" | "light_pink" | "light_purple" | "light_red" | "light_yellow" | "dark_blue" | "dark_gray" | "dark_green" | "dark_orange" | "dark_pink" | "dark_purple" | "dark_red" | "dark_yellow" | "light" | "dark" | "light_accent" | "dark_accent" | "light_black" | "light_white" | "light_blue_surface1" | "light_gray_surface1" | "light_green_surface1" | "light_orange_surface1" | "light_pink_surface1" | "light_purple_surface1" | "light_red_surface1" | "light_yellow_surface1" | "light_black_surface1" | "light_white_surface1" | "light_blue_surface2" | "light_gray_surface2" | "light_green_surface2" | "light_orange_surface2" | "light_pink_surface2" | "light_purple_surface2" | "light_red_surface2" | "light_yellow_surface2" | "light_black_surface2" | "light_white_surface2" | "light_blue_accent" | "light_gray_accent" | "light_green_accent" | "light_orange_accent" | "light_pink_accent" | "light_purple_accent" | "light_red_accent" | "light_yellow_accent" | "light_black_accent" | "light_white_accent" | "dark_black" | "dark_white" | "dark_blue_surface1" | "dark_gray_surface1" | "dark_green_surface1" | "dark_orange_surface1" | "dark_pink_surface1" | "dark_purple_surface1" | "dark_red_surface1" | "dark_yellow_surface1" | "dark_black_surface1" | "dark_white_surface1" | "dark_blue_surface2" | "dark_gray_surface2" | "dark_green_surface2" | "dark_orange_surface2" | "dark_pink_surface2" | "dark_purple_surface2" | "dark_red_surface2" | "dark_yellow_surface2" | "dark_black_surface2" | "dark_white_surface2" | "dark_blue_accent" | "dark_gray_accent" | "dark_green_accent" | "dark_orange_accent" | "dark_pink_accent" | "dark_purple_accent" | "dark_red_accent" | "dark_yellow_accent" | "dark_black_accent" | "dark_white_accent" | "light_blue_alt1" | "light_blue_alt2" | "light_green_alt1" | "light_green_alt2" | "light_orange_alt1" | "light_orange_alt2" | "light_pink_alt1" | "light_pink_alt2" | "light_purple_alt1" | "light_purple_alt2" | "light_red_alt1" | "light_red_alt2" | "light_yellow_alt1" | "light_yellow_alt2" | "dark_blue_alt1" | "dark_blue_alt2" | "dark_green_alt1" | "dark_green_alt2" | "dark_orange_alt1" | "dark_orange_alt2" | "dark_pink_alt1" | "dark_pink_alt2" | "dark_purple_alt1" | "dark_purple_alt2" | "dark_red_alt1" | "dark_red_alt2" | "dark_yellow_alt1" | "dark_yellow_alt2" | "light_gray_alt1" | "light_gray_alt2" | "dark_gray_alt1" | "dark_gray_alt2" | "light_blue_surface3" | "light_gray_surface3" | "light_green_surface3" | "light_orange_surface3" | "light_pink_surface3" | "light_purple_surface3" | "light_red_surface3" | "light_yellow_surface3" | "dark_blue_surface3" | "dark_gray_surface3" | "dark_green_surface3" | "dark_orange_surface3" | "dark_pink_surface3" | "dark_purple_surface3" | "dark_red_surface3" | "dark_yellow_surface3" | "light_tan" | "light_tan_surface1" | "light_tan_surface2" | "light_black_surface3" | "light_white_surface3" | "light_tan_surface3" | "light_tan_accent" | "light_black_alt1" | "light_white_alt1" | "light_tan_alt1" | "light_black_alt2" | "light_white_alt2" | "light_tan_alt2" | "dark_tan" | "dark_tan_surface1" | "dark_tan_surface2" | "dark_black_surface3" | "dark_white_surface3" | "dark_tan_surface3" | "dark_tan_accent" | "dark_black_alt1" | "dark_white_alt1" | "dark_tan_alt1" | "dark_black_alt2" | "dark_white_alt2" | "dark_tan_alt2", {
+    yellow1: string;
+    yellow2: string;
+    yellow3: string;
+    yellow4: string;
+    yellow5: string;
+    yellow6: string;
+    yellow7: string;
+    yellow8: string;
+    yellow9: string;
+    yellow10: string;
+    yellow11: string;
+    yellow12: string;
+    red1: string;
+    red2: string;
+    red3: string;
+    red4: string;
+    red5: string;
+    red6: string;
+    red7: string;
+    red8: string;
+    red9: string;
+    red10: string;
+    red11: string;
+    red12: string;
+    purple1: string;
+    purple2: string;
+    purple3: string;
+    purple4: string;
+    purple5: string;
+    purple6: string;
+    purple7: string;
+    purple8: string;
+    purple9: string;
+    purple10: string;
+    purple11: string;
+    purple12: string;
+    pink1: string;
+    pink2: string;
+    pink3: string;
+    pink4: string;
+    pink5: string;
+    pink6: string;
+    pink7: string;
+    pink8: string;
+    pink9: string;
+    pink10: string;
+    pink11: string;
+    pink12: string;
+    orange1: string;
+    orange2: string;
+    orange3: string;
+    orange4: string;
+    orange5: string;
+    orange6: string;
+    orange7: string;
+    orange8: string;
+    orange9: string;
+    orange10: string;
+    orange11: string;
+    orange12: string;
+    green1: string;
+    green2: string;
+    green3: string;
+    green4: string;
+    green5: string;
+    green6: string;
+    green7: string;
+    green8: string;
+    green9: string;
+    green10: string;
+    green11: string;
+    green12: string;
+    gray1: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    gray5: string;
+    gray6: string;
+    gray7: string;
+    gray8: string;
+    gray9: string;
+    gray10: string;
+    gray11: string;
+    gray12: string;
+    blue1: string;
+    blue2: string;
+    blue3: string;
+    blue4: string;
+    blue5: string;
+    blue6: string;
+    blue7: string;
+    blue8: string;
+    blue9: string;
+    blue10: string;
+    blue11: string;
+    blue12: string;
+    color: string;
+    shadowColor: string;
+    borderColor: string;
+    borderColorHover: string;
+    colorHover: string;
+    colorFocus: string;
+    colorPress: string;
+    color1: string;
+    color2: string;
+    color3: string;
+    color4: string;
+    color5: string;
+    color6: string;
+    color7: string;
+    color8: string;
+    color9: string;
+    color10: string;
+    color11: string;
+    color12: string;
+    background: string;
+    placeholderColor: string;
+    colorTransparent: string;
+    backgroundHover: string;
+    backgroundPress: string;
+    backgroundFocus: string;
+    borderColorFocus: string;
+    borderColorPress: string;
+    accentBackground: string;
+    accentColor: string;
+    background0: string;
+    background02: string;
+    background04: string;
+    background06: string;
+    background08: string;
+    color0: string;
+    color02: string;
+    color04: string;
+    color06: string;
+    color08: string;
+    black2: string;
+    black1: string;
+    black4: string;
+    black8: string;
+    black12: string;
+    black3: string;
+    black5: string;
+    black7: string;
+    black9: string;
+    black10: string;
+    black6: string;
+    black11: string;
+    white2: string;
+    white1: string;
+    white4: string;
+    white8: string;
+    white12: string;
+    white3: string;
+    white5: string;
+    white7: string;
+    white9: string;
+    white10: string;
+    white6: string;
+    white11: string;
+    shadow1: string;
+    shadow2: string;
+    shadow3: string;
+    shadow4: string;
+    shadow5: string;
+    shadow6: string;
+    shadow7: string;
+    shadow8: string;
+    outlineColor: string;
+    accent0: string;
+    accent2: string;
+    accent1: string;
+    accent4: string;
+    accent8: string;
+    accent12: string;
+    accent3: string;
+    accent5: string;
+    accent7: string;
+    accent9: string;
+    accent10: string;
+    accent6: string;
+    accent11: string;
+    colorBg: string;
+    shadow9: string;
+    shadow10: string;
+} & Record<string, string>>;
+export type GuiThemes = typeof themes;
+/**
+ * This is an optional production optimization: themes JS can get to 20Kb or more.
+ * Hanzo GUI has <1Kb of logic to hydrate themes from CSS, so you can remove the JS.
+ * So long as you server render your Hanzo GUI CSS, this will save you bundle size:
+ */
+export declare const guiThemes: GuiThemes;
+export {};
+//# sourceMappingURL=v4-gui.d.ts.map