@prom-ui/core 2.0.2 → 2.1.0-alpha.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 (184) hide show
  1. package/Avatar/cjs/style.development.css +1 -1
  2. package/Avatar/cjs/style.development.v2.css +1 -1
  3. package/Avatar/cjs/style.production.css +1 -1
  4. package/Avatar/cjs/style.production.v2.css +1 -1
  5. package/Avatar/package.json +1 -1
  6. package/Backdrop/package.json +1 -1
  7. package/Badge/package.json +1 -1
  8. package/Body/package.json +1 -1
  9. package/BodyProvider/cjs/index.development.js +116 -49
  10. package/BodyProvider/cjs/index.development.v2.js +116 -49
  11. package/BodyProvider/cjs/index.production.js +1 -1
  12. package/BodyProvider/cjs/index.production.v2.js +1 -1
  13. package/BodyProvider/hooks/useBodyStore.d.ts +2 -0
  14. package/BodyProvider/hooks/useBodyStoreTTag.d.ts +1 -0
  15. package/BodyProvider/index.d.ts +7 -5
  16. package/BodyProvider/package.json +4 -2
  17. package/BodyProvider/slices/sliceSnackBar.d.ts +10 -0
  18. package/BodyProvider/slices/sliceTTag.d.ts +10 -0
  19. package/BodyProvider/store.d.ts +9 -0
  20. package/BodyScrollLock/package.json +1 -1
  21. package/Box/package.json +1 -1
  22. package/Button/cjs/style.development.css +1 -1
  23. package/Button/cjs/style.development.v2.css +1 -1
  24. package/Button/cjs/style.production.css +1 -1
  25. package/Button/cjs/style.production.v2.css +1 -1
  26. package/Button/package.json +1 -1
  27. package/ButtonPageUp/cjs/index.development.js +3 -3
  28. package/ButtonPageUp/cjs/index.development.v2.js +3 -3
  29. package/ButtonPageUp/cjs/index.production.js +1 -1
  30. package/ButtonPageUp/cjs/index.production.v2.js +1 -1
  31. package/ButtonPageUp/package.json +1 -1
  32. package/Checkbox/package.json +1 -1
  33. package/ColorScheme/cjs/index.development.js +59 -0
  34. package/ColorScheme/cjs/index.development.v2.js +59 -0
  35. package/ColorScheme/cjs/index.production.js +1 -0
  36. package/ColorScheme/cjs/index.production.v2.js +1 -0
  37. package/ColorScheme/cjs/style.development.css +1 -0
  38. package/ColorScheme/cjs/style.development.v2.css +1 -0
  39. package/ColorScheme/cjs/style.production.css +1 -0
  40. package/ColorScheme/cjs/style.production.v2.css +1 -0
  41. package/ColorScheme/index.d.ts +10 -0
  42. package/ColorScheme/package.json +13 -0
  43. package/ContextMenu/package.json +1 -1
  44. package/ErrorCatch/cjs/index.development.js +5 -4
  45. package/ErrorCatch/cjs/index.development.v2.js +5 -4
  46. package/ErrorCatch/cjs/index.production.js +1 -1
  47. package/ErrorCatch/cjs/index.production.v2.js +1 -1
  48. package/ErrorCatch/package.json +1 -1
  49. package/Flex/package.json +1 -1
  50. package/Grid/package.json +1 -1
  51. package/Icon/cjs/index.development.js +1 -2
  52. package/Icon/cjs/index.development.v2.js +1 -2
  53. package/Icon/cjs/index.production.js +1 -1
  54. package/Icon/cjs/index.production.v2.js +1 -1
  55. package/Icon/cjs/style.development.css +1 -1
  56. package/Icon/cjs/style.development.v2.css +1 -1
  57. package/Icon/cjs/style.production.css +1 -1
  58. package/Icon/cjs/style.production.v2.css +1 -1
  59. package/Icon/package.json +1 -1
  60. package/Image/package.json +1 -1
  61. package/ImageEmoji/package.json +1 -1
  62. package/Input/package.json +1 -1
  63. package/InputField/cjs/index.development.js +5 -5
  64. package/InputField/cjs/index.development.v2.js +5 -5
  65. package/InputField/cjs/index.production.js +1 -1
  66. package/InputField/cjs/index.production.v2.js +1 -1
  67. package/InputField/package.json +1 -1
  68. package/KeyPress/package.json +1 -1
  69. package/Label/cjs/style.development.css +1 -1
  70. package/Label/cjs/style.development.v2.css +1 -1
  71. package/Label/cjs/style.production.css +1 -1
  72. package/Label/cjs/style.production.v2.css +1 -1
  73. package/Label/package.json +1 -1
  74. package/Line/package.json +1 -1
  75. package/Link/package.json +1 -1
  76. package/List/package.json +1 -1
  77. package/Media/index.d.ts +2 -2
  78. package/Media/package.json +1 -1
  79. package/Modal/cjs/index.development.js +3 -3
  80. package/Modal/cjs/index.development.v2.js +3 -3
  81. package/Modal/cjs/index.production.js +1 -1
  82. package/Modal/cjs/index.production.v2.js +1 -1
  83. package/Modal/package.json +1 -1
  84. package/OutsideClick/package.json +1 -1
  85. package/Overlay/cjs/index.development.js +5 -5
  86. package/Overlay/cjs/index.development.v2.js +5 -5
  87. package/Overlay/cjs/index.production.js +1 -1
  88. package/Overlay/cjs/index.production.v2.js +1 -1
  89. package/Overlay/package.json +1 -1
  90. package/PhotoGallery/cjs/index.development.js +3 -3
  91. package/PhotoGallery/cjs/index.development.v2.js +3 -3
  92. package/PhotoGallery/cjs/index.production.js +1 -1
  93. package/PhotoGallery/cjs/index.production.v2.js +1 -1
  94. package/PhotoGallery/package.json +1 -1
  95. package/Picture/package.json +1 -1
  96. package/Portal/package.json +1 -1
  97. package/Progress/cjs/style.development.css +1 -1
  98. package/Progress/cjs/style.development.v2.css +1 -1
  99. package/Progress/cjs/style.production.css +1 -1
  100. package/Progress/cjs/style.production.v2.css +1 -1
  101. package/Progress/package.json +1 -1
  102. package/QRCode/package.json +1 -1
  103. package/Rating/cjs/index.development.js +2 -1
  104. package/Rating/cjs/index.development.v2.js +2 -1
  105. package/Rating/cjs/index.production.js +1 -1
  106. package/Rating/cjs/index.production.v2.js +1 -1
  107. package/Rating/package.json +1 -1
  108. package/RatingSelect/package.json +1 -1
  109. package/Scroll/package.json +1 -1
  110. package/ScrollControls/cjs/index.development.js +3 -3
  111. package/ScrollControls/cjs/index.development.v2.js +3 -3
  112. package/ScrollControls/cjs/index.production.js +1 -1
  113. package/ScrollControls/cjs/index.production.v2.js +1 -1
  114. package/ScrollControls/package.json +1 -1
  115. package/SimpleSlider/cjs/index.development.js +3 -3
  116. package/SimpleSlider/cjs/index.development.v2.js +3 -3
  117. package/SimpleSlider/cjs/index.production.js +1 -1
  118. package/SimpleSlider/cjs/index.production.v2.js +1 -1
  119. package/SimpleSlider/package.json +1 -1
  120. package/Skeleton/package.json +1 -1
  121. package/SnackBar/cjs/index.development.js +12 -2
  122. package/SnackBar/cjs/index.development.v2.js +12 -2
  123. package/SnackBar/cjs/index.production.js +1 -1
  124. package/SnackBar/cjs/index.production.v2.js +1 -1
  125. package/SnackBar/cjs/style.development.css +1 -1
  126. package/SnackBar/cjs/style.development.v2.css +1 -1
  127. package/SnackBar/cjs/style.production.css +1 -1
  128. package/SnackBar/cjs/style.production.v2.css +1 -1
  129. package/SnackBar/index.d.ts +8 -4
  130. package/SnackBar/package.json +1 -1
  131. package/Spinner/cjs/style.development.css +1 -1
  132. package/Spinner/cjs/style.development.v2.css +1 -1
  133. package/Spinner/cjs/style.production.css +1 -1
  134. package/Spinner/cjs/style.production.v2.css +1 -1
  135. package/Spinner/package.json +1 -1
  136. package/Text/package.json +1 -1
  137. package/TextEmoji/package.json +1 -1
  138. package/Tooltip/package.json +1 -1
  139. package/Tumbler/package.json +1 -1
  140. package/Viewport/package.json +1 -1
  141. package/base/colors-dark.css +5 -163
  142. package/base/colors.css +395 -424
  143. package/package.json +4 -3
  144. package/useBrowserLayoutEffect/package.json +1 -1
  145. package/useDebounce/package.json +1 -1
  146. package/useForwardRef/package.json +1 -1
  147. package/useInView/package.json +1 -1
  148. package/useIsMounted/package.json +1 -1
  149. package/useKeyPress/package.json +1 -1
  150. package/useMedia/package.json +1 -1
  151. package/useOutsideClick/package.json +1 -1
  152. package/usePortal/package.json +1 -1
  153. package/useScrollPosition/package.json +1 -1
  154. package/useSnackBar/SnackBarManager.d.ts +2 -0
  155. package/useSnackBar/cjs/index.development.js +58 -4
  156. package/useSnackBar/cjs/index.development.v2.js +58 -4
  157. package/useSnackBar/cjs/index.production.js +1 -1
  158. package/useSnackBar/cjs/index.production.v2.js +1 -1
  159. package/useSnackBar/index.d.ts +7 -1
  160. package/useSnackBar/package.json +5 -2
  161. package/BodyContext/cjs/index.development.js +0 -42
  162. package/BodyContext/cjs/index.development.v2.js +0 -42
  163. package/BodyContext/cjs/index.production.js +0 -1
  164. package/BodyContext/cjs/index.production.v2.js +0 -1
  165. package/BodyContext/index.d.ts +0 -7
  166. package/BodyContext/package.json +0 -12
  167. package/SnackBarManager/cjs/index.development.js +0 -81
  168. package/SnackBarManager/cjs/index.development.v2.js +0 -81
  169. package/SnackBarManager/cjs/index.production.js +0 -1
  170. package/SnackBarManager/cjs/index.production.v2.js +0 -1
  171. package/SnackBarManager/index.d.ts +0 -7
  172. package/SnackBarManager/index.js +0 -7
  173. package/SnackBarManager/index.v2.js +0 -7
  174. package/SnackBarManager/package.json +0 -12
  175. package/useBodyTTag/cjs/index.development.js +0 -33
  176. package/useBodyTTag/cjs/index.development.v2.js +0 -33
  177. package/useBodyTTag/cjs/index.production.js +0 -1
  178. package/useBodyTTag/cjs/index.production.v2.js +0 -1
  179. package/useBodyTTag/index.d.ts +0 -1
  180. package/useBodyTTag/index.js +0 -7
  181. package/useBodyTTag/index.v2.js +0 -7
  182. package/useBodyTTag/package.json +0 -9
  183. /package/{BodyContext → ColorScheme}/index.js +0 -0
  184. /package/{BodyContext → ColorScheme}/index.v2.js +0 -0
