@dev-tcloud/tcloud-ui 6.28.0 → 6.28.2

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.
Files changed (4) hide show
  1. package/js/tcloud-ui-app.js +2 -2
  2. package/package.json +1 -1
  3. package/scss/tcloud/custom/forms.scss +32 -10
  4. package/scss/tcloud-revitalizacao/components/_tc-rev-input-control.scss +41 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dev-tcloud/tcloud-ui",
3
- "version": "6.28.0",
3
+ "version": "6.28.2",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^19.2.20",
6
6
  "@angular/core": "^19.2.20",
package/scss/tcloud/custom/forms.scss CHANGED
@@ -5,6 +5,8 @@
5
5
  // Forms
6
6
  // ---------------------------------
7
7
 
8
+ // Cores migradas para tokens --c-* (dark-aware via themes/_dark.scss).
9
+ // Demais propriedades preservam o formato standard original.
8
10
  .tc-form-control{
9
11
  display: block;
10
12
  width: 100%;
@@ -12,10 +14,10 @@
12
14
  font-size: 12px;
13
15
  font-weight: 400;
14
16
  line-height: 1.5;
15
- color: #212529;
16
- background-color: #fff;
17
+ color: var(--c-neutral-700);
18
+ background-color: var(--c-neutral-50);
17
19
  background-clip: padding-box;
18
- border: 1px solid var(--tc-gray-300);;
20
+ border: 1px solid var(--c-neutral-300);
19
21
  -webkit-appearance: none;
20
22
  -moz-appearance: none;
21
23
  appearance: none;
@@ -24,19 +26,33 @@
24
26
  height: 40px;
25
27
  cursor: pointer;
26
28
 
29
+ &::placeholder {
30
+ color: var(--c-neutral-400);
31
+ }
32
+
27
33
  &:focus {
28
- border-color: var(--tc-primary);
34
+ border-color: var(--c-primary-500);
29
35
  box-shadow: none;
30
36
  }
31
37
 
32
38
  &:focus-visible {
33
- outline: 1px solid var(--tc-primary);
39
+ outline: 1px solid var(--c-primary-500);
40
+ }
41
+
42
+ // Autofill: o navegador força fundo claro; o box-shadow inset com token repinta
43
+ // o fundo respeitando o dark mode.
44
+ &:-webkit-autofill,
45
+ &:-webkit-autofill:hover,
46
+ &:-webkit-autofill:focus {
47
+ -webkit-text-fill-color: var(--c-neutral-700);
48
+ -webkit-box-shadow: 0 0 0 1000px var(--c-neutral-50) inset;
49
+ caret-color: var(--c-neutral-700);
34
50
  }
35
51
 
36
52
  &:disabled {
37
53
  cursor: not-allowed;
38
54
  opacity: 0.6;
39
- background-color: var(--tc-gray-200);
55
+ background-color: var(--c-neutral-200);
40
56
  }
41
57
  }
42
58
 
@@ -46,21 +62,27 @@ textarea.tc-form-control{
46
62
 
47
63
 
48
64
  select.tc-form-control{
49
- background-color: #fff;
65
+ background-color: var(--c-neutral-50);
50
66
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
51
67
  background-repeat: no-repeat;
52
68
  background-position: right .75rem center;
53
69
  background-size: 16px 12px;
54
70
 
55
- border: 1px solid var(--tc-gray-300);
71
+ border: 1px solid var(--c-neutral-300);
56
72
  border-radius: 3px;
57
- color: var(--cinza);
73
+ color: var(--c-neutral-500);
58
74
  font-family: "Open Sans";
59
75
  height: 40px !important;
60
76
  padding: 0 10px;
61
77
 
62
78
  }
63
79
 
80
+ // A seta do <select> é um SVG inline (stroke fixo escuro) e não aceita token.
81
+ // No dark, troca por uma seta clara para manter o contraste.
82
+ .tc-dark select.tc-form-control{
83
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C0C6D8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
84
+ }
85
+
64
86
 
65
87
  .tc-form-group{
66
88
  margin-top: 10px;
@@ -76,5 +98,5 @@ select.tc-form-control{
76
98
  }
77
99
 
78
100
  .tc-group-input-table td:last-child button {
79
- color: var(--cinza);
101
+ color: var(--c-neutral-500);
80
102
  }
package/scss/tcloud-revitalizacao/components/_tc-rev-input-control.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  .tc-rev-input-control {
2
+ background-color: var(--c-neutral-50);
2
3
  border: 1px solid var(--c-neutral-400);
3
4
  border-radius: var(--bor-radius-pill);
4
5
  color: var(--c-neutral-700);
@@ -12,6 +13,20 @@
12
13
  padding: 0 var(--size-16);
13
14
  max-width: 100%;
14
15
 
16
+ &::placeholder {
17
+ color: var(--c-neutral-400);
18
+ }
19
+
20
+ // Autofill: o navegador força fundo claro; o box-shadow inset com token
21
+ // repinta o fundo respeitando o dark mode.
22
+ &:-webkit-autofill,
23
+ &:-webkit-autofill:hover,
24
+ &:-webkit-autofill:focus {
25
+ -webkit-text-fill-color: var(--c-neutral-700);
26
+ -webkit-box-shadow: 0 0 0 1000px var(--c-neutral-50) inset;
27
+ caret-color: var(--c-neutral-700);
28
+ }
29
+
15
30
  &--full-width {
16
31
  width: 100%;
17
32
  }
@@ -26,7 +41,13 @@
26
41
  }
27
42
 
28
43
  &:disabled {
44
+ background-color: var(--c-neutral-100);
29
45
  border-color: var(--c-neutral-400);
46
+ color: var(--c-neutral-400);
47
+
48
+ &::placeholder {
49
+ color: var(--c-neutral-300);
50
+ }
30
51
 
31
52
  &:hover,
32
53
  &:focus,
@@ -77,6 +98,7 @@
77
98
  min-width: 7.5rem;
78
99
 
79
100
  .tc-rev-input-icon-control {
101
+ background-color: var(--c-neutral-50);
80
102
  border: 1px solid var(--c-neutral-400);
81
103
  border-radius: var(--bor-radius-pill);
82
104
  color: var(--c-neutral-700);
@@ -95,10 +117,29 @@
95
117
  width: 100%;
96
118
  z-index: 1;
97
119
 
120
+ &::placeholder {
121
+ color: var(--c-neutral-400);
122
+ }
123
+
124
+ // Autofill: repinta o fundo com token para respeitar o dark mode.
125
+ &:-webkit-autofill,
126
+ &:-webkit-autofill:hover,
127
+ &:-webkit-autofill:focus {
128
+ -webkit-text-fill-color: var(--c-neutral-700);
129
+ -webkit-box-shadow: 0 0 0 1000px var(--c-neutral-50) inset;
130
+ caret-color: var(--c-neutral-700);
131
+ }
132
+
98
133
  &:hover,
99
134
  &:focus {
100
135
  border-color: var(--c-primary-500);
101
136
  }
137
+
138
+ &:disabled {
139
+ background-color: var(--c-neutral-100);
140
+ border-color: var(--c-neutral-400);
141
+ color: var(--c-neutral-400);
142
+ }
102
143
  }
103
144
 
104
145
  .tc-rev-input-icon {