@acorex/styles 6.1.12 → 7.0.1

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 (81) hide show
  1. package/index.scss +3 -1
  2. package/package.json +1 -1
  3. package/src/base/index.scss +44 -30
  4. package/src/components/_avatar.scss +122 -122
  5. package/src/components/_badge.scss +178 -178
  6. package/src/components/_breadcrumbs.scss +30 -29
  7. package/src/components/_button copy.scss +924 -0
  8. package/src/components/_button.scss +0 -924
  9. package/src/components/_calendar.scss +180 -180
  10. package/src/components/_carousel.scss +44 -44
  11. package/src/components/_checkbox.scss +58 -58
  12. package/src/components/_collapse.scss +48 -48
  13. package/src/components/_color-palette.scss +5 -5
  14. package/src/components/_color-picker.scss +23 -23
  15. package/src/components/_context-menu.scss +0 -16
  16. package/src/components/_data-table.scss +1 -1
  17. package/src/components/_datepicker.scss +5 -5
  18. package/src/components/_decoration.scss +0 -39
  19. package/src/components/_dialog.scss +80 -79
  20. package/src/components/_drawer.scss +112 -112
  21. package/src/components/_dropdown.scss +162 -216
  22. package/src/components/_editor-container.scss +0 -155
  23. package/src/components/_fieldset.scss +1 -6
  24. package/src/components/_image.scss +1 -1
  25. package/src/components/_label.scss +1 -1
  26. package/src/components/_list.scss +0 -83
  27. package/src/components/_loading.scss +1 -50
  28. package/src/components/_menu copy.scss +5 -5
  29. package/src/components/_menu.scss +114 -114
  30. package/src/components/_popup.scss +92 -91
  31. package/src/components/_progress.scss +59 -59
  32. package/src/components/_radio.scss +30 -30
  33. package/src/components/_range-slider.scss +147 -125
  34. package/src/components/_result.scss +2 -2
  35. package/src/components/_selectbox.scss +15 -17
  36. package/src/components/_selection-list.scss +2 -2
  37. package/src/components/_skeleton.scss +2 -2
  38. package/src/components/_switch.scss +0 -186
  39. package/src/components/_table.scss +0 -81
  40. package/src/components/_tabs copy.scss +18 -18
  41. package/src/components/_tabs.scss +235 -235
  42. package/src/components/_textarea.scss +27 -31
  43. package/src/components/_toast.scss +1 -1
  44. package/src/components/_treeview.scss +0 -54
  45. package/src/components/_uploader.scss +0 -18
  46. package/src/components/index.scss +1 -47
  47. package/src/icons/demo.html +892 -738
  48. package/src/icons/fonts/acorex-icons.eot +0 -0
  49. package/src/icons/fonts/acorex-icons.svg +71 -0
  50. package/src/icons/fonts/acorex-icons.ttf +0 -0
  51. package/src/icons/fonts/acorex-icons.woff +0 -0
  52. package/src/icons/selection.json +1 -1
  53. package/src/icons/style.css +210 -177
  54. package/src/icons/style.scss +335 -280
  55. package/src/icons/variables.scss +65 -54
  56. package/src/mixins/_media.scss +27 -0
  57. package/src/mixins/index.scss +1 -0
  58. package/src/shared/_check-box.scss +45 -0
  59. package/src/shared/_decoration.scss +56 -0
  60. package/src/shared/_drop-down.scss +163 -0
  61. package/src/shared/_editor-container.scss +130 -0
  62. package/src/shared/_general-button.scss +42 -0
  63. package/src/shared/_icon-control.scss +0 -0
  64. package/src/shared/_inputs.scss +12 -0
  65. package/src/shared/_list.scss +134 -0
  66. package/src/shared/_radio.scss +37 -0
  67. package/src/shared/_skeleton.scss +26 -0
  68. package/src/shared/_table.scss +116 -0
  69. package/src/shared/_utils.scss +46 -0
  70. package/src/shared/index.scss +12 -0
  71. package/src/utility/_mixins.scss +3 -3
  72. package/src/utility/index.scss +16 -22
  73. package/src/variables/_colors.scss +76 -107
  74. package/src/variables/_degrees.scss +1 -0
  75. package/src/variables/index.scss +2 -0
  76. package/{index.js → tailwind.config.js} +14 -63
  77. package/src/components/_alert.scss +0 -276
  78. package/src/icons/fonts/acorex-icon.eot +0 -0
  79. package/src/icons/fonts/acorex-icon.svg +0 -60
  80. package/src/icons/fonts/acorex-icon.ttf +0 -0
  81. package/src/icons/fonts/acorex-icon.woff +0 -0
