reshaped 1.0.1 → 2.1.0

package/cli/theming/definitions/figma.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const theme = {
+    fontFamily: {
+        title: {
+            family: "Inter, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+        },
+        body: {
+            family: "Inter, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+        },
+    },
+    fontWeight: {
+        regular: { weight: 400 },
+        medium: { weight: 500 },
+        semibold: { weight: 600 },
+        bold: { weight: 700 },
+        heavy: { weight: 800 },
+        black: { weight: 900 },
+    },
+    font: {
+        title1: {
+            fontSize: { px: 80 },
+            lineHeight: { px: 84 },
+            fontWeightToken: "semibold",
+            fontFamilyToken: "title",
+        },
+        title2: {
+            fontSize: { px: 64 },
+            lineHeight: { px: 68 },
+            fontWeightToken: "semibold",
+            fontFamilyToken: "title",
+        },
+        title3: {
+            fontSize: { px: 56 },
+            lineHeight: { px: 60 },
+            fontWeightToken: "semibold",
+            fontFamilyToken: "title",
+        },
+        title4: {
+            fontSize: { px: 40 },
+            lineHeight: { px: 44 },
+            fontWeightToken: "semibold",
+            fontFamilyToken: "title",
+        },
+        title5: {
+            fontSize: { px: 36 },
+            lineHeight: { px: 40 },
+            fontWeightToken: "semibold",
+            fontFamilyToken: "title",
+        },
+        title6: {
+            fontSize: { px: 24 },
+            lineHeight: { px: 28 },
+            fontWeightToken: "semibold",
+            fontFamilyToken: "title",
+        },
+        featured1: {
+            fontSize: { px: 22 },
+            lineHeight: { px: 28 },
+            fontFamilyToken: "body",
+        },
+        featured2: {
+            fontSize: { px: 20 },
+            lineHeight: { px: 28 },
+            fontFamilyToken: "body",
+        },
+        featured3: {
+            fontSize: { px: 18 },
+            lineHeight: { px: 24 },
+            fontFamilyToken: "body",
+        },
+        body1: {
+            fontSize: { px: 14 },
+            lineHeight: { px: 20 },
+            fontFamilyToken: "body",
+        },
+        body2: {
+            fontSize: { px: 13 },
+            lineHeight: { px: 20 },
+            fontFamilyToken: "body",
+        },
+        body3: {
+            fontSize: { px: 11 },
+            lineHeight: { px: 16 },
+            fontFamilyToken: "body",
+        },
+        caption1: {
+            fontSize: { px: 11 },
+            lineHeight: { px: 16 },
+            fontFamilyToken: "body",
+        },
+        caption2: {
+            fontSize: { px: 10 },
+            lineHeight: { px: 12 },
+            fontFamilyToken: "body",
+        },
+    },
+    unit: {
+        base: { px: 4 },
+        radiusSmall: { px: 4 },
+        radiusMedium: { px: 4 },
+        radiusLarge: { px: 4 },
+    },
+    color: {
+        foregroundNeutral: { hex: "#191919", hexDark: "#FFFFFF" },
+        foregroundNeutralFaded: { hex: "#474747", hexDark: "#B2B2B2" },
+        foregroundDisabled: { hex: "#B2B2B2", hexDark: "#656565" },
+        foregroundPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" },
+        foregroundPositive: { hex: "#009951", hexDark: "#79D297" },
+        foregroundCritical: { hex: "#DC3412", hexDark: "#FCA397" },
+        backgroundNeutral: { hex: "#DFE2EA", hexDark: "#444444" },
+        backgroundNeutralFaded: { hex: "#F5F5F5", hexDark: "#383838" },
+        backgroundNeutralHighlighted: { hex: "#D4D8E3", hexDark: "#525252" },
+        backgroundDisabled: { hex: "#e4e4e4", hexDark: "#474747" },
+        backgroundDisabledFaded: { hex: "#F5F5F5", hexDark: "#3A3A3A" },
+        backgroundPrimary: { hex: "#0D99FF", hexDark: "#0C8CE9" },
+        backgroundPrimaryHighlighted: { hex: "#007BE5", hexDark: "#0A6DC2" },
+        backgroundPrimaryFaded: { hex: "#E5F4FF", hexDark: "#394360" },
+        backgroundPositive: { hex: "#14AE5C", hexDark: "#198F51" },
+        backgroundPositiveFaded: { hex: "#DAECDF", hexDark: "#3d5749" },
+        backgroundPositiveHighlighted: { hex: "#009951", hexDark: "#078348" },
+        backgroundCritical: { hex: "#F24822", hexDark: "#E03E1A" },
+        backgroundCriticalFaded: { hex: "#FFE2E0", hexDark: "#60332A" },
+        backgroundCriticalHighlighted: { hex: "#DC3412", hexDark: "#C4381C" },
+        borderNeutral: { hex: "#E6E6E6", hexDark: "#444444" },
+        borderNeutralFaded: { hex: "#E6E6E6", hexDark: "#444444" },
+        borderDisabled: { hex: "#E6E6E6", hexDark: "#3E3E3E" },
+        borderPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" },
+        borderPrimaryFaded: { hex: "#BDE3FF", hexDark: "#2A4D72" },
+        borderPositive: { hex: "#009951", hexDark: "#79D297" },
+        borderPositiveFaded: { hex: "#BBDDC6", hexDark: "#086338" },
+        borderCritical: { hex: "#DC3412", hexDark: "#FCA397" },
+        borderCriticalFaded: { hex: "#FFC7C2", hexDark: "#803226" },
+        backgroundPage: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
+        backgroundPageFaded: { hex: "#FAFAFA", hexDark: "#1E1E1E" },
+        backgroundElevationBase: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
+        backgroundElevationRaised: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
+        backgroundElevationOverlay: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
+        black: { hex: "#000000" },
+        white: { hex: "#FFFFFF" },
+    },
+    duration: {
+        fast: { ms: 200 },
+        medium: { ms: 300 },
+        slow: { ms: 400 },
+    },
+    easing: {
+        standard: { x1: 0.4, y1: 0, x2: 0.2, y2: 1 },
+        accelerate: { x1: 0.4, y1: 0, x2: 1, y2: 1 },
+        decelerate: { x1: 0, y1: 0, x2: 0.2, y2: 1 },
+    },
+    shadow: {
+        raised: [
+            {
+                offsetX: 0,
+                offsetY: 1,
+                blurRadius: 3,
+                colorToken: "black",
+                opacity: 0.15,
+            },
+        ],
+        overlay: [
+            {
+                offsetX: 0,
+                offsetY: 10,
+                blurRadius: 24,
+                colorToken: "black",
+                opacity: 0.1,
+            },
+            {
+                offsetX: 0,
+                offsetY: 2,
+                blurRadius: 5,
+                colorToken: "black",
+                opacity: 0.04,
+            },
+        ],
+    },
+};
+exports.default = theme;

package/cli/theming/definitions/minimal.d.ts

@@ -0,0 +1,3 @@
+import { UserThemeDefinition } from "../tokens/types";
+declare const theme: UserThemeDefinition;
+export default theme;

package/cli/theming/definitions/minimal.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const reshaped_1 = __importDefault(require("./reshaped"));
+const theme = Object.assign(Object.assign({}, reshaped_1.default), { color: Object.assign(Object.assign({}, reshaped_1.default.color), { foregroundNeutral: {
+            hex: "#161a26",
+            hexDark: "#f2f3f5",
+        }, foregroundNeutralFaded: {
+            hex: "#717787",
+            hexDark: "#9f9e9e",
+        }, foregroundPrimary: {
+            hex: "#2383e2",
+            hexDark: "#5098ff",
+        }, foregroundDisabled: {
+            hex: "#d4d0d0",
+            hexDark: "#656565",
+        }, backgroundPrimary: {
+            hex: "#2383e2",
+            hexDark: "#4281DB",
+        }, backgroundPrimaryFaded: {
+            hex: "#e5f4fb",
+            hexDark: "#1e2c45",
+        }, backgroundPrimaryHighlighted: {
+            hex: "#3273CC",
+            hexDark: "#3273CC",
+        }, backgroundElevationBase: {
+            hex: "#ffffff",
+            hexDark: "#232323",
+        }, backgroundElevationRaised: {
+            hex: "#ffffff",
+            hexDark: "#262626",
+        }, backgroundElevationOverlay: {
+            hex: "#ffffff",
+            hexDark: "#292929",
+        }, backgroundNeutral: {
+            hex: "#e3e3e5",
+            hexDark: "#4f5155",
+        }, backgroundNeutralFaded: {
+            hex: "#f2f3f5",
+            hexDark: "#34363f",
+        }, backgroundNeutralHighlighted: {
+            hex: "#dedee1",
+            hexDark: "#595c60",
+        }, backgroundPage: {
+            hex: "#ffffff",
+            hexDark: "#191919",
+        }, backgroundPageFaded: {
+            hex: "#F7F7F5",
+            hexDark: "#202020",
+        }, backgroundDisabled: {
+            hex: "#ECEEF3",
+            hexDark: "#313131",
+        }, backgroundDisabledFaded: {
+            hex: "#F4F5F7",
+            hexDark: "#262626",
+        }, borderPrimary: {
+            hex: "#3D76C7",
+            hexDark: "#5A91E0",
+        }, borderPrimaryFaded: {
+            hex: "#c6d9f4",
+            hexDark: "#163a6a",
+        }, borderNeutral: {
+            hex: "#d2d2d2",
+            hexDark: "#414141",
+        }, borderNeutralFaded: {
+            hex: "#E2E2E2",
+            hexDark: "#464646",
+        }, borderDisabled: {
+            hex: "#E2E2E2",
+            hexDark: "#404040",
+        } }), unit: Object.assign(Object.assign({}, reshaped_1.default.unit), { radiusSmall: {
+            px: 2,
+        }, radiusMedium: {
+            px: 4,
+        }, radiusLarge: {
+            px: 6,
+        } }) });
+exports.default = theme;

package/cli/theming/definitions/reshaped.d.ts

@@ -0,0 +1,3 @@
+import { UserThemeDefinition } from "../tokens/types";
+declare const theme: UserThemeDefinition;
+export default theme;

package/cli/theming/definitions/reshaped.js

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const theme = {
+    fontFamily: {
+        title: {
+            family: "Inter, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+        },
+        body: {
+            family: "Inter, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+        },
+    },
+    fontWeight: {
+        regular: { weight: 400 },
+        medium: { weight: 500 },
+        semibold: { weight: 600 },
+        bold: { weight: 700 },
+        heavy: { weight: 800 },
+        black: { weight: 900 },
+    },
+    font: {
+        title1: {
+            fontSize: { px: 96 },
+            lineHeight: { px: 100 },
+            fontWeightToken: "heavy",
+            fontFamilyToken: "title",
+        },
+        title2: {
+            fontSize: { px: 80 },
+            lineHeight: { px: 84 },
+            fontWeightToken: "heavy",
+            fontFamilyToken: "title",
+        },
+        title3: {
+            fontSize: { px: 64 },
+            lineHeight: { px: 68 },
+            fontWeightToken: "heavy",
+            fontFamilyToken: "title",
+        },
+        title4: {
+            fontSize: { px: 56 },
+            lineHeight: { px: 60 },
+            fontWeightToken: "bold",
+            fontFamilyToken: "title",
+        },
+        title5: {
+            fontSize: { px: 48 },
+            lineHeight: { px: 52 },
+            fontWeightToken: "bold",
+            fontFamilyToken: "title",
+        },
+        title6: {
+            fontSize: { px: 36 },
+            lineHeight: { px: 40 },
+            fontWeightToken: "bold",
+            fontFamilyToken: "title",
+        },
+        featured1: {
+            fontSize: { px: 32 },
+            lineHeight: { px: 40 },
+            fontFamilyToken: "body",
+        },
+        featured2: {
+            fontSize: { px: 24 },
+            lineHeight: { px: 32 },
+            fontFamilyToken: "body",
+        },
+        featured3: {
+            fontSize: { px: 20 },
+            lineHeight: { px: 28 },
+            fontFamilyToken: "body",
+        },
+        body1: {
+            fontSize: { px: 18 },
+            lineHeight: { px: 24 },
+            fontFamilyToken: "body",
+        },
+        body2: {
+            fontSize: { px: 16 },
+            lineHeight: { px: 24 },
+            fontFamilyToken: "body",
+        },
+        body3: {
+            fontSize: { px: 14 },
+            lineHeight: { px: 20 },
+            fontFamilyToken: "body",
+        },
+        caption1: {
+            fontSize: { px: 12 },
+            lineHeight: { px: 16 },
+            fontFamilyToken: "body",
+        },
+        caption2: {
+            fontSize: { px: 10 },
+            lineHeight: { px: 12 },
+            fontFamilyToken: "body",
+        },
+    },
+    unit: {
+        base: { px: 4 },
+        radiusSmall: { px: 4 },
+        radiusMedium: { px: 8 },
+        radiusLarge: { px: 12 },
+    },
+    color: {
+        foregroundNeutral: { hex: "#14171F", hexDark: "#EFF0F1" },
+        foregroundNeutralFaded: { hex: "#4D5874", hexDark: "#C2C8D6" },
+        foregroundDisabled: { hex: "#C7CDDB", hexDark: "#404A63" },
+        foregroundPrimary: { hex: "#4D4BE7", hexDark: "#9D9CF7" },
+        foregroundPositive: { hex: "#05751F", hexDark: "#03AB5F" },
+        foregroundCritical: { hex: "#CB101D", hexDark: "#EB6666" },
+        backgroundNeutral: { hex: "#DFE2EA", hexDark: "#384056" },
+        backgroundNeutralFaded: { hex: "#F3F4F6", hexDark: "#242838" },
+        backgroundNeutralHighlighted: { hex: "#D4D8E3", hexDark: "#404A63" },
+        backgroundDisabled: { hex: "#ECEEF3", hexDark: "#1C202B" },
+        backgroundDisabledFaded: { hex: "#F4F5F7", hexDark: "#161922" },
+        backgroundPrimary: { hex: "#5A58F2", hexDark: "#5250F2" },
+        backgroundPrimaryHighlighted: { hex: "#6d6bf5", hexDark: "#5f5df4" },
+        backgroundPrimaryFaded: { hex: "#EDECFD", hexDark: "#24254C" },
+        backgroundPositive: { hex: "#118850", hexDark: "#06743F" },
+        backgroundPositiveFaded: { hex: "#EBFEF6", hexDark: "#0F2921" },
+        backgroundPositiveHighlighted: { hex: "#009950", hexDark: "#008545" },
+        backgroundCritical: { hex: "#E22C2C", hexDark: "#AB1717" },
+        backgroundCriticalFaded: { hex: "#FEF1F2", hexDark: "#2F1E1F" },
+        backgroundCriticalHighlighted: { hex: "#eb4747", hexDark: "#c11515" },
+        borderNeutral: { hex: "#BBC1D3", hexDark: "#49536F" },
+        borderNeutralFaded: { hex: "#DFE2EA", hexDark: "#313649" },
+        borderDisabled: { hex: "#DFE2EA", hexDark: "#242938" },
+        borderPrimary: { hex: "#4D4BE7", hexDark: "#7D7BF4" },
+        borderPrimaryFaded: { hex: "#D7D5FB", hexDark: "#2E3160" },
+        borderPositive: { hex: "#05751F", hexDark: "#03A059" },
+        borderPositiveFaded: { hex: "#CDEDD5", hexDark: "#163C30" },
+        borderCritical: { hex: "#CB101D", hexDark: "#E95454" },
+        borderCriticalFaded: { hex: "#FBD5D8", hexDark: "#412A2B" },
+        backgroundPage: { hex: "#FFFFFF", hexDark: "#0D1117" },
+        backgroundPageFaded: { hex: "#FAFAFA", hexDark: "#0F131A" },
+        backgroundElevationBase: { hex: "#FFFFFF", hexDark: "#14181f" },
+        backgroundElevationRaised: { hex: "#FFFFFF", hexDark: "#181D25" },
+        backgroundElevationOverlay: { hex: "#FFFFFF", hexDark: "#1C212B" },
+        black: { hex: "#000000" },
+        white: { hex: "#FFFFFF" },
+    },
+    duration: {
+        fast: { ms: 200 },
+        medium: { ms: 300 },
+        slow: { ms: 400 },
+    },
+    easing: {
+        standard: { x1: 0.4, y1: 0, x2: 0.2, y2: 1 },
+        accelerate: { x1: 0.4, y1: 0, x2: 1, y2: 1 },
+        decelerate: { x1: 0, y1: 0, x2: 0.2, y2: 1 },
+    },
+    shadow: {
+        raised: [
+            {
+                offsetX: 0,
+                offsetY: 2,
+                blurRadius: 3,
+                colorToken: "black",
+                opacity: 0.1,
+            },
+            {
+                offsetX: 0,
+                offsetY: 1,
+                blurRadius: 2,
+                spreadRadius: -1,
+                colorToken: "black",
+                opacity: 0.1,
+            },
+        ],
+        overlay: [
+            {
+                offsetX: 0,
+                offsetY: 5,
+                blurRadius: 10,
+                colorToken: "black",
+                opacity: 0.05,
+            },
+            {
+                offsetX: 0,
+                offsetY: 15,
+                blurRadius: 25,
+                colorToken: "black",
+                opacity: 0.07,
+            },
+        ],
+    },
+};
+exports.default = theme;

package/cli/theming/definitions/slate.d.ts

@@ -0,0 +1,3 @@
+import { UserThemeDefinition } from "../tokens/types";
+declare const theme: UserThemeDefinition;
+export default theme;

package/cli/theming/definitions/slate.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const reshaped_1 = __importDefault(require("./reshaped"));
+const theme = Object.assign(Object.assign({}, reshaped_1.default), { color: Object.assign(Object.assign({}, reshaped_1.default.color), { foregroundNeutral: {
+            hex: "#161a26",
+            hexDark: "#f2f3f5",
+        }, foregroundNeutralFaded: {
+            hex: "#717787",
+            hexDark: "#9f9e9e",
+        }, foregroundPrimary: {
+            hex: "#2383e2",
+            hexDark: "#5098ff",
+        }, foregroundDisabled: {
+            hex: "#d4d0d0",
+            hexDark: "#656565",
+        }, backgroundPrimary: {
+            hex: "#2383e2",
+            hexDark: "#4281DB",
+        }, backgroundPrimaryFaded: {
+            hex: "#e5f4fb",
+            hexDark: "#1e2c45",
+        }, backgroundPrimaryHighlighted: {
+            hex: "#3273CC",
+            hexDark: "#3273CC",
+        }, backgroundElevationBase: {
+            hex: "#ffffff",
+            hexDark: "#232323",
+        }, backgroundElevationRaised: {
+            hex: "#ffffff",
+            hexDark: "#262626",
+        }, backgroundElevationOverlay: {
+            hex: "#ffffff",
+            hexDark: "#292929",
+        }, backgroundNeutral: {
+            hex: "#e3e3e5",
+            hexDark: "#4f5155",
+        }, backgroundNeutralFaded: {
+            hex: "#f2f3f5",
+            hexDark: "#34363f",
+        }, backgroundNeutralHighlighted: {
+            hex: "#dedee1",
+            hexDark: "#595c60",
+        }, backgroundPage: {
+            hex: "#ffffff",
+            hexDark: "#191919",
+        }, backgroundPageFaded: {
+            hex: "#F7F7F5",
+            hexDark: "#202020",
+        }, backgroundDisabled: {
+            hex: "#ECEEF3",
+            hexDark: "#313131",
+        }, backgroundDisabledFaded: {
+            hex: "#F4F5F7",
+            hexDark: "#262626",
+        }, borderPrimary: {
+            hex: "#3D76C7",
+            hexDark: "#5A91E0",
+        }, borderPrimaryFaded: {
+            hex: "#c6d9f4",
+            hexDark: "#163a6a",
+        }, borderNeutral: {
+            hex: "#d2d2d2",
+            hexDark: "#414141",
+        }, borderNeutralFaded: {
+            hex: "#E2E2E2",
+            hexDark: "#464646",
+        }, borderDisabled: {
+            hex: "#E2E2E2",
+            hexDark: "#404040",
+        } }), unit: Object.assign(Object.assign({}, reshaped_1.default.unit), { radiusSmall: {
+            px: 2,
+        }, radiusMedium: {
+            px: 4,
+        }, radiusLarge: {
+            px: 6,
+        } }) });
+exports.default = theme;

package/cli/theming/index.d.ts

@@ -0,0 +1,4 @@
+import { PartialUserThemeDefinition } from "./tokens/types";
+import type * as T from "./types";
+export declare const addThemeFragment: (name: string, definition: PartialUserThemeDefinition, options: T.PublicOptions) => void;
+export declare const addTheme: (name: string, definition: PartialUserThemeDefinition, options: T.PublicOptions) => void;