fu-kit 1.0.1 → 1.1.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 (17) hide show
  1. package/package.json +1 -1
  2. package/reset.scss +62 -11
  3. package/scss.scss +2 -1
  4. package/src/components/UiButton.vue +1 -1
  5. package/src/components/UiCodeView.vue +2 -2
  6. package/src/components/UiCopy.vue +0 -5
  7. package/src/components/UiIconProvider.vue +948 -501
  8. package/src/components/UiTagInput.vue +472 -0
  9. package/src/components/UiTime.vue +127 -0
  10. package/src/components/UiVar.vue +119 -0
  11. package/src/entry.js +3 -0
  12. package/src/scss-kit/fx.scss +10 -0
  13. package/src/scss-kit/pal_dark.scss +9 -5
  14. package/src/scss-kit/pal_fu.scss +18 -14
  15. package/src/scss-kit/pal_light.scss +14 -10
  16. package/src/scss-kit/typo_default.scss +1 -1
  17. package/src/scss-kit/ui.scss +6 -0
package/src/entry.js CHANGED
@@ -19,5 +19,8 @@ export { default as UiIconProvider } from './components/UiIconProvider.vue'
19
19
  export { default as UiIcon } from './components/UiIcon.vue'
20
20
  export { default as UiProgressRadial } from './components/UiProgressRadial.vue'
21
21
  export { default as UiImg } from './components/UiImg.vue'
22
+ export { default as UiTime } from './components/UiTime.vue'
23
+ export { default as UiVar } from './components/UiVar.vue'
24
+ export { default as UiTagInput } from './components/UiTagInput.vue'
22
25
 
23
26
  export { default as browserTheme } from './utils/browserTheme.js'
package/src/scss-kit/fx.scss ADDED
@@ -0,0 +1,10 @@
1
+ @mixin fx-spin-keyframes {
2
+ @keyframes fx-spin {
3
+ 0% {
4
+ transform: rotate(0);
5
+ }
6
+ 100% {
7
+ transform: rotate(360deg);
8
+ }
9
+ }
10
+ }
package/src/scss-kit/pal_dark.scss CHANGED
@@ -1,7 +1,10 @@
1
1
  @import "colors";
2
2
 
3
3
  @mixin pal_dark {
4
- --rgb-back: #{hex2rgb(#000000)};
4
+ --ui-color-scheme: dark;
5
+
6
+ --rgb-back-edge: #{hex2rgb(#000000)};
7
+ --rgb-back: #{hex2rgb(#141618)};
5
8
  --rgb-grey100: #{hex2rgb(#1a1e21)};
6
9
  --rgb-grey200: #{hex2rgb(#252b2f)};
7
10
  --rgb-grey300: #{hex2rgb(#2c3338)};
@@ -12,6 +15,7 @@
12
15
  --rgb-grey800: #{hex2rgb(#DCDCDC)};
13
16
  --rgb-grey900: #{hex2rgb(#FAFAFA)};
14
17
  --rgb-front: #{hex2rgb(#FFFFFF)};
18
+ --rgb-front-edge: #{hex2rgb(#FFFFFF)};
15
19
 
16
20
  --rgb-primary: #{hex2rgb(#0095ff)};
17
21
  --rgb-secondary: #{hex2rgb(#4179a2)};
@@ -52,7 +56,7 @@
52
56
  --pal-text-dimm: rgb(var(--rgb-grey600));
53
57
  --pal-block: rgb(var(--rgb-grey100));
54
58
  --pal-block-border: rgb(var(--rgb-grey200));
55
- --pal-bg: rgb(var(--rgb-grey200));
59
+ --pal-bg: rgb(var(--rgb-back));
56
60
  --pal-overlay: rgba(var(--rgb-grey500), 0.2);
57
61
 
58
62
  --pal-link: rgb(var(--rgb-link));
@@ -67,7 +71,7 @@
67
71
  --ui-pal-lateral: var(--pal-grey300);
68
72
  --ui-pal-text: var(--pal-front);
69
73
  --ui-pal-text-select: var(--pal-front);
70
- --ui-pal-placeholder: var(--pal-grey400);
71
- --ui-pal-disabled: var(--pal-grey300);
72
- --ui-pal-disabled-border: var(--pal-grey500);
74
+ --ui-pal-placeholder: var(--pal-grey500);
75
+ --ui-pal-disabled: var(--pal-grey100);
76
+ --ui-pal-disabled-border: var(--pal-grey400);
73
77
  }
