@wizco/fenixds-core 1.0.15 → 1.0.16

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 (3) hide show
  1. package/package.json +1 -1
  2. package/styles/core.css +64 -22
  3. package/styles/scss/forms.scss +88 -22
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.15",
4
+ "version": "1.0.16",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "author": "Raul Melo Fernandez",
package/styles/core.css CHANGED
@@ -509,28 +509,38 @@ label.form-radio, .form-radio {
509
509
  box-shadow: inset 0px 0px 12px 12px var(--wco-color-neutral-600); }
510
510
 
511
511
  label.form-check, .form-check {
512
- --accent-color: var(--wco-color-primary-700);
513
- --checkbox-size: 16px;
514
- --checkbox-gap: 8px;
515
- --checkbox-radius: 4px;
512
+ --wco-checkbox-default-color-label: var(--wco-color-neutral-900);
513
+ --wco-checkbox-default-color-iconunchecked: var(--wco-color-neutral-500);
514
+ --wco-checkbox-default-color-iconchecked: var(--wco-color-primary-600);
515
+ --wco-checkbox-hover-color-label: var(--wco-color-neutral-900);
516
+ --wco-checkbox-hover-color-iconunchecked: var(--wco-color-primary-700);
517
+ --wco-checkbox-hover-color-iconchecked: var(--wco-color-primary-600);
518
+ --wco-checkbox-hover-color-bg: var(--wco-color-primary-50);
519
+ --wco-checkbox-disabled-color-label: var(--wco-color-neutral-700);
520
+ --wco-checkbox-disabled-color-iconunchecked: var(--wco-color-neutral-700);
521
+ --wco-checkbox-disabled-color-iconchecked: var(--wco-color-neutral-500);
522
+ --wco-checkbox-disabled-color-bg: var(--wco-color-neutral-700);
523
+ --wco-checkbox-checkbox-size: 18px;
524
+ --wco-checkbox-checkbox-gap: 12px;
525
+ --wco-checkbox-checkbox-radius: 4px;
516
526
  display: inline-flex;
517
527
  justify-content: center;
518
528
  align-items: center;
519
- gap: var(--checkbox-gap); }
529
+ gap: var(--wco-checkbox-checkbox-gap); }
520
530
  label.form-check label, .form-check label {
521
531
  display: inline-flex;
522
532
  justify-content: center;
523
533
  align-items: center;
524
- gap: var(--checkbox-gap); }
534
+ gap: var(--wco-checkbox-checkbox-gap); }
525
535
  label.form-check input[type="checkbox"], .form-check input[type="checkbox"] {
526
536
  display: none; }
