@hkdigital/lib-sveltekit 0.1.8 → 0.1.9
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/design/tailwind-theme-extend.d.ts +8 -0
- package/dist/design/tailwind-theme-extend.js +13 -1
- package/dist/themes/hkdev/components/buttons/button-text.postcss +3 -2
- package/dist/themes/hkdev/theme.d.ts +8 -0
- package/dist/themes/hkdev/theme.js +10 -0
- package/dist/util/design-system/skeleton.d.ts +41 -0
- package/dist/util/design-system/skeleton.js +65 -0
- package/dist/util/design-system/tailwind.d.ts +35 -0
- package/dist/util/design-system/tailwind.js +46 -0
- package/package.json +1 -1
|
@@ -92,7 +92,9 @@ import {
|
|
|
92
92
|
generateViewportBasedSpacing,
|
|
93
93
|
generateTextStyles,
|
|
94
94
|
generateBorderRadiusStyles,
|
|
95
|
-
generateWidthStyles
|
|
95
|
+
generateWidthStyles,
|
|
96
|
+
generateFontFamilyStyles,
|
|
97
|
+
generateTextColorStyles
|
|
96
98
|
} from '../util/design-system/tailwind.js';
|
|
97
99
|
|
|
98
100
|
import {
|
|
@@ -153,6 +155,16 @@ export const outlineOffset = {
|
|
|
153
155
|
...generateWidthStyles(STROKE_WIDTH_SIZES, '')
|
|
154
156
|
};
|
|
155
157
|
|
|
158
|
+
// Add UI font family extension
|
|
159
|
+
export const fontFamily = {
|
|
160
|
+
...generateFontFamilyStyles()
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
// Add UI text color extension
|
|
164
|
+
export const textColor = {
|
|
165
|
+
...generateTextColorStyles()
|
|
166
|
+
};
|
|
167
|
+
|
|
156
168
|
// console.log('borderWidth', borderWidth);
|
|
157
169
|
// console.log('outlineWidth', outlineWidth);
|
|
158
170
|
// console.log('outlineOffset', outlineOffset);
|
|
@@ -5,10 +5,11 @@
|
|
|
5
5
|
/* Type-based styling for text buttons */
|
|
6
6
|
[data-component="button"][data-type="text"] {
|
|
7
7
|
/* Typography settings */
|
|
8
|
-
@apply text-ui-md
|
|
8
|
+
@apply font-ui text-ui-md;
|
|
9
|
+
@apply uppercase;
|
|
9
10
|
@apply whitespace-nowrap;
|
|
10
11
|
|
|
11
|
-
/*
|
|
12
|
+
/* Size specific adjustments */
|
|
12
13
|
/*&[data-size="sm"] {
|
|
13
14
|
@apply px-8ut py-8ut;
|
|
14
15
|
}
|
|
@@ -42,6 +42,14 @@ declare namespace theme {
|
|
|
42
42
|
'--anchor-text-decoration-hover': string;
|
|
43
43
|
'--anchor-text-decoration-active': string;
|
|
44
44
|
'--anchor-text-decoration-focus': string;
|
|
45
|
+
'--ui-font-color': string;
|
|
46
|
+
'--ui-font-color-dark': string;
|
|
47
|
+
'--ui-font-family': string;
|
|
48
|
+
'--ui-font-size': string;
|
|
49
|
+
'--ui-line-height': string;
|
|
50
|
+
'--ui-font-weight': string;
|
|
51
|
+
'--ui-font-style': string;
|
|
52
|
+
'--ui-letter-spacing': string;
|
|
45
53
|
'--space-scale-factor': string;
|
|
46
54
|
'--radii-default': string;
|
|
47
55
|
'--radii-container': string;
|
|
@@ -41,6 +41,16 @@ const theme = {
|
|
|
41
41
|
'--anchor-text-decoration-hover': 'underline',
|
|
42
42
|
'--anchor-text-decoration-active': 'none',
|
|
43
43
|
'--anchor-text-decoration-focus': 'none',
|
|
44
|
+
|
|
45
|
+
'--ui-font-color': 'var(--color-surface-950)',
|
|
46
|
+
'--ui-font-color-dark': 'var(--color-surface-50)',
|
|
47
|
+
'--ui-font-family': 'Source Sans Pro, system-ui, sans-serif',
|
|
48
|
+
'--ui-font-size': 'inherit',
|
|
49
|
+
'--ui-line-height': 'inherit',
|
|
50
|
+
'--ui-font-weight': 'normal',
|
|
51
|
+
'--ui-font-style': 'normal',
|
|
52
|
+
'--ui-letter-spacing': '0em',
|
|
53
|
+
|
|
44
54
|
'--space-scale-factor': '1',
|
|
45
55
|
'--radii-default': '6px',
|
|
46
56
|
'--radii-container': '12px',
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Creates utility classes for UI font styling that work with Skeleton themes
|
|
3
|
+
*
|
|
4
|
+
* This plugin adds utility classes for UI typography that reference CSS
|
|
5
|
+
* variables defined in your Skeleton theme, allowing consistent styling of UI
|
|
6
|
+
* elements across your application.
|
|
7
|
+
*
|
|
8
|
+
* @note Important Configuration Requirements:
|
|
9
|
+
* 1. Add UI font variables to your theme file:
|
|
10
|
+
* - `--ui-font-family`: Font family for UI elements
|
|
11
|
+
* (falls back to `--base-font-family`)
|
|
12
|
+
* - `--ui-font-color`: Text color for UI elements
|
|
13
|
+
* (falls back to `--base-font-color`)
|
|
14
|
+
* - `--ui-font-color-dark`: Dark mode text color
|
|
15
|
+
* (falls back to `--base-font-color-dark`)
|
|
16
|
+
*
|
|
17
|
+
* 2. This plugin generates the following utility classes:
|
|
18
|
+
* - `font-ui`: Applies UI font family
|
|
19
|
+
* - `text-ui`: Applies UI text color
|
|
20
|
+
* - `text-ui-dark`: Applies UI dark mode text color (with .dark selector)
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* // tailwind.config.js
|
|
24
|
+
* import { customUtilitiesPlugin }
|
|
25
|
+
* from './src/lib/util/design-system/skeleton.js';
|
|
26
|
+
*
|
|
27
|
+
* export default {
|
|
28
|
+
* plugins: [
|
|
29
|
+
* customUtilitiesPlugin,
|
|
30
|
+
* skeleton({
|
|
31
|
+
* themes: [defaultThemes.cerberus, customThemes.yourTheme]
|
|
32
|
+
* })
|
|
33
|
+
* ]
|
|
34
|
+
* };
|
|
35
|
+
*
|
|
36
|
+
* @param {Object} api - Tailwind plugin API
|
|
37
|
+
* @param {Function} api.addUtilities - Function to add utilities
|
|
38
|
+
*/
|
|
39
|
+
export function customUtilitiesPlugin({ addUtilities }: {
|
|
40
|
+
addUtilities: Function;
|
|
41
|
+
}): void;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Creates utility classes for UI font styling that work with Skeleton themes
|
|
3
|
+
*
|
|
4
|
+
* This plugin adds utility classes for UI typography that reference CSS
|
|
5
|
+
* variables defined in your Skeleton theme, allowing consistent styling of UI
|
|
6
|
+
* elements across your application.
|
|
7
|
+
*
|
|
8
|
+
* @note Important Configuration Requirements:
|
|
9
|
+
* 1. Add UI font variables to your theme file:
|
|
10
|
+
* - `--ui-font-family`: Font family for UI elements
|
|
11
|
+
* (falls back to `--base-font-family`)
|
|
12
|
+
* - `--ui-font-color`: Text color for UI elements
|
|
13
|
+
* (falls back to `--base-font-color`)
|
|
14
|
+
* - `--ui-font-color-dark`: Dark mode text color
|
|
15
|
+
* (falls back to `--base-font-color-dark`)
|
|
16
|
+
*
|
|
17
|
+
* 2. This plugin generates the following utility classes:
|
|
18
|
+
* - `font-ui`: Applies UI font family
|
|
19
|
+
* - `text-ui`: Applies UI text color
|
|
20
|
+
* - `text-ui-dark`: Applies UI dark mode text color (with .dark selector)
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* // tailwind.config.js
|
|
24
|
+
* import { customUtilitiesPlugin }
|
|
25
|
+
* from './src/lib/util/design-system/skeleton.js';
|
|
26
|
+
*
|
|
27
|
+
* export default {
|
|
28
|
+
* plugins: [
|
|
29
|
+
* customUtilitiesPlugin,
|
|
30
|
+
* skeleton({
|
|
31
|
+
* themes: [defaultThemes.cerberus, customThemes.yourTheme]
|
|
32
|
+
* })
|
|
33
|
+
* ]
|
|
34
|
+
* };
|
|
35
|
+
*
|
|
36
|
+
* @param {Object} api - Tailwind plugin API
|
|
37
|
+
* @param {Function} api.addUtilities - Function to add utilities
|
|
38
|
+
*/
|
|
39
|
+
export function customUtilitiesPlugin({ addUtilities }) {
|
|
40
|
+
const utilities = {
|
|
41
|
+
'.font-ui': {
|
|
42
|
+
'font-family': 'var(--ui-font-family, var(--base-font-family))'
|
|
43
|
+
},
|
|
44
|
+
'.text-base-color': {
|
|
45
|
+
color: 'var(--base-font-color)'
|
|
46
|
+
},
|
|
47
|
+
'.text-base-color-dark': {
|
|
48
|
+
color: 'var(--base-font-color-dark)'
|
|
49
|
+
},
|
|
50
|
+
'.text-heading-color': {
|
|
51
|
+
color: 'var(--heading-font-color)'
|
|
52
|
+
},
|
|
53
|
+
'.text-heading-color-dark': {
|
|
54
|
+
color: 'var(--heading-font-color-dark)'
|
|
55
|
+
},
|
|
56
|
+
'.text-ui-color': {
|
|
57
|
+
color: 'var(--ui-font-color, var(--base-font-color))'
|
|
58
|
+
},
|
|
59
|
+
'.text-ui-color-dark': {
|
|
60
|
+
color: 'var(--ui-font-color-dark, var(--base-font-color-dark))'
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
addUtilities(utilities);
|
|
65
|
+
}
|
|
@@ -174,3 +174,38 @@ export function generateWidthStyles(sizes: {
|
|
|
174
174
|
}, prefix?: string, scaleVar?: string): {
|
|
175
175
|
[key: string]: string;
|
|
176
176
|
};
|
|
177
|
+
/**
|
|
178
|
+
* Generates font family styles for different text categories
|
|
179
|
+
* with fallbacks to base properties when needed
|
|
180
|
+
*
|
|
181
|
+
* @returns {Object.<string, string>} Generated font family styles
|
|
182
|
+
*
|
|
183
|
+
* @example
|
|
184
|
+
* // Returns:
|
|
185
|
+
* // {
|
|
186
|
+
* // 'ui': 'var(--ui-font-family, var(--base-font-family))'
|
|
187
|
+
* // }
|
|
188
|
+
*/
|
|
189
|
+
export function generateFontFamilyStyles(): {
|
|
190
|
+
[x: string]: string;
|
|
191
|
+
};
|
|
192
|
+
/**
|
|
193
|
+
* Generates text color styles for different text categories
|
|
194
|
+
* with fallbacks to base properties when needed
|
|
195
|
+
*
|
|
196
|
+
* @returns {Object.<string, Object.<string, string>>} Generated text color styles
|
|
197
|
+
*
|
|
198
|
+
* @example
|
|
199
|
+
* // Returns:
|
|
200
|
+
* // {
|
|
201
|
+
* // 'ui': {
|
|
202
|
+
* // 'DEFAULT': 'var(--ui-font-color, var(--base-font-color))',
|
|
203
|
+
* // 'dark': 'var(--ui-font-color-dark, var(--base-font-color-dark))'
|
|
204
|
+
* // }
|
|
205
|
+
* // }
|
|
206
|
+
*/
|
|
207
|
+
export function generateTextColorStyles(): {
|
|
208
|
+
[x: string]: {
|
|
209
|
+
[x: string]: string;
|
|
210
|
+
};
|
|
211
|
+
};
|
|
@@ -287,3 +287,49 @@ export function generateWidthStyles(
|
|
|
287
287
|
return result;
|
|
288
288
|
}, {});
|
|
289
289
|
}
|
|
290
|
+
|
|
291
|
+
/**
|
|
292
|
+
* Generates font family styles for different text categories
|
|
293
|
+
* with fallbacks to base properties when needed
|
|
294
|
+
*
|
|
295
|
+
* @returns {Object.<string, string>} Generated font family styles
|
|
296
|
+
*
|
|
297
|
+
* @example
|
|
298
|
+
* // Returns:
|
|
299
|
+
* // {
|
|
300
|
+
* // 'ui': 'var(--ui-font-family, var(--base-font-family))'
|
|
301
|
+
* // }
|
|
302
|
+
*/
|
|
303
|
+
export function generateFontFamilyStyles() {
|
|
304
|
+
return {
|
|
305
|
+
// UI font family with fallback to base font family
|
|
306
|
+
ui: 'var(--ui-font-family, var(--base-font-family))'
|
|
307
|
+
};
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
/**
|
|
311
|
+
* Generates text color styles for different text categories
|
|
312
|
+
* with fallbacks to base properties when needed
|
|
313
|
+
*
|
|
314
|
+
* @returns {Object.<string, Object.<string, string>>} Generated text color styles
|
|
315
|
+
*
|
|
316
|
+
* @example
|
|
317
|
+
* // Returns:
|
|
318
|
+
* // {
|
|
319
|
+
* // 'ui': {
|
|
320
|
+
* // 'DEFAULT': 'var(--ui-font-color, var(--base-font-color))',
|
|
321
|
+
* // 'dark': 'var(--ui-font-color-dark, var(--base-font-color-dark))'
|
|
322
|
+
* // }
|
|
323
|
+
* // }
|
|
324
|
+
*/
|
|
325
|
+
export function generateTextColorStyles() {
|
|
326
|
+
return {
|
|
327
|
+
// UI text color with fallbacks
|
|
328
|
+
ui: {
|
|
329
|
+
// Default color (light mode)
|
|
330
|
+
DEFAULT: 'var(--ui-font-color, var(--base-font-color))',
|
|
331
|
+
// Dark mode color
|
|
332
|
+
dark: 'var(--ui-font-color-dark, var(--base-font-color-dark))'
|
|
333
|
+
}
|
|
334
|
+
};
|
|
335
|
+
}
|