@atom-learning/components 2.66.4 → 2.66.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,10 +1,9 @@
1
- ## [2.66.4](https://github.com/Atom-Learning/components/compare/v2.66.3...v2.66.4) (2023-08-24)
1
+ ## [2.66.6](https://github.com/Atom-Learning/components/compare/v2.66.5...v2.66.6) (2023-08-29)
2
2
 
3
3
 
4
4
  ### Bug Fixes
5
5
 
6
- * add missing Heading and Footer ([06b3048](https://github.com/Atom-Learning/components/commit/06b3048ff47fb13e93634a7e95d8707cefd23044))
7
- * snapshots ([c27bceb](https://github.com/Atom-Learning/components/commit/c27bcebb38abc91998629d37e6a85dc57e1dc7fd))
6
+ * ensure icon and loading state are rendered correctly, remove unnecessary prerender of loading state and animation ([2e169f1](https://github.com/Atom-Learning/components/commit/2e169f156ca87381055ebd02069b2d849ce1de40))
8
7
 
9
8
  # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
10
9
 
@@ -1,2 +1,2 @@
1
- import{createTheme as e}from"../../stitches.js";const t=e("info",{colors:{textSubtle:"$blue900",backgroundSubtle:"$blue100",textBold:"#FFF",backgroundBold:"$blue800"}}),l=e("neutral",{colors:{textSubtle:"$grey900",backgroundSubtle:"$grey100",textBold:"#FFF",backgroundBold:"$grey800"}}),o=e("success",{colors:{textSubtle:"$successMid",backgroundSubtle:"$successLight",textBold:"#FFF",backgroundBold:"$success"}}),r=e("danger",{colors:{textSubtle:"$dangerMid",backgroundSubtle:"$dangerLight",textBold:"#FFF",backgroundBold:"$danger"}}),u=e("warning",{colors:{textSubtle:"$warningText",backgroundSubtle:"$warningLight",textBold:"$grey1000",backgroundBold:"$warning"}}),d=e("grey",{colors:{textSubtle:"$grey1000",backgroundSubtle:"$grey200",textBold:"#FFF",backgroundBold:"$grey800"}}),n=e("blue",{colors:{textSubtle:"$blue1000",backgroundSubtle:"$blue200",textBold:"#FFF",backgroundBold:"$blue800"}}),b=e("purple",{colors:{textSubtle:"$purple1000",backgroundSubtle:"$purple200",textBold:"#FFF",backgroundBold:"$purple800"}}),g=e("cyan",{colors:{textSubtle:"$cyan1000",backgroundSubtle:"$cyan200",textBold:"#FFF",backgroundBold:"$cyan800"}}),a=e("green",{colors:{textSubtle:"$green1000",backgroundSubtle:"$green200",textBold:"#FFF",backgroundBold:"$green800"}}),c=e("magenta",{colors:{textSubtle:"$magenta1000",backgroundSubtle:"$magenta200",textBold:"#FFF",backgroundBold:"$magenta800"}}),$=e("red",{colors:{textSubtle:"$red1000",backgroundSubtle:"$red200",textBold:"#FFF",backgroundBold:"$red800"}}),F=e("teal",{colors:{textSubtle:"$teal1000",backgroundSubtle:"$teal200",textBold:"#FFF",backgroundBold:"$teal800"}}),s=e("orange",{colors:{textSubtle:"$orange1000",backgroundSubtle:"$orange200",textBold:"$grey1200",backgroundBold:"$orange600"}}),x=e("yellow",{colors:{textSubtle:"$yellow1000",backgroundSubtle:"$yellow200",textBold:"$grey1200",backgroundBold:"$yellow500"}}),S=e("lime",{colors:{textSubtle:"$lime1000",backgroundSubtle:"$lime200",textBold:"$grey1200",backgroundBold:"$lime600"}}),k={info:t,neutral:l,success:o,danger:r,warning:u,grey:d,blue:n,purple:b,cyan:g,green:a,magenta:c,red:$,teal:F,orange:s,yellow:x,lime:S};export{k as colorSchemes};
1
+ import{createTheme as e}from"../../stitches.js";const t=e({colors:{textSubtle:"$blue900",backgroundSubtle:"$blue100",textBold:"#FFF",backgroundBold:"$blue800"}}),o=e({colors:{textSubtle:"$grey900",backgroundSubtle:"$grey100",textBold:"#FFF",backgroundBold:"$grey800"}}),l=e({colors:{textSubtle:"$successMid",backgroundSubtle:"$successLight",textBold:"#FFF",backgroundBold:"$success"}}),r=e({colors:{textSubtle:"$dangerMid",backgroundSubtle:"$dangerLight",textBold:"#FFF",backgroundBold:"$danger"}}),u=e({colors:{textSubtle:"$warningText",backgroundSubtle:"$warningLight",textBold:"$grey1000",backgroundBold:"$warning"}}),d=e({colors:{textSubtle:"$grey1000",backgroundSubtle:"$grey200",textBold:"#FFF",backgroundBold:"$grey800"}}),b=e({colors:{textSubtle:"$blue1000",backgroundSubtle:"$blue200",textBold:"#FFF",backgroundBold:"$blue800"}}),g=e({colors:{textSubtle:"$purple1000",backgroundSubtle:"$purple200",textBold:"#FFF",backgroundBold:"$purple800"}}),c=e({colors:{textSubtle:"$cyan1000",backgroundSubtle:"$cyan200",textBold:"#FFF",backgroundBold:"$cyan800"}}),n=e({colors:{textSubtle:"$green1000",backgroundSubtle:"$green200",textBold:"#FFF",backgroundBold:"$green800"}}),a=e({colors:{textSubtle:"$magenta1000",backgroundSubtle:"$magenta200",textBold:"#FFF",backgroundBold:"$magenta800"}}),$=e({colors:{textSubtle:"$red1000",backgroundSubtle:"$red200",textBold:"#FFF",backgroundBold:"$red800"}}),F=e({colors:{textSubtle:"$teal1000",backgroundSubtle:"$teal200",textBold:"#FFF",backgroundBold:"$teal800"}}),x=e({colors:{textSubtle:"$orange1000",backgroundSubtle:"$orange200",textBold:"$grey1200",backgroundBold:"$orange600"}}),S=e({colors:{textSubtle:"$yellow1000",backgroundSubtle:"$yellow200",textBold:"$grey1200",backgroundBold:"$yellow500"}}),k=e({colors:{textSubtle:"$lime1000",backgroundSubtle:"$lime200",textBold:"$grey1200",backgroundBold:"$lime600"}}),s={info:t,neutral:o,success:l,danger:r,warning:u,grey:d,blue:b,purple:g,cyan:c,green:n,magenta:a,red:$,teal:F,orange:x,yellow:S,lime:k};export{s as colorSchemes};
2
2
  //# sourceMappingURL=stitches.badge.colorscheme.config.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"stitches.badge.colorscheme.config.js","sources":["../../../src/components/badge/stitches.badge.colorscheme.config.ts"],"sourcesContent":["import { createTheme } from '~/stitches'\n\n/*\n * Semantic themes\n */\n\nconst info = createTheme('info', {\n colors: {\n textSubtle: '$blue900',\n backgroundSubtle: '$blue100',\n textBold: '#FFF',\n backgroundBold: '$blue800'\n }\n})\n\nconst neutral = createTheme('neutral', {\n colors: {\n textSubtle: '$grey900',\n backgroundSubtle: '$grey100',\n textBold: '#FFF',\n backgroundBold: '$grey800'\n }\n})\n\nconst success = createTheme('success', {\n colors: {\n textSubtle: '$successMid',\n backgroundSubtle: '$successLight',\n textBold: '#FFF',\n backgroundBold: '$success'\n }\n})\n\nconst danger = createTheme('danger', {\n colors: {\n textSubtle: '$dangerMid',\n backgroundSubtle: '$dangerLight',\n textBold: '#FFF',\n backgroundBold: '$danger'\n }\n})\n\nconst warning = createTheme('warning', {\n colors: {\n textSubtle: '$warningText',\n backgroundSubtle: '$warningLight',\n textBold: '$grey1000',\n backgroundBold: '$warning'\n }\n})\n\n/*\n * Non-semantic themes\n */\n\nconst grey = createTheme('grey', {\n colors: {\n textSubtle: '$grey1000',\n backgroundSubtle: '$grey200',\n textBold: '#FFF',\n backgroundBold: '$grey800'\n }\n})\n\nconst blue = createTheme('blue', {\n colors: {\n textSubtle: '$blue1000',\n backgroundSubtle: '$blue200',\n textBold: '#FFF',\n backgroundBold: '$blue800'\n }\n})\n\nconst purple = createTheme('purple', {\n colors: {\n textSubtle: '$purple1000',\n backgroundSubtle: '$purple200',\n textBold: '#FFF',\n backgroundBold: '$purple800'\n }\n})\n\nconst cyan = createTheme('cyan', {\n colors: {\n textSubtle: '$cyan1000',\n backgroundSubtle: '$cyan200',\n textBold: '#FFF',\n backgroundBold: '$cyan800'\n }\n})\n\nconst green = createTheme('green', {\n colors: {\n textSubtle: '$green1000',\n backgroundSubtle: '$green200',\n textBold: '#FFF',\n backgroundBold: '$green800'\n }\n})\n\nconst magenta = createTheme('magenta', {\n colors: {\n textSubtle: '$magenta1000',\n backgroundSubtle: '$magenta200',\n textBold: '#FFF',\n backgroundBold: '$magenta800'\n }\n})\n\nconst red = createTheme('red', {\n colors: {\n textSubtle: '$red1000',\n backgroundSubtle: '$red200',\n textBold: '#FFF',\n backgroundBold: '$red800'\n }\n})\n\nconst teal = createTheme('teal', {\n colors: {\n textSubtle: '$teal1000',\n backgroundSubtle: '$teal200',\n textBold: '#FFF',\n backgroundBold: '$teal800'\n }\n})\n\nconst orange = createTheme('orange', {\n colors: {\n textSubtle: '$orange1000',\n backgroundSubtle: '$orange200',\n textBold: '$grey1200',\n backgroundBold: '$orange600'\n }\n})\n\nconst yellow = createTheme('yellow', {\n colors: {\n textSubtle: '$yellow1000',\n backgroundSubtle: '$yellow200',\n textBold: '$grey1200',\n backgroundBold: '$yellow500'\n }\n})\n\nconst lime = createTheme('lime', {\n colors: {\n textSubtle: '$lime1000',\n backgroundSubtle: '$lime200',\n textBold: '$grey1200',\n backgroundBold: '$lime600'\n }\n})\n\nexport const colorSchemes = {\n info,\n neutral,\n success,\n danger,\n warning,\n grey,\n blue,\n purple,\n cyan,\n green,\n magenta,\n red,\n teal,\n orange,\n yellow,\n lime\n}\n"],"names":["info","createTheme","neutral","success","danger","warning","grey","blue","purple","cyan","green","magenta","red","teal","orange","yellow","lime","colorSchemes"],"mappings":"gDAMA,MAAMA,EAAOC,EAAY,OAAQ,CAC/B,OAAQ,CACN,WAAY,WACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKC,EAAUD,EAAY,UAAW,CACrC,OAAQ,CACN,WAAY,WACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKE,EAAUF,EAAY,UAAW,CACrC,OAAQ,CACN,WAAY,cACZ,iBAAkB,gBAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKG,EAASH,EAAY,SAAU,CACnC,OAAQ,CACN,WAAY,aACZ,iBAAkB,eAClB,SAAU,OACV,eAAgB,SAClB,CACF,CAAC,EAEKI,EAAUJ,EAAY,UAAW,CACrC,OAAQ,CACN,WAAY,eACZ,iBAAkB,gBAClB,SAAU,YACV,eAAgB,UAClB,CACF,CAAC,EAMKK,EAAOL,EAAY,OAAQ,CAC/B,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKM,EAAON,EAAY,OAAQ,CAC/B,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKO,EAASP,EAAY,SAAU,CACnC,OAAQ,CACN,WAAY,cACZ,iBAAkB,aAClB,SAAU,OACV,eAAgB,YAClB,CACF,CAAC,EAEKQ,EAAOR,EAAY,OAAQ,CAC/B,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKS,EAAQT,EAAY,QAAS,CACjC,OAAQ,CACN,WAAY,aACZ,iBAAkB,YAClB,SAAU,OACV,eAAgB,WAClB,CACF,CAAC,EAEKU,EAAUV,EAAY,UAAW,CACrC,OAAQ,CACN,WAAY,eACZ,iBAAkB,cAClB,SAAU,OACV,eAAgB,aAClB,CACF,CAAC,EAEKW,EAAMX,EAAY,MAAO,CAC7B,OAAQ,CACN,WAAY,WACZ,iBAAkB,UAClB,SAAU,OACV,eAAgB,SAClB,CACF,CAAC,EAEKY,EAAOZ,EAAY,OAAQ,CAC/B,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKa,EAASb,EAAY,SAAU,CACnC,OAAQ,CACN,WAAY,cACZ,iBAAkB,aAClB,SAAU,YACV,eAAgB,YAClB,CACF,CAAC,EAEKc,EAASd,EAAY,SAAU,CACnC,OAAQ,CACN,WAAY,cACZ,iBAAkB,aAClB,SAAU,YACV,eAAgB,YAClB,CACF,CAAC,EAEKe,EAAOf,EAAY,OAAQ,CAC/B,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,YACV,eAAgB,UAClB,CACF,CAAC,EAEYgB,EAAe,CAC1B,KAAAjB,EACA,QAAAE,EACA,QAAAC,EACA,OAAAC,EACA,QAAAC,EACA,KAAAC,EACA,KAAAC,EACA,OAAAC,EACA,KAAAC,EACA,MAAAC,EACA,QAAAC,EACA,IAAAC,EACA,KAAAC,EACA,OAAAC,EACA,OAAAC,EACA,KAAAC,CACF"}
1
+ {"version":3,"file":"stitches.badge.colorscheme.config.js","sources":["../../../src/components/badge/stitches.badge.colorscheme.config.ts"],"sourcesContent":["import { createTheme } from '~/stitches'\n\n/*\n * Semantic themes\n */\n\nconst info = createTheme({\n colors: {\n textSubtle: '$blue900',\n backgroundSubtle: '$blue100',\n textBold: '#FFF',\n backgroundBold: '$blue800'\n }\n})\n\nconst neutral = createTheme({\n colors: {\n textSubtle: '$grey900',\n backgroundSubtle: '$grey100',\n textBold: '#FFF',\n backgroundBold: '$grey800'\n }\n})\n\nconst success = createTheme({\n colors: {\n textSubtle: '$successMid',\n backgroundSubtle: '$successLight',\n textBold: '#FFF',\n backgroundBold: '$success'\n }\n})\n\nconst danger = createTheme({\n colors: {\n textSubtle: '$dangerMid',\n backgroundSubtle: '$dangerLight',\n textBold: '#FFF',\n backgroundBold: '$danger'\n }\n})\n\nconst warning = createTheme({\n colors: {\n textSubtle: '$warningText',\n backgroundSubtle: '$warningLight',\n textBold: '$grey1000',\n backgroundBold: '$warning'\n }\n})\n\n/*\n * Non-semantic themes\n */\n\nconst grey = createTheme({\n colors: {\n textSubtle: '$grey1000',\n backgroundSubtle: '$grey200',\n textBold: '#FFF',\n backgroundBold: '$grey800'\n }\n})\n\nconst blue = createTheme({\n colors: {\n textSubtle: '$blue1000',\n backgroundSubtle: '$blue200',\n textBold: '#FFF',\n backgroundBold: '$blue800'\n }\n})\n\nconst purple = createTheme({\n colors: {\n textSubtle: '$purple1000',\n backgroundSubtle: '$purple200',\n textBold: '#FFF',\n backgroundBold: '$purple800'\n }\n})\n\nconst cyan = createTheme({\n colors: {\n textSubtle: '$cyan1000',\n backgroundSubtle: '$cyan200',\n textBold: '#FFF',\n backgroundBold: '$cyan800'\n }\n})\n\nconst green = createTheme({\n colors: {\n textSubtle: '$green1000',\n backgroundSubtle: '$green200',\n textBold: '#FFF',\n backgroundBold: '$green800'\n }\n})\n\nconst magenta = createTheme({\n colors: {\n textSubtle: '$magenta1000',\n backgroundSubtle: '$magenta200',\n textBold: '#FFF',\n backgroundBold: '$magenta800'\n }\n})\n\nconst red = createTheme({\n colors: {\n textSubtle: '$red1000',\n backgroundSubtle: '$red200',\n textBold: '#FFF',\n backgroundBold: '$red800'\n }\n})\n\nconst teal = createTheme({\n colors: {\n textSubtle: '$teal1000',\n backgroundSubtle: '$teal200',\n textBold: '#FFF',\n backgroundBold: '$teal800'\n }\n})\n\nconst orange = createTheme({\n colors: {\n textSubtle: '$orange1000',\n backgroundSubtle: '$orange200',\n textBold: '$grey1200',\n backgroundBold: '$orange600'\n }\n})\n\nconst yellow = createTheme({\n colors: {\n textSubtle: '$yellow1000',\n backgroundSubtle: '$yellow200',\n textBold: '$grey1200',\n backgroundBold: '$yellow500'\n }\n})\n\nconst lime = createTheme({\n colors: {\n textSubtle: '$lime1000',\n backgroundSubtle: '$lime200',\n textBold: '$grey1200',\n backgroundBold: '$lime600'\n }\n})\n\nexport const colorSchemes = {\n info,\n neutral,\n success,\n danger,\n warning,\n grey,\n blue,\n purple,\n cyan,\n green,\n magenta,\n red,\n teal,\n orange,\n yellow,\n lime\n}\n"],"names":["info","createTheme","neutral","success","danger","warning","grey","blue","purple","cyan","green","magenta","red","teal","orange","yellow","lime","colorSchemes"],"mappings":"gDAMA,MAAMA,EAAOC,EAAY,CACvB,OAAQ,CACN,WAAY,WACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKC,EAAUD,EAAY,CAC1B,OAAQ,CACN,WAAY,WACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKE,EAAUF,EAAY,CAC1B,OAAQ,CACN,WAAY,cACZ,iBAAkB,gBAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKG,EAASH,EAAY,CACzB,OAAQ,CACN,WAAY,aACZ,iBAAkB,eAClB,SAAU,OACV,eAAgB,SAClB,CACF,CAAC,EAEKI,EAAUJ,EAAY,CAC1B,OAAQ,CACN,WAAY,eACZ,iBAAkB,gBAClB,SAAU,YACV,eAAgB,UAClB,CACF,CAAC,EAMKK,EAAOL,EAAY,CACvB,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKM,EAAON,EAAY,CACvB,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKO,EAASP,EAAY,CACzB,OAAQ,CACN,WAAY,cACZ,iBAAkB,aAClB,SAAU,OACV,eAAgB,YAClB,CACF,CAAC,EAEKQ,EAAOR,EAAY,CACvB,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKS,EAAQT,EAAY,CACxB,OAAQ,CACN,WAAY,aACZ,iBAAkB,YAClB,SAAU,OACV,eAAgB,WAClB,CACF,CAAC,EAEKU,EAAUV,EAAY,CAC1B,OAAQ,CACN,WAAY,eACZ,iBAAkB,cAClB,SAAU,OACV,eAAgB,aAClB,CACF,CAAC,EAEKW,EAAMX,EAAY,CACtB,OAAQ,CACN,WAAY,WACZ,iBAAkB,UAClB,SAAU,OACV,eAAgB,SAClB,CACF,CAAC,EAEKY,EAAOZ,EAAY,CACvB,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKa,EAASb,EAAY,CACzB,OAAQ,CACN,WAAY,cACZ,iBAAkB,aAClB,SAAU,YACV,eAAgB,YAClB,CACF,CAAC,EAEKc,EAASd,EAAY,CACzB,OAAQ,CACN,WAAY,cACZ,iBAAkB,aAClB,SAAU,YACV,eAAgB,YAClB,CACF,CAAC,EAEKe,EAAOf,EAAY,CACvB,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,YACV,eAAgB,UAClB,CACF,CAAC,EAEYgB,EAAe,CAC1B,KAAAjB,EACA,QAAAE,EACA,QAAAC,EACA,OAAAC,EACA,QAAAC,EACA,KAAAC,EACA,KAAAC,EACA,OAAAC,EACA,KAAAC,EACA,MAAAC,EACA,QAAAC,EACA,IAAAC,EACA,KAAAC,EACA,OAAAC,EACA,OAAAC,EACA,KAAAC,CACF"}
@@ -1,2 +1,2 @@
1
- import{darken as n,opacify as s}from"color2k";import*as o from"react";import{Box as w}from"../box/Box.js";import{StyledIcon as c}from"../icon/Icon.js";import{Loader as k}from"../loader/Loader.js";import{styled as D,theme as l}from"../../stitches.js";import{isExternalLink as v}from"../../utilities/uri/index.js";const p=(r,e,i)=>({border:"1px solid",borderColor:"currentColor",color:r,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:e},"&:not([disabled]):active":{color:i}}),t=(r,e,i,a="white")=>({bg:r,color:a,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:e,color:a},"&:not([disabled]):active":{bg:i}}),d=D("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4",gap:"$2",[`& ${c}`]:{size:16}},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5",gap:"$3",[`& ${c}`]:{size:20}},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5",[`& ${c}`]:{size:22}}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{false:{width:"max-content"},true:{width:"100%"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:t("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:t("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:t("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:t("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:t("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:t("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:p("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:p("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))}]}),x=({isLoading:r,children:e})=>typeof r!="boolean"?e:o.createElement(o.Fragment,null,o.createElement(k,{css:{opacity:r?1:0,position:"absolute",transition:"opacity 150ms"}}),o.createElement(w,{as:"span",css:r?{opacity:0,transition:"opacity 150ms"}:{}},e)),m=o.forwardRef(({children:r,isLoading:e,onClick:i,href:a,appearance:h="solid",size:u="md",theme:y="primary",type:$="button",...g},f)=>{const b=a?{as:"a",href:a,...v(a)?{target:"_blank",rel:"noopener noreferrer"}:{}}:{};return o.createElement(d,{isLoading:e||!1,onClick:e?void 0:i,appearance:h,size:u,theme:y,...g,...b,...a?{}:{type:$},ref:f},o.createElement(x,{isLoading:e},r))});m.displayName="Button";export{m as Button,d as StyledButton};
1
+ import{darken as n,opacify as s}from"color2k";import*as t from"react";import{StyledIcon as c}from"../icon/Icon.js";import{Loader as k}from"../loader/Loader.js";import{styled as m,theme as l}from"../../stitches.js";import{isExternalLink as v}from"../../utilities/uri/index.js";const p=(r,e,i)=>({border:"1px solid",borderColor:"currentColor",color:r,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:e},"&:not([disabled]):active":{color:i}}),o=(r,e,i,a="white")=>({bg:r,color:a,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:e,color:a},"&:not([disabled]):active":{bg:i}}),h=m("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4",gap:"$2",[`& ${c}`]:{size:16}},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5",gap:"$3",[`& ${c}`]:{size:20}},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5",gap:"$3",[`& ${c}`]:{size:22}}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{false:{width:"max-content"},true:{width:"100%"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:o("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:o("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:o("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:o("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:o("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:o("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:p("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:p("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))}]}),z=m("span",{alignItems:"center",display:"flex",justifyContent:"center",visibility:"hidden",variants:{size:{sm:{gap:"$2"},md:{gap:"$3"},lg:{gap:"$3"}}}}),D=({size:r,children:e})=>t.createElement(t.Fragment,null,t.createElement(k,{css:{position:"absolute"}}),t.createElement(z,{size:r},e)),u=t.forwardRef(({children:r,isLoading:e=!1,onClick:i,href:a,appearance:$="solid",size:d="md",theme:g="primary",type:y="button",...f},b)=>{const w=a?{as:"a",href:a,...v(a)?{target:"_blank",rel:"noopener noreferrer"}:{}}:{};return t.createElement(h,{isLoading:e,onClick:e?void 0:i,appearance:$,size:d,theme:g,...f,...w,...a?{}:{type:y},ref:b},e?t.createElement(D,{size:d},r):r)});u.displayName="Button";export{u as Button,h as StyledButton};
2
2
  //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken, opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled, theme } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { isExternalLink } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n base: string,\n interact: string,\n active: string\n) => ({\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&[disabled]': {\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n },\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n textDecoration: 'none',\n color: interact\n },\n '&:not([disabled]):active': {\n color: active\n }\n})\n\nconst getButtonSolidVariant = (\n base: string,\n interact: string,\n active: string,\n text = 'white'\n) => ({\n bg: base,\n color: text,\n '&[disabled]': {\n bg: '$tonal100',\n color: '$tonal400',\n cursor: 'not-allowed'\n },\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n bg: interact,\n color: text\n },\n '&:not([disabled]):active': {\n bg: active\n }\n})\n\nexport const StyledButton = styled('button', {\n alignItems: 'center',\n bg: 'unset',\n border: 'unset',\n borderRadius: '$0',\n cursor: 'pointer',\n display: 'flex',\n fontFamily: '$body',\n fontWeight: 600,\n justifyContent: 'center',\n p: 'unset',\n textDecoration: 'none',\n transition: 'all 100ms ease-out',\n whiteSpace: 'nowrap',\n width: 'max-content',\n variants: {\n theme: {\n primary: {},\n secondary: {},\n success: {},\n warning: {},\n danger: {},\n neutral: {}\n },\n appearance: {\n solid: {},\n outline: {}\n },\n size: {\n sm: {\n fontSize: '$sm',\n lineHeight: 1.53,\n height: '$3',\n px: '$4',\n gap: '$2',\n [`& ${StyledIcon}`]: { size: 16 }\n },\n md: {\n fontSize: '$md',\n lineHeight: 1.5,\n height: '$4',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 20 }\n },\n lg: {\n fontSize: '$lg',\n lineHeight: 1.5,\n height: '$5',\n px: '$5',\n [`& ${StyledIcon}`]: { size: 22 }\n }\n },\n isLoading: {\n true: {\n cursor: 'not-allowed',\n opacity: 0.6,\n pointerEvents: 'none'\n }\n },\n fullWidth: {\n false: {\n width: 'max-content'\n },\n true: {\n width: '100%'\n }\n }\n },\n\n compoundVariants: [\n {\n theme: 'primary',\n appearance: 'solid',\n css: getButtonSolidVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'secondary',\n appearance: 'solid',\n css: getButtonSolidVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'solid',\n css: getButtonSolidVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'solid',\n css: getButtonSolidVariant(\n '$warning',\n '$warningMid',\n '$warningDark',\n '$tonal500'\n )\n },\n {\n theme: 'danger',\n appearance: 'solid',\n css: getButtonSolidVariant('$danger', '$dangerMid', '$dangerDark')\n },\n {\n theme: 'neutral',\n appearance: 'solid',\n css: getButtonSolidVariant(\n 'white',\n opacify('white', -0.1),\n opacify('white', -0.25),\n '$primary'\n )\n },\n {\n theme: 'primary',\n appearance: 'outline',\n css: getButtonOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'neutral',\n appearance: 'outline',\n css: getButtonOutlineVariant(\n 'white',\n opacify('white', -0.2),\n opacify('white', -0.35)\n )\n },\n {\n theme: 'secondary',\n appearance: 'outline',\n css: getButtonOutlineVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n }\n ]\n})\n\nconst WithLoader = ({ isLoading, children }) => {\n if (typeof isLoading !== 'boolean') {\n return children\n }\n return (\n <>\n <Loader\n css={{\n opacity: isLoading ? 1 : 0,\n position: 'absolute',\n transition: 'opacity 150ms'\n }}\n />\n <Box\n as=\"span\"\n css={isLoading ? { opacity: 0, transition: 'opacity 150ms' } : {}}\n >\n {children}\n </Box>\n </>\n )\n}\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: React.ComponentType | React.ElementType\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n isLoading,\n onClick,\n href,\n appearance = 'solid',\n size = 'md',\n theme = 'primary',\n type = 'button',\n ...rest\n },\n ref\n ) => {\n const linkSpecificProps = href\n ? {\n as: 'a',\n href,\n ...(isExternalLink(href)\n ? { target: '_blank', rel: 'noopener noreferrer' }\n : {})\n }\n : {}\n const buttonSpecificProps = !href ? { type } : {}\n\n // Note: button is not disabled when loading for accessibility purposes.\n // Instead the click action is not fired and the button looks faded\n return (\n <StyledButton\n isLoading={isLoading || false}\n onClick={!isLoading ? onClick : undefined}\n appearance={appearance}\n size={size}\n theme={theme}\n {...rest}\n {...linkSpecificProps}\n {...buttonSpecificProps}\n ref={ref}\n >\n <WithLoader isLoading={isLoading}>{children}</WithLoader>\n </StyledButton>\n )\n }\n) as React.FC<ButtonProps>\n\nButton.displayName = 'Button'\n"],"names":["getButtonOutlineVariant","base","interact","active","getButtonSolidVariant","text","StyledButton","styled","StyledIcon","darken","theme","opacify","WithLoader","isLoading","children","React","Loader","Box","Button","onClick","href","appearance","size","type","rest","ref","linkSpecificProps","isExternalLink"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken, opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled, theme } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { isExternalLink } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n base: string,\n interact: string,\n active: string\n) => ({\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&[disabled]': {\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n },\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n textDecoration: 'none',\n color: interact\n },\n '&:not([disabled]):active': {\n color: active\n }\n})\n\nconst getButtonSolidVariant = (\n base: string,\n interact: string,\n active: string,\n text = 'white'\n) => ({\n bg: base,\n color: text,\n '&[disabled]': {\n bg: '$tonal100',\n color: '$tonal400',\n cursor: 'not-allowed'\n },\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n bg: interact,\n color: text\n },\n '&:not([disabled]):active': {\n bg: active\n }\n})\n\nexport const StyledButton = styled('button', {\n alignItems: 'center',\n bg: 'unset',\n border: 'unset',\n borderRadius: '$0',\n cursor: 'pointer',\n display: 'flex',\n fontFamily: '$body',\n fontWeight: 600,\n justifyContent: 'center',\n p: 'unset',\n textDecoration: 'none',\n transition: 'all 100ms ease-out',\n whiteSpace: 'nowrap',\n width: 'max-content',\n variants: {\n theme: {\n primary: {},\n secondary: {},\n success: {},\n warning: {},\n danger: {},\n neutral: {}\n },\n appearance: {\n solid: {},\n outline: {}\n },\n size: {\n sm: {\n fontSize: '$sm',\n lineHeight: 1.53,\n height: '$3',\n px: '$4',\n gap: '$2',\n [`& ${StyledIcon}`]: { size: 16 }\n },\n md: {\n fontSize: '$md',\n lineHeight: 1.5,\n height: '$4',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 20 }\n },\n lg: {\n fontSize: '$lg',\n lineHeight: 1.5,\n height: '$5',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 22 }\n }\n },\n isLoading: {\n true: {\n cursor: 'not-allowed',\n opacity: 0.6,\n pointerEvents: 'none'\n }\n },\n fullWidth: {\n false: {\n width: 'max-content'\n },\n true: {\n width: '100%'\n }\n }\n },\n\n compoundVariants: [\n {\n theme: 'primary',\n appearance: 'solid',\n css: getButtonSolidVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'secondary',\n appearance: 'solid',\n css: getButtonSolidVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'solid',\n css: getButtonSolidVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'solid',\n css: getButtonSolidVariant(\n '$warning',\n '$warningMid',\n '$warningDark',\n '$tonal500'\n )\n },\n {\n theme: 'danger',\n appearance: 'solid',\n css: getButtonSolidVariant('$danger', '$dangerMid', '$dangerDark')\n },\n {\n theme: 'neutral',\n appearance: 'solid',\n css: getButtonSolidVariant(\n 'white',\n opacify('white', -0.1),\n opacify('white', -0.25),\n '$primary'\n )\n },\n {\n theme: 'primary',\n appearance: 'outline',\n css: getButtonOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'neutral',\n appearance: 'outline',\n css: getButtonOutlineVariant(\n 'white',\n opacify('white', -0.2),\n opacify('white', -0.35)\n )\n },\n {\n theme: 'secondary',\n appearance: 'outline',\n css: getButtonOutlineVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n }\n ]\n})\n\nconst LoaderContentsWrapper = styled('span', {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n visibility: 'hidden',\n variants: {\n size: {\n sm: { gap: '$2' },\n md: { gap: '$3' },\n lg: { gap: '$3' }\n }\n }\n})\n\nconst WithLoader = ({\n size,\n children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n <>\n <Loader css={{ position: 'absolute' }} />\n <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n </>\n)\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: React.ComponentType | React.ElementType\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n isLoading = false,\n onClick,\n href,\n appearance = 'solid',\n size = 'md',\n theme = 'primary',\n type = 'button',\n ...rest\n },\n ref\n ) => {\n const linkSpecificProps = href\n ? {\n as: 'a',\n href,\n ...(isExternalLink(href)\n ? { target: '_blank', rel: 'noopener noreferrer' }\n : {})\n }\n : {}\n const buttonSpecificProps = !href ? { type } : {}\n\n // Note: button is not disabled when loading for accessibility purposes.\n // Instead the click action is not fired and the button looks faded\n return (\n <StyledButton\n isLoading={isLoading}\n onClick={!isLoading ? onClick : undefined}\n appearance={appearance}\n size={size}\n theme={theme}\n {...rest}\n {...linkSpecificProps}\n {...buttonSpecificProps}\n ref={ref}\n >\n {isLoading ? <WithLoader size={size}>{children}</WithLoader> : children}\n </StyledButton>\n )\n }\n) as React.FC<ButtonProps>\n\nButton.displayName = 'Button'\n"],"names":["getButtonOutlineVariant","base","interact","active","getButtonSolidVariant","text","StyledButton","styled","StyledIcon","darken","theme","opacify","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","isLoading","onClick","href","appearance","type","rest","ref","linkSpecificProps","isExternalLink"],"mappings":"oRAWA,MAAMA,EAA0B,CAC9BC,EACAC,EACAC,KACI,CACJ,OAAQ,YACR,YAAa,eACb,MAAOF,EACP,cAAe,CACb,YAAa,YACb,MAAO,YACP,OAAQ,aACV,EACA,mDAAoD,CAClD,eAAgB,OAChB,MAAOC,CACT,EACA,2BAA4B,CAC1B,MAAOC,CACT,CACF,GAEMC,EAAwB,CAC5BH,EACAC,EACAC,EACAE,EAAO,WACH,CACJ,GAAIJ,EACJ,MAAOI,EACP,cAAe,CACb,GAAI,YACJ,MAAO,YACP,OAAQ,aACV,EACA,mDAAoD,CAClD,GAAIH,EACJ,MAAOG,CACT,EACA,2BAA4B,CAC1B,GAAIF,CACN,CACF,GAEaG,EAAeC,EAAO,SAAU,CAC3C,WAAY,SACZ,GAAI,QACJ,OAAQ,QACR,aAAc,KACd,OAAQ,UACR,QAAS,OACT,WAAY,QACZ,WAAY,IACZ,eAAgB,SAChB,EAAG,QACH,eAAgB,OAChB,WAAY,qBACZ,WAAY,SACZ,MAAO,cACP,SAAU,CACR,MAAO,CACL,QAAS,CAAC,EACV,UAAW,GACX,QAAS,CACT,EAAA,QAAS,GACT,OAAQ,CAAA,EACR,QAAS,CAAA,CACX,EACA,WAAY,CACV,MAAO,CACP,EAAA,QAAS,CACX,CAAA,EACA,KAAM,CACJ,GAAI,CACF,SAAU,MACV,WAAY,KACZ,OAAQ,KACR,GAAI,KACJ,IAAK,KACL,CAAC,KAAKC,KAAe,CAAE,KAAM,EAAG,CAClC,EACA,GAAI,CACF,SAAU,MACV,WAAY,IACZ,OAAQ,KACR,GAAI,KACJ,IAAK,KACL,CAAC,KAAKA,KAAe,CAAE,KAAM,EAAG,CAClC,EACA,GAAI,CACF,SAAU,MACV,WAAY,IACZ,OAAQ,KACR,GAAI,KACJ,IAAK,KACL,CAAC,KAAKA,KAAe,CAAE,KAAM,EAAG,CAClC,CACF,EACA,UAAW,CACT,KAAM,CACJ,OAAQ,cACR,QAAS,GACT,cAAe,MACjB,CACF,EACA,UAAW,CACT,MAAO,CACL,MAAO,aACT,EACA,KAAM,CACJ,MAAO,MACT,CACF,CACF,EAEA,iBAAkB,CAChB,CACE,MAAO,UACP,WAAY,QACZ,IAAKJ,EAAsB,WAAY,cAAe,cAAc,CACtE,EACA,CACE,MAAO,YACP,WAAY,QACZ,IAAKA,EACH,eACAK,EAAOC,EAAM,OAAO,YAAY,MAAO,EAAG,EAC1CD,EAAOC,EAAM,OAAO,YAAY,MAAO,GAAI,CAC7C,CACF,EACA,CACE,MAAO,UACP,WAAY,QACZ,IAAKN,EAAsB,WAAY,cAAe,cAAc,CACtE,EACA,CACE,MAAO,UACP,WAAY,QACZ,IAAKA,EACH,WACA,cACA,eACA,WACF,CACF,EACA,CACE,MAAO,SACP,WAAY,QACZ,IAAKA,EAAsB,UAAW,aAAc,aAAa,CACnE,EACA,CACE,MAAO,UACP,WAAY,QACZ,IAAKA,EACH,QACAO,EAAQ,QAAS,GAAI,EACrBA,EAAQ,QAAS,IAAK,EACtB,UACF,CACF,EACA,CACE,MAAO,UACP,WAAY,UACZ,IAAKX,EAAwB,WAAY,cAAe,cAAc,CACxE,EACA,CACE,MAAO,UACP,WAAY,UACZ,IAAKA,EACH,QACAW,EAAQ,QAAS,GAAI,EACrBA,EAAQ,QAAS,IAAK,CACxB,CACF,EACA,CACE,MAAO,YACP,WAAY,UACZ,IAAKX,EACH,eACAS,EAAOC,EAAM,OAAO,YAAY,MAAO,EAAG,EAC1CD,EAAOC,EAAM,OAAO,YAAY,MAAO,GAAI,CAC7C,CACF,CACF,CACF,CAAC,EAEKE,EAAwBL,EAAO,OAAQ,CAC3C,WAAY,SACZ,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,IAAK,IAAK,EAChB,GAAI,CAAE,IAAK,IAAK,EAChB,GAAI,CAAE,IAAK,IAAK,CAClB,CACF,CACF,CAAC,EAEKM,EAAa,CAAC,CAClB,KAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACC,EAAA,CAAO,IAAK,CAAE,SAAU,UAAW,EAAG,EACvCD,EAAA,cAACJ,EAAA,CAAsB,KAAME,CAAOC,EAAAA,CAAS,CAC/C,EAaWG,EAASF,EAAM,WAC1B,CACE,CACE,SAAAD,EACA,UAAAI,EAAY,GACZ,QAAAC,EACA,KAAAC,EACA,WAAAC,EAAa,QACb,KAAAR,EAAO,KACP,MAAAJ,EAAQ,UACR,KAAAa,EAAO,YACJC,CACL,EACAC,IACG,CACH,MAAMC,EAAoBL,EACtB,CACE,GAAI,IACJ,KAAAA,EACA,GAAIM,EAAeN,CAAI,EACnB,CAAE,OAAQ,SAAU,IAAK,qBAAsB,EAC/C,CAAA,CACN,EACA,CAKJ,EAAA,OACEL,EAAA,cAACV,EACC,CAAA,UAAWa,EACX,QAAUA,EAAsB,OAAVC,EACtB,WAAYE,EACZ,KAAMR,EACN,MAAOJ,EACN,GAAGc,EACH,GAAGE,EACH,GAbwBL,EAAkB,CAAX,EAAA,CAAE,KAAAE,CAAK,EAcvC,IAAKE,CAAAA,EAEJN,EAAYH,EAAA,cAACH,EAAA,CAAW,KAAMC,CAAAA,EAAOC,CAAS,EAAgBA,CACjE,CAEJ,CACF,EAEAG,EAAO,YAAc"}
