feat(smart): realiza alterações visuais

realiza alterações visuais para o smart-ui

fixes DTHFUI-8117

src/css/components/po-accordion/po-accordion-item-header.css

@@ -73,6 +73,10 @@
   z-index: 1;
 }
 
+.po-accordion-item-header-button:focus-visible {
+  outline-width: var(--outline-width-focus-visible);
+}
+
 .po-accordion-item-header-button:focus .po-accordion-item-header-icon {
   color: var(--color-focus);
 }

src/css/components/po-accordion/po-accordion-manager.css

@@ -42,11 +42,15 @@
   outline-color: var(--outline-color-focused);
   outline-width: var(--outline-width);
   outline-style: solid;
-  outline-offset: 2px;
+  outline-offset: var(--outline-width);
 
   z-index: 1;
 }
 
+.po-accordion-manager-button:focus-visible {
+  outline-width: var(--outline-width-focus-visible);
+}
+
 /* remove a borda interna nativa do botão no firefox */
 .po-accordion-manager-button::-moz-focus-inner {
   border: 0;

src/css/components/po-breadcrumb/po-breadcrumb.css

@@ -50,6 +50,10 @@
   outline-offset: 2px;
 }
 
+.po-breadcrumb-favorite:focus-visible {
+  outline-width: var(--outline-width-focus-visible);
+}
+
 .po-breadcrumb-favorite-star-active {
   color: var(--color-warning);
   position: relative;
@@ -59,7 +63,7 @@
 .po-breadcrumb-favorite {
   color: var(--color-action-default);
   font-family: var(--font-family-theme);
-  font-weight: 700;
+  font-weight: var(--font-weight);
 }
 
 .po-breadcrumb-favorite-label {
@@ -80,6 +84,15 @@
   outline-offset: 2px;
 }
 
+.po-breadcrumb-item-activate:focus-visible,
+.po-breadcrumb-icon-more:focus-visible {
+  outline-color: var(--color-brand-01-darkest);
+
+  outline-width: var(--outline-width-focus-visible);
+  outline-style: solid;
+  outline-offset: 2px;
+}
+
 .po-breadcrumb-items po-link {
   white-space: nowrap;
 }

src/css/components/po-button-group/po-button-group.css

@@ -27,7 +27,7 @@
 }
 
 .po-button-group-container .po-button-group + .po-button-group {
-  margin-left: -2px;
+  margin-left: var(--button-group-container-margin);
 }
 
 .po-button-group-container .po-button-group:not(.po-button-group-disabled) {

src/css/components/po-button/po-button.css

@@ -51,6 +51,11 @@ po-button {
   outline-offset: 2px;
 }
 
+.po-button:focus-visible,
+.po-button:enabled:focus-visible {
+  outline-width: var(--outline-width-focus-visible);
+}
+
 .po-button[p-kind='secondary'] {
   color: var(--color);
   border-color: var(--color);

src/css/components/po-calendar/po-calendar.css

@@ -81,7 +81,9 @@
 }
 
 .po-calendar-header .po-calendar-header-title {
-  @apply --font-calendar-title;
+  font-family: var(--font-family-default-bold), sans-serif;
+  font-size: 16px;
+  line-height: 24px;
   color: var(--color-calendar-title);
   margin-top: 16px;
   text-align: center;
@@ -294,10 +296,12 @@
 }
 
 .po-calendar-footer .po-calendar-footer-today .po-calendar-footer-today-button {
-  @apply --font-calendar-button;
+  font-family: var(--font-family-default-bold), sans-serif;
+  font-size: 16px;
+  line-height: 24px;
   background: transparent;
   border: none;
-  color: var(--color-primary);
+  color: var(--color-brand-02-base);
   cursor: pointer;
   text-decoration: underline;
   text-align: center;

src/css/components/po-disclaimer-group/po-disclaimer-group.css

@@ -13,7 +13,9 @@
 }
 
 .po-disclaimer-group-title {
-  @apply --font-disclaimer-font-title;
+  font-family: var(--font-family-default-bold), sans-serif;
+  font-size: var(--font-size-default-normal);
+  line-height: 24px;
   color: var(--color-disclaimer-group-font-title);
   padding-bottom: 8px;
 }

src/css/components/po-disclaimer/po-disclaimer.css

@@ -60,13 +60,16 @@
   color: var(--text-color);
 }
 
