@prismicio/editor-ui 0.4.16 → 0.4.17

package/dist/theme/colors.d.ts

@@ -195,10 +195,6 @@ export declare const colors: {
         readonly darkMode: "purpleDark12";
         readonly lightMode: "purpleLight12";
     };
-    readonly purpleAlpha1: {
-        readonly darkMode: "purpleAlpha1";
-        readonly lightMode: "purpleAlpha1";
-    };
     readonly greyAlpha1: {
         readonly darkMode: "greyAlpha1";
         readonly lightMode: "greyAlpha1";

package/dist/theme/mode.css.d.ts

@@ -1 +1 @@
-export declare const mode: Record<"dark" | "light", string>;
+export declare const mode: Record<"light" | "dark", string>;

package/dist/theme/new/Theme.stories.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    title: string;
+    component: typeof ThemeValues;
+};
+export default _default;
+export declare const Theme: {
+    name: string;
+};
+declare function ThemeValues(): JSX.Element;

package/dist/theme/new/install.d.ts

@@ -0,0 +1,11 @@
+import { type ColorScheme } from "./utils";
+/**
+ * Installs theme values that never change but are read via CSS variables.
+ */
+export declare function installTheme(element: HTMLElement): void;
+export declare function uninstallTheme(element: HTMLElement): void;
+/**
+ * Installs theme values that change depending on light/dark mode.
+ */
+export declare function installColorScheme(element: HTMLElement, scheme: ColorScheme): void;
+export declare function uninstallColorScheme(element: HTMLElement): void;

package/dist/theme/new/sx.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from "react";
+import type { Theme } from "./theme";
+export interface SX {
+    flexGrow?: 1;
+    flexShrink?: 0;
+    alignSelf?: "center" | "stretch";
+    justifySelf?: "center" | "stretch";
+    visibility?: "hidden" | "visible";
+    position?: "absolute" | "fixed" | "relative" | "sticky";
+    marginLeft?: keyof Theme["space"];
+    marginRight?: keyof Theme["space"];
+    marginTop?: keyof Theme["space"];
+    marginBottom?: keyof Theme["space"];
+    marginInline?: keyof Theme["space"];
+    marginBlock?: keyof Theme["space"];
+    top?: keyof Theme["space"];
+    left?: keyof Theme["space"];
+    right?: keyof Theme["space"];
+    bottom?: keyof Theme["space"];
+    height?: CSSProperties["height"];
+    width?: CSSProperties["width"];
+    zIndex?: keyof Theme["zIndex"];
+    [key: `--${string}`]: string | number;
+}

package/dist/theme/new/theme.d.ts

