beacon-ui 3.1.4

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { Button } from "./components/Button";
+export { Card } from "./components/Card";
+export { Checkbox } from "./components/Checkbox";
+export { Switch } from "./components/Switch";
+export { Input } from "./components/Input";
+export { Avatar } from "./components/Avatar";
+export { Chip } from "./components/Chip";
+export { Menu } from "./components/Menu";
+export { RadioButton } from "./components/RadioButton";
+export { ThemeProvider, useTheme, useThemeSafe } from "./providers/ThemeProvider";
+export type { Theme, HueVariant } from "./tokens/types";
+export type { ColorPrimitive, SemanticColor, SpacingToken, BackgroundToken, ForegroundToken, BorderToken, } from "./tokens/types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1,12 @@
+// Components
+export { Button } from "./components/Button";
+export { Card } from "./components/Card";
+export { Checkbox } from "./components/Checkbox";
+export { Switch } from "./components/Switch";
+export { Input } from "./components/Input";
+export { Avatar } from "./components/Avatar";
+export { Chip } from "./components/Chip";
+export { Menu } from "./components/Menu";
+export { RadioButton } from "./components/RadioButton";
+// Providers
+export { ThemeProvider, useTheme, useThemeSafe } from "./providers/ThemeProvider";

package/dist/providers/ThemeProvider.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import type { Theme, HueVariant } from "../tokens/types";
+interface ThemeContextValue {
+    theme: Theme;
+    hue: HueVariant;
+    setTheme: (theme: Theme) => void;
+    setHue: (hue: HueVariant) => void;
+    toggleTheme: () => void;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: Theme;
+    defaultHue?: HueVariant;
+}
+export declare function ThemeProvider({ children, defaultTheme, defaultHue, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Safe hook that returns undefined if not within provider.
+ * Useful for optional theme access.
+ */
+export declare function useThemeSafe(): ThemeContextValue | null;
+export {};
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/providers/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEzD,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,UAAU,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAOD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAqB,EACrB,UAAsB,GACvB,EAAE,kBAAkB,2CA+EpB;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAED;;;GAGG;AACH,wBAAgB,YAAY,IAAI,iBAAiB,GAAG,IAAI,CAEvD"}

package/dist/providers/ThemeProvider.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState, useCallback, } from "react";
+const ThemeContext = createContext(null);
+const THEME_STORAGE_KEY = "design-system-theme";
+const HUE_STORAGE_KEY = "design-system-hue";
+export function ThemeProvider({ children, defaultTheme = "dark", defaultHue = "hue-sky", }) {
+    const [theme, setThemeState] = useState(defaultTheme);
+    const [hue, setHueState] = useState(defaultHue);
+    const [mounted, setMounted] = useState(false);
+    // Initialize theme from storage or use default
+    useEffect(() => {
+        setMounted(true);
+        // Check localStorage first
+        const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+        const storedHue = localStorage.getItem(HUE_STORAGE_KEY);
+        if (storedTheme) {
+            setThemeState(storedTheme);
+        }
+        else {
+            // Use default theme (dark) for first-time users
+            setThemeState(defaultTheme);
+        }
+        if (storedHue) {
+            setHueState(storedHue);
+        }
+        else {
+            // Use default hue (hue-indigo) for first-time users
+            setHueState(defaultHue);
+        }
+    }, [defaultTheme, defaultHue]);
+    // Apply theme to document
+    useEffect(() => {
+        if (!mounted)
+            return;
+        const root = document.documentElement;
+        root.setAttribute("data-theme", theme);
+        root.setAttribute("data-hue", hue);
+        // Update meta theme-color for mobile browsers
+        const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+        if (metaThemeColor) {
+            metaThemeColor.setAttribute("content", theme === "dark" ? "#151414" : "#f7fafc");
+        }
+    }, [theme, hue, mounted]);
+    // Note: System preference detection removed to use dark theme as default
+    // Users can still manually change theme, which will be saved to localStorage
+    const setTheme = useCallback((newTheme) => {
+        setThemeState(newTheme);
+        localStorage.setItem(THEME_STORAGE_KEY, newTheme);
+    }, []);
+    const setHue = useCallback((newHue) => {
+        setHueState(newHue);
+        localStorage.setItem(HUE_STORAGE_KEY, newHue);
+    }, []);
+    const toggleTheme = useCallback(() => {
+        setTheme(theme === "light" ? "dark" : "light");
+    }, [theme, setTheme]);
+    return (_jsx(ThemeContext.Provider, { value: {
+            theme,
+            hue,
+            setTheme,
+            setHue,
+            toggleTheme,
+        }, children: _jsx("div", { style: { visibility: mounted ? "visible" : "hidden" }, children: children }) }));
+}
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (context === null) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+/**
+ * Safe hook that returns undefined if not within provider.
+ * Useful for optional theme access.
+ */
+export function useThemeSafe() {
+    return useContext(ThemeContext);
+}

package/dist/tokens/types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Auto-generated token types
+ * Do not edit directly - regenerate with `npm run build:tokens`
+ */
+export type ColorPrimitive = "Color.Purple.100" | "Color.Purple.200" | "Color.Purple.300" | "Color.Purple.400" | "Color.Purple.500" | "Color.Purple.600" | "Color.Purple.700" | "Color.Purple.800" | "Color.Purple.900" | "Color.Blue.100" | "Color.Blue.200" | "Color.Blue.300" | "Color.Blue.400" | "Color.Blue.500" | "Color.Blue.600" | "Color.Blue.700" | "Color.Blue.800" | "Color.Blue.900" | "Color.Chromatic.100" | "Color.Chromatic.200" | "Color.Chromatic.300" | "Color.Chromatic.400" | "Color.Chromatic.500" | "Color.Chromatic.600" | "Color.Chromatic.700" | "Color.Chromatic.800" | "Color.Chromatic.900" | "Color.Gray.50" | "Color.Gray.100" | "Color.Gray.200" | "Color.Gray.300" | "Color.Gray.400" | "Color.Gray.500" | "Color.Gray.600" | "Color.Gray.700" | "Color.Gray.800" | "Color.Gray.900" | "Color.Green.100" | "Color.Green.200" | "Color.Green.300" | "Color.Green.400" | "Color.Green.500" | "Color.Green.600" | "Color.Green.700" | "Color.Green.800" | "Color.Red.100" | "Color.Red.200" | "Color.Red.300" | "Color.Red.400" | "Color.Red.500" | "Color.Red.600" | "Color.Red.700" | "Color.Red.800" | "Color.Orange.100" | "Color.Orange.200" | "Color.Orange.300" | "Color.Orange.400" | "Color.Orange.500" | "Color.Orange.600" | "Color.Orange.700" | "Color.Orange.800" | "Color.Black.0" | "Color.Black.100" | "Color.Black.200" | "Color.Black.300" | "Color.Black.400" | "Color.Black.500" | "Color.Black.600" | "Color.Black.700" | "Color.Black.800" | "Color.Black.1000" | "Color.White.0" | "Color.White.100" | "Color.White.200" | "Color.White.300" | "Color.White.400" | "Color.White.500" | "Color.White.600" | "Color.White.700" | "Color.White.800" | "Color.White.1000";
+export type ScaleToken = "Scale.0" | "Scale.25" | "Scale.50" | "Scale.100" | "Scale.150" | "Scale.200" | "Scale.300" | "Scale.400" | "Scale.450" | "Scale.500" | "Scale.550" | "Scale.600" | "Scale.650" | "Scale.700" | "Scale.800" | "Scale.900" | "Scale.1000" | "Scale.2000";
+export type SemanticColor = "Color.Primary.100" | "Color.Primary.200" | "Color.Primary.300" | "Color.Primary.400" | "Color.Primary.500" | "Color.Primary.600" | "Color.Primary.700" | "Color.Primary.800" | "Color.Primary.900" | "Color.Neutral.50" | "Color.Neutral.100" | "Color.Neutral.200" | "Color.Neutral.300" | "Color.Neutral.400" | "Color.Neutral.500" | "Color.Neutral.600" | "Color.Neutral.700" | "Color.Neutral.800" | "Color.Neutral.White" | "Color.Neutral.Black" | "Color.Success.100" | "Color.Success.200" | "Color.Success.300" | "Color.Success.400" | "Color.Success.500" | "Color.Success.600" | "Color.Success.700" | "Color.Success.800" | "Color.Warning.100" | "Color.Warning.200" | "Color.Warning.300" | "Color.Warning.400" | "Color.Warning.500" | "Color.Warning.600" | "Color.Warning.700" | "Color.Warning.800" | "Color.Critical.100" | "Color.Critical.200" | "Color.Critical.300" | "Color.Critical.400" | "Color.Critical.500" | "Color.Critical.600" | "Color.Critical.700" | "Color.Critical.800" | "Color.Alpha-Neutral.White-0" | "Color.Alpha-Neutral.White-100" | "Color.Alpha-Neutral.White-200" | "Color.Alpha-Neutral.White-300" | "Color.Alpha-Neutral.White-400" | "Color.Alpha-Neutral.White-500" | "Color.Alpha-Neutral.White-600" | "Color.Alpha-Neutral.White-700" | "Color.Alpha-Neutral.White-800" | "Color.Alpha-Neutral.White-1000" | "Color.Alpha-Neutral.Black-0" | "Color.Alpha-Neutral.Black-100" | "Color.Alpha-Neutral.Black-200" | "Color.Alpha-Neutral.Black-300" | "Color.Alpha-Neutral.Black-400" | "Color.Alpha-Neutral.Black-500" | "Color.Alpha-Neutral.Black-600" | "Color.Alpha-Neutral.Black-700" | "Color.Alpha-Neutral.Black-800" | "Color.Alpha-Neutral.Black-1000";
+export type SpacingToken = "Spacing.50" | "Spacing.100" | "Spacing.200" | "Spacing.300" | "Spacing.400" | "Spacing.450" | "Spacing.500" | "Spacing.600" | "Spacing.650" | "Spacing.700" | "Spacing.800" | "Spacing.900" | "Spacing.1000" | "Spacing.2000" | "Spacing.None";
+export type BackgroundToken = "Background.White" | "Background.Page_Primary" | "Background.Page_Secondary" | "Background.Page_Tertiary" | "Background.Disabled" | "Background.Primary" | "Background.Primary_Tonal" | "Background.Primary_Pressed" | "Background.Primary_Disabled" | "Background.Primary_Dark" | "Background.Primary-On_Hover" | "Background.Primary_Tonal-On_Hover" | "Background.Primary-On_Focused" | "Background.Success" | "Background.Success_Tonal" | "Background.Success_Dark" | "Background.Success_Disabled" | "Background.Success-On_Hover" | "Background.Warning" | "Background.Warning_Tonal" | "Background.Warning_Dark" | "Background.Warning_Disabled" | "Background.Warning-On_Hover" | "Background.Critical" | "Background.Critical_Tonal" | "Background.Critical_Dark" | "Background.Critical_Disabled" | "Background.Critical-On_Hover" | "Background.Transparent";
+export type ForegroundToken = "Foreground.Neutral" | "Foreground.Neutral_Secondary" | "Foreground.Neutral_Tertiary" | "Foreground.Primary" | "Foreground.Primary_Disabled" | "Foreground.Primary_Pressed" | "Foreground.Primary_-_On_Tonal" | "Foreground.Primary-_On_Focus" | "Foreground.Primary-_On_Hover" | "Foreground.Critical" | "Foreground.Critical_Tonal" | "Foreground.Critical-_On_Tonal" | "Foreground.Warning" | "Foreground.Warning-_On_Tonal" | "Foreground.Success" | "Foreground.Success-_On_Tonal" | "Foreground.On_Action" | "Foreground.White" | "Foreground.Disabled" | "Foreground.On_Disabled";
+export type BorderToken = "Border.Strong" | "Border.Strong-100" | "Border.Strong-200" | "Border.Neutral_Primary" | "Border.Neutral_Secondary" | "Border.Neutral_Tertiary" | "Border.Primary" | "Border.Primary_Tonal" | "Border.Primary_Disabled" | "Border.Primary-_On_Hover" | "Border.Primary_Pressed" | "Border.Critical" | "Border.Critical_Tonal" | "Border.Warning" | "Border.Warning_Tonal" | "Border.Success" | "Border.Success_Tonal" | "Border.On_Action" | "Border.White" | "Border.Disabled";
+export type Theme = "light" | "dark";
+export type HueVariant = "chromatic-prime" | "hue-sky" | "hue-indigo";
+//# sourceMappingURL=types.d.ts.map

package/dist/tokens/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}

