@wizco/fenixds-core 1.0.16 → 1.0.20

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 (10) hide show
  1. package/esm2022/lib/styles/styles.component.mjs +4 -4
  2. package/fesm2022/wizco-fenixds-core.mjs +3 -3
  3. package/fesm2022/wizco-fenixds-core.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/styles/core.css +551 -487
  6. package/styles/scss/chips.scss +107 -0
  7. package/styles/scss/core.scss +8 -3
  8. package/styles/scss/forms.scss +7 -3
  9. package/styles/scss/typography.scss +1 -5
  10. package/styles/scss/variables.scss +34 -34
package/styles/scss/chips.scss ADDED
@@ -0,0 +1,107 @@
1
+ .wco-chip {
2
+ --wco-chip-size: 21px;
3
+ --wco-chip-spacing: var(--wco-spacing-none) var(--wco-spacing-nano);
4
+ --wco-chip-gap: var(--wco-spacing-nano, 8px);
5
+ --wco-chip-border-radius: var(--wco-radius-md, 8px);
6
+ --wco-chip-background-color: transparent;
7
+ --wco-chip-color: var(--wco-color-primary-600);
8
+ --wco-chip-font-size: var(--wco-font-size-xxs);
9
+ --wco-chip-line-height: var(--wco-font-lineheight-500);
10
+ --wco-chip-icon-size: var(--wco-icon-size-small);
11
+ --wco-chip-icon-color: var(--wco-color-gray-800);
12
+ font-size: var(--wco-chip-font-size, 14px);
13
+ color: var(--wco-chip-color, #333);
14
+ background-color: var(--wco-chip-background-color, #fff);
15
+ border-radius: var(--wco-chip-border-radius, 4px);
16
+ gap: var(--wco-chip-gap, 4px);
17
+ display: inline-flex;
18
+ align-items: center;
19
+ justify-content: center;
20
+ padding: var(--wco-chip-spacing, 0 4px);
21
+ min-height: var(--wco-chip-size, 24px);
22
+ width: fit-content;
23
+ font-style: normal;
24
+ font-weight: 600;
25
+ text-align: center;
26
+ font-family: var(--wco-font-family);
27
+ line-height: 150%;
28
+ letter-spacing: 0.35px;
29
+ transition: transform 200ms linear, background-color 300ms ease-in-out;
30
+ >span,i {
31
+ font-size: var(--wco-chip-icon-size, 14px);
32
+ }
33
+ // States
34
+ &:not(:disabled),
35
+ &:not(.chip-error),
36
+ &:not(.chip-disabled),
37
+ &:not(.chip-active) {
38
+ &:hover {
39
+ cursor: pointer;
40
+ --wco-chip-background-color: var(--wco-color-primary-50);
41
+ --wco-chip-color: var(--wco-color-primary-700);
42
+ transform: scale(1);
43
+ }
44
+ &:focus {
45
+ transform: scale(0.99) translateY(0.5px);
46
+ box-shadow: var(--wco-shadow-level-0);
47
+ --wco-chip-background-color: var(--wco-color-primary-100);
48
+ --wco-chip-color: var(--wco-color-primary-900);
49
+ }
50
+ }
51
+
52
+ &.chip-disabled,
53
+ &:disabled {
54
+ --wco-chip-background-color: transparent;
55
+ --wco-chip-color: var(--wco-color-neutral-700);
56
+ pointer-events: none;
57
+ opacity: 0.4;
58
+ }
59
+
60
+ &.chip-selected,
61
+ &.chip-active{
62
+ --wco-chip-background-color: var(--wco-color-primary-100);
63
+ --wco-chip-color: var(--wco-color-primary-900);
64
+ &:hover {
65
+ --wco-chip-background-color: var(--wco-color-primary-100);
66
+ --wco-chip-color: var(--wco-color-primary-900);
67
+ }
68
+ &:focus {
69
+ --wco-chip-background-color: var(--wco-color-primary-100);
70
+ --wco-chip-color: var(--wco-color-primary-900);
71
+ }
72
+ }
73
+
74
+ // Variants
75
+ &.chip-outline {
76
+ border: 1px solid var(--wco-chip-color, #333);
77
+ }
78
+
79
+ &.chip-md {
80
+ --wco-chip-spacing: var(--wco-spacing-quark) var(--wco-spacing-xxxs);
81
+ --wco-chip-size: 29px;
82
+ }
83
+
84
+ &.chip-lg {
85
+ --wco-chip-spacing: var(--wco-spacing-nano) var(--wco-spacing-xxs);
86
+ --wco-chip-size: 37px;
87
+ }
88
+
89
+ &.chip-error {
90
+ --wco-chip-background-color: transparent;
91
+ --wco-chip-color: var(--wco-color-danger-700);
92
+ &:hover {
93
+ --wco-chip-background-color: transparent
94
+ --wco-chip-color: var(--wco-color-danger-600);
95
+ }
96
+ &:focus {
97
+ --wco-chip-background-color: transparent;
98
+ --wco-chip-color: var(--wco-color-danger-600);
99
+ }
100
+ }
101
+ }
102
+
103
+ .wco-group-chips {
104
+ display: flex;
105
+ flex-wrap: wrap;
106
+ gap: var(--wco-spacing-nano, 12px);
107
+ }
package/styles/scss/core.scss CHANGED
@@ -4,9 +4,14 @@
4
4
 
5
5
  @import "./variables.scss";
6
6
  @import "./tooltip.scss";
7
- @import "./forms.scss";
8
- @import "./button.scss";
9
- @import "./content-cards.scss";
10
7
  @import "./typography.scss";
8
+
9
+ // Componentes
11
10
  @import "./animations.scss";
11
+ @import "./button.scss";
12
+ @import "./content-cards.scss";
13
+ @import "./forms.scss";
14
+ @import "./chips.scss";
15
+
16
+ // Classes auxiliares
12
17
  @import "./helpers.scss";
package/styles/scss/forms.scss CHANGED
@@ -108,7 +108,7 @@
108
108
  }
109
109
 
110
110
  /// Disabled
111
- &:has(input:disabled, textarea:disabled, select:disabled) {
111
+ &:has(input:disabled, textarea:disabled, select:disabled, .form-field__input.form-field--disabled) {
112
112
  --wco-input-color-label: var(--wco-color-neutral-500, #C3C8CC);
113
113
  --wco-input-color-outline: var(--wco-color-neutral-300, #C3C8CC);
114
114
  --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
@@ -150,7 +150,9 @@
150
150
 
151
151
  select[value=""]:focus+label,
152
152
  textarea:focus+label,
153
- input:focus+label {
153
+ input:focus+label,
154
+ .readonly+label
155
+ {
154
156
  color: var(--wco-input-color-label);
155
157
  top: 0;
156
158
  transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
@@ -158,7 +160,9 @@
158
160
 
159
161
  select:not([value=""]) ~ label,
160
162
  textarea:not(:placeholder-shown)+label,
161
- input:not(:placeholder-shown)+label {
163
+ input:not(:placeholder-shown)+label,
164
+ .readonly+label
165
+ {
162
166
  top: 0;
163
167
  transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
164
168
  font-weight: 500;
package/styles/scss/typography.scss CHANGED
@@ -8,15 +8,11 @@
8
8
  .display-6 {
9
9
  font-family: var(--wco-font-family);
10
10
  line-height: var(--wco-font-lineheight-500);
11
+ color: var(--wco-color-neutral-900);
11
12
  font-weight: var(--wco-font-weight-500);
12
13
  strong, &.bold {
13
14
  font-weight: var(--wco-font-weight-bold);
14
15
  }
15
- &:not([class*="text-neutral-"]),
16
- &:not([class*="text-primary-500"]),
17
- &:not([class*="text-secondary-"]) {
18
- color: var(--wco-color-neutral-900);
19
- }
20
16
  }
21
17
 
22
18
  .display-1 {
package/styles/scss/variables.scss CHANGED
@@ -16,43 +16,43 @@
16
16
  --wco-color-secondary-600: #844597;
17
17
  --wco-color-secondary-700: #633471;
18
18
  --wco-color-secondary-900: #42234b;
19
- --wco-color-neutral-50: #fcfcfc;
19
+ --wco-color-neutral-50: #FCFCFC;
20
20
  --wco-color-neutral-100: #E9EBEC;
21
21
  --wco-color-neutral-300: #C3C8CC;
22
- --wco-color-neutral-500: #8d9399;
23
- --wco-color-neutral-600: #6d747a;
24
- --wco-color-neutral-700: #50555a;
22
+ --wco-color-neutral-500: #8D9399;
23
+ --wco-color-neutral-600: #6D747A;
24
+ --wco-color-neutral-700: #50555A;
25
25
  --wco-color-neutral-900: #080809;
26
- --wco-color-bg: #eeebef;
27
- --wco-color-panel: #fcfcfc;
28
- --wco-color-success-50: #e9f5e9;
29
- --wco-color-success-100: #c0e0c0;
30
- --wco-color-success-300: #8ac88a;
31
- --wco-color-success-500: #5cb85c;
32
- --wco-color-success-600: #4ca74c;
33
- --wco-color-success-700: #3c963c;
34
- --wco-color-success-900: #1e6b1e;
35
- --wco-color-warning-50: #fff8e5;
36
- --wco-color-warning-100: #ffe6b3;
37
- --wco-color-warning-300: #ffc266;
38
- --wco-color-warning-500: #ffb84d;
39
- --wco-color-warning-600: #ffa833;
40
- --wco-color-warning-700: #ff981a;
41
- --wco-color-warning-900: #804d00;
42
- --wco-color-danger-50: #fcedee;
43
- --wco-color-danger-100: #f6cdd0;
44
- --wco-color-danger-300: #ee8f94;
45
- --wco-color-danger-500: #e85f58;
46
- --wco-color-danger-600: #e13f38;
47
- --wco-color-danger-700: #db1f18;
48
- --wco-color-danger-900: #80100a;
49
- --wco-color-info-50: #e5f5ff;
50
- --wco-color-info-100: #b3e0ff;
51
- --wco-color-info-300: #66b8ff;
52
- --wco-color-info-500: #4da6ff;
53
- --wco-color-info-600: #3394ff;
54
- --wco-color-info-700: #1a82ff;
55
- --wco-color-info-900: #004d80;
26
+ --wco-color-bg: #EEEBEF;
27
+ --wco-color-panel: #FCFCFC;
28
+ --wco-color-success-50: #DAFFE2;
29
+ --wco-color-success-100: #A1E5B0;
30
+ --wco-color-success-300: #43BF5E;
31
+ --wco-color-success-500: #008C1F;
32
+ --wco-color-success-600: #007019;
33
+ --wco-color-success-700: #005413;
34
+ --wco-color-success-900: #00380C;
35
+ --wco-color-warning-50: #FEF7EB;
36
+ --wco-color-warning-100: #FCE6C4;
37
+ --wco-color-warning-300: #F8BD63;
38
+ --wco-color-warning-500: #F6AC3C;
39
+ --wco-color-warning-600: #B06D08;
40
+ --wco-color-warning-700: #754905;
41
+ --wco-color-warning-900: #3B2403;
42
+ --wco-color-danger-50: #FEE4E4;
43
+ --wco-color-danger-100: #FC9393;
44
+ --wco-color-danger-300: #F94242;
45
+ --wco-color-danger-500: #E00707;
46
+ --wco-color-danger-600: #9D0505;
47
+ --wco-color-danger-700: #700404;
48
+ --wco-color-danger-900: #430202;
49
+ --wco-color-info-50: #E8F1FB;
50
+ --wco-color-info-100: #BBD5F4;
51
+ --wco-color-info-300: #5F9EE6;
52
+ --wco-color-info-500: #2072D1;
53
+ --wco-color-info-600: #175296;
54
+ --wco-color-info-700: #103A6B;
55
+ --wco-color-info-900: #0A2340;
56
56
  --wco-font-size-xxxs: 12px;
57
57
  --wco-font-size-xxs: 14px;
58
58
  --wco-font-size-xs: 16px;