@acorex/styles 19.9.0 → 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 (35) hide show
  1. package/icons/fontawesome/index.scss +10 -11
  2. package/icons/huge/huge-bulk/index.scss +4 -4
  3. package/icons/huge/huge-duotone/index.scss +4 -4
  4. package/icons/huge/huge-solid-sharp/index.scss +4 -4
  5. package/icons/huge/huge-solid-standard/index.scss +4 -4
  6. package/icons/huge/huge-stroke-rounded/index.scss +4 -4
  7. package/icons/huge/huge-stroke-sharp/index.scss +4 -4
  8. package/icons/huge/huge-stroke-standard/index.scss +4 -4
  9. package/icons/huge/huge-twotone/index.scss +4 -4
  10. package/icons/material/index.scss +4 -5
  11. package/index.css +80 -1935
  12. package/index.min.css +1 -1
  13. package/package.json +1 -1
  14. package/src/base/index.scss +2 -4
  15. package/src/mixins/_look.scss +20 -35
  16. package/src/shared/_action-item.scss +3 -3
  17. package/src/shared/_actionsheet.scss +7 -6
  18. package/src/shared/_check-box.scss +8 -14
  19. package/src/shared/_drop-down.scss +7 -16
  20. package/src/shared/_editor-container.scss +35 -75
  21. package/src/shared/_general-button.scss +11 -12
  22. package/src/shared/_inputs.scss +0 -16
  23. package/src/shared/_list.scss +15 -41
  24. package/src/shared/_radio.scss +8 -14
  25. package/src/shared/_ripple.scss +13 -0
  26. package/src/shared/_table.scss +9 -30
  27. package/src/shared/_utils.scss +10 -16
  28. package/src/shared/index.scss +4 -2
  29. package/src/utility/index.scss +2 -22
  30. package/src/variables/_colors.scss +1 -1
  31. package/tailwind-base.js +123 -73
  32. package/themes/default.css +1 -1
  33. package/themes/default.scss +239 -139
  34. package/themes/test.scss +237 -0
  35. package/src/shared/_color-look.scss +0 -822
package/src/shared/_table.scss CHANGED
@@ -2,39 +2,34 @@
2
2
  @include mixins.darkMode() {
3
3
  .ax-table {
4
4
  thead {
5
- // @apply ax-bg-on-surface;
6
- background-color: rgba(var(--ax-color-on-surface));
5
+ background-color: rgba(var(--ax-sys-color-surface-high));
7
6
  }
8
7
  }
9
8
  }