@@ -0,0 +1,277 @@
+export declare const theme: {
+    borderRadius: {
+        0: string;
+        1: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        "50%": string;
+        "100%": string;
+        inherit: string;
+    } & {};
+    borderStyle: {
+        none: string;
+        dashed: string;
+        solid: string;
+    } & {};
+    borderWidth: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+    } & {};
+    boxShadow: {
+        none: string;
+    } & {
+        "-1": string;
+        "1": string;
+        "2": string;
+        "3": string;
+        "4": string;
+        focus: string;
+        ghostFocus: string;
+    };
+    color: {
+        currentColor: string;
+        transparent: string;
+        inherit: string;
+    } & {
+        grey1: string;
+        grey2: string;
+        grey3: string;
+        grey4: string;
+        grey5: string;
+        grey6: string;
+        grey7: string;
+        grey8: string;
+        grey9: string;
+        grey10: string;
+        grey11: string;
+        grey12: string;
+        indigo2: string;
+        indigo7: string;
+        indigo10: string;
+        indigo11: string;
+        green3: string;
+        green4: string;
+        green9: string;
+        green10: string;
+        green11: string;
+        amber3: string;
+        amber4: string;
+        amber9: string;
+        amber10: string;
+        amber11: string;
+        tomato1: string;
+        tomato3: string;
+        tomato4: string;
+        tomato7: string;
+        tomato10: string;
+        tomato11: 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;
+        greyAlpha1: string;
+    };
+    cursor: {
+        default: string;
+        move: string;
+        pointer: string;
+        text: string;
+        grab: string;
+        notAllowed: string;
+    } & {};
+    fontFamily: {
+        inherit: string;
+    } & {
+        body: string;
+        code: string;
+    };
+    gradient: {
+        checkerboardDark: string;
+        checkerboardLight: string;
+    };
+    opacity: {
+        0: string;
+        0.1: string;
+        0.3: string;
+        0.4: string;
+        0.5: string;
+        0.6: string;
+        0.8: string;
+        1: string;
+    } & {};
+    space: {
+        0: string;
+        1: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        24: string;
+        32: string;
+        40: string;
+        48: string;
+        72: string;
+        80: string;
+        100: string;
+    } & {};
+    transitionDuration: {
+        0: string;
+        75: string;
+        100: string;
+        150: string;
+        200: string;
+        250: string;
+        300: string;
+        400: string;
+    } & {};
+    zIndex: {
+        0: string;
+        1: string;
+        overlay: string;
+        dialog: string;
+        toolbar: string;
+        dropdownMenu: string;
+    } & {};
+}, vars: {
+    borderRadius: {
+        [x: string]: string | {
+            light: string;
+            dark: string;
+        };
+    };
+    borderStyle: {
+        [x: string]: string | {
+            light: string;
+            dark: string;
+        };
+    };
+    borderWidth: {
+        [x: string]: string | {
+            light: string;
+            dark: string;
+        };
+    };
+    boxShadow: {
+        [x: string]: string | {
+            light: string;
+            dark: string;
+        };
+    };
+    color: {
+        [x: string]: string | {
+            light: string;
+            dark: string;
+        };
+    };
+    cursor: {
+        [x: string]: string | {
+            light: string;
+            dark: string;
+        };
+    };
+    fontFamily: {
+        [x: string]: string | {
+            light: string;
+            dark: string;
+        };
+    };
+    gradient: {
+        [x: string]: string | {
+            light: string;
+            dark: string;
+        };
+    };
+    opacity: {
+        [x: string]: string | {
+            light: string;
+            dark: string;
+        };
+    };
+    space: {
+        [x: string]: string | {
+            light: string;
+            dark: string;
+        };
+    };
+    transitionDuration: {
+        [x: string]: string | {
+            light: string;
+            dark: string;
+        };
+    };
+    zIndex: {
+        [x: string]: string | {
+            light: string;
+            dark: string;
+        };
+    };
+}, literals: {
+    borderRadius: {
+        [x: string]: string;
+        [x: number]: string;
+    };
+    borderStyle: {
+        [x: string]: string;
+        [x: number]: string;
+    };
+    borderWidth: {
+        [x: string]: string;
+        [x: number]: string;
+    };
+    boxShadow: {
+        [x: string]: string;
+        [x: number]: string;
+    };
+    color: {
+        [x: string]: string;
+        [x: number]: string;
+    };
+    cursor: {
+        [x: string]: string;
+        [x: number]: string;
+    };
+    fontFamily: {
+        [x: string]: string;
+        [x: number]: string;
+    };
+    gradient: {
+        [x: string]: string;
+        [x: number]: string;
+    };
+    opacity: {
+        [x: string]: string;
+        [x: number]: string;
+    };
+    space: {
+        [x: string]: string;
+        [x: number]: string;
+    };
+    transitionDuration: {
+        [x: string]: string;
+        [x: number]: string;
+    };
+    zIndex: {
+        [x: string]: string;
+        [x: number]: string;
+    };
+};
+export type Theme = typeof theme;
+export type ThemeKeys<Name extends keyof Theme, Keys extends keyof Theme[Name] = keyof Theme[Name]> = Keys;
+export declare const cssTheme: Record<string, string[]>;

package/dist/theme/new/utils.d.ts

@@ -0,0 +1,36 @@
+import type { PropertiesHyphen } from "csstype";
+export declare function createTheme<Def extends CreateThemeDefinition>(def: Def): ThemeResult<Def>;
+export declare function isSchemeValue(value: unknown): value is SchemeValue;
+export declare function createCSSTheme<V extends Record<string, Vars>, L extends Record<string, Literals>, Def extends Record<keyof V & keyof L, (keyof PropertiesHyphen)[]>>(vars: V, literals: L, def: Def): Record<string, string[]>;
+type CreateThemeDefinition = Record<string, ThemeValue>;
+type ThemeValue = {
+    literals?: Literals;
+    varPrefix?: string;
+    vars: Vars;
+} | {
+    literals: Literals;
+    varPrefix?: never;
+    vars?: never;
+};
+export type ColorScheme = "light" | "dark";
+type SchemeValue = {
+    light: string;
+    dark: string;
+};
+type Literals = Record<string | number, string>;
+type Vars = Record<string, string | SchemeValue>;
+type ThemeResult<Def extends CreateThemeDefinition> = {
+    theme: {
+        [Key in keyof Def]: ThemeResultValue<Def[Key]>;
+    };
+    vars: {
+        [Key in keyof Def]: Vars;
+    };
+    literals: {
+        [Key in keyof Def]: Literals;
+    };
+};
+type ThemeResultValue<Value extends ThemeValue> = Value["literals"] & {
+    [Key in keyof Value["vars"]]: string;
+};
+export {};