@hkdigital/lib-sveltekit 0.1.8 → 0.1.10
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.
|
@@ -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
|
+
}
|