ngx-vector-components 5.173.0 → 6.0.0

package/assets/styles/_spinner.scss

@@ -1,35 +1,36 @@
-p-progressSpinner .p-progress-spinner-circle {
-  animation: custom-progress-spinner 1.5s ease-in-out infinite, custom-progress-spinner-color 6s ease-in-out infinite !important;
-}
-
-@keyframes custom-progress-spinner-color {
-  100%,
-  0% {
-    stroke: var(--theme-primary);
-  }
-  40% {
-    stroke: var(--theme-primary);
-  }
-  66% {
-    stroke: var(--theme-primary);
-  }
-  80%,
-  90% {
-    stroke: var(--theme-primary);
-  }
-}
-
-@keyframes custom-progress-spinner {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -35px;
-  }
-  100% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -124px;
-  }
-}
+p-progressSpinner .p-progress-spinner-circle,
+p-progressSpinner .p-progressspinner-circle {
+  animation: custom-progress-spinner 1.5s ease-in-out infinite, custom-progress-spinner-color 6s ease-in-out infinite !important;
+}
+
+@keyframes custom-progress-spinner-color {
+  100%,
+  0% {
+    stroke: var(--theme-primary);
+  }
+  40% {
+    stroke: var(--theme-primary);
+  }
+  66% {
+    stroke: var(--theme-primary);
+  }
+  80%,
+  90% {
+    stroke: var(--theme-primary);
+  }
+}
+
+@keyframes custom-progress-spinner {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}

package/assets/styles/_styles.scss

@@ -1,115 +1,134 @@
-@import './fonts';
-@import './primeng-custom-theme';
-@import './spinner';
-@import './variables';
-@import './mixins';
-
-body {
-  margin: 0px;
-  height: 100vh;
-  background-color: var(--background);
-}
-
-body,
-body .p-component {
-  color: var(--font-color);
-  font-size: 14px;
-  font-family: Poppins;
-}
-
-i {
-  font-size: 13px;
-  color: var(--font-color);
-}
-
-@media screen and (max-width: 640px) {
-  body {
-    font-size: 13px;
-  }
-
-  i {
-    font-size: 15px;
-  }
-}
-
-a {
-  color: var(--theme-dark);
-  font-weight: 600;
-  cursor: pointer;
-  text-decoration: none;
-
-  &:hover,
-  &:visited {
-    color: var(--theme-dark);
-  }
-}
-
-.card {
-  background-color: #ffffff;
-  background: #ffffff 0% 0% no-repeat padding-box;
-  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06);
-  border-radius: 24px;
-  padding: 15px 20px 15px 20px;
-  overflow: hidden;
-}
-
-ul {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
-  border-radius: 7px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--gray-light);
-  border-radius: 7px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #aaaaaa6e;
-  border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #aaa;
-}
-
-.field {
-  margin-bottom: 0px !important;
-}
-
-.form-field {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  min-height: 85px;
-}
-
-.field-centered {
-  justify-content: center;
-}
-
-.checkbox-centered {
-  padding-bottom: 17px !important;
-}
-
-.form-container {
-  color: var(--form-labels-color);
-}
-
-.dump-field {
-  @media (max-width: 992px) {
-    display: none;
-  }
-}
-
-label {
-  font-weight: 500;
-  font-size: 1em;
-  color: var(--theme-dark);
-}
+@import './fonts';
+@import './primeng-custom-theme';
+@import './spinner';
+@import './variables';
+@import './mixins';
+
+body {
+  margin: 0px;
+  height: 100vh;
+  background-color: var(--background);
+}
+
+body,
+body .p-component {
+  color: var(--font-color);
+  font-size: 14px;
+}
+
+/* Poppins em tudo (fallback Inter) — inclui elementos de form, que nao herdam
+   font-family, e os componentes do PrimeNG 18 */
+html,
+body,
+input,
+button,
+textarea,
+select,
+.p-component {
+  font-family: 'Poppins', 'Inter', sans-serif;
+}
+
+:root {
+  --p-font-family: 'Poppins', 'Inter', sans-serif;
+}
+
+.grid {
+  margin-top: 0 !important;
+}
+
+i {
+  font-size: 13px;
+  color: var(--font-color);
+}
+
+@media screen and (max-width: 640px) {
+  body {
+    font-size: 13px;
+  }
+
+  i {
+    font-size: 15px;
+  }
+}
+
+a {
+  color: var(--theme-dark);
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover,
+  &:visited {
+    color: var(--theme-dark);
+  }
+}
+
+.card {
+  background-color: #ffffff;
+  background: #ffffff 0% 0% no-repeat padding-box;
+  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 24px;
+  padding: 15px 20px 15px 20px;
+  overflow: hidden;
+}
+
+ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+  border-radius: 7px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--gray-light);
+  border-radius: 7px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #aaaaaa6e;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #aaa;
+}
+
+.field {
+  margin-bottom: 0px !important;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-height: 85px;
+}
+
+.field-centered {
+  justify-content: center;
+}
+
+.checkbox-centered {
+  padding-bottom: 17px !important;
+}
+
+.form-container {
+  color: var(--form-labels-color);
+}
+
+.dump-field {
+  @media (max-width: 992px) {
+    display: none;
+  }
+}
+
+label {
+  font-weight: 500;
+  font-size: 1em;
+  color: var(--theme-dark);
+}

