@atom-learning/components 2.32.3-beta.0 → 2.34.0

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

@@ -1 +1,2 @@
-import*as o from"react";import{styled as f,colorSchemes as e}from"./stitches.colorscheme.config.js";import{Slot as d}from"@radix-ui/react-slot";const p=f("div"),r=o.forwardRef(({base:t="",accent:a="",interactive:c="",className:m,asChild:s=!1,...i},l)=>{const n=[m,e[`interactive-${c}`],e[`accent-${a}`],e[`base-${t}`]].filter(Boolean).join(" ");return o.createElement(s?d:p,{ref:l,className:n,...i})});r.displayName="ColorScheme";export{r as ColorScheme};
+import*as o from"react";import{styled as f,colorSchemes as e}from"./stitches.colorscheme.config.js";import{Slot as d}from"@radix-ui/react-slot";const p=f("div"),t=o.forwardRef(({base:r="",accent:a="",interactive:c="",className:m,asChild:s=!1,...i},l)=>{const n=[m,e[`interactive-${c}`],e[`accent-${a}`],e[`base-${r}`]].filter(Boolean).join(" ");return o.createElement(s?d:p,{ref:l,className:n,...i})});t.displayName="ColorScheme";export{t as ColorScheme};
+//# sourceMappingURL=ColorScheme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScheme.js","sources":["../../../src/experiments/color-scheme/ColorScheme.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  bases,\n  accents,\n  colorSchemes,\n  styled\n} from './stitches.colorscheme.config'\nimport { Slot } from '@radix-ui/react-slot'\n\ntype TColorSchemeOwnProps = {\n  base?: keyof typeof bases\n  accent?: keyof typeof accents\n  interactive?: 'loContrast1' | 'loContrast2' | 'hiContrast1' | 'hiContrast2'\n  asChild?: boolean\n}\n\nconst StyledColorScheme = styled('div')\n\ntype TColorSchemeProps = React.ComponentProps<typeof StyledColorScheme> &\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    {\n      base = '',\n      accent = '',\n      interactive = '',\n      className,\n      asChild = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const c = [\n      className,\n      colorSchemes[`interactive-${interactive}`],\n      colorSchemes[`accent-${accent}`],\n      colorSchemes[`base-${base}`]\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    const Component = asChild ? Slot : StyledColorScheme\n    return <Component ref={ref} className={c} {...rest} />\n  }\n)\n\nColorScheme.displayName = 'ColorScheme'\n"],"names":["StyledColorScheme","styled","ColorScheme","React","base","accent","interactive","className","asChild","rest","ref","c","colorSchemes","Slot"],"mappings":"gJAiBA,MAAMA,EAAoBC,EAAO,KAAK,EAQzBC,EAAcC,EAAM,WAC/B,CACE,CACE,KAAAC,EAAO,GACP,OAAAC,EAAS,GACT,YAAAC,EAAc,GACd,UAAAC,EACA,QAAAC,EAAU,MACPC,CACL,EACAC,IACG,CACH,MAAMC,EAAI,CACRJ,EACAK,EAAa,eAAeN,KAC5BM,EAAa,UAAUP,KACvBO,EAAa,QAAQR,IACvB,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EAGX,OAAOD,EAAA,cADWK,EAAUK,EAAOb,EAC3B,CAAU,IAAKU,EAAK,UAAWC,EAAI,GAAGF,CAAAA,CAAM,CACtD,CACF,EAEAP,EAAY,YAAc"}

package/dist/experiments/color-scheme/blue.json.js

@@ -1 +1,2 @@
 var e="#F3F8FF",l="#E5F1FF",u="#D6EAFF",b="#C2DEFF",F="#B3D4FA",a="#057AFF",r="#0F67F5",v="#194DCC",D="#102DA3",A="#15235E",E={blue1:e,blue2:l,blue3:u,blue4:b,blue5:F,blue6:a,blue7:r,blue8:v,blue9:D,blue10:A};export{e as blue1,A as blue10,l as blue2,u as blue3,b as blue4,F as blue5,a as blue6,r as blue7,v as blue8,D as blue9,E as default};
+//# sourceMappingURL=blue.json.js.map

