@dev-tcloud/tcloud-ui 6.14.3 → 6.15.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/package.json +1 -1
- package/scss/tcloud-ui/styles/_claus-badge.scss +117 -0
- package/scss/tcloud-ui/styles/_claus-btn.scss +207 -0
- package/scss/tcloud-ui/styles/_claus-card.scss +12 -0
- package/scss/tcloud-ui/styles/_claus-colors.scss +192 -0
- package/scss/tcloud-ui/styles/_claus-form.scss +88 -0
- package/scss/tcloud-ui/styles/_claus-sizes.scss +28 -0
- package/scss/tcloud-ui/styles/_claus-spacers.scss +49 -0
- package/scss/tcloud-ui/styles/_claus-themes.scss +36 -0
- package/scss/tcloud-ui/styles/_claus-title.scss +24 -0
- package/scss/tcloud-ui/styles/_claus-typography.scss +70 -0
- package/scss/tcloud-ui/styles/_claus-variables.scss +131 -0
- package/scss/tcloud-ui/styles/_colors.scss +123 -0
- package/scss/tcloud-ui/styles/_tc-btn.scss +210 -0
- package/scss/tcloud-ui/styles/_tc-card.scss +7 -0
- package/scss/tcloud-ui/styles/_tc-title.scss +49 -0
- package/scss/tcloud-ui/styles.scss +35 -0
package/package.json
CHANGED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Claus — tc-badge
|
|
3
|
+
// Uso: <span class="tc-badge tc-badge-primary">Label</span>
|
|
4
|
+
// =============================================================================
|
|
5
|
+
|
|
6
|
+
.tc-badge {
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
gap: 4px;
|
|
10
|
+
padding: 2px 10px;
|
|
11
|
+
border-radius: var(--bor-radius-pill);
|
|
12
|
+
font-family: var(--f-family);
|
|
13
|
+
font-size: 0.75rem;
|
|
14
|
+
font-weight: 600;
|
|
15
|
+
line-height: 1.6;
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
border: 1px solid transparent;
|
|
18
|
+
|
|
19
|
+
// --- Variantes filled -------------------------------------------------------
|
|
20
|
+
|
|
21
|
+
&-primary {
|
|
22
|
+
background-color: var(--c-primary-300);
|
|
23
|
+
color: var(--c-primary-700);
|
|
24
|
+
border-color: var(--c-primary-400);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&-danger {
|
|
28
|
+
background-color: var(--c-danger-300);
|
|
29
|
+
color: var(--c-danger-700);
|
|
30
|
+
border-color: var(--c-danger-400);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&-alert {
|
|
34
|
+
background-color: var(--c-alert-300);
|
|
35
|
+
color: var(--c-alert-700);
|
|
36
|
+
border-color: var(--c-alert-400);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&-success {
|
|
40
|
+
background-color: var(--c-success-300);
|
|
41
|
+
color: var(--c-success-700);
|
|
42
|
+
border-color: var(--c-success-400);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&-info {
|
|
46
|
+
background-color: var(--c-info-300);
|
|
47
|
+
color: var(--c-primary-700);
|
|
48
|
+
border-color: var(--c-info-400);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&-neutral {
|
|
52
|
+
background-color: var(--c-neutral-200);
|
|
53
|
+
color: var(--c-neutral-600);
|
|
54
|
+
border-color: var(--c-neutral-300);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// --- Variante solid (fundo cheio, texto claro) ------------------------------
|
|
58
|
+
|
|
59
|
+
&-solid {
|
|
60
|
+
&.tc-badge-primary {
|
|
61
|
+
background-color: var(--c-primary-500);
|
|
62
|
+
color: var(--c-neutral-50);
|
|
63
|
+
border-color: var(--c-primary-500);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&.tc-badge-danger {
|
|
67
|
+
background-color: var(--c-danger-500);
|
|
68
|
+
color: var(--c-neutral-50);
|
|
69
|
+
border-color: var(--c-danger-500);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&.tc-badge-alert {
|
|
73
|
+
background-color: var(--c-alert-500);
|
|
74
|
+
color: var(--c-neutral-700);
|
|
75
|
+
border-color: var(--c-alert-500);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&.tc-badge-success {
|
|
79
|
+
background-color: var(--c-success-500);
|
|
80
|
+
color: var(--c-neutral-50);
|
|
81
|
+
border-color: var(--c-success-500);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&.tc-badge-info {
|
|
85
|
+
background-color: var(--c-info-500);
|
|
86
|
+
color: var(--c-neutral-50);
|
|
87
|
+
border-color: var(--c-info-500);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&.tc-badge-neutral {
|
|
91
|
+
background-color: var(--c-neutral-600);
|
|
92
|
+
color: var(--c-neutral-50);
|
|
93
|
+
border-color: var(--c-neutral-600);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// --- Tamanhos ---------------------------------------------------------------
|
|
98
|
+
|
|
99
|
+
&-sm {
|
|
100
|
+
padding: 1px 7px;
|
|
101
|
+
font-size: 0.6875rem;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&-lg {
|
|
105
|
+
padding: 4px 14px;
|
|
106
|
+
font-size: 0.875rem;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// --- Estado desabilitado ----------------------------------------------------
|
|
110
|
+
|
|
111
|
+
&-disabled,
|
|
112
|
+
&[disabled] {
|
|
113
|
+
opacity: 0.45;
|
|
114
|
+
cursor: not-allowed;
|
|
115
|
+
pointer-events: none;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Claus — tc-btn
|
|
3
|
+
// Uso: <button class="tc-btn tc-btn-primary">Label</button>
|
|
4
|
+
// Todas as cores via CSS custom properties (--c-*); sem valores literais.
|
|
5
|
+
// =============================================================================
|
|
6
|
+
|
|
7
|
+
@mixin btn-filled($bg, $bg-hover, $bg-active, $color) {
|
|
8
|
+
background-color: $bg;
|
|
9
|
+
color: $color;
|
|
10
|
+
border-color: $bg;
|
|
11
|
+
|
|
12
|
+
&:hover:not(:disabled) {
|
|
13
|
+
background-color: $bg-hover;
|
|
14
|
+
border-color: $bg-hover;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&:active:not(:disabled) {
|
|
18
|
+
background-color: $bg-active;
|
|
19
|
+
border-color: $bg-active;
|
|
20
|
+
transform: scale(0.98);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@mixin btn-outline($color, $color-hover-bg, $color-active-bg) {
|
|
25
|
+
background-color: transparent;
|
|
26
|
+
color: $color;
|
|
27
|
+
border-color: $color;
|
|
28
|
+
|
|
29
|
+
&:hover:not(:disabled) {
|
|
30
|
+
background-color: $color-hover-bg;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&:active:not(:disabled) {
|
|
34
|
+
background-color: $color-active-bg;
|
|
35
|
+
transform: scale(0.98);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// --- Base --------------------------------------------------------------------
|
|
40
|
+
|
|
41
|
+
.tc-btn {
|
|
42
|
+
display: inline-flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
gap: 8px;
|
|
46
|
+
padding: 8px 18px;
|
|
47
|
+
border-radius: 40px;
|
|
48
|
+
border: 2px solid transparent;
|
|
49
|
+
font-family: inherit;
|
|
50
|
+
font-size: 0.9rem;
|
|
51
|
+
font-weight: 600;
|
|
52
|
+
line-height: 1;
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
text-decoration: none;
|
|
55
|
+
white-space: nowrap;
|
|
56
|
+
transition:
|
|
57
|
+
background-color 0.15s ease,
|
|
58
|
+
color 0.15s ease,
|
|
59
|
+
border-color 0.15s ease,
|
|
60
|
+
transform 0.1s ease,
|
|
61
|
+
opacity 0.15s ease;
|
|
62
|
+
|
|
63
|
+
&:disabled {
|
|
64
|
+
opacity: 0.45;
|
|
65
|
+
cursor: not-allowed;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&:focus-visible {
|
|
69
|
+
outline: 3px solid var(--c-primary-400);
|
|
70
|
+
outline-offset: 2px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// --- Tamanhos ---------------------------------------------------------------
|
|
74
|
+
|
|
75
|
+
&.tc-btn-sm {
|
|
76
|
+
padding: 5px 12px;
|
|
77
|
+
font-size: 0.8rem;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&.tc-btn-lg {
|
|
81
|
+
padding: 12px 24px;
|
|
82
|
+
font-size: 1rem;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// --- Filled -----------------------------------------------------------------
|
|
86
|
+
|
|
87
|
+
&.tc-btn-primary {
|
|
88
|
+
@include btn-filled(
|
|
89
|
+
var(--c-primary-500),
|
|
90
|
+
var(--c-primary-600),
|
|
91
|
+
var(--c-primary-700),
|
|
92
|
+
var(--c-neutral-50)
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&.tc-btn-danger {
|
|
97
|
+
@include btn-filled(
|
|
98
|
+
var(--c-danger-500),
|
|
99
|
+
var(--c-danger-600),
|
|
100
|
+
var(--c-danger-700),
|
|
101
|
+
var(--c-neutral-50)
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&.tc-btn-alert {
|
|
106
|
+
@include btn-filled(
|
|
107
|
+
var(--c-alert-500),
|
|
108
|
+
var(--c-alert-600),
|
|
109
|
+
var(--c-alert-700),
|
|
110
|
+
var(--c-neutral-700)
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&.tc-btn-success {
|
|
115
|
+
@include btn-filled(
|
|
116
|
+
var(--c-success-500),
|
|
117
|
+
var(--c-success-600),
|
|
118
|
+
var(--c-success-700),
|
|
119
|
+
var(--c-neutral-50)
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&.tc-btn-neutral {
|
|
124
|
+
@include btn-filled(
|
|
125
|
+
var(--c-neutral-200),
|
|
126
|
+
var(--c-neutral-300),
|
|
127
|
+
var(--c-neutral-400),
|
|
128
|
+
var(--c-neutral-700)
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// --- Outline ----------------------------------------------------------------
|
|
133
|
+
|
|
134
|
+
&.tc-btn-outline-primary {
|
|
135
|
+
@include btn-outline(
|
|
136
|
+
var(--c-primary-500),
|
|
137
|
+
var(--c-primary-300),
|
|
138
|
+
var(--c-primary-400)
|
|
139
|
+
);
|
|
140
|
+
color: var(--c-primary-500);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
&.tc-btn-outline-danger {
|
|
144
|
+
@include btn-outline(
|
|
145
|
+
var(--c-danger-500),
|
|
146
|
+
var(--c-danger-300),
|
|
147
|
+
var(--c-danger-400)
|
|
148
|
+
);
|
|
149
|
+
color: var(--c-danger-500);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
&.tc-btn-outline-neutral {
|
|
153
|
+
@include btn-outline(
|
|
154
|
+
var(--c-neutral-400),
|
|
155
|
+
var(--c-neutral-100),
|
|
156
|
+
var(--c-neutral-200)
|
|
157
|
+
);
|
|
158
|
+
color: var(--c-neutral-600);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
a.tc-btn {
|
|
163
|
+
display: inline-flex;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
// --- tc-link -----------------------------------------------------------------
|
|
167
|
+
|
|
168
|
+
.tc-link {
|
|
169
|
+
color: var(--c-primary-500);
|
|
170
|
+
text-decoration: none;
|
|
171
|
+
font-weight: 500;
|
|
172
|
+
border-bottom: 1px solid transparent;
|
|
173
|
+
transition: color 0.15s, border-color 0.15s;
|
|
174
|
+
|
|
175
|
+
&:hover {
|
|
176
|
+
color: var(--c-primary-600);
|
|
177
|
+
border-bottom-color: var(--c-primary-400);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&:active {
|
|
181
|
+
color: var(--c-primary-700);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&:focus-visible {
|
|
185
|
+
outline: 3px solid var(--c-primary-400);
|
|
186
|
+
outline-offset: 2px;
|
|
187
|
+
border-radius: 2px;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
&.tc-link-danger {
|
|
191
|
+
color: var(--c-danger-500);
|
|
192
|
+
|
|
193
|
+
&:hover {
|
|
194
|
+
color: var(--c-danger-600);
|
|
195
|
+
border-bottom-color: var(--c-danger-400);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
&.tc-link-muted {
|
|
200
|
+
color: var(--c-neutral-500);
|
|
201
|
+
|
|
202
|
+
&:hover {
|
|
203
|
+
color: var(--c-neutral-700);
|
|
204
|
+
border-bottom-color: var(--c-neutral-400);
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Claus — tc-card
|
|
3
|
+
// Uso: <div class="tc-card">...</div>
|
|
4
|
+
// =============================================================================
|
|
5
|
+
|
|
6
|
+
.tc-card {
|
|
7
|
+
width: 100%;
|
|
8
|
+
padding: 16px;
|
|
9
|
+
border-radius: 16px;
|
|
10
|
+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14);
|
|
11
|
+
background-color: var(--c-neutral-50);
|
|
12
|
+
}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
|
|
3
|
+
// =============================================================================
|
|
4
|
+
// Claus — Color Palette (fonte única de verdade)
|
|
5
|
+
// =============================================================================
|
|
6
|
+
// Prefixo: --c- (alinhado com os componentes tc-*)
|
|
7
|
+
// Escala numérica: quanto maior, mais escuro no modo light.
|
|
8
|
+
// No modo dark as mesmas variáveis são remapeadas; componentes não mudam.
|
|
9
|
+
//
|
|
10
|
+
// Ativar dark mode : document.body.classList.add('tc-dark')
|
|
11
|
+
// Variante prime : document.body.classList.add('tc-prime-modern')
|
|
12
|
+
// =============================================================================
|
|
13
|
+
|
|
14
|
+
:root {
|
|
15
|
+
// --- Neutros ----------------------------------------------------------------
|
|
16
|
+
--c-neutral-50: #FFFFFF;
|
|
17
|
+
--c-neutral-100: #F2F6F9;
|
|
18
|
+
--c-neutral-200: #EEEEEE;
|
|
19
|
+
--c-neutral-300: #CED4DA;
|
|
20
|
+
--c-neutral-400: #BAC0C6;
|
|
21
|
+
--c-neutral-500: #5E5E5E;
|
|
22
|
+
--c-neutral-600: #363636;
|
|
23
|
+
--c-neutral-700: #1A1A1A;
|
|
24
|
+
--c-neutral-800: #0D0D0D;
|
|
25
|
+
--c-neutral-900: #000000;
|
|
26
|
+
|
|
27
|
+
// --- Primária ---------------------------------------------------------------
|
|
28
|
+
--c-primary-300: #EAF9FF;
|
|
29
|
+
--c-primary-400: #75D8FF;
|
|
30
|
+
--c-primary-500: #0897E9;
|
|
31
|
+
--c-primary-600: #0457A7;
|
|
32
|
+
--c-primary-700: #012C6F;
|
|
33
|
+
|
|
34
|
+
// --- Danger -----------------------------------------------------------------
|
|
35
|
+
--c-danger-300: #FDE1D6;
|
|
36
|
+
--c-danger-400: #F48E85;
|
|
37
|
+
--c-danger-500: #DC3545;
|
|
38
|
+
--c-danger-600: #B02A37;
|
|
39
|
+
--c-danger-700: #8B1A23;
|
|
40
|
+
|
|
41
|
+
// --- Alert ------------------------------------------------------------------
|
|
42
|
+
--c-alert-300: #FFE6B7;
|
|
43
|
+
--c-alert-400: #FECD6E;
|
|
44
|
+
--c-alert-500: #FEAC0E;
|
|
45
|
+
--c-alert-600: #D9920B;
|
|
46
|
+
--c-alert-700: #B37709;
|
|
47
|
+
|
|
48
|
+
// --- Info -------------------------------------------------------------------
|
|
49
|
+
--c-info-300: #E6F5FD;
|
|
50
|
+
--c-info-400: #6BC1F2;
|
|
51
|
+
--c-info-500: #0897E9;
|
|
52
|
+
|
|
53
|
+
// --- Success ----------------------------------------------------------------
|
|
54
|
+
--c-success-300: #E7FBDA;
|
|
55
|
+
--c-success-400: #A3E78C;
|
|
56
|
+
--c-success-500: #47B13D;
|
|
57
|
+
--c-success-600: #3A9132;
|
|
58
|
+
--c-success-700: #2D7227;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// =============================================================================
|
|
62
|
+
// Variante Prime Modern — light
|
|
63
|
+
// =============================================================================
|
|
64
|
+
body.tc-prime-modern {
|
|
65
|
+
--c-primary-300: #D3C8FF;
|
|
66
|
+
--c-primary-400: #896DFF;
|
|
67
|
+
--c-primary-500: #6B48FF;
|
|
68
|
+
--c-primary-600: #3A24B7;
|
|
69
|
+
--c-primary-700: #190D7A;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// =============================================================================
|
|
73
|
+
// Dark mode — remapeia as variáveis; componentes não precisam de alterações
|
|
74
|
+
// =============================================================================
|
|
75
|
+
body.tc-dark {
|
|
76
|
+
// --- Neutros (invertidos) ---------------------------------------------------
|
|
77
|
+
--c-neutral-50: #0F1117;
|
|
78
|
+
--c-neutral-100: #181B24;
|
|
79
|
+
--c-neutral-200: #22263A;
|
|
80
|
+
--c-neutral-300: #363B55;
|
|
81
|
+
--c-neutral-400: #5C6280;
|
|
82
|
+
--c-neutral-500: #8C91A8;
|
|
83
|
+
--c-neutral-600: #C0C6D8;
|
|
84
|
+
--c-neutral-700: #DDE1EE;
|
|
85
|
+
--c-neutral-800: #ECEEF5;
|
|
86
|
+
--c-neutral-900: #F5F6FA;
|
|
87
|
+
|
|
88
|
+
// --- Primária ---------------------------------------------------------------
|
|
89
|
+
--c-primary-300: #0E2A45;
|
|
90
|
+
--c-primary-400: #0B5C9C;
|
|
91
|
+
--c-primary-500: #29A8F5;
|
|
92
|
+
--c-primary-600: #74CCFA;
|
|
93
|
+
--c-primary-700: #BFE9FD;
|
|
94
|
+
|
|
95
|
+
// --- Danger -----------------------------------------------------------------
|
|
96
|
+
--c-danger-300: #3D0A0A;
|
|
97
|
+
--c-danger-400: #C0372E;
|
|
98
|
+
--c-danger-500: #F26F6F;
|
|
99
|
+
--c-danger-600: #F58888;
|
|
100
|
+
--c-danger-700: #F9A0A0;
|
|
101
|
+
|
|
102
|
+
// --- Alert ------------------------------------------------------------------
|
|
103
|
+
--c-alert-300: #3A2000;
|
|
104
|
+
--c-alert-400: #B87500;
|
|
105
|
+
--c-alert-500: #FFCC55;
|
|
106
|
+
--c-alert-600: #FFD56B;
|
|
107
|
+
--c-alert-700: #FFDE80;
|
|
108
|
+
|
|
109
|
+
// --- Info -------------------------------------------------------------------
|
|
110
|
+
--c-info-300: #0E2A45;
|
|
111
|
+
--c-info-400: #0B5C9C;
|
|
112
|
+
--c-info-500: #29A8F5;
|
|
113
|
+
|
|
114
|
+
// --- Success ----------------------------------------------------------------
|
|
115
|
+
--c-success-300: #0A2B05;
|
|
116
|
+
--c-success-400: #277A20;
|
|
117
|
+
--c-success-500: #6DD462;
|
|
118
|
+
--c-success-600: #7EDD75;
|
|
119
|
+
--c-success-700: #90E688;
|
|
120
|
+
|
|
121
|
+
// --- Prime Modern dark ------------------------------------------------------
|
|
122
|
+
&.tc-prime-modern {
|
|
123
|
+
--c-primary-300: #1A0F40;
|
|
124
|
+
--c-primary-400: #4B2FD4;
|
|
125
|
+
--c-primary-500: #9580FF;
|
|
126
|
+
--c-primary-600: #C0B4FF;
|
|
127
|
+
--c-primary-700: #E4DEFF;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// =============================================================================
|
|
132
|
+
// Mapa SCSS — referencia os tokens --c-* para geração de utilitários
|
|
133
|
+
// =============================================================================
|
|
134
|
+
$colors: (
|
|
135
|
+
"primary": (
|
|
136
|
+
"300": var(--c-primary-300),
|
|
137
|
+
"400": var(--c-primary-400),
|
|
138
|
+
"500": var(--c-primary-500),
|
|
139
|
+
"600": var(--c-primary-600),
|
|
140
|
+
"700": var(--c-primary-700),
|
|
141
|
+
),
|
|
142
|
+
"neutral": (
|
|
143
|
+
"50": var(--c-neutral-50),
|
|
144
|
+
"100": var(--c-neutral-100),
|
|
145
|
+
"200": var(--c-neutral-200),
|
|
146
|
+
"300": var(--c-neutral-300),
|
|
147
|
+
"400": var(--c-neutral-400),
|
|
148
|
+
"500": var(--c-neutral-500),
|
|
149
|
+
"600": var(--c-neutral-600),
|
|
150
|
+
"700": var(--c-neutral-700),
|
|
151
|
+
"800": var(--c-neutral-800),
|
|
152
|
+
"900": var(--c-neutral-900),
|
|
153
|
+
),
|
|
154
|
+
"danger": (
|
|
155
|
+
"300": var(--c-danger-300),
|
|
156
|
+
"400": var(--c-danger-400),
|
|
157
|
+
"500": var(--c-danger-500),
|
|
158
|
+
"600": var(--c-danger-600),
|
|
159
|
+
"700": var(--c-danger-700),
|
|
160
|
+
),
|
|
161
|
+
"alert": (
|
|
162
|
+
"300": var(--c-alert-300),
|
|
163
|
+
"400": var(--c-alert-400),
|
|
164
|
+
"500": var(--c-alert-500),
|
|
165
|
+
"600": var(--c-alert-600),
|
|
166
|
+
"700": var(--c-alert-700),
|
|
167
|
+
),
|
|
168
|
+
"info": (
|
|
169
|
+
"300": var(--c-info-300),
|
|
170
|
+
"400": var(--c-info-400),
|
|
171
|
+
"500": var(--c-info-500),
|
|
172
|
+
),
|
|
173
|
+
"success": (
|
|
174
|
+
"300": var(--c-success-300),
|
|
175
|
+
"400": var(--c-success-400),
|
|
176
|
+
"500": var(--c-success-500),
|
|
177
|
+
"600": var(--c-success-600),
|
|
178
|
+
"700": var(--c-success-700),
|
|
179
|
+
),
|
|
180
|
+
);
|
|
181
|
+
|
|
182
|
+
// =============================================================================
|
|
183
|
+
// Utilitários gerados — .text-{color}-{shade} .bg-{color}-{shade}
|
|
184
|
+
// .border-{color}-{shade}
|
|
185
|
+
// =============================================================================
|
|
186
|
+
@each $color, $shades in $colors {
|
|
187
|
+
@each $shade, $value in $shades {
|
|
188
|
+
.text-#{$color}-#{$shade} { color: $value; }
|
|
189
|
+
.bg-#{$color}-#{$shade} { background-color: $value; }
|
|
190
|
+
.border-#{$color}-#{$shade} { border-color: $value; }
|
|
191
|
+
}
|
|
192
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Claus — tc-form-control
|
|
3
|
+
// Uso: <input class="tc-form-control" type="text" />
|
|
4
|
+
// =============================================================================
|
|
5
|
+
|
|
6
|
+
.tc-form-control {
|
|
7
|
+
border: 1px solid var(--c-neutral-400);
|
|
8
|
+
border-radius: var(--bor-radius-pill);
|
|
9
|
+
color: var(--c-neutral-700);
|
|
10
|
+
display: inline-block;
|
|
11
|
+
font-family: var(--f-family);
|
|
12
|
+
font-size: var(--f-size-14);
|
|
13
|
+
line-height: var(--l-height-20);
|
|
14
|
+
outline: none;
|
|
15
|
+
height: var(--size-40);
|
|
16
|
+
transition: .2s ease;
|
|
17
|
+
padding: 0 var(--size-16);
|
|
18
|
+
max-width: 100%;
|
|
19
|
+
width: 100%;
|
|
20
|
+
background-color: var(--c-neutral-50);
|
|
21
|
+
box-sizing: border-box;
|
|
22
|
+
|
|
23
|
+
&::placeholder {
|
|
24
|
+
color: var(--c-neutral-400);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&:hover:not(:disabled):not(.tc-form-control--error) {
|
|
28
|
+
border-color: var(--c-neutral-500);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&:focus:not(:disabled):not(.tc-form-control--error) {
|
|
32
|
+
border-color: var(--c-primary-500);
|
|
33
|
+
box-shadow: 0 0 0 3px var(--c-primary-300);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// --- Estado desabilitado ----------------------------------------------------
|
|
37
|
+
&:disabled,
|
|
38
|
+
&[disabled] {
|
|
39
|
+
background-color: var(--c-neutral-100);
|
|
40
|
+
border-color: var(--c-neutral-300);
|
|
41
|
+
color: var(--c-neutral-400);
|
|
42
|
+
cursor: not-allowed;
|
|
43
|
+
opacity: 1;
|
|
44
|
+
|
|
45
|
+
&::placeholder {
|
|
46
|
+
color: var(--c-neutral-300);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// --- Estado de erro ---------------------------------------------------------
|
|
51
|
+
&--error {
|
|
52
|
+
border-color: var(--c-danger-500);
|
|
53
|
+
background-color: var(--c-danger-300);
|
|
54
|
+
|
|
55
|
+
&:focus {
|
|
56
|
+
border-color: var(--c-danger-500);
|
|
57
|
+
box-shadow: 0 0 0 3px var(--c-danger-300);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// --- Wrapper com label -------------------------------------------------------
|
|
63
|
+
// Uso: <div class="tc-form-field"> <label> ... <input> </div>
|
|
64
|
+
|
|
65
|
+
.tc-form-field {
|
|
66
|
+
display: flex;
|
|
67
|
+
flex-direction: column;
|
|
68
|
+
gap: 6px;
|
|
69
|
+
|
|
70
|
+
label {
|
|
71
|
+
font-size: var(--f-size-14);
|
|
72
|
+
font-weight: 600;
|
|
73
|
+
color: var(--c-neutral-700);
|
|
74
|
+
line-height: 1;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.tc-form-hint {
|
|
78
|
+
font-size: 0.75rem;
|
|
79
|
+
color: var(--c-neutral-500);
|
|
80
|
+
margin: 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.tc-form-error {
|
|
84
|
+
font-size: 0.75rem;
|
|
85
|
+
color: var(--c-danger-500);
|
|
86
|
+
margin: 0;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "./claus-variables.scss";
|
|
3
|
+
|
|
4
|
+
//Width e height
|
|
5
|
+
$sizing: (
|
|
6
|
+
08: var(--gs-8),
|
|
7
|
+
10: var(--gs-10),
|
|
8
|
+
12: var(--gs-12),
|
|
9
|
+
14: var(--gs-14),
|
|
10
|
+
16: var(--gs-16),
|
|
11
|
+
18: var(--gs-18),
|
|
12
|
+
20: var(--gs-20),
|
|
13
|
+
24: var(--gs-24),
|
|
14
|
+
32: var(--gs-32),
|
|
15
|
+
40: var(--gs-40),
|
|
16
|
+
48: var(--gs-48),
|
|
17
|
+
56: var(--gs-56),
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
@each $size, $value in $sizing {
|
|
21
|
+
.h-#{$size} {
|
|
22
|
+
height: $value;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.w-#{$size} {
|
|
26
|
+
width: $value;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use 'sass:meta';
|
|
3
|
+
@use "./claus-variables.scss";
|
|
4
|
+
|
|
5
|
+
//Padding e margin
|
|
6
|
+
|
|
7
|
+
$spacers: (
|
|
8
|
+
"auto": auto,
|
|
9
|
+
"none": var(--gs-none),
|
|
10
|
+
08: var(--gs-8),
|
|
11
|
+
10: var(--gs-10),
|
|
12
|
+
12: var(--gs-12),
|
|
13
|
+
14: var(--gs-14),
|
|
14
|
+
16: var(--gs-16),
|
|
15
|
+
18: var(--gs-18),
|
|
16
|
+
20: var(--gs-20),
|
|
17
|
+
24: var(--gs-24),
|
|
18
|
+
32: var(--gs-32),
|
|
19
|
+
40: var(--gs-40),
|
|
20
|
+
48: var(--gs-48),
|
|
21
|
+
56: var(--gs-56),
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
@each $size, $space-value in $spacers {
|
|
25
|
+
@each $abbr, $side-value in claus-variables.$sides {
|
|
26
|
+
.p#{$abbr}-#{$size} {
|
|
27
|
+
@if meta.type-of($side-value) == "list" {
|
|
28
|
+
@each $s in $side-value {
|
|
29
|
+
padding-#{$s}: $space-value;
|
|
30
|
+
}
|
|
31
|
+
} @else if $side-value != "" {
|
|
32
|
+
padding-#{$side-value}: $space-value;
|
|
33
|
+
} @else {
|
|
34
|
+
padding: $space-value;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
.m#{$abbr}-#{$size} {
|
|
38
|
+
@if meta.type-of($side-value) == "list" {
|
|
39
|
+
@each $s in $side-value {
|
|
40
|
+
margin-#{$s}: $space-value;
|
|
41
|
+
}
|
|
42
|
+
} @else if $side-value != "" {
|
|
43
|
+
margin-#{$side-value}: $space-value;
|
|
44
|
+
} @else {
|
|
45
|
+
margin: $space-value;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
//background
|
|
5
|
+
--surface-01: var(--neutral-100);
|
|
6
|
+
--surface-02: var(--neutral-100);
|
|
7
|
+
--surface-03: var(--neutral-100);
|
|
8
|
+
--surface-04: var(--neutral-100);
|
|
9
|
+
|
|
10
|
+
//general-component
|
|
11
|
+
//general-component-background
|
|
12
|
+
--general-component-bg: var(--neutral-100);
|
|
13
|
+
--general-component-bg-hover: var(--neutral-100);
|
|
14
|
+
--general-component-bg-select-fill: var(--neutral-100);
|
|
15
|
+
--general-component-bg-select-outline: var(--neutral-100);
|
|
16
|
+
--general-component-bg-danger: var(--neutral-100);
|
|
17
|
+
--general-component-disabled: var(--neutral-100);
|
|
18
|
+
//general-component-border
|
|
19
|
+
--general-component-border: var(--neutral-100);
|
|
20
|
+
--general-component-border-hover: var(--neutral-100);
|
|
21
|
+
--general-component-border-select: var(--neutral-100);
|
|
22
|
+
--general-component-border-danger: var(--neutral-100);
|
|
23
|
+
--general-component-border-disabled: var(--neutral-100);
|
|
24
|
+
//general-component-icon
|
|
25
|
+
--general-component-icon: var(--neutral-100);
|
|
26
|
+
--general-component-icon-hover: var(--neutral-100);
|
|
27
|
+
--general-component-icon-select: var(--neutral-100);
|
|
28
|
+
--general-component-icon-danger: var(--neutral-100);
|
|
29
|
+
--general-component-icon-disabled: var(--neutral-100);
|
|
30
|
+
//general-component-text
|
|
31
|
+
--general-component-text: var(--neutral-100);
|
|
32
|
+
--general-component-text-hover: var(--neutral-100);
|
|
33
|
+
--general-component-text-select: var(--neutral-100);
|
|
34
|
+
--general-component-text-danger: var(--neutral-100);
|
|
35
|
+
--general-component-text-disabled: var(--neutral-100);
|
|
36
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Claus — tc-title
|
|
3
|
+
// Uso: <h1 class="tc-title">Título</h1> (h1–h6)
|
|
4
|
+
// =============================================================================
|
|
5
|
+
|
|
6
|
+
h1.tc-title,
|
|
7
|
+
h2.tc-title,
|
|
8
|
+
h3.tc-title,
|
|
9
|
+
h4.tc-title,
|
|
10
|
+
h5.tc-title,
|
|
11
|
+
h6.tc-title {
|
|
12
|
+
font-family: inherit;
|
|
13
|
+
color: var(--c-neutral-700);
|
|
14
|
+
line-height: 1.2;
|
|
15
|
+
margin: 0;
|
|
16
|
+
transition: color 0.2s;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
h1.tc-title { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; }
|
|
20
|
+
h2.tc-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
|
|
21
|
+
h3.tc-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
|
|
22
|
+
h4.tc-title { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; }
|
|
23
|
+
h5.tc-title { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
|
|
24
|
+
h6.tc-title { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; }
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "./claus-variables.scss";
|
|
3
|
+
|
|
4
|
+
//Font-family
|
|
5
|
+
|
|
6
|
+
$fontFamily: (
|
|
7
|
+
"primary": var(--f-family-primary),
|
|
8
|
+
"secondary": var(--f-family-secondary),
|
|
9
|
+
);
|
|
10
|
+
|
|
11
|
+
@each $name, $value in $fontFamily {
|
|
12
|
+
.font-#{$name} {
|
|
13
|
+
font-family: $value;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
//Font-size
|
|
18
|
+
|
|
19
|
+
$fontSize: (
|
|
20
|
+
08: var(--gs-8),
|
|
21
|
+
10: var(--gs-10),
|
|
22
|
+
12: var(--gs-12),
|
|
23
|
+
14: var(--gs-14),
|
|
24
|
+
16: var(--gs-16),
|
|
25
|
+
18: var(--gs-18),
|
|
26
|
+
20: var(--gs-20),
|
|
27
|
+
24: var(--gs-24),
|
|
28
|
+
32: var(--gs-32),
|
|
29
|
+
40: var(--gs-40),
|
|
30
|
+
48: var(--gs-48),
|
|
31
|
+
56: var(--gs-56),
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
@each $key, $value in $fontSize {
|
|
35
|
+
.f-#{$key} {
|
|
36
|
+
font-size: $value;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
//Font-weight
|
|
41
|
+
|
|
42
|
+
$fontWeight: (
|
|
43
|
+
"light": var(--weight-light),
|
|
44
|
+
"regular": var(--weight-regular),
|
|
45
|
+
"semibold": var(--weight-semibold),
|
|
46
|
+
"bold": var(--weight-bold),
|
|
47
|
+
"black": var(--weight-black),
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
@each $name, $value in $fontWeight {
|
|
51
|
+
.font-#{$name} {
|
|
52
|
+
font-weight: $value;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
//Font-weight
|
|
57
|
+
|
|
58
|
+
$Textalign: (
|
|
59
|
+
"left": var(--weight-light),
|
|
60
|
+
"center": var(--weight-regular),
|
|
61
|
+
"right": var(--weight-semibold),
|
|
62
|
+
);
|
|
63
|
+
|
|
64
|
+
@each $name, $value in $Textalign {
|
|
65
|
+
.text-#{$name} {
|
|
66
|
+
text-align: $value;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
//Semantica
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
//Colors
|
|
3
|
+
//primary
|
|
4
|
+
--primary-500: #00dbff;
|
|
5
|
+
--primary-400: #75d8ff;
|
|
6
|
+
--primary-300: #eaf9ff;
|
|
7
|
+
//secondary
|
|
8
|
+
--secondary-500: #00dbff;
|
|
9
|
+
--secondary-400: #83eeff;
|
|
10
|
+
--secondary-300: #e0fbff;
|
|
11
|
+
//extra
|
|
12
|
+
--extra-800: #ff009e;
|
|
13
|
+
--extra-700: #ff8900;
|
|
14
|
+
--extra-600: #00ffd4;
|
|
15
|
+
--extra-500: #d9ff65;
|
|
16
|
+
--extra-400: #ffde99;
|
|
17
|
+
--extra-300: #ffccd7;
|
|
18
|
+
--extra-200: #ccffe3;
|
|
19
|
+
--extra-100: #f4ffc1;
|
|
20
|
+
//neutral
|
|
21
|
+
--neutral-700: #020b12;
|
|
22
|
+
--neutral-700: #050f17;
|
|
23
|
+
--neutral-600: #131313;
|
|
24
|
+
--neutral-500: #0d1f2e;
|
|
25
|
+
--neutral-400: #23435d;
|
|
26
|
+
--neutral-300: #f2f6f9;
|
|
27
|
+
--neutral-200: #effdff;
|
|
28
|
+
--neutral-100: #ffffff;
|
|
29
|
+
//warning
|
|
30
|
+
//danger
|
|
31
|
+
--danger-500: #dc3545;
|
|
32
|
+
--danger-400: #f48e85;
|
|
33
|
+
--danger-300: #fde1d6;
|
|
34
|
+
//alert
|
|
35
|
+
--alert-500: #ffc42f;
|
|
36
|
+
--alert-400: #ffe282;
|
|
37
|
+
--alert-300: #fff8d5;
|
|
38
|
+
//success
|
|
39
|
+
--success-500: #47b13d;
|
|
40
|
+
--success-400: #a3e78c;
|
|
41
|
+
--success-300: #e7fbda;
|
|
42
|
+
//info
|
|
43
|
+
--info-500: #0897e9;
|
|
44
|
+
--info-400: #75d8ff;
|
|
45
|
+
--info-300: #eaf9ff;
|
|
46
|
+
|
|
47
|
+
//General sizes
|
|
48
|
+
--gs-none: 0rem;
|
|
49
|
+
--gs-1: 0.0625rem;
|
|
50
|
+
--gs-2: 0.25rem;
|
|
51
|
+
--gs-3: 0.1875rem;
|
|
52
|
+
--gs-4: 0.25rem;
|
|
53
|
+
--gs-8: 0.5rem;
|
|
54
|
+
--gs-10: 0.625rem;
|
|
55
|
+
--gs-12: 0.75;
|
|
56
|
+
--gs-14: 0.875rem;
|
|
57
|
+
--gs-16: 1rem;
|
|
58
|
+
--gs-20: 1.25rem;
|
|
59
|
+
--gs-22: 1.375rem;
|
|
60
|
+
--gs-24: 1.5rem;
|
|
61
|
+
--gs-32: 2rem;
|
|
62
|
+
--gs-40: 2.5rem;
|
|
63
|
+
--gs-48: 3rem;
|
|
64
|
+
--gs-56: 3.5rem;
|
|
65
|
+
--gs-64: 4rem;
|
|
66
|
+
--gs-72: 4.5rem;
|
|
67
|
+
--gs-80: 5rem;
|
|
68
|
+
--gs-full: 100%;
|
|
69
|
+
|
|
70
|
+
//Border radius
|
|
71
|
+
--bor-radius-pill: 40px;
|
|
72
|
+
--bor-radius-sm: 4px;
|
|
73
|
+
--bor-radius-md: 8px;
|
|
74
|
+
--bor-radius-lg: 16px;
|
|
75
|
+
|
|
76
|
+
//Sizes (aliases semânticos)
|
|
77
|
+
--size-16: 1rem;
|
|
78
|
+
--size-40: 2.5rem;
|
|
79
|
+
|
|
80
|
+
//Typograph
|
|
81
|
+
//Family
|
|
82
|
+
--f-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
83
|
+
--f-family-primary: "TOTVS", "Open sans", sans-serif;
|
|
84
|
+
--f-family-secondary: "Open sans", sans-serif;
|
|
85
|
+
//Font size (aliases semânticos)
|
|
86
|
+
--f-size-14: 0.875rem;
|
|
87
|
+
--f-size-16: 1rem;
|
|
88
|
+
//Line height (aliases semânticos)
|
|
89
|
+
--l-height-20: 1.43;
|
|
90
|
+
//Line height
|
|
91
|
+
--line-height-16: 1.33;
|
|
92
|
+
--line-height-20: 1.43;
|
|
93
|
+
--line-height-24: 1.5;
|
|
94
|
+
--line-height-26: 1.44;
|
|
95
|
+
--line-height-28: 1.4;
|
|
96
|
+
--line-height-32: 1.33;
|
|
97
|
+
--line-height-40: 1.25;
|
|
98
|
+
--line-height-56: 1.16;
|
|
99
|
+
--line-height-64: 1.14;
|
|
100
|
+
//Weight
|
|
101
|
+
--weight-light: 200;
|
|
102
|
+
--weight-regular: 300;
|
|
103
|
+
--weight-semibold: 400;
|
|
104
|
+
--weight-bold: 500;
|
|
105
|
+
--weight-black: 600;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
$sides: (
|
|
109
|
+
"": "",
|
|
110
|
+
"t": "top",
|
|
111
|
+
"r": "right",
|
|
112
|
+
"b": "bottom",
|
|
113
|
+
"l": "left",
|
|
114
|
+
"x": (
|
|
115
|
+
"left",
|
|
116
|
+
"right",
|
|
117
|
+
),
|
|
118
|
+
"y": (
|
|
119
|
+
"top",
|
|
120
|
+
"bottom",
|
|
121
|
+
),
|
|
122
|
+
);
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
.card {
|
|
126
|
+
background-color: var(--neutral-100);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.dark-mode .card {
|
|
130
|
+
background-color: var(--neutral-100);
|
|
131
|
+
}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Color Palette
|
|
3
|
+
// =============================================================================
|
|
4
|
+
// Escala numérica: quanto maior, mais escuro no modo light.
|
|
5
|
+
// No modo dark, as mesmas variáveis são remapeadas para o inverso,
|
|
6
|
+
// permitindo que o código de componentes não precise de alterações.
|
|
7
|
+
//
|
|
8
|
+
// Temas (classes no <body>):
|
|
9
|
+
// Variante: nenhuma classe = tc-standard | body.tc-prime-modern
|
|
10
|
+
// Dark: body.tc-dark
|
|
11
|
+
// Combinado: body.tc-prime-modern.tc-dark
|
|
12
|
+
// =============================================================================
|
|
13
|
+
|
|
14
|
+
:root {
|
|
15
|
+
// --- Neutros (escala clara → escura) --------------------------------------
|
|
16
|
+
--c-neutral-50: #FFFFFF;
|
|
17
|
+
--c-neutral-100: #F2F6F9;
|
|
18
|
+
--c-neutral-200: #EEEEEE;
|
|
19
|
+
--c-neutral-300: #CED4DA;
|
|
20
|
+
--c-neutral-400: #BAC0C6;
|
|
21
|
+
--c-neutral-500: #5E5E5E;
|
|
22
|
+
--c-neutral-600: #363636;
|
|
23
|
+
--c-neutral-700: #1A1A1A;
|
|
24
|
+
--c-neutral-800: #0D0D0D;
|
|
25
|
+
--c-neutral-900: #000000;
|
|
26
|
+
|
|
27
|
+
// --- Primária -------------------------------------------------------------
|
|
28
|
+
--c-primary-300: #EAF9FF;
|
|
29
|
+
--c-primary-400: #75D8FF;
|
|
30
|
+
--c-primary-500: #0897E9;
|
|
31
|
+
--c-primary-600: #0457A7;
|
|
32
|
+
--c-primary-700: #012C6F;
|
|
33
|
+
|
|
34
|
+
// --- Danger ---------------------------------------------------------------
|
|
35
|
+
--c-danger-300: #FDE1D6;
|
|
36
|
+
--c-danger-400: #F48E85;
|
|
37
|
+
--c-danger-500: #DC3545;
|
|
38
|
+
|
|
39
|
+
// --- Alert ----------------------------------------------------------------
|
|
40
|
+
--c-alert-300: #FFE6B7;
|
|
41
|
+
--c-alert-400: #FECD6E;
|
|
42
|
+
--c-alert-500: #FEAC0E;
|
|
43
|
+
|
|
44
|
+
// --- Info -----------------------------------------------------------------
|
|
45
|
+
--c-info-300: #E6F5FD;
|
|
46
|
+
--c-info-400: #6BC1F2;
|
|
47
|
+
--c-info-500: #0897E9;
|
|
48
|
+
|
|
49
|
+
// --- Success --------------------------------------------------------------
|
|
50
|
+
--c-success-300: #E7FBDA;
|
|
51
|
+
--c-success-400: #A3E78C;
|
|
52
|
+
--c-success-500: #47B13D;
|
|
53
|
+
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// =============================================================================
|
|
57
|
+
// Variante Prime Modern — light
|
|
58
|
+
// =============================================================================
|
|
59
|
+
body.tc-prime-modern {
|
|
60
|
+
--c-primary-300: #D3C8FF;
|
|
61
|
+
--c-primary-400: #896DFF;
|
|
62
|
+
--c-primary-500: #6B48FF;
|
|
63
|
+
--c-primary-600: #3A24B7;
|
|
64
|
+
--c-primary-700: #190D7A;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// =============================================================================
|
|
68
|
+
// Dark mode
|
|
69
|
+
// Remapeia as mesmas variáveis para valores invertidos/adaptados.
|
|
70
|
+
// Os componentes continuam usando os mesmos tokens sem alteração.
|
|
71
|
+
//
|
|
72
|
+
// Para ativar: document.body.classList.add('tc-dark')
|
|
73
|
+
// Para desativar: document.body.classList.remove('tc-dark')
|
|
74
|
+
// =============================================================================
|
|
75
|
+
body.tc-dark {
|
|
76
|
+
// --- Neutros (escala invertida) -------------------------------------------
|
|
77
|
+
--c-neutral-50: #0F1117; // fundo principal da página
|
|
78
|
+
--c-neutral-100: #181B24; // fundo de seções alternadas
|
|
79
|
+
--c-neutral-200: #22263A; // bordas suaves / separadores
|
|
80
|
+
--c-neutral-300: #363B55; // bordas visíveis / inputs
|
|
81
|
+
--c-neutral-400: #5C6280; // texto desabilitado / placeholder
|
|
82
|
+
--c-neutral-500: #8C91A8; // texto secundário
|
|
83
|
+
--c-neutral-600: #C0C6D8; // texto de apoio
|
|
84
|
+
--c-neutral-700: #DDE1EE; // texto principal
|
|
85
|
+
--c-neutral-800: #ECEEF5; // texto de destaque
|
|
86
|
+
--c-neutral-900: #F5F6FA; // texto com máximo contraste
|
|
87
|
+
|
|
88
|
+
// --- Primária (tons mais luminosos para fundos escuros) -------------------
|
|
89
|
+
--c-primary-300: #0E2A45;
|
|
90
|
+
--c-primary-400: #0B5C9C;
|
|
91
|
+
--c-primary-500: #29A8F5;
|
|
92
|
+
--c-primary-600: #74CCFA;
|
|
93
|
+
--c-primary-700: #BFE9FD;
|
|
94
|
+
|
|
95
|
+
// --- Danger ---------------------------------------------------------------
|
|
96
|
+
--c-danger-300: #3D0A0A;
|
|
97
|
+
--c-danger-400: #C0372E;
|
|
98
|
+
--c-danger-500: #F26F6F;
|
|
99
|
+
|
|
100
|
+
// --- Alert ----------------------------------------------------------------
|
|
101
|
+
--c-alert-300: #3A2000;
|
|
102
|
+
--c-alert-400: #B87500;
|
|
103
|
+
--c-alert-500: #FFCC55;
|
|
104
|
+
|
|
105
|
+
// --- Info -----------------------------------------------------------------
|
|
106
|
+
--c-info-300: #0E2A45;
|
|
107
|
+
--c-info-400: #0B5C9C;
|
|
108
|
+
--c-info-500: #29A8F5;
|
|
109
|
+
|
|
110
|
+
// --- Success --------------------------------------------------------------
|
|
111
|
+
--c-success-300: #0A2B05;
|
|
112
|
+
--c-success-400: #277A20;
|
|
113
|
+
--c-success-500: #6DD462;
|
|
114
|
+
|
|
115
|
+
// --- Variante Prime Modern — dark -----------------------------------------
|
|
116
|
+
&.tc-prime-modern {
|
|
117
|
+
--c-primary-300: #1A0F40;
|
|
118
|
+
--c-primary-400: #4B2FD4;
|
|
119
|
+
--c-primary-500: #9580FF;
|
|
120
|
+
--c-primary-600: #C0B4FF;
|
|
121
|
+
--c-primary-700: #E4DEFF;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// tc-btn — Botões
|
|
3
|
+
// Uso: <button class="tc-btn tc-btn-primary">Label</button>
|
|
4
|
+
// =============================================================================
|
|
5
|
+
|
|
6
|
+
// --- Mixins internos ---------------------------------------------------------
|
|
7
|
+
|
|
8
|
+
@mixin btn-filled($bg, $bg-hover, $bg-active, $color) {
|
|
9
|
+
background-color: $bg;
|
|
10
|
+
color: $color;
|
|
11
|
+
border-color: $bg;
|
|
12
|
+
|
|
13
|
+
&:hover:not(:disabled) {
|
|
14
|
+
background-color: $bg-hover;
|
|
15
|
+
border-color: $bg-hover;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&:active:not(:disabled) {
|
|
19
|
+
background-color: $bg-active;
|
|
20
|
+
border-color: $bg-active;
|
|
21
|
+
transform: scale(0.98);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@mixin btn-outline($color, $color-hover-bg, $color-active-bg) {
|
|
26
|
+
background-color: transparent;
|
|
27
|
+
color: $color;
|
|
28
|
+
border-color: $color;
|
|
29
|
+
|
|
30
|
+
&:hover:not(:disabled) {
|
|
31
|
+
background-color: $color-hover-bg;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:active:not(:disabled) {
|
|
35
|
+
background-color: $color-active-bg;
|
|
36
|
+
transform: scale(0.98);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// --- Base --------------------------------------------------------------------
|
|
41
|
+
|
|
42
|
+
.tc-btn {
|
|
43
|
+
display: inline-flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
justify-content: center;
|
|
46
|
+
gap: 8px;
|
|
47
|
+
padding: 8px 18px;
|
|
48
|
+
border-radius: 40px;
|
|
49
|
+
border: 2px solid transparent;
|
|
50
|
+
font-family: inherit;
|
|
51
|
+
font-size: 0.9rem;
|
|
52
|
+
font-weight: 600;
|
|
53
|
+
line-height: 1;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
white-space: nowrap;
|
|
57
|
+
transition:
|
|
58
|
+
background-color 0.15s ease,
|
|
59
|
+
color 0.15s ease,
|
|
60
|
+
border-color 0.15s ease,
|
|
61
|
+
transform 0.1s ease,
|
|
62
|
+
opacity 0.15s ease;
|
|
63
|
+
|
|
64
|
+
&:disabled {
|
|
65
|
+
opacity: 0.45;
|
|
66
|
+
cursor: not-allowed;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&:focus-visible {
|
|
70
|
+
outline: 3px solid var(--c-primary-400);
|
|
71
|
+
outline-offset: 2px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// --- Sizes ----------------------------------------------------------------
|
|
75
|
+
|
|
76
|
+
&.tc-btn-sm {
|
|
77
|
+
padding: 5px 12px;
|
|
78
|
+
font-size: 0.8rem;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&.tc-btn-lg {
|
|
82
|
+
padding: 12px 24px;
|
|
83
|
+
font-size: 1rem;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// --- Filled variants ------------------------------------------------------
|
|
87
|
+
|
|
88
|
+
&.tc-btn-primary {
|
|
89
|
+
@include btn-filled(
|
|
90
|
+
var(--c-primary-500),
|
|
91
|
+
var(--c-primary-600),
|
|
92
|
+
var(--c-primary-700),
|
|
93
|
+
#ffffff
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&.tc-btn-danger {
|
|
98
|
+
@include btn-filled(
|
|
99
|
+
var(--c-danger-500),
|
|
100
|
+
#b02a37,
|
|
101
|
+
#8b1a23,
|
|
102
|
+
#ffffff
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&.tc-btn-alert {
|
|
107
|
+
@include btn-filled(
|
|
108
|
+
var(--c-alert-500),
|
|
109
|
+
#d9920b,
|
|
110
|
+
#b37709,
|
|
111
|
+
#1a1a1a
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&.tc-btn-success {
|
|
116
|
+
@include btn-filled(
|
|
117
|
+
var(--c-success-500),
|
|
118
|
+
#3a9132,
|
|
119
|
+
#2d7227,
|
|
120
|
+
#ffffff
|
|
121
|
+
);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&.tc-btn-neutral {
|
|
125
|
+
@include btn-filled(
|
|
126
|
+
var(--c-neutral-200),
|
|
127
|
+
var(--c-neutral-300),
|
|
128
|
+
var(--c-neutral-400),
|
|
129
|
+
var(--c-neutral-700)
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// --- Outline variants -----------------------------------------------------
|
|
134
|
+
|
|
135
|
+
&.tc-btn-outline-primary {
|
|
136
|
+
@include btn-outline(
|
|
137
|
+
var(--c-primary-500),
|
|
138
|
+
var(--c-primary-300),
|
|
139
|
+
var(--c-primary-400)
|
|
140
|
+
);
|
|
141
|
+
color: var(--c-primary-500);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&.tc-btn-outline-danger {
|
|
145
|
+
@include btn-outline(
|
|
146
|
+
var(--c-danger-500),
|
|
147
|
+
var(--c-danger-300),
|
|
148
|
+
var(--c-danger-400)
|
|
149
|
+
);
|
|
150
|
+
color: var(--c-danger-500);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
&.tc-btn-outline-neutral {
|
|
154
|
+
@include btn-outline(
|
|
155
|
+
var(--c-neutral-400),
|
|
156
|
+
var(--c-neutral-100),
|
|
157
|
+
var(--c-neutral-200)
|
|
158
|
+
);
|
|
159
|
+
color: var(--c-neutral-600);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
// --- Link estilizado como botão -----------------------------------------------
|
|
164
|
+
|
|
165
|
+
a.tc-btn {
|
|
166
|
+
display: inline-flex;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
// --- tc-link -----------------------------------------------------------------
|
|
170
|
+
|
|
171
|
+
.tc-link {
|
|
172
|
+
color: var(--c-primary-500);
|
|
173
|
+
text-decoration: none;
|
|
174
|
+
font-weight: 500;
|
|
175
|
+
border-bottom: 1px solid transparent;
|
|
176
|
+
transition: color 0.15s, border-color 0.15s;
|
|
177
|
+
|
|
178
|
+
&:hover {
|
|
179
|
+
color: var(--c-primary-600);
|
|
180
|
+
border-bottom-color: var(--c-primary-400);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
&:active {
|
|
184
|
+
color: var(--c-primary-700);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
&:focus-visible {
|
|
188
|
+
outline: 3px solid var(--c-primary-400);
|
|
189
|
+
outline-offset: 2px;
|
|
190
|
+
border-radius: 2px;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
&.tc-link-danger {
|
|
194
|
+
color: var(--c-danger-500);
|
|
195
|
+
|
|
196
|
+
&:hover {
|
|
197
|
+
color: #b02a37;
|
|
198
|
+
border-bottom-color: var(--c-danger-400);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
&.tc-link-muted {
|
|
203
|
+
color: var(--c-neutral-500);
|
|
204
|
+
|
|
205
|
+
&:hover {
|
|
206
|
+
color: var(--c-neutral-700);
|
|
207
|
+
border-bottom-color: var(--c-neutral-400);
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
h1.tc-title,
|
|
2
|
+
h2.tc-title,
|
|
3
|
+
h3.tc-title,
|
|
4
|
+
h4.tc-title,
|
|
5
|
+
h5.tc-title,
|
|
6
|
+
h6.tc-title {
|
|
7
|
+
font-family: inherit;
|
|
8
|
+
color: var(--c-neutral-700);
|
|
9
|
+
line-height: 1.2;
|
|
10
|
+
margin: 0;
|
|
11
|
+
transition: color 0.2s;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
h1.tc-title {
|
|
15
|
+
font-size: 2.5rem;
|
|
16
|
+
font-weight: 700;
|
|
17
|
+
letter-spacing: -0.03em;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
h2.tc-title {
|
|
21
|
+
font-size: 2rem;
|
|
22
|
+
font-weight: 700;
|
|
23
|
+
letter-spacing: -0.02em;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
h3.tc-title {
|
|
27
|
+
font-size: 1.5rem;
|
|
28
|
+
font-weight: 600;
|
|
29
|
+
letter-spacing: -0.01em;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
h4.tc-title {
|
|
33
|
+
font-size: 1.25rem;
|
|
34
|
+
font-weight: 600;
|
|
35
|
+
letter-spacing: 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
h5.tc-title {
|
|
39
|
+
font-size: 1rem;
|
|
40
|
+
font-weight: 600;
|
|
41
|
+
letter-spacing: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
h6.tc-title {
|
|
45
|
+
font-size: 0.875rem;
|
|
46
|
+
font-weight: 600;
|
|
47
|
+
letter-spacing: 0.01em;
|
|
48
|
+
text-transform: uppercase;
|
|
49
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Global styles
|
|
3
|
+
// Ordem: cores → variáveis → componentes → utilitários
|
|
4
|
+
// =============================================================================
|
|
5
|
+
|
|
6
|
+
// --- Cores e tokens (fonte única de verdade) ---------------------------------
|
|
7
|
+
@use 'styles/claus-colors';
|
|
8
|
+
|
|
9
|
+
// --- Variáveis, espaçamentos, tipografia e tamanhos -------------------------
|
|
10
|
+
@use 'styles/claus-variables';
|
|
11
|
+
@use 'styles/claus-spacers';
|
|
12
|
+
@use 'styles/claus-sizes';
|
|
13
|
+
@use 'styles/claus-typography';
|
|
14
|
+
|
|
15
|
+
// --- Componentes ------------------------------------------------------------
|
|
16
|
+
@use 'styles/claus-btn';
|
|
17
|
+
@use 'styles/claus-card';
|
|
18
|
+
@use 'styles/claus-title';
|
|
19
|
+
@use 'styles/claus-form';
|
|
20
|
+
@use 'styles/claus-badge';
|
|
21
|
+
|
|
22
|
+
// --- Reset e base -----------------------------------------------------------
|
|
23
|
+
*,
|
|
24
|
+
*::before,
|
|
25
|
+
*::after {
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
body {
|
|
30
|
+
margin: 0;
|
|
31
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
32
|
+
background: var(--c-neutral-50);
|
|
33
|
+
color: var(--c-neutral-700);
|
|
34
|
+
transition: background 0.2s, color 0.2s;
|
|
35
|
+
}
|