package/assets/styles/_variables.scss

@@ -1,27 +1,61 @@
-:root {
-  --theme-primary: #0046e8;
-  --theme-medium: #0041AC;
-  --theme-dark: #3a2b68;
-  --background: #f2f2f7;
-  --font-color: #151515;
-  --disabled-background: #bcbcbc;
-  --placeholder-color: #aaaaaa80;
-  --border-radius: 5px;
-  --theme-primary-transparent: rgba(1, 70, 108, 0.8);
-  --gray-lighter: #eff0f6;
-  --gray-light: #e5e5ea;
-  --gray-medium: #d9dbe9;
-  --gray-dark: #6e7f88;
-  --gray-darker: #6e7191;
-  --error-color: #fd6a6a;
-  --error-color-dark: #ff4136;
-  --error-color-transparent: #fd6a6a1a;
-  --success-color: #11b797;
-  --success-color-dark: #0e8a71;
-  --theme-light: #0145e8;
-  --warning-color: #e9c429;
-  --cancel-color: #ca024f;
-  --form-labels-color: #4e4b66;
-  --font-color-primary: #3a2b68;
-  --font-color-secondary: rgb(87, 87, 87);
-}
+:root {
+  --theme-primary: #0046e8;
+  --theme-medium: #0041ac;
+  --theme-dark: #3a2b68;
+  --background: #f2f2f7;
+  --font-color: #151515;
+  --disabled-background: #bcbcbc;
+  --placeholder-color: #aaaaaa80;
+  --border-radius: 5px;
+  --theme-primary-transparent: rgba(1, 70, 108, 0.8);
+  --gray-lighter: #eff0f6;
+  --gray-light: #e5e5ea;
+  --gray-medium: #d9dbe9;
+  --gray-dark: #6e7f88;
+  --gray-darker: #6e7191;
+  --error-color: #fd6a6a;
+  --error-color-dark: #ff4136;
+  --error-color-transparent: #fd6a6a1a;
+  --success-color: #11b797;
+  --success-color-dark: #0e8a71;
+  --theme-light: #0145e8;
+  --warning-color: #e9c429;
+  --cancel-color: #ca024f;
+  --form-labels-color: #4e4b66;
+  --font-color-primary: #3a2b68;
+  --font-color-secondary: rgb(87, 87, 87);
+
+  /* Design System — brand */
+  --brand-light: #e7ecfd; /* fundo do Segment Control */
+  --brand-blue: #1545de; /* azul-claro do design system (texto/borda ativos) */
+}
+
+:root {
+  /* superficies */
+  --surface-ground: #f2f2f7;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-hover: #e9ecef;
+  --surface-border: #dee2e6;
+
+  --surface-0: #ffffff;
+  --surface-50: #fafafa;
+  --surface-100: #f5f5f5;
+  --surface-200: #eeeeee;
+  --surface-300: #e0e0e0;
+  --surface-400: #bdbdbd;
+  --surface-500: #9e9e9e;
+  --surface-600: #757575;
+  --surface-700: #616161;
+  --surface-800: #424242;
+  --surface-900: #212121;
+
+  /* texto */
+  --text-color: var(--font-color);
+  --text-color-secondary: var(--gray-darker);
+
+  /* cor primaria */
+  --primary-color: var(--theme-primary);
+  --primary-color-text: #ffffff;
+}