@acorex/styles 19.8.0-next.9 → 19.10.0-next.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 (50) hide show
  1. package/icons/fontawesome/_variables.scss +9 -0
  2. package/icons/fontawesome/index.scss +27 -0
  3. package/icons/huge/huge-bulk/_variables.scss +9 -0
  4. package/icons/huge/huge-bulk/index.scss +27 -0
  5. package/icons/huge/huge-duotone/_variables.scss +9 -0
  6. package/icons/huge/huge-duotone/index.scss +27 -0
  7. package/icons/huge/huge-solid-rounded/_variables.scss +9 -0
  8. package/icons/huge/huge-solid-rounded/index.scss +27 -0
  9. package/icons/huge/huge-solid-sharp/_variables.scss +9 -0
  10. package/icons/huge/huge-solid-sharp/index.scss +27 -0
  11. package/icons/huge/huge-solid-standard/_variables.scss +9 -0
  12. package/icons/huge/huge-solid-standard/index.scss +27 -0
  13. package/icons/huge/huge-stroke-rounded/_variables.scss +9 -0
  14. package/icons/huge/huge-stroke-rounded/index.scss +27 -0
  15. package/icons/huge/huge-stroke-sharp/_variables.scss +9 -0
  16. package/icons/huge/huge-stroke-sharp/index.scss +27 -0
  17. package/icons/huge/huge-stroke-standard/_variables.scss +9 -0
  18. package/icons/huge/huge-stroke-standard/index.scss +27 -0
  19. package/icons/huge/huge-twotone/_variables.scss +9 -0
  20. package/icons/huge/huge-twotone/index.scss +27 -0
  21. package/icons/material/_variables.scss +9 -0
  22. package/icons/material/index.scss +27 -0
  23. package/index.css +21 -179
  24. package/index.min.css +1 -1
  25. package/index.scss +0 -1
  26. package/package.json +1 -1
  27. package/src/mixins/_look.scss +4 -4
  28. package/src/shared/_action-item.scss +1 -1
  29. package/src/shared/_actionsheet.scss +1 -1
  30. package/src/shared/_check-box.scss +3 -3
  31. package/src/shared/_drop-down.scss +3 -3
  32. package/src/shared/_editor-container.scss +3 -3
  33. package/src/shared/_general-button.scss +1 -1
  34. package/src/shared/_list.scss +3 -3
  35. package/src/shared/_radio.scss +3 -3
  36. package/src/shared/_table.scss +3 -3
  37. package/src/shared/_utils.scss +3 -3
  38. package/src/utility/index.scss +1 -1
  39. package/tailwind-base.js +73 -56
  40. package/themes/default.css +1 -1
  41. package/themes/default.scss +203 -204
  42. package/themes/test.scss +52 -52
  43. package/src/components/editors/_base.scss +0 -50
  44. package/src/components/editors/index.scss +0 -60
  45. package/src/components/editors/looks/_fill.scss +0 -17
  46. package/src/components/editors/looks/_flat.scss +0 -18
  47. package/src/components/editors/looks/_outline.scss +0 -18
  48. package/src/components/editors/looks/_solid.scss +0 -20
  49. package/src/components/editors/looks/index.scss +0 -4
  50. package/src/components/index.scss +0 -1
