@prismicio/editor-ui 0.2.0 → 0.3.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 (32) hide show
  1. package/dist/components/AnimatedList/AnimatedList.css.d.ts +1 -0
  2. package/dist/components/AnimatedList/AnimatedList.d.ts +2 -2
  3. package/dist/components/AppBackground.d.ts +2 -0
  4. package/dist/components/BaseInput/BaseInput.css.d.ts +1 -1
  5. package/dist/components/Box/Box.d.ts +39 -0
  6. package/dist/components/Box/Box.stories.d.ts +5 -0
  7. package/dist/components/Box/index.d.ts +1 -0
  8. package/dist/components/Button/Button.css.d.ts +1 -1
  9. package/dist/components/Button/Button.d.ts +1 -1
  10. package/dist/components/Button/Button.stories.d.ts +2 -2
  11. package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts +2 -2
  12. package/dist/components/Card/Card.stories.d.ts +2 -2
  13. package/dist/components/Icon/Icon.d.ts +1 -1
  14. package/dist/components/Icon/Icon.stories.d.ts +4 -4
  15. package/dist/components/Image/Image.css.d.ts +1 -1
  16. package/dist/components/Image/Image.stories.d.ts +2 -2
  17. package/dist/components/Switch/Switch.css.d.ts +1 -1
  18. package/dist/components/Switch/Switch.stories.d.ts +2 -2
  19. package/dist/components/Text/Text.d.ts +1 -1
  20. package/dist/components/Text/Text.stories.d.ts +4 -4
  21. package/dist/components/ToggleButton/ToggleButton.d.ts +1 -1
  22. package/dist/components/ToggleButton/ToggleButton.stories.d.ts +2 -2
  23. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.d.ts +4 -4
  24. package/dist/index.d.ts +2 -0
  25. package/dist/index.es.js +7847 -7830
  26. package/dist/index.umd.js +97 -97
  27. package/dist/style.css +1 -1
  28. package/dist/theme/colors.d.ts +119 -0
  29. package/dist/theme/selectors.d.ts +48 -0
  30. package/dist/theme/sprinkles.css.d.ts +73 -194
  31. package/dist/theme/vars.css.d.ts +135 -134
  32. package/package.json +8 -16