package/dist/experiments/color-scheme/blue.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blue.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -1 +1,2 @@
 import{parseToRgba as u}from"color2k";const M=[255,255,255,1],r=[.05,.1,.15,.2,.27,.35,.5,.7,.8,.95],n=a=>Math.round(Math.max(Math.min(a,255),0)),$=(a,h)=>{const e={};return Object.entries(h).forEach(([f,i],o)=>{const[m,p,b]=u(i),[t,s,c]=M,g=[n((m-t)/r[o]+t),n((p-s)/r[o]+s),n((b-c)/r[o]+c),r[o]];e[`${a}A${o+1}`]=`rgba(${g.join(",")})`}),e};export{$ as generateAlphaColors};
+//# sourceMappingURL=generateAlphaColors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generateAlphaColors.js","sources":["../../../src/experiments/color-scheme/generateAlphaColors.ts"],"sourcesContent":["import { parseToRgba } from 'color2k'\n\nconst whiteRgba = [255, 255, 255, 1]\nconst alphaStep = [0.05, 0.1, 0.15, 0.2, 0.27, 0.35, 0.5, 0.7, 0.8, 0.95]\nconst keepWithinRgbaLimit = (arg: number): number =>\n  Math.round(Math.max(Math.min(arg, 255), 0))\n\n// (!) Attempt to match to match transparency matching initial colours over white. (Alpha compositing)\n// (!) This function is CLOSE but does not produce exactly the expected colours. It might have to do with the alpha step.\nexport const generateAlphaColors = (\n  colorName: string,\n  colors: Record<string, string>\n): Record<string, string> => {\n  const colorsA = {}\n  Object.entries(colors).forEach(([key, value], index) => {\n    const [r1, g1, b1] = parseToRgba(value)\n    const [r2, g2, b2] = whiteRgba\n    const alphaRgbColor = [\n      keepWithinRgbaLimit((r1 - r2) / alphaStep[index] + r2),\n      keepWithinRgbaLimit((g1 - g2) / alphaStep[index] + g2),\n      keepWithinRgbaLimit((b1 - b2) / alphaStep[index] + b2),\n      alphaStep[index]\n    ]\n\n    colorsA[`${colorName}A${index + 1}`] = `rgba(${alphaRgbColor.join(',')})`\n  })\n  return colorsA\n}\n"],"names":["whiteRgba","alphaStep","keepWithinRgbaLimit","arg","generateAlphaColors","colorName","colors","colorsA","key","value","index","r1","g1","b1","parseToRgba","r2","g2","b2","alphaRgbColor"],"mappings":"sCAEA,MAAMA,EAAY,CAAC,IAAK,IAAK,IAAK,CAAC,EAC7BC,EAAY,CAAC,IAAM,GAAK,IAAM,GAAK,IAAM,IAAM,GAAK,GAAK,GAAK,GAAI,EAClEC,EAAuBC,GAC3B,KAAK,MAAM,KAAK,IAAI,KAAK,IAAIA,EAAK,GAAG,EAAG,CAAC,CAAC,EAI/BC,EAAsB,CACjCC,EACAC,IAC2B,CAC3B,MAAMC,EAAU,CAAC,EACjB,OAAO,OAAA,QAAQD,CAAM,EAAE,QAAQ,CAAC,CAACE,EAAKC,CAAK,EAAGC,IAAU,CACtD,KAAM,CAACC,EAAIC,EAAIC,CAAE,EAAIC,EAAYL,CAAK,EAChC,CAACM,EAAIC,EAAIC,CAAE,EAAIjB,EACfkB,EAAgB,CACpBhB,GAAqBS,EAAKI,GAAMd,EAAUS,GAASK,CAAE,EACrDb,GAAqBU,EAAKI,GAAMf,EAAUS,GAASM,CAAE,EACrDd,GAAqBW,EAAKI,GAAMhB,EAAUS,GAASO,CAAE,EACrDhB,EAAUS,EACZ,EAEAH,EAAQ,GAAGF,KAAaK,EAAQ,KAAO,QAAQQ,EAAc,KAAK,GAAG,IACvE,CAAC,EACMX,CACT"}

package/dist/experiments/color-scheme/slate.json.js

@@ -1 +1,2 @@
 var a="#F6F6F6",e="#EBEBEB",t="#E0E0E0",l="#CECECE",s="#C2C2C2",r="#757575",v="#545454",C="#333333",E="#1F1F1F",F="#1C1C1C",B={slate1:a,slate2:e,slate3:t,slate4:l,slate5:s,slate6:r,slate7:v,slate8:C,slate9:E,slate10:F};export{B as default,a as slate1,F as slate10,e as slate2,t as slate3,l as slate4,s as slate5,r as slate6,v as slate7,C as slate8,E as slate9};