@@ -1,2 +1,2 @@
1
- import{createTheme as a}from"../../stitches.js";const c={},n=({prefix:e,colorName:l,color0:r=""})=>{const o={};let F=1;r&&(o[`${e}${F}`]=r,F++);let t=1;for(F;F<=11;F++)o[`${e}${F}`]=`$${l}${t*100}`,t++;return o};c["interactive-loContrast"]=a("interactive-loContrast",{colors:{interactiveForeground:"$foreground",interactive1:"$accent1",interactive2:"$accent2",interactive3:"$accent3"}}),c["interactive-hiContrast"]=a("interactive-hiContrast",{colors:{interactiveForeground:"$foreground7plus",interactive1:"$accent9",interactive2:"$accent10",interactive3:"$accent11"}});const m={grey1:{colorName:"grey",color0:"#FFFFFF"},grey2:{colorName:"grey"},blue1:{colorName:"blue",color0:"#FFFFFF"},blue2:{colorName:"blue"},purple1:{colorName:"purple",color0:"#FFFFFF"},purple2:{colorName:"purple"},cyan1:{colorName:"cyan",color0:"#FFFFFF"},cyan2:{colorName:"cyan"},green1:{colorName:"green",color0:"#FFFFFF"},green2:{colorName:"green"},magenta1:{colorName:"magenta",color0:"#FFFFFF"},magenta2:{colorName:"magenta"},red1:{colorName:"red",color0:"#FFFFFF"},red2:{colorName:"red"},teal1:{colorName:"teal",color0:"#FFFFFF"},teal2:{colorName:"teal"},orange1:{colorName:"orange",color0:"#FFFFFF"},orange2:{colorName:"orange"},yellow1:{colorName:"yellow",color0:"#FFFFFF"},yellow2:{colorName:"yellow"},lime1:{colorName:"lime",color0:"#FFFFFF"},lime2:{colorName:"lime"}},i=()=>{Object.entries(m).forEach(([e,{colorName:l,color0:r=""}])=>{const o=`base-${e}`;c[o]=a(o,{colors:{foreground:"$grey1000",foreground7plus:"#FFFFFF",...n({prefix:"base",colorName:l,color0:r})}})})},N={grey1:{colorName:"grey",color0:"#FFFFFF"},grey2:{colorName:"grey"},blue1:{colorName:"blue",color0:"#FFFFFF"},blue2:{colorName:"blue"},purple1:{colorName:"purple",color0:"#FFFFFF"},purple2:{colorName:"purple"},cyan1:{colorName:"cyan",color0:"#FFFFFF"},cyan2:{colorName:"cyan"},green1:{colorName:"green",color0:"#FFFFFF"},green2:{colorName:"green"},magenta1:{colorName:"magenta",color0:"#FFFFFF"},magenta2:{colorName:"magenta"},red1:{colorName:"red",color0:"#FFFFFF"},red2:{colorName:"red"},teal1:{colorName:"teal",color0:"#FFFFFF"},teal2:{colorName:"teal"},orange1:{colorName:"orange",color0:"#FFFFFF"},orange2:{colorName:"orange"},yellow1:{colorName:"yellow",color0:"#FFFFFF"},yellow2:{colorName:"yellow"},lime1:{colorName:"lime",color0:"#FFFFFF"},lime2:{colorName:"lime"}},g=()=>{Object.entries(N).forEach(([e,{colorName:l,color0:r=""}])=>{const o=`accent-${e}`;c[o]=a(o,{colors:n({prefix:"accent",colorName:l,color0:r})})})};i(),g();export{N as accents,m as bases,c as colorSchemes};
1
+ import{createTheme as a}from"../../stitches.js";const c={},m=({prefix:e,colorName:l,color0:r=""})=>{const o={};let F=1;r&&(o[`${e}${F}`]=r,F++);let n=1;for(F;F<=11;F++)o[`${e}${F}`]=`$${l}${n*100}`,n++;return o};c["interactive-loContrast"]=a({colors:{interactiveForeground:"$foreground",interactive1:"$accent1",interactive2:"$accent2",interactive3:"$accent3"}}),c["interactive-hiContrast"]=a({colors:{interactiveForeground:"$foreground7plus",interactive1:"$accent9",interactive2:"$accent10",interactive3:"$accent11"}});const t={grey1:{colorName:"grey",color0:"#FFFFFF"},grey2:{colorName:"grey"},blue1:{colorName:"blue",color0:"#FFFFFF"},blue2:{colorName:"blue"},purple1:{colorName:"purple",color0:"#FFFFFF"},purple2:{colorName:"purple"},cyan1:{colorName:"cyan",color0:"#FFFFFF"},cyan2:{colorName:"cyan"},green1:{colorName:"green",color0:"#FFFFFF"},green2:{colorName:"green"},magenta1:{colorName:"magenta",color0:"#FFFFFF"},magenta2:{colorName:"magenta"},red1:{colorName:"red",color0:"#FFFFFF"},red2:{colorName:"red"},teal1:{colorName:"teal",color0:"#FFFFFF"},teal2:{colorName:"teal"},orange1:{colorName:"orange",color0:"#FFFFFF"},orange2:{colorName:"orange"},yellow1:{colorName:"yellow",color0:"#FFFFFF"},yellow2:{colorName:"yellow"},lime1:{colorName:"lime",color0:"#FFFFFF"},lime2:{colorName:"lime"}},g=()=>{Object.entries(t).forEach(([e,{colorName:l,color0:r=""}])=>{const o=`base-${e}`;c[o]=a({colors:{foreground:"$grey1000",foreground7plus:"#FFFFFF",...m({prefix:"base",colorName:l,color0:r})}})})},N={grey1:{colorName:"grey",color0:"#FFFFFF"},grey2:{colorName:"grey"},blue1:{colorName:"blue",color0:"#FFFFFF"},blue2:{colorName:"blue"},purple1:{colorName:"purple",color0:"#FFFFFF"},purple2:{colorName:"purple"},cyan1:{colorName:"cyan",color0:"#FFFFFF"},cyan2:{colorName:"cyan"},green1:{colorName:"green",color0:"#FFFFFF"},green2:{colorName:"green"},magenta1:{colorName:"magenta",color0:"#FFFFFF"},magenta2:{colorName:"magenta"},red1:{colorName:"red",color0:"#FFFFFF"},red2:{colorName:"red"},teal1:{colorName:"teal",color0:"#FFFFFF"},teal2:{colorName:"teal"},orange1:{colorName:"orange",color0:"#FFFFFF"},orange2:{colorName:"orange"},yellow1:{colorName:"yellow",color0:"#FFFFFF"},yellow2:{colorName:"yellow"},lime1:{colorName:"lime",color0:"#FFFFFF"},lime2:{colorName:"lime"}},i=()=>{Object.entries(N).forEach(([e,{colorName:l,color0:r=""}])=>{const o=`accent-${e}`;c[o]=a({colors:m({prefix:"accent",colorName:l,color0:r})})})};g(),i();export{N as accents,t as bases,c as colorSchemes};
2
2
  //# sourceMappingURL=stitches.colorscheme.config.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"stitches.colorscheme.config.js","sources":["../../../src/experiments/color-scheme/stitches.colorscheme.config.ts"],"sourcesContent":["import { createTheme } from '~/stitches'\n\nexport const colorSchemes = {}\n\nconst generateColors = ({ prefix, colorName, color0 = '' }) => {\n const colors = {}\n let i = 1\n if (color0) {\n colors[`${prefix}${i}`] = color0\n i++\n }\n let k = 1\n for (i; i <= 11; i++) {\n colors[`${prefix}${i}`] = `$${colorName}${k * 100}`\n k++\n }\n return colors\n}\n\ncolorSchemes['interactive-loContrast'] = createTheme('interactive-loContrast', {\n colors: {\n interactiveForeground: '$foreground',\n interactive1: '$accent1',\n interactive2: '$accent2',\n interactive3: '$accent3'\n }\n})\n\ncolorSchemes['interactive-hiContrast'] = createTheme('interactive-hiContrast', {\n colors: {\n interactiveForeground: '$foreground7plus',\n interactive1: '$accent9',\n interactive2: '$accent10',\n interactive3: '$accent11'\n }\n})\n\ntype TcolorSetup = {\n colorName: string\n color0?: string\n}\n\nexport const bases = {\n grey1: { colorName: 'grey', color0: '#FFFFFF' },\n grey2: { colorName: 'grey' },\n blue1: { colorName: 'blue', color0: '#FFFFFF' },\n blue2: { colorName: 'blue' },\n purple1: { colorName: 'purple', color0: '#FFFFFF' },\n purple2: { colorName: 'purple' },\n cyan1: { colorName: 'cyan', color0: '#FFFFFF' },\n cyan2: { colorName: 'cyan' },\n green1: { colorName: 'green', color0: '#FFFFFF' },\n green2: { colorName: 'green' },\n magenta1: { colorName: 'magenta', color0: '#FFFFFF' },\n magenta2: { colorName: 'magenta' },\n red1: { colorName: 'red', color0: '#FFFFFF' },\n red2: { colorName: 'red' },\n teal1: { colorName: 'teal', color0: '#FFFFFF' },\n teal2: { colorName: 'teal' },\n orange1: { colorName: 'orange', color0: '#FFFFFF' },\n orange2: { colorName: 'orange' },\n yellow1: { colorName: 'yellow', color0: '#FFFFFF' },\n yellow2: { colorName: 'yellow' },\n lime1: { colorName: 'lime', color0: '#FFFFFF' },\n lime2: { colorName: 'lime' }\n}\nconst generateBase = () => {\n Object.entries(bases).forEach(\n ([name, { colorName, color0 = '' }]: [string, TcolorSetup]) => {\n const themeName = `base-${name}`\n colorSchemes[themeName] = createTheme(themeName, {\n colors: {\n foreground: '$grey1000',\n foreground7plus: '#FFFFFF',\n ...generateColors({ prefix: 'base', colorName, color0 })\n }\n })\n }\n )\n}\n\nexport const accents = {\n grey1: { colorName: 'grey', color0: '#FFFFFF' },\n grey2: { colorName: 'grey' },\n blue1: { colorName: 'blue', color0: '#FFFFFF' },\n blue2: { colorName: 'blue' },\n purple1: { colorName: 'purple', color0: '#FFFFFF' },\n purple2: { colorName: 'purple' },\n cyan1: { colorName: 'cyan', color0: '#FFFFFF' },\n cyan2: { colorName: 'cyan' },\n green1: { colorName: 'green', color0: '#FFFFFF' },\n green2: { colorName: 'green' },\n magenta1: { colorName: 'magenta', color0: '#FFFFFF' },\n magenta2: { colorName: 'magenta' },\n red1: { colorName: 'red', color0: '#FFFFFF' },\n red2: { colorName: 'red' },\n teal1: { colorName: 'teal', color0: '#FFFFFF' },\n teal2: { colorName: 'teal' },\n orange1: { colorName: 'orange', color0: '#FFFFFF' },\n orange2: { colorName: 'orange' },\n yellow1: { colorName: 'yellow', color0: '#FFFFFF' },\n yellow2: { colorName: 'yellow' },\n lime1: { colorName: 'lime', color0: '#FFFFFF' },\n lime2: { colorName: 'lime' }\n}\nconst generateAccent = () => {\n Object.entries(accents).forEach(\n ([name, { colorName, color0 = '' }]: [string, TcolorSetup]) => {\n const themeName = `accent-${name}`\n colorSchemes[themeName] = createTheme(themeName, {\n colors: generateColors({ prefix: 'accent', colorName, color0 })\n })\n }\n )\n}\n\ngenerateBase()\ngenerateAccent()\n"],"names":["colorSchemes","generateColors","prefix","colorName","color0","colors","i","k","createTheme","bases","generateBase","name","themeName","accents","generateAccent"],"mappings":"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"}
