@cairntale/chimeling-react 1.0.0-alpha.4 → 1.0.0-alpha.6

package/dist/theme/context.d.ts

@@ -0,0 +1,2 @@
+import "./tokens.js";
+import { ReactNode } from "react";

package/dist/theme/context.js

@@ -0,0 +1,15 @@
+"use client";
+import { createContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/theme/context.tsx
+const ThemeContext = createContext(null);
+function ThemeProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children
+	});
+}
+//#endregion
+export { ThemeProvider };
+
+//# sourceMappingURL=context.js.map

package/dist/theme/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../src/theme/context.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type ReactNode } from 'react'\nimport type { ThemeContextValue } from './tokens'\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null)\n\nexport function ThemeProvider({\n  value,\n  children,\n}: {\n  value: ThemeContextValue\n  children: ReactNode\n}) {\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\nexport function useThemeContext(): ThemeContextValue {\n  return useContext(ThemeContext) ?? {}\n}\n"],"mappings":";;;;AAKA,MAAM,eAAe,cAAwC,IAAI;AAEjE,SAAgB,cAAc,EAC5B,OACA,YAIC;CACD,OAAO,oBAAC,aAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAC/E"}

package/dist/theme/index.d.ts

@@ -0,0 +1,4 @@
+import "./color-system.js";
+import { ChimelingColorScheme } from "./tokens.js";
+import "./context.js";
+export type { ChimelingColorScheme };

package/dist/theme/index.js

@@ -0,0 +1,4 @@
+import { generateContrastColor } from "./color-system.js";
+import { DEFAULT_ACCENT_COLOR, rootStyle } from "./tokens.js";
+import { ThemeProvider } from "./context.js";
+export { DEFAULT_ACCENT_COLOR, ThemeProvider, generateContrastColor, rootStyle };

package/dist/theme/tokens.d.ts

@@ -0,0 +1,6 @@
+import "@emotion/react";
+//#region src/theme/tokens.d.ts
+type ChimelingColorScheme = 'inherit' | 'light' | 'dark';
+//#endregion
+export { ChimelingColorScheme };
+//# sourceMappingURL=tokens.d.ts.map

package/dist/theme/tokens.js

@@ -0,0 +1,69 @@
+import { generateColorFamily, generateContrastColor, lightDarkFamilies } from "./color-system.js";
+//#region src/theme/tokens.ts
+const DEFAULT_ACCENT_COLOR = "oklch(0.57 0.25 256.49)";
+const DEFAULT_ACCENT_CONTRAST_COLOR = generateContrastColor(DEFAULT_ACCENT_COLOR);
+const scaleSpacing = (pixels) => `calc(${pixels}px * var(--chl-spacing-scaling, 1))`;
+const scaleFontSize = (pixels) => `calc(${pixels}px * var(--chl-font-size-scaling, 1))`;
+const scaleBorderRadius = (pixels) => `calc(${pixels}px * var(--chl-border-radius-scaling, 1))`;
+const accentFamily = (accentColor, accentContrastColor) => generateColorFamily("background", "accent", `var(--chl-accent, ${accentColor})`, `var(--chl-accent-contrast, ${accentContrastColor})`);
+const lightColorFamilies = {
+	...generateColorFamily("background", "primary", "oklch(1 0 0)", "var(--chl-color-text-primary)"),
+	...generateColorFamily("background", "secondary", "oklch(0.985 0 0)", "var(--chl-color-text-secondary)"),
+	...generateColorFamily("text", "primary", "oklch(0.25 0 0)"),
+	...generateColorFamily("text", "secondary", "oklch(0.46 0 0)"),
+	...generateColorFamily("text", "tertiary", "oklch(0.627 0 0)")
+};
+const darkColorFamilies = {
+	...generateColorFamily("background", "primary", "oklch(0.134 0 0)", "var(--chl-color-text-primary)", "dark"),
+	...generateColorFamily("background", "secondary", "oklch(0.191 0 0)", "var(--chl-color-text-secondary)", "dark"),
+	...generateColorFamily("text", "primary", "oklch(0.949 0 0)", false, "dark"),
+	...generateColorFamily("text", "secondary", "oklch(0.792 0 0)", false, "dark"),
+	...generateColorFamily("text", "tertiary", "oklch(0.627 0 0)", false, "dark")
+};
+const rootTokenFamilies = {
+	"--chl-spacing-3xs": scaleSpacing(2),
+	"--chl-spacing-2xs": scaleSpacing(4),
+	"--chl-spacing-xs": scaleSpacing(8),
+	"--chl-spacing-sm": scaleSpacing(12),
+	"--chl-spacing-md": scaleSpacing(16),
+	"--chl-spacing-lg": scaleSpacing(24),
+	"--chl-spacing-xl": scaleSpacing(32),
+	"--chl-spacing-2xl": scaleSpacing(40),
+	"--chl-spacing-3xl": scaleSpacing(48),
+	"--chl-spacing-4xl": scaleSpacing(64),
+	"--chl-border-radius-md": scaleBorderRadius(8),
+	"--chl-border-radius-lg": scaleBorderRadius(12),
+	"--chl-border-radius-full": scaleBorderRadius(999),
+	"--chl-font-size-xs": scaleFontSize(12),
+	"--chl-font-size-sm": scaleFontSize(14),
+	"--chl-font-size-md": scaleFontSize(16),
+	"--chl-font-family": "inherit",
+	"--chl-ring": "0 0 0 1px color-mix(in srgb, transparent, light-dark(#000, #fff) 7%)",
+	"--chl-shadow-subtle": "0 2px 3px -1px rgb(0 0 0 / 0.08), 0 1px 0 0 rgb(0 0 0 / 0.02)",
+	"--chl-shadow-elevated": "0 5px 15px 0 color-mix(in srgb, transparent, #000 8%), 0 15px 35px -5px color-mix(in srgb, transparent, #000 20%)",
+	...accentFamily(DEFAULT_ACCENT_COLOR, DEFAULT_ACCENT_CONTRAST_COLOR),
+	...lightDarkFamilies(lightColorFamilies, darkColorFamilies),
+	"--chl-color-border-accent": "oklch(1 0 0 / 0.2)",
+	"--chl-color-border-primary": "oklch(0.627 0 0 / 0.133)",
+	"--chl-color-border-secondary": "oklch(0.627 0 0 / 0.133)",
+	"--chl-border-accent": "1px solid var(--chl-color-border-accent)",
+	"--chl-border-primary": "1px solid var(--chl-color-border-primary)",
+	"--chl-border-secondary": "1px solid var(--chl-color-border-secondary)"
+};
+function rootStyle(theme) {
+	const vars = { ...rootTokenFamilies };
+	if (theme.accentColor !== void 0) {
+		const accentContrastColor = generateContrastColor(theme.accentColor);
+		vars["--chl-accent"] = theme.accentColor;
+		vars["--chl-accent-contrast"] = accentContrastColor;
+		Object.assign(vars, accentFamily(theme.accentColor, accentContrastColor));
+	}
+	if (theme.spacingScaling !== void 0) vars["--chl-spacing-scaling"] = String(theme.spacingScaling);
+	if (theme.fontSizeScaling !== void 0) vars["--chl-font-size-scaling"] = String(theme.fontSizeScaling);
+	if (theme.borderRadiusScaling !== void 0) vars["--chl-border-radius-scaling"] = String(theme.borderRadiusScaling);
+	return vars;
+}
+//#endregion
+export { DEFAULT_ACCENT_COLOR, DEFAULT_ACCENT_CONTRAST_COLOR, rootStyle };
+
+//# sourceMappingURL=tokens.js.map

package/dist/theme/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/theme/tokens.ts"],"sourcesContent":["import type { CSSObject } from '@emotion/react'\nimport { generateColorFamily, generateContrastColor, lightDarkFamilies } from './color-system'\n\nexport const DEFAULT_ACCENT_COLOR = 'oklch(0.57 0.25 256.49)'\nexport const DEFAULT_SPACING_SCALING = 1\nexport const DEFAULT_FONT_SIZE_SCALING = 1\nexport const DEFAULT_BORDER_RADIUS_SCALING = 1\nexport const DEFAULT_ACCENT_CONTRAST_COLOR = generateContrastColor(DEFAULT_ACCENT_COLOR)\n\nconst scaleSpacing = (pixels: number) =>\n  `calc(${pixels}px * var(--chl-spacing-scaling, ${DEFAULT_SPACING_SCALING}))`\nconst scaleFontSize = (pixels: number) =>\n  `calc(${pixels}px * var(--chl-font-size-scaling, ${DEFAULT_FONT_SIZE_SCALING}))`\nconst scaleBorderRadius = (pixels: number) =>\n  `calc(${pixels}px * var(--chl-border-radius-scaling, ${DEFAULT_BORDER_RADIUS_SCALING}))`\n\nconst accentFamily = (accentColor: string, accentContrastColor: string) =>\n  generateColorFamily(\n    'background',\n    'accent',\n    `var(--chl-accent, ${accentColor})`,\n    `var(--chl-accent-contrast, ${accentContrastColor})`,\n  )\n\nconst lightColorFamilies = {\n  ...generateColorFamily('background', 'primary', 'oklch(1 0 0)', 'var(--chl-color-text-primary)'),\n  ...generateColorFamily(\n    'background',\n    'secondary',\n    'oklch(0.985 0 0)',\n    'var(--chl-color-text-secondary)',\n  ),\n  ...generateColorFamily('text', 'primary', 'oklch(0.25 0 0)'),\n  ...generateColorFamily('text', 'secondary', 'oklch(0.46 0 0)'),\n  ...generateColorFamily('text', 'tertiary', 'oklch(0.627 0 0)'),\n}\n\nconst darkColorFamilies = {\n  ...generateColorFamily(\n    'background',\n    'primary',\n    'oklch(0.134 0 0)',\n    'var(--chl-color-text-primary)',\n    'dark',\n  ),\n  ...generateColorFamily(\n    'background',\n    'secondary',\n    'oklch(0.191 0 0)',\n    'var(--chl-color-text-secondary)',\n    'dark',\n  ),\n  ...generateColorFamily('text', 'primary', 'oklch(0.949 0 0)', false, 'dark'),\n  ...generateColorFamily('text', 'secondary', 'oklch(0.792 0 0)', false, 'dark'),\n  ...generateColorFamily('text', 'tertiary', 'oklch(0.627 0 0)', false, 'dark'),\n}\n\nconst rootTokenFamilies = {\n  '--chl-spacing-3xs': scaleSpacing(2),\n  '--chl-spacing-2xs': scaleSpacing(4),\n  '--chl-spacing-xs': scaleSpacing(8),\n  '--chl-spacing-sm': scaleSpacing(12),\n  '--chl-spacing-md': scaleSpacing(16),\n  '--chl-spacing-lg': scaleSpacing(24),\n  '--chl-spacing-xl': scaleSpacing(32),\n  '--chl-spacing-2xl': scaleSpacing(40),\n  '--chl-spacing-3xl': scaleSpacing(48),\n  '--chl-spacing-4xl': scaleSpacing(64),\n\n  '--chl-border-radius-md': scaleBorderRadius(8),\n  '--chl-border-radius-lg': scaleBorderRadius(12),\n  '--chl-border-radius-full': scaleBorderRadius(999),\n\n  '--chl-font-size-xs': scaleFontSize(12),\n  '--chl-font-size-sm': scaleFontSize(14),\n  '--chl-font-size-md': scaleFontSize(16),\n  '--chl-font-family': 'inherit',\n\n  '--chl-ring': '0 0 0 1px color-mix(in srgb, transparent, light-dark(#000, #fff) 7%)',\n  '--chl-shadow-subtle': '0 2px 3px -1px rgb(0 0 0 / 0.08), 0 1px 0 0 rgb(0 0 0 / 0.02)',\n  '--chl-shadow-elevated':\n    '0 5px 15px 0 color-mix(in srgb, transparent, #000 8%), 0 15px 35px -5px color-mix(in srgb, transparent, #000 20%)',\n\n  ...accentFamily(DEFAULT_ACCENT_COLOR, DEFAULT_ACCENT_CONTRAST_COLOR),\n  ...lightDarkFamilies(lightColorFamilies, darkColorFamilies),\n\n  '--chl-color-border-accent': 'oklch(1 0 0 / 0.2)',\n  '--chl-color-border-primary': 'oklch(0.627 0 0 / 0.133)',\n  '--chl-color-border-secondary': 'oklch(0.627 0 0 / 0.133)',\n  '--chl-border-accent': '1px solid var(--chl-color-border-accent)',\n  '--chl-border-primary': '1px solid var(--chl-color-border-primary)',\n  '--chl-border-secondary': '1px solid var(--chl-color-border-secondary)',\n} satisfies CSSObject\n\nexport type ChimelingColorScheme = 'inherit' | 'light' | 'dark'\n\nexport type ThemeContextValue = {\n  accentColor?: string\n  colorScheme?: ChimelingColorScheme\n  spacingScaling?: number\n  fontSizeScaling?: number\n  borderRadiusScaling?: number\n}\n\nexport function rootStyle(theme: ThemeContextValue): CSSObject {\n  const vars: CSSObject = { ...rootTokenFamilies }\n\n  if (theme.accentColor !== undefined) {\n    const accentContrastColor = generateContrastColor(theme.accentColor)\n    vars['--chl-accent'] = theme.accentColor\n    vars['--chl-accent-contrast'] = accentContrastColor\n    Object.assign(vars, accentFamily(theme.accentColor, accentContrastColor))\n  }\n  if (theme.spacingScaling !== undefined) {\n    vars['--chl-spacing-scaling'] = String(theme.spacingScaling)\n  }\n  if (theme.fontSizeScaling !== undefined) {\n    vars['--chl-font-size-scaling'] = String(theme.fontSizeScaling)\n  }\n  if (theme.borderRadiusScaling !== undefined) {\n    vars['--chl-border-radius-scaling'] = String(theme.borderRadiusScaling)\n  }\n\n  return vars\n}\n"],"mappings":";;AAGA,MAAa,uBAAuB;AAIpC,MAAa,gCAAgC,sBAAsB,oBAAoB;AAEvF,MAAM,gBAAgB,WACpB,QAAQ,OAAO;AACjB,MAAM,iBAAiB,WACrB,QAAQ,OAAO;AACjB,MAAM,qBAAqB,WACzB,QAAQ,OAAO;AAEjB,MAAM,gBAAgB,aAAqB,wBACzC,oBACE,cACA,UACA,qBAAqB,YAAY,IACjC,8BAA8B,oBAAoB,EACpD;AAEF,MAAM,qBAAqB;CACzB,GAAG,oBAAoB,cAAc,WAAW,gBAAgB,+BAA+B;CAC/F,GAAG,oBACD,cACA,aACA,oBACA,iCACF;CACA,GAAG,oBAAoB,QAAQ,WAAW,iBAAiB;CAC3D,GAAG,oBAAoB,QAAQ,aAAa,iBAAiB;CAC7D,GAAG,oBAAoB,QAAQ,YAAY,kBAAkB;AAC/D;AAEA,MAAM,oBAAoB;CACxB,GAAG,oBACD,cACA,WACA,oBACA,iCACA,MACF;CACA,GAAG,oBACD,cACA,aACA,oBACA,mCACA,MACF;CACA,GAAG,oBAAoB,QAAQ,WAAW,oBAAoB,OAAO,MAAM;CAC3E,GAAG,oBAAoB,QAAQ,aAAa,oBAAoB,OAAO,MAAM;CAC7E,GAAG,oBAAoB,QAAQ,YAAY,oBAAoB,OAAO,MAAM;AAC9E;AAEA,MAAM,oBAAoB;CACxB,qBAAqB,aAAa,CAAC;CACnC,qBAAqB,aAAa,CAAC;CACnC,oBAAoB,aAAa,CAAC;CAClC,oBAAoB,aAAa,EAAE;CACnC,oBAAoB,aAAa,EAAE;CACnC,oBAAoB,aAAa,EAAE;CACnC,oBAAoB,aAAa,EAAE;CACnC,qBAAqB,aAAa,EAAE;CACpC,qBAAqB,aAAa,EAAE;CACpC,qBAAqB,aAAa,EAAE;CAEpC,0BAA0B,kBAAkB,CAAC;CAC7C,0BAA0B,kBAAkB,EAAE;CAC9C,4BAA4B,kBAAkB,GAAG;CAEjD,sBAAsB,cAAc,EAAE;CACtC,sBAAsB,cAAc,EAAE;CACtC,sBAAsB,cAAc,EAAE;CACtC,qBAAqB;CAErB,cAAc;CACd,uBAAuB;CACvB,yBACE;CAEF,GAAG,aAAa,sBAAsB,6BAA6B;CACnE,GAAG,kBAAkB,oBAAoB,iBAAiB;CAE1D,6BAA6B;CAC7B,8BAA8B;CAC9B,gCAAgC;CAChC,uBAAuB;CACvB,wBAAwB;CACxB,0BAA0B;AAC5B;AAYA,SAAgB,UAAU,OAAqC;CAC7D,MAAM,OAAkB,EAAE,GAAG,kBAAkB;CAE/C,IAAI,MAAM,gBAAgB,KAAA,GAAW;EACnC,MAAM,sBAAsB,sBAAsB,MAAM,WAAW;EACnE,KAAK,kBAAkB,MAAM;EAC7B,KAAK,2BAA2B;EAChC,OAAO,OAAO,MAAM,aAAa,MAAM,aAAa,mBAAmB,CAAC;CAC1E;CACA,IAAI,MAAM,mBAAmB,KAAA,GAC3B,KAAK,2BAA2B,OAAO,MAAM,cAAc;CAE7D,IAAI,MAAM,oBAAoB,KAAA,GAC5B,KAAK,6BAA6B,OAAO,MAAM,eAAe;CAEhE,IAAI,MAAM,wBAAwB,KAAA,GAChC,KAAK,iCAAiC,OAAO,MAAM,mBAAmB;CAGxE,OAAO;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cairntale/chimeling-react",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.6",
   "private": false,
   "description": "Chimeling React library",
   "homepage": "https://chimeling.app/",
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
+    "colorjs.io": "^0.7.1",
     "date-fns": "^4.4.0",
     "dialkit": "^2.0.0",
     "es-toolkit": "^1.52.0",