+//# sourceMappingURL=slate.json.js.map

package/dist/experiments/color-scheme/slate.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slate.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/experiments/color-scheme/stitches.colorscheme.config.js

@@ -1 +1,2 @@
 import{createStitches as u}from"@stitches/react";import a from"./blue.json.js";import i from"./slate.json.js";import{generateAlphaColors as s}from"./generateAlphaColors.js";import{utils as m,media as d}from"../../stitches.js";const e={},l=(c,o)=>{const t={};for(let n=1;n<=10;n++)t[`${c}${n}`]=`$${o}${n}`,t[`${c}A${n}`]=`$${o}A${n}`;return t},{styled:f,createTheme:r}=u({theme:{colors:{background:"white",foreground:i.slate9,foreground6plus:"white",...a,...s("blue",a),...i,...s("slate",i)}},utils:m,media:d});e["interactive-loContrast1"]=r("interactive-loContrast1",{colors:{interactiveForeground:"$foreground",interactive1:"white",interactive2:"$accent1",interactive3:"$accent2"}}),e["interactive-loContrast2"]=r("interactive-loContrast2",{colors:{interactiveForeground:"$foreground",interactive1:"$accent1",interactive2:"$accent2",interactive3:"$accent3"}}),e["interactive-hiContrast1"]=r("interactive-hiContrast1",{colors:{interactiveForeground:"$foreground6plus",interactive1:"$accent7",interactive2:"$accent8",interactive3:"$accent9"}}),e["interactive-hiContrast2"]=r("interactive-hiContrast2",{colors:{interactiveForeground:"$foreground6plus",interactive1:"$accent8",interactive2:"$accent9",interactive3:"$accent10"}});const $={slate:"slate"},h=()=>{Object.entries($).forEach(([c,o])=>{const t=`base-${c}`;e[t]=r(t,{colors:l("base",o)})})},v={slate:"slate",blue:"blue"},g=()=>{Object.entries(v).forEach(([c,o])=>{const t=`accent-${c}`;e[t]=r(t,{colors:l("accent",o)})})};h(),g();export{v as accents,$ as bases,e as colorSchemes,r as createTheme,f as styled};
+//# sourceMappingURL=stitches.colorscheme.config.js.map

