@ukic/web-components 3.0.0 → 3.2.0

package/dist/collection/components/ic-navigation-item/ic-navigation-item.css

@@ -447,6 +447,8 @@ video {
 
 :host {
   display: block;
+
+  --navigation-link-colour: var(--ic-brand-text-color);
 }
 
 :host(:focus-within) {
@@ -456,7 +458,7 @@ video {
 /* chevron */
 svg {
   width: var(--ic-space-xl);
-  fill: var(--ic-theme-text);
+  fill: var(--ic-brand-text-color);
 }
 
 .svg {
@@ -483,7 +485,7 @@ svg {
   height: calc(100% - var(--ic-space-xxs));
   width: -moz-fit-content;
   width: fit-content;
-  color: var(--ic-theme-text);
+  color: var(--navigation-link-colour);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -509,7 +511,7 @@ svg {
   width: 100%;
   position: absolute;
   bottom: 0;
-  background-color: var(--ic-theme-text);
+  background-color: var(--ic-top-navigation-theme);
 }
 
 :host(.navigation-item-selected.navigation-item-page-header)
@@ -527,28 +529,17 @@ svg {
 }
 
 :host(.navigation-item) .link:hover:not(:focus) {
-  background-color: var(--ic-theme-hover);
+  background-color: var(--ic-brand-hover);
   cursor: pointer;
 }
 
-:host(
-    .navigation-item:not(
-        .navigation-item-page-header,
-        .navigation-item-side-menu
-      )
-  )
+:host(.navigation-item:not(.navigation-item-page-header, .navigation-item-side-menu))
   ::slotted(a:hover:not(:focus)) {
-  background-color: var(--ic-theme-hover) !important;
+  background-color: var(--ic-brand-hover) !important;
 }
 
-:host(
-    .navigation-item:not(
-        .navigation-item-top-nav-child,
-        .navigation-item-side-menu,
-        .navigation-item-top-nav-child-selected
-          .navigation-item-side-menu-selected
-      )
-  )
+:host(.navigation-item:not(.navigation-item-top-nav-child, .navigation-item-side-menu, .navigation-item-top-nav-child-selected
+      .navigation-item-side-menu-selected))
   .focus-indicator:focus-within {
   box-shadow: var(--ic-border-focus);
   border-radius: var(--ic-border-radius);
@@ -568,16 +559,9 @@ svg {
   outline: var(--ic-hc-focus-outline);
 }
 
-:host(.navigation-item-selected.dark) .link:focus,
-:host(.navigation-item.dark) ::slotted(a.active:focus) {
-  box-shadow: var(--ic-border-focus);
-  border-radius: var(--ic-border-radius);
-  outline: var(--ic-hc-focus-outline);
-}
-
 :host(.navigation-item) .link:active:not(:focus),
 :host(.navigation-item) ::slotted(a:active:not(:focus)) {
-  background-color: var(--ic-theme-active);
+  background-color: var(--ic-brand-active);
 }
 
 :host(.navigation-item-side-menu) .link,
@@ -586,7 +570,10 @@ svg {
   height: auto;
   width: 100%;
   box-sizing: border-box;
-  color: var(--ic-color-primary-text);
+  color: var(--ic-top-navigation-nav-item);
+
+  --ic-typography-color: var(--ic-top-navigation-nav-item);
+
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -597,6 +584,12 @@ svg {
     border-radius var(--ic-transition-duration-fast);
 }
 
+:host(.navigation-item-top-nav-child) ::slotted(svg),
+:host(.navigation-item-side-menu) ::slotted(svg),
+:host(.navigation-item-page-header) ::slotted(svg) {
+  fill: var(--ic-color-text-primary);
+}
+
 :host(.navigation-item-side-menu) ::slotted(a) {
   font: var(--ic-font-body) !important;
   letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;
@@ -605,11 +598,11 @@ svg {
 }
 
 :host(.navigation-item-side-menu) .link:hover:not(:focus) {
-  background-color: var(--ic-action-dark-bg-hover);
+  background-color: var(--ic-top-navigation-nav-item-hover);
 }
 
 :host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {
-  background-color: var(--ic-action-dark-bg-hover) !important;
+  background-color: var(--ic-top-navigation-nav-item-hover) !important;
 }
 
 :host(.navigation-item-side-menu) .focus-indicator:focus-within {
@@ -642,7 +635,7 @@ svg {
   width: -moz-fit-content;
   width: fit-content;
   min-width: 9.063rem;
-  color: var(--ic-color-primary-text);
+  color: var(--ic-top-navigation-nav-item);
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -659,11 +652,11 @@ svg {
 }
 
 :host(.navigation-item-top-nav-child) .link:hover:not(:focus) {
-  background-color: var(--ic-action-dark-bg-hover) !important;
+  background-color: var(--ic-top-navigation-nav-item-hover) !important;
 }
 
 :host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus) {
-  background-color: var(--ic-action-dark-bg-hover) !important;
+  background-color: var(--ic-top-navigation-nav-item-hover) !important;
 }
 
 :host(.navigation-item-top-nav-child) .link:focus,
@@ -681,18 +674,18 @@ svg {
 }
 
 :host(.navigation-item-side-menu) .link:active:not(:focus) {
-  background-color: var(--ic-action-dark-bg-active);
+  background-color: var(--ic-top-navigation-nav-item-pressed);
 }
 
 :host(.navigation-item-top-nav-child) .link:active:not(:focus),
 :host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {
   outline: var(--ic-hc-focus-outline);
-  background-color: var(--ic-action-dark-bg-active);
+  background-color: var(--ic-top-navigation-nav-item-pressed);
 }
 
 :host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),
 :host(.navigation-item-side-menu) ::slotted(a:active):not(:focus) {
-  background-color: var(--ic-action-dark-bg-active) !important;
+  background-color: var(--ic-top-navigation-nav-item-pressed) !important;
 }
 
 :host(.navigation-item-side-menu-selected) *,
@@ -714,14 +707,13 @@ svg {
   width: var(--ic-space-xs);
   height: inherit;
   min-height: 2.5rem;
-  background-color: var(--ic-action-default);
+  background-color: var(--ic-top-navigation-nav-item-banner);
   transition: left 0s;
 }
 
-:host(.navigation-item-top-nav-child-selected) .link::before,
 :host(.navigation-item-side-menu-selected) .link::before,
 :host(.navigation-item-side-menu-selected) .link:focus::before {
-  margin-top: 0.25rem;
+  margin-top: var(--ic-space-xxs);
 }
 
 :host(.navigation-item-top-nav-child-selected) .link:focus {
@@ -821,13 +813,14 @@ svg {
 }
 
 ::slotted(svg) {
-  fill: var(--ic-theme-text);
+  fill: var(--ic-brand-text-color);
+  height: var(--ic-space-lg);
   width: var(--ic-space-lg);
   margin-left: var(--ic-space-md);
 }
 
 .icon {
-  height: var(--ic-space-lg);
+  height: 1.5rem;
   width: var(--ic-space-xxl);
   margin-left: calc(-1 * var(--ic-space-md));
   flex: 0 1 0%;
@@ -836,15 +829,28 @@ svg {
 
 .icon > ::slotted(*) {
   margin-left: var(--ic-space-md) !important;
+  margin-right: var(--ic-space-xs);
+}
+
+.inline-badge {
+  margin-left: var(--ic-space-xs);
+}
+
+.badge {
+  margin-left: 0;
 }
 
 :host(.navigation-item-side-nav-collapsed) .icon > ::slotted(*) {
   margin: auto !important;
 }
 
+:host(.navigation-item-side-nav) .icon > ::slotted(*) {
+  margin-right: 0;
+}
+
 :host(.navigation-item-side-nav) .link,
 :host(.navigation-item-side-nav) ::slotted(a) {
-  height: var(--navigation-item-height, 56px);
+  height: var(--navigation-item-height, 4rem);
   min-height: var(--navigation-item-min-height);
   width: var(--navigation-item-width, auto);
   justify-content: var(--navigation-item-justify-content);
@@ -854,8 +860,7 @@ svg {
   color: var(--navigation-item-child-color) !important;
   text-decoration: none !important;
   white-space: nowrap;
-  padding-top: var(--ic-space-md) !important;
-  padding-bottom: var(--ic-space-md) !important;
+  padding: 0 var(--ic-space-md);
   text-wrap: wrap;
 }
 
@@ -907,7 +912,7 @@ svg {
 
 :host(.navigation-item-side-nav.navigation-item-selected) .link,
 :host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {
-  box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);
+  box-shadow: inset 0.313rem 0 0 var(--ic-brand-text-color);
 }
 
 :host(.navigation-item-side-nav.navigation-item-selected) .link::before,
@@ -925,23 +930,15 @@ svg {
   box-shadow: var(--ic-border-focus-inset);
 }
 
-:host(
-    :not(
-        .navigation-item-side-nav-collapsed
-      ).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label
-  )
+:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)
   .link {
   opacity: var(--navigation-item-label-opacity);
   height: auto;
 }
 
-:host(
-    .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label
-  )
+:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)
   .link,
-:host(
-    .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label
-  )
+:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)
   ::slotted(a) {
   min-width: var(--navigation-group-item-min-width);
   padding: var(--ic-space-xs) !important;
@@ -949,9 +946,7 @@ svg {
   gap: 0;
 }
 
-:host(
-    .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label
-  )
+:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)
   ::slotted(a) {
   display: block;
 }
@@ -971,19 +966,19 @@ svg {
 :host(.navigation-item-side-nav.navigation-item-selected) .link:focus,
 :host(.navigation-item-side-nav) ::slotted(a.active:focus) {
   margin: 0 auto;
-  box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);
+  box-shadow: inset 0.313rem 0 0 var(--ic-brand-text-color);
   border-radius: 0;
 }
 
 :host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {
-  background-color: var(--ic-theme-hover) !important;
+  background-color: var(--ic-brand-hover) !important;
 }
 
 :host(.navigation-item-page-header).link,
 :host(.navigation-item-page-header) a,
 :host(.navigation-item-page-header) ::slotted(a) {
   height: 2.5rem !important;
-  color: var(--ic-color-primary-text) !important;
+  color: var(--ic-color-text-primary) !important;
   transition: all var(--ic-easing-transition-fast) !important;
   box-shadow: rgba(23 89 188 / 0%) !important;
 }
@@ -1014,7 +1009,7 @@ svg {
 
 :host(.navigation-item-page-header) .link:active,
 :host(.navigation-item-page-header) ::slotted(a:active) {
-  background-color: var(--ic-action-default-bg-active) !important;
+  background-color: var(--ic-action-default-bg-pressed) !important;
 }
 
 :host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,
@@ -1044,7 +1039,7 @@ svg {
 
 .open-in-new-icon svg {
   margin-top: var(--ic-space-xxs);
-  padding-left: var(--ic-space-xxs);
+  padding-left: var(--ic-space-xs);
 }
 
 :host(.navigation-item-side-nav) .open-in-new-icon {
@@ -1067,7 +1062,7 @@ svg {
 :host(.navigation-item-page-header) .open-in-new-icon svg,
 :host(.navigation-item-top-nav-child) .open-in-new-icon svg,
 :host(.navigation-item-side-menu) .open-in-new-icon svg {
-  fill: var(--ic-color-primary-text);
+  fill: var(--ic-color-text-primary);
 }
 
 @media (forced-colors: active) {