@youngonesworks/ui 0.1.133 → 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 +9 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +9 -6
- 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 -84
- package/dist/styles/utilities.css +33 -106
- 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,133 +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: 500;
|
|
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: 600;
|
|
55
|
+
@apply text-xs text-navy-blue font-medium;
|
|
99
56
|
}
|
|
100
57
|
|
|
101
|
-
a,
|
|
102
|
-
link,
|
|
103
58
|
.yo-text-link {
|
|
104
|
-
font-
|
|
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;
|
|
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;
|
|
118
60
|
}
|
|
119
61
|
|
|
120
62
|
.yo-text-label {
|
|
121
|
-
font-
|
|
122
|
-
line-height: var(--text-xs--line-height);
|
|
123
|
-
font-weight: 600;
|
|
124
|
-
color: var(--color-navy-blue);
|
|
63
|
+
@apply text-xs font-semibold text-navy-blue;
|
|
125
64
|
}
|
|
126
65
|
|
|
127
66
|
.yo-text-hint {
|
|
128
|
-
font-
|
|
129
|
-
line-height: 0.875rem;
|
|
130
|
-
font-weight: 400;
|
|
131
|
-
color: var(--color-navy-blue);
|
|
67
|
+
@apply font-normal text-navy-blue text-[0.625rem] leading-[0.875rem];
|
|
132
68
|
}
|
|
133
69
|
}
|
|
@@ -1,121 +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
|
-
--toastify-color-info: #2a67f6;
|
|
59
|
-
--toastify-color-success: #10d1bb;
|
|
60
|
-
--toastify-color-warning: #f8ec5b;
|
|
61
|
-
--toastify-color-error: #ed3f55;
|
|
24
|
+
@utility duration-700 {
|
|
25
|
+
transition-duration: 700ms;
|
|
62
26
|
}
|
|
63
27
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
box-sizing: inherit;
|
|
28
|
+
@utility duration-1000 {
|
|
29
|
+
transition-duration: 1000ms;
|
|
67
30
|
}
|
|
68
31
|
|
|
69
|
-
|
|
70
|
-
|
|
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;
|
|
32
|
+
@utility bg-gradient-blue-turquoise {
|
|
33
|
+
background-image: var(--color-gradient-blue-turquoise);
|
|
77
34
|
}
|
|
78
35
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
@reference bg-ultra-light-blue;
|
|
36
|
+
@utility bg-gradient-blue-purple {
|
|
37
|
+
background-image: var(--color-linear-gradient-x) !important;
|
|
82
38
|
}
|
|
83
39
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
@reference focus:outline-hidden;
|
|
87
|
-
@reference focus:ring-2;
|
|
88
|
-
@reference focus:ring-offset-2;
|
|
40
|
+
@utility bg-nav-gradient {
|
|
41
|
+
background: var(--color-nav-gradient);
|
|
89
42
|
}
|
|
90
43
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
text-decoration: none;
|
|
44
|
+
@utility bg-nav-gradient-mobile {
|
|
45
|
+
background: var(--color-nav-gradient-mobile);
|
|
94
46
|
}
|
|
95
47
|
|
|
96
|
-
|
|
97
|
-
|
|
48
|
+
@utility bg-nav-gradient-alternative {
|
|
49
|
+
background: var(--color-nav-gradient-alternative);
|
|
98
50
|
}
|
|
99
51
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
button:not(:disabled),
|
|
103
|
-
[role="button"]:not(:disabled) {
|
|
104
|
-
cursor: pointer;
|
|
105
|
-
}
|
|
52
|
+
@utility bg-nav-gradient-mobile-alternative {
|
|
53
|
+
background: var(--color-nav-gradient-mobile-alternative);
|
|
106
54
|
}
|
|
107
55
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
h2,
|
|
111
|
-
h3,
|
|
112
|
-
h4,
|
|
113
|
-
h5,
|
|
114
|
-
h6 {
|
|
115
|
-
@reference m-0;
|
|
56
|
+
@utility bg-gradient-calendar {
|
|
57
|
+
background: var(--color-gradient-calendar);
|
|
116
58
|
}
|
|
117
59
|
|
|
118
|
-
/*
|
|
60
|
+
/* Third-party / editor overrides */
|
|
119
61
|
.is-editor-empty:first-of-type::before {
|
|
120
62
|
color: var(--color-gray-900);
|
|
121
63
|
opacity: 0.5;
|
|
@@ -125,15 +67,6 @@ h6 {
|
|
|
125
67
|
pointer-events: none;
|
|
126
68
|
}
|
|
127
69
|
|
|
128
|
-
/* List styles */
|
|
129
|
-
ul {
|
|
130
|
-
@reference list-disc;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
ol {
|
|
134
|
-
@reference list-decimal;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
70
|
/* Table animations */
|
|
138
71
|
.table-animation-exit {
|
|
139
72
|
opacity: 1;
|
|
@@ -152,7 +85,6 @@ ol {
|
|
|
152
85
|
transition: opacity 300ms ease-in;
|
|
153
86
|
}
|
|
154
87
|
|
|
155
|
-
/* Spin animation keyframes */
|
|
156
88
|
@keyframes spin {
|
|
157
89
|
from {
|
|
158
90
|
transform: rotate(0deg);
|
|
@@ -162,7 +94,6 @@ ol {
|
|
|
162
94
|
}
|
|
163
95
|
}
|
|
164
96
|
|
|
165
|
-
/* Loader component */
|
|
166
97
|
.loader {
|
|
167
98
|
border: 4px solid rgba(0, 0, 0, 0.1);
|
|
168
99
|
border-left-color: #00c6b9;
|
|
@@ -172,16 +103,12 @@ ol {
|
|
|
172
103
|
animation: spin 1.5s linear infinite;
|
|
173
104
|
}
|
|
174
105
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
margin-bottom: 20px;
|
|
180
|
-
margin-top: 10px;
|
|
181
|
-
}
|
|
106
|
+
.gig-description ul {
|
|
107
|
+
margin-left: 40px;
|
|
108
|
+
margin-bottom: 20px;
|
|
109
|
+
margin-top: 10px;
|
|
182
110
|
}
|
|
183
111
|
|
|
184
|
-
/* Telephone input component */
|
|
185
112
|
.react-tel-input,
|
|
186
113
|
.react-tel-input input {
|
|
187
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 */
|