@hyvor/design 2.1.21 → 2.1.22-beta.2

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.
@@ -1,10 +1,9 @@
1
1
  <script lang="ts">
2
2
  import ConfirmModalProvider from './../Modal/ConfirmModalProvider.svelte';
3
- // import InternationalizationProvider from './../Internationalization/InternationalizationProvider.svelte';
4
3
  import DarkProvider from './../Dark/DarkProvider.svelte';
5
- import '../../index.js';
6
4
  import ToastProvider from '../Toast/ToastProvider.svelte';
7
5
  import FileUploaderProvider from '../FileUploader/FileUploaderProvider.svelte';
6
+ import fontsCss from './fonts.css?inline';
8
7
 
9
8
  interface Props {
10
9
  dark?: boolean;
@@ -14,6 +13,11 @@
14
13
  let { dark = false, children }: Props = $props();
15
14
  </script>
16
15
 
16
+ <svelte:head>
17
+ <link rel="preconnect" href="https://media.hyvor.com" />
18
+ {@html '<style>' + fontsCss + '</style>'}
19
+ </svelte:head>
20
+
17
21
  <div id="hds-base">
18
22
  {@render children?.()}
19
23
  </div>
@@ -25,3 +29,189 @@
25
29
  <ToastProvider />
26
30
  <ConfirmModalProvider />
27
31
  <FileUploaderProvider />
32
+
33
+ <style>
34
+ :global(:root) {
35
+ /**
36
+ * Each app should have its own accent colors
37
+ * --accent should be usable with light text
38
+ * --accent-light and --accent-lightest should be usable with dark text
39
+ */
40
+ --accent: #000;
41
+ --accent-light: #bdbdbd;
42
+ --accent-lightest: #fafafa;
43
+ --accent-light-mid: #818181;
44
+ --accent-text: #fff;
45
+
46
+ --border: #e1e1e1;
47
+
48
+ --text: #000;
49
+ --text-light: #545454;
50
+ --text-white: #fff;
51
+
52
+ /*
53
+ * Generally used colors
54
+ * In most cases, no need to extend these colors
55
+ */
56
+ --green-light: #cadfca;
57
+ --green: #4b874b;
58
+ --green-dark: #335c33;
59
+
60
+ --red-dark: #ab2525;
61
+ --red: #c05959;
62
+ --red-light: #ffdfdf;
63
+
64
+ --blue-dark: #334b81;
65
+ --blue: #5875b9;
66
+ --blue-light: #dae5ff;
67
+
68
+ --orange-dark: #8b5b04;
69
+ --orange: #a98526;
70
+ --orange-light: #efe3b4;
71
+
72
+ --gray-light: #ddd;
73
+ --gray: #999;
74
+ --gray-dark: #555;
75
+
76
+ --hover: #fafafa;
77
+ --hover-dark: #f0f0f0;
78
+
79
+ --link: #1d85d2;
80
+
81
+ --input: #f3f3f3;
82
+ --input-hover: #ccc;
83
+ /* checkbox/radio */
84
+
85
+ --box-shadow: 0 0 30px #0000000d;
86
+ --box-shadow-light: 0 0 10px 6px rgba(0, 0, 0, 0.06);
87
+ --box-radius: 20px;
88
+ --box-background: #fff;
89
+
90
+ --line-height-content: 28px;
91
+ --header-height: 55px;
92
+
93
+ --font-sans-serif: 'Readex Pro', Avenir, Inter, Helvetica, Arial, sans-serif;
94
+ --font-serif: 'Source Serif 4', serif;
95
+ }
96
+
97
+ :global(:root.dark) {
98
+ --background: #000;
99
+
100
+ --text: #fff;
101
+ --text-light: #999;
102
+ --box-background: #1c1c1c;
103
+
104
+ --accent-light: #555;
105
+ --accent-lightest: #2d2d2d;
106
+
107
+ --border: #4a4a4a;
108
+ --link: #7cb6e1;
109
+ --hover: #232323;
110
+
111
+ --input: #333;
112
+ }
113
+
114
+ /**
115
+ * Global styles
116
+ */
117
+ :global(:root) {
118
+ font-family: var(--font-sans-serif);
119
+ font-size: 16px;
120
+ font-weight: 400;
121
+ text-rendering: optimizeLegibility;
122
+ -webkit-font-smoothing: antialiased;
123
+ -moz-osx-font-smoothing: grayscale;
124
+ -webkit-text-size-adjust: 100%;
125
+ }
126
+
127
+ :global(body) {
128
+ background-color: var(--background, var(--accent-lightest));
129
+ color: var(--text);
130
+ margin: 0;
131
+ padding: 0;
132
+ }
133
+
134
+ :global(button),
135
+ :global(a) {
136
+ background-color: transparent;
137
+ border: none;
138
+ color: inherit;
139
+ appearance: none;
140
+ padding: 0;
141
+ text-decoration: none;
142
+ cursor: pointer;
143
+ font-family: inherit;
144
+ font-size: inherit;
145
+ }
146
+
147
+ :global(:focus-visible) {
148
+ outline: 2px solid var(--accent-light);
149
+ }
150
+
151
+ :global(*) {
152
+ box-sizing: border-box;
153
+ }
154
+
155
+ :global(.hds-box) {
156
+ box-shadow: var(--box-shadow);
157
+ border-radius: var(--box-radius);
158
+ background-color: var(--box-background);
159
+ }
160
+
161
+ :global(.hds-container) {
162
+ width: 1000px;
163
+ max-width: 100%;
164
+ padding: 0 15px;
165
+ margin: auto;
166
+ }
167
+
168
+ :global(.hds-container-max) {
169
+ width: 1400px;
170
+ max-width: 100%;
171
+ padding: 0 15px;
172
+ margin: auto;
173
+ }
174
+
175
+ :global(.hds-link) {
176
+ color: var(--link);
177
+ text-decoration: underline;
178
+ }
179
+
180
+ /** code block styles */
181
+ :global(.hds-code-block pre) {
182
+ text-align: left;
183
+ white-space: pre;
184
+ word-spacing: normal;
185
+ word-break: normal;
186
+ word-wrap: normal;
187
+ overflow: auto;
188
+ border-radius: 20px;
189
+ padding: 20px;
190
+ line-height: 1.2;
191
+ background-color: #f4f2f0 !important;
192
+ }
193
+
194
+ :global(.hds-code-block pre code) {
195
+ all: unset;
196
+ font-size: 14px;
197
+ line-height: 1.5 !important;
198
+ tab-size: 4;
199
+ hyphens: none;
200
+ }
201
+
202
+ :global(:root.dark .shiki) {
203
+ background-color: var(--shiki-dark-bg) !important;
204
+ }
205
+
206
+ :global(:root.dark .shiki),
207
+ :global(:root.dark .shiki span) {
208
+ color: var(--shiki-dark) !important;
209
+ font-style: var(--shiki-dark-font-style) !important;
210
+ font-weight: var(--shiki-dark-font-weight) !important;
211
+ text-decoration: var(--shiki-dark-text-decoration) !important;
212
+ }
213
+
214
+ :global(::selection) {
215
+ background-color: var(--selection, var(--accent-light));
216
+ }
217
+ </style>
@@ -1,4 +1,3 @@
1
- import '../../index.js';
2
1
  interface Props {
3
2
  dark?: boolean;
4
3
  children?: import('svelte').Snippet;
@@ -0,0 +1,222 @@
1
+ @font-face {
2
+ font-family: Readex Pro;
3
+ font-style: normal;
4
+ font-display: swap;
5
+ font-weight: 400;
6
+ src:
7
+ url(https://media.hyvor.com/fonts/readex-pro-arabic-400-normal.BzB5iZVu.woff2) format("woff2"),
8
+ url(https://media.hyvor.com/fonts/readex-pro-arabic-400-normal.CRluTl2A.woff) format("woff");
9
+ unicode-range: U+6??, U+750-77F, U+870-88E, U+890-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F,
10
+ U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF,
11
+ U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B,
12
+ U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D,
13
+ U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
14
+ U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
15
+ }
16
+ @font-face {
17
+ font-family: Readex Pro;
18
+ font-style: normal;
19
+ font-display: swap;
20
+ font-weight: 400;
21
+ src:
22
+ url(https://media.hyvor.com/fonts/readex-pro-vietnamese-400-normal.DAQS1QRE.woff2) format("woff2"),
23
+ url(https://media.hyvor.com/fonts/readex-pro-vietnamese-400-normal.DRTbt2AX.woff) format("woff");
24
+ unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309,
25
+ U+323, U+329, U+1EA0-1EF9, U+20AB;
26
+ }
27
+ @font-face {
28
+ font-family: Readex Pro;
29
+ font-style: normal;
30
+ font-display: swap;
31
+ font-weight: 400;
32
+ src:
33
+ url(https://media.hyvor.com/fonts/readex-pro-latin-ext-400-normal.CDeDBhe3.woff2) format("woff2"),
34
+ url(https://media.hyvor.com/fonts/readex-pro-latin-ext-400-normal.DzeKRH4q.woff) format("woff");
35
+ unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F,
36
+ U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
37
+ }
38
+ @font-face {
39
+ font-family: Readex Pro;
40
+ font-style: normal;
41
+ font-display: swap;
42
+ font-weight: 400;
43
+ src:
44
+ url(https://media.hyvor.com/fonts/readex-pro-latin-400-normal.BZtYQVaG.woff2) format("woff2"),
45
+ url(https://media.hyvor.com/fonts/readex-pro-latin-400-normal.SP_jEUAw.woff) format("woff");
46
+ unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC,
47
+ U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
48
+ }
49
+ @font-face {
50
+ font-family: Readex Pro;
51
+ font-style: normal;
52
+ font-display: swap;
53
+ font-weight: 600;
54
+ src:
55
+ url(https://media.hyvor.com/fonts/readex-pro-arabic-600-normal.BHxn1TEo.woff2) format("woff2"),
56
+ url(https://media.hyvor.com/fonts/readex-pro-arabic-600-normal.9mhVJBMn.woff) format("woff");
57
+ unicode-range: U+6??, U+750-77F, U+870-88E, U+890-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F,
58
+ U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF,
59
+ U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B,
60
+ U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D,
61
+ U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
62
+ U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
63
+ }
64
+ @font-face {
65
+ font-family: Readex Pro;
66
+ font-style: normal;
67
+ font-display: swap;
68
+ font-weight: 600;
69
+ src:
70
+ url(https://media.hyvor.com/fonts/readex-pro-vietnamese-600-normal.CvqEbH36.woff2) format("woff2"),
71
+ url(https://media.hyvor.com/fonts/readex-pro-vietnamese-600-normal.BT-w1HBH.woff) format("woff");
72
+ unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309,
73
+ U+323, U+329, U+1EA0-1EF9, U+20AB;
74
+ }
75
+ @font-face {
76
+ font-family: Readex Pro;
77
+ font-style: normal;
78
+ font-display: swap;
79
+ font-weight: 600;
80
+ src:
81
+ url(https://media.hyvor.com/fonts/readex-pro-latin-ext-600-normal.DvstIQFU.woff2) format("woff2"),
82
+ url(https://media.hyvor.com/fonts/readex-pro-latin-ext-600-normal.DRKkFP2q.woff) format("woff");
83
+ unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F,
84
+ U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
85
+ }
86
+ @font-face {
87
+ font-family: Readex Pro;
88
+ font-style: normal;
89
+ font-display: swap;
90
+ font-weight: 600;
91
+ src:
92
+ url(https://media.hyvor.com/fonts/readex-pro-latin-600-normal.C3IhmgOg.woff2) format("woff2"),
93
+ url(https://media.hyvor.com/fonts/readex-pro-latin-600-normal.CeYg1m9V.woff) format("woff");
94
+ unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC,
95
+ U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
96
+ }
97
+ @font-face {
98
+ font-family: "Source Serif 4";
99
+ font-style: normal;
100
+ font-display: swap;
101
+ font-weight: 400;
102
+ src:
103
+ url(https://media.hyvor.com/fonts/source-serif-4-cyrillic-ext-400-normal.CWV284fw.woff2) format("woff2"),
104
+ url(https://media.hyvor.com/fonts/source-serif-4-cyrillic-ext-400-normal.DLkyKLvH.woff) format("woff");
105
+ unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
106
+ }
107
+ @font-face {
108
+ font-family: "Source Serif 4";
109
+ font-style: normal;
110
+ font-display: swap;
111
+ font-weight: 400;
112
+ src:
113
+ url(https://media.hyvor.com/fonts/source-serif-4-cyrillic-400-normal.C44pakCn.woff2) format("woff2"),
114
+ url(https://media.hyvor.com/fonts/source-serif-4-cyrillic-400-normal.B8Z6Jvzv.woff) format("woff");
115
+ unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
116
+ }
117
+ @font-face {
118
+ font-family: "Source Serif 4";
119
+ font-style: normal;
120
+ font-display: swap;
121
+ font-weight: 400;
122
+ src:
123
+ url(https://media.hyvor.com/fonts/source-serif-4-greek-400-normal.Cw5-AHNN.woff2) format("woff2"),
124
+ url(https://media.hyvor.com/fonts/source-serif-4-greek-400-normal.BccYJ-vZ.woff) format("woff");
125
+ unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
126
+ }
127
+ @font-face {
128
+ font-family: "Source Serif 4";
129
+ font-style: normal;
130
+ font-display: swap;
131
+ font-weight: 400;
132
+ src:
133
+ url(https://media.hyvor.com/fonts/source-serif-4-vietnamese-400-normal.BbG3LG1A.woff2) format("woff2"),
134
+ url(https://media.hyvor.com/fonts/source-serif-4-vietnamese-400-normal.DR1UuFon.woff) format("woff");
135
+ unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309,
136
+ U+323, U+329, U+1EA0-1EF9, U+20AB;
137
+ }
138
+ @font-face {
139
+ font-family: "Source Serif 4";
140
+ font-style: normal;
141
+ font-display: swap;
142
+ font-weight: 400;
143
+ src:
144
+ url(https://media.hyvor.com/fonts/source-serif-4-latin-ext-400-normal.Cp7z-ARB.woff2) format("woff2"),
145
+ url(https://media.hyvor.com/fonts/source-serif-4-latin-ext-400-normal.CEpydyUl.woff) format("woff");
146
+ unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F,
147
+ U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
148
+ }
149
+ @font-face {
150
+ font-family: "Source Serif 4";
151
+ font-style: normal;
152
+ font-display: swap;
153
+ font-weight: 400;
154
+ src:
155
+ url(https://media.hyvor.com/fonts/source-serif-4-latin-400-normal.DJ5YJwmz.woff2) format("woff2"),
156
+ url(https://media.hyvor.com/fonts/source-serif-4-latin-400-normal.Dn3IlU-Z.woff) format("woff");
157
+ unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC,
158
+ U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
159
+ }
160
+ @font-face {
161
+ font-family: "Source Serif 4";
162
+ font-style: normal;
163
+ font-display: swap;
164
+ font-weight: 600;
165
+ src:
166
+ url(https://media.hyvor.com/fonts/source-serif-4-cyrillic-ext-600-normal.D_E8FDgP.woff2) format("woff2"),
167
+ url(https://media.hyvor.com/fonts/source-serif-4-cyrillic-ext-600-normal.DiT2IGQm.woff) format("woff");
168
+ unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
169
+ }
170
+ @font-face {
171
+ font-family: "Source Serif 4";
172
+ font-style: normal;
173
+ font-display: swap;
174
+ font-weight: 600;
175
+ src:
176
+ url(https://media.hyvor.com/fonts/source-serif-4-cyrillic-600-normal.BDP5YDHD.woff2) format("woff2"),
177
+ url(https://media.hyvor.com/fonts/source-serif-4-cyrillic-600-normal.DFnC3vAY.woff) format("woff");
178
+ unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
179
+ }
180
+ @font-face {
181
+ font-family: "Source Serif 4";
182
+ font-style: normal;
183
+ font-display: swap;
184
+ font-weight: 600;
185
+ src:
186
+ url(https://media.hyvor.com/fonts/source-serif-4-greek-600-normal.DdRkKr-1.woff2) format("woff2"),
187
+ url(https://media.hyvor.com/fonts/source-serif-4-greek-600-normal.DhXQw1Kl.woff) format("woff");
188
+ unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
189
+ }
190
+ @font-face {
191
+ font-family: "Source Serif 4";
192
+ font-style: normal;
193
+ font-display: swap;
194
+ font-weight: 600;
195
+ src:
196
+ url(https://media.hyvor.com/fonts/source-serif-4-vietnamese-600-normal.CznyfUKR.woff2) format("woff2"),
197
+ url(https://media.hyvor.com/fonts/source-serif-4-vietnamese-600-normal.B0WJbuqT.woff) format("woff");
198
+ unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309,
199
+ U+323, U+329, U+1EA0-1EF9, U+20AB;
200
+ }
201
+ @font-face {
202
+ font-family: "Source Serif 4";
203
+ font-style: normal;
204
+ font-display: swap;
205
+ font-weight: 600;
206
+ src:
207
+ url(https://media.hyvor.com/fonts/source-serif-4-latin-ext-600-normal.0sIUyHMO.woff2) format("woff2"),
208
+ url(https://media.hyvor.com/fonts/source-serif-4-latin-ext-600-normal.C6NNqpJh.woff) format("woff");
209
+ unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F,
210
+ U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
211
+ }
212
+ @font-face {
213
+ font-family: "Source Serif 4";
214
+ font-style: normal;
215
+ font-display: swap;
216
+ font-weight: 600;
217
+ src:
218
+ url(https://media.hyvor.com/fonts/source-serif-4-latin-600-normal.DouSKlru.woff2) format("woff2"),
219
+ url(https://media.hyvor.com/fonts/source-serif-4-latin-600-normal.DMD1h6_f.woff) format("woff");
220
+ unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC,
221
+ U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
222
+ }
@@ -3,7 +3,7 @@
3
3
  import type { HTMLAttributes } from 'svelte/elements';
4
4
 
5
5
  interface ComponentProps {
6
- children: Snippet;
6
+ children?: Snippet;
7
7
  }
8
8
 
9
9
  type Props = ComponentProps & HTMLAttributes<HTMLDivElement>;
@@ -14,5 +14,5 @@
14
14
  </script>
15
15
 
16
16
  <div role={head ? 'columnheader' : 'cell'} {...rest}>
17
- {@render children()}
17
+ {@render children?.()}
18
18
  </div>
@@ -1,7 +1,7 @@
1
1
  import { type Snippet } from 'svelte';
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
3
  interface ComponentProps {
4
- children: Snippet;
4
+ children?: Snippet;
5
5
  }
6
6
  type Props = ComponentProps & HTMLAttributes<HTMLDivElement>;
7
7
  declare const TableCell: import("svelte").Component<Props, {}, "">;
@@ -164,6 +164,7 @@
164
164
  size="small"
165
165
  variant="invisible"
166
166
  color="input"
167
+ aria-label={emailCopied ? copiedLabel : copyEmailLabel}
167
168
  onclick={handleCopyEmail}
168
169
  onmouseleave={() => (emailCopied = false)}
169
170
  >
package/package.json CHANGED
@@ -1,11 +1,9 @@
1
1
  {
2
2
  "name": "@hyvor/design",
3
- "version": "2.1.21",
3
+ "version": "2.1.22-beta.2",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "sideEffects": [
7
- "./dist/index.js",
8
- "./dist/index.css",
9
7
  "**/*.css"
10
8
  ],
11
9
  "repository": {
@@ -67,8 +65,6 @@
67
65
  },
68
66
  "dependencies": {
69
67
  "@apidevtools/json-schema-ref-parser": "^16.0.2",
70
- "@fontsource/readex-pro": "^5.3.0",
71
- "@fontsource/source-serif-4": "^5.3.0",
72
68
  "@hyvor/icons": "^1.1.1",
73
69
  "deepmerge-ts": "^8.0.2",
74
70
  "emojibase-data": "^17.0.0",
package/dist/index.css DELETED
@@ -1,186 +0,0 @@
1
- /* <variables> */
2
- :root {
3
- /**
4
- * Each app should have its own accent colors
5
- * --accent should be usable with light text
6
- * --accent-light and --accent-lightest should be usable with dark text
7
- */
8
- --accent: #000;
9
- --accent-light: #bdbdbd;
10
- --accent-lightest: #fafafa;
11
- --accent-light-mid: #818181;
12
- --accent-text: #fff;
13
-
14
- --border: #e1e1e1;
15
-
16
- --text: #000;
17
- --text-light: #777;
18
- --text-white: #fff;
19
-
20
- /*
21
- * Generally used colors
22
- * In most cases, no need to extend these colors
23
- */
24
- --green-light: #cadfca;
25
- --green: #4b874b;
26
- --green-dark: #335c33;
27
-
28
- --red-dark: #ab2525;
29
- --red: #c05959;
30
- --red-light: #ffdfdf;
31
-
32
- --blue-dark: #334b81;
33
- --blue: #5875b9;
34
- --blue-light: #dae5ff;
35
-
36
- --orange-dark: #8b5b04;
37
- --orange: #a98526;
38
- --orange-light: #efe3b4;
39
-
40
- --gray-light: #ddd;
41
- --gray: #999;
42
- --gray-dark: #555;
43
-
44
- --hover: #fafafa;
45
- --hover-dark: #f0f0f0;
46
-
47
- --link: #1d85d2;
48
-
49
- --input: #f3f3f3;
50
- --input-hover: #ccc;
51
- /* checkbox/radio */
52
-
53
- --box-shadow: 0 0 30px #0000000d;
54
- --box-shadow-light: 0 0 10px 6px rgba(0, 0, 0, 0.06);
55
- --box-radius: 20px;
56
- --box-background: #fff;
57
-
58
- --line-height-content: 28px;
59
- --header-height: 55px;
60
-
61
- --font-sans-serif: 'Readex Pro', Avenir, Inter, Helvetica, Arial, sans-serif;
62
- --font-serif: 'Source Serif 4', serif;
63
- }
64
-
65
- :root.dark {
66
- --background: #000;
67
-
68
- --text: #fff;
69
- --text-light: #999;
70
- --box-background: #1c1c1c;
71
-
72
- --accent-light: #555;
73
- --accent-lightest: #2d2d2d;
74
-
75
- --border: #4a4a4a;
76
- --link: #7cb6e1;
77
- --hover: #232323;
78
-
79
- --input: #333;
80
- }
81
- /* </variables> */
82
-
83
-
84
- /**
85
- * Global styles
86
- */
87
- :root {
88
- font-family: var(--font-sans-serif);
89
- font-size: 16px;
90
- font-weight: 400;
91
- text-rendering: optimizeLegibility;
92
- -webkit-font-smoothing: antialiased;
93
- -moz-osx-font-smoothing: grayscale;
94
- -webkit-text-size-adjust: 100%;
95
- }
96
-
97
- body {
98
- background-color: var(--background, var(--accent-lightest));
99
- color: var(--text);
100
- margin: 0;
101
- padding: 0;
102
- }
103
-
104
- button,
105
- a {
106
- background-color: transparent;
107
- border: none;
108
- color: inherit;
109
- appearance: none;
110
- padding: 0;
111
- text-decoration: none;
112
- cursor: pointer;
113
- font-family: inherit;
114
- font-size: inherit;
115
- }
116
-
117
- :focus-visible {
118
- outline: 2px solid var(--accent-light);
119
- }
120
-
121
- * {
122
- box-sizing: border-box;
123
- }
124
-
125
- .hds-box {
126
- box-shadow: var(--box-shadow);
127
- border-radius: var(--box-radius);
128
- background-color: var(--box-background);
129
- }
130
-
131
- .hds-container {
132
- width: 1000px;
133
- max-width: 100%;
134
- padding: 0 15px;
135
- margin: auto;
136
- }
137
-
138
- .hds-container-max {
139
- width: 1400px;
140
- max-width: 100%;
141
- padding: 0 15px;
142
- margin: auto;
143
- }
144
-
145
- .hds-link {
146
- color: var(--link);
147
- text-decoration: underline;
148
- }
149
-
150
- /** code block styles */
151
- .hds-code-block pre {
152
- text-align: left;
153
- white-space: pre;
154
- word-spacing: normal;
155
- word-break: normal;
156
- word-wrap: normal;
157
- overflow: auto;
158
- border-radius: 20px;
159
- padding: 20px;
160
- line-height: 1.2;
161
- background-color: #f4f2f0 !important;
162
- }
163
-
164
- .hds-code-block pre code {
165
- all: unset;
166
- font-size: 14px;
167
- line-height: 1.5 !important;
168
- tab-size: 4;
169
- hyphens: none;
170
- }
171
-
172
- :root.dark .shiki {
173
- background-color: var(--shiki-dark-bg) !important;
174
- }
175
-
176
- :root.dark .shiki,
177
- :root.dark .shiki span {
178
- color: var(--shiki-dark) !important;
179
- font-style: var(--shiki-dark-font-style) !important;
180
- font-weight: var(--shiki-dark-font-weight) !important;
181
- text-decoration: var(--shiki-dark-text-decoration) !important;
182
- }
183
-
184
- ::selection {
185
- background-color: var(--selection, var(--accent-light));
186
- }
package/dist/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import './index.css';
2
- import '@fontsource/readex-pro/400.css';
3
- import '@fontsource/readex-pro/600.css';
4
- import '@fontsource/source-serif-4/400.css';
5
- import '@fontsource/source-serif-4/600.css';
package/dist/index.js DELETED
@@ -1,5 +0,0 @@
1
- import './index.css';
2
- import '@fontsource/readex-pro/400.css';
3
- import '@fontsource/readex-pro/600.css';
4
- import '@fontsource/source-serif-4/400.css';
5
- import '@fontsource/source-serif-4/600.css';