package/src/scss-kit/pal_fu.scss CHANGED
@@ -1,7 +1,10 @@
1
1
  @import "colors";
2
2
 
3
3
  @mixin pal_fu {
4
- --rgb-back: #{hex2rgb(#000000)};
4
+ --ui-color-scheme: dark;
5
+
6
+ --rgb-back-edge: #{hex2rgb(#000000)};
7
+ --rgb-back: #{hex2rgb(#141618)};
5
8
  --rgb-grey100: #{hex2rgb(#1a1e21)};
6
9
  --rgb-grey200: #{hex2rgb(#252b2f)};
7
10
  --rgb-grey300: #{hex2rgb(#2c3338)};
@@ -12,17 +15,18 @@
12
15
  --rgb-grey800: #{hex2rgb(#DCDCDC)};
13
16
  --rgb-grey900: #{hex2rgb(#FAFAFA)};
14
17
  --rgb-front: #{hex2rgb(#FFFFFF)};
18
+ --rgb-front-edge: #{hex2rgb(#FFFFFF)};
15
19
 
16
- --rgb-primary: #{hex2rgb(#ff7300)};
17
- --rgb-secondary: #{hex2rgb(#ffecdd)};
18
- --rgb-positive: #{hex2rgb(#ff4400)};
19
- --rgb-warning: #{hex2rgb(#ffc500)};
20
+ --rgb-primary: #{hex2rgb(#9f00a9)};
21
+ --rgb-secondary: #{hex2rgb(#7821c9)};
22
+ --rgb-positive: #{hex2rgb(#2eaf8f)};
23
+ --rgb-warning: #{hex2rgb(#ff8000)};
20
24
  --rgb-negative: #{hex2rgb(#ff3535)};
21
25
 
22
- --rgb-link: #{hex2rgb(#48b4ff)};
23
- --rgb-link-active: #{hex2rgb(#59caec)};
24
- --rgb-link-hover: #{hex2rgb(#59caec)};
25
- --rgb-link-visited: #{hex2rgb(#b38dff)};
26
+ --rgb-link: #{hex2rgb(#bc48ff)};
27
+ --rgb-link-active: #{hex2rgb(#c562ff)};
28
+ --rgb-link-hover: #{hex2rgb(#c562ff)};
29
+ --rgb-link-visited: #{hex2rgb(#bc48ff)};
26
30
 
27
31
  --pal-back: rgb(var(--rgb-back));
28
32
  --pal-grey100: rgb(var(--rgb-grey100));
@@ -43,7 +47,7 @@
43
47
  --pal-negative: rgb(var(--rgb-negative));
44
48
 
45
49
  --pal-primary-acc: rgb(var(--rgb-front));
46
- --pal-secondary-acc: rgb(var(--rgb-back));
50
+ --pal-secondary-acc: rgb(var(--rgb-front));
47
51
  --pal-positive-acc: rgb(var(--rgb-front));
48
52
  --pal-warning-acc: rgb(var(--rgb-front));
49
53
  --pal-negative-acc: rgb(var(--rgb-front));
@@ -52,7 +56,7 @@
52
56
  --pal-text-dimm: rgb(var(--rgb-grey600));
53
57
  --pal-block: rgb(var(--rgb-grey100));
54
58
  --pal-block-border: rgb(var(--rgb-grey200));
55
- --pal-bg: rgb(var(--rgb-grey200));
59
+ --pal-bg: rgb(var(--rgb-back));
56
60
  --pal-overlay: rgba(var(--rgb-grey500), 0.2);
57
61
 
58
62
  --pal-link: rgb(var(--rgb-link));
@@ -67,7 +71,7 @@
67
71
  --ui-pal-lateral: var(--pal-grey300);
68
72
  --ui-pal-text: var(--pal-front);
69
73
  --ui-pal-text-select: var(--pal-front);
70
- --ui-pal-placeholder: var(--pal-grey400);
71
- --ui-pal-disabled: var(--pal-grey300);
72
- --ui-pal-disabled-border: var(--pal-grey500);
74
+ --ui-pal-placeholder: var(--pal-grey500);
75
+ --ui-pal-disabled: var(--pal-grey100);
76
+ --ui-pal-disabled-border: var(--pal-grey400);
73
77
  }