1
+ {"version":3,"file":"stitches.colorscheme.config.js","sources":["../../../src/experiments/color-scheme/stitches.colorscheme.config.ts"],"sourcesContent":["import { createTheme } from '~/stitches'\n\nexport const colorSchemes = {}\n\nconst generateColors = ({ prefix, colorName, color0 = '' }) => {\n const colors = {}\n let i = 1\n if (color0) {\n colors[`${prefix}${i}`] = color0\n i++\n }\n let k = 1\n for (i; i <= 11; i++) {\n colors[`${prefix}${i}`] = `$${colorName}${k * 100}`\n k++\n }\n return colors\n}\n\ncolorSchemes['interactive-loContrast'] = createTheme({\n colors: {\n interactiveForeground: '$foreground',\n interactive1: '$accent1',\n interactive2: '$accent2',\n interactive3: '$accent3'\n }\n})\n\ncolorSchemes['interactive-hiContrast'] = createTheme({\n colors: {\n interactiveForeground: '$foreground7plus',\n interactive1: '$accent9',\n interactive2: '$accent10',\n interactive3: '$accent11'\n }\n})\n\ntype TcolorSetup = {\n colorName: string\n color0?: string\n}\n\nexport const bases = {\n grey1: { colorName: 'grey', color0: '#FFFFFF' },\n grey2: { colorName: 'grey' },\n blue1: { colorName: 'blue', color0: '#FFFFFF' },\n blue2: { colorName: 'blue' },\n purple1: { colorName: 'purple', color0: '#FFFFFF' },\n purple2: { colorName: 'purple' },\n cyan1: { colorName: 'cyan', color0: '#FFFFFF' },\n cyan2: { colorName: 'cyan' },\n green1: { colorName: 'green', color0: '#FFFFFF' },\n green2: { colorName: 'green' },\n magenta1: { colorName: 'magenta', color0: '#FFFFFF' },\n magenta2: { colorName: 'magenta' },\n red1: { colorName: 'red', color0: '#FFFFFF' },\n red2: { colorName: 'red' },\n teal1: { colorName: 'teal', color0: '#FFFFFF' },\n teal2: { colorName: 'teal' },\n orange1: { colorName: 'orange', color0: '#FFFFFF' },\n orange2: { colorName: 'orange' },\n yellow1: { colorName: 'yellow', color0: '#FFFFFF' },\n yellow2: { colorName: 'yellow' },\n lime1: { colorName: 'lime', color0: '#FFFFFF' },\n lime2: { colorName: 'lime' }\n}\nconst generateBase = () => {\n Object.entries(bases).forEach(\n ([name, { colorName, color0 = '' }]: [string, TcolorSetup]) => {\n const themeName = `base-${name}`\n colorSchemes[themeName] = createTheme({\n colors: {\n foreground: '$grey1000',\n foreground7plus: '#FFFFFF',\n ...generateColors({ prefix: 'base', colorName, color0 })\n }\n })\n }\n )\n}\n\nexport const accents = {\n grey1: { colorName: 'grey', color0: '#FFFFFF' },\n grey2: { colorName: 'grey' },\n blue1: { colorName: 'blue', color0: '#FFFFFF' },\n blue2: { colorName: 'blue' },\n purple1: { colorName: 'purple', color0: '#FFFFFF' },\n purple2: { colorName: 'purple' },\n cyan1: { colorName: 'cyan', color0: '#FFFFFF' },\n cyan2: { colorName: 'cyan' },\n green1: { colorName: 'green', color0: '#FFFFFF' },\n green2: { colorName: 'green' },\n magenta1: { colorName: 'magenta', color0: '#FFFFFF' },\n magenta2: { colorName: 'magenta' },\n red1: { colorName: 'red', color0: '#FFFFFF' },\n red2: { colorName: 'red' },\n teal1: { colorName: 'teal', color0: '#FFFFFF' },\n teal2: { colorName: 'teal' },\n orange1: { colorName: 'orange', color0: '#FFFFFF' },\n orange2: { colorName: 'orange' },\n yellow1: { colorName: 'yellow', color0: '#FFFFFF' },\n yellow2: { colorName: 'yellow' },\n lime1: { colorName: 'lime', color0: '#FFFFFF' },\n lime2: { colorName: 'lime' }\n}\nconst generateAccent = () => {\n Object.entries(accents).forEach(\n ([name, { colorName, color0 = '' }]: [string, TcolorSetup]) => {\n const themeName = `accent-${name}`\n colorSchemes[themeName] = createTheme({\n colors: generateColors({ prefix: 'accent', colorName, color0 })\n })\n }\n )\n}\n\ngenerateBase()\ngenerateAccent()\n"],"names":["colorSchemes","generateColors","prefix","colorName","color0","colors","i","k","createTheme","bases","generateBase","name","themeName","accents","generateAccent"],"mappings":"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"}