reshaped 2.11.12 → 3.0.1

package/hooks/useHotkeys.js

@@ -1,25 +0,0 @@
-"use client";
-import React from "react";
-import useSingletonHotkey from "./_private/useSingletonHotkeys.js";
-const useHotkeys = (hotkeys, deps = [], options) => {
-    const { addHotkeys, isPressed } = useSingletonHotkey();
-    const generatedRef = React.useRef(null);
-    const elementRef = (options === null || options === void 0 ? void 0 : options.ref) || generatedRef;
-    React.useEffect(() => {
-        if (options === null || options === void 0 ? void 0 : options.disabled)
-            return;
-        const remove = addHotkeys(hotkeys, elementRef, { preventDefault: options === null || options === void 0 ? void 0 : options.preventDefault });
-        return () => remove === null || remove === void 0 ? void 0 : remove();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        addHotkeys,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        Object.keys(hotkeys).join(","),
-        options === null || options === void 0 ? void 0 : options.disabled,
-        options === null || options === void 0 ? void 0 : options.preventDefault,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        ...deps,
-    ]);
-    return { ref: elementRef, checkHotkeyState: isPressed };
-};
-export default useHotkeys;

package/icons/Mic.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const MicIcon = () => {
-    return (_jsxs("svg", { viewBox: "0 0 16 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M8 1C7.20435 1 6.44129 1.31607 5.87868 1.87868C5.31607 2.44129 5 3.20435 5 4V12C5 12.7956 5.31607 13.5587 5.87868 14.1213C6.44129 14.6839 7.20435 15 8 15C8.79565 15 9.55871 14.6839 10.1213 14.1213C10.6839 13.5587 11 12.7956 11 12V4C11 3.20435 10.6839 2.44129 10.1213 1.87868C9.55871 1.31607 8.79565 1 8 1V1Z", stroke: "currentColor" }), _jsx("path", { d: "M15 10V12C15 13.8565 14.2625 15.637 12.9497 16.9497C11.637 18.2625 9.85652 19 8 19C6.14348 19 4.36301 18.2625 3.05025 16.9497C1.7375 15.637 1 13.8565 1 12V10", stroke: "currentColor" }), _jsx("path", { d: "M8 19V23", stroke: "currentColor" }), _jsx("path", { d: "M4 23H12", stroke: "currentColor" })] }));
-};
-export default MicIcon;

package/styles/radius/radius.module.css

@@ -1 +0,0 @@
-.root{border-radius:var(--rs-radius)}.--radius-none{--rs-radius:0}.--radius-small{--rs-radius:var(--rs-unit-radius-small)}.--radius-medium{--rs-radius:var(--rs-unit-radius-medium)}.--radius-large{--rs-radius:var(--rs-unit-radius-large)}.--radius-circular{--rs-radius:9999px}@media (--rs-viewport-m ){.--radius-none--m{--rs-radius:0}.--radius-small--m{--rs-radius:var(--rs-unit-radius-small)}.--radius-medium--m{--rs-radius:var(--rs-unit-radius-medium)}.--radius-large--m{--rs-radius:var(--rs-unit-radius-large)}.--radius-circular--m{--rs-radius:9999px}}@media (--rs-viewport-l ){.--radius-none--l{--rs-radius:0}.--radius-small--l{--rs-radius:var(--rs-unit-radius-small)}.--radius-medium--l{--rs-radius:var(--rs-unit-radius-medium)}.--radius-large--l{--rs-radius:var(--rs-unit-radius-large)}.--radius-circular--l{--rs-radius:9999px}}@media (--rs-viewport-xl ){.--radius-none--xl{--rs-radius:0}.--radius-small--xl{--rs-radius:var(--rs-unit-radius-small)}.--radius-medium--xl{--rs-radius:var(--rs-unit-radius-medium)}.--radius-large--xl{--rs-radius:var(--rs-unit-radius-large)}.--radius-circular--xl{--rs-radius:9999px}}

package/themes/_generator/constants.d.ts

@@ -1,2 +0,0 @@
-import { Name } from "./tokens/color/color.types";
-export declare const bgWithDynamicForeground: Name[];

package/themes/_generator/definitions/figma.d.ts

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

package/themes/_generator/definitions/figma.js

@@ -1,186 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const theme = {
-    fontFamily: {
-        title: {
-            family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
-        },
-        body: {
-            family: "Inter, BlinkMacSystemFont, -apple-system, 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 },
-    },
-    // @ts-ignore
-    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,
-            },
-        ],
-    },
-    viewport: {
-        m: { minPx: 660 },
-        l: { minPx: 900 },
-        xl: { minPx: 1280 },
-    },
-};
-exports.default = theme;

package/themes/_generator/definitions/reshaped.d.ts

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

package/themes/_generator/definitions/reshaped.js

