@youngonesworks/ui 0.1.134 → 1.0.1
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 +35 -7
- package/dist/globals.css +1 -9
- package/dist/index.cjs +8 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +8 -5
- package/dist/index.js.map +1 -1
- package/dist/styles/base.css +58 -0
- package/dist/styles/index.css +1 -0
- package/dist/styles/typography.css +20 -82
- package/dist/styles/utilities.css +33 -112
- package/dist/styles/variables.css +2 -15
- package/package.json +1 -1
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Base layer styles
|
|
3
|
+
* Uses @layer base (https://tailwindcss.com/docs/functions-and-directives)
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@layer base {
|
|
7
|
+
/* Base element styles */
|
|
8
|
+
* {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
html {
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
-ms-overflow-style: scrollbar;
|
|
15
|
+
-webkit-tap-highlight-color: transparent;
|
|
16
|
+
font-family: var(--font-family-sans);
|
|
17
|
+
@apply min-h-screen overflow-y-scroll text-base text-navy-blue;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
body {
|
|
21
|
+
@apply m-0 bg-ultra-light-blue;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
button:focus-visible {
|
|
25
|
+
@apply outline-none ring-2 ring-offset-2;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h1,
|
|
29
|
+
h2,
|
|
30
|
+
h3,
|
|
31
|
+
h4,
|
|
32
|
+
h5,
|
|
33
|
+
h6 {
|
|
34
|
+
@apply m-0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
ul {
|
|
38
|
+
@apply list-disc;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
ol {
|
|
42
|
+
@apply list-decimal;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Link styles (base) */
|
|
46
|
+
a {
|
|
47
|
+
text-decoration: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
a:hover {
|
|
51
|
+
text-decoration: underline;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
button:not(:disabled),
|
|
55
|
+
[role="button"]:not(:disabled) {
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
}
|
|
58
|
+
}
|
package/dist/styles/index.css
CHANGED
|
@@ -1,131 +1,69 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typography component classes
|
|
3
|
+
* Uses @apply to inline Tailwind utilities (see https://tailwindcss.com/docs/functions-and-directives#apply)
|
|
4
|
+
*/
|
|
1
5
|
@layer components {
|
|
2
|
-
h1,
|
|
3
6
|
.yo-text-h1 {
|
|
4
|
-
|
|
5
|
-
font-size: var(--text-3xl);
|
|
6
|
-
line-height: var(--text-3xl--line-height);
|
|
7
|
-
font-weight: var(--text-3xl--weight);
|
|
7
|
+
@apply text-3xl text-navy-blue font-bold;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.yo-text-h1-caps {
|
|
11
|
-
|
|
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;
|
|
11
|
+
@apply text-3xl text-navy-blue uppercase font-black;
|
|
16
12
|
}
|
|
17
13
|
|
|
18
|
-
h2,
|
|
19
14
|
.yo-text-h2 {
|
|
20
|
-
|
|
21
|
-
font-size: var(--text-2xl);
|
|
22
|
-
line-height: var(--text-2xl--line-height);
|
|
23
|
-
font-weight: var(--text-2xl--weight);
|
|
15
|
+
@apply text-2xl text-navy-blue font-bold;
|
|
24
16
|
}
|
|
25
17
|
|
|
26
18
|
.yo-text-h2-caps {
|
|
27
|
-
|
|
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;
|
|
19
|
+
@apply text-2xl text-navy-blue uppercase font-bold;
|
|
32
20
|
}
|
|
33
21
|
|
|
34
|
-
h3,
|
|
35
22
|
.yo-text-h3 {
|
|
36
|
-
|
|
37
|
-
font-size: var(--text-xl);
|
|
38
|
-
line-height: var(--text-xl--line-height);
|
|
39
|
-
font-weight: 600;
|
|
23
|
+
@apply text-xl text-navy-blue font-bold;
|
|
40
24
|
}
|
|
41
25
|
|
|
42
|
-
h4,
|
|
43
26
|
.yo-text-h4 {
|
|
44
|
-
|
|
45
|
-
font-size: var(--text-lg);
|
|
46
|
-
line-height: var(--text-lg--line-height);
|
|
47
|
-
font-weight: 700;
|
|
27
|
+
@apply text-lg text-navy-blue font-bold;
|
|
48
28
|
}
|
|
49
29
|
|
|
50
|
-
p,
|
|
51
30
|
.yo-text-body {
|
|
52
|
-
|
|
53
|
-
font-size: var(--text-base);
|
|
54
|
-
line-height: var(--text-base--line-height);
|
|
55
|
-
font-weight: var(--text-base--weight);
|
|
31
|
+
@apply text-base text-navy-blue font-normal;
|
|
56
32
|
}
|
|
57
33
|
|
|
58
34
|
.yo-text-body-medium {
|
|
59
|
-
|
|
60
|
-
font-size: var(--text-base);
|
|
61
|
-
line-height: var(--text-base--line-height);
|
|
62
|
-
font-weight: 500;
|
|
35
|
+
@apply text-base text-navy-blue font-semibold;
|
|
63
36
|
}
|
|
64
37
|
|
|
65
38
|
.yo-text-body-bold {
|
|
66
|
-
|
|
67
|
-
font-size: var(--text-base);
|
|
68
|
-
line-height: var(--text-base--line-height);
|
|
69
|
-
font-weight: 600;
|
|
39
|
+
@apply text-base text-navy-blue font-semibold;
|
|
70
40
|
}
|
|
71
41
|
|
|
72
|
-
span,
|
|
73
42
|
.yo-text-small {
|
|
74
|
-
|
|
75
|
-
font-size: var(--text-sm);
|
|
76
|
-
line-height: var(--text-sm--line-height);
|
|
77
|
-
font-weight: var(--text-sm--weight);
|
|
43
|
+
@apply text-sm text-navy-blue font-medium;
|
|
78
44
|
}
|
|
79
45
|
|
|
80
46
|
.yo-text-small-medium {
|
|
81
|
-
|
|
82
|
-
font-size: var(--text-sm);
|
|
83
|
-
line-height: var(--text-sm--line-height);
|
|
84
|
-
font-weight: 600;
|
|
47
|
+
@apply text-sm text-navy-blue font-semibold;
|
|
85
48
|
}
|
|
86
49
|
|
|
87
50
|
.yo-text-field-placeholder {
|
|
88
|
-
|
|
89
|
-
font-size: var(--text-sm);
|
|
90
|
-
line-height: var(--text-sm--line-height);
|
|
91
|
-
font-weight: var(--text-sm--weight);
|
|
51
|
+
@apply text-sm text-gray-400 font-normal;
|
|
92
52
|
}
|
|
93
53
|
|
|
94
54
|
.yo-text-caption {
|
|
95
|
-
|
|
96
|
-
font-size: var(--text-xs);
|
|
97
|
-
line-height: var(--text-xs--line-height);
|
|
98
|
-
font-weight: 500;
|
|
55
|
+
@apply text-xs text-navy-blue font-medium;
|
|
99
56
|
}
|
|
100
57
|
|
|
101
|
-
a,
|
|
102
58
|
.yo-text-link {
|
|
103
|
-
font-
|
|
104
|
-
line-height: var(--text-xs--line-height);
|
|
105
|
-
font-weight: 600;
|
|
106
|
-
color: var(--color-accent-blue);
|
|
107
|
-
text-decoration: none;
|
|
108
|
-
cursor: pointer;
|
|
109
|
-
transition: opacity 0.2s ease;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
a:hover,
|
|
113
|
-
.yo-text-link:hover {
|
|
114
|
-
opacity: 0.85;
|
|
115
|
-
text-decoration: underline;
|
|
59
|
+
@apply text-xs font-semibold text-accent-blue no-underline cursor-pointer transition-opacity duration-200 ease-in-out hover:opacity-[0.85] hover:underline;
|
|
116
60
|
}
|
|
117
61
|
|
|
118
62
|
.yo-text-label {
|
|
119
|
-
font-
|
|
120
|
-
line-height: var(--text-xs--line-height);
|
|
121
|
-
font-weight: 600;
|
|
122
|
-
color: var(--color-navy-blue);
|
|
63
|
+
@apply text-xs font-semibold text-navy-blue;
|
|
123
64
|
}
|
|
124
65
|
|
|
125
66
|
.yo-text-hint {
|
|
126
|
-
font-
|
|
127
|
-
line-height: 0.875rem;
|
|
128
|
-
font-weight: 400;
|
|
129
|
-
color: var(--color-navy-blue);
|
|
67
|
+
@apply font-normal text-navy-blue text-[0.625rem] leading-[0.875rem];
|
|
130
68
|
}
|
|
131
69
|
}
|
|
@@ -1,127 +1,63 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Custom
|
|
3
|
-
*
|
|
2
|
+
* Custom utilities and base styles
|
|
3
|
+
* @utility = custom utilities with variant support (https://tailwindcss.com/docs/functions-and-directives#utility)
|
|
4
|
+
* @apply = inline existing utilities (https://tailwindcss.com/docs/functions-and-directives#apply)
|
|
4
5
|
*/
|
|
5
6
|
|
|
6
|
-
/* Custom utility */
|
|
7
|
+
/* Custom utilities – one utility per @utility block */
|
|
7
8
|
@utility transition-max-height {
|
|
8
9
|
transition: max-height 0.3s ease-in-out;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
|
-
@
|
|
12
|
-
|
|
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);
|
|
12
|
+
@utility animate-spin-slow {
|
|
13
|
+
animation: spin 2s linear infinite;
|
|
46
14
|
}
|
|
47
15
|
|
|
48
|
-
|
|
49
|
-
|
|
16
|
+
@utility animate-spin-once {
|
|
17
|
+
animation: spin 2s linear forwards;
|
|
50
18
|
}
|
|
51
19
|
|
|
52
|
-
|
|
53
|
-
|
|
20
|
+
@utility duration-sidebar {
|
|
21
|
+
transition-duration: var(--transition-duration-sidebar);
|
|
54
22
|
}
|
|
55
23
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
.hover\:bg-gradient-calendar:hover {
|
|
60
|
-
background-image: var(--color-gradient-calendar);
|
|
61
|
-
}
|
|
62
|
-
/* Toast notification colors */
|
|
63
|
-
:root {
|
|
64
|
-
--toastify-color-info: #2a67f6;
|
|
65
|
-
--toastify-color-success: #10d1bb;
|
|
66
|
-
--toastify-color-warning: #f8ec5b;
|
|
67
|
-
--toastify-color-error: #ed3f55;
|
|
24
|
+
@utility duration-700 {
|
|
25
|
+
transition-duration: 700ms;
|
|
68
26
|
}
|
|
69
27
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
box-sizing: inherit;
|
|
28
|
+
@utility duration-1000 {
|
|
29
|
+
transition-duration: 1000ms;
|
|
73
30
|
}
|
|
74
31
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
-ms-overflow-style: scrollbar;
|
|
78
|
-
-webkit-tap-highlight-color: rgba(#000, 0);
|
|
79
|
-
font-family: var(--font-family-sans);
|
|
80
|
-
@reference min-h-screen;
|
|
81
|
-
@reference overflow-y-scroll;
|
|
82
|
-
@reference text-base;
|
|
32
|
+
@utility bg-gradient-blue-turquoise {
|
|
33
|
+
background-image: var(--color-gradient-blue-turquoise);
|
|
83
34
|
}
|
|
84
35
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
@reference bg-ultra-light-blue;
|
|
36
|
+
@utility bg-gradient-blue-purple {
|
|
37
|
+
background-image: var(--color-linear-gradient-x) !important;
|
|
88
38
|
}
|
|
89
39
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
@reference focus:outline-hidden;
|
|
93
|
-
@reference focus:ring-2;
|
|
94
|
-
@reference focus:ring-offset-2;
|
|
40
|
+
@utility bg-nav-gradient {
|
|
41
|
+
background: var(--color-nav-gradient);
|
|
95
42
|
}
|
|
96
43
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
text-decoration: none;
|
|
44
|
+
@utility bg-nav-gradient-mobile {
|
|
45
|
+
background: var(--color-nav-gradient-mobile);
|
|
100
46
|
}
|
|
101
47
|
|
|
102
|
-
|
|
103
|
-
|
|
48
|
+
@utility bg-nav-gradient-alternative {
|
|
49
|
+
background: var(--color-nav-gradient-alternative);
|
|
104
50
|
}
|
|
105
51
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
button:not(:disabled),
|
|
109
|
-
[role="button"]:not(:disabled) {
|
|
110
|
-
cursor: pointer;
|
|
111
|
-
}
|
|
52
|
+
@utility bg-nav-gradient-mobile-alternative {
|
|
53
|
+
background: var(--color-nav-gradient-mobile-alternative);
|
|
112
54
|
}
|
|
113
55
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
h2,
|
|
117
|
-
h3,
|
|
118
|
-
h4,
|
|
119
|
-
h5,
|
|
120
|
-
h6 {
|
|
121
|
-
@reference m-0;
|
|
56
|
+
@utility bg-gradient-calendar {
|
|
57
|
+
background: var(--color-gradient-calendar);
|
|
122
58
|
}
|
|
123
59
|
|
|
124
|
-
/*
|
|
60
|
+
/* Third-party / editor overrides */
|
|
125
61
|
.is-editor-empty:first-of-type::before {
|
|
126
62
|
color: var(--color-gray-900);
|
|
127
63
|
opacity: 0.5;
|
|
@@ -131,15 +67,6 @@ h6 {
|
|
|
131
67
|
pointer-events: none;
|
|
132
68
|
}
|
|
133
69
|
|
|
134
|
-
/* List styles */
|
|
135
|
-
ul {
|
|
136
|
-
@reference list-disc;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
ol {
|
|
140
|
-
@reference list-decimal;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
70
|
/* Table animations */
|
|
144
71
|
.table-animation-exit {
|
|
145
72
|
opacity: 1;
|
|
@@ -158,7 +85,6 @@ ol {
|
|
|
158
85
|
transition: opacity 300ms ease-in;
|
|
159
86
|
}
|
|
160
87
|
|
|
161
|
-
/* Spin animation keyframes */
|
|
162
88
|
@keyframes spin {
|
|
163
89
|
from {
|
|
164
90
|
transform: rotate(0deg);
|
|
@@ -168,7 +94,6 @@ ol {
|
|
|
168
94
|
}
|
|
169
95
|
}
|
|
170
96
|
|
|
171
|
-
/* Loader component */
|
|
172
97
|
.loader {
|
|
173
98
|
border: 4px solid rgba(0, 0, 0, 0.1);
|
|
174
99
|
border-left-color: #00c6b9;
|
|
@@ -178,16 +103,12 @@ ol {
|
|
|
178
103
|
animation: spin 1.5s linear infinite;
|
|
179
104
|
}
|
|
180
105
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
margin-bottom: 20px;
|
|
186
|
-
margin-top: 10px;
|
|
187
|
-
}
|
|
106
|
+
.gig-description ul {
|
|
107
|
+
margin-left: 40px;
|
|
108
|
+
margin-bottom: 20px;
|
|
109
|
+
margin-top: 10px;
|
|
188
110
|
}
|
|
189
111
|
|
|
190
|
-
/* Telephone input component */
|
|
191
112
|
.react-tel-input,
|
|
192
113
|
.react-tel-input input {
|
|
193
114
|
width: 100% !important;
|
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
@theme {
|
|
7
7
|
/* Base colors */
|
|
8
8
|
--color-primary: #10d1bb;
|
|
9
|
+
--color-secondary: var(--color-red-500);
|
|
10
|
+
--color-secondary-light: var(--color-red-50);
|
|
9
11
|
--color-black: #000024;
|
|
10
12
|
--color-navy-blue: #000440;
|
|
11
13
|
--color-light-blue: #26295c;
|
|
@@ -17,8 +19,6 @@
|
|
|
17
19
|
--color-light-blue-disabled: #bdbeca;
|
|
18
20
|
--color-green: #1d9856;
|
|
19
21
|
--color-green-light: #ecfdf3;
|
|
20
|
-
--color-secondary: var(--color-red-500);
|
|
21
|
-
--color-secondary-light: var(--color-red-50);
|
|
22
22
|
--color-accent-purple: #8249fd;
|
|
23
23
|
--color-purple: #420089;
|
|
24
24
|
--color-purple-light: #f2e6ff;
|
|
@@ -36,67 +36,54 @@
|
|
|
36
36
|
/* Extra small */
|
|
37
37
|
--text-xs: 0.75rem;
|
|
38
38
|
--text-xs--line-height: 1rem;
|
|
39
|
-
--text-xs--weight: 400;
|
|
40
39
|
|
|
41
40
|
/* Small */
|
|
42
41
|
--text-sm: 0.875rem;
|
|
43
42
|
--text-sm--line-height: 1.25rem;
|
|
44
|
-
--text-sm--weight: 400;
|
|
45
43
|
|
|
46
44
|
/* Base */
|
|
47
45
|
--text-base: 1rem;
|
|
48
46
|
--text-base--line-height: 1.5rem;
|
|
49
|
-
--text-base--weight: 400;
|
|
50
47
|
|
|
51
48
|
/* Large */
|
|
52
49
|
--text-lg: 1.125rem;
|
|
53
50
|
--text-lg--line-height: 1.75rem;
|
|
54
|
-
--text-lg--weight: 400;
|
|
55
51
|
|
|
56
52
|
/* Extra large */
|
|
57
53
|
--text-xl: 1.25rem;
|
|
58
54
|
--text-xl--line-height: 2rem;
|
|
59
|
-
--text-xl--weight: 500;
|
|
60
55
|
|
|
61
56
|
/* 2x large */
|
|
62
57
|
--text-2xl: 1.5rem;
|
|
63
58
|
--text-2xl--line-height: 2rem;
|
|
64
|
-
--text-2xl--weight: 700;
|
|
65
59
|
|
|
66
60
|
/* 3x large */
|
|
67
61
|
--text-3xl: 1.875rem;
|
|
68
62
|
--text-3xl--line-height: 2.25rem;
|
|
69
|
-
--text-3xl--weight: 700;
|
|
70
63
|
|
|
71
64
|
/* 4x large */
|
|
72
65
|
--text-4xl: 2.25rem;
|
|
73
66
|
--text-4xl--line-height: 2.5rem;
|
|
74
|
-
--text-4xl--weight: 700;
|
|
75
67
|
|
|
76
68
|
/* 5x large */
|
|
77
69
|
--text-5xl: 3rem;
|
|
78
70
|
--text-5xl--line-height: 1;
|
|
79
|
-
--text-5xl--weight: 700;
|
|
80
71
|
|
|
81
72
|
/* 6x large */
|
|
82
73
|
--text-6xl: 3.75rem;
|
|
83
74
|
--text-6xl--line-height: 1;
|
|
84
|
-
--text-6xl--weight: 700;
|
|
85
75
|
|
|
86
76
|
/* 7x large */
|
|
87
77
|
--text-7xl: 4.5rem;
|
|
88
78
|
--text-7xl--line-height: 1;
|
|
89
|
-
--text-7xl--weight: 700;
|
|
90
79
|
|
|
91
80
|
/* 8x large */
|
|
92
81
|
--text-8xl: 6rem;
|
|
93
82
|
--text-8xl--line-height: 1;
|
|
94
|
-
--text-8xl--weight: 700;
|
|
95
83
|
|
|
96
84
|
/* 9x large */
|
|
97
85
|
--text-9xl: 8rem;
|
|
98
86
|
--text-9xl--line-height: 1;
|
|
99
|
-
--text-9xl--weight: 700;
|
|
100
87
|
|
|
101
88
|
/* Color scales */
|
|
102
89
|
/* Turquoise palette */
|