package/dist/tokens/types.js

@@ -0,0 +1,5 @@
+/**
+ * Auto-generated token types
+ * Do not edit directly - regenerate with `npm run build:tokens`
+ */
+export {};

package/dist/utils/patternPaths.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Background pattern configurations
+ * Patterns are 128px x 128px frames with tiled images inside
+ * Images automatically tile to fill the space while maintaining pattern
+ */
+export type PatternType = "default" | "cubes" | "mathematics" | "dots" | "diagonal" | "smudge" | "paper" | "denim" | "squares" | "mosaic" | "cotton";
+export interface PatternConfig {
+    imageUrl: string;
+    backgroundSize: string;
+    backgroundPosition?: string;
+    inset?: string;
+}
+/**
+ * Pattern configurations with image URLs and tiling settings
+ * Note: These URLs are from Figma and expire after 7 days.
+ * For production, download these images and store them in public/images/patterns/
+ */
+export declare const PATTERN_CONFIGS: Record<PatternType, PatternConfig>;
+/**
+ * Get pattern configuration by type
+ */
+export declare function getPatternConfig(type?: PatternType): PatternConfig;
+/**
+ * Get pattern image URL
+ * For production, replace with local paths: `/images/patterns/${type}.png`
+ */
+export declare function getPatternImageUrl(type: PatternType): string;
+//# sourceMappingURL=patternPaths.d.ts.map

