@wizco/fenixds-core 1.0.5 → 1.0.7

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/package.json +3 -3
  2. package/styles/core.css +16 -6
  3. package/styles/scss/button.scss +5 -2
  4. package/styles/scss/forms.scss +8 -2
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.5",
4
+ "version": "1.0.7",
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
@@ -284,7 +284,7 @@
284
284
  --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
285
285
  --wco-input-color-outline: var(--wco-color-neutral-500, #8d9399);
286
286
  --wco-input-color-icon: var(--wco-color-primary-600, #bf5600);
287
- --wco-input-color-text: var(--wco-color-primary-900, #080809);
287
+ --wco-input-color-text: var(--wco-color-neutral-900, #080809);
288
288
  --wco-input-color-placeholder: var(--wco-color-neutral-600, #6d747a);
289
289
  --wco-input-color-bg: var(--wco-color-neutral-50, #fcfcfc);
290
290
  --wco-input-radius: var(--wco-radius-sm, 4px);
@@ -317,6 +317,7 @@
317
317
  font-size: var(--wco-input-size, 16px);
318
318
  box-shadow: var(--wco-input-shadow);
319
319
  padding: var(--wco-input-padding, 16px);
320
+ font-family: var(--wco-font-family);
320
321
  font-style: normal;
321
322
  font-weight: 400;
322
323
  line-height: 1.375;
@@ -328,7 +329,8 @@
328
329
  .form-field .form-field__input::placeholder,
329
330
  .form-field .form-field__textarea::placeholder,
330
331
  .form-field .form-field__select::placeholder {
331
- color: var(--wco-input-color-placeholder); }
332
+ color: var(--wco-input-color-placeholder);
333
+ font-family: var(--wco-font-family); }
332
334
  .form-field .form-field__input:invalid:not(:placeholder-shown), .form-field .form-field__input.form-field--error:not(:placeholder-shown),
333
335
  .form-field .form-field__textarea:invalid:not(:placeholder-shown),
334
336
  .form-field .form-field__textarea.form-field--error:not(:placeholder-shown),
@@ -356,6 +358,9 @@
356
358
  transform: translateY(-50%);
357
359
  background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93, 118, 137, 0) 44%);
358
360
  color: var(--wco-input-color-label);
361
+ font-family: var(--wco-input-font);
362
+ font-size: var(--wco-input-size);
363
+ font-weight: 400;
359
364
  padding: 0 4px;
360
365
  margin-left: 20px;
361
366
  transition: 100ms linear;
@@ -401,14 +406,15 @@
401
406
  .form-field select[value=""]:focus + label,
402
407
  .form-field textarea:focus + label,
403
408
  .form-field input:focus + label {
404
- color: var(--input-default-color);
409
+ color: var(--wco-input-color-label);
405
410
  top: 0;
406
411
  transform: translateY(-50%) translateX(-10px) scale(0.9) !important; }
407
412
  .form-field select:not([value=""]) ~ label,
408
413
  .form-field textarea:not(:placeholder-shown) + label,
409
414
  .form-field input:not(:placeholder-shown) + label {
410
415
  top: 0;
411
- transform: translateY(-50%) translateX(-10px) scale(0.9) !important; }
416
+ transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
417
+ font-weight: 500; }
412
418
  .form-field textarea:not(:focus)::placeholder,
413
419
  .form-field input:not(:focus)::placeholder {
414
420
  opacity: 0; }
@@ -572,9 +578,12 @@ a.btn {
572
578
  position: relative;
573
579
  border: none;
574
580
  width: fit-content;
575
- letter-spacing: 1.1px;
581
+ letter-spacing: 0.4px;
576
582
  transition: all 300ms ease-in-out, outline 0ms linear;
577
- cursor: pointer; }
583
+ font-weight: 600;
584
+ cursor: pointer;
585
+ text-decoration: none;
586
+ font-family: var(--wco-font-family); }
578
587
  button.btn:focus-visible,
579
588
  a.btn:focus-visible {
580
589
  outline: 2px solid var(--btn-focus, var(--textBtn)); }
@@ -718,6 +727,7 @@ a.btn {
718
727
  button.btn.btn-sm,
719
728
  a.btn.btn-sm {
720
729
  --btn-min-h: 32px;
730
+ --btn-size: 14px;
721
731
  --btn-padding: 4px 16px; }
722
732
  button.btn.btn-outline,
723
733
  a.btn.btn-outline {
package/styles/scss/button.scss CHANGED
@@ -12,10 +12,12 @@ 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
+ font-weight: 600;
17
18
  cursor: pointer;
18
-
19
+ text-decoration: none;
20
+ font-family: var(--wco-font-family);
19
21
  // &:focus-within:not(:active),
20
22
  &:focus-visible {
21
23
  outline: 2px solid var(--btn-focus, var(--textBtn));
@@ -195,6 +197,7 @@ a.btn {
195
197
 
196
198
  &.btn-sm {
197
199
  --btn-min-h: 32px;
200
+ --btn-size: 14px;
198
201
  --btn-padding: 4px 16px;
199
202
  }
200
203
 
package/styles/scss/forms.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
3
3
  --wco-input-color-outline: var(--wco-color-neutral-500, #8d9399);
4
4
  --wco-input-color-icon: var(--wco-color-primary-600, #bf5600);
5
- --wco-input-color-text: var(--wco-color-primary-900, #080809);
5
+ --wco-input-color-text: var(--wco-color-neutral-900, #080809);
6
6
  --wco-input-color-placeholder: var(--wco-color-neutral-600, #6d747a);
7
7
  --wco-input-color-bg: var(--wco-color-neutral-50, #fcfcfc);
8
8
  --wco-input-radius: var(--wco-radius-sm, 4px);
@@ -41,6 +41,7 @@
41
41
  font-size: var(--wco-input-size, 16px);
42
42
  box-shadow: var(--wco-input-shadow);
43
43
  padding: var(--wco-input-padding, 16px);
44
+ font-family: var(--wco-font-family);
44
45
  font-style: normal;
45
46
  font-weight: 400;
46
47
  line-height: 1.375;
@@ -51,6 +52,7 @@
51
52
  background-color: var(--wco-input-color-bg);
52
53
  &::placeholder {
53
54
  color: var(--wco-input-color-placeholder);
55
+ font-family: var(--wco-font-family);
54
56
  }
55
57
  // native effects
56
58
  &:invalid:not(:placeholder-shown), &.form-field--error:not(:placeholder-shown) {
@@ -79,6 +81,9 @@
79
81
  transform: translateY(-50%);
80
82
  background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93,118,137,0) 44%);
81
83
  color: var(--wco-input-color-label);
84
+ font-family: var(--wco-input-font);
85
+ font-size: var(--wco-input-size);
86
+ font-weight: 400;
82
87
  padding: 0 4px;
83
88
  margin-left: 20px;
84
89
  transition: 100ms linear;
@@ -146,7 +151,7 @@
146
151
  select[value=""]:focus+label,
147
152
  textarea:focus+label,
148
153
  input:focus+label {
149
- color: var(--input-default-color);
154
+ color: var(--wco-input-color-label);
150
155
  top: 0;
151
156
  transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
152
157
  }
@@ -156,6 +161,7 @@
156
161
  input:not(:placeholder-shown)+label {
157
162
  top: 0;
158
163
  transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
164
+ font-weight: 500;
159
165
  }
160
166
 
161
167
  textarea:not(:focus)::placeholder,