@atom-learning/components 2.46.0 → 2.48.0

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.
Files changed (66) hide show
  1. package/CHANGELOG.md +3 -14
  2. package/dist/components/accordion/AccordionContent.js +1 -1
  3. package/dist/components/accordion/AccordionContent.js.map +1 -1
  4. package/dist/components/accordion/AccordionTrigger.d.ts +2 -2
  5. package/dist/components/accordion/AccordionTrigger.js +1 -1
  6. package/dist/components/accordion/AccordionTrigger.js.map +1 -1
  7. package/dist/components/chip/Chip.d.ts +1 -1
  8. package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.d.ts +1 -1
  9. package/dist/components/chip-toggle-group/ChipToggleGroupItem.d.ts +1 -1
  10. package/dist/components/chip-toggle-group/ChipToggleGroupItem.js +1 -1
  11. package/dist/components/index.d.ts +3 -0
  12. package/dist/components/tabs/TabsTrigger.js +1 -1
  13. package/dist/components/tabs/TabsTrigger.js.map +1 -1
  14. package/dist/components/tabs/TabsTriggerList.d.ts +2 -2
  15. package/dist/components/tabs/TabsTriggerList.js +1 -1
  16. package/dist/components/tabs/TabsTriggerList.js.map +1 -1
  17. package/dist/components/tile/Tile.d.ts +224 -0
  18. package/dist/components/tile/Tile.js +2 -0
  19. package/dist/components/tile/Tile.js.map +1 -0
  20. package/dist/components/tile/TileGroup.d.ts +227 -0
  21. package/dist/components/tile/TileGroup.js +2 -0
  22. package/dist/components/tile/TileGroup.js.map +1 -0
  23. package/dist/components/tile/TileNoOverflowContainer.d.ts +425 -0
  24. package/dist/components/tile/TileNoOverflowContainer.js +2 -0
  25. package/dist/components/tile/TileNoOverflowContainer.js.map +1 -0
  26. package/dist/components/tile/index.d.ts +7 -0
  27. package/dist/components/tile/index.js +2 -0
  28. package/dist/components/tile/index.js.map +1 -0
  29. package/dist/components/tile-interactive/TileInteractive.d.ts +868 -0
  30. package/dist/components/tile-interactive/TileInteractive.js +2 -0
  31. package/dist/components/tile-interactive/TileInteractive.js.map +1 -0
  32. package/dist/components/tile-interactive/index.d.ts +1 -0
  33. package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts +656 -0
  34. package/dist/components/tile-toggle-group/TileToggleGroupItem.js +2 -0
  35. package/dist/components/tile-toggle-group/TileToggleGroupItem.js.map +1 -0
  36. package/dist/components/tile-toggle-group/TileToggleGroupRoot.d.ts +453 -0
  37. package/dist/components/tile-toggle-group/TileToggleGroupRoot.js +2 -0
  38. package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map +1 -0
  39. package/dist/components/tile-toggle-group/index.d.ts +7 -0
  40. package/dist/components/tile-toggle-group/index.js +2 -0
  41. package/dist/components/tile-toggle-group/index.js.map +1 -0
  42. package/dist/components/toggle-group/ToggleGroupRoot.js +1 -1
  43. package/dist/docgen.json +1 -1
  44. package/dist/experiments/color-scheme/ColorScheme.d.ts +143 -25
  45. package/dist/experiments/color-scheme/ColorScheme.js +1 -1
  46. package/dist/experiments/color-scheme/ColorScheme.js.map +1 -1
  47. package/dist/experiments/color-scheme/index.d.ts +1 -0
  48. package/dist/experiments/color-scheme/stitches.colorscheme.config.d.ts +33 -242
  49. package/dist/experiments/color-scheme/stitches.colorscheme.config.js +1 -1
  50. package/dist/experiments/color-scheme/stitches.colorscheme.config.js.map +1 -1
  51. package/dist/index.cjs.js +1 -1
  52. package/dist/index.cjs.js.map +1 -1
  53. package/dist/index.d.ts +1 -0
  54. package/dist/index.js +1 -1
  55. package/dist/utilities/no-overflow-container/NoOverflowContainer.d.ts +425 -0
  56. package/dist/utilities/no-overflow-container/NoOverflowContainer.js +2 -0
  57. package/dist/utilities/no-overflow-container/NoOverflowContainer.js.map +1 -0
  58. package/dist/utilities/no-overflow-container/index.d.ts +1 -0
  59. package/package.json +1 -1
  60. package/dist/experiments/color-scheme/blue.json.js +0 -2
  61. package/dist/experiments/color-scheme/blue.json.js.map +0 -1
  62. package/dist/experiments/color-scheme/generateAlphaColors.d.ts +0 -1
  63. package/dist/experiments/color-scheme/generateAlphaColors.js +0 -2
  64. package/dist/experiments/color-scheme/generateAlphaColors.js.map +0 -1
  65. package/dist/experiments/color-scheme/slate.json.js +0 -2
  66. package/dist/experiments/color-scheme/slate.json.js.map +0 -1