527
537
  label.form-check input[type="checkbox"] ~ .check, .form-check input[type="checkbox"] ~ .check {
528
- height: var(--checkbox-size);
529
- width: var(--checkbox-size);
538
+ height: var(--wco-checkbox-checkbox-size);
539
+ width: var(--wco-checkbox-checkbox-size);
530
540
  display: inline-flex;
531
541
  position: relative;
532
- border-radius: var(--checkbox-radius);
533
- border: 1px solid var(--wco-color-neutral-500); }
542
+ border-radius: var(--wco-checkbox-checkbox-radius);
543
+ border: 2px solid var(--wco-checkbox-default-color-iconunchecked); }
534
544
  label.form-check input[type="checkbox"] ~ .check::before, .form-check input[type="checkbox"] ~ .check::before {
535
545
  content: "";
536
546
  position: absolute;
@@ -544,29 +554,61 @@ label.form-check, .form-check {
544
554
  background-size: 0px;
545
555
  opacity: 0;
546
556
  transition: background-size 100ms linear;
547
- background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00009 6.77988L1.68676 4.46655C1.42676 4.20655 1.00676 4.20655 0.746758 4.46655C0.486758 4.72655 0.486758 5.14655 0.746758 5.40655L3.53342 8.19322C3.79342 8.45322 4.21342 8.45322 4.47342 8.19322L11.5268 1.13988C11.7868 0.879883 11.7868 0.459883 11.5268 0.199883C11.2668 -0.0601172 10.8468 -0.0601172 10.5868 0.199883L4.00009 6.77988Z' fill='%23F9F7F7'/%3E%3C/svg%3E%0A"); }
557
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 -3 12 15' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00009 6.77988L1.68676 4.46655C1.42676 4.20655 1.00676 4.20655 0.746758 4.46655C0.486758 4.72655 0.486758 5.14655 0.746758 5.40655L3.53342 8.19322C3.79342 8.45322 4.21342 8.45322 4.47342 8.19322L11.5268 1.13988C11.7868 0.879883 11.7868 0.459883 11.5268 0.199883C11.2668 -0.0601172 10.8468 -0.0601172 10.5868 0.199883L4.00009 6.77988Z' fill='%23F9F7F7'/%3E%3C/svg%3E%0A"); }
548
558
  label.form-check input[type="checkbox"]:checked ~ .check, .form-check input[type="checkbox"]:checked ~ .check {
549
- border: 1px solid var(--accent-color);
550
- background-color: var(--accent-color); }
559
+ border: 2px solid var(--wco-checkbox-default-color-iconchecked);
560
+ background-color: var(--wco-checkbox-default-color-iconchecked); }
551
561
  label.form-check input[type="checkbox"]:checked ~ .check::before, .form-check input[type="checkbox"]:checked ~ .check::before {
552
562
  opacity: 1;
553
563
  background-size: 100%; }
554
564
  label.form-check .label, .form-check .label {
555
- color: var(--wco-color-neutral-900);
565
+ color: var(--wco-checkbox-default-color-label);
556
566
  font-size: var(--wco-font-size-xs);
557
- font-weight: 400; }
567
+ font-family: var(--wco-font-family);
568
+ font-weight: 400;
569
+ letter-spacing: 0.4px; }
558
570
  label.form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check, .form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check {
559
- border: 1px solid var(--accent-color); }
571
+ border: 2px solid var(--wco-checkbox-default-color-iconchecked); }
572
+ label.form-check:hover:has(input[type="checkbox"]:not(:disabled)) .check::after, .form-check:hover:has(input[type="checkbox"]:not(:disabled)) .check::after {
573
+ background-color: var(--wco-checkbox-hover-color-bg);
574
+ content: '';
575
+ position: absolute;
576
+ top: 50%;
577
+ left: 50%;
578
+ transform: translate(-50%, -50%) scale(0);
579
+ width: calc(var(--wco-checkbox-checkbox-size) * 2);
580
+ height: calc(var(--wco-checkbox-checkbox-size) * 2);
581
+ border-radius: 50%;
582
+ z-index: -1;
583
+ transition: transform 300ms ease-in-out;
584
+ animation: introScaleCheckboxWco 300ms ease-in-out forwards; }
585
+ label.form-check:hover:has(input[type="checkbox"]:not(:disabled)) .label, .form-check:hover:has(input[type="checkbox"]:not(:disabled)) .label {
586
+ cursor: pointer; }
587
+
588
+ @keyframes introScaleCheckboxWco {
589
+ 0% {
590
+ transform: translate(-50%, -50%) scale(0); }
591
+ 70% {
592
+ transform: translate(-50%, -50%) scale(1.1); }
593
+ 100% {
594
+ transform: translate(-50%, -50%) scale(1); } }
595
+ label.form-check:has(input[type="checkbox"]:disabled), .form-check:has(input[type="checkbox"]:disabled) {
596
+ opacity: 0.3; }
560
597
  label.form-check input[type="checkbox"]:disabled ~ .check, .form-check input[type="checkbox"]:disabled ~ .check {
561
- --accent-color: var(--wco-color-neutral-600);
562
- background-color: var(--wco-color-neutral-100est); }
598
+ border: 2px solid var(--wco-checkbox-disabled-color-iconchecked);
599
+ background-color: var(--wco-color-neutral-50); }
600
+ label.form-check input[type="checkbox"]:disabled ~ .label, .form-check input[type="checkbox"]:disabled ~ .label {
601
+ color: var(--wco-checkbox-disabled-color-label); }
563
602
  label.form-check input[type="checkbox"]:checked:disabled ~ .check, .form-check input[type="checkbox"]:checked:disabled ~ .check {
564
603
  --accent-color: var(--wco-color-neutral-600);
565
- border: 1px solid var(--wco-color-neutral-600); }
566
- label.form-check input[type="checkbox"]:checked:disabled ~ .check::before, .form-check input[type="checkbox"]:checked:disabled ~ .check::before {
567
- filter: brightness(0.5); }
604
+ border: 2px solid var(--wco-color-neutral-600);
605
+ background-color: var(--wco-checkbox-disabled-color-iconchecked); }
568
606
  label.form-check input[type="checkbox"]:checked:disabled ~ .label, .form-check input[type="checkbox"]:checked:disabled ~ .label {
569
- color: var(--wco-color-neutral-600est); }
607
+ color: var(--wco-checkbox-disabled-color-label); }
608
+ label.form-check.form-field--error, .form-check.form-field--error {
609
+ --wco-checkbox-default-color-label: var(--wco-color-danger-900);
610
+ --wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
611
+ --wco-checkbox-default-color-iconchecked: var(--wco-color-danger-600); }
570
612
 
