@youngonesworks/ui 0.1.129 → 0.1.131
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/globals.css +0 -1
- package/dist/styles/index.d.ts +0 -2
- package/dist/styles/typography.css +133 -0
- package/dist/styles/utilities.css +151 -33
- package/dist/styles/variables.css +2 -37
- package/package.json +9 -11
package/dist/globals.css
CHANGED
package/dist/styles/index.d.ts
CHANGED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
h1,
|
|
3
|
+
.yo-text-h1 {
|
|
4
|
+
color: var(--color-navy-blue);
|
|
5
|
+
font-size: var(--text-3xl);
|
|
6
|
+
line-height: var(--text-3xl--line-height);
|
|
7
|
+
font-weight: var(--text-3xl--weight);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.yo-text-h1-caps {
|
|
11
|
+
color: var(--color-navy-blue);
|
|
12
|
+
font-size: var(--text-3xl);
|
|
13
|
+
line-height: var(--text-3xl--line-height);
|
|
14
|
+
font-weight: var(--text-3xl--weight);
|
|
15
|
+
text-transform: uppercase;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
h2,
|
|
19
|
+
.yo-text-h2 {
|
|
20
|
+
color: var(--color-navy-blue);
|
|
21
|
+
font-size: var(--text-2xl);
|
|
22
|
+
line-height: var(--text-2xl--line-height);
|
|
23
|
+
font-weight: var(--text-2xl--weight);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.yo-text-h2-caps {
|
|
27
|
+
color: var(--color-navy-blue);
|
|
28
|
+
font-size: var(--text-2xl);
|
|
29
|
+
line-height: var(--text-2xl--line-height);
|
|
30
|
+
font-weight: var(--text-2xl--weight);
|
|
31
|
+
text-transform: uppercase;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
h3,
|
|
35
|
+
.yo-text-h3 {
|
|
36
|
+
color: var(--color-navy-blue);
|
|
37
|
+
font-size: var(--text-xl);
|
|
38
|
+
line-height: var(--text-xl--line-height);
|
|
39
|
+
font-weight: 600;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
h4,
|
|
43
|
+
.yo-text-h4 {
|
|
44
|
+
color: var(--color-navy-blue);
|
|
45
|
+
font-size: var(--text-lg);
|
|
46
|
+
line-height: var(--text-lg--line-height);
|
|
47
|
+
font-weight: 700;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
p,
|
|
51
|
+
.yo-text-body {
|
|
52
|
+
color: var(--color-navy-blue);
|
|
53
|
+
font-size: var(--text-base);
|
|
54
|
+
line-height: var(--text-base--line-height);
|
|
55
|
+
font-weight: var(--text-base--weight);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.yo-text-body-medium {
|
|
59
|
+
color: var(--color-navy-blue);
|
|
60
|
+
font-size: var(--text-base);
|
|
61
|
+
line-height: var(--text-base--line-height);
|
|
62
|
+
font-weight: 500;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.yo-text-body-bold {
|
|
66
|
+
color: var(--color-navy-blue);
|
|
67
|
+
font-size: var(--text-base);
|
|
68
|
+
line-height: var(--text-base--line-height);
|
|
69
|
+
font-weight: 600;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
span,
|
|
73
|
+
.yo-text-small {
|
|
74
|
+
color: var(--color-navy-blue);
|
|
75
|
+
font-size: var(--text-sm);
|
|
76
|
+
line-height: var(--text-sm--line-height);
|
|
77
|
+
font-weight: var(--text-sm--weight);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.yo-text-small-medium {
|
|
81
|
+
color: var(--color-navy-blue);
|
|
82
|
+
font-size: var(--text-sm);
|
|
83
|
+
line-height: var(--text-sm--line-height);
|
|
84
|
+
font-weight: 500;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.yo-text-field-placeholder {
|
|
88
|
+
color: var(--color-gray-400);
|
|
89
|
+
font-size: var(--text-sm);
|
|
90
|
+
line-height: var(--text-sm--line-height);
|
|
91
|
+
font-weight: var(--text-sm--weight);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.yo-text-caption {
|
|
95
|
+
color: var(--color-navy-blue);
|
|
96
|
+
font-size: var(--text-xs);
|
|
97
|
+
line-height: var(--text-xs--line-height);
|
|
98
|
+
font-weight: 600;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
a,
|
|
102
|
+
link,
|
|
103
|
+
.yo-text-link {
|
|
104
|
+
font-size: var(--text-xs);
|
|
105
|
+
line-height: var(--text-xs--line-height);
|
|
106
|
+
font-weight: 600;
|
|
107
|
+
color: var(--color-accent-blue);
|
|
108
|
+
text-decoration: none;
|
|
109
|
+
cursor: pointer;
|
|
110
|
+
transition: opacity 0.2s ease;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
a:hover,
|
|
114
|
+
link:hover,
|
|
115
|
+
.yo-text-link:hover {
|
|
116
|
+
opacity: 0.85;
|
|
117
|
+
text-decoration: underline;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.yo-text-label {
|
|
121
|
+
font-size: var(--text-xs);
|
|
122
|
+
line-height: var(--text-xs--line-height);
|
|
123
|
+
font-weight: 600;
|
|
124
|
+
color: var(--color-navy-blue);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.yo-text-hint {
|
|
128
|
+
font-size: 0.625rem;
|
|
129
|
+
line-height: 0.875rem;
|
|
130
|
+
font-weight: 400;
|
|
131
|
+
color: var(--color-navy-blue);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
@@ -8,68 +8,186 @@
|
|
|
8
8
|
transition: max-height 0.3s ease-in-out;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
@layer utilities {
|
|
12
|
+
/* Animation utility classes */
|
|
13
|
+
.animate-spin-slow {
|
|
14
|
+
animation: spin 2s linear infinite;
|
|
15
|
+
}
|
|
16
|
+
.animate-spin-once {
|
|
17
|
+
animation: spin 2s linear forwards;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Duration utility classes */
|
|
21
|
+
.duration-sidebar {
|
|
22
|
+
transition-duration: var(--transition-duration-sidebar);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.duration-700 {
|
|
26
|
+
transition-duration: 700ms;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.duration-1000 {
|
|
30
|
+
transition-duration: 1000ms;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.bg-gradient-blue-turquoise {
|
|
34
|
+
background-image: var(--color-gradient-blue-turquoise);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.bg-gradient-blue-purple {
|
|
38
|
+
background-image: var(--color-linear-gradient-x) !important;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
.bg-nav-gradient {
|
|
42
|
+
background: var(--color-nav-gradient);
|
|
43
|
+
}
|
|
44
|
+
.bg-nav-gradient-mobile {
|
|
45
|
+
background: var(--color-nav-gradient-mobile);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.bg-nav-gradient-alternative {
|
|
49
|
+
background: var(--color-nav-gradient-alternative);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.bg-nav-gradient-mobile-alternative {
|
|
53
|
+
background: var(--color-nav-gradient-mobile-alternative);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Toast notification colors */
|
|
57
|
+
:root {
|
|
58
|
+
--toastify-color-info: #2a67f6;
|
|
59
|
+
--toastify-color-success: #10d1bb;
|
|
60
|
+
--toastify-color-warning: #f8ec5b;
|
|
61
|
+
--toastify-color-error: #ed3f55;
|
|
13
62
|
}
|
|
14
63
|
|
|
15
|
-
|
|
16
|
-
|
|
64
|
+
/* Base element styles */
|
|
65
|
+
* {
|
|
66
|
+
box-sizing: inherit;
|
|
17
67
|
}
|
|
18
68
|
|
|
19
|
-
|
|
20
|
-
|
|
69
|
+
html {
|
|
70
|
+
box-sizing: border-box;
|
|
71
|
+
-ms-overflow-style: scrollbar;
|
|
72
|
+
-webkit-tap-highlight-color: rgba(#000, 0);
|
|
73
|
+
font-family: var(--font-family-sans);
|
|
74
|
+
@reference min-h-screen;
|
|
75
|
+
@reference overflow-y-scroll;
|
|
76
|
+
@reference text-base;
|
|
21
77
|
}
|
|
22
78
|
|
|
23
|
-
|
|
24
|
-
|
|
79
|
+
body {
|
|
80
|
+
@reference m-0;
|
|
81
|
+
@reference bg-ultra-light-blue;
|
|
25
82
|
}
|
|
26
83
|
|
|
27
|
-
|
|
28
|
-
|
|
84
|
+
/* Focus styles */
|
|
85
|
+
button:focus-visible {
|
|
86
|
+
@reference focus:outline-hidden;
|
|
87
|
+
@reference focus:ring-2;
|
|
88
|
+
@reference focus:ring-offset-2;
|
|
29
89
|
}
|
|
30
90
|
|
|
31
|
-
|
|
32
|
-
|
|
91
|
+
/* Link styles */
|
|
92
|
+
a {
|
|
93
|
+
text-decoration: none;
|
|
33
94
|
}
|
|
34
95
|
|
|
35
|
-
|
|
36
|
-
|
|
96
|
+
a:hover {
|
|
97
|
+
text-decoration: underline;
|
|
37
98
|
}
|
|
38
99
|
|
|
39
|
-
|
|
40
|
-
|
|
100
|
+
/* Base layer styles */
|
|
101
|
+
@layer base {
|
|
102
|
+
button:not(:disabled),
|
|
103
|
+
[role="button"]:not(:disabled) {
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Heading styles */
|
|
109
|
+
h1,
|
|
110
|
+
h2,
|
|
111
|
+
h3,
|
|
112
|
+
h4,
|
|
113
|
+
h5,
|
|
114
|
+
h6 {
|
|
115
|
+
@reference m-0;
|
|
41
116
|
}
|
|
42
117
|
|
|
43
|
-
|
|
44
|
-
|
|
118
|
+
/* Editor styles */
|
|
119
|
+
.is-editor-empty:first-of-type::before {
|
|
120
|
+
color: var(--color-gray-900);
|
|
121
|
+
opacity: 0.5;
|
|
122
|
+
content: attr(data-placeholder);
|
|
123
|
+
float: left;
|
|
124
|
+
height: 0;
|
|
125
|
+
pointer-events: none;
|
|
45
126
|
}
|
|
46
127
|
|
|
47
|
-
|
|
48
|
-
|
|
128
|
+
/* List styles */
|
|
129
|
+
ul {
|
|
130
|
+
@reference list-disc;
|
|
49
131
|
}
|
|
50
132
|
|
|
51
|
-
|
|
52
|
-
|
|
133
|
+
ol {
|
|
134
|
+
@reference list-decimal;
|
|
53
135
|
}
|
|
54
136
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
137
|
+
/* Table animations */
|
|
138
|
+
.table-animation-exit {
|
|
139
|
+
opacity: 1;
|
|
140
|
+
transition: opacity 300ms ease-out;
|
|
141
|
+
}
|
|
142
|
+
.table-animation-exit-active {
|
|
143
|
+
opacity: 0;
|
|
144
|
+
transition: opacity 300ms ease-out;
|
|
145
|
+
}
|
|
146
|
+
.table-animation-enter {
|
|
147
|
+
opacity: 0;
|
|
148
|
+
transition: opacity 300ms ease-in;
|
|
149
|
+
}
|
|
150
|
+
.table-animation-enter-active {
|
|
151
|
+
opacity: 1;
|
|
152
|
+
transition: opacity 300ms ease-in;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* Spin animation keyframes */
|
|
156
|
+
@keyframes spin {
|
|
157
|
+
from {
|
|
158
|
+
transform: rotate(0deg);
|
|
159
|
+
}
|
|
160
|
+
to {
|
|
161
|
+
transform: rotate(360deg);
|
|
58
162
|
}
|
|
59
163
|
}
|
|
60
164
|
|
|
61
|
-
|
|
62
|
-
|
|
165
|
+
/* Loader component */
|
|
166
|
+
.loader {
|
|
167
|
+
border: 4px solid rgba(0, 0, 0, 0.1);
|
|
168
|
+
border-left-color: #00c6b9;
|
|
169
|
+
border-radius: 50%;
|
|
170
|
+
width: 40px;
|
|
171
|
+
height: 40px;
|
|
172
|
+
animation: spin 1.5s linear infinite;
|
|
63
173
|
}
|
|
64
174
|
|
|
65
|
-
|
|
66
|
-
|
|
175
|
+
/* Gig description component */
|
|
176
|
+
.gig-description {
|
|
177
|
+
ul {
|
|
178
|
+
margin-left: 40px;
|
|
179
|
+
margin-bottom: 20px;
|
|
180
|
+
margin-top: 10px;
|
|
181
|
+
}
|
|
67
182
|
}
|
|
68
183
|
|
|
69
|
-
|
|
70
|
-
|
|
184
|
+
/* Telephone input component */
|
|
185
|
+
.react-tel-input,
|
|
186
|
+
.react-tel-input input {
|
|
187
|
+
width: 100% !important;
|
|
188
|
+
height: 40px !important;
|
|
71
189
|
}
|
|
72
190
|
|
|
73
|
-
.
|
|
74
|
-
background:
|
|
191
|
+
.react-tel-input input {
|
|
192
|
+
background-color: #f8f8f8 !important;
|
|
75
193
|
}
|
|
@@ -176,38 +176,12 @@
|
|
|
176
176
|
var(--color-primary) 50%,
|
|
177
177
|
var(--color-navy-blue) 100%
|
|
178
178
|
);
|
|
179
|
-
/* Light blue → Primary → accent purple gradients */
|
|
180
|
-
--color-linear-gradient-y: linear-gradient(
|
|
181
|
-
180deg,
|
|
182
|
-
var(--color-light-blue) 0%,
|
|
183
|
-
var(--color-primary) 50.52%,
|
|
184
|
-
var(--color-accent-purple) 100%
|
|
185
|
-
);
|
|
186
|
-
|
|
187
|
-
--color-linear-gradient-x: linear-gradient(
|
|
188
|
-
90deg,
|
|
189
|
-
var(--color-light-blue) 0%,
|
|
190
|
-
var(--color-primary) 50.52%,
|
|
191
|
-
var(--color-accent-purple) 100%
|
|
192
|
-
);
|
|
193
|
-
|
|
194
|
-
/* Navy blue → Primary gradients */
|
|
195
|
-
--color-gradient-blue-green-y: linear-gradient(
|
|
196
|
-
180deg,
|
|
197
|
-
var(--color-navy-blue) 1.57%,
|
|
198
|
-
var(--color-primary) 98.28%
|
|
199
|
-
);
|
|
200
179
|
|
|
201
|
-
--color-gradient-blue-green-x: linear-gradient(
|
|
202
|
-
88.05deg,
|
|
203
|
-
var(--color-navy-blue) 1.57%,
|
|
204
|
-
var(--color-primary) 98.28%
|
|
205
|
-
);
|
|
206
180
|
--color-nav-gradient:
|
|
207
181
|
radial-gradient(circle at 20% 20%, #0d1148 0%, transparent 65%),
|
|
208
182
|
radial-gradient(circle at 65% 40%, #09b7a3 0%, transparent 75%),
|
|
209
183
|
radial-gradient(circle at 75% 85%, #0a0f3d 0%, transparent 70%), #051748;
|
|
210
|
-
--color-nav-gradient-
|
|
184
|
+
--color-nav-gradient-alternative:
|
|
211
185
|
radial-gradient(circle at 20% 20%, #0d1148 0%, transparent 65%),
|
|
212
186
|
radial-gradient(
|
|
213
187
|
circle at 65% 40%,
|
|
@@ -220,7 +194,7 @@
|
|
|
220
194
|
radial-gradient(circle at 72% 28%, #09b7a3 0%, transparent 75%),
|
|
221
195
|
radial-gradient(circle at 15% 50%, #0a0f3d 0%, transparent 70%), #051748;
|
|
222
196
|
|
|
223
|
-
--color-nav-gradient-mobile-
|
|
197
|
+
--color-nav-gradient-mobile-alternative:
|
|
224
198
|
radial-gradient(circle at 85% 50%, #0d1148 0%, transparent 65%),
|
|
225
199
|
radial-gradient(
|
|
226
200
|
circle at 72% 28%,
|
|
@@ -242,13 +216,4 @@
|
|
|
242
216
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
243
217
|
}
|
|
244
218
|
|
|
245
|
-
/* GLOBAL CSS VARIABLES (not theme tokens) */
|
|
246
|
-
|
|
247
|
-
:root {
|
|
248
|
-
--toastify-color-info: var(--color-accent-blue);
|
|
249
|
-
--toastify-color-success: var(--color-primary);
|
|
250
|
-
--toastify-color-warning: var(--color-yellow);
|
|
251
|
-
--toastify-color-error: var(--color-red-500);
|
|
252
|
-
}
|
|
253
|
-
|
|
254
219
|
@source "../../dist";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@youngonesworks/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.131",
|
|
4
4
|
"description": "A Youngones UI component library",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -12,16 +12,14 @@
|
|
|
12
12
|
"require": "./dist/index.cjs",
|
|
13
13
|
"default": "./dist/index.js"
|
|
14
14
|
},
|
|
15
|
-
"./styles": {
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
|
|
15
|
+
"./styles.css": {
|
|
16
|
+
"style": "./dist/styles/index.css",
|
|
17
|
+
"default": "./dist/styles/index.css"
|
|
18
|
+
},
|
|
19
|
+
"./globals.css": {
|
|
20
|
+
"style": "./dist/globals.css",
|
|
21
|
+
"default": "./dist/globals.css"
|
|
19
22
|
},
|
|
20
|
-
"./styles/variables.css": "./dist/styles/variables.css",
|
|
21
|
-
"./styles/utilities.css": "./dist/styles/utilities.css",
|
|
22
|
-
"./styles/tailwind.css": "./dist/styles/tailwind.css",
|
|
23
|
-
"./styles/editor.css": "./dist/styles/editor.css",
|
|
24
|
-
"./globals.css": "./dist/globals.css",
|
|
25
23
|
"./assets/*": "./dist/assets/*"
|
|
26
24
|
},
|
|
27
25
|
"files": [
|
|
@@ -69,7 +67,7 @@
|
|
|
69
67
|
"@commitlint/config-conventional": "^19.5.0",
|
|
70
68
|
"@commitlint/lint": "^19.5.0",
|
|
71
69
|
"@floating-ui/react": "^0.27.18",
|
|
72
|
-
"@tabler/icons-react": "^3.
|
|
70
|
+
"@tabler/icons-react": "^3.37.1",
|
|
73
71
|
"@tiptap/core": "^2.3.1",
|
|
74
72
|
"@tiptap/extension-link": "^2.1.12",
|
|
75
73
|
"@tiptap/extension-placeholder": "^2.1.12",
|