package/base/colors.css CHANGED
@@ -1,436 +1,407 @@
1
- /* all colors */
2
1
  :root {
3
- --white: #ffffff;
4
-
5
- --black-900: #01011b;
6
- --black-800: #45455c;
7
- --black-700: #7d7d91;
8
- --black-600: #acacbe;
9
- --black-500: #c1c1d4;
10
- --black-400: #dadae8;
11
- --black-300: #e8e8f3;
12
- --black-200: #f1f1f9;
13
- --black-100: #f4f4f9;
14
- --black-50: #f9f9fc;
15
-
16
- --violet-900: #3600c4;
17
- --violet-800: #5300cb;
18
- --violet-700: #6200d1;
19
- --violet-600: #7b10db;
20
- --violet-500: #7b04df;
21
- --violet-400: #9242e5;
22
- --violet-300: #a768ea;
23
- --violet-200: #c096f0;
24
- --violet-100: #d9c1f5;
25
- --violet-50: #f1e6fb;
26
-
27
- --blue-900: #012070;
28
- --blue-800: #012d88;
29
- --blue-700: #0340a9;
30
- --blue-600: #0456ca;
31
- --blue-500: #0670eb;
32
- --blue-400: #419bf3;
33
- --blue-300: #67b8f9;
34
- --blue-200: #9ad5fd;
35
- --blue-100: #ccecfe;
36
- --blue-50: #e3f2fe;
37
-
38
- --green-900: #005800;
39
- --green-800: #027602;
40
- --green-700: #188711;
41
- --green-600: #27981e;
42
- --green-500: #32a727;
43
- --green-400: #54b44b;
44
- --green-300: #74c16b;
45
- --green-200: #9dd296;
46
- --green-100: #c3e3bf;
47
- --green-50: #e6f4e5;
48
-
49
- --yellow-900: #fc7600;
50
- --yellow-800: #fea200;
51
- --yellow-700: #febc00;
52
- --yellow-600: #ffd500;
53
- --yellow-500: #ffd400;
54
- --yellow-400: #feea3f;
55
- --yellow-300: #ffef67;
56
- --yellow-200: #fff394;
57
- --yellow-100: #fff8bf;
58
- --yellow-50: #fffde5;
59
-
60
- --orange-900: #cd5915;
61
- --orange-800: #d86f18;
62
- --orange-700: #df7d1c;
63
- --orange-600: #e58b1f;
64
- --orange-500: #e99623;
65
- --orange-400: #eca537;
66
- --orange-300: #efb456;
67
- --orange-200: #f3ca85;
68
- --orange-100: #f8deb5;
69
- --orange-50: #fcf2e1;
70
-
71
- --red-900: #de0404;
72
- --red-800: #f62513;
73
- --red-700: #ff3018;
74
- --red-600: #ff391f;
75
- --red-500: #ff4023;
76
- --red-400: #ff6444;
77
- --red-300: #ff8466;
78
- --red-200: #ffa992;
79
- --red-100: #ffcbbd;
80
- --red-50: #ffe9e8;
81
- }
2
+ --pds-color-light-white: #ffffff;
82
3
 