571
613
  button.btn,
572
614
  a.btn {
package/styles/scss/forms.scss CHANGED
@@ -301,14 +301,34 @@ label.form-radio, .form-radio {
301
301
  /// Checkbox
302
302
  ///////////
303
303
  label.form-check, .form-check {
304
- --accent-color: var(--wco-color-primary-700);
305
- --checkbox-size: 16px;
306
- --checkbox-gap: 8px;
307
- --checkbox-radius: 4px;
304
+ --wco-checkbox-default-color-label: var(--wco-color-neutral-900);
305
+ --wco-checkbox-default-color-iconunchecked: var(--wco-color-neutral-500);
306
+ --wco-checkbox-default-color-iconchecked: var(--wco-color-primary-600);
307
+ // hover
308
+ --wco-checkbox-hover-color-label: var(--wco-color-neutral-900);
309
+ --wco-checkbox-hover-color-iconunchecked: var(--wco-color-primary-700);
310
+ --wco-checkbox-hover-color-iconchecked: var(--wco-color-primary-600);
311
+ --wco-checkbox-hover-color-bg: var(--wco-color-primary-50);
312
+ // disabled
313
+ --wco-checkbox-disabled-color-label: var(--wco-color-neutral-700);
314
+ --wco-checkbox-disabled-color-iconunchecked: var(--wco-color-neutral-700);
315
+ --wco-checkbox-disabled-color-iconchecked: var(--wco-color-neutral-500);
316
+ --wco-checkbox-disabled-color-bg: var(--wco-color-neutral-700);
317
+ // others
318
+ --wco-checkbox-checkbox-size: 18px;
319
+ --wco-checkbox-checkbox-gap: 12px;
320
+ --wco-checkbox-checkbox-radius: 4px;
321
+
322
+
323
+
324
+
308
325
  display: inline-flex;
309
326
  justify-content: center;
310
327
  align-items: center;
311
- gap: var(--checkbox-gap);
328
+ gap: var(--wco-checkbox-checkbox-gap);
329
+
330
+
331
+
312
332
 
313
333
  /// Somente se o label
314
334
  /// for filho direto do input
@@ -316,7 +336,7 @@ label.form-check, .form-check {
316
336
  display: inline-flex;
317
337
  justify-content: center;
318
338
  align-items: center;
319
- gap: var(--checkbox-gap);
339
+ gap: var(--wco-checkbox-checkbox-gap);
320
340
  }
321
341
 
322
342
  input[type="checkbox"] {
@@ -325,12 +345,12 @@ label.form-check, .form-check {
325
345
 
326
346
  /// input não selecionado
327
347
  input[type="checkbox"] ~ .check {
328
- height: var(--checkbox-size);
329
- width: var(--checkbox-size);
348
+ height: var(--wco-checkbox-checkbox-size);
349
+ width: var(--wco-checkbox-checkbox-size);
330
350
  display: inline-flex;
331
351
  position: relative;
332
- border-radius: var(--checkbox-radius);
333
- border: 1px solid var(--wco-color-neutral-500);
352
+ border-radius: var(--wco-checkbox-checkbox-radius);
353
+ border: 2px solid var(--wco-checkbox-default-color-iconunchecked);
334
354
  &::before {
335
355
  content: "";
336
356
  position: absolute;
@@ -344,13 +364,13 @@ label.form-check, .form-check {
344
364
  background-size: 0px;
345
365
  opacity: 0;
346
366
  transition: background-size 100ms linear;
347
- background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00009 6.77988L1.68676 4.46655C1.42676 4.20655 1.00676 4.20655 0.746758 4.46655C0.486758 4.72655 0.486758 5.14655 0.746758 5.40655L3.53342 8.19322C3.79342 8.45322 4.21342 8.45322 4.47342 8.19322L11.5268 1.13988C11.7868 0.879883 11.7868 0.459883 11.5268 0.199883C11.2668 -0.0601172 10.8468 -0.0601172 10.5868 0.199883L4.00009 6.77988Z' fill='%23F9F7F7'/%3E%3C/svg%3E%0A");
367
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 -3 12 15' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00009 6.77988L1.68676 4.46655C1.42676 4.20655 1.00676 4.20655 0.746758 4.46655C0.486758 4.72655 0.486758 5.14655 0.746758 5.40655L3.53342 8.19322C3.79342 8.45322 4.21342 8.45322 4.47342 8.19322L11.5268 1.13988C11.7868 0.879883 11.7868 0.459883 11.5268 0.199883C11.2668 -0.0601172 10.8468 -0.0601172 10.5868 0.199883L4.00009 6.77988Z' fill='%23F9F7F7'/%3E%3C/svg%3E%0A");
348
368
  }
349
369
  }
350
370
  /// input selecionado
351
371
  input[type="checkbox"]:checked ~ .check {
352
- border: 1px solid var(--accent-color);
353
- background-color: var(--accent-color);
372
+ border: 2px solid var(--wco-checkbox-default-color-iconchecked);
373
+ background-color: var(--wco-checkbox-default-color-iconchecked);
354
374
  &::before {
355
375
  opacity: 1;
356
376
  background-size: 100%;
@@ -358,33 +378,79 @@ label.form-check, .form-check {
358
378
  }
359
379
 
360
380
  .label {
361
- color: var(--wco-color-neutral-900);
381
+ color: var(--wco-checkbox-default-color-label);
362
382
  font-size: var(--wco-font-size-xs);
383
+ font-family: var(--wco-font-family);
363
384
  font-weight: 400;
385
+ letter-spacing: 0.4px;
364
386
  }
365
387
 
388
+
366
389
  /// hover
367
390
  &:hover {
368
391
  &:has(input[type="checkbox"]:not(:checked):not(:disabled)) {
369
392
  .check {
370
- border: 1px solid var(--accent-color);
393
+ border: 2px solid var(--wco-checkbox-default-color-iconchecked);
394
+ }
395
+ }
396
+ &:has(input[type="checkbox"]:not(:disabled)) {
397
+ .check {
398
+ &::after {
399
+ background-color: var(--wco-checkbox-hover-color-bg);
400
+ content: '';
401
+ position: absolute;
402
+ top: 50%;
403
+ left: 50%;
404
+ transform: translate(-50%, -50%) scale(0);
405
+ width: calc(var(--wco-checkbox-checkbox-size) * 2);
406
+ height: calc(var(--wco-checkbox-checkbox-size) * 2);
407
+ border-radius: 50%;
408
+ z-index: -1;
409
+ transition: transform 300ms ease-in-out;
410
+ animation: introScaleCheckboxWco 300ms ease-in-out forwards;
411
+ }
412
+ }
413
+ .label {
414
+ cursor: pointer;
371
415
  }
372
416
  }
373
417
  }
418
+ @keyframes introScaleCheckboxWco {
419
+ 0% {
420
+ transform: translate(-50%, -50%) scale(0);
421
+ }
422
+ 70% {
423
+ transform: translate(-50%, -50%) scale(1.1);
424
+ }
425
+ 100% {
426
+ transform: translate(-50%, -50%) scale(1);
427
+ }
428
+ }
429
+
430
+
431
+ &:has(input[type="checkbox"]:disabled) {
432
+ opacity: 0.3;
433
+ }
374
434
 
375
435
  input[type="checkbox"]:disabled ~ .check {
376
- --accent-color: var(--wco-color-neutral-600);
377
- background-color: var(--wco-color-neutral-100est);
436
+ border: 2px solid var(--wco-checkbox-disabled-color-iconchecked);
437
+ background-color: var(--wco-color-neutral-50);
438
+ }
439
+ input[type="checkbox"]:disabled ~ .label {
440
+ color: var(--wco-checkbox-disabled-color-label);
378
441
  }
379
442
  input[type="checkbox"]:checked:disabled ~ .check {
380
443
  --accent-color: var(--wco-color-neutral-600);
381
- border: 1px solid var(--wco-color-neutral-600);
382
- &::before {
383
- filter: brightness(0.5);
384
- }
444
+ border: 2px solid var(--wco-color-neutral-600);
445
+ background-color: var(--wco-checkbox-disabled-color-iconchecked);
385
446
  }
386
447
  input[type="checkbox"]:checked:disabled ~ .label {
387
- color: var(--wco-color-neutral-600est);
448
+ color: var(--wco-checkbox-disabled-color-label);
388
449
  }
450
+ &.form-field--error {
451
+ --wco-checkbox-default-color-label: var(--wco-color-danger-900);
452
+ --wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
453
+ --wco-checkbox-default-color-iconchecked: var(--wco-color-danger-600);
454
+ }
389
455
  }
390
456