@@ -1,160 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const generateColors_1 = __importDefault(require("../utilities/generateColors"));
-const theme = {
-    fontFamily: {
-        title: {
-            family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
-        },
-        body: {
-            family: "Inter, BlinkMacSystemFont, -apple-system, 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: 28 },
-            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: (0, generateColors_1.default)(),
-    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,
-            },
-        ],
-    },
-    viewport: {
-        m: { minPx: 660 },
-        l: { minPx: 900 },
-        xl: { minPx: 1280 },
-    },
-};
-exports.default = theme;

package/themes/_generator/definitions/slate.d.ts

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

package/themes/_generator/definitions/slate.js

@@ -1,80 +0,0 @@
-"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/themes/_generator/tests/themes.stories.js

@@ -1,180 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import View from "../../../components/View/index.js";
-import Button from "../../../components/Button/index.js";
-import Badge from "../../../components/Badge/index.js";
-import Alert from "../../../components/Alert/index.js";
-import Card from "../../../components/Card/index.js";
-import Avatar from "../../../components/Avatar/index.js";
-import DropdownMenu from "../../../components/DropdownMenu/index.js";
-import Theme from "../../../components/Theme/index.js";
-import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
-export default {
-    title: "Themes",
-    parameters: {
-        iframe: { url: "https://reshaped.so/docs/tokens/theming/runtime-theming" },
-    },
-};
-const css = getThemeCSS("green", {
-    color: {
-        backgroundPrimary: { hex: "#1abc9c", hexDark: "#00E5C4" },
-        backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#00E5C4" },
-    },
-});
-const css2 = getThemeCSS("peach", {
-    color: {
-        backgroundPrimary: { hex: "#ffbe76" },
-        backgroundPrimaryHighlighted: { hex: "#ffbe76" },
-    },
-});
-const cssGenerated = getThemeCSS("generated", Object.assign(Object.assign({}, baseThemeDefinition), { color: generateThemeColors({ primary: "#2563eb" }) }));
-const componentExamples = (<View gap={4}>
-		<View gap={2} direction="row">
-			<Button color="primary">Primary button</Button>
-			<Button color="critical">Primary button</Button>
-			<Button color="positive">Primary button</Button>
-			<Button color="neutral">Primary button</Button>
-		</View>
-		<View gap={2} direction="row">
-			<Button color="primary" variant="outline">
-				Primary button
-			</Button>
-			<Button color="critical" variant="outline">
-				Primary button
-			</Button>
-			<Button color="positive" variant="outline">
-				Primary button
-			</Button>
-			<Button color="neutral" variant="outline">
-				Primary button
-			</Button>
-		</View>
-		<View direction="row" gap={4}>
-			<View.Item columns={6}>
-				<Alert color="primary">Primary</Alert>
-			</View.Item>
-			<View.Item columns={6}>
-				<Alert color="critical">Critical</Alert>
-			</View.Item>
-			<View.Item columns={6}>
-				<Alert color="warning">Warning</Alert>
-			</View.Item>
-			<View.Item columns={6}>
-				<Alert color="positive">Positive</Alert>
-			</View.Item>
-			<View.Item columns={6}>
-				<Alert color="neutral">Neutral</Alert>
-			</View.Item>
-			<View.Item columns={12}>
-				<View direction="row" gap={2}>
-					<View backgroundColor="neutral" width={10} height={10}/>
-					<View backgroundColor="neutral-faded" width={10} height={10}/>
-					<View backgroundColor="primary" width={10} height={10}/>
-					<View backgroundColor="primary-faded" width={10} height={10}/>
-					<View backgroundColor="critical" width={10} height={10}/>
-					<View backgroundColor="critical-faded" width={10} height={10}/>
-					<View backgroundColor="warning" width={10} height={10}/>
-					<View backgroundColor="warning-faded" width={10} height={10}/>
-					<View backgroundColor="positive" width={10} height={10}/>
-					<View backgroundColor="positive-faded" width={10} height={10}/>
-				</View>
-			</View.Item>
-			<View.Item columns={12}>
-				<View direction="row" gap={2}>
-					<Avatar initials="RS" color="warning" variant="faded"/>
-					<Badge color="warning">Warning</Badge>
-				</View>
-			</View.Item>
-			<View.Item columns={12}>
-				<View direction="row">
-					<View padding={4} gap={4} backgroundColor="page">
-						Page
-						<View backgroundColor="neutral" padding={4}>
-							Neutral
-						</View>
-						<View backgroundColor="neutral-faded" padding={4}>
-							Neutral faded
-						</View>
-					</View>
-
-					<View padding={4} gap={4} backgroundColor="page-faded">
-						Page faded
-						<View backgroundColor="neutral" padding={4}>
-							Neutral
-						</View>
-						<View backgroundColor="neutral-faded" padding={4}>
-							Neutral faded
-						</View>
-					</View>
-				</View>
-			</View.Item>
-			<View.Item columns={6}>
-				<Card>
-					<View gap={2} align="start">
-						<Badge variant="outline" color="primary">
-							Badge
-						</Badge>
-						<DropdownMenu>
-							<DropdownMenu.Trigger>
-								{(attributes) => (<Button variant="faded" attributes={attributes}>
-										Menu
-									</Button>)}
-							</DropdownMenu.Trigger>
-							<DropdownMenu.Content>
-								<DropdownMenu.Item>Item 1</DropdownMenu.Item>
-								<DropdownMenu.Item>Item 1</DropdownMenu.Item>
-							</DropdownMenu.Content>
-						</DropdownMenu>
-					</View>
-				</Card>
-			</View.Item>
-		</View>
-	</View>);
-export const base = () => (<Example>
-		<Example.Item title="custom runtime theme">
-			<style>{css}</style>
-			<Theme name="green">
-				<Button color="primary">Primary button</Button>
-			</Theme>
-		</Example.Item>
-		<Example.Item title="on colors generation">
-			<style>{css2}</style>
-			<Theme name="peach">
-				<Button color="primary">Primary button</Button>
-			</Theme>
-		</Example.Item>
-	</Example>);
-export const generation = () => (<Example>
-		<Example.Item>
-			<style>{cssGenerated}</style>
-			<View gap={4}>
-				<View.Item>Generated theme</View.Item>
-				<Theme name="generated">{componentExamples}</Theme>
-				{/* <View.Item>Reshaped theme</View.Item> */}
-				{/* <Theme name="reshaped">{componentExamples}</Theme> */}
-			</View>
-		</Example.Item>
-	</Example>);
-const onColorsCss = getThemeCSS("on-color", {
-    color: {
-        backgroundPrimary: { hex: "#1abc9c", hexDark: "#16a085" },
-        backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#1abc9c" },
-    },
-}, {
-    onColorValues: {
-        primary: {
-            hexLight: "#d1fae5",
-            hexDark: "#022c22",
-        },
-    },
-});
-export const onColors = () => (<Example>
-		<Example.Item title="custom on color values">
-			<style>{onColorsCss}</style>
-			<Theme name="on-color">
-				<View gap={2} direction="row">
-					<Button color="primary">Primary button</Button>
-					<Button color="critical">Critical button</Button>
-				</View>
-			</Theme>
-		</Example.Item>
-	</Example>);