package/dist/theme/colors.d.ts ADDED
@@ -0,0 +1,119 @@
1
+ export declare const colors: {
2
+ readonly currentColor: {
3
+ readonly darkMode: "currentColor";
4
+ readonly lightMode: "currentColor";
5
+ };
6
+ readonly grey1: {
7
+ readonly darkMode: "greyDark1";
8
+ readonly lightMode: "greyLight1";
9
+ };
10
+ readonly grey2: {
11
+ readonly darkMode: "greyDark2";
12
+ readonly lightMode: "greyLight2";
13
+ };
14
+ readonly grey3: {
15
+ readonly darkMode: "greyDark3";
16
+ readonly lightMode: "greyLight3";
17
+ };
18
+ readonly grey4: {
19
+ readonly darkMode: "greyDark4";
20
+ readonly lightMode: "greyLight4";
21
+ };
22
+ readonly grey5: {
23
+ readonly darkMode: "greyDark5";
24
+ readonly lightMode: "greyLight5";
25
+ };
26
+ readonly grey6: {
27
+ readonly darkMode: "greyDark6";
28
+ readonly lightMode: "greyLight6";
29
+ };
30
+ readonly grey7: {
31
+ readonly darkMode: "greyDark7";
32
+ readonly lightMode: "greyLight7";
33
+ };
34
+ readonly grey8: {
35
+ readonly darkMode: "greyDark8";
36
+ readonly lightMode: "greyLight8";
37
+ };
38
+ readonly grey9: {
39
+ readonly darkMode: "greyDark9";
40
+ readonly lightMode: "greyLight9";
41
+ };
42
+ readonly grey10: {
43
+ readonly darkMode: "greyDark10";
44
+ readonly lightMode: "greyLight10";
45
+ };
46
+ readonly grey11: {
47
+ readonly darkMode: "greyDark11";
48
+ readonly lightMode: "greyLight11";
49
+ };
50
+ readonly grey12: {
51
+ readonly darkMode: "greyDark12";
52
+ readonly lightMode: "greyLight12";
53
+ };
54
+ readonly inherit: {
55
+ readonly darkMode: "inherit";
56
+ readonly lightMode: "inherit";
57
+ };
58
+ readonly blue1: {
59
+ readonly darkMode: "blue1";
60
+ readonly lightMode: "blue1";
61
+ };
62
+ readonly purple1: {
63
+ readonly darkMode: "purple1";
64
+ readonly lightMode: "purple1";
65
+ };
66
+ readonly purple2: {
67
+ readonly darkMode: "purple2";
68
+ readonly lightMode: "purple2";
69
+ };
70
+ readonly purple3: {
71
+ readonly darkMode: "purple3";
72
+ readonly lightMode: "purple3";
73
+ };
74
+ readonly purple4: {
75
+ readonly darkMode: "purple4";
76
+ readonly lightMode: "purple4";
77
+ };
78
+ readonly purple5: {
79
+ readonly darkMode: "purple5";
80
+ readonly lightMode: "purple5";
81
+ };
82
+ readonly purple6: {
83
+ readonly darkMode: "purple6";
84
+ readonly lightMode: "purple6";
85
+ };
86
+ readonly purple7: {
87
+ readonly darkMode: "purple7";
88
+ readonly lightMode: "purple7";
89
+ };
90
+ readonly purple8: {
91
+ readonly darkMode: "purple8";
92
+ readonly lightMode: "purple8";
93
+ };
94
+ readonly purple9: {
95
+ readonly darkMode: "purple9";
96
+ readonly lightMode: "purple9";
97
+ };
98
+ readonly purple10: {
99
+ readonly darkMode: "purple10";
100
+ readonly lightMode: "purple10";
101
+ };
102
+ readonly purple11: {
103
+ readonly darkMode: "purple11";
104
+ readonly lightMode: "purple11";
105
+ };
106
+ readonly purple12: {
107
+ readonly darkMode: "purple12";
108
+ readonly lightMode: "purple12";
109
+ };
110
+ readonly purpleAlpha1: {
111
+ readonly darkMode: "purpleAlpha1";
112
+ readonly lightMode: "purpleAlpha1";
113
+ };
114
+ readonly transparent: {
115
+ readonly darkMode: "transparent";
116
+ readonly lightMode: "transparent";
117
+ };
118
+ };
119
+ export declare type ThemeColor = keyof typeof colors;
package/dist/theme/selectors.d.ts ADDED
@@ -0,0 +1,48 @@
1
+ import type { Color } from "./vars.css";
2
+ declare type ConditionalColor = Readonly<{
3
+ darkMode: Color;
4
+ lightMode: Color;
5
+ }>;
6
+ export declare const selectors: {
7
+ active: ({ darkMode, lightMode }: ConditionalColor) => {
8
+ darkModeActive: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
9
+ lightModeActive: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
10
+ };
11
+ checked: ({ darkMode, lightMode }: ConditionalColor) => {
12
+ darkModeChecked: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
13
+ lightModeChecked: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
14
+ };
15
+ checkedHover: ({ darkMode, lightMode }: ConditionalColor) => {
16
+ darkModeCheckedHover: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
17
+ lightModeCheckedHover: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
18
+ };
19
+ disabled: ({ darkMode, lightMode }: ConditionalColor) => {
20
+ darkModeDisabled: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
21
+ lightModeDisabled: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
22
+ };
23
+ focusVisible: ({ darkMode, lightMode }: ConditionalColor) => {
24
+ darkModeFocusVisible: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
25
+ lightModeFocusVisible: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
26
+ };
27
+ focusWithin: ({ darkMode, lightMode }: ConditionalColor) => {
28
+ darkModeFocusWithin: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
29
+ lightModeFocusWithin: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
30
+ };
31
+ highlighted: ({ darkMode, lightMode }: ConditionalColor) => {
32
+ darkModeHighlighted: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
33
+ lightModeHighlighted: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
34
+ };
35
+ hover: ({ darkMode, lightMode }: ConditionalColor) => {
36
+ darkModeHover: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
37
+ lightModeHover: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
38
+ };
39
+ open: ({ darkMode, lightMode }: ConditionalColor) => {
40
+ darkModeOpen: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
41
+ lightModeOpen: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
42
+ };
43
+ placeholder: ({ darkMode, lightMode }: ConditionalColor) => {
44
+ darkModePlaceholder: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
45
+ lightModePlaceholder: "inherit" | "transparent" | "currentColor" | "greyDark1" | "greyDark2" | "greyDark3" | "greyDark4" | "greyDark5" | "greyDark6" | "greyDark7" | "greyDark8" | "greyDark9" | "greyDark10" | "greyDark11" | "greyDark12" | "greyLight1" | "greyLight2" | "greyLight3" | "greyLight4" | "greyLight5" | "greyLight6" | "greyLight7" | "greyLight8" | "greyLight9" | "greyLight10" | "greyLight11" | "greyLight12" | "blue1" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1";
46
+ };
47
+ };
48
+ export {};