@myghf/ui 0.1.0 → 0.2.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.
- package/README.md +124 -5
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/tailwindPreset.js +70 -68
- package/dist/tokens.css +72 -72
- package/package.json +4 -2
package/dist/tailwindPreset.js
CHANGED
|
@@ -3,88 +3,90 @@ export default {
|
|
|
3
3
|
theme: {
|
|
4
4
|
extend: {
|
|
5
5
|
fontFamily: {
|
|
6
|
-
sans: ['
|
|
6
|
+
sans: ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
|
|
7
|
+
serif: ['Trajan Pro', 'Trajan', 'Times New Roman', 'serif'],
|
|
8
|
+
ar: ['GE SS Two', 'Adobe Arabic', 'Segoe UI', 'Tahoma', 'sans-serif'],
|
|
7
9
|
},
|
|
8
10
|
colors: {
|
|
9
11
|
primary: {
|
|
10
|
-
50: 'rgb(var(--
|
|
11
|
-
100: 'rgb(var(--
|
|
12
|
-
200: 'rgb(var(--
|
|
13
|
-
300: 'rgb(var(--
|
|
14
|
-
400: 'rgb(var(--
|
|
15
|
-
500: 'rgb(var(--
|
|
16
|
-
600: 'rgb(var(--
|
|
17
|
-
700: 'rgb(var(--
|
|
18
|
-
800: 'rgb(var(--
|
|
19
|
-
900: 'rgb(var(--
|
|
12
|
+
50: 'rgb(var(--myghf-primary-50) / <alpha-value>)',
|
|
13
|
+
100: 'rgb(var(--myghf-primary-100) / <alpha-value>)',
|
|
14
|
+
200: 'rgb(var(--myghf-primary-200) / <alpha-value>)',
|
|
15
|
+
300: 'rgb(var(--myghf-primary-300) / <alpha-value>)',
|
|
16
|
+
400: 'rgb(var(--myghf-primary-400) / <alpha-value>)',
|
|
17
|
+
500: 'rgb(var(--myghf-primary-500) / <alpha-value>)',
|
|
18
|
+
600: 'rgb(var(--myghf-primary-600) / <alpha-value>)',
|
|
19
|
+
700: 'rgb(var(--myghf-primary-700) / <alpha-value>)',
|
|
20
|
+
800: 'rgb(var(--myghf-primary-800) / <alpha-value>)',
|
|
21
|
+
900: 'rgb(var(--myghf-primary-900) / <alpha-value>)',
|
|
20
22
|
},
|
|
21
23
|
secondary: {
|
|
22
|
-
50: 'rgb(var(--
|
|
23
|
-
100: 'rgb(var(--
|
|
24
|
-
200: 'rgb(var(--
|
|
25
|
-
300: 'rgb(var(--
|
|
26
|
-
400: 'rgb(var(--
|
|
27
|
-
500: 'rgb(var(--
|
|
28
|
-
600: 'rgb(var(--
|
|
29
|
-
700: 'rgb(var(--
|
|
30
|
-
800: 'rgb(var(--
|
|
31
|
-
900: 'rgb(var(--
|
|
24
|
+
50: 'rgb(var(--myghf-secondary-50) / <alpha-value>)',
|
|
25
|
+
100: 'rgb(var(--myghf-secondary-100) / <alpha-value>)',
|
|
26
|
+
200: 'rgb(var(--myghf-secondary-200) / <alpha-value>)',
|
|
27
|
+
300: 'rgb(var(--myghf-secondary-300) / <alpha-value>)',
|
|
28
|
+
400: 'rgb(var(--myghf-secondary-400) / <alpha-value>)',
|
|
29
|
+
500: 'rgb(var(--myghf-secondary-500) / <alpha-value>)',
|
|
30
|
+
600: 'rgb(var(--myghf-secondary-600) / <alpha-value>)',
|
|
31
|
+
700: 'rgb(var(--myghf-secondary-700) / <alpha-value>)',
|
|
32
|
+
800: 'rgb(var(--myghf-secondary-800) / <alpha-value>)',
|
|
33
|
+
900: 'rgb(var(--myghf-secondary-900) / <alpha-value>)',
|
|
32
34
|
},
|
|
33
35
|
success: {
|
|
34
|
-
50: 'rgb(var(--
|
|
35
|
-
100: 'rgb(var(--
|
|
36
|
-
200: 'rgb(var(--
|
|
37
|
-
300: 'rgb(var(--
|
|
38
|
-
400: 'rgb(var(--
|
|
39
|
-
500: 'rgb(var(--
|
|
40
|
-
600: 'rgb(var(--
|
|
41
|
-
700: 'rgb(var(--
|
|
42
|
-
800: 'rgb(var(--
|
|
43
|
-
900: 'rgb(var(--
|
|
36
|
+
50: 'rgb(var(--myghf-success-50) / <alpha-value>)',
|
|
37
|
+
100: 'rgb(var(--myghf-success-100) / <alpha-value>)',
|
|
38
|
+
200: 'rgb(var(--myghf-success-200) / <alpha-value>)',
|
|
39
|
+
300: 'rgb(var(--myghf-success-300) / <alpha-value>)',
|
|
40
|
+
400: 'rgb(var(--myghf-success-400) / <alpha-value>)',
|
|
41
|
+
500: 'rgb(var(--myghf-success-500) / <alpha-value>)',
|
|
42
|
+
600: 'rgb(var(--myghf-success-600) / <alpha-value>)',
|
|
43
|
+
700: 'rgb(var(--myghf-success-700) / <alpha-value>)',
|
|
44
|
+
800: 'rgb(var(--myghf-success-800) / <alpha-value>)',
|
|
45
|
+
900: 'rgb(var(--myghf-success-900) / <alpha-value>)',
|
|
44
46
|
},
|
|
45
47
|
warning: {
|
|
46
|
-
50: 'rgb(var(--
|
|
47
|
-
100: 'rgb(var(--
|
|
48
|
-
200: 'rgb(var(--
|
|
49
|
-
300: 'rgb(var(--
|
|
50
|
-
400: 'rgb(var(--
|
|
51
|
-
500: 'rgb(var(--
|
|
52
|
-
600: 'rgb(var(--
|
|
53
|
-
700: 'rgb(var(--
|
|
54
|
-
800: 'rgb(var(--
|
|
55
|
-
900: 'rgb(var(--
|
|
48
|
+
50: 'rgb(var(--myghf-warning-50) / <alpha-value>)',
|
|
49
|
+
100: 'rgb(var(--myghf-warning-100) / <alpha-value>)',
|
|
50
|
+
200: 'rgb(var(--myghf-warning-200) / <alpha-value>)',
|
|
51
|
+
300: 'rgb(var(--myghf-warning-300) / <alpha-value>)',
|
|
52
|
+
400: 'rgb(var(--myghf-warning-400) / <alpha-value>)',
|
|
53
|
+
500: 'rgb(var(--myghf-warning-500) / <alpha-value>)',
|
|
54
|
+
600: 'rgb(var(--myghf-warning-600) / <alpha-value>)',
|
|
55
|
+
700: 'rgb(var(--myghf-warning-700) / <alpha-value>)',
|
|
56
|
+
800: 'rgb(var(--myghf-warning-800) / <alpha-value>)',
|
|
57
|
+
900: 'rgb(var(--myghf-warning-900) / <alpha-value>)',
|
|
56
58
|
},
|
|
57
59
|
error: {
|
|
58
|
-
50: 'rgb(var(--
|
|
59
|
-
100: 'rgb(var(--
|
|
60
|
-
200: 'rgb(var(--
|
|
61
|
-
300: 'rgb(var(--
|
|
62
|
-
400: 'rgb(var(--
|
|
63
|
-
500: 'rgb(var(--
|
|
64
|
-
600: 'rgb(var(--
|
|
65
|
-
700: 'rgb(var(--
|
|
66
|
-
800: 'rgb(var(--
|
|
67
|
-
900: 'rgb(var(--
|
|
60
|
+
50: 'rgb(var(--myghf-error-50) / <alpha-value>)',
|
|
61
|
+
100: 'rgb(var(--myghf-error-100) / <alpha-value>)',
|
|
62
|
+
200: 'rgb(var(--myghf-error-200) / <alpha-value>)',
|
|
63
|
+
300: 'rgb(var(--myghf-error-300) / <alpha-value>)',
|
|
64
|
+
400: 'rgb(var(--myghf-error-400) / <alpha-value>)',
|
|
65
|
+
500: 'rgb(var(--myghf-error-500) / <alpha-value>)',
|
|
66
|
+
600: 'rgb(var(--myghf-error-600) / <alpha-value>)',
|
|
67
|
+
700: 'rgb(var(--myghf-error-700) / <alpha-value>)',
|
|
68
|
+
800: 'rgb(var(--myghf-error-800) / <alpha-value>)',
|
|
69
|
+
900: 'rgb(var(--myghf-error-900) / <alpha-value>)',
|
|
68
70
|
},
|
|
69
71
|
info: {
|
|
70
|
-
50: 'rgb(var(--
|
|
71
|
-
100: 'rgb(var(--
|
|
72
|
-
200: 'rgb(var(--
|
|
73
|
-
300: 'rgb(var(--
|
|
74
|
-
400: 'rgb(var(--
|
|
75
|
-
500: 'rgb(var(--
|
|
76
|
-
600: 'rgb(var(--
|
|
77
|
-
700: 'rgb(var(--
|
|
78
|
-
800: 'rgb(var(--
|
|
79
|
-
900: 'rgb(var(--
|
|
72
|
+
50: 'rgb(var(--myghf-info-50) / <alpha-value>)',
|
|
73
|
+
100: 'rgb(var(--myghf-info-100) / <alpha-value>)',
|
|
74
|
+
200: 'rgb(var(--myghf-info-200) / <alpha-value>)',
|
|
75
|
+
300: 'rgb(var(--myghf-info-300) / <alpha-value>)',
|
|
76
|
+
400: 'rgb(var(--myghf-info-400) / <alpha-value>)',
|
|
77
|
+
500: 'rgb(var(--myghf-info-500) / <alpha-value>)',
|
|
78
|
+
600: 'rgb(var(--myghf-info-600) / <alpha-value>)',
|
|
79
|
+
700: 'rgb(var(--myghf-info-700) / <alpha-value>)',
|
|
80
|
+
800: 'rgb(var(--myghf-info-800) / <alpha-value>)',
|
|
81
|
+
900: 'rgb(var(--myghf-info-900) / <alpha-value>)',
|
|
80
82
|
},
|
|
81
|
-
background: 'rgb(var(--
|
|
82
|
-
foreground: 'rgb(var(--
|
|
83
|
-
surface: 'rgb(var(--
|
|
84
|
-
'surface-muted': 'rgb(var(--
|
|
85
|
-
border: 'rgb(var(--
|
|
86
|
-
muted: 'rgb(var(--
|
|
87
|
-
grey: 'rgb(var(--
|
|
83
|
+
background: 'rgb(var(--myghf-background) / <alpha-value>)',
|
|
84
|
+
foreground: 'rgb(var(--myghf-foreground) / <alpha-value>)',
|
|
85
|
+
surface: 'rgb(var(--myghf-surface) / <alpha-value>)',
|
|
86
|
+
'surface-muted': 'rgb(var(--myghf-surface-muted) / <alpha-value>)',
|
|
87
|
+
border: 'rgb(var(--myghf-border) / <alpha-value>)',
|
|
88
|
+
muted: 'rgb(var(--myghf-muted) / <alpha-value>)',
|
|
89
|
+
grey: 'rgb(var(--myghf-muted) / <alpha-value>)',
|
|
88
90
|
},
|
|
89
91
|
boxShadow: {
|
|
90
92
|
popover: '0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06)',
|
package/dist/tokens.css
CHANGED
|
@@ -1,81 +1,81 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
/* surfaces */
|
|
3
|
-
--
|
|
4
|
-
--
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
3
|
+
--myghf-background: 248 249 250; /* #f8f9fa (deviation: brand says white; kept for surface separation) */
|
|
4
|
+
--myghf-foreground: 0 0 0; /* #000000 MYGHF Black */
|
|
5
|
+
--myghf-surface: 255 255 255; /* #ffffff MYGHF White */
|
|
6
|
+
--myghf-surface-muted: 243 244 246; /* #f3f4f6 */
|
|
7
|
+
--myghf-border: 230 230 230; /* #e6e6e6 brand light gray */
|
|
8
|
+
--myghf-muted: 128 128 128; /* #808080 brand secondary text */
|
|
9
9
|
|
|
10
|
-
/* brand: primary (blue) */
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
10
|
+
/* brand: primary (blue) — MYGHF Blue #00A2DD */
|
|
11
|
+
--myghf-primary-50: 240 249 253;
|
|
12
|
+
--myghf-primary-100: 217 241 250;
|
|
13
|
+
--myghf-primary-200: 173 225 244;
|
|
14
|
+
--myghf-primary-300: 115 204 236;
|
|
15
|
+
--myghf-primary-400: 56 182 228;
|
|
16
|
+
--myghf-primary-500: 0 162 221;
|
|
17
|
+
--myghf-primary-600: 0 130 177;
|
|
18
|
+
--myghf-primary-700: 0 100 137;
|
|
19
|
+
--myghf-primary-800: 0 73 99;
|
|
20
|
+
--myghf-primary-900: 0 49 66;
|
|
21
21
|
|
|
22
|
-
/* brand: secondary (plum) */
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
--
|
|
22
|
+
/* brand: secondary (plum) — MYGHF Plum #984C7C */
|
|
23
|
+
--myghf-secondary-50: 249 244 247;
|
|
24
|
+
--myghf-secondary-100: 240 228 235;
|
|
25
|
+
--myghf-secondary-200: 222 198 213;
|
|
26
|
+
--myghf-secondary-300: 198 157 183;
|
|
27
|
+
--myghf-secondary-400: 175 115 153;
|
|
28
|
+
--myghf-secondary-500: 152 76 124;
|
|
29
|
+
--myghf-secondary-600: 122 61 99;
|
|
30
|
+
--myghf-secondary-700: 94 47 77;
|
|
31
|
+
--myghf-secondary-800: 68 34 56;
|
|
32
|
+
--myghf-secondary-900: 46 23 37;
|
|
33
33
|
|
|
34
|
-
/* feedback: success (teal) */
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
--
|
|
39
|
-
--
|
|
40
|
-
--
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
34
|
+
/* feedback: success (teal) — MYGHF Teal #0DA79E */
|
|
35
|
+
--myghf-success-50: 243 251 250;
|
|
36
|
+
--myghf-success-100: 231 246 245;
|
|
37
|
+
--myghf-success-200: 202 236 234;
|
|
38
|
+
--myghf-success-300: 158 220 216;
|
|
39
|
+
--myghf-success-400: 90 195 189;
|
|
40
|
+
--myghf-success-500: 13 167 158;
|
|
41
|
+
--myghf-success-600: 11 147 139;
|
|
42
|
+
--myghf-success-700: 9 120 114;
|
|
43
|
+
--myghf-success-800: 7 94 88;
|
|
44
|
+
--myghf-success-900: 5 70 66;
|
|
45
45
|
|
|
46
|
-
/* feedback: warning (amber) */
|
|
47
|
-
--
|
|
48
|
-
--
|
|
49
|
-
--
|
|
50
|
-
--
|
|
51
|
-
--
|
|
52
|
-
--
|
|
53
|
-
--
|
|
54
|
-
--
|
|
55
|
-
--
|
|
56
|
-
--
|
|
46
|
+
/* feedback: warning (amber) — MYGHF Gold #EDA827 */
|
|
47
|
+
--myghf-warning-50: 254 250 242;
|
|
48
|
+
--myghf-warning-100: 252 242 223;
|
|
49
|
+
--myghf-warning-200: 249 227 186;
|
|
50
|
+
--myghf-warning-300: 245 207 136;
|
|
51
|
+
--myghf-warning-400: 241 187 87;
|
|
52
|
+
--myghf-warning-500: 237 168 39;
|
|
53
|
+
--myghf-warning-600: 190 134 31;
|
|
54
|
+
--myghf-warning-700: 147 104 24;
|
|
55
|
+
--myghf-warning-800: 107 76 18;
|
|
56
|
+
--myghf-warning-900: 71 50 12;
|
|
57
57
|
|
|
58
|
-
/* feedback: error (
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
--
|
|
62
|
-
--
|
|
63
|
-
--
|
|
64
|
-
--
|
|
65
|
-
--
|
|
66
|
-
--
|
|
67
|
-
--
|
|
68
|
-
--
|
|
58
|
+
/* feedback: error (red) — MYGHF Red #E9322B */
|
|
59
|
+
--myghf-error-50: 254 245 244;
|
|
60
|
+
--myghf-error-100: 253 235 234;
|
|
61
|
+
--myghf-error-200: 250 210 208;
|
|
62
|
+
--myghf-error-300: 246 173 170;
|
|
63
|
+
--myghf-error-400: 240 116 111;
|
|
64
|
+
--myghf-error-500: 233 50 43;
|
|
65
|
+
--myghf-error-600: 205 44 38;
|
|
66
|
+
--myghf-error-700: 168 36 31;
|
|
67
|
+
--myghf-error-800: 130 28 24;
|
|
68
|
+
--myghf-error-900: 98 21 18;
|
|
69
69
|
|
|
70
70
|
/* feedback: info (same range as primary, kept separate for semantics) */
|
|
71
|
-
--
|
|
72
|
-
--
|
|
73
|
-
--
|
|
74
|
-
--
|
|
75
|
-
--
|
|
76
|
-
--
|
|
77
|
-
--
|
|
78
|
-
--
|
|
79
|
-
--
|
|
80
|
-
--
|
|
81
|
-
}
|
|
71
|
+
--myghf-info-50: 240 249 253;
|
|
72
|
+
--myghf-info-100: 217 241 250;
|
|
73
|
+
--myghf-info-200: 173 225 244;
|
|
74
|
+
--myghf-info-300: 115 204 236;
|
|
75
|
+
--myghf-info-400: 56 182 228;
|
|
76
|
+
--myghf-info-500: 0 162 221;
|
|
77
|
+
--myghf-info-600: 0 130 177;
|
|
78
|
+
--myghf-info-700: 0 100 137;
|
|
79
|
+
--myghf-info-800: 0 73 99;
|
|
80
|
+
--myghf-info-900: 0 49 66;
|
|
81
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@myghf/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"build": "vite build && cp src/tokens.css src/tailwindPreset.js dist/",
|
|
36
36
|
"typecheck": "vue-tsc --noEmit",
|
|
37
37
|
"test": "vitest run",
|
|
38
|
+
"changeset": "changeset",
|
|
38
39
|
"prepublishOnly": "npm run build"
|
|
39
40
|
},
|
|
40
41
|
"dependencies": {
|
|
@@ -51,6 +52,7 @@
|
|
|
51
52
|
"vue": "^3.5.0"
|
|
52
53
|
},
|
|
53
54
|
"devDependencies": {
|
|
55
|
+
"@changesets/cli": "^3.0.3",
|
|
54
56
|
"@types/node": "^24.0.0",
|
|
55
57
|
"@vitejs/plugin-vue": "^6.0.7",
|
|
56
58
|
"@vue/test-utils": "^2.5.1",
|
|
@@ -64,4 +66,4 @@
|
|
|
64
66
|
"vue": "^3.5.39",
|
|
65
67
|
"vue-tsc": "^3.3.5"
|
|
66
68
|
}
|
|
67
|
-
}
|
|
69
|
+
}
|