83
- /* button violet */
84
- :root {
85
- /* violet */
86
- --pds-button-violet-background: var(--violet-500);
87
- --pds-button-violet-border: var(--violet-500);
88
- --pds-button-violet-color: var(--white);
89
- --pds-button-violet-background-hover: var(--violet-700);
90
- --pds-button-violet-border-hover: var(--violet-700);
91
- --pds-button-violet-color-hover: var(--white);
92
- --pds-button-violet-background-active: var(--violet-700);
93
- --pds-button-violet-border-active: var(--violet-700);
94
- --pds-button-violet-color-active: var(--white);
95
- --pds-button-violet-background-focus: var(--violet-700);
96
- --pds-button-violet-border-focus: var(--violet-700);
97
- --pds-button-violet-color-focus: var(--white);
98
- --pds-button-violet-background-disabled: var(--pds-button-violet-background);
99
- --pds-button-violet-border-disabled: var(--pds-button-violet-border);
100
- --pds-button-violet-color-disabled: var(--pds-button-violet-color);
101
-
102
- /* violet-second */
103
- --pds-button-violet-second-background: var(--white);
104
- --pds-button-violet-second-border: var(--violet-500);
105
- --pds-button-violet-second-color: var(--violet-500);
106
- --pds-button-violet-second-background-hover: var(--violet-50);
107
- --pds-button-violet-second-border-hover: var(--violet-500);
108
- --pds-button-violet-second-color-hover: var(--violet-500);
109
- --pds-button-violet-second-background-active: var(--violet-50);
110
- --pds-button-violet-second-border-active: var(--violet-500);
111
- --pds-button-violet-second-color-active: var(--violet-500);
112
- --pds-button-violet-second-background-focus: var(--violet-50);
113
- --pds-button-violet-second-border-focus: var(--violet-500);
114
- --pds-button-violet-second-color-focus: var(--violet-500);
115
- --pds-button-violet-second-background-disabled: var(--pds-button-violet-second-background);
116
- --pds-button-violet-second-border-disabled: var(--pds-button-violet-second-border);
117
- --pds-button-violet-second-color-disabled: var(--pds-button-violet-second-color);
118
-
119
- /* violet-transparent */
120
- --pds-button-violet-transparent-background: transparent;
121
- --pds-button-violet-transparent-border: var(--violet-500);
122
- --pds-button-violet-transparent-color: var(--violet-500);
123
- --pds-button-violet-transparent-background-hover: rgba(123, 4, 223, 0.1);
124
- --pds-button-violet-transparent-border-hover: var(--violet-500);
125
- --pds-button-violet-transparent-color-hover: var(--violet-500);
126
- --pds-button-violet-transparent-background-active: rgba(123, 4, 223, 0.1);
127
- --pds-button-violet-transparent-border-active: var(--violet-500);
128
- --pds-button-violet-transparent-color-active: var(--violet-500);
129
- --pds-button-violet-transparent-background-focus: rgba(123, 4, 223, 0.1);
130
- --pds-button-violet-transparent-border-focus: var(--violet-500);
131
- --pds-button-violet-transparent-color-focus: var(--violet-500);
132
- --pds-button-violet-transparent-background-disabled: var(--pds-button-violet-transparent-background);
133
- --pds-button-violet-transparent-border-disabled: var(--pds-button-violet-transparent-border);
134
- --pds-button-violet-transparent-color-disabled: var(--pds-button-violet-transparent-color);
135
-
136
- /* violet-inherit */
137
- --pds-button-violet-inherit-background: transparent;
138
- --pds-button-violet-inherit-border: transparent;
139
- --pds-button-violet-inherit-color: var(--violet-500);
140
- --pds-button-violet-inherit-background-hover: rgba(123, 4, 223, 0.1);
141
- --pds-button-violet-inherit-border-hover: transparent;
142
- --pds-button-violet-inherit-color-hover: var(--violet-500);
143
- --pds-button-violet-inherit-background-active: rgba(123, 4, 223, 0.1);
144
- --pds-button-violet-inherit-border-active: transparent;
145
- --pds-button-violet-inherit-color-active: var(--violet-500);
146
- --pds-button-violet-inherit-background-focus: rgba(123, 4, 223, 0.1);
147
- --pds-button-violet-inherit-border-focus: transparent;
148
- --pds-button-violet-inherit-color-focus: var(--violet-500);
149
- --pds-button-violet-inherit-background-disabled: var(--pds-button-violet-inherit-background);
150
- --pds-button-violet-inherit-border-disabled: var(--pds-button-violet-inherit-border);
151
- --pds-button-violet-inherit-color-disabled: var(--pds-button-violet-inherit-color);
4
+ --pds-color-light-black-900: #01011b;
5
+ --pds-color-light-black-800: #45455c;
6
+ --pds-color-light-black-700: #6b6b81;
7
+ --pds-color-light-black-600: #acacbe;
8
+ --pds-color-light-black-500: #c1c1d4;
9
+ --pds-color-light-black-400: #dadae8;
10
+ --pds-color-light-black-300: #e8e8f3;
11
+ --pds-color-light-black-200: #f1f1f9;
12
+ --pds-color-light-black-100: #f4f4f9;
13
+ --pds-color-light-black-50: #f9f9fc;
14
+
15
+ --pds-color-light-violet-900: #3600c4;
16
+ --pds-color-light-violet-800: #5300cb;
17
+ --pds-color-light-violet-700: #6200d1;
18
+ --pds-color-light-violet-600: #6f01d2;
19
+ --pds-color-light-violet-500: #7b04df;
20
+ --pds-color-light-violet-400: #9242e5;
21
+ --pds-color-light-violet-300: #a768ea;
22
+ --pds-color-light-violet-200: #c096f0;
23
+ --pds-color-light-violet-100: #d9c1f5;
24
+ --pds-color-light-violet-50: #f1e6fb;
25
+
26
+ --pds-color-light-blue-900: #00458f;
27
+ --pds-color-light-blue-800: #0054af;
28
+ --pds-color-light-blue-700: #005bbe;
29
+ --pds-color-light-blue-600: #0062cc;
30
+ --pds-color-light-blue-500: #006be0;
31
+ --pds-color-light-blue-400: #0073f0;
32
+ --pds-color-light-blue-300: #2a90ff;
33
+ --pds-color-light-blue-200: #67afff;
34
+ --pds-color-light-blue-100: #a1ceff;
35
+ --pds-color-light-blue-50: #eff7ff;
36
+
37
+ --pds-color-light-green-900: #005800;
38
+ --pds-color-light-green-800: #006500;
39
+ --pds-color-light-green-700: #027602;
40
+ --pds-color-light-green-600: #27981e;
41
+ --pds-color-light-green-500: #32a727;
42
+ --pds-color-light-green-400: #54b44b;
43
+ --pds-color-light-green-300: #74c16b;
44
+ --pds-color-light-green-200: #9dd296;
45
+ --pds-color-light-green-100: #c3e3bf;
46
+ --pds-color-light-green-50: #e6f4e5;
47
+
48
+ --pds-color-light-yellow-900: #ffaa00;
49
+ --pds-color-light-yellow-800: #ffb700;
50
+ --pds-color-light-yellow-700: #ffc300;
51
+ --pds-color-light-yellow-600: #ffc800;
52
+ --pds-color-light-yellow-500: #ffcc00;
53
+ --pds-color-light-yellow-400: #ffd425;
54
+ --pds-color-light-yellow-300: #ffe16c;
55
+ --pds-color-light-yellow-200: #ffeb9a;
56
+ --pds-color-light-yellow-100: #fff0b3;
57
+ --pds-color-light-yellow-50: #fff9e3;
58
+
59
+ --pds-color-light-orange-900: #c34800;
60
+ --pds-color-light-orange-800: #d86f18;
61
+ --pds-color-light-orange-700: #df7d1c;
62
+ --pds-color-light-orange-600: #e58b1f;
63
+ --pds-color-light-orange-500: #e99623;
64
+ --pds-color-light-orange-400: #eca537;
65
+ --pds-color-light-orange-300: #efb456;
66
+ --pds-color-light-orange-200: #f3ca85;
67
+ --pds-color-light-orange-100: #f8deb5;
68
+ --pds-color-light-orange-50: #fff4e0;
69
+
70
+ --pds-color-light-red-900: #de0016;
71
+ --pds-color-light-red-800: #f20018;
72
+ --pds-color-light-red-700: #f91f35;
73
+ --pds-color-light-red-600: #ff2e43;
74
+ --pds-color-light-red-500: #ff4c5d;
75
+ --pds-color-light-red-400: #ff6a78;
76
+ --pds-color-light-red-300: #ff8893;
77
+ --pds-color-light-red-200: #ffa6ae;
78
+ --pds-color-light-red-100: #ffc3c9;
79
+ --pds-color-light-red-50: #ffeeef;
152
80
  }
