@keenmate/pure-css 1.0.0-rc06 → 1.0.0-rc08

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.
package/dist/css/base.css CHANGED
@@ -9,16 +9,25 @@
9
9
  }
10
10
 
11
11
  :root {
12
- --base-accent-color: #007bff;
13
- --base-accent-color-hover: rgb(20%, 58.5882352941%, 100%);
14
- --base-accent-color-active: rgb(40%, 68.9411764706%, 100%);
15
- --base-accent-color-light: rgba(0, 123, 255, 0.05);
16
- --base-accent-color-light-hover: rgba(0, 123, 255, 0.12);
17
- --base-text-color-1: #2c3e50;
18
- --base-text-color-2: #6c757d;
19
- --base-text-color-3: #7a8a99;
20
- --base-text-color-4: #a3b1bf;
12
+ --base-accent-color: #0ea5e9;
13
+ --base-accent-color-hover: #0284c7;
14
+ --base-accent-color-active: #0369a1;
15
+ --base-accent-color-light: rgba(14, 165, 233, 0.05);
16
+ --base-accent-color-light-hover: rgba(14, 165, 233, 0.08);
17
+ --base-primary-color: var(--base-accent-color, #0ea5e9);
18
+ --base-primary-color-hover: var(--base-accent-color-hover, #0284c7);
19
+ --base-primary-color-active: var(--base-accent-color-active, #0369a1);
20
+ --base-primary-color-light: var(--base-accent-color-light, rgba(14, 165, 233, 0.05));
21
+ --base-primary-color-light-hover: var(--base-accent-color-light-hover, rgba(14, 165, 233, 0.08));
22
+ --base-secondary-color: #6c757d;
23
+ --base-secondary-color-hover: #545b62;
24
+ --base-text-color-1: #334155;
25
+ --base-text-color-2: #64748b;
26
+ --base-text-color-3: #94a3b8;
27
+ --base-text-color-4: #cbd5e1;
21
28
  --base-text-color-on-accent: #ffffff;
29
+ --base-text-on-primary: var(--base-text-color-on-accent, #ffffff);
30
+ --base-text-on-secondary: #ffffff;
22
31
  --base-main-bg: #ffffff;
23
32
  --base-page-bg: #f8f9fa;
24
33
  --base-subtle-bg: #e9ecef;
@@ -27,62 +36,73 @@
27
36
  --base-shadow-color: rgba(0, 0, 0, 0.15);
28
37
  --base-hover-bg: #e9ecef;
29
38
  --base-active-bg: rgb(85.5830753354%, 87.5490196078%, 89.5149638803%);
30
- --base-disabled-bg: #e9ecef;
31
- --base-elevated-bg: #f5f5f5;
32
- --base-border-color: #e1e5e9;
33
- --base-border: 1px solid #e1e5e9;
39
+ --base-disabled-bg: #f1f3f5;
40
+ --base-elevated-bg: #f8f9fa;
41
+ --base-text-inverted: #ffffff;
42
+ --base-border-width: 1px;
43
+ --base-border-color: #e2e8f0;
44
+ --base-border: 1px solid #e2e8f0;
45
+ --base-checkbox-border-color: #e2e8f0;
34
46
  --base-input-bg: #ffffff;
35
- --base-input-color: #495057;
36
- --base-input-border: 1px solid #ced4da;
37
- --base-input-border-hover: 1px solid #b8bfc6;
38
- --base-input-border-focus: 1px solid #007bff;
39
- --base-input-placeholder-color: #a3b1bf;
47
+ --base-input-color: #334155;
48
+ --base-input-border: 1px solid #e2e8f0;
49
+ --base-input-border-color: #e2e8f0;
50
+ --base-input-border-hover: 1px solid #0ea5e9;
51
+ --base-input-border-focus: 1px solid #0ea5e9;
52
+ --base-input-placeholder-color: #cbd5e1;
40
53
  --base-input-bg-disabled: rgba(255, 255, 255, 0.5);
54
+ --base-input-clear-color: #94a3b8;
55
+ --base-input-clear-bg-hover: #e9ecef;
41
56
  --base-input-size-xs-height: 3.1;
42
57
  --base-input-size-sm-height: 3.3;
43
58
  --base-input-size-md-height: 3.5;
44
59
  --base-input-size-lg-height: 3.8;
45
60
  --base-input-size-xl-height: 4.1;
46
61
  --base-dropdown-bg: #ffffff;
47
- --base-dropdown-border: 1px solid #e1e5e9;
62
+ --base-dropdown-border: 1px solid #e2e8f0;
48
63
  --base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
49
64
  --base-tooltip-bg: #2c3e50;
50
65
  --base-tooltip-text-color: #ffffff;
51
- --base-success-color: #22c55e;
52
- --base-success-color-hover: rgb(10.3896103896%, 60.1986249045%, 28.7242169595%);
53
- --base-success-bg-light: rgba(34, 197, 94, 0.1);
54
- --base-success-bg-subtle: rgba(34, 197, 94, 0.08);
55
- --base-success-border: rgba(34, 197, 94, 0.2);
66
+ --base-tooltip-color: #ffffff;
67
+ --base-success-color: #10b981;
68
+ --base-success-bg: #10b981;
69
+ --base-success-color-hover: #059669;
70
+ --base-success-bg-light: rgba(16, 185, 129, 0.1);
71
+ --base-success-bg-subtle: rgba(16, 185, 129, 0.08);
72
+ --base-success-border: rgba(16, 185, 129, 0.2);
56
73
  --base-success-text: #155724;
57
74
  --base-success-text-light: #d4edda;
58
75
  --base-text-on-success: #ffffff;
59
76
  --base-danger-color: #ef4444;
60
- --base-danger-color-hover: rgb(92.1491355163%, 8.2430213465%, 8.2430213465%);
77
+ --base-danger-bg: #ef4444;
78
+ --base-danger-color-hover: #dc2626;
61
79
  --base-danger-bg-light: rgba(239, 68, 68, 0.1);
62
80
  --base-danger-bg-subtle: rgba(239, 68, 68, 0.08);
63
81
  --base-danger-border: rgba(239, 68, 68, 0.2);
64
82
  --base-danger-text: #721c24;
65
83
  --base-danger-text-light: #f8d7da;
66
84
  --base-text-on-danger: #ffffff;
67
- --base-warning-color: #f97316;
68
- --base-warning-color-hover: rgb(84.1086225285%, 35.7371400443%, 2.1658872754%);
69
- --base-warning-bg-light: rgba(249, 115, 22, 0.1);
70
- --base-warning-bg-subtle: rgba(249, 115, 22, 0.08);
71
- --base-warning-border: rgba(249, 115, 22, 0.2);
85
+ --base-warning-color: #f59e0b;
86
+ --base-warning-bg: #f59e0b;
87
+ --base-warning-color-hover: #d97706;
88
+ --base-warning-bg-light: rgba(245, 158, 11, 0.1);
89
+ --base-warning-bg-subtle: rgba(245, 158, 11, 0.08);
90
+ --base-warning-border: rgba(245, 158, 11, 0.2);
72
91
  --base-warning-text: #856404;
73
92
  --base-warning-text-light: #fff3cd;
74
- --base-text-on-warning: #212529;
75
- --base-info-color: #17a2b8;
76
- --base-info-color-hover: rgb(6.7973856209%, 47.8772378517%, 54.3790849673%);
77
- --base-info-bg-light: rgba(23, 162, 184, 0.1);
78
- --base-info-bg-subtle: rgba(23, 162, 184, 0.08);
79
- --base-info-border: rgba(23, 162, 184, 0.2);
93
+ --base-text-on-warning: #ffffff;
94
+ --base-info-color: #06b6d4;
95
+ --base-info-bg: #06b6d4;
96
+ --base-info-color-hover: #0891b2;
97
+ --base-info-bg-light: rgba(6, 182, 212, 0.1);
98
+ --base-info-bg-subtle: rgba(6, 182, 212, 0.08);
99
+ --base-info-border: rgba(6, 182, 212, 0.2);
80
100
  --base-info-text: #0c5460;
81
101
  --base-info-text-light: #d1ecf1;
82
102
  --base-text-on-info: #ffffff;
83
103
  --base-hover-overlay: rgba(0, 0, 0, 0.04);
84
104
  --base-active-overlay: rgba(0, 0, 0, 0.08);
85
- --base-focus-ring-color: #007bff;
105
+ --base-focus-ring-color: #0ea5e9;
86
106
  --base-focus-ring-width: 3px;
87
107
  --base-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
88
108
  --base-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
@@ -103,45 +123,101 @@
103
123
  --base-border-radius-sm: 0.4;
104
124
  --base-border-radius-md: 0.6;
105
125
  --base-border-radius-lg: 0.8;
126
+ --base-rem: 1rem;
127
+ --base-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 18 6-6-6-6%22/%3E%3C/svg%3E");
128
+ --base-icon-caret-down: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M12 15 6 9h12z%22/%3E%3C/svg%3E");
129
+ --base-icon-caret-up: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M12 9 6 15h12z%22/%3E%3C/svg%3E");
130
+ --base-icon-close: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18%22/%3E%3Cpath d=%22m6 6 12 12%22/%3E%3C/svg%3E");
131
+ --base-icon-clear: var(--base-icon-close, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18%22/%3E%3Cpath d=%22m6 6 12 12%22/%3E%3C/svg%3E"));
132
+ --base-icon-remove: var(--base-icon-close, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18%22/%3E%3Cpath d=%22m6 6 12 12%22/%3E%3C/svg%3E"));
133
+ --base-icon-expand: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22M12 5v14%22/%3E%3C/svg%3E");
134
+ --base-icon-collapse: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3C/svg%3E");
135
+ --base-icon-add: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22M12 5v14%22/%3E%3C/svg%3E");
136
+ --base-icon-edit: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z%22/%3E%3C/svg%3E");
137
+ --base-icon-delete: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h18%22/%3E%3Cpath d=%22M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2%22/%3E%3Cpath d=%22M10 11v6%22/%3E%3Cpath d=%22M14 11v6%22/%3E%3C/svg%3E");
138
+ --base-icon-search: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/svg%3E");
139
+ --base-color-1: #f59e0b;
140
+ --base-color-2: #ec4899;
141
+ --base-color-3: #10b981;
142
+ --base-color-4: #0ea5e9;
143
+ --base-color-5: #8b5cf6;
144
+ --base-color-6: #6366f1;
145
+ --base-color-7: #64748b;
146
+ --base-color-8: #0284c7;
147
+ --base-color-9: #334155;
148
+ --base-color-1-text: #1a1a1a;
149
+ --base-color-2-text: #ffffff;
150
+ --base-color-3-text: #ffffff;
151
+ --base-color-4-text: #ffffff;
152
+ --base-color-5-text: #ffffff;
153
+ --base-color-6-text: #ffffff;
154
+ --base-color-7-text: #ffffff;
155
+ --base-color-8-text: #ffffff;
156
+ --base-color-9-text: #ffffff;
157
+ --base-space-xs: 0.4;
158
+ --base-space-sm: 0.8;
159
+ --base-space-md: 1.2;
160
+ --base-space-base: 1.6;
161
+ --base-space-lg: 2.4;
162
+ --base-space-xl: 3.2;
163
+ --base-space-2xl: 4.8;
164
+ --base-shadow-sm: 0 1px 3px var(--base-shadow-color);
165
+ --base-shadow-md: 0 2px 8px var(--base-shadow-color);
166
+ --base-shadow-lg: 0 4px 12px var(--base-shadow-color);
167
+ --base-duration-fast: 0.1s;
168
+ --base-duration-normal: 0.15s;
169
+ --base-duration-medium: 0.25s;
170
+ --base-duration-slow: 0.3s;
171
+ --base-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
172
+ --base-ease-out: cubic-bezier(0, 0, 0.2, 1);
173
+ --base-ease-in: cubic-bezier(0.4, 0, 1, 1);
174
+ --base-z-dropdown: 7500;
175
+ --base-z-modal-backdrop: 6000;
176
+ --base-z-modal: 7000;
177
+ --base-z-popover: 7600;
178
+ --base-z-toast: 8000;
179
+ --base-z-tooltip: 9000;
106
180
  color-scheme: light;
107
- --pc-main-bg: #f8f9fa;
108
- --pc-page-bg: #f8f9fa;
109
- --pc-subtle-bg: #ffffff;
110
- --pc-text-color-1: #2c3e50;
111
- --pc-text-color-2: #6c757d;
112
- --pc-accent: #007bff;
113
- --pc-accent-hover: rgba(0, 123, 255, 0.12);
181
+ --pc-main-bg: #ffffff;
182
+ --pc-page-bg: var(--base-page-bg, #f8f9fa);
183
+ --pc-subtle-bg: #e9ecef;
184
+ --pc-hover-bg: var(--base-hover-bg, #e9ecef);
185
+ --pc-active-bg: var(--base-active-bg, rgb(85.5830753354%, 87.5490196078%, 89.5149638803%));
186
+ --pc-text-color-1: var(--base-text-color-1, #334155);
187
+ --pc-text-color-2: var(--base-text-color-2, #64748b);
188
+ --pc-accent: var(--base-accent-color, #0ea5e9);
189
+ --pc-accent-hover: rgba(14, 165, 233, 0.08);
114
190
  --pc-accent-light: color-mix(in srgb, var(--pc-accent) 5%, transparent);
115
191
  --pc-link-color: var(--pc-accent);
116
192
  --pc-link-color-hover: color-mix(in srgb, var(--pc-link-color), currentColor 50%);
117
193
  --pc-link-color-visited: var(--pc-link-color);
118
- --pc-border-color: var(--base-border-color, #e1e5e9);
119
- --pc-success: #22c55e;
120
- --pc-warning: #f97316;
194
+ --pc-border-color: var(--base-border-color, #e2e8f0);
195
+ --pc-success: #10b981;
196
+ --pc-warning: #f59e0b;
121
197
  --pc-danger: #ef4444;
122
- --pc-info: #17a2b8;
198
+ --pc-info: #06b6d4;
123
199
  --pc-success-text: #155724;
124
200
  --pc-danger-text: #721c24;
125
201
  --pc-warning-text: #856404;
126
202
  --pc-info-text: #0c5460;
127
- --pc-color-1: transparent;
128
- --pc-color-2: transparent;
129
- --pc-color-3: transparent;
130
- --pc-color-4: transparent;
131
- --pc-color-5: transparent;
132
- --pc-color-6: transparent;
133
- --pc-color-7: transparent;
134
- --pc-color-8: transparent;
135
- --pc-color-9: transparent;
136
- --pc-color-1-text: #ffffff;
137
- --pc-color-2-text: #ffffff;
138
- --pc-color-3-text: #ffffff;
139
- --pc-color-4-text: #ffffff;
140
- --pc-color-5-text: #ffffff;
141
- --pc-color-6-text: #ffffff;
142
- --pc-color-7-text: #ffffff;
143
- --pc-color-8-text: #ffffff;
144
- --pc-color-9-text: #ffffff;
203
+ --pc-color-1: var(--base-color-1, #f59e0b);
204
+ --pc-color-2: var(--base-color-2, #ec4899);
205
+ --pc-color-3: var(--base-color-3, #10b981);
206
+ --pc-color-4: var(--base-color-4, #0ea5e9);
207
+ --pc-color-5: var(--base-color-5, #8b5cf6);
208
+ --pc-color-6: var(--base-color-6, #6366f1);
209
+ --pc-color-7: var(--base-color-7, #64748b);
210
+ --pc-color-8: var(--base-color-8, #0284c7);
211
+ --pc-color-9: var(--base-color-9, #334155);
212
+ --pc-color-1-text: var(--base-color-1-text, #1a1a1a);
213
+ --pc-color-2-text: var(--base-color-2-text, #ffffff);
214
+ --pc-color-3-text: var(--base-color-3-text, #ffffff);
215
+ --pc-color-4-text: var(--base-color-4-text, #ffffff);
216
+ --pc-color-5-text: var(--base-color-5-text, #ffffff);
217
+ --pc-color-6-text: var(--base-color-6-text, #ffffff);
218
+ --pc-color-7-text: var(--base-color-7-text, #ffffff);
219
+ --pc-color-8-text: var(--base-color-8-text, #ffffff);
220
+ --pc-color-9-text: var(--base-color-9-text, #ffffff);
145
221
  --pc-border-radius-sm: calc(var(--base-border-radius-sm, 0.4) * 1rem);
146
222
  --pc-border-radius: calc(var(--base-border-radius-md, 0.6) * 1rem);
147
223
  --pc-border-radius-lg: calc(var(--base-border-radius-lg, 0.8) * 1rem);
@@ -0,0 +1,27 @@
1
+ :host {
2
+ box-sizing: border-box;
3
+ color: var(--base-text-color-1);
4
+ font-family: var(--base-font-family);
5
+ font-size: medium;
6
+ font-style: normal;
7
+ font-weight: normal;
8
+ font-variant: normal;
9
+ line-height: 1.5;
10
+ letter-spacing: normal;
11
+ word-spacing: normal;
12
+ text-align: start;
13
+ text-indent: 0;
14
+ text-transform: none;
15
+ text-shadow: none;
16
+ white-space: normal;
17
+ word-break: normal;
18
+ overflow-wrap: normal;
19
+ writing-mode: horizontal-tb;
20
+ accent-color: auto;
21
+ }
22
+
23
+ *,
24
+ *::before,
25
+ *::after {
26
+ box-sizing: inherit;
27
+ }