package/dist/utils/patternPaths.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"patternPaths.d.ts","sourceRoot":"","sources":["../../src/utils/patternPaths.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,OAAO,GACP,aAAa,GACb,MAAM,GACN,UAAU,GACV,QAAQ,GACR,OAAO,GACP,OAAO,GACP,SAAS,GACT,QAAQ,GACR,QAAQ,CAAC;AAEb,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,WAAW,EAAE,aAAa,CAgE9D,CAAC;AAEF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,GAAE,WAAuB,GAAG,aAAa,CAE7E;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAM5D"}

package/dist/utils/patternPaths.js

@@ -0,0 +1,92 @@
+/**
+ * Background pattern configurations
+ * Patterns are 128px x 128px frames with tiled images inside
+ * Images automatically tile to fill the space while maintaining pattern
+ */
+/**
+ * Pattern configurations with image URLs and tiling settings
+ * Note: These URLs are from Figma and expire after 7 days.
+ * For production, download these images and store them in public/images/patterns/
+ */
+export const PATTERN_CONFIGS = {
+    default: {
+        imageUrl: "", // No pattern for default
+        backgroundSize: "128px 128px",
+    },
+    cubes: {
+        imageUrl: "https://www.figma.com/api/mcp/asset/3594165a-11de-4be4-818c-90c23daf0172",
+        backgroundSize: "33.5px 50px",
+        backgroundPosition: "top left",
+    },
+    mathematics: {
+        imageUrl: "https://www.figma.com/api/mcp/asset/db1da532-dc86-42e2-8edb-cebd1f4583d9",
+        backgroundSize: "64px 128px",
+        backgroundPosition: "top left",
+        inset: "0 -322px -322px 0",
+    },
+    dots: {
+        imageUrl: "https://www.figma.com/api/mcp/asset/c320aab8-9413-4f04-b5d9-5dab473bf72c",
+        backgroundSize: "186px 186px",
+        backgroundPosition: "top left",
+        inset: "0 -322px -322px 0",
+    },
+    diagonal: {
+        imageUrl: "https://www.figma.com/api/mcp/asset/63f95452-d091-48c8-9315-17b2db88811f",
+        backgroundSize: "7px 7px",
+        backgroundPosition: "top left",
+        inset: "0 -322px -322px 0",
+    },
+    smudge: {
+        imageUrl: "https://www.figma.com/api/mcp/asset/953c58bc-519e-453a-801e-aa7771123bf0",
+        backgroundSize: "200px 200px",
+        backgroundPosition: "top left",
+        inset: "0 -322px -322px 0",
+    },
+    paper: {
+        imageUrl: "https://www.figma.com/api/mcp/asset/6cac21b4-e9cb-4b07-9655-9da328879b35",
+        backgroundSize: "158px 158px",
+        backgroundPosition: "top left",
+        inset: "0 -322px -322px 0",
+    },
+    denim: {
+        imageUrl: "https://www.figma.com/api/mcp/asset/df4b639a-4aa8-47b3-a356-1704c5d0e8ca",
+        backgroundSize: "210px 163px",
+        backgroundPosition: "top left",
+        inset: "0 -322px -322px 0",
+    },
+    squares: {
+        imageUrl: "https://www.figma.com/api/mcp/asset/7d44ab02-5237-4466-9957-80d02eac70a8",
+        backgroundSize: "32px 32px",
+        backgroundPosition: "top left",
+        inset: "0 -322px -322px 0",
+    },
+    mosaic: {
+        imageUrl: "https://www.figma.com/api/mcp/asset/d78c45bb-6e59-4444-a78b-740387c8d790",
+        backgroundSize: "355px 288px",
+        backgroundPosition: "top left",
+        inset: "0 -322px -322px 0",
+    },
+    cotton: {
+        imageUrl: "https://www.figma.com/api/mcp/asset/9010e582-f104-4247-9a42-450d3c28fa71",
+        backgroundSize: "157.5px 157.5px",
+        backgroundPosition: "top left",
+        inset: "0 -322px -322px 0",
+    },
+};
+/**
+ * Get pattern configuration by type
+ */
+export function getPatternConfig(type = "default") {
+    return PATTERN_CONFIGS[type] || PATTERN_CONFIGS.default;
+}
+/**
+ * Get pattern image URL
+ * For production, replace with local paths: `/images/patterns/${type}.png`
+ */
+export function getPatternImageUrl(type) {
+    const config = getPatternConfig(type);
+    if (type === "default" || !config.imageUrl) {
+        return "";
+    }
+    return config.imageUrl;
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "beacon-ui",
+  "version": "3.1.4",
+  "description": "Beacon Design System - Components and tokens",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "tokens",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./tokens": "./tokens/generated/index.css",
+    "./tokens/*": "./tokens/generated/*.css"
+  },
+  "scripts": {
+    "build": "tsc && npm run build:tokens",
+    "build:tokens": "tsx ../../scripts/build-tokens.ts --output-dir=./tokens/generated --types-output=./src/tokens/types.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "design-system",
+    "components",
+    "react",
+    "tokens"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/raza-ahmed/beacon.git"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
+

package/tokens/generated/brand-dark.css

@@ -0,0 +1,86 @@
+/* Brand tokens - dark theme */
+[data-theme="dark"] {
+  --bg-white: var(--color-neutral-800);
+  --bg-page-primary: var(--color-neutral-800);
+  --bg-page-secondary: var(--color-neutral-700);
+  --bg-page-tertiary: var(--color-neutral-600);
+  --bg-disabled: var(--color-neutral-700);
+  --bg-primary: var(--color-primary-500);
+  --bg-primary-tonal: var(--color-primary-800);
+  --bg-primary-pressed: var(--color-primary-700);
+  --bg-primary-disabled: var(--color-primary-700);
+  --bg-primary-dark: var(--color-primary-100);
+  --bg-primary-on-hover: var(--color-primary-400);
+  --bg-primary-tonal-on-hover: var(--color-primary-700);
+  --bg-primary-on-focused: var(--color-primary-400);
+  --bg-success: var(--color-success-500);
+  --bg-success-tonal: var(--color-success-800);
+  --bg-success-dark: var(--color-success-100);
+  --bg-success-disabled: var(--color-success-700);
+  --bg-success-on-hover: var(--color-success-400);
+  --bg-warning: var(--color-warning-500);
+  --bg-warning-tonal: var(--color-warning-800);
+  --bg-warning-dark: var(--color-warning-100);
+  --bg-warning-disabled: var(--color-warning-700);
+  --bg-warning-on-hover: var(--color-warning-400);
+  --bg-critical: var(--color-critical-500);
+  --bg-critical-tonal: var(--color-critical-800);
+  --bg-critical-dark: var(--color-critical-100);
+  --bg-critical-disabled: var(--color-critical-700);
+  --bg-critical-on-hover: var(--color-critical-400);
+  --bg-transparent: var(--color-alpha-neutral-black-0);
+  --fg-neutral: var(--color-neutral-100);
+  --fg-neutral-secondary: var(--color-neutral-200);
+  --fg-neutral-tertiary: var(--color-neutral-300);
+  --fg-primary: var(--color-primary-500);
+  --fg-primary-disabled: var(--color-primary-700);
+  --fg-primary-pressed: var(--color-primary-400);
+  --fg-primary-on-tonal: var(--color-primary-300);
+  --fg-primary-on-focus: var(--color-primary-500);
+  --fg-primary-on-hover: var(--color-primary-400);
+  --fg-critical: var(--color-critical-500);
+  --fg-critical-tonal: var(--color-critical-800);
+  --fg-critical-on-tonal: var(--color-critical-100);
+  --fg-warning: var(--color-orange-500);
+  --fg-warning-on-tonal: var(--color-orange-100);
+  --fg-success: var(--color-green-500);
+  --fg-success-on-tonal: var(--color-green-100);
+  --fg-on-action: var(--color-alpha-neutral-white-1000);
+  --fg-white: var(--color-alpha-neutral-white-1000);
+  --fg-disabled: var(--color-neutral-400);
+  --fg-on-disabled: var(--color-neutral-300);
+  --border-strong: var(--color-alpha-neutral-white-1000);
+  --border-strong-100: var(--color-alpha-neutral-white-100);
+  --border-strong-200: var(--color-alpha-neutral-white-200);
+  --border-neutral-primary: var(--color-neutral-600);
+  --border-neutral-secondary: var(--color-neutral-700);
+  --border-neutral-tertiary: var(--color-neutral-800);
+  --border-primary: var(--color-primary-500);
+  --border-primary-tonal: var(--color-primary-800);
+  --border-primary-disabled: var(--color-primary-700);
+  --border-primary-on-hover: var(--color-primary-400);
+  --border-primary-pressed: var(--color-primary-400);
+  --border-critical: var(--color-critical-500);
+  --border-critical-tonal: var(--color-critical-800);
+  --border-warning: var(--color-orange-500);
+  --border-warning-tonal: var(--color-orange-800);
+  --border-success: var(--color-green-500);
+  --border-success-tonal: var(--color-green-800);
+  --border-on-action: var(--color-alpha-neutral-white-1000);
+  --border-white: var(--color-alpha-neutral-white-1000);
+  --border-disabled: var(--color-neutral-700);
+  --static-light-on-dark: var(--color-alpha-neutral-black-1000);
+  --static-primary: var(--color-primary-500);
+  --static-primary-black: var(--color-primary-900);
+  --static-white: var(--color-alpha-neutral-white-1000);
+  --static-black: var(--color-alpha-neutral-black-1000);
+  --util-overlay-dull: var(--color-alpha-neutral-black-200);
+  --util-overlay-light: var(--color-alpha-neutral-black-300);
+  --util-overlay-medium: var(--color-alpha-neutral-black-500);
+  --util-overlay-strong: var(--color-alpha-neutral-black-700);
+  --shadow-none: var(--color-alpha-neutral-black-0);
+  --shadow-subtle: var(--color-alpha-neutral-black-100);
+  --shadow-normal: var(--color-alpha-neutral-black-200);
+  --shadow-medium: var(--color-alpha-neutral-black-300);
+  --shadow-strong: var(--color-alpha-neutral-black-400);
+}

package/tokens/generated/brand-light.css

@@ -0,0 +1,86 @@
+/* Brand tokens - light theme */
+:root, [data-theme="light"] {
+  --bg-white: var(--color-alpha-neutral-white-1000);
+  --bg-page-primary: var(--color-neutral-50);
+  --bg-page-secondary: var(--color-neutral-100);
+  --bg-page-tertiary: var(--color-neutral-200);
+  --bg-disabled: var(--color-neutral-100);
+  --bg-primary: var(--color-primary-500);
+  --bg-primary-tonal: var(--color-primary-100);
+  --bg-primary-pressed: var(--color-primary-700);
+  --bg-primary-disabled: var(--color-primary-200);
+  --bg-primary-dark: var(--color-primary-800);
+  --bg-primary-on-hover: var(--color-primary-700);
+  --bg-primary-tonal-on-hover: var(--color-primary-200);
+  --bg-primary-on-focused: var(--color-primary-600);
+  --bg-success: var(--color-green-500);
+  --bg-success-tonal: var(--color-success-100);
+  --bg-success-dark: var(--color-green-800);
+  --bg-success-disabled: var(--color-green-300);
+  --bg-success-on-hover: var(--color-green-600);
+  --bg-warning: var(--color-warning-500);
+  --bg-warning-tonal: var(--color-warning-100);
+  --bg-warning-dark: var(--color-warning-800);
+  --bg-warning-disabled: var(--color-warning-300);
+  --bg-warning-on-hover: var(--color-warning-600);
+  --bg-critical: var(--color-critical-500);
+  --bg-critical-tonal: var(--color-critical-100);
+  --bg-critical-dark: var(--color-critical-800);
+  --bg-critical-disabled: var(--color-critical-300);
+  --bg-critical-on-hover: var(--color-critical-600);
+  --bg-transparent: var(--color-alpha-neutral-white-0);
+  --fg-neutral: var(--color-neutral-800);
+  --fg-neutral-secondary: var(--color-neutral-700);
+  --fg-neutral-tertiary: var(--color-neutral-600);
+  --fg-primary: var(--color-primary-500);
+  --fg-primary-disabled: var(--color-primary-400);
+  --fg-primary-pressed: var(--color-primary-700);
+  --fg-primary-on-tonal: var(--color-primary-500);
+  --fg-primary-on-focus: var(--color-primary-500);
+  --fg-primary-on-hover: var(--color-primary-600);
+  --fg-critical: var(--color-critical-500);
+  --fg-critical-tonal: var(--color-critical-100);
+  --fg-critical-on-tonal: var(--color-critical-500);
+  --fg-warning: var(--color-orange-500);
+  --fg-warning-on-tonal: var(--color-orange-500);
+  --fg-success: var(--color-green-500);
+  --fg-success-on-tonal: var(--color-green-500);
+  --fg-on-action: var(--color-alpha-neutral-white-1000);
+  --fg-white: var(--color-alpha-neutral-white-1000);
+  --fg-disabled: var(--color-neutral-300);
+  --fg-on-disabled: var(--color-neutral-400);
+  --border-strong: var(--color-neutral-800);
+  --border-strong-100: var(--color-alpha-neutral-black-100);
+  --border-strong-200: var(--color-alpha-neutral-black-200);
+  --border-neutral-primary: var(--color-neutral-400);
+  --border-neutral-secondary: var(--color-neutral-300);
+  --border-neutral-tertiary: var(--color-neutral-200);
+  --border-primary: var(--color-primary-500);
+  --border-primary-tonal: var(--color-primary-100);
+  --border-primary-disabled: var(--color-primary-300);
+  --border-primary-on-hover: var(--color-primary-600);
+  --border-primary-pressed: var(--color-primary-700);
+  --border-critical: var(--color-critical-500);
+  --border-critical-tonal: var(--color-critical-100);
+  --border-warning: var(--color-orange-500);
+  --border-warning-tonal: var(--color-orange-100);
+  --border-success: var(--color-green-500);
+  --border-success-tonal: var(--color-green-100);
+  --border-on-action: var(--color-alpha-neutral-white-1000);
+  --border-white: var(--color-alpha-neutral-white-1000);
+  --border-disabled: var(--color-neutral-300);
+  --static-light-on-dark: var(--color-alpha-neutral-black-1000);
+  --static-primary: var(--color-primary-500);
+  --static-primary-black: var(--color-primary-900);
+  --static-white: var(--color-alpha-neutral-white-1000);
+  --static-black: var(--color-alpha-neutral-black-1000);
+  --util-overlay-dull: var(--color-alpha-neutral-black-200);
+  --util-overlay-light: var(--color-alpha-neutral-black-300);
+  --util-overlay-medium: var(--color-alpha-neutral-black-500);
+  --util-overlay-strong: var(--color-alpha-neutral-black-700);
+  --shadow-none: var(--color-alpha-neutral-black-0);
+  --shadow-subtle: var(--color-alpha-neutral-black-100);
+  --shadow-normal: var(--color-alpha-neutral-black-200);
+  --shadow-medium: var(--color-alpha-neutral-black-300);
+  --shadow-strong: var(--color-alpha-neutral-black-400);
+}

package/tokens/generated/effects.css

@@ -0,0 +1,10 @@
+/* Effect tokens - shadows */
+:root {
+  --drop-shadow-0: 0px 2px 12px 0px var(--shadow-none);
+  --drop-shadow-50: 0px 1px 8px -2px var(--shadow-subtle), 0px 1px 8px -8px var(--shadow-subtle);
+  --drop-shadow-100: 0px 1px 4px 0px var(--shadow-subtle), 0px 1px 4px -2px var(--shadow-subtle);
+  --drop-shadow-200: 0px -4px 9px -6px var(--shadow-subtle), 0px 4px 6px -2px var(--shadow-subtle);
+  --drop-shadow-300: 0px -6px 16px -8px var(--shadow-subtle), 0px 4px 6px 0px var(--shadow-subtle);
+  --drop-shadow-400: 0px 12px 42px -4px var(--shadow-subtle), 0px 8px 18px -6px var(--shadow-subtle);
+  --drop-shadow-500: 0px 18px 88px -4px var(--shadow-subtle), 0px 8px 28px -6px var(--shadow-subtle);
+}