@acorex/styles 5.0.46 → 5.0.49

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/_alert.scss +5 -95
  3. package/src/components/_badge.scss +26 -24
  4. package/src/components/_popup.scss +1 -1
  5. package/src/components/_selection-list.scss +4 -0
  6. package/src/utility/_mixins.scss +38 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.46",
3
+ "version": "5.0.49",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/components/_alert.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ax-alert {
3
- @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-center ax-rounded ax-border;
3
+ @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-center ax-rounded ;
4
4
  transition: visibility 0s, opacity 0.5s ease-in-out;
5
5
  &.ax-state-hidden {
6
6
  visibility: hidden;
@@ -12,7 +12,6 @@
12
12
  }
13
13
  .ax-alert-icon {
14
14
  @apply ax-text-xl ax-self-baseline ax-me-2;
15
-
16
15
  }
17
16
  .ax-alert-body {
18
17
  @apply ax-ml-2 ax-flex-1;
@@ -24,7 +23,7 @@
24
23
  }
25
24
  .ax-alert-content {
26
25
  @apply ax-block ax-text-sm ax-break-words;
27
-
26
+
28
27
  ul {
29
28
  @apply ax-my-2 ax-ms-5 ax-list-disc;
30
29
  }
@@ -43,13 +42,11 @@
43
42
  }
44
43
  }
45
44
  }
46
-
47
45
  }
48
46
  .ax-alert-prefix {
49
- .ax-alert-buttons{
47
+ .ax-alert-buttons {
50
48
  @apply ax-flex;
51
49
  }
52
-
53
50
  }
54
51
  .ax-alert-suffix {
55
52
  .ax-alert-buttons {
@@ -62,93 +59,6 @@
62
59
  }
63
60
  }
64
61
  }
65
- &.ax-primary-default {
66
- @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-600 dark:ax-text-primary-50 ax-border-primary-500/10;
67
- .ax-alert-title {
68
- @apply ax-text-primary-700 dark:ax-text-primary-100;
69
- }
70
- .ax-alert-button {
71
- &:hover {
72
- @apply ax-text-primary-900;
73
- }
74
- }
75
- }
76
- &.ax-secondary-default {
77
- @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-600 dark:ax-text-secondary-50 ax-border-secondary-500/10;
78
- .ax-alert-title {
79
- @apply ax-text-secondary-700 dark:ax-text-secondary-100;
80
- }
81
- .ax-alert-button {
82
- &:hover {
83
- @apply ax-text-secondary-900;
84
- }
85
- }
86
- }
87
- &.ax-success-default {
88
- @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-600 dark:ax-text-success-50 ax-border-success-500/10;
89
- .ax-alert-title {
90
- @apply ax-text-success-700 dark:ax-text-success-100;
91
- }
92
- .ax-alert-button {
93
- &:hover {
94
- @apply ax-text-success-900;
95
- }
96
- }
97
- }
98
- &.ax-warning-default {
99
- @apply ax-bg-warning-50 ax-text-warning-500 dark:ax-bg-warning-600 dark:ax-text-white ax-border-warning-500/10;
100
- .ax-alert-title {
101
- @apply ax-text-warning-700 dark:ax-text-warning-100;
102
- }
103
- .ax-alert-button {
104
- &:hover {
105
- @apply ax-text-warning-900;
106
- }
107
- }
108
- }
109
- &.ax-danger-default {
110
- @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-600 dark:ax-text-danger-50 ax-border-danger-500/10;
111
- .ax-alert-title {
112
- @apply ax-text-danger-700 dark:ax-text-danger-100;
113
- }
114
- .ax-alert-button {
115
- &:hover {
116
- @apply ax-text-danger-900;
117
- }
118
- }
119
- }
120
- &.ax-info-default {
121
- @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-600 dark:ax-text-info-50 ax-border-info-500/10;
122
- .ax-alert-title {
123
- @apply ax-text-info-700 dark:ax-text-info-100;
124
- }
125
- .ax-alert-button {
126
- &:hover {
127
- @apply ax-text-info-900;
128
- }
129
- }
130
- }
131
- &.ax-light-default {
132
- @apply ax-bg-light-50 ax-text-light-fore dark:ax-bg-light-500 dark:ax-text-light-50 ax-border-light-500/10;
133
- .ax-alert-title {
134
- @apply ax-text-light-fore dark:ax-text-light-100;
135
- }
136
- .ax-alert-button {
137
- &:hover {
138
- @apply ax-text-light-900;
139
- }
140
- }
141
- }
142
- &.ax-dark-default {
143
- @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-400 dark:ax-text-dark-50 ax-border-dark-500/10;
144
- .ax-alert-title {
145
- @apply ax-text-dark-fore dark:ax-text-dark-100;
146
- }
147
- .ax-alert-button {
148
- &:hover {
149
- @apply ax-text-dark-200;
150
- }
151
- }
152
- }
62
+ @include color-look-generator();
153
63
  }
154
- }
64
+ }
package/src/components/_badge.scss CHANGED
@@ -15,29 +15,31 @@
15
15
  @apply ax-m-0;
16
16
  }
17
17
  }