package/themes/_generator/tokens/color/color.types.d.ts

@@ -1,7 +0,0 @@
-export type Name = "foregroundNeutral" | "foregroundNeutralFaded" | "foregroundDisabled" | "foregroundPrimary" | "foregroundCritical" | "foregrounwarning" | "foregroundPositive" | "borderNeutral" | "borderNeutralFaded" | "borderDisabled" | "borderPrimary" | "borderPrimaryFaded" | "borderCritical" | "borderCriticalFaded" | "borderwarning" | "borderwarningFaded" | "borderPositive" | "borderPositiveFaded" | "backgroundNeutral" | "backgroundNeutralFaded" | "backgroundNeutralHighlighted" | "backgroundDisabled" | "backgroundDisabledFaded" | "backgroundPrimary" | "backgroundPrimaryFaded" | "backgroundPrimaryHighlighted" | "backgroundCritical" | "backgroundCriticalFaded" | "backgroundCriticalHighlighted" | "backgroundWarning" | "backgroundWarningFaded" | "backgroundWarningHighlighted" | "backgroundPositive" | "backgroundPositiveFaded" | "backgroundPositiveHighlighted" | "backgroundPage" | "backgroundPageFaded" | "backgroundElevationBase" | "backgroundElevationRaised" | "backgroundElevationOverlay" | "brand" | "white" | "black";
-export type GeneratedOnName = "onBackgroundNeutral" | "onBackgroundPrimary" | "onBackgroundPositive" | "onBackgroundWarning" | "onBackgroundCritical";
-export type GeneratedRGBName = "rgbBackgroundNeutral" | "rgbBackgroundNeutralFaded" | "rgbBackgroundNeutralHighlighted" | "rgbBackgroundDisabled" | "rgbBackgroundDisabledFaded" | "rgbBackgroundPrimary" | "rgbBackgroundPrimaryFaded" | "rgbBackgroundPrimaryHighlighted" | "rgbBackgroundCritical" | "rgbBackgroundCriticalFaded" | "rgbBackgroundCriticalHighlighted" | "rgbBackgroundWarning" | "rgbBackgroundWarningFaded" | "rgbBackgroundWarningHighlighted" | "rgbBackgroundPositive" | "rgbBackgroundPositiveFaded" | "rgbBackgroundPositiveHighlighted" | "rgbBackgroundPage" | "rgbBackgroundPageFaded" | "rgbBackgroundElevationBase" | "rgbBackgroundElevationRaised" | "rgbBackgroundElevationOverlay";
-export type Token = {
-    hex: string;
-    hexDark?: string;
-};