feat(components): reduz tamanhos de fonte

fixes DTHFUI-12051

Author: anabye

docs/guides/theme-service.md

@@ -200,11 +200,12 @@ export const corporateTheme: PoTheme = {
         onRoot: {
           '--font-family': "'Inter', sans-serif",
           '--border-radius': '6px',
-          '--po-density-header-padding': '2rem'; /* Padding em headers (inclui pages, page slide, modal, widget) */
-          '--po-density-content-padding': '1rem'; /* Padding em contents (inclui pages, container, list view, page slide, widget, stepper, disclaimer-group) */
+          '--po-density-header-padding': '2rem'; /* Padding em headers (inclui pages, page slide e modal) */
+          '--po-density-content-padding': '1rem'; /* Padding em contents (inclui pages, container, list view, page slide, modal, stepper, disclaimer-group) */
           '--po-density-footer-padding': '1rem'; /* Padding em footers (inclui modal e page slide) */
           '--po-density-gap-header-content': '1rem'; /* Espaço interno entre o header e o content (inclui pages, tabs e stepper) */
           '--po-density-gap-spacing': '1rem'; /* Espaço interno entre blocos de conteúdo presentes no header e content (inclui dividers e gaps) */
+          '--po-density-floating-padding': '0.5rem'; /* Padding interno de componentes flutuantes como tooltip e popover */ 
         },
         perComponent: {
           'po-button': {
@@ -277,11 +278,12 @@ setAcessibilidade(nivel: PoThemeA11yEnum) {
 /* styles.scss */
 :root .override-theme {
   --color-brand-01-base: #FF0000;
-  --po-density-header-padding: 2rem; /* Padding em headers (inclui pages, page slide, modal, widget) */
-  --po-density-content-padding: 1rem; /* Padding em contents (inclui pages, container, list view, page slide, widget, stepper, disclaimer-group) */
-  --po-density-footer-padding: 1rem; /* Padding em footers (inclui modal e page slide) */
+  --po-density-header-padding: 2rem; /* Padding interno em headers (inclui pages, dynamics, page slide e modal) */
+  --po-density-content-padding: 1rem; /* Padding interno em contents (inclui pages, dynamics, container, list view, page slide, modal, stepper e disclaimer-group) */
+  --po-density-footer-padding: 1rem; /* Padding interno em footers (inclui modal e page slide) */
   --po-density-gap-header-content: 1rem; /* Espaço interno entre o header e o content (inclui pages, tabs e stepper) */
   --po-density-gap-spacing: 1rem; /* Espaço interno entre blocos de conteúdo presentes no header e content (inclui dividers e gaps) */
+  --po-density-floating-padding: 0.5rem; /* Padding interno de componentes flutuantes como tooltip e popover */ 
 }
 ```
 

projects/portal/src/app/tools/tools-dynamic-form/tools-dynamic-form.component.css

@@ -7,3 +7,8 @@
   background-color: #060402c7;
   color: #f7f6f5;
 }
+
+po-button {
+  margin-top: auto;
+  padding-bottom: var(--spacing-xs);
+}

projects/portal/src/app/tools/tools-dynamic-form/tools-dynamic-form.component.html

@@ -15,13 +15,7 @@
             >
             </po-input>
 
-            <button
-              class="po-button po-button-primary po-sm-4 po-md-2 po-mt-4 po-mb-1"
-              type="submit"
-              [disabled]="generatorForm.invalid"
-            >
-              Adicionar
-            </button>
+            <po-button [p-disabled]="generatorForm.invalid" p-label="Adicionar" [p-type]="buttonAddType"></po-button>
           </div>
 
           <div class="po-row">

projects/portal/src/app/tools/tools-dynamic-form/tools-dynamic-form.component.ts

@@ -11,6 +11,7 @@ import {
   PoTableColumn,
   PoToasterOrientation
 } from '@po-ui/ng-components';
+import { PoButtonType } from 'projects/ui/src/lib';
 
 @Component({
   selector: 'app-tools-dynamic-form',
@@ -39,6 +40,8 @@ export class ToolsDynamicFormComponent {
   quickField = <any>{};
   editFieldId;
 
+  buttonAddType: PoButtonType = PoButtonType.Submit;
+
   readonly columns: Array<PoTableColumn> = [
     { property: 'property' },
     { property: 'type' },

projects/portal/src/styles.css

@@ -10,7 +10,7 @@
 
 body {
   background-color: #fafbfb;
-  color: #333;
+  color: var(--color-neutral-dark-90);
 }
 
 html.potheme-dark-AA #logo-totvs,
@@ -255,7 +255,7 @@ pre code {
 }
 
 .docs-sample-container {
-  background: var(--color-neutral-light-00);
+  background: var(--color-neutral-light-05);
   box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.2);
@@ -633,7 +633,7 @@ blockquote {
 }
 
 .app-portal-home .po-page .po-page-content {
-  padding: 0;
+  padding: 0 0 4.5rem;
 }
 
 .guides-grid-system-box {

projects/templates/src/lib/components/po-modal-password-recovery/po-modal-password-recovery-error-message/po-modal-password-recovery-error-message.component.html

@@ -1,4 +1,4 @@
 <div class="po-field-container-bottom-text-error po-field-container-error-item">
   <po-icon p-icon="ICON_EXCLAMATION"></po-icon>
-  <span class="po-field-container-error-text">{{ text }}</span>
+  <span class="po-field-error-message">{{ text }}</span>
 </div>

projects/templates/src/lib/components/po-modal-password-recovery/po-modal-password-recovery.component.spec.ts

@@ -1058,7 +1058,7 @@ describe('PoModalPasswordRecoveryComponent:', () => {
       expect(expectedContent.innerHTML).not.toContain(component.emailModalPhrases.firstPhrase);
     });
 
-    it('should contain `po-field-container-error-text` class if `invalidEmail` and control are true', () => {
+    it('should contain `po-field-error-message` class if `invalidEmail` and control are true', () => {
       component.control = <any>{
         dirty: true
       };
@@ -1067,10 +1067,10 @@ describe('PoModalPasswordRecoveryComponent:', () => {
       component.recoveryModalElement.open();
       fixture.detectChanges();
 
-      expect(debugElement.querySelector('.po-field-container-error-text')).toBeTruthy();
+      expect(debugElement.querySelector('.po-field-error-message')).toBeTruthy();
     });
 
-    it('shouldn`t contain `po-field-container-error-text` class if `invalidEmail` is false', () => {
+    it('shouldn`t contain `po-field-error-message` class if `invalidEmail` is false', () => {
       component.control = <any>{
         dirty: true
       };
@@ -1079,29 +1079,29 @@ describe('PoModalPasswordRecoveryComponent:', () => {
       component.recoveryModalElement.open();
       fixture.detectChanges();
 
-      expect(debugElement.querySelector('.po-field-container-error-text')).toBeFalsy();
+      expect(debugElement.querySelector('.po-field-error-message')).toBeFalsy();
     });
 
-    it('shouldn`t contain `po-field-container-error-text` class if `showCustomCodeError` is false', () => {
+    it('shouldn`t contain `po-field-error-message` class if `showCustomCodeError` is false', () => {
       component.modalType = PoModalPasswordRecoveryModalContent.SMSCode;
       component.type = PoModalPasswordRecoveryType.Email;
       component.showCustomCodeError = false;
 
       component.recoveryModalElement.open();
       fixture.detectChanges();
 
-      expect(debugElement.querySelector('.po-field-container-error-text')).toBeFalsy();
+      expect(debugElement.querySelector('.po-field-error-message')).toBeFalsy();
     });
 
-    it('should contain `po-field-container-error-text` class if `showCustomCodeError` is true', () => {
+    it('should contain `po-field-error-message` class if `showCustomCodeError` is true', () => {
       component.modalType = PoModalPasswordRecoveryModalContent.SMSCode;
       component.type = PoModalPasswordRecoveryType.Email;
       component.showCustomCodeError = true;
 
       component.recoveryModalElement.open();
       fixture.detectChanges();
 
-      expect(debugElement.querySelector('.po-field-container-error-text')).toBeTruthy();
+      expect(debugElement.querySelector('.po-field-error-message')).toBeTruthy();
     });
   });
 });

projects/templates/src/lib/components/po-page-dynamic-detail/po-page-dynamic-detail.component.html

@@ -5,9 +5,9 @@
   [p-title]="title"
 >
   @if (model) {
-    <po-dynamic-view [p-fields]="fields" [p-value]="model"> </po-dynamic-view>
+    <po-dynamic-view [p-components-size]="componentsSize" [p-fields]="fields" [p-value]="model"> </po-dynamic-view>
   } @else {
-    <po-widget>
+    <po-widget [p-size]="componentsSize">
       <po-icon p-icon="ICON_INFO"></po-icon>
       <span class="po-font-text-large">
         {{ literals.registerNotFound }}

projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.html

@@ -27,7 +27,7 @@
       </div>
     }
   } @else {
-    <po-widget>
+    <po-widget [p-size]="componentsSize">
       <po-icon p-icon="ICON_INFO"></po-icon>
       <span class="po-font-text-large">
         {{ literals.registerNotFound }}

projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/po-page-job-scheduler-summary.component.html

@@ -1,26 +1,62 @@
 <div class="po-md-12">
   @if (!noParameters) {
-    <po-info [p-label]="literals.process" [p-orientation]="infoOrientation" [p-value]="value.processID"> </po-info>
+    <po-info
+      [p-label]="literals.process"
+      [p-orientation]="infoOrientation"
+      [p-size]="componentsSize"
+      [p-value]="value.processID"
+    >
+    </po-info>
   }
 
-  <po-info [p-label]="literals.periodicity" [p-orientation]="infoOrientation" [p-value]="periodicityValue"> </po-info>
+  <po-info
+    [p-label]="literals.periodicity"
+    [p-orientation]="infoOrientation"
+    [p-size]="componentsSize"
+    [p-value]="periodicityValue"
+  >
+  </po-info>
 
   @if (frequencyValue !== '') {
-    <po-info [p-label]="literals.frequency" [p-orientation]="infoOrientation" [p-value]="frequencyValue"> </po-info>
+    <po-info
+      [p-label]="literals.frequency"
+      [p-orientation]="infoOrientation"
+      [p-size]="componentsSize"
+      [p-value]="frequencyValue"
+    >
+    </po-info>
   }
 
   @if (value.periodicity !== 'single') {
-    <po-info [p-label]="literals.execution" [p-orientation]="infoOrientation" [p-value]="executionValue"> </po-info>
+    <po-info
+      [p-label]="literals.execution"
+      [p-orientation]="infoOrientation"
+      [p-size]="componentsSize"
+      [p-value]="executionValue"
+    >
+    </po-info>
   }
 
-  <po-info [p-label]="literals.recurrent" [p-orientation]="infoOrientation" [p-value]="recurrentValue"> </po-info>
+  <po-info
+    [p-label]="literals.recurrent"
+    [p-orientation]="infoOrientation"
+    [p-size]="componentsSize"
+    [p-value]="recurrentValue"
+  >
+  </po-info>
 
-  <po-info [p-label]="literals.firstExecution" [p-orientation]="infoOrientation" [p-value]="firstExecutionValue">
+  <po-info
+    [p-label]="literals.firstExecution"
+    [p-orientation]="infoOrientation"
+    [p-size]="componentsSize"
+    [p-value]="firstExecutionValue"
+  >
   </po-info>
 </div>
 @if (parameters && parameters.length && !jobSchedulerSummaryTemplate) {
-  <po-widget class="po-pt-1 po-pb-1 po-md-12" [p-title]="literals.parameters">
-    <po-dynamic-view [p-fields]="parameters" [p-value]="value.executionParameter"> </po-dynamic-view>
+  <po-widget class="po-pt-1 po-pb-1 po-md-12" [p-size]="componentsSize" [p-title]="literals.parameters">
+    <po-dynamic-view [p-components-size]="componentsSize" [p-fields]="parameters" [p-value]="value.executionParameter">
+    </po-dynamic-view>
   </po-widget>
 }
 @if (jobSchedulerSummaryTemplate) {