package/src/shared/_utils.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  .ax-fieldset {
14
14
  border-radius: var(--ax-sys-border-radius);
15
15
  border-width: 1px;
16
- border-color: rgba(var(--ax-sys-surface-input-border-color));
16
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
17
17
  padding: 0.75rem /* 12px */;
18
18
 
19
19
  legend {
@@ -27,8 +27,8 @@
27
27
  .ax-card {
28
28
  border-radius: var(--ax-sys-border-radius);
29
29
  border-width: 1px;
30
- border-color: rgba(var(--ax-sys-surface-input-border-color));
31
- background-color: rgba(var(--ax-sys-surface-bg-color));
30
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
31
+ background-color: rgba(var(--ax-sys-color-surface));
32
32
  }
33
33
 
34
34
  .ax-drop-zone {
package/src/utility/index.scss CHANGED
@@ -1,4 +1,4 @@
1
1
  .ax-placeholder {
2
- color: rgba(var(--ax-sys-surface-input-placeholder-color));
2
+ color: rgba(var(--ax-sys-color-input-surface-placeholder));
3
3
  font-size: calc(var(--ax-comp-editor-font-size) * 0.875);
4
4
  }
package/tailwind-base.js CHANGED
@@ -18,59 +18,75 @@ const childSelector = plugin(function ({ addVariant }) {
18
18
  });
19
19
 
20
20
  const _onColors = {
21
- 'on-surface-light': 'rgba(var(--ax-sys-on-surface-light-color), <alpha-value>)',
22
- 'on-surface-lowest': 'rgba(var(--ax-sys-on-surface-lowest-color), <alpha-value>)',
23
- 'on-surface-low': 'rgba(var(--ax-sys-on-surface-low-color), <alpha-value>)',
24
- 'on-surface': 'rgba(var(--ax-sys-on-surface-color), <alpha-value>)',
25
- 'on-surface-high': 'rgba(var(--ax-sys-on-surface-high-color), <alpha-value>)',
26
- 'on-surface-highest': 'rgba(var(--ax-sys-on-surface-highest-color), <alpha-value>)',
27
- 'on-surface-dark': 'rgba(var(--ax-sys-on-surface-dark-color), <alpha-value>)',
28
- }
21
+ 'on-surface-light': 'rgba(var(--ax-sys-color-on-surface-light), <alpha-value>)',
22
+ 'on-surface-lowest': 'rgba(var(--ax-sys-color-on-surface-lowest), <alpha-value>)',
23
+ 'on-surface-low': 'rgba(var(--ax-sys-color-on-surface-low), <alpha-value>)',
24
+ 'on-surface': 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
25
+ 'on-surface-high': 'rgba(var(--ax-sys-color-on-surface-high), <alpha-value>)',
26
+ 'on-surface-highest': 'rgba(var(--ax-sys-color-on-surface-highest), <alpha-value>)',
27
+ 'on-surface-dark': 'rgba(var(--ax-sys-color-on-surface-dark), <alpha-value>)',
28
+ };
29
29
 
30
30
  const _bgColors = {
31
31
  default: 'rgba(var( --ax-sys-body-bg-color), <alpha-value>)',
32
- 'surface-light': 'rgba(var(--ax-sys-surface-light-bg-color), <alpha-value>)',
33
- 'surface-lowest': 'rgba(var(--ax-sys-surface-lowest-bg-color), <alpha-value>)',
34
- 'surface-low': 'rgba(var(--ax-sys-surface-low-bg-color), <alpha-value>)',
35
- surface: 'rgba(var(--ax-sys-surface-bg-color), <alpha-value>)',
36
- 'surface-high': 'rgba(var(--ax-sys-surface-high-bg-color), <alpha-value>)',
37
- 'surface-highest': 'rgba(var(--ax-sys-surface-highest-bg-color), <alpha-value>)',
38
- 'surface-dark': 'rgba(var(--ax-sys-surface-dark-bg-color), <alpha-value>)',
39
- 'surface-input': 'rgba(var(--ax-sys-surface-input-bg-color), <alpha-value>)',
40
- ..._onColors
41
-
42
-
32
+ 'surface-light': 'rgba(var(--ax-sys-color-surface-light), <alpha-value>)',
33
+ 'surface-lowest': 'rgba(var(--ax-sys-color-surface-lowest), <alpha-value>)',
34
+ 'surface-low': 'rgba(var(--ax-sys-color-surface-low), <alpha-value>)',
35
+ surface: 'rgba(var(--ax-sys-color-surface), <alpha-value>)',
36
+ 'surface-high': 'rgba(var(--ax-sys-color-surface-high), <alpha-value>)',
37
+ 'surface-highest': 'rgba(var(--ax-sys-color-surface-highest), <alpha-value>)',
38
+ 'surface-dark': 'rgba(var(--ax-sys-color-surface-dark), <alpha-value>)',
39
+ 'surface-input': 'rgba(var(--ax-sys-color-input-surface), <alpha-value>)',
40
+ ..._onColors,
43
41
  };
44
42
 
45
43
  const _textColors = {
46
44
  DEFAULT: withOpacityValue('--ax-sys-body-text-color'),
47
45
  default: withOpacityValue('--ax-sys-body-text-color'),
48
- 'surface-light': 'rgba(var(--ax-sys-on-surface-light-color), <alpha-value>)',
49
- 'surface-lowest': 'rgba(var(--ax-sys-on-surface-lowest-color), <alpha-value>)',
50
- 'surface-low': 'rgba(var(--ax-sys-on-surface-low-color), <alpha-value>)',
51
- surface: 'rgba(var(--ax-sys-on-surface-color), <alpha-value>)',
52
- 'surface-high': 'rgba(var(--ax-sys-on-surface-high-color), <alpha-value>)',
53
- 'surface-dark': 'rgba(var(--ax-sys-on-surface-dark-color), <alpha-value>)',
54
- 'surface-highest': 'rgba(var(--ax-sys-on-surface-highest-color), <alpha-value>)',
55
-
46
+ 'surface-light': 'rgba(var(--ax-sys-color-on-surface-light), <alpha-value>)',
47
+ 'surface-lowest': 'rgba(var(--ax-sys-color-on-surface-lowest), <alpha-value>)',
48
+ 'surface-low': 'rgba(var(--ax-sys-color-on-surface-low), <alpha-value>)',
49
+ surface: 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
50
+ 'surface-high': 'rgba(var(--ax-sys-color-on-surface-high), <alpha-value>)',
51
+ 'surface-dark': 'rgba(var(--ax-sys-color-on-surface-dark), <alpha-value>)',
52
+ 'surface-highest': 'rgba(var(--ax-sys-color-on-surface-highest), <alpha-value>)',
56
53
  };
57
54
 
58
55
  const _borderColors = {
59
- 'surface-light': 'rgba(var(--ax-sys-surface-light-border-color), <alpha-value>)',
60
- 'surface-lowest': 'rgba(var(--ax-sys-surface-lowest-border-color), <alpha-value>)',
61
- 'surface-low': 'rgba(var(--ax-sys-surface-low-border-color), <alpha-value>)',
62
- surface: 'rgba(var(--ax-sys-surface-border-color), <alpha-value>)',
63
- 'surface-high': 'rgba(var(--ax-sys-surface-high-border-color), <alpha-value>)',
64
- 'surface-dark': 'rgba(var(--ax-sys-surface-dark-border-color), <alpha-value>)',
65
- 'surface-highest': 'rgba(var(--ax-sys-surface-highest-border-color), <alpha-value>)',
56
+ 'surface-light': 'rgba(var(--ax-sys-color-border-surface-light), <alpha-value>)',
57
+ 'surface-lowest': 'rgba(var(--ax-sys-color-border-surface-lowest), <alpha-value>)',
58
+ 'surface-low': 'rgba(var(--ax-sys-color-border-surface-low), <alpha-value>)',
59
+ surface: 'rgba(var(--ax-sys-color-border-surface), <alpha-value>)',
60
+ 'surface-high': 'rgba(var(--ax-sys-color-border-surface-high), <alpha-value>)',
61
+ 'surface-dark': 'rgba(var(--ax-sys-color-border-surface-dark), <alpha-value>)',
62
+ 'surface-highest': 'rgba(var(--ax-sys-color-border-surface-highest), <alpha-value>)',
63
+ };
66
64
 
65
+ const _onColor = {
66
+ on: {
67
+ primary: 'rgba(var(--ax-sys-color-on-primary), <alpha-value>)',
68
+ secondary: 'rgba(var(--ax-sys-color-on-secondary), <alpha-value>)',
69
+ success: 'rgba(var(--ax-sys-color-on-success), <alpha-value>)',
70
+ warning: 'rgba(var(--ax-sys-color-on-warning), <alpha-value>)',
71
+ danger: 'rgba(var(--ax-sys-color-on-danger), <alpha-value>)',
72
+ ghost: 'rgba(var(--ax-sys-color-on-ghost), <alpha-value>)',
73
+ },
74
+ };
75
+
76
+ const _onContrastColor = {
77
+ 'on-contrast': {
78
+ primary: 'rgba(var(--ax-sys-color-on-contrast-primary), <alpha-value>)',
79
+ secondary: 'rgba(var(--ax-sys-color-on-contrast-secondary), <alpha-value>)',
80
+ success: 'rgba(var(--ax-sys-color-on-contrast-success), <alpha-value>)',
81
+ warning: 'rgba(var(--ax-sys-color-on-contrast-warning), <alpha-value>)',
82
+ danger: 'rgba(var(--ax-sys-color-on-contrast-danger), <alpha-value>)',
83
+ ghost: 'rgba(var(--ax-sys-color-on-contrast-ghost), <alpha-value>)',
84
+ },
67
85
  };
68
86
 
69
87
  const createPalete = function (colorName) {
70
88
  return {
71
- DEFAULT: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
72
- text: `rgba(var(--ax-sys-color-on-${colorName}), <alpha-value>)`,
73
- 'contrast-text': `rgba(var(--ax-sys-color-on-contrast-${colorName}), <alpha-value>)`,
89
+ DEFAULT: 'rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)',
74
90
  50: `rgba(var(--ax-sys-color-${colorName}-50), <alpha-value>)`,
75
91
  100: `rgba(var(--ax-sys-color-${colorName}-100), <alpha-value>)`,
76
92
  200: `rgba(var(--ax-sys-color-${colorName}-200), <alpha-value>)`,
@@ -98,6 +114,8 @@ module.exports = withAnimations({
98
114
  danger: createPalete('danger'),
99
115
  warning: createPalete('warning'),
100
116
  ghost: createPalete('ghost'),
117
+ ..._onColor,
118
+ ..._onContrastColor,
101
119
  },
102
120
  textColor: {
103
121
  ..._textColors,
@@ -105,11 +123,10 @@ module.exports = withAnimations({
105
123
  backgroundColor: {
106
124
  ..._bgColors,
107
125
  },
108
-
109
126
  borderColor: {
110
127
  DEFAULT: 'rgba(var(--ax-sys-border-color), <alpha-value>)',
111
128
  default: 'rgba(var(--ax-sys-border-color), <alpha-value>)',
112
- input: 'rgba(var(--ax-sys-surface-input-border-color), <alpha-value>)',
129
+ input: 'rgba(var(--ax-sys-color-input-surface-border), <alpha-value>)',
113
130
  'border-default': 'rgba(var(--ax-sys-border-color), <alpha-value>)',
114
131
  ..._borderColors,
115
132
  },
@@ -157,35 +174,35 @@ module.exports = withAnimations({
157
174
  plugin(function ({ addUtilities }) {
158
175
  const acorexClasses = {
159
176
  '.h1': {
160
- 'font-size': '3rem',
161
- 'font-weight': '700',
162
- 'line-height': '3rem',
163
- },
164
- '.h2': {
165
177
  'font-size': '2.5rem',
166
- 'font-weight': '700',
178
+ 'font-weight': '500',
167
179
  'line-height': '2.5rem',
168
180
  },
181
+ '.h2': {
182
+ 'font-size': '2rem',
183
+ 'font-weight': '500',
184
+ 'line-height': '2rem',
185
+ },
169
186
  '.h3': {
170
- 'font-size': '1.875rem',
171
- 'font-weight': '700',
172
- 'line-height': '1.875rem',
187
+ 'font-size': '1.75rem',
188
+ 'font-weight': '500',
189
+ 'line-height': '1.75rem',
173
190
  },
174
191
  '.h4': {
175
192
  'font-size': '1.5rem',
176
- 'font-weight': '700',
193
+ 'font-weight': '500',
177
194
  'line-height': '1.5rem',
178
195
  },
179
196
  '.h5': {
180
- 'font-size': '1.25rem',
181
- 'font-weight': '700',
182
- 'line-height': '1.25rem',
183
- },
184
- '.h6': {
185
197
  'font-size': '1.125rem',
186
- 'font-weight': '700',
198
+ 'font-weight': '500',
187
199
  'line-height': '1.125rem',
188
200
  },
201
+ '.h6': {
202
+ 'font-size': '1rem',
203
+ 'font-weight': '500',
204
+ 'line-height': '1rem',
205
+ },
189
206
  '.heading': {
190
207
  width: '100%',
191
208
  'border-bottom': '1px solid',
@@ -194,7 +211,7 @@ module.exports = withAnimations({
194
211
  margin: '1rem auto',
195
212
  },
196
213
  '.heading > span': {
197
- background: 'rgba(var(--ax-sys-surface-bg-color))',
214
+ background: 'rgba(var(--ax-sys-color-surface))',
198
215
  padding: '0 0.75rem',
199
216
  },
200
217
  '.heading-start': {
package/themes/default.css CHANGED
@@ -1 +1 @@
1
- :root,.ax-light{--ax-sys-body-font-size: 1rem;--ax-sys-size-base: 2.5rem;--ax-sys-transition-duration: 150ms;--ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);--ax-sys-border-radius: 0.5rem;--ax-sys-border-color: 233, 234, 235;--ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);--ax-sys-body-text-color: 22, 22, 22;--ax-sys-surface-light-bg-color: 255, 255, 255;--ax-sys-on-surface-light-color: 0, 0, 0;--ax-sys-surface-light-border-color: 0, 0, 0;--ax-sys-surface-lowest-bg-color: 255, 255, 255;--ax-sys-on-surface-lowest-color: 40, 40, 40;--ax-sys-surface-lowest-border-color: 233, 236, 239;--ax-sys-surface-low-bg-color: 248, 249, 250;--ax-sys-on-surface-low-color: 40, 40, 40;--ax-sys-surface-low-border-color: 233, 236, 239;--ax-sys-surface-bg-color: 239, 241, 243;--ax-sys-on-surface-color: 30, 30, 30;--ax-sys-surface-border-color: 232, 235, 238;--ax-sys-surface-high-bg-color: 234, 237, 239;--ax-sys-on-surface-high-color: 20, 20, 20;--ax-sys-surface-high-border-color: 228, 231, 234;--ax-sys-surface-highest-bg-color: 230, 233, 236;--ax-sys-on-surface-highest-color: 10, 10, 10;--ax-sys-surface-highest-border-color: 225, 229, 233;--ax-sys-surface-input-bg-color: 255, 255, 255;--ax-sys-surface-input-text-color: 30, 30, 30;--ax-sys-surface-input-placeholder-color: 180, 180, 180;--ax-sys-surface-input-border-color: 220, 220, 220;--ax-sys-surface-dark-bg-color: 0, 0, 0;--ax-sys-on-surface-dark-color: 255, 255, 255;--ax-sys-surface-dark-border-color: 255, 255, 255;--ax-sys-color-on-primary: 255, 255, 255;--ax-sys-color-on-contrast-primary: 11, 30, 71;--ax-sys-color-primary-50: 239, 246, 255;--ax-sys-color-primary-100: 219, 234, 254;--ax-sys-color-primary-200: 191, 219, 254;--ax-sys-color-primary-300: 147, 197, 253;--ax-sys-color-primary-400: 96, 165, 250;--ax-sys-color-primary-500: 59, 130, 246;--ax-sys-color-primary-600: 37, 99, 235;--ax-sys-color-primary-700: 29, 78, 216;--ax-sys-color-primary-800: 30, 64, 175;--ax-sys-color-primary-900: 30, 58, 138;--ax-sys-color-primary-950: 23, 37, 84;--ax-sys-color-on-secondary: 255, 255, 255;--ax-sys-color-on-contrast-secondary: 9, 9, 11;--ax-sys-color-secondary-50: 249, 250, 251;--ax-sys-color-secondary-100: 243, 244, 246;--ax-sys-color-secondary-200: 229, 231, 235;--ax-sys-color-secondary-300: 209, 213, 219;--ax-sys-color-secondary-400: 156, 163, 175;--ax-sys-color-secondary-500: 107, 114, 128;--ax-sys-color-secondary-600: 75, 85, 99;--ax-sys-color-secondary-700: 55, 65, 81;--ax-sys-color-secondary-800: 31, 41, 55;--ax-sys-color-secondary-900: 24, 24, 27;--ax-sys-color-secondary-950: 9, 9, 11;--ax-sys-color-on-success: 255, 255, 255;--ax-sys-color-on-contrast-success: 5, 46, 22;--ax-sys-color-success-50: 240, 253, 244;--ax-sys-color-success-100: 220, 252, 231;--ax-sys-color-success-200: 187, 247, 208;--ax-sys-color-success-300: 134, 239, 172;--ax-sys-color-success-400: 74, 222, 128;--ax-sys-color-success-500: 34, 197, 94;--ax-sys-color-success-600: 22, 163, 74;--ax-sys-color-success-700: 21, 128, 61;--ax-sys-color-success-800: 22, 101, 52;--ax-sys-color-success-900: 20, 83, 45;--ax-sys-color-success-950: 5, 46, 22;--ax-sys-color-on-warning: 255, 255, 255;--ax-sys-color-on-contrast-warning: 69, 26, 3;--ax-sys-color-warning-50: 255, 251, 235;--ax-sys-color-warning-100: 254, 243, 199;--ax-sys-color-warning-200: 253, 230, 138;--ax-sys-color-warning-300: 252, 211, 77;--ax-sys-color-warning-400: 251, 191, 36;--ax-sys-color-warning-500: 245, 158, 11;--ax-sys-color-warning-600: 217, 119, 6;--ax-sys-color-warning-700: 180, 83, 9;--ax-sys-color-warning-800: 146, 64, 14;--ax-sys-color-warning-900: 120, 53, 15;--ax-sys-color-warning-950: 69, 26, 3;--ax-sys-color-on-danger: 255, 255, 255;--ax-sys-color-on-contrast-danger: 76, 5, 25;--ax-sys-color-danger-50: 255, 241, 242;--ax-sys-color-danger-100: 255, 228, 230;--ax-sys-color-danger-200: 254, 205, 211;--ax-sys-color-danger-300: 253, 164, 175;--ax-sys-color-danger-400: 251, 113, 133;--ax-sys-color-danger-500: 244, 63, 94;--ax-sys-color-danger-600: 225, 29, 72;--ax-sys-color-danger-700: 190, 18, 60;--ax-sys-color-danger-800: 159, 18, 57;--ax-sys-color-danger-900: 136, 19, 55;--ax-sys-color-danger-950: 76, 5, 25;--ax-sys-color-on-ghost: 255, 255, 255;--ax-sys-color-on-contrast-ghost: 24, 24, 27;--ax-sys-color-ghost-50: 255, 255, 255;--ax-sys-color-ghost-100: 244, 244, 245;--ax-sys-color-ghost-200: 228, 228, 231;--ax-sys-color-ghost-300: 212, 212, 216;--ax-sys-color-ghost-400: 161, 161, 170;--ax-sys-color-ghost-500: 113, 113, 122;--ax-sys-color-ghost-600: 82, 82, 91;--ax-sys-color-ghost-700: 63, 63, 70;--ax-sys-color-ghost-800: 39, 39, 42;--ax-sys-color-ghost-900: 24, 24, 27;--ax-sys-color-ghost-950: 9, 9, 11}.ax-dark{--ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);--ax-sys-body-text-color: 255, 255, 255;--ax-sys-border-color: 34, 38, 47;--ax-sys-surface-lowest-bg-color: 15, 15, 15;--ax-sys-on-surface-lowest-color: 220, 220, 220;--ax-sys-surface-lowest-border-color: 20, 20, 20;--ax-sys-surface-low-bg-color: 20, 20, 20;--ax-sys-on-surface-low-color: 230, 230, 230;--ax-sys-surface-low-border-color: 25, 25, 25;--ax-sys-surface-bg-color: 25, 25, 25;--ax-sys-on-surface-color: 240, 240, 240;--ax-sys-surface-border-color: 34, 34, 34;--ax-sys-surface-high-bg-color: 29, 29, 29;--ax-sys-on-surface-high-color: 250, 250, 250;--ax-sys-surface-high-border-color: 43, 43, 43;--ax-sys-surface-highest-bg-color: 34, 34, 34;--ax-sys-on-surface-highest-color: 255, 255, 255;--ax-sys-surface-highest-border-color: 52, 52, 52;--ax-sys-surface-input-bg-color: var(--ax-sys-surface-lowest-bg-color);--ax-sys-surface-input-text-color: var(--ax-sys-on-surface-lowest-color);--ax-sys-surface-input-placeholder-color: 100, 100, 100;--ax-sys-surface-input-border-color: var(--ax-sys-surface-border-color);--ax-sys-color-on-primary: 11, 30, 71;--ax-sys-color-on-contrast-primary: 57, 62, 75;--ax-sys-color-primary-50: 252, 253, 255;--ax-sys-color-primary-100: 249, 250, 254;--ax-sys-color-primary-200: 236, 241, 253;--ax-sys-color-primary-300: 224, 232, 252;--ax-sys-color-primary-400: 211, 222, 251;--ax-sys-color-primary-500: 192, 208, 249;--ax-sys-color-primary-600: 173, 187, 224;--ax-sys-color-primary-700: 134, 146, 174;--ax-sys-color-primary-800: 96, 104, 125;--ax-sys-color-primary-900: 58, 62, 75;--ax-sys-color-primary-950: 19, 21, 25;--ax-sys-color-on-secondary: 58, 62, 69;--ax-sys-color-on-contrast-secondary: 70, 74, 83;--ax-sys-color-secondary-50: 255, 255, 255;--ax-sys-color-secondary-100: 241, 242, 243;--ax-sys-color-secondary-200: 227, 229, 232;--ax-sys-color-secondary-300: 213, 216, 220;--ax-sys-color-secondary-400: 199, 202, 209;--ax-sys-color-secondary-500: 172, 176, 185;--ax-sys-color-secondary-600: 144, 150, 162;--ax-sys-color-secondary-700: 116, 124, 139;--ax-sys-color-secondary-800: 93, 99, 111;--ax-sys-color-secondary-900: 70, 74, 83;--ax-sys-color-secondary-950: 58, 62, 69;--ax-sys-color-on-success: 19, 109, 52;--ax-sys-color-on-contrast-success: 23, 130, 62;--ax-sys-color-success-50: 255, 255, 255;--ax-sys-color-success-100: 233, 251, 240;--ax-sys-color-success-200: 212, 247, 225;--ax-sys-color-success-300: 190, 244, 210;--ax-sys-color-success-400: 168, 240, 195;--ax-sys-color-success-500: 125, 232, 164;--ax-sys-color-success-600: 81, 225, 134;--ax-sys-color-success-700: 38, 217, 104;--ax-sys-color-success-800: 30, 174, 83;--ax-sys-color-success-900: 23, 130, 62;--ax-sys-color-success-950: 19, 109, 52;--ax-sys-color-on-warning: 122, 79, 5;--ax-sys-color-on-contrast-warning: 147, 95, 6;--ax-sys-color-warning-50: 255, 255, 255;--ax-sys-color-warning-100: 254, 245, 231;--ax-sys-color-warning-200: 253, 236, 206;--ax-sys-color-warning-300: 252, 226, 182;--ax-sys-color-warning-400: 251, 216, 157;--ax-sys-color-warning-500: 249, 197, 108;--ax-sys-color-warning-600: 247, 177, 59;--ax-sys-color-warning-700: 245, 158, 10;--ax-sys-color-warning-800: 196, 126, 8;--ax-sys-color-warning-900: 147, 95, 6;--ax-sys-color-warning-950: 122, 79, 5;--ax-sys-color-on-danger: 121, 7, 26;--ax-sys-color-on-contrast-danger: 145, 8, 32;--ax-sys-color-danger-50: 255, 255, 255;--ax-sys-color-danger-100: 254, 231, 235;--ax-sys-color-danger-200: 252, 207, 215;--ax-sys-color-danger-300: 251, 183, 194;--ax-sys-color-danger-400: 249, 159, 174;--ax-sys-color-danger-500: 247, 110, 134;--ax-sys-color-danger-600: 244, 62, 93;--ax-sys-color-danger-700: 241, 14, 53;--ax-sys-color-danger-800: 193, 11, 42;--ax-sys-color-danger-900: 145, 8, 32;--ax-sys-color-danger-950: 121, 7, 26;--ax-sys-color-on-ghost: 24, 24, 27;--ax-sys-color-on-contrast-ghost: 244, 244, 245;--ax-sys-color-ghost-50: 9, 9, 11;--ax-sys-color-ghost-100: 24, 24, 27;--ax-sys-color-ghost-200: 39, 39, 42;--ax-sys-color-ghost-300: 63, 63, 70;--ax-sys-color-ghost-400: 82, 82, 91;--ax-sys-color-ghost-500: 113, 113, 122;--ax-sys-color-ghost-600: 161, 161, 170;--ax-sys-color-ghost-700: 212, 212, 216;--ax-sys-color-ghost-800: 228, 228, 231;--ax-sys-color-ghost-900: 244, 244, 245;--ax-sys-color-ghost-950: 250, 250, 250}
1
+ :root,.ax-light{--ax-sys-body-font-size: 1rem;--ax-sys-size-base: 2.5rem;--ax-sys-transition-duration: 150ms;--ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);--ax-sys-border-radius: 0.5rem;--ax-sys-border-color: 233, 234, 235;--ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);--ax-sys-body-text-color: 22, 22, 22;--ax-sys-color-surface-light: 255, 255, 255;--ax-sys-color-on-surface-light: 0, 0, 0;--ax-sys-color-border-surface-light: 0, 0, 0;--ax-sys-color-surface-lowest: 255, 255, 255;--ax-sys-color-on-surface-lowest: 40, 40, 40;--ax-sys-color-border-surface-lowest: 233, 236, 239;--ax-sys-color-surface-low: 248, 249, 250;--ax-sys-color-on-surface-low: 40, 40, 40;--ax-sys-color-border-surface-low: 233, 236, 239;--ax-sys-color-surface: 239, 241, 243;--ax-sys-color-on-surface: 30, 30, 30;--ax-sys-color-border-surface: 232, 235, 238;--ax-sys-color-surface-high: 234, 237, 239;--ax-sys-color-on-surface-high: 20, 20, 20;--ax-sys-color-border-surface-high: 228, 231, 234;--ax-sys-color-surface-highest: 230, 233, 236;--ax-sys-color-on-surface-highest: 10, 10, 10;--ax-sys-color-border-surface-highest: 225, 229, 233;--ax-sys-color-surface-dark: 0, 0, 0;--ax-sys-color-on-surface-dark: 255, 255, 255;--ax-sys-color-border-surface-dark: 255, 255, 255;--ax-sys-color-input-surface: 255, 255, 255;--ax-sys-color-input-surface-text: 30, 30, 30;--ax-sys-color-input-surface-placeholder: 180, 180, 180;--ax-sys-color-input-surface-border: 220, 220, 220;--ax-sys-color-primary-50: 227, 244, 255;--ax-sys-color-primary-100: 207, 231, 255;--ax-sys-color-primary-200: 167, 207, 255;--ax-sys-color-primary-300: 126, 181, 255;--ax-sys-color-primary-400: 81, 154, 255;--ax-sys-color-primary-500: 43, 127, 255;--ax-sys-color-primary-600: 0, 97, 222;--ax-sys-color-primary-700: 0, 66, 190;--ax-sys-color-primary-800: 0, 31, 158;--ax-sys-color-primary-900: 0, 0, 117;--ax-sys-color-primary-950: 0, 0, 89;--ax-sys-color-on-primary: 255, 255, 255;--ax-sys-color-on-contrast-primary: 0, 0, 89;--ax-sys-color-secondary-50: 231, 240, 255;--ax-sys-color-secondary-100: 216, 226, 244;--ax-sys-color-secondary-200: 188, 196, 214;--ax-sys-color-secondary-300: 159, 168, 185;--ax-sys-color-secondary-400: 132, 141, 157;--ax-sys-color-secondary-500: 106, 114, 130;--ax-sys-color-secondary-600: 83, 91, 107;--ax-sys-color-secondary-700: 62, 69, 84;--ax-sys-color-secondary-800: 42, 48, 62;--ax-sys-color-secondary-900: 23, 29, 42;--ax-sys-color-secondary-950: 14, 20, 32;--ax-sys-color-on-secondary: 255, 255, 255;--ax-sys-color-on-contrast-secondary: 14, 20, 32;--ax-sys-color-success-50: 199, 255, 228;--ax-sys-color-success-100: 152, 255, 206;--ax-sys-color-success-200: 102, 247, 180;--ax-sys-color-success-300: 78, 227, 162;--ax-sys-color-success-400: 51, 207, 143;--ax-sys-color-success-500: 1, 188, 125;--ax-sys-color-success-600: 0, 153, 93;--ax-sys-color-success-700: 0, 116, 67;--ax-sys-color-success-800: 0, 80, 43;--ax-sys-color-success-900: 0, 47, 21;--ax-sys-color-success-950: 0, 32, 11;--ax-sys-color-on-success: 255, 255, 255;--ax-sys-color-on-contrast-success: 0, 32, 11;--ax-sys-color-warning-50: 255, 242, 216;--ax-sys-color-warning-100: 255, 233, 198;--ax-sys-color-warning-200: 255, 213, 158;--ax-sys-color-warning-300: 255, 192, 113;--ax-sys-color-warning-400: 255, 170, 50;--ax-sys-color-warning-500: 253, 154, 1;--ax-sys-color-warning-600: 208, 116, 0;--ax-sys-color-warning-700: 157, 85, 0;--ax-sys-color-warning-800: 109, 55, 0;--ax-sys-color-warning-900: 65, 28, 0;--ax-sys-color-warning-950: 45, 16, 0;--ax-sys-color-on-warning: 255, 255, 255;--ax-sys-color-on-contrast-warning: 45, 16, 0;--ax-sys-color-danger-50: 255, 233, 233;--ax-sys-color-danger-100: 255, 216, 216;--ax-sys-color-danger-200: 255, 181, 181;--ax-sys-color-danger-300: 255, 142, 152;--ax-sys-color-danger-400: 255, 94, 117;--ax-sys-color-danger-500: 255, 32, 86;--ax-sys-color-danger-600: 215, 0, 60;--ax-sys-color-danger-700: 165, 0, 43;--ax-sys-color-danger-800: 119, 0, 27;--ax-sys-color-danger-900: 75, 0, 11;--ax-sys-color-danger-950: 54, 0, 5;--ax-sys-color-on-danger: 255, 255, 255;--ax-sys-color-on-contrast-danger: 54, 0, 5;--ax-sys-color-ghost-50: 255, 255, 255;--ax-sys-color-ghost-100: 244, 244, 245;--ax-sys-color-ghost-200: 228, 228, 231;--ax-sys-color-ghost-300: 212, 212, 216;--ax-sys-color-ghost-400: 159, 159, 169;--ax-sys-color-ghost-500: 113, 113, 123;--ax-sys-color-ghost-600: 82, 82, 92;--ax-sys-color-ghost-700: 63, 63, 70;--ax-sys-color-ghost-800: 39, 39, 42;--ax-sys-color-ghost-900: 24, 24, 27;--ax-sys-color-ghost-950: 9, 9, 11;--ax-sys-color-on-ghost: 255, 255, 255;--ax-sys-color-on-contrast-ghost: 24, 24, 27}.ax-dark{--ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);--ax-sys-body-text-color: 255, 255, 255;--ax-sys-border-color: 34, 38, 47;--ax-sys-color-surface-lowest: 15, 15, 15;--ax-sys-color-on-surface-lowest: 220, 220, 220;--ax-sys-color-border-surface-lowest: 20, 20, 20;--ax-sys-color-surface-low: 20, 20, 20;--ax-sys-color-on-surface-low: 230, 230, 230;--ax-sys-color-border-surface-low: 25, 25, 25;--ax-sys-color-surface: 25, 25, 25;--ax-sys-color-on-surface: 240, 240, 240;--ax-sys-color-border-surface: 34, 34, 34;--ax-sys-color-surface-high: 29, 29, 29;--ax-sys-color-on-surface-high: 250, 250, 250;--ax-sys-color-border-surface-high: 43, 43, 43;--ax-sys-color-surface-highest: 34, 34, 34;--ax-sys-color-on-surface-highest: 255, 255, 255;--ax-sys-color-border-surface-highest: 52, 52, 52;--ax-sys-color-input-surface: var(--ax-sys-color-surface-lowest);--ax-sys-color-input-surface-text: var(--ax-sys-color-on-surface-lowest);--ax-sys-color-input-surface-placeholder: 100, 100, 100;--ax-sys-color-input-surface-border: var(--ax-sys-color-border-surface);--ax-sys-color-primary-50: 233, 247, 255;--ax-sys-color-primary-100: 219, 238, 255;--ax-sys-color-primary-200: 190, 221, 255;--ax-sys-color-primary-300: 161, 203, 255;--ax-sys-color-primary-400: 132, 185, 255;--ax-sys-color-primary-500: 101, 166, 255;--ax-sys-color-primary-600: 67, 146, 255;--ax-sys-color-primary-700: 43, 127, 255;--ax-sys-color-primary-800: 25, 112, 239;--ax-sys-color-primary-900: 0, 98, 223;--ax-sys-color-primary-950: 0, 90, 215;--ax-sys-color-on-primary: 0, 0, 91;--ax-sys-color-on-contrast-primary: 0, 12, 146;--ax-sys-color-secondary-50: 240, 249, 255;--ax-sys-color-secondary-100: 233, 242, 255;--ax-sys-color-secondary-200: 219, 228, 243;--ax-sys-color-secondary-300: 206, 214, 229;--ax-sys-color-secondary-400: 192, 201, 215;--ax-sys-color-secondary-500: 179, 187, 202;--ax-sys-color-secondary-600: 166, 174, 188;--ax-sys-color-secondary-700: 153, 161, 175;--ax-sys-color-secondary-800: 135, 143, 157;--ax-sys-color-secondary-900: 118, 126, 139;--ax-sys-color-secondary-950: 110, 117, 131;--ax-sys-color-on-secondary: 16, 22, 32;--ax-sys-color-on-contrast-secondary: 40, 46, 57;--ax-sys-color-success-50: 210, 255, 233;--ax-sys-color-success-100: 180, 255, 219;--ax-sys-color-success-200: 115, 255, 191;--ax-sys-color-success-300: 99, 244, 178;--ax-sys-color-success-400: 82, 230, 164;--ax-sys-color-success-500: 63, 216, 151;--ax-sys-color-success-600: 41, 202, 138;--ax-sys-color-success-700: 1, 188, 125;--ax-sys-color-success-800: 0, 170, 108;--ax-sys-color-success-900: 0, 151, 91;--ax-sys-color-success-950: 0, 141, 85;--ax-sys-color-on-success: 0, 31, 10;--ax-sys-color-on-contrast-success: 0, 59, 29;--ax-sys-color-warning-50: 255, 245, 222;--ax-sys-color-warning-100: 255, 238, 208;--ax-sys-color-warning-200: 255, 224, 181;--ax-sys-color-warning-300: 255, 210, 152;--ax-sys-color-warning-400: 255, 195, 120;--ax-sys-color-warning-500: 255, 180, 82;--ax-sys-color-warning-600: 255, 165, 33;--ax-sys-color-warning-700: 253, 154, 1;--ax-sys-color-warning-800: 230, 133, 0;--ax-sys-color-warning-900: 203, 114, 0;--ax-sys-color-warning-950: 190, 105, 0;--ax-sys-color-on-warning: 41, 13, 0;--ax-sys-color-on-contrast-warning: 74, 34, 0;--ax-sys-color-danger-50: 255, 240, 242;--ax-sys-color-danger-100: 255, 230, 233;--ax-sys-color-danger-200: 255, 210, 215;--ax-sys-color-danger-300: 255, 189, 196;--ax-sys-color-danger-400: 255, 167, 178;--ax-sys-color-danger-500: 255, 144, 159;--ax-sys-color-danger-600: 255, 117, 140;--ax-sys-color-danger-700: 255, 99, 126;--ax-sys-color-danger-800: 234, 80, 109;--ax-sys-color-danger-900: 213, 59, 92;--ax-sys-color-danger-950: 203, 48, 84;--ax-sys-color-on-danger: 54, 0, 9;--ax-sys-color-on-contrast-danger: 97, 0, 25;--ax-sys-color-ghost-50: 9, 9, 11;--ax-sys-color-ghost-100: 24, 24, 27;--ax-sys-color-ghost-200: 39, 39, 42;--ax-sys-color-ghost-300: 63, 63, 70;--ax-sys-color-ghost-400: 82, 82, 92;--ax-sys-color-ghost-500: 113, 113, 123;--ax-sys-color-ghost-600: 159, 159, 169;--ax-sys-color-ghost-700: 212, 212, 216;--ax-sys-color-ghost-800: 228, 228, 231;--ax-sys-color-ghost-900: 244, 244, 245;--ax-sys-color-ghost-950: 250, 250, 250;--ax-sys-color-on-ghost: 24, 24, 27;--ax-sys-color-on-contrast-ghost: 244, 244, 245}