@wizco/fenixds-core 1.0.4 → 1.0.5

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 (7) hide show
  1. package/esm2022/lib/styles/styles.component.mjs +3 -3
  2. package/fesm2022/wizco-fenixds-core.mjs +3 -3
  3. package/package.json +1 -1
  4. package/styles/core.css +79 -56
  5. package/styles/scss/button.scss +14 -4
  6. package/styles/scss/forms.scss +105 -64
  7. package/styles/scss/tooltip.scss +29 -8
package/esm2022/lib/styles/styles.component.mjs CHANGED
@@ -2,10 +2,10 @@ import { Component } from '@angular/core';
2
2
  import { CommonModule } from '@angular/common';
3
3
  import * as i0 from "@angular/core";
4
4
  export class StylesComponent {
5
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: StylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: StylesComponent, isStandalone: true, selector: "lib-styles", ngImport: i0, template: "<p>styles works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
5
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: StylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: StylesComponent, isStandalone: true, selector: "lib-styles", ngImport: i0, template: "<p>styles works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
7
7
  }
8
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: StylesComponent, decorators: [{
8
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: StylesComponent, decorators: [{
9
9
  type: Component,
10
10
  args: [{ selector: 'lib-styles', standalone: true, imports: [CommonModule], template: "<p>styles works!</p>\n" }]
11
11
  }] });
package/fesm2022/wizco-fenixds-core.mjs CHANGED
@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
3
3
  import { CommonModule } from '@angular/common';
4
4
 
5
5
  class StylesComponent {
6
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: StylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: StylesComponent, isStandalone: true, selector: "lib-styles", ngImport: i0, template: "<p>styles works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
6
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: StylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: StylesComponent, isStandalone: true, selector: "lib-styles", ngImport: i0, template: "<p>styles works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
8
8
  }
9
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: StylesComponent, decorators: [{
9
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: StylesComponent, decorators: [{
10
10
  type: Component,
11
11
  args: [{ selector: 'lib-styles', standalone: true, imports: [CommonModule], template: "<p>styles works!</p>\n" }]
12
12
  }] });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@wizco/fenixds-core",
3
3
  "description": "Fenix design system é um produto da Wiz com ativos de design e código de front-end para ajudar as equipes na criação dos seus produtos.",
4
- "version": "1.0.4",
4
+ "version": "1.0.5",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "author": "Raul Melo Fernandez",
package/styles/core.css CHANGED
@@ -280,36 +280,55 @@
280
280
  --tooltip-background: var(--wco-color-info-500);
281
281
  --tooltip-color: var(--wco-color-info-900); }
282
282
 
