@wizco/fenixds-core 1.0.4 → 1.0.6

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 +3 -3
  4. package/styles/core.css +88 -58
  5. package/styles/scss/button.scss +17 -5
  6. package/styles/scss/forms.scss +109 -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.6",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "author": "Raul Melo Fernandez",
@@ -10,8 +10,8 @@
10
10
  "access": "public"
11
11
  },
12
12
  "peerDependencies": {
13
- "@angular/common": "^15.2.9",
14
- "@angular/core": "^15.2.9",
13
+ "@angular/common": "16.x",
14
+ "@angular/core": "16.x",
15
15
  "node-sass": "^7.0.3"
16
16
  },
17
17
  "dependencies": {
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,50 @@
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);
359
+ font-family: var(--wco-input-font);
360
+ font-size: var(--wco-input-size);
361
+ font-weight: 400;
373
362
  padding: 0 4px;
374
363
  margin-left: 20px;
375
- transition: 0.1s ease-out;
364
+ transition: 100ms linear;
376
365
  transform-origin: left top;
377
366
  pointer-events: none; }
367
+ .form-field:has(input:focus, textarea:focus, select:focus) {
368
+ --wco-input-color-label: var(--wco-color-primary-700);
369
+ --wco-input-color-outline: var(--wco-color-primary-700);
370
+ --wco-input-color-icon: var(--wco-color-primary-600);
371
+ --wco-input-color-text: var(--wco-color-neutral-900);
372
+ --wco-input-color-placeholder: var(--wco-color-neutral-600);
373
+ --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
374
+ .form-field:hover {
375
+ --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
376
+ --wco-input-color-outline: var(--wco-color-neutral-900, #8d9399); }
377
+ .form-field:has(input:disabled, textarea:disabled, select:disabled) {
378
+ --wco-input-color-label: var(--wco-color-neutral-500, #C3C8CC);
379
+ --wco-input-color-outline: var(--wco-color-neutral-300, #C3C8CC);
380
+ --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
381
+ --wco-input-color-text: var(--wco-color-neutral-600, #C3C8CC);
382
+ --wco-input-color-placeholder: var(--wco-color-neutral-300, #C3C8CC);
383
+ --wco-input-color-bg: var(--wco-color-neutral-100, #E9EBEC); }
384
+ .form-field:has(
385
+ input:read-only:not(:disabled),
386
+ textarea:read-only:not(:disabled),
387
+ select:read-only:not(:disabled)
388
+ ),
389
+ .form-field .form-field--readonly:not(.form-field--disabled) {
390
+ --wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
391
+ --wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
392
+ --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
393
+ --wco-input-color-text: var(--wco-color-neutral-900, #C3C8CC);
394
+ --wco-input-color-bg: var(--wco-color-neutral-50, #E9EBEC); }
395
+ .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) {
396
+ --wco-input-color-label: var(--wco-color-danger-600, #e00707);
397
+ --wco-input-color-outline: var(--wco-color-danger-600, #e00707);
398
+ --wco-input-color-icon: var(--wco-color-danger-600, #e00707);
399
+ --wco-input-color-text: var(--wco-color-neutral-900, #e00707);
400
+ --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
378
401
  .form-field textarea ~ label {
379
402
  top: 16px;
380
403
  transform: translateY(0); }
@@ -383,12 +406,13 @@
383
406
  .form-field input:focus + label {
384
407
  color: var(--input-default-color);
385
408
  top: 0;
386
- transform: translateY(-50%) scale(0.9) !important; }
387
- .form-field select:not([value=""]):valid ~ label,
409
+ transform: translateY(-50%) translateX(-10px) scale(0.9) !important; }
410
+ .form-field select:not([value=""]) ~ label,
388
411
  .form-field textarea:not(:placeholder-shown) + label,
389
412
  .form-field input:not(:placeholder-shown) + label {
390
413
  top: 0;
391
- transform: translateY(-50%) scale(0.9) !important; }
414
+ transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
415
+ font-weight: 500; }
392
416
  .form-field textarea:not(:focus)::placeholder,
393
417
  .form-field input:not(:focus)::placeholder {
394
418
  opacity: 0; }
@@ -396,7 +420,8 @@
396
420
  position: absolute;
397
421
  top: 50%;
398
422
  left: 12px;
399
- transform: translateY(-50%); }
423
+ transform: translateY(-50%);
424
+ color: var(--wco-input-color-icon); }
400
425
  .form-field > span ~ .form-field__input + label,
401
426
  .form-field > span ~ .form-field__select + label {
402
427
  margin-left: 44px; }
@@ -416,6 +441,8 @@
416
441
  top: 2px;
417
442
  width: 30px;
418
443
  height: 30px; }
444
+ .form-field.form-field--suffixe label + span {
445
+ color: var(--wco-input-color-icon); }
419
446
  .form-field.form-field--suffixe > .form-field__select,
420
447
  .form-field.form-field--suffixe > .form-field__input {
421
448
  padding-right: 44px; }
@@ -549,9 +576,11 @@ a.btn {
549
576
  position: relative;
550
577
  border: none;
551
578
  width: fit-content;
552
- letter-spacing: 1.1px;
579
+ letter-spacing: 0.4px;
553
580
  transition: all 300ms ease-in-out, outline 0ms linear;
554
- cursor: pointer; }
581
+ cursor: pointer;
582
+ text-decoration: none;
583
+ font-family: var(--wco-font-family); }
555
584
  button.btn:focus-visible,
556
585
  a.btn:focus-visible {
557
586
  outline: 2px solid var(--btn-focus, var(--textBtn)); }
@@ -695,6 +724,7 @@ a.btn {
695
724
  button.btn.btn-sm,
696
725
  a.btn.btn-sm {
697
726
  --btn-min-h: 32px;
727
+ --btn-size: 14px;
698
728
  --btn-padding: 4px 16px; }
699
729
  button.btn.btn-outline,
700
730
  a.btn.btn-outline {
package/styles/scss/button.scss CHANGED
@@ -12,13 +12,16 @@ a.btn {
12
12
  position: relative;
13
13
  border: none;
14
14
  width: fit-content;
15
- letter-spacing: 1.1px;
15
+ letter-spacing: 0.4px;
16
16
  transition: all 300ms ease-in-out, outline 0ms linear;
17
17
  cursor: pointer;
18
+ text-decoration: none;
19
+ font-family: var(--wco-font-family);
18
20
  // &:focus-within:not(:active),
19
21
  &:focus-visible {
20
22
  outline: 2px solid var(--btn-focus, var(--textBtn));
21
23
  }
24
+
22
25
  &:not([class*=" bg-"]) {
23
26
  background-color: var(--bgBtn);
24
27
  color: var(--textBtn);
@@ -79,6 +82,7 @@ a.btn {
79
82
  background-color: transparent;
80
83
  --textBtn: var(--wco-color-primary-600);
81
84
  --btn-focus: var(--wco-color-primary-600);
85
+
82
86
  &:hover {
83
87
  background-color: var(--wco-color-primary-50);
84
88
  --textBtn: var(--wco-color-primary-700);
@@ -89,15 +93,18 @@ a.btn {
89
93
  background-color: var(--wco-color-primary-50);
90
94
  }
91
95
  }
96
+
92
97
  &.btn-basic {
93
98
  box-shadow: none;
94
99
  --bgBtn: transparent;
95
100
  --textBtn: var(--wco-color-primary-600);
101
+
96
102
  &:hover {
97
103
  --textBtn: var(--wco-color-primary-700);
98
104
  --bgBtn: var(--wco-color-primary-50);
99
105
  }
100
- &:focus-visible,
106
+
107
+ &:focus-visible,
101
108
  // &:focus-within,
102
109
  &:active {
103
110
  --textBtn: var(--wco-color-primary-900);
@@ -110,6 +117,7 @@ a.btn {
110
117
  --bgBtn: var(--wco-color-secondary-100);
111
118
  --textBtn: var(--wco-color-secondary-900);
112
119
  --btn-focus: var(--wco-color-secondary-900);
120
+
113
121
  &:hover:not(.btn-outline) {
114
122
  --bgBtn: var(--wco-color-secondary-50);
115
123
  --textBtn: var(--wco-color-secondary-900);
@@ -134,7 +142,7 @@ a.btn {
134
142
  background-color: var(--wco-color-secondary-100);
135
143
  }
136
144
  }
137
-
145
+
138
146
  &.btn-basic {
139
147
  box-shadow: none;
140
148
  --bgBtn: transparent;
@@ -158,10 +166,12 @@ a.btn {
158
166
  background-color: transparent;
159
167
  --textBtn: var(--wco-color-primary-600);
160
168
  text-decoration: underline;
169
+
161
170
  &:hover:not(.btn-outline) {
162
171
  --textBtn: var(--wco-color-primary-700);
163
172
  box-shadow: none;
164
173
  }
174
+
165
175
  &:active:not(.btn-outline) {
166
176
  background-color: var(--wco-color-primary-100);
167
177
  --bgBtn: var(--wco-color-primary-900);
@@ -186,6 +196,7 @@ a.btn {
186
196
 
187
197
  &.btn-sm {
188
198
  --btn-min-h: 32px;
199
+ --btn-size: 14px;
189
200
  --btn-padding: 4px 16px;
190
201
  }
191
202
 
@@ -234,7 +245,7 @@ a.btn {
234
245
  }
235
246
  }
236
247
 
237
- &.btn-icon {
248
+ &.btn-icon {
238
249
  --btn-padding: 4px;
239
250
  min-height: var(--btn-min-h, 48px);
240
251
  min-width: var(--btn-min-h, 48px);
@@ -248,6 +259,7 @@ a.btn {
248
259
  --btn-notification-time: 2s;
249
260
  --btn-notification-count: infinite;
250
261
  --btn-notification-color: var(--bgBtn);
262
+
251
263
  &:not(.btn-outline) {
252
264
  &:before {
253
265
  outline: 2px solid var(--textBtn);
@@ -285,4 +297,4 @@ a.btn {
285
297
  }
286
298
  }
287
299
  }
288
- }
300
+ }
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,89 @@
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);
82
+ font-family: var(--wco-input-font);
83
+ font-size: var(--wco-input-size);
84
+ font-weight: 400;
98
85
  padding: 0 4px;
99
86
  margin-left: 20px;
100
- transition: 0.1s ease-out;
87
+ transition: 100ms linear;
101
88
  transform-origin: left top;
102
89
  pointer-events: none;
103
90
  }
104
91
 
105
- textarea ~ label {
106
- top: 16px;
107
- transform: translateY(0);
92
+ //// States ////
93
+ /// Focus
94
+ &:has(input:focus, textarea:focus, select:focus) {
95
+ --wco-input-color-label: var(--wco-color-primary-700);
96
+ --wco-input-color-outline: var(--wco-color-primary-700);
97
+ --wco-input-color-icon: var(--wco-color-primary-600);
98
+ --wco-input-color-text: var(--wco-color-neutral-900);
99
+ --wco-input-color-placeholder: var(--wco-color-neutral-600);
100
+ --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline);
101
+ }
102
+ /// Hover
103
+ &:hover {
104
+ --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
105
+ --wco-input-color-outline: var(--wco-color-neutral-900, #8d9399);
106
+ }
107
+
108
+ /// Disabled
109
+ &:has(input:disabled, textarea:disabled, select:disabled) {
110
+ --wco-input-color-label: var(--wco-color-neutral-500, #C3C8CC);
111
+ --wco-input-color-outline: var(--wco-color-neutral-300, #C3C8CC);
112
+ --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
113
+ --wco-input-color-text: var(--wco-color-neutral-600, #C3C8CC);
114
+ --wco-input-color-placeholder: var(--wco-color-neutral-300, #C3C8CC);
115
+ --wco-input-color-bg: var(--wco-color-neutral-100, #E9EBEC);
116
+ }
117
+
118
+ /// View Only
119
+ &:has(
120
+ input:read-only:not(:disabled),
121
+ textarea:read-only:not(:disabled),
122
+ select:read-only:not(:disabled)
123
+ ),
124
+ .form-field--readonly:not(.form-field--disabled) {
125
+ --wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
126
+ --wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
127
+ --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
128
+ --wco-input-color-text: var(--wco-color-neutral-900, #C3C8CC);
129
+ --wco-input-color-bg: var(--wco-color-neutral-50, #E9EBEC);
130
+ }
131
+
132
+ /// Error
133
+ &.form-field--error:not(:placeholder-shown) ~ label,
134
+ &.form-field--error, &:has(input:is(:placeholder-shown):invalid),
135
+ &:has(.form-field--error) {
136
+ --wco-input-color-label: var(--wco-color-danger-600, #e00707);
137
+ --wco-input-color-outline: var(--wco-color-danger-600, #e00707);
138
+ --wco-input-color-icon: var(--wco-color-danger-600, #e00707);
139
+ --wco-input-color-text: var(--wco-color-neutral-900, #e00707);
140
+ --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline);
141
+ }
142
+
143
+
144
+ textarea~label {
145
+ top: 16px;
146
+ transform: translateY(0);
108
147
  }
109
148
 
110
149
  select[value=""]:focus+label,
111
150
  textarea:focus+label,
112
151
  input:focus+label {
113
- color: var(--input-default-color);
114
- top: 0;
115
- transform: translateY(-50%) scale(0.9) !important;
152
+ color: var(--input-default-color);
153
+ top: 0;
154
+ transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
116
155
  }
117
156
 
118
- select:not([value=""]):valid~label,
157
+ select:not([value=""]) ~ label,
119
158
  textarea:not(:placeholder-shown)+label,
120
159
  input:not(:placeholder-shown)+label {
121
160
  top: 0;
122
- transform: translateY(-50%) scale(0.9) !important;
161
+ transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
162
+ font-weight: 500;
123
163
  }
124
164
 
125
165
  textarea:not(:focus)::placeholder,
@@ -134,6 +174,7 @@
134
174
  top: 50%;
135
175
  left: 12px;
136
176
  transform: translateY(-50%);
177
+ color: var(--wco-input-color-icon);
137
178
  }
138
179
  > span ~ .form-field__input + label,
139
180
  > span ~ .form-field__select + label {
@@ -161,6 +202,9 @@
161
202
 
162
203
  /// Input com ícone no final
163
204
  &.form-field--suffixe {
205
+ label + span {
206
+ color: var(--wco-input-color-icon);
207
+ }
164
208
  > .form-field__select,
165
209
  > .form-field__input {
166
210
  padding-right: 44px;
@@ -341,3 +385,4 @@ label.form-check, .form-check {
341
385
  color: var(--wco-color-neutral-600est);
342
386
  }
343
387
  }
388
+
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
+ }