10
9
  .ax-table {
11
- // @apply ax-w-full ax-border-collapse ax-border-spacing-0 ax-overflow-hidden ax-rounded-default ax-border ax-border-default ax-text-sm;
12
10
  width: 100%;
13
11
  border-collapse: collapse;
14
12
  border-spacing: 0;
15
13
  overflow: hidden;
16
- border-radius: var(--ax-rounded-border-default);
14
+ border-radius: var(--ax-sys-border-radius);
17
15
  border-width: 1px;
18
- border-color: rgba(var(--ax-color-border-default));
16
+ border-color: rgba(var(--ax-sys-border-color));
19
17
  font-size: 0.875rem /* 14px */;
20
18
  line-height: 1.25rem /* 20px */;
21
19
  td {
22
- // @apply ax-border-b ax-border-default ax-px-4 ax-py-3;
23
20
  border-bottom-width: 1px;
24
- border-color: rgba(var(--ax-color-border-default));
21
+ border-color: rgba(var(--ax-sys-border-color));
25
22
  padding-left: 1rem /* 16px */;
26
23
  padding-right: 1rem /* 16px */;
27
24
  padding-top: 0.75rem /* 12px */;
28
25
  padding-bottom: 0.75rem /* 12px */;
29
26
  }
30
27
  thead {
31
- // @apply ax-border-b ax-border-default ax-bg-on-surface;
32
28
  border-bottom-width: 1px;
33
- border-color: rgba(var(--ax-color-border-default));
34
- background-color: rgba(var(--ax-color-on-surface));
29
+ border-color: rgba(var(--ax-sys-border-color));
30
+ background-color: rgba(var(--ax-sys-color-surface-high));
35
31
 
36
32
  th {
37
- // @apply ax-px-4 ax-py-3.5 ax-text-start ax-font-medium ax-uppercase;
38
33
  padding-left: 1rem /* 16px */;
39
34
  padding-right: 1rem /* 16px */;
40
35
  padding-top: 0.875rem /* 14px */;
@@ -48,8 +43,7 @@
48
43
  tbody {
49
44
  tr {
50
45
  &:nth-child(even) {
51
- // @apply ax-bg-on-surface;
52
- background-color: rgba(var(--ax-color-on-surface));
46
+ background-color: rgba(var(--ax-sys-color-surface-high));
53
47
  }
54
48
  }
55
49
  }
@@ -57,7 +51,6 @@
57
51
  &.ax-table-bordered {
58
52
  thead {
59
53
  th {
60
- // @apply ax-border-t-0 #{!important};
61
54
  border-top-width: 0px !important;
62
55
  }
63
56
  }
@@ -65,13 +58,11 @@
65
58
  tr {
66
59
  &:last-child {
67
60
  td {
68
- // @apply ax-border-b-0 #{!important};
69
61
  border-bottom-width: 0px !important;
70
62
  }
71
63
  }
72
64
  td {
73
65
  &:last-child {
74
- // @apply ax-border-b-0 #{!important};
75
66
  border-bottom-width: 0px !important;
76
67
  }
77
68
  }
@@ -80,37 +71,30 @@
80
71
 
81
72
  td,
82
73
  th {
83
- // @apply ax-border ax-border-default;
84
74
  border-width: 1px;
85
- border-color: rgba(var(--ax-color-border-default));
75
+ border-color: rgba(var(--ax-sys-border-color));
86
76
 
87
77
  &:first-child {
88
- // @apply ax-border-s-0;
89
78
  border-inline-start-width: 0px;
90
79
  }
91
80
  &:last-child {
92
- // @apply ax-border-e-0;
93
81
  border-inline-end-width: 0px;
94
82
  }
95
83
  }
96
84
  }
97
85
  @include mixins.mediaLessThan('xs') {
98
86
  &.ax-table-responsive {
99
- // @apply ax-block ax-break-words ax-border-0;
100
87
  display: block;
101
88
  overflow-wrap: break-word;
102
89
  border-width: 0px;
103
90
 
104
91
  thead {
105
- // @apply ax-absolute -ax-start-full -ax-top-full;
106
92
  position: absolute;
107
93
  inset-inline-start: -100%;
108
94
  top: -100%;
109
95
  }
110
96
 
111
97
  td {
112
- // @apply ax-clear-both ax-box-border ax-block ax-w-full ax-px-2.5 ax-py-1.5;
113
-
114
98
  float: inline-start;
115
99
  clear: both;
116
100
  box-sizing: border-box;
@@ -121,25 +105,20 @@
121
105
  padding-top: 0.375rem /* 6px */;
122
106
  padding-bottom: 0.375rem /* 6px */;
123
107
  &:last-child {
124
- // @apply ax-border-0;
125
108
  border-width: 0px;
126
109
  }
127
110
  &:before {
128
- // @apply ax-block ax-font-bold;
129
-
130
111
  content: attr(data-label);
131
112
  display: block;
132
113
  font-weight: 700;
133
114
  }
134
115
  }
135
116
  tr {
136
- // @apply ax-border ax-border-default;
137
117
  border-width: 1px;
138
- border-color: rgba(var(--ax-color-border-default));
118
+ border-color: rgba(var(--ax-sys-border-color));
139
119
  }
140
120
  tr,
141
121
  tbody {
142
- // @apply ax-mb-2.5 ax-block ax-w-full;
143
122
  float: inline-start;
144
123
  margin-bottom: 0.625rem /* 10px */;
145
124
  width: 100%;
package/src/shared/_utils.scss CHANGED
@@ -11,14 +11,12 @@
11
11
  }
12
12
 
13
13
  .ax-fieldset {
14
- // @apply ax-rounded-default ax-border ax-border-default ax-p-3;
15
- border-radius: var(--ax-rounded-border-default);
14
+ border-radius: var(--ax-sys-border-radius);
16
15
  border-width: 1px;
17
- border-color: rgba(var(--ax-color-input-border));
16
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
18
17
  padding: 0.75rem /* 12px */;
19
18
 
20
19
  legend {
21
- // @apply ax-px-1 ax-text-sm;
22
20
  padding-left: 0.25rem /* 4px */;
23
21
  padding-right: 0.25rem /* 4px */;
24
22
  font-size: 0.875rem /* 14px */;
@@ -27,16 +25,14 @@
27
25
  }
28
26
 
29
27
  .ax-card {
30
- // @apply ax-rounded-default ax-border ax-border-default ax-bg-surface;
31
- border-radius: var(--ax-rounded-border-default);
28
+ border-radius: var(--ax-sys-border-radius);
32
29
  border-width: 1px;
33
- border-color: rgba(var(--ax-color-input-border));
34
- background-color: rgba(var(--ax-color-surface));
30
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
31
+ background-color: rgba(var(--ax-sys-color-surface));
35
32
  }
36
33
 
37
34
  .ax-drop-zone {
38
35
  > input {
39
- // @apply ax-absolute ax-h-full ax-w-full ax-cursor-pointer ax-opacity-0;
40
36
  position: absolute;
41
37
  height: 100%;
42
38
  width: 100%;
@@ -45,7 +41,6 @@
45
41
  }
46
42
  }
47
43
  .ax-uploader-overlay-state {
48
- // @apply ax-pointer-events-none ax-absolute ax-start-0 ax-top-0 ax-z-10 ax-flex ax-h-full ax-w-full ax-cursor-pointer ax-flex-col ax-items-center ax-justify-center ax-gap-2 ax-bg-primary-200/75 ax-text-sm ax-text-primary-fore-tint ax-outline-dashed ax-outline-2 -ax-outline-offset-4 ax-transition-all;
49
44
  border-radius: inherit;
50
45
  pointer-events: none;
51
46
  position: absolute;
@@ -60,10 +55,10 @@
60
55
  align-items: center;
61
56
  justify-content: center;
62
57
  gap: 0.5rem /* 8px */;
63
- background-color: rgba(var(--ax-color-primary-200), 0.75);
58
+ background-color: rgba(var(--ax-sys-color-primary-200), 0.75);
64
59
  font-size: 0.875rem /* 14px */;
65
60
  line-height: 1.25rem /* 20px */;
66
- color: rgba(var(--ax-color-primary-fore-tint));
61
+ color: rgba(var(--ax-sys-color-on-primary-tint));
67
62
  outline-style: dashed;
68
63
  outline-offset: -4px;
69
64
  transition-property: all;
@@ -77,9 +72,8 @@
77
72
  }
78
73
  @include util.darkMode() {
79
74
  .ax-uploader-overlay-state {
80
- // @apply ax-bg-primary-800/75 ax-text-primary-fore ax-outline-primary-fore;
81
- background-color: rgba(var(--ax-color-primary-800), 0.75);
82
- color: rgba(var(--ax-color-primary-fore));
83
- outline-color: rgba(var(--ax-color-primary-fore));
75
+ background-color: rgba(var(--ax-sys-color-primary-800), 0.75);
76
+ color: rgba(var(--ax-sys-color-on-primary));
77
+ outline-color: rgba(var(--ax-sys-color-on-primary));
84
78
  }
85
79
  }
package/src/shared/index.scss CHANGED
@@ -1,12 +1,14 @@
1
1
  @forward './action-item';
2
2
  @forward './actionsheet';
3
3
  @forward './check-box';
4
- @forward './color-look';
5
4
  @forward './drop-down';
6
- @forward './editor-container';
5
+ // @forward './editor-container';
7
6
  @forward './general-button';
8
7
  @forward './inputs';
9
8
  @forward './list';
10
9
  @forward './radio';
11
10
  @forward './table';
12
11
  @forward './utils';
12
+
13
+ // new //
14
+ @forward './ripple';
package/src/utility/index.scss CHANGED
@@ -1,24 +1,4 @@
1
- .ax-xs {
2
- --ax-size-default: calc(var(--ax-size-base) - 0.75rem);
3
- }
4
-
5
- .ax-sm {
6
- --ax-size-default: calc(var(--ax-size-base) - 0.5rem);
7
- }
8
-
9
- .ax-md {
10
- --ax-size-default: var(--ax-size-base);
11
- }
12
-
13
- .ax-lg {
14
- --ax-size-default: calc(var(--ax-size-base) + 0.5rem);
15
- }
16
-
17
- .ax-xl {
18
- --ax-size-default: calc(var(--ax-size-base) + 1rem);
19
- }
20
-
21
1
  .ax-placeholder {
22
- color: rgba(var(--ax-color-input-surface-fore), 0.5);
23
- font-weight: 500;
2
+ color: rgba(var(--ax-sys-color-input-surface-placeholder));
3
+ font-size: calc(var(--ax-comp-editor-font-size) * 0.875);
24
4
  }
package/src/variables/_colors.scss CHANGED
@@ -1,2 +1,2 @@
1
- $color_names: 'primary', 'success', 'warning', 'danger', 'neutral';
1
+ $color_names: 'primary', 'success', 'warning', 'danger', 'secondary';
2
2
  $look_names: 'solid', 'twotone', 'outline', 'blank', 'link';
package/tailwind-base.js CHANGED
@@ -17,36 +17,87 @@ const childSelector = plugin(function ({ addVariant }) {
17
17
  addVariant('child-focus-within', '& > *:focus-within');
18
18
  });
19
19
 
20
- const _colors = {
21
- ghost: 'rgba(var(--ax-color-ghost), <alpha-value>)',
22
- 'ghost-fore': 'rgba(var(--ax-color-ghost-fore), <alpha-value>)',
20
+ const _onColors = {
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
+ };
23
29
 
24
- surface: 'rgba(var(--ax-color-surface), <alpha-value>)',
25
- 'surface-fore': 'rgba(var(--ax-color-surface-fore), <alpha-value>)',
30
+ const _bgColors = {
31
+ default: 'rgba(var( --ax-sys-body-bg-color), <alpha-value>)',
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,
41
+ };
26
42
 
27
- 'on-surface': 'rgba(var(--ax-color-on-surface), <alpha-value>)',
28
- 'on-surface-fore': 'rgba(var(--ax-color-on-surface-fore), <alpha-value>)',
43
+ const _textColors = {
44
+ DEFAULT: withOpacityValue('--ax-sys-body-text-color'),
45
+ default: withOpacityValue('--ax-sys-body-text-color'),
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>)',
53
+ };
54
+
55
+ const _borderColors = {
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
+ };
29
64
 
30
- 'input-surface': 'rgba(var(--ax-color-input-surface), <alpha-value>)',
31
- 'input-surface-fore': 'rgba(var(--ax-color-input-surface-fore), <alpha-value>)',
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
+ },
32
85
  };
33
86
 
34
87
  const createPalete = function (colorName) {
35
88
  return {
36
- DEFAULT: `rgba(var(--ax-color-${colorName}-500), <alpha-value>)`,
37
- fore: `rgba(var(--ax-color-${colorName}-fore), <alpha-value>)`,
38
- 'fore-tint': `rgba(var(--ax-color-${colorName}-fore-tint), <alpha-value>)`,
39
- 50: `rgba(var(--ax-color-${colorName}-50), <alpha-value>)`,
40
- 100: `rgba(var(--ax-color-${colorName}-100), <alpha-value>)`,
41
- 200: `rgba(var(--ax-color-${colorName}-200), <alpha-value>)`,
42
- 300: `rgba(var(--ax-color-${colorName}-300), <alpha-value>)`,
43
- 400: `rgba(var(--ax-color-${colorName}-400), <alpha-value>)`,
44
- 500: `rgba(var(--ax-color-${colorName}-500), <alpha-value>)`,
45
- 600: `rgba(var(--ax-color-${colorName}-600), <alpha-value>)`,
46
- 700: `rgba(var(--ax-color-${colorName}-700), <alpha-value>)`,
47
- 800: `rgba(var(--ax-color-${colorName}-800), <alpha-value>)`,
48
- 900: `rgba(var(--ax-color-${colorName}-900), <alpha-value>)`,
49
- 950: `rgba(var(--ax-color-${colorName}-950), <alpha-value>)`,
89
+ DEFAULT: 'rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)',
90
+ 50: `rgba(var(--ax-sys-color-${colorName}-50), <alpha-value>)`,
91
+ 100: `rgba(var(--ax-sys-color-${colorName}-100), <alpha-value>)`,
92
+ 200: `rgba(var(--ax-sys-color-${colorName}-200), <alpha-value>)`,
93
+ 300: `rgba(var(--ax-sys-color-${colorName}-300), <alpha-value>)`,
94
+ 400: `rgba(var(--ax-sys-color-${colorName}-400), <alpha-value>)`,
95
+ 500: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
96
+ 600: `rgba(var(--ax-sys-color-${colorName}-600), <alpha-value>)`,
97
+ 700: `rgba(var(--ax-sys-color-${colorName}-700), <alpha-value>)`,
98
+ 800: `rgba(var(--ax-sys-color-${colorName}-800), <alpha-value>)`,
99
+ 900: `rgba(var(--ax-sys-color-${colorName}-900), <alpha-value>)`,
100
+ 950: `rgba(var(--ax-sys-color-${colorName}-950), <alpha-value>)`,
50
101
  };
51
102
  };
52
103
 
@@ -58,33 +109,32 @@ module.exports = withAnimations({
58
109
  extend: {
59
110
  colors: {
60
111
  primary: createPalete('primary'),
112
+ secondary: createPalete('secondary'),
61
113
  success: createPalete('success'),
62
114
  danger: createPalete('danger'),
63
115
  warning: createPalete('warning'),
64
- neutral: createPalete('neutral'),
65
- ..._colors,
116
+ ghost: createPalete('ghost'),
117
+ ..._onColor,
118
+ ..._onContrastColor,
66
119
  },
67
120
  textColor: {
68
- DEFAULT: withOpacityValue('--ax-color-text-default'),
69
- default: withOpacityValue('--ax-color-text-default'),
70
- ..._colors,
121
+ ..._textColors,
71
122
  },
72
123
  backgroundColor: {
73
- default: 'rgba(var(--ax-color-background-default), <alpha-value>)',
74
- 'border-default': 'rgba(var(--ax-color-border-default), <alpha-value>)',
124
+ ..._bgColors,
75
125
  },
76
-
77
126
  borderColor: {
78
- DEFAULT: 'rgba(var(--ax-color-border-default), <alpha-value>)',
79
- default: 'rgba(var(--ax-color-border-default), <alpha-value>)',
80
- input: 'rgba(var(--ax-color-input-border), <alpha-value>)',
81
- ..._colors,
127
+ DEFAULT: 'rgba(var(--ax-sys-border-color), <alpha-value>)',
128
+ default: 'rgba(var(--ax-sys-border-color), <alpha-value>)',
129
+ input: 'rgba(var(--ax-sys-color-input-surface-border), <alpha-value>)',
130
+ 'border-default': 'rgba(var(--ax-sys-border-color), <alpha-value>)',
131
+ ..._borderColors,
82
132
  },
83
133
  maxWidth: {
84
134
  '8xl': '90rem',
85
135
  },
86
136
  borderRadius: {
87
- default: 'var(--ax-rounded-border-default)',
137
+ default: 'var(--ax-sys-border-radius)',
88
138
  },
89
139
  lineHeight: {
90
140
  11: '2.5rem',
@@ -95,25 +145,25 @@ module.exports = withAnimations({
95
145
  20: '5rem',
96
146
  },
97
147
  spacing: {
98
- default: 'var(--ax-size-default)',
148
+ default: 'var(--ax-sys-size-base)',
99
149
  },
100
150
  minWidth: {
101
- default: 'var(--ax-size-default)',
151
+ default: 'var(--ax-sys-size-base)',
102
152
  },
103
153
  width: {
104
- default: 'var(--ax-size-default)',
154
+ default: 'var(--ax-sys-size-base)',
105
155
  },
106
156
  maxHeight: {
107
- default: 'var(--ax-size-default)',
157
+ default: 'var(--ax-sys-size-base)',
108
158
  },
109
159
  minHeight: {
110
- default: 'var(--ax-size-default)',
160
+ default: 'var(--ax-sys-size-base)',
111
161
  },
112
162
  height: {
113
- default: 'var(--ax-size-default)',
163
+ default: 'var(--ax-sys-size-base)',
114
164
  },
115
165
  maxHeight: {
116
- default: 'var(--ax-size-default)',
166
+ default: 'var(--ax-sys-size-base)',
117
167
  },
118
168
  },
119
169
  },
@@ -124,44 +174,44 @@ module.exports = withAnimations({
124
174
  plugin(function ({ addUtilities }) {
125
175
  const acorexClasses = {
126
176
  '.h1': {
127
- 'font-size': '3rem',
128
- 'font-weight': '700',
129
- 'line-height': '3rem',
130
- },
131
- '.h2': {
132
177
  'font-size': '2.5rem',
133
- 'font-weight': '700',
178
+ 'font-weight': '500',
134
179
  'line-height': '2.5rem',
135
180
  },
181
+ '.h2': {
182
+ 'font-size': '2rem',
183
+ 'font-weight': '500',
184
+ 'line-height': '2rem',
185
+ },
136
186
  '.h3': {
137
- 'font-size': '1.875rem',
138
- 'font-weight': '700',
139
- 'line-height': '1.875rem',
187
+ 'font-size': '1.75rem',
188
+ 'font-weight': '500',
189
+ 'line-height': '1.75rem',
140
190
  },
141
191
  '.h4': {
142
192
  'font-size': '1.5rem',
143
- 'font-weight': '700',
193
+ 'font-weight': '500',
144
194
  'line-height': '1.5rem',
145
195
  },
146
196
  '.h5': {
147
- 'font-size': '1.25rem',
148
- 'font-weight': '700',
149
- 'line-height': '1.25rem',
150
- },
151
- '.h6': {
152
197
  'font-size': '1.125rem',
153
- 'font-weight': '700',
198
+ 'font-weight': '500',
154
199
  'line-height': '1.125rem',
155
200
  },
201
+ '.h6': {
202
+ 'font-size': '1rem',
203
+ 'font-weight': '500',
204
+ 'line-height': '1rem',
205
+ },
156
206
  '.heading': {
157
207
  width: '100%',
158
208
  'border-bottom': '1px solid',
159
- 'border-color': 'rgba(var(--ax-color-border-default))',
209
+ 'border-color': 'rgba(var(--ax-sys-border-color))',
160
210
  'line-height': '0.1em',
161
211
  margin: '1rem auto',
162
212
  },
163
213
  '.heading > span': {
164
- background: 'rgba(var(--ax-color-surface))',
214
+ background: 'rgba(var(--ax-sys-color-surface))',
165
215
  padding: '0 0.75rem',
166
216
  },
167
217
  '.heading-start': {
@@ -173,15 +223,15 @@ module.exports = withAnimations({
173
223
  '.heading-end': {
174
224
  'text-align': 'end',
175
225
  },
176
- '.link': {
177
- color: 'rgba(var(--ax-color-primary-500))',
226
+ '.links': {
227
+ color: 'rgba(var(--ax-sys-color-primary-500))',
178
228
  cursor: 'pointer',
179
229
  },
180
- '.link:hover': {
230
+ '.links:hover': {
181
231
  'text-decoration': 'underline',
182
232
  },
183
- '.link:visited': {
184
- color: 'rgba(var(--ax-color-primary-700))',
233
+ '.links:visited': {
234
+ color: 'rgba(var(--ax-sys-color-primary-700))',
185
235
  },
186
236
  '.animate-slow': {
187
237
  animationDuration: '2s',
@@ -204,26 +254,26 @@ module.exports = withAnimations({
204
254
  '.card': {
205
255
  backgroundColor: 'rgb(var(--ax-color-surface))',
206
256
  border: '1px solid',
207
- borderColor: 'rgb(var(--ax-color-border-default))',
208
- borderRadius: 'var(--ax-rounded-border-default)',
257
+ borderColor: 'rgb(var(--ax-sys-border-color))',
258
+ borderRadius: 'var(--ax-sys-border-radius)',
209
259
  },
210
260
  '.tabs-fit': {
211
261
  width: '100%',
212
262
  },
213
263
  '.xs': {
214
- '--ax-size-default': '2rem',
264
+ '--ax-sys-size-base': '2rem',
215
265
  },
216
266
  '.sm': {
217
- '--ax-size-default': '2.25rem',
267
+ '--ax-sys-size-base': '2.25rem',
218
268
  },
219
269
  '.md': {
220
- '--ax-size-default': '2.5rem',
270
+ '--ax-sys-size-base': '2.5rem',
221
271
  },
222
272
  '.lg': {
223
- '--ax-size-default': '3rem',
273
+ '--ax-sys-size-base': '3rem',
224
274
  },
225
275
  '.xl': {
226
- '--ax-size-default': '3.5rem',
276
+ '--ax-sys-size-base': '3.5rem',
227
277
  },
228
278
  };
229
279
  addUtilities(acorexClasses, ['responsive', 'hover', 'focus']);
package/themes/default.css CHANGED
@@ -1 +1 @@
1
- :root,.ax-light{--ax-size-base: 2.5rem;--ax-size-default: var(--ax-size-base);--ax-icon-weight: 400;--ax-icon-size: 100%;--ax-rounded-border-default: 0.5rem;--ax-color-border-default: 233, 234, 235;--ax-color-background-default: 249, 250, 251;--ax-color-text-default: 22, 22, 22;--ax-color-surface: 255, 255, 255;--ax-color-surface-fore: 22, 22, 22;--ax-color-on-surface: 250, 250, 250;--ax-color-on-surface-fore: 22, 22, 22;--ax-color-input-surface: 255, 255, 255;--ax-color-input-surface-fore: 22, 22, 22;--ax-color-input-border: 213, 215, 218;--ax-color-ghost: 255, 255, 255;--ax-color-ghost-fore: 22, 22, 22;--ax-color-primary-fore: 255, 255, 255;--ax-color-primary-fore-tint: 11, 30, 71;--ax-color-primary-50: 244, 247, 254;--ax-color-primary-100: 233, 239, 253;--ax-color-primary-200: 190, 208, 249;--ax-color-primary-300: 146, 177, 245;--ax-color-primary-400: 102, 146, 241;--ax-color-primary-500: 37, 99, 235;--ax-color-primary-600: 33, 89, 212;--ax-color-primary-700: 26, 69, 165;--ax-color-primary-800: 19, 50, 118;--ax-color-primary-900: 11, 30, 71;--ax-color-primary-950: 4, 10, 23;--ax-color-secondary-fore: 255, 255, 255;--ax-color-secondary-fore-tint: 9, 12, 18;--ax-color-secondary-50: 244, 244, 245;--ax-color-secondary-100: 233, 234, 235;--ax-color-secondary-200: 188, 191, 196;--ax-color-secondary-300: 143, 148, 157;--ax-color-secondary-400: 98, 105, 118;--ax-color-secondary-500: 30, 41, 59;--ax-color-secondary-600: 27, 37, 53;--ax-color-secondary-700: 21, 29, 41;--ax-color-secondary-800: 15, 21, 30;--ax-color-secondary-900: 9, 12, 18;--ax-color-secondary-950: 3, 4, 6;--ax-color-success-fore: 255, 255, 255;--ax-color-success-fore-tint: 6, 78, 59;--ax-color-success-50: 236, 253, 245;--ax-color-success-100: 209, 250, 229;--ax-color-success-200: 167, 243, 208;--ax-color-success-300: 110, 231, 183;--ax-color-success-400: 52, 211, 153;--ax-color-success-500: 16, 185, 129;--ax-color-success-600: 5, 150, 105;--ax-color-success-700: 4, 120, 87;--ax-color-success-800: 6, 95, 70;--ax-color-success-900: 6, 78, 59;--ax-color-success-950: 2, 44, 34;--ax-color-warning-fore: 48, 26, 10;--ax-color-warning-fore-tint: 255, 111, 0;--ax-color-warning-50: 255, 248, 225;--ax-color-warning-100: 255, 236, 179;--ax-color-warning-200: 255, 224, 130;--ax-color-warning-300: 255, 213, 79;--ax-color-warning-400: 255, 202, 40;--ax-color-warning-500: 255, 193, 7;--ax-color-warning-600: 255, 179, 0;--ax-color-warning-700: 255, 160, 0;--ax-color-warning-800: 255, 143, 0;--ax-color-warning-900: 255, 111, 0;--ax-color-warning-950: 72, 40, 15;--ax-color-danger-fore: 255, 255, 255;--ax-color-danger-fore-tint: 127, 29, 29;--ax-color-danger-50: 254, 242, 242;--ax-color-danger-100: 254, 226, 226;--ax-color-danger-200: 254, 202, 202;--ax-color-danger-300: 252, 165, 165;--ax-color-danger-400: 248, 113, 113;--ax-color-danger-500: 239, 68, 68;--ax-color-danger-600: 220, 38, 38;--ax-color-danger-700: 185, 28, 28;--ax-color-danger-800: 153, 27, 27;--ax-color-danger-900: 127, 29, 29;--ax-color-danger-950: 69, 10, 10;--ax-color-info-fore: 255, 255, 255;--ax-color-info-fore-tint: 49, 46, 129;--ax-color-info-50: 238, 242, 255;--ax-color-info-100: 224, 231, 255;--ax-color-info-200: 199, 210, 254;--ax-color-info-300: 165, 180, 252;--ax-color-info-400: 129, 140, 248;--ax-color-info-500: 99, 102, 241;--ax-color-info-600: 79, 70, 229;--ax-color-info-700: 67, 56, 202;--ax-color-info-800: 55, 48, 163;--ax-color-info-900: 49, 46, 129;--ax-color-info-950: 30, 27, 75;--ax-color-neutral-fore: 255, 255, 255;--ax-color-neutral-fore-tint: 17, 24, 39;--ax-color-neutral-50: 249, 250, 251;--ax-color-neutral-100: 243, 244, 246;--ax-color-neutral-200: 229, 231, 235;--ax-color-neutral-300: 209, 213, 219;--ax-color-neutral-400: 156, 163, 175;--ax-color-neutral-500: 107, 114, 128;--ax-color-neutral-600: 75, 85, 99;--ax-color-neutral-700: 55, 65, 81;--ax-color-neutral-800: 31, 41, 55;--ax-color-neutral-900: 17, 24, 39;--ax-color-neutral-950: 3, 7, 18}.ax-dark{--ax-color-border-default: 34, 38, 47;--ax-color-background-default: 12, 14, 18;--ax-color-text-default: 255, 255, 255;--ax-color-surface: 19, 22, 27;--ax-color-surface-fore: 255, 255, 255;--ax-color-on-surface: 34, 38, 47;--ax-color-on-surface-fore: 255, 255, 255;--ax-color-input-surface: 12, 14, 18;--ax-color-input-surface-fore: 224, 224, 224;--ax-color-input-border: 55, 58, 65;--ax-color-ghost: 77, 91, 113;--ax-color-ghost-fore: 255, 255, 255}
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}