package/dist/experiments/color-scheme/stitches.colorscheme.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stitches.colorscheme.config.js","sources":["../../../src/experiments/color-scheme/stitches.colorscheme.config.ts"],"sourcesContent":["import { createStitches } from '@stitches/react'\nimport blue from './blue.json'\nimport slate from './slate.json'\nimport { generateAlphaColors } from './generateAlphaColors'\nimport { utils, media } from '../../stitches'\n\nexport const colorSchemes = {}\n\nconst generateColors = (tokenPrefix, colorName) => {\n  const colors = {}\n  for (let i = 1; i <= 10; i++) {\n    colors[`${tokenPrefix}${i}`] = `$${colorName}${i}`\n    colors[`${tokenPrefix}A${i}`] = `$${colorName}A${i}`\n  }\n  return colors\n}\n\nexport const { styled, createTheme } = createStitches({\n  theme: {\n    colors: {\n      background: 'white',\n      foreground: slate.slate9,\n      foreground6plus: 'white',\n      ...blue,\n      ...generateAlphaColors('blue', blue),\n      ...slate,\n      ...generateAlphaColors('slate', slate)\n    }\n  },\n  utils,\n  media\n})\n\ncolorSchemes['interactive-loContrast1'] = createTheme(\n  'interactive-loContrast1',\n  {\n    colors: {\n      interactiveForeground: '$foreground',\n      interactive1: 'white',\n      interactive2: '$accent1',\n      interactive3: '$accent2'\n    }\n  }\n)\n\ncolorSchemes['interactive-loContrast2'] = createTheme(\n  'interactive-loContrast2',\n  {\n    colors: {\n      interactiveForeground: '$foreground',\n      interactive1: '$accent1',\n      interactive2: '$accent2',\n      interactive3: '$accent3'\n    }\n  }\n)\n\ncolorSchemes['interactive-hiContrast1'] = createTheme(\n  'interactive-hiContrast1',\n  {\n    colors: {\n      interactiveForeground: '$foreground6plus',\n      interactive1: '$accent7',\n      interactive2: '$accent8',\n      interactive3: '$accent9'\n    }\n  }\n)\n\ncolorSchemes['interactive-hiContrast2'] = createTheme(\n  'interactive-hiContrast2',\n  {\n    colors: {\n      interactiveForeground: '$foreground6plus',\n      interactive1: '$accent8',\n      interactive2: '$accent9',\n      interactive3: '$accent10'\n    }\n  }\n)\n\nexport const bases = {\n  slate: 'slate'\n}\nconst generateBase = () => {\n  Object.entries(bases).forEach(([themeName, colorName]) => {\n    const baseThemeName = `base-${themeName}`\n    colorSchemes[baseThemeName] = createTheme(baseThemeName, {\n      colors: generateColors('base', colorName)\n    })\n  })\n}\n\nexport const accents = {\n  slate: 'slate',\n  blue: 'blue'\n}\nconst generateAccent = () => {\n  Object.entries(accents).forEach(([themeName, colorName]) => {\n    const accentThemeName = `accent-${themeName}`\n    colorSchemes[accentThemeName] = createTheme(accentThemeName, {\n      colors: generateColors('accent', colorName)\n    })\n  })\n}\n\ngenerateBase()\ngenerateAccent()\n"],"names":["colorSchemes","generateColors","tokenPrefix","colorName","colors","i","styled","createTheme","createStitches","slate","blue","generateAlphaColors","utils","media","bases","generateBase","themeName","baseThemeName","accents","generateAccent","accentThemeName"],"mappings":"kOAMO,MAAMA,EAAe,CAE5B,EAAMC,EAAiB,CAACC,EAAaC,IAAc,CACjD,MAAMC,EAAS,CAAA,EACf,QAASC,EAAI,EAAGA,GAAK,GAAIA,IACvBD,EAAO,GAAGF,IAAcG,KAAO,IAAIF,IAAYE,IAC/CD,EAAO,GAAGF,KAAeG,KAAO,IAAIF,KAAaE,IAEnD,OAAOD,CACT,EAEa,CAAE,OAAAE,EAAQ,YAAAC,CAAY,EAAIC,EAAe,CACpD,MAAO,CACL,OAAQ,CACN,WAAY,QACZ,WAAYC,EAAM,OAClB,gBAAiB,QACjB,GAAGC,EACH,GAAGC,EAAoB,OAAQD,CAAI,EACnC,GAAGD,EACH,GAAGE,EAAoB,QAASF,CAAK,CACvC,CACF,EACA,MAAAG,EACA,MAAAC,CACF,CAAC,EAEDb,EAAa,2BAA6BO,EACxC,0BACA,CACE,OAAQ,CACN,sBAAuB,cACvB,aAAc,QACd,aAAc,WACd,aAAc,UAChB,CACF,CACF,EAEAP,EAAa,2BAA6BO,EACxC,0BACA,CACE,OAAQ,CACN,sBAAuB,cACvB,aAAc,WACd,aAAc,WACd,aAAc,UAChB,CACF,CACF,EAEAP,EAAa,2BAA6BO,EACxC,0BACA,CACE,OAAQ,CACN,sBAAuB,mBACvB,aAAc,WACd,aAAc,WACd,aAAc,UAChB,CACF,CACF,EAEAP,EAAa,2BAA6BO,EACxC,0BACA,CACE,OAAQ,CACN,sBAAuB,mBACvB,aAAc,WACd,aAAc,WACd,aAAc,WAChB,CACF,CACF,EAEa,MAAAO,EAAQ,CACnB,MAAO,OACT,EACMC,EAAe,IAAM,CACzB,OAAO,QAAQD,CAAK,EAAE,QAAQ,CAAC,CAACE,EAAWb,CAAS,IAAM,CACxD,MAAMc,EAAgB,QAAQD,IAC9BhB,EAAaiB,GAAiBV,EAAYU,EAAe,CACvD,OAAQhB,EAAe,OAAQE,CAAS,CAC1C,CAAC,CACH,CAAC,CACH,EAEae,EAAU,CACrB,MAAO,QACP,KAAM,MACR,EACMC,EAAiB,IAAM,CAC3B,OAAO,QAAQD,CAAO,EAAE,QAAQ,CAAC,CAACF,EAAWb,CAAS,IAAM,CAC1D,MAAMiB,EAAkB,UAAUJ,IAClChB,EAAaoB,GAAmBb,EAAYa,EAAiB,CAC3D,OAAQnB,EAAe,SAAUE,CAAS,CAC5C,CAAC,CACH,CAAC,CACH,EAEAY,EAAa,EACbI,EAAe"}