@prismicio/editor-ui 0.1.0 → 0.2.0

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

@@ -1,341 +1,340 @@
 export declare type Color = keyof typeof vars.color;
 export declare const tokens: {
-    borderRadius: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "100%": string;
-    };
-    borderStyle: {
-        dashed: string;
-        none: string;
-        solid: string;
-    };
-    borderWidth: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-    };
-    boxShadow: {
-        "-1": string;
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-    };
-    color: {
-        currentColor: string;
-        greyDark1: string;
-        greyDark2: string;
-        greyDark3: string;
-        greyDark4: string;
-        greyDark5: string;
-        greyDark6: string;
-        greyDark7: string;
-        greyDark8: string;
-        greyDark9: string;
-        greyDark10: string;
-        greyDark11: string;
-        greyDark12: string;
-        greyLight1: string;
-        greyLight2: string;
-        greyLight3: string;
-        greyLight4: string;
-        greyLight5: string;
-        greyLight6: string;
-        greyLight7: string;
-        greyLight8: string;
-        greyLight9: string;
-        greyLight10: string;
-        greyLight11: string;
-        greyLight12: string;
-        inherit: 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;
-        purpleAlpha1: string;
-        transparent: string;
-    };
-    cursor: {
-        default: string;
-        move: string;
-        pointer: string;
-        text: string;
-    };
-    fontFamily: {
-        body: string;
-        code: string;
-        inherit: string;
-    };
-    fontSize: {
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        inherit: string;
-    };
-    fontWeight: {
-        regular: string;
-        medium: string;
-        semibold: string;
-        inherit: string;
-    };
-    gradient: {
-        checkerboardDark: string;
-        checkerboardLight: string;
-    };
-    letterSpacing: {
-        "-1": string;
-        "0": string;
-        inherit: string;
-    };
-    lineHeight: {
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        inherit: string;
-    };
-    opacity: {
-        "30%": string;
-        "50%": string;
-        "60%": string;
-        "80%": string;
-    };
-    size: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-        "9": string;
-        "10": string;
-        "100%": string;
-        "fit-content": string;
-    };
-    space: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-        "9": string;
-        "10": string;
-        "33%": string;
-    };
-    transitionDuration: {
-        shortest: string;
-        leavingScreen: string;
-        enteringScreen: string;
-        standard: string;
-    };
-    transitionTimingFunction: {
-        easeInOut: string;
-        easeOut: string;
-        easeIn: string;
-        sharp: string;
-    };
-    zIndex: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
+    readonly borderRadius: {
+        readonly "0px": "0px";
+        readonly "1px": "1px";
+        readonly "4px": "4px";
+        readonly "6px": "6px";
+        readonly "10px": "10px";
+        readonly "12px": "12px";
+        readonly "100%": "100%";
+    };
+    readonly borderStyle: {
+        readonly none: "none";
+        readonly dashed: "dashed";
+        readonly solid: "solid";
+    };
+    readonly borderWidth: {
+        readonly "0px": "0px";
+        readonly "1px": "1px";
+        readonly "2px": "2px";
+        readonly "3px": "3px";
+    };
+    readonly boxShadow: {
+        readonly "-1": "0px 1px 0px 0px hsla(0, 0%, 0%, 0.08) inset";
+        readonly "0": "none";
+        readonly "1": "0px 1px 0px 0px hsla(0, 0%, 0%, 0.04)";
+        readonly "2": "0px 2px 1px 0px hsla(0, 0%, 0%, 0.05)";
+        readonly "3": "0px 2px 10px 0px hsla(0, 0%, 0%, 0.1)";
+        readonly "4": "0px 26px 80px 0px hsla(0, 0%, 0%, 0.2)";
+        readonly focus: "0px 0px 0px 2px hsla(251, 63%, 63%, 0.3)";
+    };
+    readonly color: {
+        readonly currentColor: "currentColor";
+        readonly greyDark1: "hsl(240, 4%, 9%)";
+        readonly greyDark2: "hsl(240, 5%, 12%)";
+        readonly greyDark3: "hsl(240, 4%, 14%)";
+        readonly greyDark4: "hsl(240, 5%, 16%)";
+        readonly greyDark5: "hsl(240, 4%, 19%)";
+        readonly greyDark6: "hsl(240, 5%, 22%)";
+        readonly greyDark7: "hsl(240, 5%, 25%)";
+        readonly greyDark8: "hsl(248, 5%, 33%)";
+        readonly greyDark9: "hsl(247, 4%, 45%)";
+        readonly greyDark10: "hsl(247, 4%, 51%)";
+        readonly greyDark11: "hsl(249, 4%, 64%)";
+        readonly greyDark12: "hsl(240, 6%, 93%)";
+        readonly greyLight1: "hsl(300, 0%, 100%)";
+        readonly greyLight2: "hsl(300, 8%, 97%)";
+        readonly greyLight3: "hsl(300, 8%, 95%)";
+        readonly greyLight4: "hsl(270, 6%, 93%)";
+        readonly greyLight5: "hsl(270, 5%, 91%)";
+        readonly greyLight6: "hsl(300, 4%, 89%)";
+        readonly greyLight7: "hsl(270, 3%, 86%)";
+        readonly greyLight8: "hsl(255, 4%, 79%)";
+        readonly greyLight9: "hsl(255, 4%, 57%)";
+        readonly greyLight10: "hsl(253, 4%, 54%)";
+        readonly greyLight11: "hsl(247, 4%, 45%)";
+        readonly greyLight12: "hsl(261, 25%, 11%)";
+        readonly inherit: "inherit";
+        readonly blue1: "hsla(212, 97%, 43%, 1)";
+        readonly purple1: "hsl(252, 19%, 10%)";
+        readonly purple2: "hsl(255, 30%, 13%)";
+        readonly purple3: "hsl(252, 36%, 18%)";
+        readonly purple4: "hsl(253, 40%, 22%)";
+        readonly purple5: "hsl(252, 42%, 26%)";
+        readonly purple6: "hsl(251, 44%, 31%)";
+        readonly purple7: "hsl(250, 47%, 39%)";
+        readonly purple8: "hsl(250, 52%, 51%)";
+        readonly purple9: "hsl(252, 56%, 57%)";
+        readonly purple10: "hsl(251, 63%, 63%)";
+        readonly purple11: "hsl(250, 95%, 77%)";
+        readonly purple12: "hsl(251, 89%, 96%)";
+        readonly purpleAlpha1: "hsla(251, 63%, 63%, 0.3)";
+        readonly transparent: "transparent";
+    };
+    readonly cursor: {
+        readonly default: "default";
+        readonly move: "move";
+        readonly pointer: "pointer";
+        readonly text: "text";
+    };
+    readonly fontFamily: {
+        readonly body: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
+        readonly code: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace";
+        readonly inherit: "inherit";
+    };
+    readonly fontSize: {
+        readonly "10px": `${number}rem`;
+        readonly "12px": `${number}rem`;
+        readonly "14px": `${number}rem`;
+        readonly "16px": `${number}rem`;
+        readonly "18px": `${number}rem`;
+        readonly "28px": `${number}rem`;
+        readonly inherit: "inherit";
+    };
+    readonly fontWeight: {
+        readonly "400": "400";
+        readonly "500": "500";
+        readonly "600": "600";
+        readonly inherit: "inherit";
+    };
+    readonly gradient: {
+        readonly checkerboardDark: "repeating-conic-gradient(hsl(248, 5%, 33%) 0% 25%, hsl(240, 5%, 12%) 0% 50%) 50% / 10px 10px";
+        readonly checkerboardLight: "repeating-conic-gradient(hsl(255, 4%, 79%) 0% 25%, hsl(300, 8%, 97%) 0% 50%) 50% / 10px 10px";
+    };
+    readonly letterSpacing: {
+        readonly "-0.15px": "-0.15px";
+        readonly "0px": "0px";
+        readonly inherit: "inherit";
+    };
+    readonly lineHeight: {
+        readonly "12px": `${number}rem`;
+        readonly "16px": `${number}rem`;
+        readonly "20px": `${number}rem`;
+        readonly "24px": `${number}rem`;
+        readonly "28px": `${number}rem`;
+        readonly "38px": `${number}rem`;
+        readonly inherit: "inherit";
+    };
+    readonly opacity: {
+        readonly "30%": "0.3";
+        readonly "50%": "0.5";
+        readonly "60%": "0.6";
+        readonly "80%": "0.8";
+    };
+    readonly size: {
+        readonly "0px": "0px";
+        readonly "8px": "8px";
+        readonly "16px": "16px";
+        readonly "20px": "20px";
+        readonly "24px": "24px";
+        readonly "28px": "28px";
+        readonly "32px": "32px";
+        readonly "36px": "36px";
+        readonly "40px": "40px";
+        readonly "44px": "44px";
+        readonly "100%": "100%";
+        readonly "fit-content": "fit-content";
+    };
+    readonly space: {
+        readonly "0px": "0px";
+        readonly "2px": "2px";
+        readonly "4px": "4px";
+        readonly "6px": "6px";
+        readonly "8px": "8px";
+        readonly "10px": "10px";
+        readonly "12px": "12px";
+        readonly "16px": "16px";
+        readonly "24px": "24px";
+        readonly "48px": "48px";
+    };
+    readonly transitionDuration: {
+        readonly shortest: "150ms";
+        readonly leavingScreen: "195ms";
+        readonly enteringScreen: "225ms";
+        readonly standard: "300ms";
+    };
+    readonly transitionTimingFunction: {
+        readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly sharp: "cubic-bezier(0.4, 0, 0.6, 1)";
+    };
+    readonly zIndex: {
+        readonly "0": "0";
+        readonly "1": "1";
+        readonly "2": "2";
+        readonly "3": "3";
+        readonly "4": "4";
     };
 };
 export declare const themeClass: string, vars: import("@vanilla-extract/private").MapLeafNodes<{
-    borderRadius: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "100%": string;
-    };
-    borderStyle: {
-        dashed: string;
-        none: string;
-        solid: string;
-    };
-    borderWidth: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-    };
-    boxShadow: {
-        "-1": string;
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-    };
-    color: {
-        currentColor: string;
-        greyDark1: string;
-        greyDark2: string;
-        greyDark3: string;
-        greyDark4: string;
-        greyDark5: string;
-        greyDark6: string;
-        greyDark7: string;
-        greyDark8: string;
-        greyDark9: string;
-        greyDark10: string;
-        greyDark11: string;
-        greyDark12: string;
-        greyLight1: string;
-        greyLight2: string;
-        greyLight3: string;
-        greyLight4: string;
-        greyLight5: string;
-        greyLight6: string;
-        greyLight7: string;
-        greyLight8: string;
-        greyLight9: string;
-        greyLight10: string;
-        greyLight11: string;
-        greyLight12: string;
-        inherit: 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;
-        purpleAlpha1: string;
-        transparent: string;
-    };
-    cursor: {
-        default: string;
-        move: string;
-        pointer: string;
-        text: string;
-    };
-    fontFamily: {
-        body: string;
-        code: string;
-        inherit: string;
-    };
-    fontSize: {
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        inherit: string;
-    };
-    fontWeight: {
-        regular: string;
-        medium: string;
-        semibold: string;
-        inherit: string;
-    };
-    gradient: {
-        checkerboardDark: string;
-        checkerboardLight: string;
-    };
-    letterSpacing: {
-        "-1": string;
-        "0": string;
-        inherit: string;
-    };
-    lineHeight: {
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        inherit: string;
-    };
-    opacity: {
-        "30%": string;
-        "50%": string;
-        "60%": string;
-        "80%": string;
-    };
-    size: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-        "9": string;
-        "10": string;
-        "100%": string;
-        "fit-content": string;
-    };
-    space: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
-        "5": string;
-        "6": string;
-        "7": string;
-        "8": string;
-        "9": string;
-        "10": string;
-        "33%": string;
-    };
-    transitionDuration: {
-        shortest: string;
-        leavingScreen: string;
-        enteringScreen: string;
-        standard: string;
-    };
-    transitionTimingFunction: {
-        easeInOut: string;
-        easeOut: string;
-        easeIn: string;
-        sharp: string;
-    };
-    zIndex: {
-        "0": string;
-        "1": string;
-        "2": string;
-        "3": string;
-        "4": string;
+    readonly borderRadius: {
+        readonly "0px": "0px";
+        readonly "1px": "1px";
+        readonly "4px": "4px";
+        readonly "6px": "6px";
+        readonly "10px": "10px";
+        readonly "12px": "12px";
+        readonly "100%": "100%";
+    };
+    readonly borderStyle: {
+        readonly none: "none";
+        readonly dashed: "dashed";
+        readonly solid: "solid";
+    };
+    readonly borderWidth: {
+        readonly "0px": "0px";
+        readonly "1px": "1px";
+        readonly "2px": "2px";
+        readonly "3px": "3px";
+    };
+    readonly boxShadow: {
+        readonly "-1": "0px 1px 0px 0px hsla(0, 0%, 0%, 0.08) inset";
+        readonly "0": "none";
+        readonly "1": "0px 1px 0px 0px hsla(0, 0%, 0%, 0.04)";
+        readonly "2": "0px 2px 1px 0px hsla(0, 0%, 0%, 0.05)";
+        readonly "3": "0px 2px 10px 0px hsla(0, 0%, 0%, 0.1)";
+        readonly "4": "0px 26px 80px 0px hsla(0, 0%, 0%, 0.2)";
+        readonly focus: "0px 0px 0px 2px hsla(251, 63%, 63%, 0.3)";
+    };
+    readonly color: {
+        readonly currentColor: "currentColor";
+        readonly greyDark1: "hsl(240, 4%, 9%)";
+        readonly greyDark2: "hsl(240, 5%, 12%)";
+        readonly greyDark3: "hsl(240, 4%, 14%)";
+        readonly greyDark4: "hsl(240, 5%, 16%)";
+        readonly greyDark5: "hsl(240, 4%, 19%)";
+        readonly greyDark6: "hsl(240, 5%, 22%)";
+        readonly greyDark7: "hsl(240, 5%, 25%)";
+        readonly greyDark8: "hsl(248, 5%, 33%)";
+        readonly greyDark9: "hsl(247, 4%, 45%)";
+        readonly greyDark10: "hsl(247, 4%, 51%)";
+        readonly greyDark11: "hsl(249, 4%, 64%)";
+        readonly greyDark12: "hsl(240, 6%, 93%)";
+        readonly greyLight1: "hsl(300, 0%, 100%)";
+        readonly greyLight2: "hsl(300, 8%, 97%)";
+        readonly greyLight3: "hsl(300, 8%, 95%)";
+        readonly greyLight4: "hsl(270, 6%, 93%)";
+        readonly greyLight5: "hsl(270, 5%, 91%)";
+        readonly greyLight6: "hsl(300, 4%, 89%)";
+        readonly greyLight7: "hsl(270, 3%, 86%)";
+        readonly greyLight8: "hsl(255, 4%, 79%)";
+        readonly greyLight9: "hsl(255, 4%, 57%)";
+        readonly greyLight10: "hsl(253, 4%, 54%)";
+        readonly greyLight11: "hsl(247, 4%, 45%)";
+        readonly greyLight12: "hsl(261, 25%, 11%)";
+        readonly inherit: "inherit";
+        readonly blue1: "hsla(212, 97%, 43%, 1)";
+        readonly purple1: "hsl(252, 19%, 10%)";
+        readonly purple2: "hsl(255, 30%, 13%)";
+        readonly purple3: "hsl(252, 36%, 18%)";
+        readonly purple4: "hsl(253, 40%, 22%)";
+        readonly purple5: "hsl(252, 42%, 26%)";
+        readonly purple6: "hsl(251, 44%, 31%)";
+        readonly purple7: "hsl(250, 47%, 39%)";
+        readonly purple8: "hsl(250, 52%, 51%)";
+        readonly purple9: "hsl(252, 56%, 57%)";
+        readonly purple10: "hsl(251, 63%, 63%)";
+        readonly purple11: "hsl(250, 95%, 77%)";
+        readonly purple12: "hsl(251, 89%, 96%)";
+        readonly purpleAlpha1: "hsla(251, 63%, 63%, 0.3)";
+        readonly transparent: "transparent";
+    };
+    readonly cursor: {
+        readonly default: "default";
+        readonly move: "move";
+        readonly pointer: "pointer";
+        readonly text: "text";
+    };
+    readonly fontFamily: {
+        readonly body: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
+        readonly code: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace";
+        readonly inherit: "inherit";
+    };
+    readonly fontSize: {
+        readonly "10px": `${number}rem`;
+        readonly "12px": `${number}rem`;
+        readonly "14px": `${number}rem`;
+        readonly "16px": `${number}rem`;
+        readonly "18px": `${number}rem`;
+        readonly "28px": `${number}rem`;
+        readonly inherit: "inherit";
+    };
+    readonly fontWeight: {
+        readonly "400": "400";
+        readonly "500": "500";
+        readonly "600": "600";
+        readonly inherit: "inherit";
+    };
+    readonly gradient: {
+        readonly checkerboardDark: "repeating-conic-gradient(hsl(248, 5%, 33%) 0% 25%, hsl(240, 5%, 12%) 0% 50%) 50% / 10px 10px";
+        readonly checkerboardLight: "repeating-conic-gradient(hsl(255, 4%, 79%) 0% 25%, hsl(300, 8%, 97%) 0% 50%) 50% / 10px 10px";
+    };
+    readonly letterSpacing: {
+        readonly "-0.15px": "-0.15px";
+        readonly "0px": "0px";
+        readonly inherit: "inherit";
+    };
+    readonly lineHeight: {
+        readonly "12px": `${number}rem`;
+        readonly "16px": `${number}rem`;
+        readonly "20px": `${number}rem`;
+        readonly "24px": `${number}rem`;
+        readonly "28px": `${number}rem`;
+        readonly "38px": `${number}rem`;
+        readonly inherit: "inherit";
+    };
+    readonly opacity: {
+        readonly "30%": "0.3";
+        readonly "50%": "0.5";
+        readonly "60%": "0.6";
+        readonly "80%": "0.8";
+    };
+    readonly size: {
+        readonly "0px": "0px";
+        readonly "8px": "8px";
+        readonly "16px": "16px";
+        readonly "20px": "20px";
+        readonly "24px": "24px";
+        readonly "28px": "28px";
+        readonly "32px": "32px";
+        readonly "36px": "36px";
+        readonly "40px": "40px";
+        readonly "44px": "44px";
+        readonly "100%": "100%";
+        readonly "fit-content": "fit-content";
+    };
+    readonly space: {
+        readonly "0px": "0px";
+        readonly "2px": "2px";
+        readonly "4px": "4px";
+        readonly "6px": "6px";
+        readonly "8px": "8px";
+        readonly "10px": "10px";
+        readonly "12px": "12px";
+        readonly "16px": "16px";
+        readonly "24px": "24px";
+        readonly "48px": "48px";
+    };
+    readonly transitionDuration: {
+        readonly shortest: "150ms";
+        readonly leavingScreen: "195ms";
+        readonly enteringScreen: "225ms";
+        readonly standard: "300ms";
+    };
+    readonly transitionTimingFunction: {
+        readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly sharp: "cubic-bezier(0.4, 0, 0.6, 1)";
+    };
+    readonly zIndex: {
+        readonly "0": "0";
+        readonly "1": "1";
+        readonly "2": "2";
+        readonly "3": "3";
+        readonly "4": "4";
     };
 }, import("@vanilla-extract/private").CSSVarFunction>;
+export declare const gaps: Record<"0px" | "4px" | "6px" | "10px" | "12px" | "2px" | "8px" | "16px" | "24px" | "48px", string>;