alouette 10.2.0 → 10.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 (57) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/createAlouetteTamagui-browser.es.js +22 -5
  3. package/dist/createAlouetteTamagui-browser.es.js.map +1 -1
  4. package/dist/createAlouetteTamagui-node20.cjs +22 -5
  5. package/dist/createAlouetteTamagui-node20.cjs.map +1 -1
  6. package/dist/createAlouetteTamagui-node20.mjs +22 -5
  7. package/dist/createAlouetteTamagui-node20.mjs.map +1 -1
  8. package/dist/createAlouetteTamagui-react-native.cjs.js +22 -5
  9. package/dist/createAlouetteTamagui-react-native.cjs.js.map +1 -1
  10. package/dist/createAlouetteTamagui-react-native.es.js +22 -5
  11. package/dist/createAlouetteTamagui-react-native.es.js.map +1 -1
  12. package/dist/definitions/components/actions/Button.d.ts +2 -1
  13. package/dist/definitions/components/actions/Button.d.ts.map +1 -1
  14. package/dist/definitions/components/actions/Button.stories.d.ts.map +1 -1
  15. package/dist/definitions/components/actions/IconButton.d.ts +3 -1
  16. package/dist/definitions/components/actions/IconButton.d.ts.map +1 -1
  17. package/dist/definitions/components/actions/IconButton.stories.d.ts.map +1 -1
  18. package/dist/definitions/components/containers/Box.d.ts +1 -0
  19. package/dist/definitions/components/containers/Box.d.ts.map +1 -1
  20. package/dist/definitions/components/containers/Box.stories.d.ts +1 -0
  21. package/dist/definitions/components/containers/Box.stories.d.ts.map +1 -1
  22. package/dist/definitions/components/containers/PressableBox.d.ts +1 -0
  23. package/dist/definitions/components/containers/PressableBox.d.ts.map +1 -1
  24. package/dist/definitions/components/containers/PressableBox.stories.d.ts +1 -0
  25. package/dist/definitions/components/containers/PressableBox.stories.d.ts.map +1 -1
  26. package/dist/definitions/components/containers/variants.d.ts +118 -11
  27. package/dist/definitions/components/containers/variants.d.ts.map +1 -1
  28. package/dist/definitions/components/feedback/Message.d.ts +1 -0
  29. package/dist/definitions/components/feedback/Message.d.ts.map +1 -1
  30. package/dist/definitions/components/forms/InputText.d.ts +2 -0
  31. package/dist/definitions/components/forms/InputText.d.ts.map +1 -1
  32. package/dist/definitions/components/forms/InputText.stories.d.ts +1 -0
  33. package/dist/definitions/components/forms/InputText.stories.d.ts.map +1 -1
  34. package/dist/definitions/components/primitives/createVariants.d.ts +25 -21
  35. package/dist/definitions/components/primitives/createVariants.d.ts.map +1 -1
  36. package/dist/definitions/config/themes.d.ts +294 -70
  37. package/dist/definitions/config/themes.d.ts.map +1 -1
  38. package/dist/index-browser.es.js +102 -90
  39. package/dist/index-browser.es.js.map +1 -1
  40. package/dist/index-node20.cjs +102 -90
  41. package/dist/index-node20.cjs.map +1 -1
  42. package/dist/index-node20.mjs +102 -90
  43. package/dist/index-node20.mjs.map +1 -1
  44. package/dist/index-react-native.cjs.js +102 -90
  45. package/dist/index-react-native.cjs.js.map +1 -1
  46. package/dist/index-react-native.es.js +102 -90
  47. package/dist/index-react-native.es.js.map +1 -1
  48. package/package.json +1 -1
  49. package/src/components/actions/Button.stories.tsx +46 -29
  50. package/src/components/actions/Button.tsx +30 -4
  51. package/src/components/actions/IconButton.stories.tsx +31 -8
  52. package/src/components/actions/IconButton.tsx +53 -6
  53. package/src/components/containers/variants.ts +27 -16
  54. package/src/components/feedback/Message.tsx +5 -1
  55. package/src/components/primitives/createVariants.ts +24 -77
  56. package/src/config/colorScales.ts +1 -1
  57. package/src/config/themes.ts +44 -10
