feat(theme): adicionado melhoria no tema para diferentes acessibilidades

Adicionado possibilidade de passar mais de uma opção de tema de acessibilidade como exemplo: ‘AA’ e ‘AAA’. Fixes DTHFUI-9037
po-ui · Dec 11, 2024 · 3780974 · 3780974
1 parent a22c3f0
commit 3780974
Show file tree

Hide file tree

Showing 14 changed files with 92 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -35,4 +35,4 @@ package-lock.json
 Thumbs.db
 
 # VSCode
-launch.json
+launch.json
diff --git a/src/css/components/po-field/po-combo/po-combo.css b/src/css/components/po-field/po-combo/po-combo.css
@@ -62,17 +62,23 @@
   color: var(--color-combo-color-group-title);
 }
 
-.po-combo-container-content .po-field-icon-container-right {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+po-combo .po-combo-container-wrapper {
+  position: relative;
+}
+
+po-combo .po-combo-container-content .po-field-icon-container-right {
+  inset-block: 0px;
+  transform: translateY(0);
 }
 
+.po-combo-container-content .po-field-icon-container-left,
 .po-combo-container-content .po-field-icon-container-right {
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+  top: 1px;
+  transform: translateY(0px);
+}
 
+.po-combo-container-content .po-field-icon-container-right {
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/src/css/components/po-field/po-datepicker-range/po-datepicker-range.css b/src/css/components/po-field/po-datepicker-range/po-datepicker-range.css
@@ -7,7 +7,6 @@
 .po-datepicker-range-field {
   appearance: none !important;
   display: table;
-  margin: 8px 0;
 }
 
 .po-datepicker-range-field-disabled {

diff --git a/src/css/components/po-field/po-input/po-input.css b/src/css/components/po-field/po-input/po-input.css
@@ -88,3 +88,7 @@ po-input.ng-invalid-mask .po-input {
   border: solid 1px var(--color-feedback-negative-base) !important;
   color: var(--color-feedback-negative-base);
 }
+
+po-password po-clean + po-icon {
+  margin-left: 8px;
+}
diff --git a/src/css/components/po-field/po-lookup/po-lookup.css b/src/css/components/po-field/po-lookup/po-lookup.css
@@ -8,13 +8,16 @@
 }
 
 .po-lookup {
-  padding: var(--spacing-xs) 0;
   width: 100%;
   position: relative;
   align-items: center;
   display: inline-table;
 }
 
+.po-lookup .po-search-container-wrapper {
+  position: relative;
+}
+
 .po-lookup .po-lookup-input {
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -41,8 +44,8 @@
 .po-lookup .po-lookup-buttons {
   display: flex;
   position: absolute;
-  inset: 9px 1px;
-  left: auto;
+  inset: 1px 1px 1px auto;
+  transform: translateY(0);
 }
 
 .po-lookup .po-lookup-button {
@@ -61,6 +64,10 @@
   justify-content: center;
 }
 
+.po-lookup .po-lookup-button .po-field-icon {
+  line-height: 24px;
+}
+
 .po-lookup.po-lookup-disabled {
   cursor: not-allowed;
 }
@@ -150,7 +157,7 @@
   color: var(--color-hover);
 }
 
-.po-lookup .po-lookup-button:last-of-type {
+.po-lookup .po-lookup-button:last-child {
   border-bottom-right-radius: calc(var(--border-radius) - var(--border-width-sm));
   border-top-right-radius: calc(var(--border-radius) - var(--border-width-sm));
 }
@@ -170,7 +177,6 @@
 
 .po-lookup-container-table {
   max-width: 90vw;
-  overflow: hidden;
 }
 
 .po-lookup-container-table[data-multiple='true'] {

diff --git a/src/css/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.css b/src/css/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.css
@@ -7,7 +7,7 @@
     @apply --font-text-large-bold;
   }
 
-  --border-rich-text-body-border: 1px solid var(--color-neutral-light-30);
+  --border-rich-text-body-border: 1px solid var(--color-neutral-dark-70);
   --shadow-rich-text-body-box-shadow: inset 0 1px 8px 0 var(--color-black-alpha-10);
 
   --rich-text-body-max-height: 262px;
@@ -29,7 +29,7 @@
   width: 100%;
 }
 
-.po-rich-text-body:only-child {
+po-rich-text-body:only-child .po-rich-text-body {
   border-radius: var(--border-radius-md);
 }
 

diff --git a/src/css/components/po-field/po-rich-text/po-rich-text-toolbar/po-rich-text-toolbar.css b/src/css/components/po-field/po-rich-text/po-rich-text-toolbar/po-rich-text-toolbar.css
@@ -59,7 +59,7 @@
 }
 
 .po-button-default.po-rich-text-toolbar-color-picker-button {
-  border: none;
+  overflow: hidden;
 }
 
 .po-rich-text-toolbar-color-picker-container {
@@ -85,5 +85,4 @@
 
 .po-rich-text-toolbar-color-picker-input::-webkit-color-swatch {
   border: none;
-  border-radius: var(--border-radius, var(--border-radius-md));
 }
diff --git a/src/css/components/po-info/po-info.css b/src/css/components/po-info/po-info.css
@@ -14,7 +14,10 @@
   word-wrap: break-word;
 
   &-label {
-    @apply --font-info-font-label;
+    font-family: var(--font-family-theme), sans-serif;
+    font-size: var(--font-size-default);
+    line-height: var(--line-height-md);
+    font-weight: var(--font-weight-semibold);
     color: var(--color-info-color-text-label);
 
     &-horizontal {

diff --git a/src/css/components/po-listbox/po-listbox.css b/src/css/components/po-listbox/po-listbox.css
@@ -16,10 +16,19 @@
     flex-direction: column;
     position: static;
   }
+
+  &[hidden] {
+    display: flex !important;
+  }
 }
 
 .po-listbox-container-search {
   padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-sm) var(--spacing-xs);
+}
+
+.po-listbox-container-search .po-field-icon-container-left {
+  top: 56%;
 }
 
 .po-listbox-list {

diff --git a/src/css/components/po-navbar/po-navbar-actions/po-navbar-action/po-navbar-action.css b/src/css/components/po-navbar/po-navbar-actions/po-navbar-action/po-navbar-action.css
@@ -16,6 +16,13 @@
   line-height: 1rem;
 }
 
+.po-navbar-action-content:focus-visible {
+  outline-width: 1px;
+  outline-color: var(--color-action-focus);
+  outline-style: auto;
+  outline-offset: 0;
+}
+
 .po-navbar-action-content > :first-child:not(.po-fonts-icon):not(.po-icon) {
   line-height: 2rem;
 }

diff --git a/src/css/components/po-navbar/po-navbar-items/po-navbar-item/po-navbar-item.css b/src/css/components/po-navbar/po-navbar-items/po-navbar-item/po-navbar-item.css
@@ -27,6 +27,13 @@
   cursor: default;
 }
 
+.po-navbar-item-link:focus-visible {
+  outline-width: 1px;
+  outline-color: var(--color-action-focus);
+  outline-style: auto;
+  outline-offset: 0;
+}
+
 .po-navbar-item-selected {
   box-shadow: var(--shadow-navbar-item-box-shadow-selected);
   color: var(--color-navbar-item-color-selected);

diff --git a/src/css/components/po-navbar/po-navbar-logo/po-navbar-logo.css b/src/css/components/po-navbar/po-navbar-logo/po-navbar-logo.css
@@ -9,6 +9,13 @@
   vertical-align: middle;
 }
 
+.po-navbar-logo-image:focus-visible {
+  outline-width: 1px;
+  outline-color: var(--color-action-focus);
+  outline-style: auto;
+  outline-offset: 0;
+}
+
 @media screen and (max-width: 768px) {
   .po-navbar-logo {
     text-align: center;

diff --git a/src/css/components/po-table/po-table.css b/src/css/components/po-table/po-table.css
@@ -259,7 +259,6 @@
 }
 
 .po-table-column-actions i {
-  color: var(--color);
   display: block;
   font-size: 1.5rem;
 }
@@ -504,7 +503,6 @@
 }
 
 .po-table-column-detail-toggle i {
-  color: var(--color);
   display: block;
   font-size: 1.5rem;
 }
@@ -676,3 +674,9 @@ span.po-table-header-icon-ascending svg {
 .po-table-row-template-container {
   max-width: 1rem;
 }
+
+.po-table-header-flex po-icon,
+.po-table-column-actions i,
+.po-table-column-detail-toggle i {
+  color: var(--color-action-default);
+}
diff --git a/src/css/themes/po-theme-default.css b/src/css/themes/po-theme-default.css
@@ -396,6 +396,10 @@ po-breadcrumb {
   --color: var(--color-action-default);
 }
 
+po-button-group {
+  --button-group-container-margin: -2px;
+}
+
 po-button-group .po-button {
   --font-family: var(--font-family-theme);
   --font-size: var(--font-size-default);
@@ -674,7 +678,7 @@ po-field-container-bottom {
 :root {
   /*------------------------------------*\
   GAUGE
-\*------------------------------------*/
+  \*------------------------------------*/
   --color-gauge-base-color: var(--color-neutral-light-20);
   --color-gauge-description-text-color: var(--color-neutral-dark-70);
   --color-gauge-description-bottom-focus: var(--color-action-default);
@@ -684,8 +688,8 @@ po-field-container-bottom {
 
   /*------------------------------------*\
   INFO
-\*------------------------------------*/
-  --color-info-color-text-label: var(--color-neutral-dark-70);
+  \*------------------------------------*/
+  --color-info-color-text-label: var(--color-neutral-dark-90);
   --color-info-color-text-value: var(--color-neutral-dark-90);
 
   --color-info-color-link: var(--color-brand-02-base);
@@ -716,6 +720,7 @@ po-decimal,
 po-number,
 po-datepicker,
 po-datepicker-range,
+po-datepicker-range .po-input,
 div.po-lookup-filter-content input.po-input,
 input.po-input {
   --font-family: var(--font-family-theme);
@@ -1264,13 +1269,17 @@ po-radio {
   --color-checked-disabled: var(--color-neutral-dark-70);
 }
 
+po-rich-text .po-button {
+  --border-width: var(--border-width-md);
+}
+
 :root {
   /*------------------------------------*\
   RICH TEXT
 \*------------------------------------*/
   --color-rich-text-background-color-scrollbar: var(--color-primary-alpha-50);
 
-  --color-rich-text-body-background-color: var(--color-neutral-light-00);
+  --color-rich-text-body-background-color: var(--color-neutral-light-05);
   --color-rich-text-body-border-error: var(--color-feedback-negative-base);
 
   --color-rich-text-body-text-error: var(--color-feedback-negative-base);
@@ -1280,7 +1289,7 @@ po-radio {
 
   --color-rich-text-placeholder-color: var(--color-neutral-mid-40);
 
-  --color-rich-text-toolbar-background-color: var(--color-rich-text-body-background-color);
+  --color-rich-text-toolbar-background-color: var(--color-transparent);
 }
 
 /*------------------------------------*\
@@ -1314,7 +1323,7 @@ po-search {
 
   --background-select: var(--background);
   --background-select-hover: var(--background-hover);
-  --background-select-disabled: var(background-disabled);
+  --background-select-disabled: var(--background-disabled);
 }
 
 /*------------------------------------*\
@@ -1417,10 +1426,10 @@ po-tab-button {
   --color: var(--color-action-default);
   --border-radius: var(--border-radius-md);
 
-  --background-item-selected: var(--color-neutral-light-00);
+  --background-item-selected: var(--color-brand-01-lightest);
 
   --color-hover: var(--color-brand-01-darkest);
-  --background-item-hover: var(--color-brand-01-lighter);
+  --background-item-hover: var(--color-brand-01-lightest);
 
   --outline-color-focused: var(--color-action-focus);
 
@@ -1431,6 +1440,10 @@ po-tab-button {
   --margin-tabs-container-right: -16px;
 }
 
+po-tabs po-tab-dropdown po-button {
+  --background-hover: var(--color-brand-01-lightest);
+}
+
 /*------------------------------------*\
   TABLE
 \*------------------------------------*/