@alauda/ui 7.3.3-beta.27 → 7.3.3-beta.28

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 (19) hide show
  1. package/esm2022/index.mjs +1 -2
  2. package/esm2022/table/table-column-resizable.directive.mjs +22 -14
  3. package/esm2022/table/table.component.mjs +3 -3
  4. package/fesm2022/alauda-ui.mjs +23 -158
  5. package/fesm2022/alauda-ui.mjs.map +1 -1
  6. package/index.d.ts +0 -1
  7. package/package.json +1 -1
  8. package/table/table-column-resizable.directive.d.ts +2 -2
  9. package/esm2022/resizable/index.mjs +0 -2
  10. package/esm2022/resizable/resizable.directive.mjs +0 -147
  11. package/resizable/index.d.ts +0 -1
  12. package/resizable/resizable.directive.d.ts +0 -34
  13. package/resizable/resizable.scss +0 -44
  14. package/theme/_base-var.scss +0 -31
  15. package/theme/_mixin.scss +0 -350
  16. package/theme/_pattern.scss +0 -66
  17. package/theme/_theme-preset.scss +0 -180
  18. package/theme/_var.scss +0 -80
  19. package/theme/style.css +0 -440
package/theme/_pattern.scss DELETED
@@ -1,66 +0,0 @@
1
- @import 'var';
2
- @import 'mixin';
3
-
4
- @mixin shadow-0 {
5
- border-radius: use-var(border-radius-m);
6
- background-color: use-rgb(n-10);
7
- }
8
-
9
- @mixin shadow-2 {
10
- border-radius: use-var(border-radius-m);
11
- background-color: use-rgb(n-10);
12
- box-shadow: 0 0 2px 0 use-rgba(origin-shadow, 0.24);
13
- }
14
-
15
- @mixin shadow-8 {
16
- border-radius: use-var(border-radius-m);
17
- background-color: use-rgb(n-10);
18
- box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.16);
19
- }
20
-
21
- @mixin shadow-16 {
22
- border-radius: use-var(border-radius-m);
23
- background-color: use-rgb(n-10);
24
- box-shadow: 0 4px 16px 0 use-rgba(origin-shadow, 0.16);
25
- }
26
-
27
- @mixin zh-form-label-width($parent) {
28
- #{$parent} .aui-form-item .aui-form-item__label-wrapper {
29
- width: 114px;
30
- }
31
- }
32
-
33
- @mixin en-form-label-width($parent) {
34
- #{$parent} .aui-form-item .aui-form-item__label-wrapper {
35
- width: 144px;
36
- }
37
- }
38
-
39
- @mixin table-placeholder($className) {
40
- #{$className} {
41
- box-sizing: border-box;
42
- display: flex;
43
- justify-content: center;
44
- align-items: center;
45
- padding: $table-cell-padding-v $table-cell-padding-h;
46
- min-height: $table-row-min-height + 2px;
47
- @include text-set(m, placeholder);
48
-
49
- background-color: use-rgb(n-10);
50
- border: solid 1px use-rgb(n-8);
51
- border-radius: use-var(border-radius-l);
52
-
53
- // fixed placeholder to avoid horizontal scrolling
54
- position: sticky;
55
- left: 0;
56
-
57
- > aui-icon:first-child {
58
- margin-right: use-var(spacing-m);
59
- }
60
- }
61
-
62
- .aui-table .aui-table__row + #{$className} {
63
- border-top-left-radius: 0;
64
- border-top-right-radius: 0;
65
- }
66
- }
package/theme/_theme-preset.scss DELETED
@@ -1,180 +0,0 @@
1
- @use 'sass:color';
2
-
3
- @mixin component-size {
4
- --aui-inline-height-l: 40px;
5
- --aui-inline-height-m: 32px;
6
- --aui-inline-height-s: 28px;
7
- --aui-inline-height-xs: 24px;
8
- --aui-inline-padding-l: 19px;
9
- --aui-inline-padding-m: 15px;
10
- --aui-inline-padding-s: 11px;
11
- --aui-inline-padding-xs: 7px;
12
- --aui-inline-padding-xxs: 5px;
13
- --aui-spacing-xxxxxl: 40px;
14
- --aui-spacing-xxxxl: 32px;
15
- --aui-spacing-xxxl: 24px;
16
- --aui-spacing-xxl: 20px;
17
- --aui-spacing-xl: 16px;
18
- --aui-spacing-l: 12px;
19
- --aui-spacing-m: 8px;
20
- --aui-spacing-s: 4px;
21
- --aui-spacing-xs: 2px;
22
- --aui-font-weight-bold: 500;
23
- --aui-font-weight-bolder: 600;
24
- --aui-font-weight-normal: 400;
25
- --aui-font-size-xxl: 20px;
26
- --aui-font-size-xl: 18px;
27
- --aui-font-size-l: 16px;
28
- --aui-font-size-m: 14px;
29
- --aui-font-size-s: 12px;
30
- --aui-line-height-xxxl: 32px;
31
- --aui-line-height-xxl: 28px;
32
- --aui-line-height-xl: 24px;
33
- --aui-line-height-l: 22px;
34
- --aui-line-height-m: 20px;
35
- --aui-line-height-s: 16px;
36
- --aui-icon-size-xxl: 24px;
37
- --aui-icon-size-xl: 24px;
38
- --aui-icon-size-l: 16px;
39
- --aui-icon-size-m: 16px;
40
- --aui-icon-size-s: 12px;
41
- --aui-border-radius-l: 4px;
42
- --aui-border-radius-m: 2px;
43
- --aui-form-item-width-l: 732px;
44
- --aui-form-item-width-m: 436px;
45
- --aui-form-item-width-s: 140px;
46
- }
47
-
48
- @function rgb-string($color) {
49
- @return color.red($color), color.green($color), color.blue($color);
50
- }
51
-
52
- @mixin light-mode {
53
- color-scheme: light;
54
-
55
- --aui-color-blue: #{rgb-string(#007af5)};
56
- --aui-color-b-0: #{rgb-string(#0067d0)};
57
- --aui-color-b-1: #{rgb-string(#268df6)};
58
- --aui-color-b-2: #{rgb-string(#4da2f8)};
59
- --aui-color-b-3: #{rgb-string(#66aff9)};
60
- --aui-color-b-4: #{rgb-string(#b3d7fc)};
61
- --aui-color-b-5: #{rgb-string(#cce4fd)};
62
- --aui-color-b-6: #{rgb-string(#e5f1fe)};
63
- --aui-color-b-7: #{rgb-string(#f2f8fe)};
64
- --aui-color-primary: var(--aui-color-blue);
65
- --aui-color-p-0: var(--aui-color-b-0);
66
- --aui-color-p-1: var(--aui-color-b-1);
67
- --aui-color-p-2: var(--aui-color-b-2);
68
- --aui-color-p-3: var(--aui-color-b-3);
69
- --aui-color-p-4: var(--aui-color-b-4);
70
- --aui-color-p-5: var(--aui-color-b-5);
71
- --aui-color-p-6: var(--aui-color-b-6);
72
- --aui-color-p-7: var(--aui-color-b-7);
73
- --aui-color-green: #{rgb-string(#00c261)};
74
- --aui-color-g-0: #{rgb-string(#00a552)};
75
- --aui-color-g-1: #{rgb-string(#26cb78)};
76
- --aui-color-g-2: #{rgb-string(#4cd490)};
77
- --aui-color-g-4: #{rgb-string(#b3eccf)};
78
- --aui-color-g-6: #{rgb-string(#e6f9ef)};
79
- --aui-color-g-7: #{rgb-string(#f2fbf6)};
80
- --aui-color-yellow: #{rgb-string(#f5a300)};
81
- --aui-color-y-0: #{rgb-string(#dc9200)};
82
- --aui-color-y-1: #{rgb-string(#f6b026)};
83
- --aui-color-y-2: #{rgb-string(#f8be4d)};
84
- --aui-color-y-4: #{rgb-string(#fce3b3)};
85
- --aui-color-y-6: #{rgb-string(#fef5e6)};
86
- --aui-color-y-7: #{rgb-string(#fefaf3)};
87
- --aui-color-red: #{rgb-string(#eb0027)};
88
- --aui-color-r-0: #{rgb-string(#c70021)};
89
- --aui-color-r-1: #{rgb-string(#ed2647)};
90
- --aui-color-r-2: #{rgb-string(#f14c67)};
91
- --aui-color-r-4: #{rgb-string(#f9b3be)};
92
- --aui-color-r-6: #{rgb-string(#fde6e9)};
93
- --aui-color-r-7: #{rgb-string(#fef3f4)};
94
- --aui-color-n-1: #{rgb-string(#323437)};
95
- --aui-color-n-2: #{rgb-string(#646669)};
96
- --aui-color-n-3: #{rgb-string(#7c7e81)};
97
- --aui-color-n-4: #{rgb-string(#96989b)};
98
- --aui-color-n-5: #{rgb-string(#aeb0b3)};
99
- --aui-color-n-6: #{rgb-string(#c8cacd)};
100
- --aui-color-n-7: #{rgb-string(#d4d6d9)};
101
- --aui-color-n-8: #{rgb-string(#edeff2)};
102
- --aui-color-n-9: #{rgb-string(#f7f9fc)};
103
- --aui-color-n-10: #{rgb-string(#fff)};
104
- --aui-color-origin-shadow: var(--aui-color-n-1);
105
- --aui-color-popper-bg: var(--aui-color-n-10);
106
- --aui-color-button-bg: var(--aui-color-n-9);
107
- --aui-color-main-bg: var(--aui-color-n-9);
108
- --aui-color-divider: var(--aui-color-n-8);
109
- --aui-color-border: var(--aui-color-n-7);
110
- --aui-color-main-text: var(--aui-color-n-1);
111
- --aui-color-secondary-text: var(--aui-color-n-2);
112
- --aui-color-help-text: var(--aui-color-n-4);
113
- --aui-color-disabled-text: var(--aui-color-n-6);
114
- --aui-color-placeholder-text: var(--aui-color-n-6);
115
- }
116
-
117
- @mixin dark-mode {
118
- color-scheme: dark;
119
-
120
- --aui-color-blue: #{rgb-string(#3d8eff)};
121
- --aui-color-b-0: #{rgb-string(#3674cc)};
122
- --aui-color-b-1: #{rgb-string(#6daaff)};
123
- --aui-color-b-2: #{rgb-string(#356fc1)};
124
- --aui-color-b-3: #{rgb-string(#3265ad)};
125
- --aui-color-b-4: #{rgb-string(#2f558f)};
126
- --aui-color-b-5: #{rgb-string(#283651)};
127
- --aui-color-b-6: #{rgb-string(#2a4066)};
128
- --aui-color-b-7: #{rgb-string(#2c4a7a)};
129
- --aui-color-primary: var(--aui-color-blue);
130
- --aui-color-p-0: var(--aui-color-b-0);
131
- --aui-color-p-1: var(--aui-color-b-1);
132
- --aui-color-p-2: var(--aui-color-b-2);
133
- --aui-color-p-3: var(--aui-color-b-3);
134
- --aui-color-p-4: var(--aui-color-b-4);
135
- --aui-color-p-5: var(--aui-color-b-5);
136
- --aui-color-p-6: var(--aui-color-b-6);
137
- --aui-color-p-7: var(--aui-color-b-7);
138
- --aui-color-green: #{rgb-string(#11b671)};
139
- --aui-color-g-0: #{rgb-string(#159261)};
140
- --aui-color-g-1: #{rgb-string(#4cc894)};
141
- --aui-color-g-2: #{rgb-string(#168b5d)};
142
- --aui-color-g-4: #{rgb-string(#1b674e)};
143
- --aui-color-g-6: #{rgb-string(#1f4a42)};
144
- --aui-color-g-7: #{rgb-string(#1c5848)};
145
- --aui-color-yellow: #{rgb-string(#edac2c)};
146
- --aui-color-y-0: #{rgb-string(#ba8a2d)};
147
- --aui-color-y-1: #{rgb-string(#f1c060)};
148
- --aui-color-y-2: #{rgb-string(#b0842d)};
149
- --aui-color-y-4: #{rgb-string(#7e622f)};
150
- --aui-color-y-6: #{rgb-string(#564831)};
151
- --aui-color-y-7: #{rgb-string(#695530)};
152
- --aui-color-red: #{rgb-string(#e2324f)};
153
- --aui-color-r-0: #{rgb-string(#b22f48)};
154
- --aui-color-r-1: #{rgb-string(#e9657b)};
155
- --aui-color-r-2: #{rgb-string(#a82e46)};
156
- --aui-color-r-4: #{rgb-string(#792b3f)};
157
- --aui-color-r-6: #{rgb-string(#532939)};
158
- --aui-color-r-7: #{rgb-string(#652a3c)};
159
- --aui-color-n-1: #{rgb-string(#eeeff3)};
160
- --aui-color-n-2: #{rgb-string(#c8c9cd)};
161
- --aui-color-n-3: #{rgb-string(#b8bac2)};
162
- --aui-color-n-4: #{rgb-string(#989aa2)};
163
- --aui-color-n-5: #{rgb-string(#90939f)};
164
- --aui-color-n-6: #{rgb-string(#787b87)};
165
- --aui-color-n-7: #{rgb-string(#5c5f6b)};
166
- --aui-color-n-8: #{rgb-string(#434652)};
167
- --aui-color-n-9: #{rgb-string(#181b27)};
168
- --aui-color-n-10: #{rgb-string(#242733)};
169
- --aui-color-origin-shadow: var(--aui-color-n-9);
170
- --aui-color-popper-bg: #{rgb-string(#383b47)};
171
- --aui-color-button-bg: #{rgb-string(#383b47)};
172
- --aui-color-main-bg: var(--aui-color-n-9);
173
- --aui-color-divider: var(--aui-color-n-8);
174
- --aui-color-border: var(--aui-color-n-7);
175
- --aui-color-main-text: var(--aui-color-n-1);
176
- --aui-color-secondary-text: var(--aui-color-n-2);
177
- --aui-color-help-text: var(--aui-color-n-4);
178
- --aui-color-disabled-text: var(--aui-color-n-6);
179
- --aui-color-placeholder-text: var(--aui-color-n-6);
180
- }
package/theme/_var.scss DELETED
@@ -1,80 +0,0 @@
1
- @use 'sass:math';
2
-
3
- @import 'base-var';
4
-
5
- $status-color-map: (
6
- success: use-rgb(green),
7
- warning: use-rgb(yellow),
8
- error: use-rgb(red),
9
- info: use-rgb(primary),
10
- );
11
-
12
- // input
13
- $input-size: (
14
- large: (
15
- height: use-var(inline-height-l),
16
- font-size: use-var(font-size-l),
17
- line-height: use-var(line-height-l),
18
- icon-size: use-var(icon-size-l),
19
- ),
20
- medium: (
21
- height: use-var(inline-height-m),
22
- font-size: use-var(font-size-m),
23
- line-height: use-var(line-height-m),
24
- icon-size: use-var(icon-size-m),
25
- ),
26
- small: (
27
- height: use-var(inline-height-s),
28
- font-size: use-var(font-size-m),
29
- line-height: use-var(line-height-m),
30
- icon-size: use-var(icon-size-m),
31
- ),
32
- mini: (
33
- height: use-var(inline-height-xs),
34
- font-size: use-var(font-size-s),
35
- line-height: use-var(line-height-s),
36
- icon-size: use-var(icon-size-s),
37
- ),
38
- );
39
-
40
- // Table
41
- $table-padding: 12px;
42
- $table-row-min-height: 58px;
43
- $table-cell-padding-v: 15px;
44
- $table-cell-padding-h: 10px;
45
-
46
- // Sort
47
- $sort-indicator-color: use-text-color(placeholder);
48
- $sort-indicator-color-active: use-text-color(secondary);
49
- $sort-indicator-size: 4px;
50
- $sort-indicator-margin: 4px;
51
-
52
- // Tabs
53
- $tab-label-padding-large: 16px 20px;
54
- $tab-label-padding-medium: 12px 20px;
55
- $tab-label-padding-small: 8px 16px;
56
- $tab-label-font-size-large: use-var(font-size-xl);
57
- $tab-label-font-size-medium: use-var(font-size-l);
58
- $tab-label-font-size-small: use-var(font-size-m);
59
- $tab-header-type-card-bg-color: use-rgb(n-9);
60
- $tab-scroll-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
61
- $tab-pagination-button-z-index: 3;
62
- $tab-label-z-index: 2;
63
- $tab-active-indicator-z-index: 1;
64
- $tab-label-focus-box-shadow: inset 0 0 0 3px use-rgba(primary, 0.3);
65
- $tab-header-close-icon-size: 16px;
66
- $tab-header-title-font-size: use-var(font-size-xxl);
67
- $tab-header-title-spacing: 20px;
68
- $tab-header-title-padding: 20px 0 12px;
69
-
70
- // date picker
71
- $date-picker-body-size: 216px;
72
- $date-picker-seprator-gap: 20px;
73
- $date-picker-row-gap: 8px;
74
- $date-picker-cell-size: 24px;
75
- $range-picker-body-width: 524px;
76
- $range-picker-panel-spacing: 32px;
77
- $range-picker-header-width: math.div(
78
- ($range-picker-body-width - $range-picker-panel-spacing),
79
- 2
80
- );