18
- &.ax-primary-default {
19
- @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-300;
20
- }
21
- &.ax-secondary-default {
22
- @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-300;
23
- }
24
- &.ax-success-default {
25
- @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-300;
26
- }
27
- &.ax-warning-default {
28
- @apply ax-bg-warning-50 ax-text-warning-700 dark:ax-bg-warning-300;
29
- }
30
- &.ax-danger-default {
31
- @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-300;
32
- }
33
- &.ax-info-default {
34
- @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-300;
35
- }
36
- &.ax-light-default {
37
- @apply ax-bg-light-200 ax-text-light-700;
38
- }
39
- &.ax-dark-default {
40
- @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-300 dark:ax-text-dark-50;
41
- }
18
+
19
+ @include color-look-generator();
20
+ // &.ax-primary-default {
21
+ // @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
22
+ // }
23
+ // &.ax-secondary-default {
24
+ // @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-fore;
25
+ // }
26
+ // &.ax-success-default {
27
+ // @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-fore;
28
+ // }
29
+ // &.ax-warning-default {
30
+ // @apply ax-bg-warning-50 ax-text-warning-700 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
31
+ // }
32
+ // &.ax-danger-default {
33
+ // @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
34
+ // }
35
+ // &.ax-info-default {
36
+ // @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-fore;
37
+ // }
38
+ // &.ax-light-default {
39
+ // @apply ax-bg-light-200 ax-text-light-700;
40
+ // }
41
+ // &.ax-dark-default {
42
+ // @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-500 dark:ax-text-dark-50;
43
+ // }
42
44
  }
43
45
  }
package/src/components/_popup.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components {
2
2
  ax-page-footer,
3
3
  ax-page-header {
4
- @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
4
+ @apply ax-flex ax-items-center ax-justify-between ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
5
5
 
6
6
  ax-prefix {
7
7
  @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
package/src/components/_selection-list.scss CHANGED
@@ -4,6 +4,10 @@
4
4
 
5
5
  &.ax-vertical {
6
6
  @apply ax-flex-col;
7
+ .ax-checkbox-container,
8
+ .ax-radio-container {
9
+ @apply ax-mb-4;
10
+ }
7
11
  }
8
12
 
9
13
  &.ax-horizontal {
package/src/utility/_mixins.scss CHANGED
@@ -18,38 +18,60 @@
18
18
  }
19
19
 
20
20
  @mixin colors($array) {
21
- @each $name,
22
- $color in $array {
23
- @if (type-of($color)=="map") {
24
- @each $subname,
25
- $variant in $color {
26
- @if ($subname !="") {
21
+ @each $name, $color in $array {
22
+ @if (type-of($color) == "map") {
23
+ @each $subname, $variant in $color {
24
+ @if ($subname != "") {
27
25
  --ax-color-#{$name}-#{$subname}: #{$variant};
28
- }
29
- @else {
26
+ } @else {
30
27
  --ax-color-#{$name}: #{$variant};
31
28
  }
32
29
  }
33
- }
34
- @else {
30
+ } @else {
35
31
  --ax-color-#{$name}: #{$color};
36
32
  }
37
33
  }
38
34
  }
39
35
 
40
36
  @mixin control-states($type) {
41
-
42
- @if($type == "editor"){
37
+ @if ($type == "editor") {
43
38
  @apply dark:ax-border-white/[0.06] dark:ax-bg-white/[0.06] dark:ax-backdrop-blur-3xl;
44
39
  }
45
- @if($type == "editor-disabled"){
40
+ @if ($type == "editor-disabled") {
46
41
  @apply ax-bg-light-100 ax-text-light-fore dark:ax-border-white/[0.06] dark:ax-bg-white/[0.-04] dark:ax-text-opacity-60 ax-cursor-not-allowed;
47
-
48
42
  }
49
- @if($type == "surface"){
43
+ @if ($type == "surface") {
50
44
  @apply dark:ax-bg-default-background dark:ax-border-white/[0.16] dark:ax-shadow-md;
51
45
  }
46
+ }
52
47
 
53
-
48
+ @mixin color-look($color, $look) {
49
+ @if ($look == "default") {
50
+ @if ($color == "light") {
51
+ @apply ax-bg-#{$color}-100 ax-text-#{$color}-fore;
52
+ } @else {
53
+ @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
54
+ }
55
+ }
56
+ @if ($look == "outline") {
57
+ @apply ax-bg-transparent ax-text-#{$color}-500 ax-border ax-rounded-md ax-border-#{$color}-500;
58
+ }
59
+ @if ($look == "twotone") {
60
+ @apply ax-bg-#{$color}-50 ax-text-#{$color}-500;
61
+ }
62
+ @if ($look == "blank") {
63
+ @apply ax-bg-transparent ax-text-#{$color}-500;
64
+ }
54
65
  }
55
66
 
67
+ @mixin color-look-generator() {
68
+ $colors: ("primary", "secondary", "success", "warning", "danger", "info", "light", "dark");
69
+ $looks: ("default", "outline", "twotone", "blank");
70
+ @each $c in $colors {
71
+ @each $l in $looks {
72
+ &.ax-#{$c}-#{$l} {
73
+ @include color-look($c, $l);
74
+ }
75
+ }
76
+ }
77
+ }