153
81
 
154
- /* button white */
155
82
  :root {
156
- /* white */
157
- --pds-button-white-background: var(--white);
158
- --pds-button-white-border: var(--black-400);
159
- --pds-button-white-color: var(--black-900);
160
- --pds-button-white-background-hover: var(--black-50);
161
- --pds-button-white-border-hover: var(--black-600);
162
- --pds-button-white-color-hover: var(--black-900);
163
- --pds-button-white-background-active: var(--black-200);
164
- --pds-button-white-border-active: var(--black-700);
165
- --pds-button-white-color-active: var(--black-900);
166
- --pds-button-white-background-focus: var(--black-50);
167
- --pds-button-white-border-focus: var(--black-600);
168
- --pds-button-white-color-focus: var(--black-900);
169
- --pds-button-white-background-disabled: var(--pds-button-white-background);
170
- --pds-button-white-border-disabled: var(--pds-button-white-border);
171
- --pds-button-white-color-disabled: var(--pds-button-white-color);
172
-
173
- /* white-second */
174
- --pds-button-white-second-background: var(--white);
175
- --pds-button-white-second-border: var(--black-400);
176
- --pds-button-white-second-color: var(--black-900);
177
- --pds-button-white-second-background-hover: var(--black-300);
178
- --pds-button-white-second-border-hover: var(--black-400);
179
- --pds-button-white-second-color-hover: var(--black-900);
180
- --pds-button-white-second-background-active: var(--black-400);
181
- --pds-button-white-second-border-active: var(--black-500);
182
- --pds-button-white-second-color-active: var(--black-900);
183
- --pds-button-white-second-background-focus: var(--black-300);
184
- --pds-button-white-second-border-focus: var(--black-400);
185
- --pds-button-white-second-color-focus: var(--black-900);
186
- --pds-button-white-second-background-disabled: var(--pds-button-white-second-background);
187
- --pds-button-white-second-border-disabled: var(--pds-button-white-second-border);
188
- --pds-button-white-second-color-disabled: var(--pds-button-white-second-color);
189
-
190
- /* white-transparent */
191
- --pds-button-white-transparent-background: transparent;
192
- --pds-button-white-transparent-border: var(--pds-button-white-second-border);
193
- --pds-button-white-transparent-color: var(--pds-button-white-second-color);
194
- --pds-button-white-transparent-background-hover: var(--pds-button-white-second-background-hover);
195
- --pds-button-white-transparent-border-hover: var(--pds-button-white-second-border-hover);
196
- --pds-button-white-transparent-color-hover: var(--pds-button-white-second-color-hover);
197
- --pds-button-white-transparent-background-active: var(--pds-button-white-second-background-active);
198
- --pds-button-white-transparent-border-active: var(--pds-button-white-second-border-active);
199
- --pds-button-white-transparent-color-active: var(--pds-button-white-second-color-active);
200
- --pds-button-white-transparent-background-focus: var(--pds-button-white-second-background-focus);
201
- --pds-button-white-transparent-border-focus: var(--pds-button-white-second-border-focus);
202
- --pds-button-white-transparent-color-focus: var(--pds-button-white-second-color-focus);
203
- --pds-button-white-transparent-background-disabled: var(--pds-button-white-transparent-background);
204
- --pds-button-white-transparent-border-disabled: var(--pds-button-white-transparent-border);
205
- --pds-button-white-transparent-color-disabled: var(--pds-button-white-transparent-color);
206
-
207
- /* white-inherit */
208
- --pds-button-white-inherit-background: rgba(255, 255, 255, 0);
209
- --pds-button-white-inherit-border: transparent;
210
- --pds-button-white-inherit-color: rgba(255, 255, 255, 1);
211
- --pds-button-white-inherit-background-hover: rgba(255, 255, 255, 0.2);
212
- --pds-button-white-inherit-border-hover: transparent;
213
- --pds-button-white-inherit-color-hover: rgba(255, 255, 255, 1);
214
- --pds-button-white-inherit-background-active: rgba(255, 255, 255, 0.3);
215
- --pds-button-white-inherit-border-active: transparent;
216
- --pds-button-white-inherit-color-active: rgba(255, 255, 255, 1);
217
- --pds-button-white-inherit-background-focus: rgba(255, 255, 255, 0.2);
218
- --pds-button-white-inherit-border-focus: transparent;
219
- --pds-button-white-inherit-color-focus: rgba(255, 255, 255, 1);
220
- --pds-button-white-inherit-background-disabled: var(--pds-button-white-inherit-background);
221
- --pds-button-white-inherit-border-disabled: var(--pds-button-white-inherit-border);
222
- --pds-button-white-inherit-color-disabled: var(--pds-button-white-inherit-color);
83
+ --pds-color-dark-white: #1e1e1e;
84
+
85
+ --pds-color-dark-black-900: #f9f9f9;
86
+ --pds-color-dark-black-800: #cccccc;
87
+ --pds-color-dark-black-700: #a0a0a0;
88
+ --pds-color-dark-black-600: #969696;
89
+ --pds-color-dark-black-500: #686868;
90
+ --pds-color-dark-black-400: #404040;
91
+ --pds-color-dark-black-300: #2d2d2d;
92
+ --pds-color-dark-black-200: #161616;
93
+ --pds-color-dark-black-100: #121212;
94
+ --pds-color-dark-black-50: #0a0a0a;
95
+
96
+ --pds-color-dark-violet-900: #e6d5f9;
97
+ --pds-color-dark-violet-800: #dcc5f7;
98
+ --pds-color-dark-violet-700: #d3b6f5;
99
+ --pds-color-dark-violet-600: #c6a0f1;
100
+ --pds-color-dark-violet-500: #c096f0;
101
+ --pds-color-dark-violet-400: #a380cc;
102
+ --pds-color-dark-violet-300: #8669a8;
103
+ --pds-color-dark-violet-200: #6a5384;
104
+ --pds-color-dark-violet-100: #4d3c60;
105
+ --pds-color-dark-violet-50: #30263c;
106
+
107
+ --pds-color-dark-blue-900: #82c0ff;
108
+ --pds-color-dark-blue-800: #66b2ff;
109
+ --pds-color-dark-blue-700: #59acfe;
110
+ --pds-color-dark-blue-600: #45a2ff;
111
+ --pds-color-dark-blue-500: #2c95ff;
112
+ --pds-color-dark-blue-400: #187ee4;
113
+ --pds-color-dark-blue-300: #0f64b9;
114
+ --pds-color-dark-blue-200: #074a8c;
115
+ --pds-color-dark-blue-100: #053464;
116
+ --pds-color-dark-blue-50: #102e4c;
117
+
118
+ --pds-color-dark-green-900: #97de90;
119
+ --pds-color-dark-green-800: #7dc676;
120
+ --pds-color-dark-green-700: #69bd61;
121
+ --pds-color-dark-green-600: #4fa746;
122
+ --pds-color-dark-green-500: #479440;
123
+ --pds-color-dark-green-400: #3f8039;
124
+ --pds-color-dark-green-300: #376d32;
125
+ --pds-color-dark-green-200: #2f592b;
126
+ --pds-color-dark-green-100: #274624;
127
+ --pds-color-dark-green-50: #1f321d;
128
+
129
+ --pds-color-dark-yellow-900: #f7ca00;
130
+ --pds-color-dark-yellow-800: #e3b900;
131
+ --pds-color-dark-yellow-700: #dab200;
132
+ --pds-color-dark-yellow-600: #bd9900;
133
+ --pds-color-dark-yellow-500: #a28300;
134
+ --pds-color-dark-yellow-400: #a78803;
135
+ --pds-color-dark-yellow-300: #9c7e00;
136
+ --pds-color-dark-yellow-200: #8a6f00;
137
+ --pds-color-dark-yellow-100: #584a0b;
138
+ --pds-color-dark-yellow-50: #3e350e;
139
+
140
+ --pds-color-dark-orange-900: #ffb340;
141
+ --pds-color-dark-orange-800: #ffa620;
142
+ --pds-color-dark-orange-700: #ff9a00;
143
+ --pds-color-dark-orange-600: #df8600;
144
+ --pds-color-dark-orange-500: #bf7300;
145
+ --pds-color-dark-orange-400: #a06000;
146
+ --pds-color-dark-orange-300: #804d00;
147
+ --pds-color-dark-orange-200: #603a00;
148
+ --pds-color-dark-orange-100: #402600;
149
+ --pds-color-dark-orange-50: #392200;
150
+
151
+ --pds-color-dark-red-900: #ff453a;
152
+ --pds-color-dark-red-800: #f71407;
153
+ --pds-color-dark-red-700: #e80d00;
154
+ --pds-color-dark-red-600: #db0c00;
155
+ --pds-color-dark-red-500: #bc0a00;
156
+ --pds-color-dark-red-400: #9d0900;
157
+ --pds-color-dark-red-300: #7d0700;
158
+ --pds-color-dark-red-200: #5e0500;
159
+ --pds-color-dark-red-100: #3f0300;
160
+ --pds-color-dark-red-50: #3f110e;
223
161
  }