@@ -1,9 +1,11 @@
1
1
  import * as React from 'react';
2
2
  import { accents, bases } from './stitches.colorscheme.config';
3
- declare type TColorSchemeOwnProps = {
3
+ export declare type TcolorScheme = {
4
4
  base?: keyof typeof bases;
5
5
  accent?: keyof typeof accents;
6
- interactive?: 'loContrast1' | 'loContrast2' | 'hiContrast1' | 'hiContrast2';
6
+ interactive?: 'loContrast' | 'hiContrast';
7
+ };
8
+ declare type TColorSchemeOwnProps = TcolorScheme & {
7
9
  asChild?: boolean;
8
10
  };
9
11
  declare const StyledColorScheme: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
@@ -24,29 +26,145 @@ declare const StyledColorScheme: import("@stitches/react/types/styled-component"
24
26
  hover: string;
25
27
  }, {
26
28
  colors: {
27
- slate1: any;
28
- slate2: any;
29
- slate3: any;
30
- slate4: any;
31
- slate5: any;
32
- slate6: any;
33
- slate7: any;
34
- slate8: any;
35
- slate9: any;
36
- slate10: any;
37
- blue1: any;
38
- blue2: any;
39
- blue3: any;
40
- blue4: any;
41
- blue5: any;
42
- blue6: any;
43
- blue7: any;
44
- blue8: any;
45
- blue9: any;
46
- blue10: any;
29
+ textForeground: any;
30
+ textSubtle: any;
31
+ textPlaceholder: any;
47
32
  background: any;
48
- foreground: any;
49
- foreground6plus: any;
33
+ backgroundAccent: any;
34
+ grey100: any;
35
+ grey200: any;
36
+ grey300: any;
37
+ grey400: any;
38
+ grey500: any;
39
+ grey600: any;
40
+ grey700: any;
41
+ grey800: any;
42
+ grey900: any;
43
+ grey1000: any;
44
+ grey1100: any;
45
+ grey1200: any;
46
+ blue100: any;
47
+ blue200: any;
48
+ blue300: any;
49
+ blue400: any;
50
+ blue500: any;
51
+ blue600: any;
52
+ blue700: any;
53
+ blue800: any;
54
+ blue900: any;
55
+ blue1000: any;
56
+ blue1100: any;
57
+ blue1200: any;
58
+ purple100: any;
59
+ purple200: any;
60
+ purple300: any;
61
+ purple400: any;
62
+ purple500: any;
63
+ purple600: any;
64
+ purple700: any;
65
+ purple800: any;
66
+ purple900: any;
67
+ purple1000: any;
68
+ purple1100: any;
69
+ purple1200: any;
70
+ tonal50: any;
71
+ tonal100: any;
72
+ tonal200: any;
73
+ tonal300: any;
74
+ tonal400: any;
75
+ tonal500: any;
76
+ tonal600: any;
77
+ alpha100: any;
78
+ alpha150: any;
79
+ alpha200: any;
80
+ alpha250: any;
81
+ alpha600: any;
82
+ primaryLight: any;
83
+ primary: any;
84
+ primaryMid: any;
85
+ primaryDark: any;
86
+ secondary: any;
87
+ brandRed: any;
88
+ brandRedAccent: any;
89
+ brandGreen: any;
90
+ brandGreenAccent: any;
91
+ brandPurple: any;
92
+ brandPurpleAccent: any;
93
+ brandYellow: any;
94
+ brandYellowAccent: any;
95
+ successLight: any;
96
+ success: any;
97
+ successMid: any;
98
+ successDark: any;
99
+ dangerLight: any;
100
+ danger: any;
101
+ dangerMid: any;
102
+ dangerDark: any;
103
+ warningLight: any;
104
+ warning: any;
105
+ warningMid: any;
106
+ warningDark: any;
107
+ warningText: any;
108
+ subjectEnglish: any;
109
+ subjectMaths: any;
110
+ subjectScience: any;
111
+ subjectVerbalReasoning: any;
112
+ subjectNonVerbalReasoning: any;
113
+ subjectCreativeWriting: any;
114
+ subjectExamSkills: any;
115
+ };
116
+ space: {
117
+ "0": any;
118
+ "1": any;
119
+ "2": any;
120
+ "3": any;
121
+ "4": any;
122
+ "5": any;
123
+ "6": any;
124
+ "7": any;
125
+ "8": any;
126
+ "9": any;
127
+ "24": any;
128
+ };
129
+ fontSizes: {
130
+ xs: any;
131
+ sm: any;
132
+ md: any;
133
+ lg: any;
134
+ xl: any;
135
+ "2xl": any;
136
+ "3xl": any;
137
+ "4xl": any;
138
+ };
139
+ fonts: {
140
+ sans: any;
141
+ mono: any;
142
+ display: any;
143
+ body: any;
144
+ };
145
+ sizes: {
146
+ "0": any;
147
+ "1": any;
148
+ "2": any;
149
+ "3": any;
150
+ "4": any;
151
+ "5": any;
152
+ "6": any;
153
+ "7": any;
154
+ "8": any;
155
+ };
156
+ radii: {
157
+ "0": any;
158
+ "1": any;
159
+ "2": any;
160
+ "3": any;
161
+ round: any;
162
+ };
163
+ shadows: {
164
+ "0": any;
165
+ "1": any;
166
+ "2": any;
167
+ "3": any;
50
168
  };
51
169
  }, import("@stitches/react/types/config").DefaultThemeMap, {
52
170
  bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
@@ -107,5 +225,5 @@ declare type TColorSchemeProps = React.ComponentProps<typeof StyledColorScheme>
107
225
  /**
108
226
  * @experimental Component has not been finalised. Further design input required. Use with caution.
109
227
  */
110
- export declare const ColorScheme: React.ForwardRefExoticComponent<Pick<TColorSchemeProps, "css" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | keyof TColorSchemeOwnProps> & React.RefAttributes<HTMLDivElement>>;
228
+ export declare const ColorScheme: React.ForwardRefExoticComponent<Pick<TColorSchemeProps, "css" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | keyof TcolorScheme> & React.RefAttributes<HTMLDivElement>>;
111
229
  export {};
@@ -1,2 +1,2 @@
1
- import{Slot as f}from"@radix-ui/react-slot";import*as o from"react";import{styled as d,colorSchemes as e}from"./stitches.colorscheme.config.js";const p=d("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?f:p,{ref:l,className:n,...i})});t.displayName="ColorScheme";export{t as ColorScheme};
1
+ import{Slot as f}from"@radix-ui/react-slot";import*as o from"react";import{styled as p}from"../../stitches.js";import{colorSchemes as e}from"./stitches.colorscheme.config.js";const d=p("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?f:d,{ref:l,className:n,...i})});r.displayName="ColorScheme";export{r as ColorScheme};
2
2
  //# sourceMappingURL=ColorScheme.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ColorScheme.js","sources":["../../../src/experiments/color-scheme/ColorScheme.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport {\n accents,\n bases,\n colorSchemes,\n styled\n} from './stitches.colorscheme.config'\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"}
1
+ {"version":3,"file":"ColorScheme.js","sources":["../../../src/experiments/color-scheme/ColorScheme.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { accents, bases, colorSchemes } from './stitches.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\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":"+KAiBA,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"}
@@ -1 +1,2 @@
1
1
  export { ColorScheme } from './ColorScheme';
2
+ export type { TcolorScheme } from './ColorScheme';
@@ -1,256 +1,47 @@
1
1
  export declare const colorSchemes: {};
2
- export declare const styled: {
3
- withConfig: (config: {
4
- componentId?: string | undefined;
5
- displayName?: string | undefined;
6
- shouldForwardStitchesProp?: ((prop: "css" | (string & {})) => boolean | void) | undefined;
7
- }) => import("@stitches/react/types/stitches").StyledFunctionType<{
8
- sm: string;
9
- md: string;
10
- lg: string;
11
- xl: string;
12
- reducedMotion: string;
13
- allowMotion: string;
14
- hover: string;
15
- }, {
16
- colors: {
17
- slate1: any;
18
- slate2: any;
19
- slate3: any;
20
- slate4: any;
21
- slate5: any;
22
- slate6: any;
23
- slate7: any;
24
- slate8: any;
25
- slate9: any;
26
- slate10: any;
27
- blue1: any;
28
- blue2: any;
29
- blue3: any;
30
- blue4: any;
31
- blue5: any;
32
- blue6: any;
33
- blue7: any;
34
- blue8: any;
35
- blue9: any;
36
- blue10: any;
37
- background: any;
38
- foreground: any;
39
- foreground6plus: any;
40
- };
41
- }, import("@stitches/react/types/config").DefaultThemeMap, {
42
- bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
43
- background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
44
- };
45
- size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
46
- height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
47
- width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
48
- };
49
- p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
50
- padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
51
- };
52
- pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
53
- paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
54
- };
55
- pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
56
- paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
57
- };
58
- pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
59
- paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
60
- };
61
- pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
62
- paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
63
- };
64
- px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
65
- paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
66
- paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
67
- };
68
- py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
69
- paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
70
- paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
71
- };
72
- m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
73
- margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
74
- };
75
- mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
76
- marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
77
- };
78
- mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
79
- marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
80
- };
81
- mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
82
- marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
83
- };
84
- ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
85
- marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
86
- };
87
- mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
88
- marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
89
- marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
90
- };
91
- my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
92
- marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
93
- marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
94
- };
95
- }>;
96
- } & import("@stitches/react/types/stitches").StyledFunctionType<{
97
- sm: string;
98
- md: string;
99
- lg: string;
100
- xl: string;
101
- reducedMotion: string;
102
- allowMotion: string;
103
- hover: string;
104
- }, {
105
- colors: {
106
- slate1: any;
107
- slate2: any;
108
- slate3: any;
109
- slate4: any;
110
- slate5: any;
111
- slate6: any;
112
- slate7: any;
113
- slate8: any;
114
- slate9: any;
115
- slate10: any;
116
- blue1: any;
117
- blue2: any;
118
- blue3: any;
119
- blue4: any;
120
- blue5: any;
121
- blue6: any;
122
- blue7: any;
123
- blue8: any;
124
- blue9: any;
125
- blue10: any;
126
- background: any;
127
- foreground: any;
128
- foreground6plus: any;
129
- };
130
- }, import("@stitches/react/types/config").DefaultThemeMap, {
131
- bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
132
- background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
133
- };
134
- size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
135
- height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
136
- width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
137
- };
138
- p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
139
- padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
140
- };
141
- pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
142
- paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
143
- };
144
- pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
145
- paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
146
- };
147
- pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
148
- paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
149
- };
150
- pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
151
- paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
2
+ export declare const bases: {
3
+ grey1: {
4
+ colorName: string;
5
+ color0: string;
152
6
  };
153
- px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
154
- paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
155
- paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
7
+ grey2: {
8
+ colorName: string;
156
9
  };
157
- py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
158
- paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
159
- paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
10
+ blue1: {
11
+ colorName: string;
12
+ color0: string;
160
13
  };
161
- m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
162
- margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
14
+ blue2: {
15
+ colorName: string;
163
16
  };
164
- mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
165
- marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
17
+ purple1: {
18
+ colorName: string;
19
+ color0: string;
166
20
  };
167
- mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
168
- marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
21
+ purple2: {
22
+ colorName: string;
169
23
  };
170
- mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
171
- marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
24
+ };
25
+ export declare const accents: {
26
+ grey1: {
27
+ colorName: string;
28
+ color0: string;
172
29
  };
173
- ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
174
- marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
30
+ grey2: {
31
+ colorName: string;
175
32
  };
176
- mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
177
- marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
178
- marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
33
+ blue1: {
34
+ colorName: string;
35
+ color0: string;
179
36
  };
180
- my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
181
- marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
182
- marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
37
+ blue2: {
38
+ colorName: string;
183
39
  };
184
- }>, createTheme: <Argument0 extends string | ({
185
- colors?: {
186
- slate1?: string | number | boolean | undefined;
187
- slate2?: string | number | boolean | undefined;
188
- slate3?: string | number | boolean | undefined;
189
- slate4?: string | number | boolean | undefined;
190
- slate5?: string | number | boolean | undefined;
191
- slate6?: string | number | boolean | undefined;
192
- slate7?: string | number | boolean | undefined;
193
- slate8?: string | number | boolean | undefined;
194
- slate9?: string | number | boolean | undefined;
195
- slate10?: string | number | boolean | undefined;
196
- blue1?: string | number | boolean | undefined;
197
- blue2?: string | number | boolean | undefined;
198
- blue3?: string | number | boolean | undefined;
199
- blue4?: string | number | boolean | undefined;
200
- blue5?: string | number | boolean | undefined;
201
- blue6?: string | number | boolean | undefined;
202
- blue7?: string | number | boolean | undefined;
203
- blue8?: string | number | boolean | undefined;
204
- blue9?: string | number | boolean | undefined;
205
- blue10?: string | number | boolean | undefined;
206
- background?: string | number | boolean | undefined;
207
- foreground?: string | number | boolean | undefined;
208
- foreground6plus?: string | number | boolean | undefined;
209
- } | undefined;
210
- } & {
211
- [x: string]: {
212
- [x: string]: string | number | boolean;
213
- [x: number]: string | number | boolean;
40
+ purple1: {
41
+ colorName: string;
42
+ color0: string;
214
43
  };
215
- }), Argument1 extends string | ({
216
- colors?: {
217
- slate1?: string | number | boolean | undefined;
218
- slate2?: string | number | boolean | undefined;
219
- slate3?: string | number | boolean | undefined;
220
- slate4?: string | number | boolean | undefined;
221
- slate5?: string | number | boolean | undefined;
222
- slate6?: string | number | boolean | undefined;
223
- slate7?: string | number | boolean | undefined;
224
- slate8?: string | number | boolean | undefined;
225
- slate9?: string | number | boolean | undefined;
226
- slate10?: string | number | boolean | undefined;
227
- blue1?: string | number | boolean | undefined;
228
- blue2?: string | number | boolean | undefined;
229
- blue3?: string | number | boolean | undefined;
230
- blue4?: string | number | boolean | undefined;
231
- blue5?: string | number | boolean | undefined;
232
- blue6?: string | number | boolean | undefined;
233
- blue7?: string | number | boolean | undefined;
234
- blue8?: string | number | boolean | undefined;
235
- blue9?: string | number | boolean | undefined;
236
- blue10?: string | number | boolean | undefined;
237
- background?: string | number | boolean | undefined;
238
- foreground?: string | number | boolean | undefined;
239
- foreground6plus?: string | number | boolean | undefined;
240
- } | undefined;
241
- } & {
242
- [x: string]: {
243
- [x: string]: string | number | boolean;
244
- [x: number]: string | number | boolean;
44
+ purple2: {
45
+ colorName: string;
245
46
  };
246
- })>(nameOrScalesArg0: Argument0, nameOrScalesArg1?: Argument1 | undefined) => string & {
247
- className: string;
248
- selector: string;
249
- } & (Argument0 extends string ? import("@stitches/react/types/stitches").ThemeTokens<Argument1, ""> : import("@stitches/react/types/stitches").ThemeTokens<Argument0, "">);
250
- export declare const bases: {
251
- slate: string;
252
- };
253
- export declare const accents: {
254
- slate: string;
255
- blue: string;
256
47
  };
@@ -1,2 +1,2 @@
1
- import{createStitches as u}from"@stitches/react";import{utils as m,media as d}from"../../stitches.js";import a from"./blue.json.js";import{generateAlphaColors as s}from"./generateAlphaColors.js";import i from"./slate.json.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};
1
+ import{createTheme as a}from"../../stitches.js";const l={},n=({prefix:o,colorName:t,color0:r=""})=>{const e={};let c=1;r&&(e[`${o}${c}`]=r,c++);let F=1;for(c;c<=11;c++)e[`${o}${c}`]=`$${t}${F*100}`,F++;return e};l["interactive-loContrast"]=a("interactive-loContrast",{colors:{interactiveForeground:"$foreground",interactive1:"$accent1",interactive2:"$accent2",interactive3:"$accent3"}}),l["interactive-hiContrast"]=a("interactive-hiContrast",{colors:{interactiveForeground:"$foreground7plus",interactive1:"$accent9",interactive2:"$accent10",interactive3:"$accent11"}});const i={grey1:{colorName:"grey",color0:"#FFFFFF"},grey2:{colorName:"grey"},blue1:{colorName:"blue",color0:"#FFFFFF"},blue2:{colorName:"blue"},purple1:{colorName:"purple",color0:"#FFFFFF"},purple2:{colorName:"purple"}},u=()=>{Object.entries(i).forEach(([o,{colorName:t,color0:r=""}])=>{const e=`base-${o}`;l[e]=a(e,{colors:{foreground:"$grey1000",foreground7plus:"#FFFFFF",...n({prefix:"base",colorName:t,color0:r})}})})},s={grey1:{colorName:"grey",color0:"#FFFFFF"},grey2:{colorName:"grey"},blue1:{colorName:"blue",color0:"#FFFFFF"},blue2:{colorName:"blue"},purple1:{colorName:"purple",color0:"#FFFFFF"},purple2:{colorName:"purple"}},p=()=>{Object.entries(s).forEach(([o,{colorName:t,color0:r=""}])=>{const e=`accent-${o}`;l[e]=a(e,{colors:n({prefix:"accent",colorName:t,color0:r})})})};u(),p();export{s as accents,i as bases,l 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 { createStitches } from '@stitches/react'\n\nimport { media, utils } from '../../stitches'\nimport blue from './blue.json'\nimport { generateAlphaColors } from './generateAlphaColors'\nimport slate from './slate.json'\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":"kOAOO,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"}
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}\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}\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":"gDAEO,MAAMA,EAAe,CAAA,EAEtBC,EAAiB,CAAC,CAAE,OAAAC,EAAQ,UAAAC,EAAW,OAAAC,EAAS,EAAG,IAAM,CAC7D,MAAMC,EAAS,CACf,EAAA,IAAIC,EAAI,EACJF,IACFC,EAAO,GAAGH,IAASI,KAAOF,EAC1BE,KAEF,IAAIC,EAAI,EACR,IAAKD,EAAGA,GAAK,GAAIA,IACfD,EAAO,GAAGH,IAASI,KAAO,IAAIH,IAAYI,EAAI,MAC9CA,IAEF,OAAOF,CACT,EAEAL,EAAa,0BAA4BQ,EAAY,yBAA0B,CAC7E,OAAQ,CACN,sBAAuB,cACvB,aAAc,WACd,aAAc,WACd,aAAc,UAChB,CACF,CAAC,EAEDR,EAAa,0BAA4BQ,EAAY,yBAA0B,CAC7E,OAAQ,CACN,sBAAuB,mBACvB,aAAc,WACd,aAAc,YACd,aAAc,WAChB,CACF,CAAC,EAOM,MAAMC,EAAQ,CACnB,MAAO,CAAE,UAAW,OAAQ,OAAQ,SAAU,EAC9C,MAAO,CAAE,UAAW,MAAO,EAC3B,MAAO,CAAE,UAAW,OAAQ,OAAQ,SAAU,EAC9C,MAAO,CAAE,UAAW,MAAO,EAC3B,QAAS,CAAE,UAAW,SAAU,OAAQ,SAAU,EAClD,QAAS,CAAE,UAAW,QAAS,CACjC,EACMC,EAAe,IAAM,CACzB,OAAO,QAAQD,CAAK,EAAE,QACpB,CAAC,CAACE,EAAM,CAAE,UAAAR,EAAW,OAAAC,EAAS,EAAG,CAAC,IAA6B,CAC7D,MAAMQ,EAAY,QAAQD,IAC1BX,EAAaY,GAAaJ,EAAYI,EAAW,CAC/C,OAAQ,CACN,WAAY,YACZ,gBAAiB,UACjB,GAAGX,EAAe,CAAE,OAAQ,OAAQ,UAAAE,EAAW,OAAAC,CAAO,CAAC,CACzD,CACF,CAAC,CACH,CACF,CACF,EAEaS,EAAU,CACrB,MAAO,CAAE,UAAW,OAAQ,OAAQ,SAAU,EAC9C,MAAO,CAAE,UAAW,MAAO,EAC3B,MAAO,CAAE,UAAW,OAAQ,OAAQ,SAAU,EAC9C,MAAO,CAAE,UAAW,MAAO,EAC3B,QAAS,CAAE,UAAW,SAAU,OAAQ,SAAU,EAClD,QAAS,CAAE,UAAW,QAAS,CACjC,EACMC,EAAiB,IAAM,CAC3B,OAAO,QAAQD,CAAO,EAAE,QACtB,CAAC,CAACF,EAAM,CAAE,UAAAR,EAAW,OAAAC,EAAS,EAAG,CAAC,IAA6B,CAC7D,MAAMQ,EAAY,UAAUD,IAC5BX,EAAaY,GAAaJ,EAAYI,EAAW,CAC/C,OAAQX,EAAe,CAAE,OAAQ,SAAU,UAAAE,EAAW,OAAAC,CAAO,CAAC,CAChE,CAAC,CACH,CACF,CACF,EAEAM,EAAAA,EACAI,EAAe"}