-.po-disclaimer-remove:active,
-.po-disclaimer-remove:focus-visible {
+.po-disclaimer-remove:active {
   outline-color: var(--outline-color-focused);
   outline-style: solid;
   outline-width: var(--outline-width);
 }
 
+.po-disclaimer-remove:focus-visible {
+  outline-width: var(--outline-width-focus-visible);
+}
+
 .po-disclaimer-remove:hover {
   background-color: var(--color-hover);
 }

src/css/components/po-field/po-checkbox/po-checkbox.css

@@ -34,14 +34,18 @@
   outline: none;
 }
 
-.po-checkbox-outline:is(:focus, :focus-visible) {
+.po-checkbox-outline:is(:focus) {
   outline-color: var(--color-checkbox-box-shadow-color-focusable, var(--outline-color-focused));
 
   outline-width: var(--outline-width);
   outline-style: solid;
   outline-offset: 2px;
 }
 
+.po-checkbox-outline:is(:focus-visible) {
+  outline-width: var(--outline-width-focus-visible);
+}
+
 .po-checkbox-outline {
   display: flex;
   align-items: center;
@@ -100,6 +104,15 @@
   color: var(--color-checkbox-background-color, var(--color-unchecked));
 }
 
+.po-checkbox-label > label.po-label:not(.po-label-disabled) {
+  color: var(--color-brand-01-darker);
+  cursor: pointer;
+}
+
+.po-checkbox-label > label.po-label:not(.po-label-disabled):hover {
+  color: var(--color-brand-01-darkest);
+}
+
 po-checkbox.ng-invalid.ng-dirty .po-checkbox-input + .po-checkbox-label:before {
   border: solid 1px var(--color-checkbox-border-input-invalid, var(--color-feedback-negative-base));
 }

src/css/components/po-field/po-combo/po-combo.css

@@ -20,15 +20,18 @@
   cursor: not-allowed;
 }
 
-.po-combo-input:focus,
-.po-combo-input-focus {
+.po-combo-input:focus {
   border-color: var(--color-focused);
   outline-color: var(--outline-color-focused);
   outline-width: var(--outline-width);
   outline-style: solid;
   outline-offset: 2px;
 }
 
+.po-combo-input:focus-visible {
+  outline-width: var(--outline-width-focus-visible);
+}
+
 .po-combo-input:focus:hover,
 .po-combo-input-focus:hover,
 .po-combo-input:hover:not(:disabled) {
@@ -112,6 +115,10 @@
   z-index: 1;
 }
 
+.po-combo-clean:focus-visible {
+  outline-width: var(--outline-width-focus-visible);
+}
+
 .po-combo-clean:focus .po-icon.po-field-icon.po-icon-clear-content,
 .po-combo-clean:focus .po-icon.po-field-icon.po-icon-clear-content:hover {
   border-color: var(--color);

src/css/components/po-field/po-input/po-input.css

@@ -40,6 +40,10 @@
   outline-offset: 2px;
 }
 
+.po-input:focus-visible {
+  outline-width: var(--outline-width-focus-visible);
+}
+
 .po-input:read-only:not(div, :disabled) {
   border-color: var(--color-neutral-light-30);
   background-color: var(--color-neutral-light-05);

src/css/components/po-field/po-multiselect/po-multiselect.css

@@ -26,6 +26,10 @@
 }
 
 .po-multiselect-input .po-field-icon-container-right .po-icon-input {
+  color: var(--color-icon);
+}
+
+.po-multiselect-input-disabled .po-field-icon-container-right .po-icon-input {
   color: var(--color);
 }
 
@@ -40,6 +44,10 @@
   outline-offset: 2px;
 }
 
+.po-multiselect-input:focus-visible:not(.po-multiselect-input-disabled) {
+  outline-width: var(--outline-width-focus-visible);
+}
+
 .po-multiselect-input:focus .po-field-icon-container-right .po-icon-input {
   color: var(--color-focused);
 }

src/css/components/po-field/po-radio/po-radio.css

