@atom-learning/components 6.6.0-beta.0 → 6.6.0-beta.2

package/dist/experiments/color-scheme/ColorScheme.config.js

@@ -1,23 +1,32 @@
 //#region src/experiments/color-scheme/ColorScheme.config.ts
-var e = ({ prefix: e, colorName: t, color0: n = "" }) => {
-	let r = {}, i = 1;
-	n && (r[`--${e}-${i}`] = `var(--color-${n})`, i++);
-	let a = 1;
-	for (; i <= 11; i++) r[`--${e}-${i}`] = `var(--color-${t}-${a * 100})`, a++;
-	return r;
-}, t = {};
-t["interactive-loContrast"] = {
+var generateColors = ({ prefix, colorName, color0 = "" }) => {
+	const colors = {};
+	let i = 1;
+	if (color0) {
+		colors[`--${prefix}-${i}`] = `var(--color-${color0})`;
+		i++;
+	}
+	let k = 1;
+	for (; i <= 11; i++) {
+		colors[`--${prefix}-${i}`] = `var(--color-${colorName}-${k * 100})`;
+		k++;
+	}
+	return colors;
+};
+var colorSchemes = {};
+colorSchemes["interactive-loContrast"] = {
 	"--interactive-foreground": "var(--foreground)",
 	"--interactive-1": "var(--accent-1)",
 	"--interactive-2": "var(--accent-2)",
 	"--interactive-3": "var(--accent-3)"
-}, t["interactive-hiContrast"] = {
+};
+colorSchemes["interactive-hiContrast"] = {
 	"--interactive-foreground": "var(--foreground-7-plus)",
 	"--interactive-1": "var(--accent-9)",
 	"--interactive-2": "var(--accent-10)",
 	"--interactive-3": "var(--accent-11)"
 };
-var n = Object.fromEntries([
+var colorNames = [
 	"primary",
 	"grey",
 	"blue",
@@ -31,29 +40,35 @@ var n = Object.fromEntries([
 	"orange",
 	"yellow",
 	"lime"
-].flatMap((e) => [[`${e}1`, {
-	colorName: e,
+];
+var createVariants = () => Object.fromEntries(colorNames.flatMap((c) => [[`${c}1`, {
+	colorName: c,
 	color0: "white"
-}], [`${e}2`, { colorName: e }]])), r = n;
-Object.entries(n).forEach(([n, r]) => {
-	let i = `base-${n}`;
-	t[i] = {
-		"--foreground": "var(--color-grey-1000)",
-		"--foreground-7-plus": "var(--color-white)",
-		...e({
-			prefix: "base",
-			colorName: r.colorName,
-			color0: r.color0
-		})
-	};
-}), Object.entries(r).forEach(([n, r]) => {
-	t[`accent-${n}`] = e({
-		prefix: "accent",
-		colorName: r.colorName,
-		color0: r.color0
+}], [`${c}2`, { colorName: c }]]));
+var bases = createVariants();
+var accents = bases;
+(() => {
+	Object.entries(bases).forEach(([name, config]) => {
+		const themeName = `base-${name}`;
+		colorSchemes[themeName] = {
+			"--foreground": "var(--color-grey-1000)",
+			"--foreground-7-plus": "var(--color-white)",
+			...generateColors({
+				prefix: "base",
+				colorName: config.colorName,
+				color0: config.color0
+			})
+		};
+	});
+	Object.entries(accents).forEach(([name, config]) => {
+		colorSchemes[`accent-${name}`] = generateColors({
+			prefix: "accent",
+			colorName: config.colorName,
+			color0: config.color0
+		});
 	});
-});
+})();
 //#endregion
-export { t as colorSchemes };
+export { colorSchemes };
 
 //# sourceMappingURL=ColorScheme.config.js.map

package/dist/experiments/color-scheme/ColorScheme.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorScheme.config.js","names":[],"sources":["../../../src/experiments/color-scheme/ColorScheme.config.ts"],"sourcesContent":["type ColorSchemeKeys = 'interactive' | 'base' | 'accent' | 'foreground'\n\n// ColorScheme is a partial record, but values are always strings (never undefined)\ntype ColorScheme = Partial<\n  Record<`--${ColorSchemeKeys}` | `--${ColorSchemeKeys}-${string}`, string>\n>\n\ntype ColorSchemeConfig = { colorName: string; color0?: string }\n\nconst generateColors = ({\n  prefix,\n  colorName,\n  color0 = ''\n}: {\n  prefix: ColorSchemeKeys\n  colorName: string\n  color0?: string\n}): ColorScheme => {\n  const colors: Record<string, string> = {}\n  let i = 1\n  if (color0) {\n    colors[`--${prefix}-${i}`] = `var(--color-${color0})`\n    i++\n  }\n  let k = 1\n  for (i; i <= 11; i++) {\n    colors[`--${prefix}-${i}`] = `var(--color-${colorName}-${k * 100})`\n    k++\n  }\n  return colors as ColorScheme\n}\n\nexport const colorSchemes: Record<string, ColorScheme> = {} as Record<\n  string,\n  ColorScheme\n>\n\ncolorSchemes['interactive-loContrast'] = {\n  '--interactive-foreground': 'var(--foreground)',\n  '--interactive-1': 'var(--accent-1)',\n  '--interactive-2': 'var(--accent-2)',\n  '--interactive-3': 'var(--accent-3)'\n}\n\ncolorSchemes['interactive-hiContrast'] = {\n  '--interactive-foreground': 'var(--foreground-7-plus)',\n  '--interactive-1': 'var(--accent-9)',\n  '--interactive-2': 'var(--accent-10)',\n  '--interactive-3': 'var(--accent-11)'\n}\n\nconst colorNames = [\n  'primary',\n  'grey',\n  'blue',\n  'pink',\n  'purple',\n  'cyan',\n  'green',\n  'magenta',\n  'red',\n  'teal',\n  'orange',\n  'yellow',\n  'lime'\n]\n\nconst createVariants = () =>\n  Object.fromEntries(\n    colorNames.flatMap((c) => [\n      [`${c}1`, { colorName: c, color0: 'white' }],\n      [`${c}2`, { colorName: c }]\n    ])\n  ) as Record<string, ColorSchemeConfig>\n\nexport const bases = createVariants()\nexport const accents = bases\n;(() => {\n  Object.entries(bases).forEach(\n    ([name, config]: [string, ColorSchemeConfig]) => {\n      const themeName = `base-${name}`\n      colorSchemes[themeName] = {\n        '--foreground': 'var(--color-grey-1000)',\n        '--foreground-7-plus': 'var(--color-white)',\n        ...generateColors({\n          prefix: 'base',\n          colorName: config.colorName,\n          color0: config.color0\n        })\n      }\n    }\n  )\n\n  Object.entries(accents).forEach(\n    ([name, config]: [string, ColorSchemeConfig]) => {\n      colorSchemes[`accent-${name}`] = generateColors({\n        prefix: 'accent',\n        colorName: config.colorName,\n        color0: config.color0\n      })\n    }\n  )\n})()\n"],"mappings":";AASA,IAAM,KAAkB,EACtB,WACA,cACA,YAAS,SAKQ;CACjB,IAAM,IAAiC,EAAE,EACrC,IAAI;AACR,CAAI,MACF,EAAO,KAAK,EAAO,GAAG,OAAO,eAAe,EAAO,IACnD;CAEF,IAAI,IAAI;AACR,QAAQ,KAAK,IAAI,IAEf,CADA,EAAO,KAAK,EAAO,GAAG,OAAO,eAAe,EAAU,GAAG,IAAI,IAAI,IACjE;AAEF,QAAO;GAGI,IAA4C,EAAE;AAK3D,EAAa,4BAA4B;CACvC,4BAA4B;CAC5B,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CACpB,EAED,EAAa,4BAA4B;CACvC,4BAA4B;CAC5B,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CACpB;AAED,IAwBa,IAPX,OAAO,YAjBU;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAIc,SAAS,MAAM,CACxB,CAAC,GAAG,EAAE,IAAI;CAAE,WAAW;CAAG,QAAQ;CAAS,CAAC,EAC5C,CAAC,GAAG,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC,CAC5B,CAAC,CACH,EAGU,IAAU;AAErB,OAAO,QAAQ,EAAM,CAAC,SACnB,CAAC,GAAM,OAAyC;CAC/C,IAAM,IAAY,QAAQ;AAC1B,GAAa,KAAa;EACxB,gBAAgB;EAChB,uBAAuB;EACvB,GAAG,EAAe;GAChB,QAAQ;GACR,WAAW,EAAO;GAClB,QAAQ,EAAO;GAChB,CAAC;EACH;EAEJ,EAED,OAAO,QAAQ,EAAQ,CAAC,SACrB,CAAC,GAAM,OAAyC;AAC/C,GAAa,UAAU,OAAU,EAAe;EAC9C,QAAQ;EACR,WAAW,EAAO;EAClB,QAAQ,EAAO;EAChB,CAAC;EAEL"}
+{"version":3,"file":"ColorScheme.config.js","names":[],"sources":["../../../src/experiments/color-scheme/ColorScheme.config.ts"],"sourcesContent":["type ColorSchemeKeys = 'interactive' | 'base' | 'accent' | 'foreground'\n\n// ColorScheme is a partial record, but values are always strings (never undefined)\ntype ColorScheme = Partial<\n  Record<`--${ColorSchemeKeys}` | `--${ColorSchemeKeys}-${string}`, string>\n>\n\ntype ColorSchemeConfig = { colorName: string; color0?: string }\n\nconst generateColors = ({\n  prefix,\n  colorName,\n  color0 = ''\n}: {\n  prefix: ColorSchemeKeys\n  colorName: string\n  color0?: string\n}): ColorScheme => {\n  const colors: Record<string, string> = {}\n  let i = 1\n  if (color0) {\n    colors[`--${prefix}-${i}`] = `var(--color-${color0})`\n    i++\n  }\n  let k = 1\n  for (i; i <= 11; i++) {\n    colors[`--${prefix}-${i}`] = `var(--color-${colorName}-${k * 100})`\n    k++\n  }\n  return colors as ColorScheme\n}\n\nexport const colorSchemes: Record<string, ColorScheme> = {} as Record<\n  string,\n  ColorScheme\n>\n\ncolorSchemes['interactive-loContrast'] = {\n  '--interactive-foreground': 'var(--foreground)',\n  '--interactive-1': 'var(--accent-1)',\n  '--interactive-2': 'var(--accent-2)',\n  '--interactive-3': 'var(--accent-3)'\n}\n\ncolorSchemes['interactive-hiContrast'] = {\n  '--interactive-foreground': 'var(--foreground-7-plus)',\n  '--interactive-1': 'var(--accent-9)',\n  '--interactive-2': 'var(--accent-10)',\n  '--interactive-3': 'var(--accent-11)'\n}\n\nconst colorNames = [\n  'primary',\n  'grey',\n  'blue',\n  'pink',\n  'purple',\n  'cyan',\n  'green',\n  'magenta',\n  'red',\n  'teal',\n  'orange',\n  'yellow',\n  'lime'\n]\n\nconst createVariants = () =>\n  Object.fromEntries(\n    colorNames.flatMap((c) => [\n      [`${c}1`, { colorName: c, color0: 'white' }],\n      [`${c}2`, { colorName: c }]\n    ])\n  ) as Record<string, ColorSchemeConfig>\n\nexport const bases = createVariants()\nexport const accents = bases\n;(() => {\n  Object.entries(bases).forEach(\n    ([name, config]: [string, ColorSchemeConfig]) => {\n      const themeName = `base-${name}`\n      colorSchemes[themeName] = {\n        '--foreground': 'var(--color-grey-1000)',\n        '--foreground-7-plus': 'var(--color-white)',\n        ...generateColors({\n          prefix: 'base',\n          colorName: config.colorName,\n          color0: config.color0\n        })\n      }\n    }\n  )\n\n  Object.entries(accents).forEach(\n    ([name, config]: [string, ColorSchemeConfig]) => {\n      colorSchemes[`accent-${name}`] = generateColors({\n        prefix: 'accent',\n        colorName: config.colorName,\n        color0: config.color0\n      })\n    }\n  )\n})()\n"],"mappings":";AASA,IAAM,kBAAkB,EACtB,QACA,WACA,SAAS,SAKQ;CACjB,MAAM,SAAiC,EAAE;CACzC,IAAI,IAAI;AACR,KAAI,QAAQ;AACV,SAAO,KAAK,OAAO,GAAG,OAAO,eAAe,OAAO;AACnD;;CAEF,IAAI,IAAI;AACR,QAAQ,KAAK,IAAI,KAAK;AACpB,SAAO,KAAK,OAAO,GAAG,OAAO,eAAe,UAAU,GAAG,IAAI,IAAI;AACjE;;AAEF,QAAO;;AAGT,IAAa,eAA4C,EAAE;AAK3D,aAAa,4BAA4B;CACvC,4BAA4B;CAC5B,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CACpB;AAED,aAAa,4BAA4B;CACvC,4BAA4B;CAC5B,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CACpB;AAED,IAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAM,uBACJ,OAAO,YACL,WAAW,SAAS,MAAM,CACxB,CAAC,GAAG,EAAE,IAAI;CAAE,WAAW;CAAG,QAAQ;CAAS,CAAC,EAC5C,CAAC,GAAG,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC,CAC5B,CAAC,CACH;AAEH,IAAa,QAAQ,gBAAgB;AACrC,IAAa,UAAU;OACf;AACN,QAAO,QAAQ,MAAM,CAAC,SACnB,CAAC,MAAM,YAAyC;EAC/C,MAAM,YAAY,QAAQ;AAC1B,eAAa,aAAa;GACxB,gBAAgB;GAChB,uBAAuB;GACvB,GAAG,eAAe;IAChB,QAAQ;IACR,WAAW,OAAO;IAClB,QAAQ,OAAO;IAChB,CAAC;GACH;GAEJ;AAED,QAAO,QAAQ,QAAQ,CAAC,SACrB,CAAC,MAAM,YAAyC;AAC/C,eAAa,UAAU,UAAU,eAAe;GAC9C,QAAQ;GACR,WAAW,OAAO;GAClB,QAAQ,OAAO;GAChB,CAAC;GAEL;IACC"}

package/dist/experiments/color-scheme/ColorScheme.js

@@ -1,21 +1,25 @@
-import { colorSchemes as e } from "./ColorScheme.config.js";
-import * as t from "react";
-import { Slot as n } from "@radix-ui/react-slot";
+import { colorSchemes } from "./ColorScheme.config.js";
+import * as React$1 from "react";
+import { Slot } from "@radix-ui/react-slot";
 //#region src/experiments/color-scheme/ColorScheme.tsx
-var r = t.forwardRef(({ base: r = "", accent: i = "", interactive: a = "", asChild: o = !1, ...s }, c) => {
-	let l = o ? n : "div", u = {
-		...a && e[`interactive-${a}`],
-		...i && e[`accent-${i}`],
-		...r && e[`base-${r}`]
+/**
+* @experimental Component has not been finalised. Further design input required. Use with caution.
+*/
+var ColorScheme = React$1.forwardRef(({ base = "", accent = "", interactive = "", asChild = false, ...rest }, ref) => {
+	const Component = asChild ? Slot : "div";
+	const style = {
+		...interactive && colorSchemes[`interactive-${interactive}`],
+		...accent && colorSchemes[`accent-${accent}`],
+		...base && colorSchemes[`base-${base}`]
 	};
-	return /* @__PURE__ */ t.createElement(l, {
-		...s,
-		ref: c,
-		style: u
+	return /* @__PURE__ */ React$1.createElement(Component, {
+		...rest,
+		ref,
+		style
 	});
 });
-r.displayName = "ColorScheme";
+ColorScheme.displayName = "ColorScheme";
 //#endregion
-export { r as ColorScheme };
+export { ColorScheme };
 
 //# sourceMappingURL=ColorScheme.js.map

package/dist/experiments/color-scheme/ColorScheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorScheme.js","names":[],"sources":["../../../src/experiments/color-scheme/ColorScheme.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { accents, bases, colorSchemes } from './ColorScheme.config'\n\nexport type TcolorScheme = {\n  base?: keyof typeof bases\n  accent?: keyof typeof accents\n  interactive?: 'loContrast' | 'hiContrast'\n}\n\ntype TColorSchemeOwnProps = TcolorScheme & {\n  asChild?: boolean\n}\n\ntype TColorSchemeProps = React.HTMLAttributes<HTMLDivElement> &\n  TColorSchemeOwnProps\n\n/**\n * @experimental Component has not been finalised. Further design input required. Use with caution.\n */\nexport const ColorScheme = React.forwardRef<HTMLDivElement, TColorSchemeProps>(\n  (\n    { base = '', accent = '', interactive = '', asChild = false, ...rest },\n    ref\n  ) => {\n    const Component = asChild ? Slot : 'div'\n\n    // Build style object - config ensures values are always strings (never undefined)\n    const style = {\n      ...(interactive && colorSchemes[`interactive-${interactive}`]),\n      ...(accent && colorSchemes[`accent-${accent}`]),\n      ...(base && colorSchemes[`base-${base}`])\n    } as React.CSSProperties\n\n    return <Component {...rest} ref={ref} style={style} />\n  }\n)\n\nColorScheme.displayName = 'ColorScheme'\n"],"mappings":";;;;AAqBA,IAAa,IAAc,EAAM,YAE7B,EAAE,UAAO,IAAI,YAAS,IAAI,iBAAc,IAAI,aAAU,IAAO,GAAG,KAChE,MACG;CACH,IAAM,IAAY,IAAU,IAAO,OAG7B,IAAQ;EACZ,GAAI,KAAe,EAAa,eAAe;EAC/C,GAAI,KAAU,EAAa,UAAU;EACrC,GAAI,KAAQ,EAAa,QAAQ;EAClC;AAED,QAAO,kBAAA,cAAC,GAAD;EAAW,GAAI;EAAW;EAAY;EAAS,CAAA;EAEzD;AAED,EAAY,cAAc"}
+{"version":3,"file":"ColorScheme.js","names":[],"sources":["../../../src/experiments/color-scheme/ColorScheme.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { accents, bases, colorSchemes } from './ColorScheme.config'\n\nexport type TcolorScheme = {\n  base?: keyof typeof bases\n  accent?: keyof typeof accents\n  interactive?: 'loContrast' | 'hiContrast'\n}\n\ntype TColorSchemeOwnProps = TcolorScheme & {\n  asChild?: boolean\n}\n\ntype TColorSchemeProps = React.HTMLAttributes<HTMLDivElement> &\n  TColorSchemeOwnProps\n\n/**\n * @experimental Component has not been finalised. Further design input required. Use with caution.\n */\nexport const ColorScheme = React.forwardRef<HTMLDivElement, TColorSchemeProps>(\n  (\n    { base = '', accent = '', interactive = '', asChild = false, ...rest },\n    ref\n  ) => {\n    const Component = asChild ? Slot : 'div'\n\n    // Build style object - config ensures values are always strings (never undefined)\n    const style = {\n      ...(interactive && colorSchemes[`interactive-${interactive}`]),\n      ...(accent && colorSchemes[`accent-${accent}`]),\n      ...(base && colorSchemes[`base-${base}`])\n    } as React.CSSProperties\n\n    return <Component {...rest} ref={ref} style={style} />\n  }\n)\n\nColorScheme.displayName = 'ColorScheme'\n"],"mappings":";;;;;;;AAqBA,IAAa,cAAc,QAAM,YAE7B,EAAE,OAAO,IAAI,SAAS,IAAI,cAAc,IAAI,UAAU,OAAO,GAAG,QAChE,QACG;CACH,MAAM,YAAY,UAAU,OAAO;CAGnC,MAAM,QAAQ;EACZ,GAAI,eAAe,aAAa,eAAe;EAC/C,GAAI,UAAU,aAAa,UAAU;EACrC,GAAI,QAAQ,aAAa,QAAQ;EAClC;AAED,QAAO,wBAAA,cAAC,WAAD;EAAW,GAAI;EAAW;EAAY;EAAS,CAAA;EAEzD;AAED,YAAY,cAAc"}