@uglifruits/theme 0.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 (3) hide show
  1. package/index.css +134 -0
  2. package/package.json +24 -0
  3. package/reset.css +62 -0
package/index.css ADDED
@@ -0,0 +1,134 @@
1
+ :root {
2
+ /* 主颜色 */
3
+ --u-color-primary: #f5a623;
4
+ --u-color-success: #13ce66;
5
+ --u-color-warning: #ffc82c;
6
+ --u-color-danger: #ff4949;
7
+ --u-color-info: #78a4fa;
8
+
9
+ /* 浅色 */
10
+ --u-color-primary-light: #fef4e3;
11
+ --u-color-success-light: #e3f9ed;
12
+ --u-color-warning-light: #fff8e6;
13
+ --u-color-danger-light: #ffe9e9;
14
+ --u-color-info-light: #eff4fe;
15
+
16
+ /* 更浅色 */
17
+ --u-color-primary-lighter: #fde8c4;
18
+ --u-color-success-lighter: #c4f3d9;
19
+ --u-color-warning-lighter: #fff1ca;
20
+ --u-color-danger-lighter: #ffd2d2;
21
+ --u-color-info-lighter: #dde8fe;
22
+
23
+ /* 深色(hover) */
24
+ --u-color-primary-dark: #d98a16;
25
+ --u-color-success-dark: #10af57;
26
+ --u-color-warning-dark: #d9aa25;
27
+ --u-color-danger-dark: #d93e3e;
28
+ --u-color-info-dark: #668bd5;
29
+
30
+ /* 更深色(active) */
31
+ --u-color-primary-darker: #b8730f;
32
+ --u-color-success-darker: #0e9449;
33
+ --u-color-warning-darker: #b89020;
34
+ --u-color-danger-darker: #b83535;
35
+ --u-color-info-darker: #5676b4;
36
+
37
+ /* 中性色 */
38
+ --u-color-white: #ffffff;
39
+ --u-color-black: #000000;
40
+
41
+ --u-color-text: #1f1d24;
42
+ --u-color-text-regular: #4a4553;
43
+ --u-color-text-secondary: #6f6879;
44
+ --u-color-text-placeholder: #a8a3b0;
45
+ --u-color-text-disabled: #c2bec9;
46
+
47
+ --u-color-border: #dcdfe6;
48
+ --u-color-border-light: #e4e7ed;
49
+ --u-color-border-lighter: #ebeef5;
50
+
51
+ --u-color-bg: #ffffff;
52
+ --u-color-bg-page: #f8f7fb;
53
+ --u-color-bg-disabled: #f5f6f8;
54
+
55
+ /* 字体 */
56
+ --u-font-family:
57
+ -apple-system, blinkmacsystemfont, "Helvetica Neue", "PingFang SC",
58
+ "Hiragino Sans GB", "Microsoft YaHei", arial, sans-serif;
59
+ --u-font-size-sm: 12px;
60
+ --u-font-size-base: 14px;
61
+ --u-font-size-lg: 16px;
62
+ --u-font-weight-medium: 500;
63
+ --u-font-family-mono: "JetBrains Mono", "Fira Code", "SFMono-Regular", consolas, monospace;
64
+
65
+ /* 圆角 */
66
+ --u-border-radius-sm: 2px;
67
+ --u-border-radius-base: 4px;
68
+ --u-border-radius-lg: 8px;
69
+ --u-border-radius-round: 999px;
70
+
71
+ /* 动效 */
72
+ --u-transition-duration: 0.2s;
73
+ --u-transition-function: ease-in-out;
74
+ --u-transition-base: all var(--u-transition-duration) var(--u-transition-function);
75
+
76
+ /* 阴影 */
77
+ --u-box-shadow-sm: 0 1px 2px rgb(31 29 36 / 8%);
78
+ --u-box-shadow-base: 0 2px 8px rgb(31 29 36 / 12%);
79
+ --u-box-shadow-lg: 0 6px 20px rgb(31 29 36 / 16%);
80
+ }
81
+
82
+ /* 暗色模式，给<html>加上.dark即可 */
83
+ html.dark {
84
+ /* 主色在暗底上需要提亮才够对比度 */
85
+ --u-color-primary: #ffb84d;
86
+ --u-color-success: #3ed598;
87
+ --u-color-warning: #ffc82c;
88
+ --u-color-danger: #ff6b6b;
89
+ --u-color-info: #8ab0ff;
90
+
91
+ /* 浅色系在暗色下翻转成暗底 */
92
+ --u-color-primary-light: #3a2e1a;
93
+ --u-color-success-light: #16332a;
94
+ --u-color-warning-light: #3a3118;
95
+ --u-color-danger-light: #3a1f24;
96
+ --u-color-info-light: #1f2a3d;
97
+
98
+ --u-color-primary-lighter: #4d3d21;
99
+ --u-color-success-lighter: #1d4536;
100
+ --u-color-warning-lighter: #4d4021;
101
+ --u-color-danger-lighter: #4d282e;
102
+ --u-color-info-lighter: #293850;
103
+
104
+ /* 暗色下 hover/active 用更亮的色 */
105
+ --u-color-primary-dark: #ffc86b;
106
+ --u-color-success-dark: #5ce1ae;
107
+ --u-color-warning-dark: #ffd65c;
108
+ --u-color-danger-dark: #ff8e8e;
109
+ --u-color-info-dark: #a6c3ff;
110
+
111
+ --u-color-primary-darker: #ffd98a;
112
+ --u-color-success-darker: #7de9bf;
113
+ --u-color-warning-darker: #ffe08a;
114
+ --u-color-danger-darker: #ffafaf;
115
+ --u-color-info-darker: #c2d4ff;
116
+
117
+ --u-color-text: #e8e4f0;
118
+ --u-color-text-regular: #cfc9dc;
119
+ --u-color-text-secondary: #a9a2b8;
120
+ --u-color-text-placeholder: #7e778c;
121
+ --u-color-text-disabled: #5c5668;
122
+
123
+ --u-color-border: #3a3345;
124
+ --u-color-border-light: #322c3c;
125
+ --u-color-border-lighter: #2a2432;
126
+
127
+ --u-color-bg: #1f1b27;
128
+ --u-color-bg-page: #17141d;
129
+ --u-color-bg-disabled: #2a2432;
130
+
131
+ --u-box-shadow-sm: 0 1px 2px rgb(0 0 0 / 32%);
132
+ --u-box-shadow-base: 0 2px 8px rgb(0 0 0 / 40%);
133
+ --u-box-shadow-lg: 0 6px 20px rgb(0 0 0 / 48%);
134
+ }
package/package.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "name": "@uglifruits/theme",
3
+ "version": "0.1.0",
4
+ "exports": {
5
+ ".": "./index.css",
6
+ "./index.css": "./index.css",
7
+ "./reset.css": "./reset.css"
8
+ },
9
+ "files": [
10
+ "index.css",
11
+ "reset.css"
12
+ ],
13
+ "description": "Theme styles for uglifruits UI",
14
+ "keywords": [
15
+ "theme",
16
+ "colorful",
17
+ "easy"
18
+ ],
19
+ "author": "xylanny",
20
+ "license": "MIT",
21
+ "scripts": {
22
+ "test": "echo \"just test placeholder!\" && exit 0"
23
+ }
24
+ }
package/reset.css ADDED
@@ -0,0 +1,62 @@
1
+ /* 统一采用边框-盒模型，width和height同时包含内容、内边距和边框 */
2
+ html {
3
+ box-sizing: border-box;
4
+ }
5
+
6
+ *,
7
+ *::before,
8
+ *::after {
9
+ box-sizing: inherit;
10
+ }
11
+
12
+ /* 移除正文块级元素的默认外距 */
13
+ body,
14
+ h1,
15
+ h2,
16
+ h3,
17
+ h4,
18
+ h5,
19
+ h6,
20
+ p,
21
+ figure,
22
+ blockquote,
23
+ dl,
24
+ dd {
25
+ margin: 0;
26
+ }
27
+
28
+ /* 列表时移除样式，保留ul/ol的语义和缩进能力 */
29
+ ul[role="list"],
30
+ ol[role="list"] {
31
+ list-style: none;
32
+ padding-inline-start: 0;
33
+ }
34
+
35
+ /* 防止内联元素底部间隙，组件内图片更可控 */
36
+ img,
37
+ picture,
38
+ video,
39
+ canvas,
40
+ svg {
41
+ display: block;
42
+ max-width: 100%;
43
+ }
44
+
45
+ /* 修正表单控件元素的字体 */
46
+ input,
47
+ button,
48
+ textarea,
49
+ select {
50
+ font: inherit;
51
+ }
52
+
53
+ /* 文本溢出处理，长单词不撑破容器 */
54
+ p,
55
+ h1,
56
+ h2,
57
+ h3,
58
+ h4,
59
+ h5,
60
+ h6 {
61
+ overflow-wrap: break-word;
62
+ }