@@ -47,7 +47,7 @@ po-radio {
 .po-radio-focus > label {
   outline-color: var(--outline-color-focused);
 
-  outline-width: var(--outline-width);
+  outline-width: var(--outline-width-focus-visible);
   outline-style: solid;
   outline-offset: 2px;
 }
@@ -118,3 +118,15 @@ po-radio {
 .po-radio input[type='radio']:not([disabled]):focus-visible {
   outline: none;
 }
+
+.po-radio label:not(.po-label-disabled) {
+  color: var(--color-brand-01-darker);
+}
+
+.po-radio label:not(.po-label-disabled):hover {
+  color: var(--color-brand-01-darkest);
+}
+
+.po-radio label.po-label-disabled {
+  cursor: not-allowed;
+}

src/css/components/po-field/po-rich-text/po-rich-text-toolbar/po-rich-text-toolbar.css

@@ -58,6 +58,10 @@
   width: 44px;
 }
 
+.po-button-default.po-rich-text-toolbar-color-picker-button {
+  border: none;
+}
+
 .po-rich-text-toolbar-color-picker-container {
   display: flex;
 }
@@ -71,7 +75,6 @@
   background-color: transparent;
   border: none;
   height: 100%;
-  padding: 10%;
   vertical-align: middle;
   width: 100%;
 }

src/css/components/po-field/po-select/po-select.css

@@ -42,6 +42,10 @@ select:focus {
   outline-offset: 2px;
 }
 
+select:focus-visible {
+  outline-width: var(--outline-width-focus-visible);
+}
+
 select:disabled {
   border-color: var(--color-disabled);
   background-color: var(--background-disabled);

src/css/components/po-field/po-switch/po-switch.css

@@ -18,7 +18,7 @@
 .po-switch-container:focus-visible {
   outline-color: var(--outline-color-focused);
 
-  outline-width: var(--outline-width);
+  outline-width: var(--outline-width-focus-visible);
   outline-style: solid;
   outline-offset: 2px;
 }
@@ -60,6 +60,16 @@
   color: var(--color-unchecked);
 }
 
+.po-switch-label > label.po-label:not(.po-label-disabled) {
+  color: var(--color-brand-01-darker);
+  cursor: pointer;
+}
+
+.po-switch-label > label.po-label:not(.po-label-disabled):hover {
+  color: var(--color-brand-01-darkest);
+  cursor: pointer;
+}
+
 [aria-checked='true'] .po-switch-toggle {
   background-color: var(--color-checked);
   border-color: transparent;

src/css/components/po-field/po-textarea/po-textarea.css

@@ -29,7 +29,7 @@
   border-color: var(--color-focused);
   outline-color: var(--outline-color-focused);
 
-  outline-width: var(--outline-width);
+  outline-width: var(--outline-width-focus-visible);
   outline-style: solid;
   outline-offset: 2px;
 }

src/css/components/po-link/po-link.css

@@ -2,7 +2,7 @@
   color: var(--text-color);
   font-family: var(--font-family);
   font-size: inherit;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight);
   letter-spacing: var(--letter-spacing-auto);
   line-height: inherit;
   text-decoration: underline;
@@ -37,6 +37,10 @@
   text-decoration: none;
 }
 
+.po-link:focus-visible {
+  outline-width: var(--outline-width-focus-visible);
+}
+
 .po-link:visited {
   color: var(--text-color-visited);
 }

src/css/components/po-page/po-page-slide/po-page-slide.css

@@ -115,7 +115,7 @@
   font-family: var(--font-family);
   color: var(--color-title);
   flex: 1 1 auto;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight);
   line-height: var(--line-height-md);
   font-size: var(--font-size-default);
 }

src/css/components/po-search/po-search.css

@@ -91,7 +91,7 @@
   border-color: var(--color-focused);
   outline-color: var(--outline-color-focused);
 
-  outline-width: var(--border-width-lg);
+  outline-width: var(--outline-width);
   outline-style: solid;
   outline-offset: 2px;
 }

src/css/components/po-stepper/po-stepper.css

@@ -126,7 +126,9 @@
 }
 
 .po-stepper-label {
-  @apply --font-stepper-label;
+  font-family: var(--font-family-default-bold), sans-serif;
+  font-size: var(--font-size-default-normal);
+  line-height: 24px;
 }
 
 .po-stepper-horizontal .po-stepper-label {

src/css/components/po-table/po-table-list-manager.css/po-table-list-manager.css

@@ -38,7 +38,7 @@
   color: var(--color-column-text);
 
   font-family: var(--font-family-theme);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight);
   line-height: var(--line-height-md);
   letter-spacing: var(--letter-spacing-1);
   font-size: var(--font-size-default);