224
162
 
225
- /* button yellow */
226
- :root {
227
- /* yellow */
228
- --pds-button-yellow-background: var(--yellow-500);
229
- --pds-button-yellow-border: var(--yellow-500);
230
- --pds-button-yellow-color: var(--black-900);
231
- --pds-button-yellow-background-hover: var(--yellow-700);
232
- --pds-button-yellow-border-hover: var(--yellow-700);
233
- --pds-button-yellow-color-hover: var(--black-900);
234
- --pds-button-yellow-background-active: var(--yellow-700);
235
- --pds-button-yellow-border-active: var(--yellow-700);
236
- --pds-button-yellow-color-active: var(--black-900);
237
- --pds-button-yellow-background-focus: var(--yellow-700);
238
- --pds-button-yellow-border-focus: var(--yellow-700);
239
- --pds-button-yellow-color-focus: var(--black-900);
240
- --pds-button-yellow-background-disabled: var(--pds-button-yellow-background);
241
- --pds-button-yellow-border-disabled: var(--pds-button-yellow-border);
242
- --pds-button-yellow-color-disabled: var(--pds-button-yellow-color);
243
-
244
- /* yellow-second */
245
- --pds-button-yellow-second-background: var(--white);
246
- --pds-button-yellow-second-border: var(--yellow-500);
247
- --pds-button-yellow-second-color: var(--black-900);
248
- --pds-button-yellow-second-background-hover: var(--yellow-50);
249
- --pds-button-yellow-second-border-hover: var(--yellow-500);
250
- --pds-button-yellow-second-color-hover: var(--black-900);
251
- --pds-button-yellow-second-background-active: var(--yellow-50);
252
- --pds-button-yellow-second-border-active: var(--yellow-500);
253
- --pds-button-yellow-second-color-active: var(--black-900);
254
- --pds-button-yellow-second-background-focus: var(--yellow-50);
255
- --pds-button-yellow-second-border-focus: var(--yellow-500);
256
- --pds-button-yellow-second-color-focus: var(--black-900);
257
- --pds-button-yellow-second-background-disabled: var(--pds-button-yellow-second-background);
258
- --pds-button-yellow-second-border-disabled: var(--pds-button-yellow-second-border);
259
- --pds-button-yellow-second-color-disabled: var(--pds-button-yellow-second-color);
260
-
261
- /* yellow-transparent */
262
- --pds-button-yellow-transparent-background: transparent;
263
- --pds-button-yellow-transparent-border: var(--yellow-500);
264
- --pds-button-yellow-transparent-color: var(--black-900);
265
- --pds-button-yellow-transparent-background-hover: rgba(255, 212, 0, 0.12);
266
- --pds-button-yellow-transparent-border-hover: var(--yellow-500);
267
- --pds-button-yellow-transparent-color-hover: var(--black-900);
268
- --pds-button-yellow-transparent-background-active: rgba(255, 212, 0, 0.12);
269
- --pds-button-yellow-transparent-border-active: var(--yellow-500);
270
- --pds-button-yellow-transparent-color-active: var(--black-900);
271
- --pds-button-yellow-transparent-background-focus: rgba(255, 212, 0, 0.12);
272
- --pds-button-yellow-transparent-border-focus: var(--yellow-500);
273
- --pds-button-yellow-transparent-color-focus: var(--black-900);
274
- --pds-button-yellow-transparent-background-disabled: var(--pds-button-yellow-transparent-background);
275
- --pds-button-yellow-transparent-border-disabled: var(--pds-button-yellow-transparent-border);
276
- --pds-button-yellow-transparent-color-disabled: var(--pds-button-yellow-transparent-color);
277
-
278
- /* yellow-inherit */
279
- --pds-button-yellow-inherit-background: transparent;
280
- --pds-button-yellow-inherit-border: transparent;
281
- --pds-button-yellow-inherit-color: var(--yellow-500);
282
- --pds-button-yellow-inherit-background-hover: rgba(255, 212, 0, 0.12);
283
- --pds-button-yellow-inherit-border-hover: transparent;
284
- --pds-button-yellow-inherit-color-hover: var(--yellow-500);
285
- --pds-button-yellow-inherit-background-active: rgba(255, 212, 0, 0.12);
286
- --pds-button-yellow-inherit-border-active: transparent;
287
- --pds-button-yellow-inherit-color-active: var(--yellow-500);
288
- --pds-button-yellow-inherit-background-focus: rgba(255, 212, 0, 0.12);
289
- --pds-button-yellow-inherit-border-focus: transparent;
290
- --pds-button-yellow-inherit-color-focus: var(--yellow-500);
291
- --pds-button-yellow-inherit-background-disabled: var(--pds-button-yellow-inherit-background);
292
- --pds-button-yellow-inherit-border-disabled: var(--pds-button-yellow-inherit-border);
293
- --pds-button-yellow-inherit-color-disabled: var(--pds-button-yellow-inherit-color);
163
+ :root,
164
+ [data-pds-color-scheme='light'] {
165
+ --white: var(--pds-color-light-white);
166
+
167
+ --black-900: var(--pds-color-light-black-900);
168
+ --black-800: var(--pds-color-light-black-800);
169
+ --black-700: var(--pds-color-light-black-700);
170
+ --black-600: var(--pds-color-light-black-600);
171
+ --black-500: var(--pds-color-light-black-500);
172
+ --black-400: var(--pds-color-light-black-400);
173
+ --black-300: var(--pds-color-light-black-300);
174
+ --black-200: var(--pds-color-light-black-200);
175
+ --black-100: var(--pds-color-light-black-100);
176
+ --black-50: var(--pds-color-light-black-50);
177
+
178
+ --violet-900: var(--pds-color-light-violet-900);
179
+ --violet-800: var(--pds-color-light-violet-800);
180
+ --violet-700: var(--pds-color-light-violet-700);
181
+ --violet-600: var(--pds-color-light-violet-600);
182
+ --violet-500: var(--pds-color-light-violet-500);
183
+ --violet-400: var(--pds-color-light-violet-400);
184
+ --violet-300: var(--pds-color-light-violet-300);
185
+ --violet-200: var(--pds-color-light-violet-200);
186
+ --violet-100: var(--pds-color-light-violet-100);
187
+ --violet-50: var(--pds-color-light-violet-50);
188
+
189
+ --blue-900: var(--pds-color-light-blue-900);
190
+ --blue-800: var(--pds-color-light-blue-800);
191
+ --blue-700: var(--pds-color-light-blue-700);
192
+ --blue-600: var(--pds-color-light-blue-600);
193
+ --blue-500: var(--pds-color-light-blue-500);
194
+ --blue-400: var(--pds-color-light-blue-400);
195
+ --blue-300: var(--pds-color-light-blue-300);
196
+ --blue-200: var(--pds-color-light-blue-200);
197
+ --blue-100: var(--pds-color-light-blue-100);
198
+ --blue-50: var(--pds-color-light-blue-50);
199
+
200
+ --green-900: var(--pds-color-light-green-900);
201
+ --green-800: var(--pds-color-light-green-800);
202
+ --green-700: var(--pds-color-light-green-700);
203
+ --green-600: var(--pds-color-light-green-600);
204
+ --green-500: var(--pds-color-light-green-500);
205
+ --green-400: var(--pds-color-light-green-400);
206
+ --green-300: var(--pds-color-light-green-300);
207
+ --green-200: var(--pds-color-light-green-200);
208
+ --green-100: var(--pds-color-light-green-100);
209
+ --green-50: var(--pds-color-light-green-50);
210
+
211
+ --yellow-900: var(--pds-color-light-yellow-900);
212
+ --yellow-800: var(--pds-color-light-yellow-800);
213
+ --yellow-700: var(--pds-color-light-yellow-700);
214
+ --yellow-600: var(--pds-color-light-yellow-600);
215
+ --yellow-500: var(--pds-color-light-yellow-500);
216
+ --yellow-400: var(--pds-color-light-yellow-400);
217
+ --yellow-300: var(--pds-color-light-yellow-300);
218
+ --yellow-200: var(--pds-color-light-yellow-200);
219
+ --yellow-100: var(--pds-color-light-yellow-100);
220
+ --yellow-50: var(--pds-color-light-yellow-50);
221
+
222
+ --orange-900: var(--pds-color-light-orange-900);
223
+ --orange-800: var(--pds-color-light-orange-800);
224
+ --orange-700: var(--pds-color-light-orange-700);
225
+ --orange-600: var(--pds-color-light-orange-600);
226
+ --orange-500: var(--pds-color-light-orange-500);
227
+ --orange-400: var(--pds-color-light-orange-400);
228
+ --orange-300: var(--pds-color-light-orange-300);
229
+ --orange-200: var(--pds-color-light-orange-200);
230
+ --orange-100: var(--pds-color-light-orange-100);
231
+ --orange-50: var(--pds-color-light-orange-50);
232
+
233
+ --red-900: var(--pds-color-light-red-900);
234
+ --red-800: var(--pds-color-light-red-800);
235
+ --red-700: var(--pds-color-light-red-700);
236
+ --red-600: var(--pds-color-light-red-600);
237
+ --red-500: var(--pds-color-light-red-500);
238
+ --red-400: var(--pds-color-light-red-400);
239
+ --red-300: var(--pds-color-light-red-300);
240
+ --red-200: var(--pds-color-light-red-200);
241
+ --red-100: var(--pds-color-light-red-100);
242
+ --red-50: var(--pds-color-light-red-50);
294
243
  }
295
244
 
296
- /* button black */
297
- :root {
298
- /* black */
299
- --pds-button-black-background: var(--black-900);
300
- --pds-button-black-border: var(--black-900);
301
- --pds-button-black-color: var(--white);
302
- --pds-button-black-background-hover: var(--black-800);
303
- --pds-button-black-border-hover: var(--black-800);
304
- --pds-button-black-color-hover: var(--white);
305
- --pds-button-black-background-active: var(--black-900);
306
- --pds-button-black-border-active: var(--black-900);
307
- --pds-button-black-color-active: var(--white);
308
- --pds-button-black-background-focus: var(--black-800);
309
- --pds-button-black-border-focus: var(--black-900);
310
- --pds-button-black-color-focus: var(--white);
311
- --pds-button-black-background-disabled: var(--pds-button-black-background);
312
- --pds-button-black-border-disabled: var(--pds-button-black-border);
313
- --pds-button-black-color-disabled: var(--pds-button-black-color);
314
-
315
- /* black-second */
316
- --pds-button-black-second-background: var(--white);
317
- --pds-button-black-second-border: var(--black-500);
318
- --pds-button-black-second-color: var(--black-900);
319
- --pds-button-black-second-background-hover: var(--black-100);
320
- --pds-button-black-second-border-hover: var(--black-600);
321
- --pds-button-black-second-color-hover: var(--black-900);
322
- --pds-button-black-second-background-active: var(--black-300);
323
- --pds-button-black-second-border-active: var(--black-700);
324
- --pds-button-black-second-color-active: var(--black-900);
325
- --pds-button-black-second-background-focus: var(--black-500);
326
- --pds-button-black-second-border-focus: var(--black-600);
327
- --pds-button-black-second-color-focus: var(--black-900);
328
- --pds-button-black-second-background-disabled: var(--pds-button-black-second-background);
329
- --pds-button-black-second-border-disabled: var(--pds-button-black-second-border);
330
- --pds-button-black-second-color-disabled: var(--pds-button-black-second-color);
331
-
332
- /* black-transparent */
333
- --pds-button-black-transparent-background: transparent;
334
- --pds-button-black-transparent-border: var(--pds-button-black-second-border);
335
- --pds-button-black-transparent-color: var(--pds-button-black-second-color);
336
- --pds-button-black-transparent-background-hover: var(--pds-button-black-second-background-hover);
337
- --pds-button-black-transparent-border-hover: var(--pds-button-black-second-border-hover);
338
- --pds-button-black-transparent-color-hover: var(--pds-button-black-second-color-hover);
339
- --pds-button-black-transparent-background-active: var(--pds-button-black-second-background-active);
340
- --pds-button-black-transparent-border-active: var(--pds-button-black-second-border-active);
341
- --pds-button-black-transparent-color-active: var(--pds-button-black-second-color-active);
342
- --pds-button-black-transparent-background-focus: var(--pds-button-black-second-background-focus);
343
- --pds-button-black-transparent-border-focus: var(--pds-button-black-second-border-focus);
344
- --pds-button-black-transparent-color-focus: var(--pds-button-black-second-color-focus);
345
- --pds-button-black-transparent-background-disabled: var(--pds-button-black-transparent-background);
346
- --pds-button-black-transparent-border-disabled: var(--pds-button-black-transparent-border);
347
- --pds-button-black-transparent-color-disabled: var(--pds-button-black-transparent-color);
348
-
349
- /* black-inherit */
350
- --pds-button-black-inherit-background: rgba(1, 1, 27, 0);
351
- --pds-button-black-inherit-border: transparent;
352
- --pds-button-black-inherit-color: var(--black-900);
353
- --pds-button-black-inherit-background-hover: rgba(1, 1, 27, 0.05);
354
- --pds-button-black-inherit-border-hover: transparent;
355
- --pds-button-black-inherit-color-hover: var(--black-900);
356
- --pds-button-black-inherit-background-active: rgba(1, 1, 27, 0.15);
357
- --pds-button-black-inherit-border-active: transparent;
358
- --pds-button-black-inherit-color-active: var(--black-900);
359
- --pds-button-black-inherit-background-focus: rgba(1, 1, 27, 0.05);
360
- --pds-button-black-inherit-border-focus: transparent;
361
- --pds-button-black-inherit-color-focus: var(--black-900);
362
- --pds-button-black-inherit-background-disabled: var(--pds-button-black-inherit-background);
363
- --pds-button-black-inherit-border-disabled: var(--pds-button-black-inherit-border);
364
- --pds-button-black-inherit-color-disabled: var(--pds-button-black-inherit-color);
245
+ [data-pds-color-scheme='dark'] {
246
+ --white: var(--pds-color-dark-white);
247
+
248
+ --black-900: var(--pds-color-dark-black-900);
249
+ --black-800: var(--pds-color-dark-black-800);
250
+ --black-700: var(--pds-color-dark-black-700);
251
+ --black-600: var(--pds-color-dark-black-600);
252
+ --black-500: var(--pds-color-dark-black-500);
253
+ --black-400: var(--pds-color-dark-black-400);
254
+ --black-300: var(--pds-color-dark-black-300);
255
+ --black-200: var(--pds-color-dark-black-200);
256
+ --black-100: var(--pds-color-dark-black-100);
257
+ --black-50: var(--pds-color-dark-black-50);
258
+
259
+ --violet-900: var(--pds-color-dark-violet-900);
260
+ --violet-800: var(--pds-color-dark-violet-800);
261
+ --violet-700: var(--pds-color-dark-violet-700);
262
+ --violet-600: var(--pds-color-dark-violet-600);
263
+ --violet-500: var(--pds-color-dark-violet-500);
264
+ --violet-400: var(--pds-color-dark-violet-400);
265
+ --violet-300: var(--pds-color-dark-violet-300);
266
+ --violet-200: var(--pds-color-dark-violet-200);
267
+ --violet-100: var(--pds-color-dark-violet-100);
268
+ --violet-50: var(--pds-color-dark-violet-50);
269
+
270
+ --blue-900: var(--pds-color-dark-blue-900);
271
+ --blue-800: var(--pds-color-dark-blue-800);
272
+ --blue-700: var(--pds-color-dark-blue-700);
273
+ --blue-600: var(--pds-color-dark-blue-600);
274
+ --blue-500: var(--pds-color-dark-blue-500);
275
+ --blue-400: var(--pds-color-dark-blue-400);
276
+ --blue-300: var(--pds-color-dark-blue-300);
277
+ --blue-200: var(--pds-color-dark-blue-200);
278
+ --blue-100: var(--pds-color-dark-blue-100);
279
+ --blue-50: var(--pds-color-dark-blue-50);
280
+
281
+ --green-900: var(--pds-color-dark-green-900);
282
+ --green-800: var(--pds-color-dark-green-800);
283
+ --green-700: var(--pds-color-dark-green-700);
284
+ --green-600: var(--pds-color-dark-green-600);
285
+ --green-500: var(--pds-color-dark-green-500);
286
+ --green-400: var(--pds-color-dark-green-400);
287
+ --green-300: var(--pds-color-dark-green-300);
288
+ --green-200: var(--pds-color-dark-green-200);
289
+ --green-100: var(--pds-color-dark-green-100);
290
+ --green-50: var(--pds-color-dark-green-50);
291
+
292
+ --yellow-900: var(--pds-color-dark-yellow-900);
293
+ --yellow-800: var(--pds-color-dark-yellow-800);
294
+ --yellow-700: var(--pds-color-dark-yellow-700);
295
+ --yellow-600: var(--pds-color-dark-yellow-600);
296
+ --yellow-500: var(--pds-color-dark-yellow-500);
297
+ --yellow-400: var(--pds-color-dark-yellow-400);
298
+ --yellow-300: var(--pds-color-dark-yellow-300);
299
+ --yellow-200: var(--pds-color-dark-yellow-200);
300
+ --yellow-100: var(--pds-color-dark-yellow-100);
301
+ --yellow-50: var(--pds-color-dark-yellow-50);
302
+
303
+ --orange-900: var(--pds-color-dark-orange-900);
304
+ --orange-800: var(--pds-color-dark-orange-800);
305
+ --orange-700: var(--pds-color-dark-orange-700);
306
+ --orange-600: var(--pds-color-dark-orange-600);
307
+ --orange-500: var(--pds-color-dark-orange-500);
308
+ --orange-400: var(--pds-color-dark-orange-400);
309
+ --orange-300: var(--pds-color-dark-orange-300);
310
+ --orange-200: var(--pds-color-dark-orange-200);
311
+ --orange-100: var(--pds-color-dark-orange-100);
312
+ --orange-50: var(--pds-color-dark-orange-50);
313
+
314
+ --red-900: var(--pds-color-dark-red-900);
315
+ --red-800: var(--pds-color-dark-red-800);
316
+ --red-700: var(--pds-color-dark-red-700);
317
+ --red-600: var(--pds-color-dark-red-600);
318
+ --red-500: var(--pds-color-dark-red-500);
319
+ --red-400: var(--pds-color-dark-red-400);
320
+ --red-300: var(--pds-color-dark-red-300);
321
+ --red-200: var(--pds-color-dark-red-200);
322
+ --red-100: var(--pds-color-dark-red-100);
323
+ --red-50: var(--pds-color-dark-red-50);
365
324
  }
366
325
 
367
- /* button gray */
368
- :root {
369
- /* gray */
370
- --pds-button-gray-background: var(--black-300);
371
- --pds-button-gray-border: var(--black-300);
372
- --pds-button-gray-color: var(--black-900);
373
- --pds-button-gray-background-hover: var(--black-400);
374
- --pds-button-gray-border-hover: var(--black-400);
375
- --pds-button-gray-color-hover: var(--black-900);
376
- --pds-button-gray-background-active: var(--black-400);
377
- --pds-button-gray-border-active: var(--black-400);
378
- --pds-button-gray-color-active: var(--black-900);
379
- --pds-button-gray-background-focus: var(--black-400);
380
- --pds-button-gray-border-focus: var(--black-400);
381
- --pds-button-gray-color-focus: var(--black-900);
382
- --pds-button-gray-background-disabled: var(--pds-button-gray-background);
383
- --pds-button-gray-border-disabled: var(--pds-button-gray-border);
384
- --pds-button-gray-color-disabled: var(--pds-button-gray-color);
385
-
386
- /* gray-second */
387
- --pds-button-gray-second-background: var(--white);
388
- --pds-button-gray-second-border: var(--black-500);
389
- --pds-button-gray-second-color: var(--black-900);
390
- --pds-button-gray-second-background-hover: var(--black-300);
391
- --pds-button-gray-second-border-hover: var(--black-500);
392
- --pds-button-gray-second-color-hover: var(--black-900);
393
- --pds-button-gray-second-background-active: var(--black-300);
394
- --pds-button-gray-second-border-active: var(--black-500);
395
- --pds-button-gray-second-color-active: var(--black-900);
396
- --pds-button-gray-second-background-focus: var(--black-300);
397
- --pds-button-gray-second-border-focus: var(--black-500);
398
- --pds-button-gray-second-color-focus: var(--black-900);
399
- --pds-button-gray-second-background-disabled: var(--pds-button-gray-second-background);
400
- --pds-button-gray-second-border-disabled: var(--pds-button-gray-second-border);
401
- --pds-button-gray-second-color-disabled: var(--pds-button-gray-second-color);
402
-
403
- /* gray-transparent */
404
- --pds-button-gray-transparent-background: transparent;
405
- --pds-button-gray-transparent-border: var(--black-500);
406
- --pds-button-gray-transparent-color: var(--black-900);
407
- --pds-button-gray-transparent-background-hover: rgba(125, 125, 145, 0.12);
408
- --pds-button-gray-transparent-border-hover: var(--black-500);
409
- --pds-button-gray-transparent-color-hover: var(--black-900);
410
- --pds-button-gray-transparent-background-active: rgba(125, 125, 145, 0.12);
411
- --pds-button-gray-transparent-border-active: var(--black-500);
412
- --pds-button-gray-transparent-color-active: var(--black-900);
413
- --pds-button-gray-transparent-background-focus: rgba(125, 125, 145, 0.12);
414
- --pds-button-gray-transparent-border-focus: var(--black-500);
415
- --pds-button-gray-transparent-color-focus: var(--black-900);
416
- --pds-button-gray-transparent-background-disabled: var(--pds-button-gray-transparent-background);
417
- --pds-button-gray-transparent-border-disabled: var(--pds-button-gray-transparent-border);
418
- --pds-button-gray-transparent-color-disabled: var(--pds-button-gray-transparent-color);
419
-
420
- /* gray-inherit */
421
- --pds-button-gray-inherit-background: transparent;
422
- --pds-button-gray-inherit-border: transparent;
423
- --pds-button-gray-inherit-color: var(--black-900);
424
- --pds-button-gray-inherit-background-hover: rgba(125, 125, 145, 0.12);
425
- --pds-button-gray-inherit-border-hover: transparent;
426
- --pds-button-gray-inherit-color-hover: var(--black-900);
427
- --pds-button-gray-inherit-background-active: rgba(125, 125, 145, 0.12);
428
- --pds-button-gray-inherit-border-active: transparent;
429
- --pds-button-gray-inherit-color-active: var(--black-900);
430
- --pds-button-gray-inherit-background-focus: rgba(125, 125, 145, 0.12);
431
- --pds-button-gray-inherit-border-focus: transparent;
432
- --pds-button-gray-inherit-color-focus: var(--black-900);
433
- --pds-button-gray-inherit-background-disabled: var(--pds-button-gray-inherit-background);
434
- --pds-button-gray-inherit-border-disabled: var(--pds-button-gray-inherit-border);
435
- --pds-button-gray-inherit-color-disabled: var(--pds-button-gray-inherit-color);
326
+ @media (prefers-color-scheme: dark) {
327
+ [data-pds-color-scheme='auto'] {
328
+ --white: var(--pds-color-dark-white);
329
+
330
+ --black-900: var(--pds-color-dark-black-900);
331
+ --black-800: var(--pds-color-dark-black-800);
332
+ --black-700: var(--pds-color-dark-black-700);
333
+ --black-600: var(--pds-color-dark-black-600);
334
+ --black-500: var(--pds-color-dark-black-500);
335
+ --black-400: var(--pds-color-dark-black-400);
336
+ --black-300: var(--pds-color-dark-black-300);
337
+ --black-200: var(--pds-color-dark-black-200);
338
+ --black-100: var(--pds-color-dark-black-100);
339
+ --black-50: var(--pds-color-dark-black-50);
340
+
341
+ --violet-900: var(--pds-color-dark-violet-900);
342
+ --violet-800: var(--pds-color-dark-violet-800);
343
+ --violet-700: var(--pds-color-dark-violet-700);
344
+ --violet-600: var(--pds-color-dark-violet-600);
345
+ --violet-500: var(--pds-color-dark-violet-500);
346
+ --violet-400: var(--pds-color-dark-violet-400);
347
+ --violet-300: var(--pds-color-dark-violet-300);
348
+ --violet-200: var(--pds-color-dark-violet-200);
349
+ --violet-100: var(--pds-color-dark-violet-100);
350
+ --violet-50: var(--pds-color-dark-violet-50);
351
+
352
+ --blue-900: var(--pds-color-dark-blue-900);
353
+ --blue-800: var(--pds-color-dark-blue-800);
354
+ --blue-700: var(--pds-color-dark-blue-700);
355
+ --blue-600: var(--pds-color-dark-blue-600);
356
+ --blue-500: var(--pds-color-dark-blue-500);
357
+ --blue-400: var(--pds-color-dark-blue-400);
358
+ --blue-300: var(--pds-color-dark-blue-300);
359
+ --blue-200: var(--pds-color-dark-blue-200);
360
+ --blue-100: var(--pds-color-dark-blue-100);
361
+ --blue-50: var(--pds-color-dark-blue-50);
362
+
363
+ --green-900: var(--pds-color-dark-green-900);
364
+ --green-800: var(--pds-color-dark-green-800);
365
+ --green-700: var(--pds-color-dark-green-700);
366
+ --green-600: var(--pds-color-dark-green-600);
367
+ --green-500: var(--pds-color-dark-green-500);
368
+ --green-400: var(--pds-color-dark-green-400);
369
+ --green-300: var(--pds-color-dark-green-300);
370
+ --green-200: var(--pds-color-dark-green-200);
371
+ --green-100: var(--pds-color-dark-green-100);
372
+ --green-50: var(--pds-color-dark-green-50);
373
+
374
+ --yellow-900: var(--pds-color-dark-yellow-900);
375
+ --yellow-800: var(--pds-color-dark-yellow-800);
376
+ --yellow-700: var(--pds-color-dark-yellow-700);
377
+ --yellow-600: var(--pds-color-dark-yellow-600);
378
+ --yellow-500: var(--pds-color-dark-yellow-500);
379
+ --yellow-400: var(--pds-color-dark-yellow-400);
380
+ --yellow-300: var(--pds-color-dark-yellow-300);
381
+ --yellow-200: var(--pds-color-dark-yellow-200);
382
+ --yellow-100: var(--pds-color-dark-yellow-100);
383
+ --yellow-50: var(--pds-color-dark-yellow-50);
384
+
385
+ --orange-900: var(--pds-color-dark-orange-900);
386
+ --orange-800: var(--pds-color-dark-orange-800);
387
+ --orange-700: var(--pds-color-dark-orange-700);
388
+ --orange-600: var(--pds-color-dark-orange-600);
389
+ --orange-500: var(--pds-color-dark-orange-500);
390
+ --orange-400: var(--pds-color-dark-orange-400);
391
+ --orange-300: var(--pds-color-dark-orange-300);
392
+ --orange-200: var(--pds-color-dark-orange-200);
393
+ --orange-100: var(--pds-color-dark-orange-100);
394
+ --orange-50: var(--pds-color-dark-orange-50);
395
+
396
+ --red-900: var(--pds-color-dark-red-900);
397
+ --red-800: var(--pds-color-dark-red-800);
398
+ --red-700: var(--pds-color-dark-red-700);
399
+ --red-600: var(--pds-color-dark-red-600);
400
+ --red-500: var(--pds-color-dark-red-500);
401
+ --red-400: var(--pds-color-dark-red-400);
402
+ --red-300: var(--pds-color-dark-red-300);
403
+ --red-200: var(--pds-color-dark-red-200);
404
+ --red-100: var(--pds-color-dark-red-100);
405
+ --red-50: var(--pds-color-dark-red-50);
406
+ }
436
407
  }