package/dist/definitions/config/themes.d.ts CHANGED
@@ -10,19 +10,35 @@ export interface ColorTheme {
10
10
  mainColor: Variable<string>;
11
11
  mainTextColor: Variable<string>;
12
12
  borderColor: Variable<string>;
13
+ contrastBorderColor: Variable<string>;
14
+ shadowColor: Variable<string>;
13
15
  "interactive.contained.backgroundColor": Variable<string>;
14
- "interactive.borderColor": Variable<string>;
16
+ "interactive.elevated.backgroundColor": Variable<string>;
17
+ "interactive.elevated.shadowColor": Variable<string>;
18
+ "interactive.elevated.borderColor": Variable<string>;
19
+ "interactive.outlined.backgroundColor": Variable<string>;
20
+ "interactive.outlined.borderColor": Variable<string>;
15
21
  "interactive.contained.backgroundColor:hover": Variable<string>;
22
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
23
+ "interactive.elevated.borderColor:hover": Variable<string>;
16
24
  "interactive.outlined.backgroundColor:hover": Variable<string>;
17
- "interactive.borderColor:hover": Variable<string>;
25
+ "interactive.outlined.borderColor:hover": Variable<string>;
18
26
  "interactive.contained.backgroundColor:focus": Variable<string>;
27
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
28
+ "interactive.elevated.borderColor:focus": Variable<string>;
19
29
  "interactive.outlined.backgroundColor:focus": Variable<string>;
20
- "interactive.borderColor:focus": Variable<string>;
30
+ "interactive.outlined.borderColor:focus": Variable<string>;
21
31
  "interactive.contained.backgroundColor:press": Variable<string>;
32
+ "interactive.elevated.backgroundColor:press": Variable<string>;
33
+ "interactive.elevated.borderColor:press": Variable<string>;
22
34
  "interactive.outlined.backgroundColor:press": Variable<string>;
23
- "interactive.borderColor:press": Variable<string>;
35
+ "interactive.outlined.borderColor:press": Variable<string>;
24
36
  "interactive.contained.backgroundColor:disabled": Variable<string>;
25
- "interactive.borderColor:disabled": Variable<string>;
37
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
38
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
39
+ "interactive.elevated.borderColor:disabled": Variable<string>;
40
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
41
+ "interactive.outlined.borderColor:disabled": Variable<string>;
26
42
  "interactive.textColor:disabled": Variable<string>;
27
43
  "interactive.forms.textColor": Variable<string>;
28
44
  "interactive.forms.placeholderTextColor": Variable<string>;
@@ -42,21 +58,37 @@ export declare const createColorTheme: <const ColorScales extends AlouetteColorS
42
58
  mainTextColor: { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
43
59
  contrastTextColor: Variable<string>;
44
60
  borderColor: { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
61
+ contrastBorderColor: Variable<string>;
62
+ shadowColor: { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
45
63
  "textColor:disabled": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
46
64
  "contrastTextColor:disabled": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
47
65
  "interactive.contained.backgroundColor": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
48
- "interactive.borderColor": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
66
+ "interactive.elevated.backgroundColor": Variable<string>;
67
+ "interactive.elevated.shadowColor": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
68
+ "interactive.elevated.borderColor": Variable<string>;
69
+ "interactive.outlined.backgroundColor": Variable<string>;
70
+ "interactive.outlined.borderColor": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
49
71
  "interactive.contained.backgroundColor:hover": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
72
+ "interactive.elevated.backgroundColor:hover": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
73
+ "interactive.elevated.borderColor:hover": Variable<string>;
50
74
  "interactive.outlined.backgroundColor:hover": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
51
- "interactive.borderColor:hover": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
75
+ "interactive.outlined.borderColor:hover": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
52
76
  "interactive.contained.backgroundColor:focus": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
77
+ "interactive.elevated.backgroundColor:focus": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
78
+ "interactive.elevated.borderColor:focus": Variable<string>;
53
79
  "interactive.outlined.backgroundColor:focus": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
54
- "interactive.borderColor:focus": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
80
+ "interactive.outlined.borderColor:focus": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
55
81
  "interactive.contained.backgroundColor:press": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
82
+ "interactive.elevated.backgroundColor:press": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
83
+ "interactive.elevated.borderColor:press": Variable<string>;
56
84
  "interactive.outlined.backgroundColor:press": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
57
- "interactive.borderColor:press": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
85
+ "interactive.outlined.borderColor:press": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
58
86
  "interactive.contained.backgroundColor:disabled": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
59
- "interactive.borderColor:disabled": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
87
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
88
+ "interactive.elevated.shadowColor:disabled": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
89
+ "interactive.elevated.borderColor:disabled": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
90
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
91
+ "interactive.outlined.borderColor:disabled": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
60
92
  "interactive.textColor:disabled": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
61
93
  "interactive.forms.textColor": Variable<string>;
62
94
  "interactive.forms.placeholderTextColor": { [Key in "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }]: Variable<string>; }["black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; } extends number ? `${number & keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }}` : "black" | "white" | keyof { [K in string & keyof ColorScales as `${K}.1` | `${K}.4` | `${K}.2` | `${K}.3` | `${K}.5` | `${K}.6` | `${K}.7` | `${K}.8` | `${K}.9` | `${K}.10`]: string; }];
@@ -76,21 +108,37 @@ export declare const createAlouetteThemes: <const ColorScales extends AlouetteCo
76
108
  mainTextColor: Variable<string>;
77
109
  contrastTextColor: Variable<string>;
78
110
  borderColor: Variable<string>;
111
+ contrastBorderColor: Variable<string>;
112
+ shadowColor: Variable<string>;
79
113
  "textColor:disabled": Variable<string>;
80
114
  "contrastTextColor:disabled": Variable<string>;
81
115
  "interactive.contained.backgroundColor": Variable<string>;
82
- "interactive.borderColor": Variable<string>;
116
+ "interactive.elevated.backgroundColor": Variable<string>;
117
+ "interactive.elevated.shadowColor": Variable<string>;
118
+ "interactive.elevated.borderColor": Variable<string>;
119
+ "interactive.outlined.backgroundColor": Variable<string>;
120
+ "interactive.outlined.borderColor": Variable<string>;
83
121
  "interactive.contained.backgroundColor:hover": Variable<string>;
122
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
123
+ "interactive.elevated.borderColor:hover": Variable<string>;
84
124
  "interactive.outlined.backgroundColor:hover": Variable<string>;
85
- "interactive.borderColor:hover": Variable<string>;
125
+ "interactive.outlined.borderColor:hover": Variable<string>;
86
126
  "interactive.contained.backgroundColor:focus": Variable<string>;
127
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
128
+ "interactive.elevated.borderColor:focus": Variable<string>;
87
129
  "interactive.outlined.backgroundColor:focus": Variable<string>;
88
- "interactive.borderColor:focus": Variable<string>;
130
+ "interactive.outlined.borderColor:focus": Variable<string>;
89
131
  "interactive.contained.backgroundColor:press": Variable<string>;
132
+ "interactive.elevated.backgroundColor:press": Variable<string>;
133
+ "interactive.elevated.borderColor:press": Variable<string>;
90
134
  "interactive.outlined.backgroundColor:press": Variable<string>;
91
- "interactive.borderColor:press": Variable<string>;
135
+ "interactive.outlined.borderColor:press": Variable<string>;
92
136
  "interactive.contained.backgroundColor:disabled": Variable<string>;
93
- "interactive.borderColor:disabled": Variable<string>;
137
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
138
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
139
+ "interactive.elevated.borderColor:disabled": Variable<string>;
140
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
141
+ "interactive.outlined.borderColor:disabled": Variable<string>;
94
142
  "interactive.textColor:disabled": Variable<string>;
95
143
  "interactive.forms.textColor": Variable<string>;
96
144
  "interactive.forms.placeholderTextColor": Variable<string>;
@@ -109,21 +157,37 @@ export declare const createAlouetteThemes: <const ColorScales extends AlouetteCo
109
157
  mainTextColor: Variable<string>;
110
158
  contrastTextColor: Variable<string>;
111
159
  borderColor: Variable<string>;
160
+ contrastBorderColor: Variable<string>;
161
+ shadowColor: Variable<string>;
112
162
  "textColor:disabled": Variable<string>;
113
163
  "contrastTextColor:disabled": Variable<string>;
114
164
  "interactive.contained.backgroundColor": Variable<string>;
115
- "interactive.borderColor": Variable<string>;
165
+ "interactive.elevated.backgroundColor": Variable<string>;
166
+ "interactive.elevated.shadowColor": Variable<string>;
167
+ "interactive.elevated.borderColor": Variable<string>;
168
+ "interactive.outlined.backgroundColor": Variable<string>;
169
+ "interactive.outlined.borderColor": Variable<string>;
116
170
  "interactive.contained.backgroundColor:hover": Variable<string>;
171
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
172
+ "interactive.elevated.borderColor:hover": Variable<string>;
117
173
  "interactive.outlined.backgroundColor:hover": Variable<string>;
118
- "interactive.borderColor:hover": Variable<string>;
174
+ "interactive.outlined.borderColor:hover": Variable<string>;
119
175
  "interactive.contained.backgroundColor:focus": Variable<string>;
176
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
177
+ "interactive.elevated.borderColor:focus": Variable<string>;
120
178
  "interactive.outlined.backgroundColor:focus": Variable<string>;
121
- "interactive.borderColor:focus": Variable<string>;
179
+ "interactive.outlined.borderColor:focus": Variable<string>;
122
180
  "interactive.contained.backgroundColor:press": Variable<string>;
181
+ "interactive.elevated.backgroundColor:press": Variable<string>;
182
+ "interactive.elevated.borderColor:press": Variable<string>;
123
183
  "interactive.outlined.backgroundColor:press": Variable<string>;
124
- "interactive.borderColor:press": Variable<string>;
184
+ "interactive.outlined.borderColor:press": Variable<string>;
125
185
  "interactive.contained.backgroundColor:disabled": Variable<string>;
126
- "interactive.borderColor:disabled": Variable<string>;
186
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
187
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
188
+ "interactive.elevated.borderColor:disabled": Variable<string>;
189
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
190
+ "interactive.outlined.borderColor:disabled": Variable<string>;
127
191
  "interactive.textColor:disabled": Variable<string>;
128
192
  "interactive.forms.textColor": Variable<string>;
129
193
  "interactive.forms.placeholderTextColor": Variable<string>;
@@ -142,21 +206,37 @@ export declare const createAlouetteThemes: <const ColorScales extends AlouetteCo
142
206
  mainTextColor: Variable<string>;
143
207
  contrastTextColor: Variable<string>;
144
208
  borderColor: Variable<string>;
209
+ contrastBorderColor: Variable<string>;
210
+ shadowColor: Variable<string>;
145
211
  "textColor:disabled": Variable<string>;
146
212
  "contrastTextColor:disabled": Variable<string>;
147
213
  "interactive.contained.backgroundColor": Variable<string>;
148
- "interactive.borderColor": Variable<string>;
214
+ "interactive.elevated.backgroundColor": Variable<string>;
215
+ "interactive.elevated.shadowColor": Variable<string>;
216
+ "interactive.elevated.borderColor": Variable<string>;
217
+ "interactive.outlined.backgroundColor": Variable<string>;
218
+ "interactive.outlined.borderColor": Variable<string>;
149
219
  "interactive.contained.backgroundColor:hover": Variable<string>;
220
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
221
+ "interactive.elevated.borderColor:hover": Variable<string>;
150
222
  "interactive.outlined.backgroundColor:hover": Variable<string>;
151
- "interactive.borderColor:hover": Variable<string>;
223
+ "interactive.outlined.borderColor:hover": Variable<string>;
152
224
  "interactive.contained.backgroundColor:focus": Variable<string>;
225
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
226
+ "interactive.elevated.borderColor:focus": Variable<string>;
153
227
  "interactive.outlined.backgroundColor:focus": Variable<string>;
154
- "interactive.borderColor:focus": Variable<string>;
228
+ "interactive.outlined.borderColor:focus": Variable<string>;
155
229
  "interactive.contained.backgroundColor:press": Variable<string>;
230
+ "interactive.elevated.backgroundColor:press": Variable<string>;
231
+ "interactive.elevated.borderColor:press": Variable<string>;
156
232
  "interactive.outlined.backgroundColor:press": Variable<string>;
157
- "interactive.borderColor:press": Variable<string>;
233
+ "interactive.outlined.borderColor:press": Variable<string>;
158
234
  "interactive.contained.backgroundColor:disabled": Variable<string>;
159
- "interactive.borderColor:disabled": Variable<string>;
235
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
236
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
237
+ "interactive.elevated.borderColor:disabled": Variable<string>;
238
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
239
+ "interactive.outlined.borderColor:disabled": Variable<string>;
160
240
  "interactive.textColor:disabled": Variable<string>;
161
241
  "interactive.forms.textColor": Variable<string>;
162
242
  "interactive.forms.placeholderTextColor": Variable<string>;
@@ -175,21 +255,37 @@ export declare const createAlouetteThemes: <const ColorScales extends AlouetteCo
175
255
  mainTextColor: Variable<string>;
176
256
  contrastTextColor: Variable<string>;
177
257
  borderColor: Variable<string>;
258
+ contrastBorderColor: Variable<string>;
259
+ shadowColor: Variable<string>;
178
260
  "textColor:disabled": Variable<string>;
179
261
  "contrastTextColor:disabled": Variable<string>;
180
262
  "interactive.contained.backgroundColor": Variable<string>;
181
- "interactive.borderColor": Variable<string>;
263
+ "interactive.elevated.backgroundColor": Variable<string>;
264
+ "interactive.elevated.shadowColor": Variable<string>;
265
+ "interactive.elevated.borderColor": Variable<string>;
266
+ "interactive.outlined.backgroundColor": Variable<string>;
267
+ "interactive.outlined.borderColor": Variable<string>;
182
268
  "interactive.contained.backgroundColor:hover": Variable<string>;
269
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
270
+ "interactive.elevated.borderColor:hover": Variable<string>;
183
271
  "interactive.outlined.backgroundColor:hover": Variable<string>;
184
- "interactive.borderColor:hover": Variable<string>;
272
+ "interactive.outlined.borderColor:hover": Variable<string>;
185
273
  "interactive.contained.backgroundColor:focus": Variable<string>;
274
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
275
+ "interactive.elevated.borderColor:focus": Variable<string>;
186
276
  "interactive.outlined.backgroundColor:focus": Variable<string>;
187
- "interactive.borderColor:focus": Variable<string>;
277
+ "interactive.outlined.borderColor:focus": Variable<string>;
188
278
  "interactive.contained.backgroundColor:press": Variable<string>;
279
+ "interactive.elevated.backgroundColor:press": Variable<string>;
280
+ "interactive.elevated.borderColor:press": Variable<string>;
189
281
  "interactive.outlined.backgroundColor:press": Variable<string>;
190
- "interactive.borderColor:press": Variable<string>;
282
+ "interactive.outlined.borderColor:press": Variable<string>;
191
283
  "interactive.contained.backgroundColor:disabled": Variable<string>;
192
- "interactive.borderColor:disabled": Variable<string>;
284
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
285
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
286
+ "interactive.elevated.borderColor:disabled": Variable<string>;
287
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
288
+ "interactive.outlined.borderColor:disabled": Variable<string>;
193
289
  "interactive.textColor:disabled": Variable<string>;
194
290
  "interactive.forms.textColor": Variable<string>;
195
291
  "interactive.forms.placeholderTextColor": Variable<string>;
@@ -208,21 +304,37 @@ export declare const createAlouetteThemes: <const ColorScales extends AlouetteCo
208
304
  mainTextColor: Variable<string>;
209
305
  contrastTextColor: Variable<string>;
210
306
  borderColor: Variable<string>;
307
+ contrastBorderColor: Variable<string>;
308
+ shadowColor: Variable<string>;
211
309
  "textColor:disabled": Variable<string>;
212
310
  "contrastTextColor:disabled": Variable<string>;
213
311
  "interactive.contained.backgroundColor": Variable<string>;
214
- "interactive.borderColor": Variable<string>;
312
+ "interactive.elevated.backgroundColor": Variable<string>;
313
+ "interactive.elevated.shadowColor": Variable<string>;
314
+ "interactive.elevated.borderColor": Variable<string>;
315
+ "interactive.outlined.backgroundColor": Variable<string>;
316
+ "interactive.outlined.borderColor": Variable<string>;
215
317
  "interactive.contained.backgroundColor:hover": Variable<string>;
318
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
319
+ "interactive.elevated.borderColor:hover": Variable<string>;
216
320
  "interactive.outlined.backgroundColor:hover": Variable<string>;
217
- "interactive.borderColor:hover": Variable<string>;
321
+ "interactive.outlined.borderColor:hover": Variable<string>;
218
322
  "interactive.contained.backgroundColor:focus": Variable<string>;
323
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
324
+ "interactive.elevated.borderColor:focus": Variable<string>;
219
325
  "interactive.outlined.backgroundColor:focus": Variable<string>;
220
- "interactive.borderColor:focus": Variable<string>;
326
+ "interactive.outlined.borderColor:focus": Variable<string>;
221
327
  "interactive.contained.backgroundColor:press": Variable<string>;
328
+ "interactive.elevated.backgroundColor:press": Variable<string>;
329
+ "interactive.elevated.borderColor:press": Variable<string>;
222
330
  "interactive.outlined.backgroundColor:press": Variable<string>;
223
- "interactive.borderColor:press": Variable<string>;
331
+ "interactive.outlined.borderColor:press": Variable<string>;
224
332
  "interactive.contained.backgroundColor:disabled": Variable<string>;
225
- "interactive.borderColor:disabled": Variable<string>;
333
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
334
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
335
+ "interactive.elevated.borderColor:disabled": Variable<string>;
336
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
337
+ "interactive.outlined.borderColor:disabled": Variable<string>;
226
338
  "interactive.textColor:disabled": Variable<string>;
227
339
  "interactive.forms.textColor": Variable<string>;
228
340
  "interactive.forms.placeholderTextColor": Variable<string>;
@@ -241,21 +353,37 @@ export declare const createAlouetteThemes: <const ColorScales extends AlouetteCo
241
353
  mainTextColor: Variable<string>;
242
354
  contrastTextColor: Variable<string>;
243
355
  borderColor: Variable<string>;
356
+ contrastBorderColor: Variable<string>;
357
+ shadowColor: Variable<string>;
244
358
  "textColor:disabled": Variable<string>;
245
359
  "contrastTextColor:disabled": Variable<string>;
246
360
  "interactive.contained.backgroundColor": Variable<string>;
247
- "interactive.borderColor": Variable<string>;
361
+ "interactive.elevated.backgroundColor": Variable<string>;
362
+ "interactive.elevated.shadowColor": Variable<string>;
363
+ "interactive.elevated.borderColor": Variable<string>;
364
+ "interactive.outlined.backgroundColor": Variable<string>;
365
+ "interactive.outlined.borderColor": Variable<string>;
248
366
  "interactive.contained.backgroundColor:hover": Variable<string>;
367
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
368
+ "interactive.elevated.borderColor:hover": Variable<string>;
249
369
  "interactive.outlined.backgroundColor:hover": Variable<string>;
250
- "interactive.borderColor:hover": Variable<string>;
370
+ "interactive.outlined.borderColor:hover": Variable<string>;
251
371
  "interactive.contained.backgroundColor:focus": Variable<string>;
372
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
373
+ "interactive.elevated.borderColor:focus": Variable<string>;
252
374
  "interactive.outlined.backgroundColor:focus": Variable<string>;
253
- "interactive.borderColor:focus": Variable<string>;
375
+ "interactive.outlined.borderColor:focus": Variable<string>;
254
376
  "interactive.contained.backgroundColor:press": Variable<string>;
377
+ "interactive.elevated.backgroundColor:press": Variable<string>;
378
+ "interactive.elevated.borderColor:press": Variable<string>;
255
379
  "interactive.outlined.backgroundColor:press": Variable<string>;
256
- "interactive.borderColor:press": Variable<string>;
380
+ "interactive.outlined.borderColor:press": Variable<string>;
257
381
  "interactive.contained.backgroundColor:disabled": Variable<string>;
258
- "interactive.borderColor:disabled": Variable<string>;
382
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
383
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
384
+ "interactive.elevated.borderColor:disabled": Variable<string>;
385
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
386
+ "interactive.outlined.borderColor:disabled": Variable<string>;
259
387
  "interactive.textColor:disabled": Variable<string>;
260
388
  "interactive.forms.textColor": Variable<string>;
261
389
  "interactive.forms.placeholderTextColor": Variable<string>;
@@ -274,21 +402,37 @@ export declare const createAlouetteThemes: <const ColorScales extends AlouetteCo
274
402
  mainTextColor: Variable<string>;
275
403
  contrastTextColor: Variable<string>;
276
404
  borderColor: Variable<string>;
405
+ contrastBorderColor: Variable<string>;
406
+ shadowColor: Variable<string>;
277
407
  "textColor:disabled": Variable<string>;
278
408
  "contrastTextColor:disabled": Variable<string>;
279
409
  "interactive.contained.backgroundColor": Variable<string>;
280
- "interactive.borderColor": Variable<string>;
410
+ "interactive.elevated.backgroundColor": Variable<string>;
411
+ "interactive.elevated.shadowColor": Variable<string>;
412
+ "interactive.elevated.borderColor": Variable<string>;
413
+ "interactive.outlined.backgroundColor": Variable<string>;
414
+ "interactive.outlined.borderColor": Variable<string>;
281
415
  "interactive.contained.backgroundColor:hover": Variable<string>;
416
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
417
+ "interactive.elevated.borderColor:hover": Variable<string>;
282
418
  "interactive.outlined.backgroundColor:hover": Variable<string>;
283
- "interactive.borderColor:hover": Variable<string>;
419
+ "interactive.outlined.borderColor:hover": Variable<string>;
284
420
  "interactive.contained.backgroundColor:focus": Variable<string>;
421
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
422
+ "interactive.elevated.borderColor:focus": Variable<string>;
285
423
  "interactive.outlined.backgroundColor:focus": Variable<string>;
286
- "interactive.borderColor:focus": Variable<string>;
424
+ "interactive.outlined.borderColor:focus": Variable<string>;
287
425
  "interactive.contained.backgroundColor:press": Variable<string>;
426
+ "interactive.elevated.backgroundColor:press": Variable<string>;
427
+ "interactive.elevated.borderColor:press": Variable<string>;
288
428
  "interactive.outlined.backgroundColor:press": Variable<string>;
289
- "interactive.borderColor:press": Variable<string>;
429
+ "interactive.outlined.borderColor:press": Variable<string>;
290
430
  "interactive.contained.backgroundColor:disabled": Variable<string>;
291
- "interactive.borderColor:disabled": Variable<string>;
431
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
432
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
433
+ "interactive.elevated.borderColor:disabled": Variable<string>;
434
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
435
+ "interactive.outlined.borderColor:disabled": Variable<string>;
292
436
  "interactive.textColor:disabled": Variable<string>;
293
437
  "interactive.forms.textColor": Variable<string>;
294
438
  "interactive.forms.placeholderTextColor": Variable<string>;
@@ -307,21 +451,37 @@ export declare const createAlouetteThemes: <const ColorScales extends AlouetteCo
307
451
  mainTextColor: Variable<string>;
308
452
  contrastTextColor: Variable<string>;
309
453
  borderColor: Variable<string>;
454
+ contrastBorderColor: Variable<string>;
455
+ shadowColor: Variable<string>;
310
456
  "textColor:disabled": Variable<string>;
311
457
  "contrastTextColor:disabled": Variable<string>;
312
458
  "interactive.contained.backgroundColor": Variable<string>;
313
- "interactive.borderColor": Variable<string>;
459
+ "interactive.elevated.backgroundColor": Variable<string>;
460
+ "interactive.elevated.shadowColor": Variable<string>;
461
+ "interactive.elevated.borderColor": Variable<string>;
462
+ "interactive.outlined.backgroundColor": Variable<string>;
463
+ "interactive.outlined.borderColor": Variable<string>;
314
464
  "interactive.contained.backgroundColor:hover": Variable<string>;
465
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
466
+ "interactive.elevated.borderColor:hover": Variable<string>;
315
467
  "interactive.outlined.backgroundColor:hover": Variable<string>;
316
- "interactive.borderColor:hover": Variable<string>;
468
+ "interactive.outlined.borderColor:hover": Variable<string>;
317
469
  "interactive.contained.backgroundColor:focus": Variable<string>;
470
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
471
+ "interactive.elevated.borderColor:focus": Variable<string>;
318
472
  "interactive.outlined.backgroundColor:focus": Variable<string>;
319
- "interactive.borderColor:focus": Variable<string>;
473
+ "interactive.outlined.borderColor:focus": Variable<string>;
320
474
  "interactive.contained.backgroundColor:press": Variable<string>;
475
+ "interactive.elevated.backgroundColor:press": Variable<string>;
476
+ "interactive.elevated.borderColor:press": Variable<string>;
321
477
  "interactive.outlined.backgroundColor:press": Variable<string>;
322
- "interactive.borderColor:press": Variable<string>;
478
+ "interactive.outlined.borderColor:press": Variable<string>;
323
479
  "interactive.contained.backgroundColor:disabled": Variable<string>;
324
- "interactive.borderColor:disabled": Variable<string>;
480
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
481
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
482
+ "interactive.elevated.borderColor:disabled": Variable<string>;
483
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
484
+ "interactive.outlined.borderColor:disabled": Variable<string>;
325
485
  "interactive.textColor:disabled": Variable<string>;
326
486
  "interactive.forms.textColor": Variable<string>;
327
487
  "interactive.forms.placeholderTextColor": Variable<string>;
@@ -340,21 +500,37 @@ export declare const createAlouetteThemes: <const ColorScales extends AlouetteCo
340
500
  mainTextColor: Variable<string>;
341
501
  contrastTextColor: Variable<string>;
342
502
  borderColor: Variable<string>;
503
+ contrastBorderColor: Variable<string>;
504
+ shadowColor: Variable<string>;
343
505
  "textColor:disabled": Variable<string>;
344
506
  "contrastTextColor:disabled": Variable<string>;
345
507
  "interactive.contained.backgroundColor": Variable<string>;
346
- "interactive.borderColor": Variable<string>;
508
+ "interactive.elevated.backgroundColor": Variable<string>;
509
+ "interactive.elevated.shadowColor": Variable<string>;
510
+ "interactive.elevated.borderColor": Variable<string>;
511
+ "interactive.outlined.backgroundColor": Variable<string>;
512
+ "interactive.outlined.borderColor": Variable<string>;
347
513
  "interactive.contained.backgroundColor:hover": Variable<string>;
514
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
515
+ "interactive.elevated.borderColor:hover": Variable<string>;
348
516
  "interactive.outlined.backgroundColor:hover": Variable<string>;
349
- "interactive.borderColor:hover": Variable<string>;
517
+ "interactive.outlined.borderColor:hover": Variable<string>;
350
518
  "interactive.contained.backgroundColor:focus": Variable<string>;
519
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
520
+ "interactive.elevated.borderColor:focus": Variable<string>;
351
521
  "interactive.outlined.backgroundColor:focus": Variable<string>;
352
- "interactive.borderColor:focus": Variable<string>;
522
+ "interactive.outlined.borderColor:focus": Variable<string>;
353
523
  "interactive.contained.backgroundColor:press": Variable<string>;
524
+ "interactive.elevated.backgroundColor:press": Variable<string>;
525
+ "interactive.elevated.borderColor:press": Variable<string>;
354
526
  "interactive.outlined.backgroundColor:press": Variable<string>;
355
- "interactive.borderColor:press": Variable<string>;
527
+ "interactive.outlined.borderColor:press": Variable<string>;
356
528
  "interactive.contained.backgroundColor:disabled": Variable<string>;
357
- "interactive.borderColor:disabled": Variable<string>;
529
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
530
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
531
+ "interactive.elevated.borderColor:disabled": Variable<string>;
532
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
533
+ "interactive.outlined.borderColor:disabled": Variable<string>;
358
534
  "interactive.textColor:disabled": Variable<string>;
359
535
  "interactive.forms.textColor": Variable<string>;
360
536
  "interactive.forms.placeholderTextColor": Variable<string>;
@@ -373,21 +549,37 @@ export declare const createAlouetteThemes: <const ColorScales extends AlouetteCo
373
549
  mainTextColor: Variable<string>;
374
550
  contrastTextColor: Variable<string>;
375
551
  borderColor: Variable<string>;
552
+ contrastBorderColor: Variable<string>;
553
+ shadowColor: Variable<string>;
376
554
  "textColor:disabled": Variable<string>;
377
555
  "contrastTextColor:disabled": Variable<string>;
378
556
  "interactive.contained.backgroundColor": Variable<string>;
379
- "interactive.borderColor": Variable<string>;
557
+ "interactive.elevated.backgroundColor": Variable<string>;
558
+ "interactive.elevated.shadowColor": Variable<string>;
559
+ "interactive.elevated.borderColor": Variable<string>;
560
+ "interactive.outlined.backgroundColor": Variable<string>;
561
+ "interactive.outlined.borderColor": Variable<string>;
380
562
  "interactive.contained.backgroundColor:hover": Variable<string>;
563
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
564
+ "interactive.elevated.borderColor:hover": Variable<string>;
381
565
  "interactive.outlined.backgroundColor:hover": Variable<string>;
382
- "interactive.borderColor:hover": Variable<string>;
566
+ "interactive.outlined.borderColor:hover": Variable<string>;
383
567
  "interactive.contained.backgroundColor:focus": Variable<string>;
568
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
569
+ "interactive.elevated.borderColor:focus": Variable<string>;
384
570
  "interactive.outlined.backgroundColor:focus": Variable<string>;
385
- "interactive.borderColor:focus": Variable<string>;
571
+ "interactive.outlined.borderColor:focus": Variable<string>;
386
572
  "interactive.contained.backgroundColor:press": Variable<string>;
573
+ "interactive.elevated.backgroundColor:press": Variable<string>;
574
+ "interactive.elevated.borderColor:press": Variable<string>;
387
575
  "interactive.outlined.backgroundColor:press": Variable<string>;
388
- "interactive.borderColor:press": Variable<string>;
576
+ "interactive.outlined.borderColor:press": Variable<string>;
389
577
  "interactive.contained.backgroundColor:disabled": Variable<string>;
390
- "interactive.borderColor:disabled": Variable<string>;
578
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
579
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
580
+ "interactive.elevated.borderColor:disabled": Variable<string>;
581
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
582
+ "interactive.outlined.borderColor:disabled": Variable<string>;
391
583
  "interactive.textColor:disabled": Variable<string>;
392
584
  "interactive.forms.textColor": Variable<string>;
393
585
  "interactive.forms.placeholderTextColor": Variable<string>;
@@ -406,21 +598,37 @@ export declare const createAlouetteThemes: <const ColorScales extends AlouetteCo
406
598
  mainTextColor: Variable<string>;
407
599
  contrastTextColor: Variable<string>;
408
600
  borderColor: Variable<string>;
601
+ contrastBorderColor: Variable<string>;
602
+ shadowColor: Variable<string>;
409
603
  "textColor:disabled": Variable<string>;
410
604
  "contrastTextColor:disabled": Variable<string>;
411
605
  "interactive.contained.backgroundColor": Variable<string>;
412
- "interactive.borderColor": Variable<string>;
606
+ "interactive.elevated.backgroundColor": Variable<string>;
607
+ "interactive.elevated.shadowColor": Variable<string>;
608
+ "interactive.elevated.borderColor": Variable<string>;
609
+ "interactive.outlined.backgroundColor": Variable<string>;
610
+ "interactive.outlined.borderColor": Variable<string>;
413
611
  "interactive.contained.backgroundColor:hover": Variable<string>;
612
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
613
+ "interactive.elevated.borderColor:hover": Variable<string>;
414
614
  "interactive.outlined.backgroundColor:hover": Variable<string>;
415
- "interactive.borderColor:hover": Variable<string>;
615
+ "interactive.outlined.borderColor:hover": Variable<string>;
416
616
  "interactive.contained.backgroundColor:focus": Variable<string>;
617
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
618
+ "interactive.elevated.borderColor:focus": Variable<string>;
417
619
  "interactive.outlined.backgroundColor:focus": Variable<string>;
418
- "interactive.borderColor:focus": Variable<string>;
620
+ "interactive.outlined.borderColor:focus": Variable<string>;
419
621
  "interactive.contained.backgroundColor:press": Variable<string>;
622
+ "interactive.elevated.backgroundColor:press": Variable<string>;
623
+ "interactive.elevated.borderColor:press": Variable<string>;
420
624
  "interactive.outlined.backgroundColor:press": Variable<string>;
421
- "interactive.borderColor:press": Variable<string>;
625
+ "interactive.outlined.borderColor:press": Variable<string>;
422
626
  "interactive.contained.backgroundColor:disabled": Variable<string>;
423
- "interactive.borderColor:disabled": Variable<string>;
627
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
628
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
629
+ "interactive.elevated.borderColor:disabled": Variable<string>;
630
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
631
+ "interactive.outlined.borderColor:disabled": Variable<string>;
424
632
  "interactive.textColor:disabled": Variable<string>;
425
633
  "interactive.forms.textColor": Variable<string>;
426
634
  "interactive.forms.placeholderTextColor": Variable<string>;
@@ -439,21 +647,37 @@ export declare const createAlouetteThemes: <const ColorScales extends AlouetteCo
439
647
  mainTextColor: Variable<string>;
440
648
  contrastTextColor: Variable<string>;
441
649
  borderColor: Variable<string>;
650
+ contrastBorderColor: Variable<string>;
651
+ shadowColor: Variable<string>;
442
652
  "textColor:disabled": Variable<string>;
443
653
  "contrastTextColor:disabled": Variable<string>;
444
654
  "interactive.contained.backgroundColor": Variable<string>;
445
- "interactive.borderColor": Variable<string>;
655
+ "interactive.elevated.backgroundColor": Variable<string>;
656
+ "interactive.elevated.shadowColor": Variable<string>;
657
+ "interactive.elevated.borderColor": Variable<string>;
658
+ "interactive.outlined.backgroundColor": Variable<string>;
659
+ "interactive.outlined.borderColor": Variable<string>;
446
660
  "interactive.contained.backgroundColor:hover": Variable<string>;
661
+ "interactive.elevated.backgroundColor:hover": Variable<string>;
662
+ "interactive.elevated.borderColor:hover": Variable<string>;
447
663
  "interactive.outlined.backgroundColor:hover": Variable<string>;
448
- "interactive.borderColor:hover": Variable<string>;
664
+ "interactive.outlined.borderColor:hover": Variable<string>;
449
665
  "interactive.contained.backgroundColor:focus": Variable<string>;
666
+ "interactive.elevated.backgroundColor:focus": Variable<string>;
667
+ "interactive.elevated.borderColor:focus": Variable<string>;
450
668
  "interactive.outlined.backgroundColor:focus": Variable<string>;
451
- "interactive.borderColor:focus": Variable<string>;
669
+ "interactive.outlined.borderColor:focus": Variable<string>;
452
670
  "interactive.contained.backgroundColor:press": Variable<string>;
671
+ "interactive.elevated.backgroundColor:press": Variable<string>;
672
+ "interactive.elevated.borderColor:press": Variable<string>;
453
673
  "interactive.outlined.backgroundColor:press": Variable<string>;
454
- "interactive.borderColor:press": Variable<string>;
674
+ "interactive.outlined.borderColor:press": Variable<string>;
455
675
  "interactive.contained.backgroundColor:disabled": Variable<string>;
456
- "interactive.borderColor:disabled": Variable<string>;
676
+ "interactive.elevated.backgroundColor:disabled": Variable<string>;
677
+ "interactive.elevated.shadowColor:disabled": Variable<string>;
678
+ "interactive.elevated.borderColor:disabled": Variable<string>;
679
+ "interactive.outlined.backgroundColor:disabled": Variable<string>;
680
+ "interactive.outlined.borderColor:disabled": Variable<string>;
457
681
  "interactive.textColor:disabled": Variable<string>;
458
682
  "interactive.forms.textColor": Variable<string>;
459
683
  "interactive.forms.placeholderTextColor": Variable<string>;