package/src/scss-kit/pal_light.scss CHANGED
@@ -1,6 +1,9 @@
1
1
  @import "colors";
2
2
 
3
3
  @mixin pal_light {
4
+ --ui-color-scheme: light;
5
+
6
+ --rgb-back-edge: #{hex2rgb(#FFFFFF)};
4
7
  --rgb-back: #{hex2rgb(#FFFFFF)};
5
8
  --rgb-grey100: #{hex2rgb(#FAFAFA)};
6
9
  --rgb-grey200: #{hex2rgb(#DCDCDC)};
@@ -11,7 +14,8 @@
11
14
  --rgb-grey700: #{hex2rgb(#363636)};
12
15
  --rgb-grey800: #{hex2rgb(#1C1C1C)};
13
16
  --rgb-grey900: #{hex2rgb(#151515)};
14
- --rgb-front: #{hex2rgb(#000000)};
17
+ --rgb-front: #{hex2rgb(#141618)};
18
+ --rgb-front-edge: #{hex2rgb(#000000)};
15
19
 
16
20
  --rgb-primary: #{hex2rgb(#0095ff)};
17
21
  --rgb-secondary: #{hex2rgb(#131315)};
@@ -50,8 +54,8 @@
50
54
 
51
55
  --pal-text: rgb(var(--rgb-grey900));
52
56
  --pal-text-dimm: rgb(var(--rgb-grey600));
53
- --pal-block: rgb(var(--rgb-grey200));
54
- --pal-block-border: rgb(var(--rgb-grey300));
57
+ --pal-block: rgb(var(--rgb-grey100));
58
+ --pal-block-border: rgb(var(--rgb-grey200));
55
59
  --pal-bg: rgb(var(--rgb-back));
56
60
  --pal-overlay: rgba(var(--rgb-grey500), 0.2);
57
61
 
@@ -62,12 +66,12 @@
62
66
 
63
67
  --ui-rgb: var(--rgb-primary);
64
68
  --ui-pal: var(--pal-primary);
65
- --ui-pal-bg: var(--pal-bg);
69
+ --ui-pal-bg: var(--pal-grey100);
66
70
  --ui-pal-acc: var(--pal-primary-acc);
67
- --ui-pal-lateral: rgb(var(--rgb-grey200));
68
- --ui-pal-text: rgb(var(--rgb-front));
69
- --ui-pal-text-select: rgb(var(--rgb-back));
70
- --ui-pal-placeholder: rgb(var(--rgb-grey300));
71
- --ui-pal-disabled: rgb(var(--rgb-grey100));
72
- --ui-pal-disabled-border: rgb(var(--rgb-grey300));
71
+ --ui-pal-lateral: var(--pal-grey300);
72
+ --ui-pal-text: var(--pal-front);
73
+ --ui-pal-text-select: var(--pal-front);
74
+ --ui-pal-placeholder: var(--pal-grey500);
75
+ --ui-pal-disabled: var(--pal-grey100);
76
+ --ui-pal-disabled-border: var(--pal-grey400);
73
77
  }
package/src/scss-kit/typo_default.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  $spacing_growth_k: 3;
2
2
 
3
3
  @mixin typo_default {
4
- --ui-lt-h: 36px;
4
+ --ui-lt-h: 40px;
5
5
  --ui-lt-h-sub: 22px;
6
6
  --ui-lt-check-border-width: 2px;
7
7
  --ui-switch-h: 24px;
package/src/scss-kit/ui.scss CHANGED
@@ -47,3 +47,9 @@
47
47
  -ms-overflow-style: none;
48
48
  scrollbar-width: none;
49
49
  }
50
+
51
+ @mixin compose_ui_theme($theme) {
52
+ --ui-rgb: var(--rgb-#{$theme});
53
+ --ui-pal: var(--pal-#{$theme});
54
+ --ui-pal-acc: var(--pal-#{$theme}-acc);
55
+ }