283
+ .form-field {
284
+ --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
285
+ --wco-input-color-outline: var(--wco-color-neutral-500, #8d9399);
286
+ --wco-input-color-icon: var(--wco-color-primary-600, #bf5600);
287
+ --wco-input-color-text: var(--wco-color-primary-900, #080809);
288
+ --wco-input-color-placeholder: var(--wco-color-neutral-600, #6d747a);
289
+ --wco-input-color-bg: var(--wco-color-neutral-50, #fcfcfc);
290
+ --wco-input-radius: var(--wco-radius-sm, 4px);
291
+ --wco-input-border: var(--wco-borderwidth-thin, 1px) solid var(--wco-input-color-outline);
292
+ --wco-input-size: var(--wco-font-size-xs, 16px);
293
+ --wco-input-shadow: var(--wco-shadow-level-0, 0px 0px 0px 0px rgba(0, 0, 0, 0.2));
294
+ --wco-input-color-required: var(--wco-color-danger-600, #e00707);
295
+ --wco-input-color-helptext: var(--wco-color-neutral-900, #6d747a);
296
+ --wco-input-font: var(--wco-font-family, 'Figtree', sans-serif);
297
+ --wco-input-padding: 16px; }
298
+
299
+ .form-field * {
300
+ box-sizing: border-box; }
301
+
283
302
  .form-field {
284
303
  display: flex;
285
304
  position: relative;
286
- --input-radius: var(--wco-radius-sm, 4px);
287
- --input-color-error: var(--wco-color-danger-500, #E00707);
288
- --input-default-color: var(--wco-color-primary-700,#004E87);
289
- --input-border: 1px solid var(--wco-color-neutral-100);
290
- --input-size: 16px;
291
- --input-shadow: 0px 0px 0px 0px transparent;
292
- accent-color: var(--input-default-color);
305
+ accent-color: var(--wco-input-color-text);
293
306
  transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out; }
294
307
  .form-field input:required + label::after,
295
308
  .form-field textarea:required + label::after,
296
309
  .form-field input:invalid:not(:placeholder-shown):required + label {
297
310
  content: " *";
298
- color: var(--wco-color-danger-100); }
311
+ color: var(--wco-input-color-required); }
299
312
  .form-field .form-field__input,
300
313
  .form-field .form-field__textarea,
301
314
  .form-field .form-field__select {
302
- border: var(--input-border);
303
- border-radius: var(--input-radius);
304
- font-size: var(--input-size, 16px);
305
- box-shadow: var(--input-shadow);
306
- padding: 16px;
315
+ border: var(--wco-input-border);
316
+ border-radius: var(--wco-input-radius);
317
+ font-size: var(--wco-input-size, 16px);
318
+ box-shadow: var(--wco-input-shadow);
319
+ padding: var(--wco-input-padding, 16px);
307
320
  font-style: normal;
308
321
  font-weight: 400;
309
- line-height: 150%;
310
- color: #212223;
322
+ line-height: 1.375;
323
+ letter-spacing: 0.4px;
324
+ color: var(--wco-input-color-text);
311
325
  outline: none;
312
- width: 100%; }
326
+ width: 100%;
327
+ background-color: var(--wco-input-color-bg); }
328
+ .form-field .form-field__input::placeholder,
329
+ .form-field .form-field__textarea::placeholder,
330
+ .form-field .form-field__select::placeholder {
331
+ color: var(--wco-input-color-placeholder); }
313
332
  .form-field .form-field__input:invalid:not(:placeholder-shown), .form-field .form-field__input.form-field--error:not(:placeholder-shown),
314
333
  .form-field .form-field__textarea:invalid:not(:placeholder-shown),
315
334
  .form-field .form-field__textarea.form-field--error:not(:placeholder-shown),
@@ -318,39 +337,6 @@
318
337
  --input-border: 1px solid var(--input-color-error);
319
338
  --input-shadow: 0px 2px 0px 1px var(--input-color-error);
320
339
  color: var(--input-color-error); }
321
- .form-field .form-field__input.form-field--error:not(:placeholder-shown) ~ label,
322
- .form-field .form-field__textarea.form-field--error:not(:placeholder-shown) ~ label,
323
- .form-field .form-field__select.form-field--error:not(:placeholder-shown) ~ label {
324
- color: var(--input-color-error); }
325
- .form-field .form-field__input:hover:not(:focus):not(:disabled):not(:invalid):not(:read-only),
326
- .form-field .form-field__textarea:hover:not(:focus):not(:disabled):not(:invalid):not(:read-only),
327
- .form-field .form-field__select:hover:not(:focus):not(:disabled):not(:invalid):not(:read-only) {
328
- border: 1px solid var(--wco-color-primary-500, var(--input-default-color)); }
329
- .form-field .form-field__input:disabled,
330
- .form-field .form-field__textarea:disabled,
331
- .form-field .form-field__select:disabled {
332
- border: 1px solid #6F7276;
333
- background: var(--wco-color-neutral-100est);
334
- color: #6F7276; }
335
- .form-field .form-field__input:disabled + label,
336
- .form-field .form-field__textarea:disabled + label,
337
- .form-field .form-field__select:disabled + label {
338
- color: var(--wco-color-neutral-700);
339
- --input-bg: var(--wco-color-neutral-100est); }
340
- .form-field .form-field__input:read-only:not(:disabled):not(select),
341
- .form-field .form-field__textarea:read-only:not(:disabled):not(select),
342
- .form-field .form-field__select:read-only:not(:disabled):not(select) {
343
- background: #EAEBEB;
344
- border: 1px solid #C1C3C5;
345
- color: #6F7276; }
346
- .form-field .form-field__input:read-only:not(:disabled):not(select):focus,
347
- .form-field .form-field__textarea:read-only:not(:disabled):not(select):focus,
348
- .form-field .form-field__select:read-only:not(:disabled):not(select):focus {
349
- --input-border: 2px solid #C1C3C5; }
350
- .form-field .form-field__input:read-only:not(:disabled):not(select) + label,
351
- .form-field .form-field__textarea:read-only:not(:disabled):not(select) + label,
352
- .form-field .form-field__select:read-only:not(:disabled):not(select) + label {
353
- --input-bg: #EAEBEB; }
354
340
  .form-field .form-field__input.input-sm,
355
341
  .form-field .form-field__textarea.input-sm,
356
342
  .form-field .form-field__select.input-sm {
@@ -368,13 +354,47 @@
368
354
  left: 0;
369
355
  top: 50%;
370
356
  transform: translateY(-50%);
371
- background-image: linear-gradient(0deg, var(--input-bg, #fff) 44%, rgba(93, 118, 137, 0) 44%);
372
- color: var(--input-default-color);
357
+ background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93, 118, 137, 0) 44%);
358
+ color: var(--wco-input-color-label);
373
359
  padding: 0 4px;
374
360
  margin-left: 20px;
375
- transition: 0.1s ease-out;
361
+ transition: 100ms linear;
376
362
  transform-origin: left top;
377
363
  pointer-events: none; }
364
+ .form-field:has(input:focus, textarea:focus, select:focus) {
365
+ --wco-input-color-label: var(--wco-color-primary-700);
366
+ --wco-input-color-outline: var(--wco-color-primary-600);
367
+ --wco-input-color-icon: var(--wco-color-primary-600);
368
+ --wco-input-color-text: var(--wco-color-neutral-900);
369
+ --wco-input-color-placeholder: var(--wco-color-neutral-600);
370
+ --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
371
+ .form-field:hover {
372
+ --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
373
+ --wco-input-color-outline: var(--wco-color-neutral-900, #8d9399); }
374
+ .form-field:has(input:disabled, textarea:disabled, select:disabled) {
375
+ --wco-input-color-label: var(--wco-color-neutral-500, #C3C8CC);
376
+ --wco-input-color-outline: var(--wco-color-neutral-300, #C3C8CC);
377
+ --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
378
+ --wco-input-color-text: var(--wco-color-neutral-600, #C3C8CC);
379
+ --wco-input-color-placeholder: var(--wco-color-neutral-300, #C3C8CC);
380
+ --wco-input-color-bg: var(--wco-color-neutral-100, #E9EBEC); }
381
+ .form-field:has(
382
+ input:read-only:not(:disabled),
383
+ textarea:read-only:not(:disabled),
384
+ select:read-only:not(:disabled)
385
+ ),
386
+ .form-field .form-field--readonly:not(.form-field--disabled) {
387
+ --wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
388
+ --wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
389
+ --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
390
+ --wco-input-color-text: var(--wco-color-neutral-900, #C3C8CC);
391
+ --wco-input-color-bg: var(--wco-color-neutral-50, #E9EBEC); }
392
+ .form-field.form-field--error:not(:placeholder-shown) ~ label, .form-field.form-field--error, .form-field:has(input:is(:placeholder-shown):invalid), .form-field:has(.form-field--error) {
393
+ --wco-input-color-label: var(--wco-color-danger-600, #e00707);
394
+ --wco-input-color-outline: var(--wco-color-danger-600, #e00707);
395
+ --wco-input-color-icon: var(--wco-color-danger-600, #e00707);
396
+ --wco-input-color-text: var(--wco-color-neutral-900, #e00707);
397
+ --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
378
398
  .form-field textarea ~ label {
379
399
  top: 16px;
380
400
  transform: translateY(0); }
@@ -383,12 +403,12 @@
383
403
  .form-field input:focus + label {
384
404
  color: var(--input-default-color);
385
405
  top: 0;
386
- transform: translateY(-50%) scale(0.9) !important; }
387
- .form-field select:not([value=""]):valid ~ label,
406
+ transform: translateY(-50%) translateX(-10px) scale(0.9) !important; }
407
+ .form-field select:not([value=""]) ~ label,
388
408
  .form-field textarea:not(:placeholder-shown) + label,
389
409
  .form-field input:not(:placeholder-shown) + label {
390
410
  top: 0;
391
- transform: translateY(-50%) scale(0.9) !important; }
411
+ transform: translateY(-50%) translateX(-10px) scale(0.9) !important; }
392
412
  .form-field textarea:not(:focus)::placeholder,
393
413
  .form-field input:not(:focus)::placeholder {
394
414
  opacity: 0; }
@@ -396,7 +416,8 @@
396
416
  position: absolute;
397
417
  top: 50%;
398
418
  left: 12px;
399
- transform: translateY(-50%); }
419
+ transform: translateY(-50%);
420
+ color: var(--wco-input-color-icon); }
400
421
  .form-field > span ~ .form-field__input + label,
401
422
  .form-field > span ~ .form-field__select + label {
402
423
  margin-left: 44px; }
@@ -416,6 +437,8 @@
416
437
  top: 2px;
417
438
  width: 30px;
418
439
  height: 30px; }
440
+ .form-field.form-field--suffixe label + span {
441
+ color: var(--wco-input-color-icon); }
419
442
  .form-field.form-field--suffixe > .form-field__select,
420
443
  .form-field.form-field--suffixe > .form-field__input {
421
444
  padding-right: 44px; }
package/styles/scss/button.scss CHANGED
@@ -15,10 +15,12 @@ a.btn {
15
15
  letter-spacing: 1.1px;
16
16
  transition: all 300ms ease-in-out, outline 0ms linear;
17
17
  cursor: pointer;
18
+
18
19
  // &:focus-within:not(:active),
19
20
  &:focus-visible {
20
21
  outline: 2px solid var(--btn-focus, var(--textBtn));
21
22
  }
23
+
22
24
  &:not([class*=" bg-"]) {
23
25
  background-color: var(--bgBtn);
24
26
  color: var(--textBtn);
@@ -79,6 +81,7 @@ a.btn {
79
81
  background-color: transparent;
80
82
  --textBtn: var(--wco-color-primary-600);
81
83
  --btn-focus: var(--wco-color-primary-600);
84
+
82
85
  &:hover {
83
86
  background-color: var(--wco-color-primary-50);
84
87
  --textBtn: var(--wco-color-primary-700);
@@ -89,15 +92,18 @@ a.btn {
89
92
  background-color: var(--wco-color-primary-50);
90
93
  }
91
94
  }
95
+
92
96
  &.btn-basic {
93
97
  box-shadow: none;
94
98
  --bgBtn: transparent;
95
99
  --textBtn: var(--wco-color-primary-600);
100
+
96
101
  &:hover {
97
102
  --textBtn: var(--wco-color-primary-700);
98
103
  --bgBtn: var(--wco-color-primary-50);
99
104
  }
100
- &:focus-visible,
105
+
106
+ &:focus-visible,
101
107
  // &:focus-within,
102
108
  &:active {
103
109
  --textBtn: var(--wco-color-primary-900);
@@ -110,6 +116,7 @@ a.btn {
110
116
  --bgBtn: var(--wco-color-secondary-100);
111
117
  --textBtn: var(--wco-color-secondary-900);
112
118
  --btn-focus: var(--wco-color-secondary-900);
119
+
113
120
  &:hover:not(.btn-outline) {
114
121
  --bgBtn: var(--wco-color-secondary-50);
115
122
  --textBtn: var(--wco-color-secondary-900);
@@ -134,7 +141,7 @@ a.btn {
134
141
  background-color: var(--wco-color-secondary-100);
135
142
  }
136
143
  }
137
-
144
+
138
145
  &.btn-basic {
139
146
  box-shadow: none;
140
147
  --bgBtn: transparent;
@@ -158,10 +165,12 @@ a.btn {
158
165
  background-color: transparent;
159
166
  --textBtn: var(--wco-color-primary-600);
160
167
  text-decoration: underline;
168
+
161
169
  &:hover:not(.btn-outline) {
162
170
  --textBtn: var(--wco-color-primary-700);
163
171
  box-shadow: none;
164
172
  }
173
+
165
174
  &:active:not(.btn-outline) {
166
175
  background-color: var(--wco-color-primary-100);
167
176
  --bgBtn: var(--wco-color-primary-900);
@@ -234,7 +243,7 @@ a.btn {
234
243
  }
235
244
  }
236
245
 
237
- &.btn-icon {
246
+ &.btn-icon {
238
247
  --btn-padding: 4px;
239
248
  min-height: var(--btn-min-h, 48px);
240
249
  min-width: var(--btn-min-h, 48px);
@@ -248,6 +257,7 @@ a.btn {
248
257
  --btn-notification-time: 2s;
249
258
  --btn-notification-count: infinite;
250
259
  --btn-notification-color: var(--bgBtn);
260
+
251
261
  &:not(.btn-outline) {
252
262
  &:before {
253
263
  outline: 2px solid var(--textBtn);
@@ -285,4 +295,4 @@ a.btn {
285
295
  }
286
296
  }
287
297
  }
288
- }
298
+ }
package/styles/scss/forms.scss CHANGED
@@ -1,78 +1,62 @@
1
+ .form-field {
2
+ --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
3
+ --wco-input-color-outline: var(--wco-color-neutral-500, #8d9399);
4
+ --wco-input-color-icon: var(--wco-color-primary-600, #bf5600);
5
+ --wco-input-color-text: var(--wco-color-primary-900, #080809);
6
+ --wco-input-color-placeholder: var(--wco-color-neutral-600, #6d747a);
7
+ --wco-input-color-bg: var(--wco-color-neutral-50, #fcfcfc);
8
+ --wco-input-radius: var(--wco-radius-sm, 4px);
9
+ --wco-input-border: var(--wco-borderwidth-thin, 1px) solid var(--wco-input-color-outline);
10
+ --wco-input-size: var(--wco-font-size-xs, 16px);
11
+ --wco-input-shadow: var(--wco-shadow-level-0, 0px 0px 0px 0px rgba(0, 0, 0, 0.2));
12
+ --wco-input-color-required: var(--wco-color-danger-600, #e00707);
13
+ --wco-input-color-helptext: var(--wco-color-neutral-900, #6d747a);
14
+ --wco-input-font: var(--wco-font-family, 'Figtree', sans-serif);
15
+ --wco-input-padding: 16px;
16
+ }
17
+
18
+ .form-field * {
19
+ box-sizing: border-box;
20
+ }
21
+
1
22
  .form-field {
2
23
  display: flex;
3
24
  position: relative;
4
- --input-radius: var(--wco-radius-sm, 4px);
5
- --input-color-error: var(--wco-color-danger-500, #E00707);
6
- --input-default-color: var(--wco-color-primary-700,#004E87);
7
- --input-border: 1px solid var(--wco-color-neutral-100);
8
- --input-size: 16px;
9
- --input-shadow: 0px 0px 0px 0px transparent;
10
- accent-color: var(--input-default-color);
25
+ accent-color: var(--wco-input-color-text);
11
26
  transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out;
12
27
  // input Invalid
13
28
  input:required+label::after,
14
29
  textarea:required+label::after,
15
30
  input:invalid:not(:placeholder-shown):required+label{
16
31
  content: " *";
17
- color: var(--wco-color-danger-100);
32
+ color: var(--wco-input-color-required);
18
33
  }
19
34
 
20
35
  // input custom
21
36
  .form-field__input,
22
37
  .form-field__textarea,
23
38
  .form-field__select {
24
- border: var(--input-border);
25
- border-radius: var(--input-radius);
26
- font-size: var(--input-size, 16px);
27
- box-shadow: var(--input-shadow);
28
- padding: 16px;
39
+ border: var(--wco-input-border);
40
+ border-radius: var(--wco-input-radius);
41
+ font-size: var(--wco-input-size, 16px);
42
+ box-shadow: var(--wco-input-shadow);
43
+ padding: var(--wco-input-padding, 16px);
29
44
  font-style: normal;
30
45
  font-weight: 400;
31
- line-height: 150%;
32
- color: #212223;
46
+ line-height: 1.375;
47
+ letter-spacing: 0.4px;
48
+ color: var(--wco-input-color-text);
33
49
  outline: none;
34
50
  width: 100%;
35
-
36
- // native effects
51
+ background-color: var(--wco-input-color-bg);
52
+ &::placeholder {
53
+ color: var(--wco-input-color-placeholder);
54
+ }
55
+ // native effects
37
56
  &:invalid:not(:placeholder-shown), &.form-field--error:not(:placeholder-shown) {
38
57
  --input-border: 1px solid var(--input-color-error);
39
58
  --input-shadow: 0px 2px 0px 1px var(--input-color-error);
40
59
  color: var(--input-color-error);
41
-
42
- }
43
-
44
- &.form-field--error:not(:placeholder-shown) ~ label {
45
- color: var(--input-color-error);
46
- }
47
-
48
- &:hover:not(:focus):not(:disabled):not(:invalid):not(:read-only) {
49
- border: 1px solid var(--wco-color-primary-500, var(--input-default-color));
50
- }
51
-
52
- // &:focus:not(:disabled):not(:invalid) {
53
- // --input-border: 2px solid var(--wco-color-primary-700, var(--input-default-color));;
54
- // }
55
-
56
- &:disabled {
57
- border: 1px solid #6F7276;
58
- background: var(--wco-color-neutral-100est);
59
- color: #6F7276;
60
- + label {
61
- color: var(--wco-color-neutral-700);
62
- --input-bg: var(--wco-color-neutral-100est);
63
- }
64
- }
65
-
66
- &:read-only:not(:disabled):not(select) {
67
- background: #EAEBEB;
68
- border: 1px solid #C1C3C5;
69
- color: #6F7276;
70
- &:focus {
71
- --input-border: 2px solid #C1C3C5;
72
- }
73
- + label {
74
- --input-bg: #EAEBEB;
75
- }
76
60
  }
77
61
 
78
62
  // sizes
@@ -81,11 +65,11 @@
81
65
  }
82
66
  &.input-md {
83
67
  height: 40px;
84
-
85
68
  }
86
69
  &.input-lg {
87
70
  height: 48px;
88
71
  }
72
+
89
73
  }
90
74
 
91
75
  label {
@@ -93,33 +77,85 @@
93
77
  left: 0;
94
78
  top: 50%;
95
79
  transform: translateY(-50%);
96
- background-image: linear-gradient(0deg, var(--input-bg, #fff) 44%, rgba(93,118,137,0) 44%);
97
- color: var(--input-default-color);
80
+ background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93,118,137,0) 44%);
81
+ color: var(--wco-input-color-label);
98
82
  padding: 0 4px;
99
83
  margin-left: 20px;
100
- transition: 0.1s ease-out;
84
+ transition: 100ms linear;
101
85
  transform-origin: left top;
102
86
  pointer-events: none;
103
87
  }
104
88
 
105
- textarea ~ label {
106
- top: 16px;
107
- transform: translateY(0);
89
+ //// States ////
90
+ /// Focus
91
+ &:has(input:focus, textarea:focus, select:focus) {
92
+ --wco-input-color-label: var(--wco-color-primary-700);
93
+ --wco-input-color-outline: var(--wco-color-primary-600);
94
+ --wco-input-color-icon: var(--wco-color-primary-600);
95
+ --wco-input-color-text: var(--wco-color-neutral-900);
96
+ --wco-input-color-placeholder: var(--wco-color-neutral-600);
97
+ --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline);
98
+ }
99
+ /// Hover
100
+ &:hover {
101
+ --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
102
+ --wco-input-color-outline: var(--wco-color-neutral-900, #8d9399);
103
+ }
104
+
105
+ /// Disabled
106
+ &:has(input:disabled, textarea:disabled, select:disabled) {
107
+ --wco-input-color-label: var(--wco-color-neutral-500, #C3C8CC);
108
+ --wco-input-color-outline: var(--wco-color-neutral-300, #C3C8CC);
109
+ --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
110
+ --wco-input-color-text: var(--wco-color-neutral-600, #C3C8CC);
111
+ --wco-input-color-placeholder: var(--wco-color-neutral-300, #C3C8CC);
112
+ --wco-input-color-bg: var(--wco-color-neutral-100, #E9EBEC);
113
+ }
114
+
115
+ /// View Only
116
+ &:has(
117
+ input:read-only:not(:disabled),
118
+ textarea:read-only:not(:disabled),
119
+ select:read-only:not(:disabled)
120
+ ),
121
+ .form-field--readonly:not(.form-field--disabled) {
122
+ --wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
123
+ --wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
124
+ --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
125
+ --wco-input-color-text: var(--wco-color-neutral-900, #C3C8CC);
126
+ --wco-input-color-bg: var(--wco-color-neutral-50, #E9EBEC);
127
+ }
128
+
129
+ /// Error
130
+ &.form-field--error:not(:placeholder-shown) ~ label,
131
+ &.form-field--error, &:has(input:is(:placeholder-shown):invalid),
132
+ &:has(.form-field--error) {
133
+ --wco-input-color-label: var(--wco-color-danger-600, #e00707);
134
+ --wco-input-color-outline: var(--wco-color-danger-600, #e00707);
135
+ --wco-input-color-icon: var(--wco-color-danger-600, #e00707);
136
+ --wco-input-color-text: var(--wco-color-neutral-900, #e00707);
137
+ --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline);
138
+ }
139
+
140
+
141
+ textarea~label {
142
+ top: 16px;
143
+ transform: translateY(0);
108
144
  }
109
145
 
110
146
  select[value=""]:focus+label,
111
147
  textarea:focus+label,
112
148
  input:focus+label {
113
- color: var(--input-default-color);
114
- top: 0;
115
- transform: translateY(-50%) scale(0.9) !important;
149
+ color: var(--input-default-color);
150
+ top: 0;
151
+ transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
116
152
  }
117
153
 
118
- select:not([value=""]):valid~label,
154
+ select:not([value=""]) ~ label,
119
155
  textarea:not(:placeholder-shown)+label,
120
156
  input:not(:placeholder-shown)+label {
121
157
  top: 0;
122
- transform: translateY(-50%) scale(0.9) !important;
158
+ transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
123
159
  }
124
160
 
125
161
  textarea:not(:focus)::placeholder,
@@ -134,6 +170,7 @@
134
170
  top: 50%;
135
171
  left: 12px;
136
172
  transform: translateY(-50%);
173
+ color: var(--wco-input-color-icon);
137
174
  }
138
175
  > span ~ .form-field__input + label,
139
176
  > span ~ .form-field__select + label {
@@ -161,6 +198,9 @@
161
198
 
162
199
  /// Input com ícone no final
163
200
  &.form-field--suffixe {
201
+ label + span {
202
+ color: var(--wco-input-color-icon);
203
+ }
164
204
  > .form-field__select,
165
205
  > .form-field__input {
166
206
  padding-right: 44px;
@@ -341,3 +381,4 @@ label.form-check, .form-check {
341
381
  color: var(--wco-color-neutral-600est);
342
382
  }
343
383
  }
384
+
package/styles/scss/tooltip.scss CHANGED
@@ -1,12 +1,15 @@
1
1
  [data-tooltip] {
2
- position: relative; /* opinion 1 */
2
+ position: relative;
3
+ /* opinion 1 */
3
4
  }
4
5
 
5
6
  /* Applies to all tooltips */
6
7
  [data-tooltip]::before,
7
8
  [data-tooltip]::after {
8
- text-transform: none; /* opinion 2 */
9
- font-size: .9em; /* opinion 3 */
9
+ text-transform: none;
10
+ /* opinion 2 */
11
+ font-size: .9em;
12
+ /* opinion 3 */
10
13
  line-height: 1;
11
14
  user-select: none;
12
15
  pointer-events: none;
@@ -14,13 +17,18 @@
14
17
  display: none;
15
18
  opacity: 0;
16
19
  }
20
+
17
21
  [data-tooltip]::before {
18
22
  content: '';
19
- border: 5px solid transparent; /* opinion 4 */
20
- z-index: 1001; /* absurdity 1 */
23
+ border: 5px solid transparent;
24
+ /* opinion 4 */
25
+ z-index: 1001;
26
+ /* absurdity 1 */
21
27
  }
28
+
22
29
  [data-tooltip]::after {
23
- content: attr(data-tooltip); /* magic! */
30
+ content: attr(data-tooltip);
31
+ /* magic! */
24
32
 
25
33
  /* most of the rest of this is opinion */
26
34
  text-align: center;
@@ -39,7 +47,8 @@
39
47
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
40
48
  background: var(--tooltip-background, var(--wco-color-neutral-600est, #333));
41
49
  color: var(--tooltip-color, var(--wco-color-primary-50, #fff));
42
- z-index: 1000; /* absurdity 2 */
50
+ z-index: 1000;
51
+ /* absurdity 2 */
43
52
  }
44
53
 
45
54
  /* Make the tooltips respond to hover */
@@ -61,10 +70,12 @@
61
70
  border-bottom-width: 0;
62
71
  border-top-color: var(--tooltip-background, var(--wco-color-neutral-600est, #333));
63
72
  }
73
+
64
74
  [data-tooltip]:not([data-flow])::after,
65
75
  [data-tooltip][data-flow^="top"]::after {
66
76
  bottom: calc(100% + 5px);
67
77
  }
78
+
68
79
  [data-tooltip]:not([data-flow])::before,
69
80
  [data-tooltip]:not([data-flow])::after,
70
81
  [data-tooltip][data-flow^="top"]::before,
@@ -80,9 +91,11 @@
80
91
  border-bottom-color: var(--tooltip-background, var(--wco-color-neutral-600est, #333));
81
92
 
82
93
  }
94
+
83
95
  [data-tooltip][data-flow^="bottom"]::after {
84
96
  top: calc(100% + 5px);
85
97
  }
98
+
86
99
  [data-tooltip][data-flow^="bottom"]::before,
87
100
  [data-tooltip][data-flow^="bottom"]::after {
88
101
  left: 50%;
@@ -97,6 +110,7 @@
97
110
  left: calc(0em - 5px);
98
111
  transform: translate(-.5em, -50%);
99
112
  }
113
+
100
114
  [data-tooltip][data-flow^="left"]::after {
101
115
  top: 50%;
102
116
  right: calc(100% + 5px);
@@ -111,6 +125,7 @@
111
125
  right: calc(0em - 5px);
112
126
  transform: translate(.5em, -50%);
113
127
  }
128
+
114
129
  [data-tooltip][data-flow^="right"]::after {
115
130
  top: 50%;
116
131
  left: calc(100% + 5px);
@@ -153,27 +168,33 @@
153
168
  --tooltip-background: var(--wco-color-neutral-50);
154
169
  --tooltip-color: var(--wco-color-neutral-900);
155
170
  }
171
+
156
172
  .tooltip-primary {
157
173
  --tooltip-background: var(--wco-color-primary-500);
158
174
  --tooltip-color: var(--wco-color-primary-900);
159
175
  }
176
+
160
177
  .tooltip-secondary {
161
178
  --tooltip-background: var(--wco-color-secondary-500);
162
179
  --tooltip-color: var(--wco-color-secondary-50);
163
180
  }
181
+
164
182
  .tooltip-warning {
165
183
  --tooltip-background: var(--wco-color-warning-500);
166
184
  --tooltip-color: var(--wco-color-warning-extradark);
167
185
  }
186
+
168
187
  .tooltip-error {
169
188
  --tooltip-background: var(--wco-color-danger-500);
170
189
  --tooltip-color: var(--wco-color-danger-900-extradark);
171
190
  }
191
+
172
192
  .tooltip-success {
173
193
  --tooltip-background: var(--wco-color-success-500);
174
194
  --tooltip-color: var(--wco-color-success-extradark);
175
195
  }
196
+
176
197
  .tooltip-info {
177
198
  --tooltip-background: var(--wco-color-info-500);
178
199
  --tooltip-color: var(--wco-color-info-900);
179
- }
200
+ }