package/index.scss CHANGED
@@ -6,5 +6,7 @@
6
6
  @import "tailwindcss/utilities";
7
7
 
8
8
  @import "./src/base/index.scss";
9
- @import "./src/components/index.scss";
9
+ @import "./src/mixins/index.scss";
10
+ @import "./src/shared/index.scss";
11
+ // @import "./src/components/index.scss";
10
12
  @import "./src/utility/index.scss";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "6.1.12",
3
+ "version": "7.0.1",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
package/src/base/index.scss CHANGED
@@ -1,45 +1,59 @@
1
1
  @import "../utility/mixins";
2
2
 
3
- [class*=" ax-ic-"],
4
- [class^="ax-ic-"] {
5
- vertical-align: middle;
3
+ @mixin light-variables() {
4
+ --ax-color-border-default: 0, 0, 0, 0.12;
5
+ --ax-color-background-default: 250, 250, 250;
6
+ --ax-color-text-default: 18, 18, 18;
7
+ --ax-color-ghost: 0, 0, 0;
8
+ --ax-color-ghost-fore: 255, 255, 255;
9
+ --ax-color-surface: 255, 255, 255;
10
+ --ax-color-on-surface: 242, 242, 242;
11
+ }
12
+ @mixin dark-variables() {
13
+ --ax-color-background-default: 18, 18, 18;
14
+ --ax-color-text-default: 224, 224, 224;
15
+ --ax-color-border-default: 255, 255, 255, 0.12;
16
+ --ax-color-surface: 21, 27, 36;
17
+ --ax-color-on-surface: 60, 60, 60;
18
+ --ax-color-ghost: 255, 255, 255;
6
19
  }
7
20
 
8
- :root {
9
- --ax-size: 8px;
10
- --ax-base-size: var(--ax-size);
11
- --ax-base-ratio: 6;
12
- --ax-color-default-background: 255, 255, 255;
13
- --ax-color-default-color: 107, 114, 128;
14
- --ax-overlay-full-width: 93;
15
- --ax-border-rounded-default: 6px;
21
+ :root,
22
+ ::before,
23
+ ::after {
24
+ --ax-size-default: 2.5rem;
25
+ --ax-rounded-border-default: 0.5rem;
26
+ --ax-color-white: 255, 255, 255;
27
+ --ax-color-black: 0, 0, 0;
28
+ @include light-variables();
16
29
  @include colors($theme-colors);
17
30
  }
18
31
 
19
- html,
20
- body {
21
- background-color: rgb(var(--ax-color-default-background));
22
- color: rgba(var(--ax-color-default-color));
23
- height: 100%;
24
- font-size: 16px;
32
+
33
+ html.ax-neutral-os {
34
+ @media (prefers-color-scheme: dark) {
35
+ &:root,
36
+ &::before,
37
+ &::after {
38
+ @include dark-variables();
39
+ }
40
+ }
25
41
  }
26
42
 
27
43
  html.ax-dark,
28
44
  html.ax-dark * {
29
- --tw-ring-offset-color: #151b24;
30
- --ax-color-default-background: 21 27 36;
31
- --ax-color-default-color: 255 255 255;
32
- --ax-color-border: 55 65 81;
33
- --ax-color-placeholder: 161 161 161;
34
- .ax-skeleton {
35
- &.ax-skeleton-animate {
36
- &::before {
37
- content: "";
38
- background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
39
- }
40
- }
45
+ &:root,
46
+ &::before,
47
+ &::after {
48
+ @include dark-variables();
41
49
  }
42
- .cdk-overlay-dark-backdrop {
50
+ .cdk-overlay-neutral-backdrop {
43
51
  background: rgba(0, 0, 0, 0.5) !important;
44
52
  }
45
53
  }
54
+
55
+ html,
56
+ body {
57
+ background-color: rgb(var(--ax-color-background-default));
58
+ color: rgba(var(--ax-color-text-default));
59
+ }
package/src/components/_avatar.scss CHANGED
@@ -1,124 +1,124 @@
1
1
  @layer components {
2
- .ax-avatar-group {
3
- @apply ax-flex;
4
- ax-avatar {
5
- @apply ax-border-2 ax-border-white -ax-m-1 dark:ax-border-dark-500;
6
- }
7
- }
8
- ax-avatar {
9
- @apply ax-relative ax-flex ax-items-center ax-justify-center ax-w-16 ax-h-16 ax-overflow-hidden;
10
- ax-badge {
11
- @apply ax-absolute -ax-top-1.5;
12
- right: -6px;
13
- }
14
- ax-text{
15
- @apply ax-text-xl;
16
- }
17
- ax-icon,
18
- ax-text {
19
- @apply ax-w-full ax-h-full ax-flex ax-items-center ax-justify-center;
20
- }
21
- .ax-avatar-container {
22
- @apply ax-w-full ax-h-full ax-rounded-default;
23
- .ax-default-avatar {
24
- svg {
25
- @apply ax-w-full;
26
- }
27
- }
28
- .ax-default-avatar,
29
- .ax-text-avatar,
30
- .ax-icon-avatar,
31
- .ax-image-avatar {
32
- @apply ax-w-full ax-h-full ax-flex ax-items-center ax-justify-center ax-bg-light-200 dark:ax-bg-dark-500 ax-overflow-hidden;
33
- }
34
- }
35
- &.ax-primary-default {
36
- .ax-default {
37
- @apply ax-fill-primary-500;
38
- }
39
- ax-text {
40
- @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
41
- }
42
- ax-icon {
43
- @apply ax-bg-primary-500;
44
- }
45
- }
46
- &.ax-secondary-default {
47
- .ax-default {
48
- @apply ax-fill-secondary-500;
49
- }
50
- ax-text {
51
- @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-fore;
52
- }
53
- ax-icon {
54
- @apply ax-bg-secondary-500;
55
- }
56
- }
57
- &.ax-success-default {
58
- .ax-default {
59
- @apply ax-fill-success-500;
60
- }
61
- ax-text {
62
- @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-fore;
63
- }
64
- ax-icon {
65
- @apply ax-bg-success-500;
66
- }
67
- }
68
- &.ax-warning-default {
69
- .ax-default {
70
- @apply ax-fill-warning-500;
71
- }
72
- ax-text {
73
- @apply ax-bg-warning-100 ax-text-warning-500 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
74
- }
75
- ax-icon {
76
- @apply ax-bg-warning-500;
77
- }
78
- }
79
- &.ax-danger-default {
80
- .ax-default {
81
- @apply ax-fill-danger-500;
82
- }
83
- ax-text {
84
- @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
85
- }
86
- ax-icon {
87
- @apply ax-bg-danger-500;
88
- }
89
- }
90
- &.ax-info-default {
91
- .ax-default {
92
- @apply ax-fill-info-500;
93
- }
94
- ax-text {
95
- @apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-fore;
96
- }
97
- ax-icon {
98
- @apply ax-bg-info-500;
99
- }
100
- }
101
- &.ax-light-default {
102
- .ax-default {
103
- @apply ax-fill-light-400;
104
- }
105
- ax-text {
106
- @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-light-500 dark:ax-text-light-fore;
107
- }
108
- ax-icon {
109
- @apply ax-bg-light-500;
110
- }
111
- }
112
- &.ax-dark-default {
113
- .ax-default {
114
- @apply ax-fill-dark-500;
115
- }
116
- ax-text {
117
- @apply ax-bg-dark-100 ax-text-dark-500 dark:ax-bg-dark-500 dark:ax-text-dark-fore;
118
- }
119
- ax-icon {
120
- @apply ax-bg-dark-500;
121
- }
122
- }
123
- }
2
+ // .ax-avatar-group {
3
+ // @apply ax-flex;
4
+ // ax-avatar {
5
+ // @apply ax-border-2 ax-border-white -ax-m-1 dark:ax-border-neutral-500;
6
+ // }
7
+ // }
8
+ // ax-avatar {
9
+ // @apply ax-relative ax-flex ax-items-center ax-justify-center ax-w-16 ax-h-16 ax-overflow-hidden;
10
+ // ax-badge {
11
+ // @apply ax-absolute -ax-top-1.5;
12
+ // right: -6px;
13
+ // }
14
+ // ax-text{
15
+ // @apply ax-text-xl;
16
+ // }
17
+ // ax-icon,
18
+ // ax-text {
19
+ // @apply ax-w-full ax-h-full ax-flex ax-items-center ax-justify-center;
20
+ // }
21
+ // .ax-avatar-container {
22
+ // @apply ax-w-full ax-h-full ax-rounded-default;
23
+ // .ax-default-avatar {
24
+ // svg {
25
+ // @apply ax-w-full;
26
+ // }
27
+ // }
28
+ // .ax-default-avatar,
29
+ // .ax-text-avatar,
30
+ // .ax-icon-avatar,
31
+ // .ax-image-avatar {
32
+ // @apply ax-w-full ax-h-full ax-flex ax-items-center ax-justify-center ax-bg-neutral-200 dark:ax-bg-neutral-500 ax-overflow-hidden;
33
+ // }
34
+ // }
35
+ // &.ax-primary-default {
36
+ // .ax-default {
37
+ // @apply ax-fill-primary-500;
38
+ // }
39
+ // ax-text {
40
+ // @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
41
+ // }
42
+ // ax-icon {
43
+ // @apply ax-bg-primary-500;
44
+ // }
45
+ // }
46
+ // &.ax-secondary-default {
47
+ // .ax-default {
48
+ // @apply ax-fill-secondary-500;
49
+ // }
50
+ // ax-text {
51
+ // @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-fore;
52
+ // }
53
+ // ax-icon {
54
+ // @apply ax-bg-secondary-500;
55
+ // }
56
+ // }
57
+ // &.ax-success-default {
58
+ // .ax-default {
59
+ // @apply ax-fill-success-500;
60
+ // }
61
+ // ax-text {
62
+ // @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-fore;
63
+ // }
64
+ // ax-icon {
65
+ // @apply ax-bg-success-500;
66
+ // }
67
+ // }
68
+ // &.ax-warning-default {
69
+ // .ax-default {
70
+ // @apply ax-fill-warning-500;
71
+ // }
72
+ // ax-text {
73
+ // @apply ax-bg-warning-100 ax-text-warning-500 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
74
+ // }
75
+ // ax-icon {
76
+ // @apply ax-bg-warning-500;
77
+ // }
78
+ // }
79
+ // &.ax-danger-default {
80
+ // .ax-default {
81
+ // @apply ax-fill-danger-500;
82
+ // }
83
+ // ax-text {
84
+ // @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
85
+ // }
86
+ // ax-icon {
87
+ // @apply ax-bg-danger-500;
88
+ // }
89
+ // }
90
+ // &.ax-primary-default {
91
+ // .ax-default {
92
+ // @apply ax-fill-primary-500;
93
+ // }
94
+ // ax-text {
95
+ // @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
96
+ // }
97
+ // ax-icon {
98
+ // @apply ax-bg-primary-500;
99
+ // }
100
+ // }
101
+ // &.ax-neutral-default {
102
+ // .ax-default {
103
+ // @apply ax-fill-neutral-400;
104
+ // }
105
+ // ax-text {
106
+ // @apply ax-bg-neutral-100 ax-text-neutral-500 dark:ax-bg-neutral-500 dark:ax-text-neutral-fore;
107
+ // }
108
+ // ax-icon {
109
+ // @apply ax-bg-neutral-500;
110
+ // }
111
+ // }
112
+ // &.ax-neutral-default {
113
+ // .ax-default {
114
+ // @apply ax-fill-neutral-500;
115
+ // }
116
+ // ax-text {
117
+ // @apply ax-bg-neutral-100 ax-text-neutral-500 dark:ax-bg-neutral-500 dark:ax-text-neutral-fore;
118
+ // }
119
+ // ax-icon {
120
+ // @apply ax-bg-neutral-500;
121
+ // }
122
+ // }
123
+ // }
124
124
  }