@digigov/css 0.35.0 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -75,6 +75,8 @@
   "dependencies": {
     "@fontsource/roboto": "4.4.0",
     "@digigov/cli-build-tailwind": "0.9.2",
-    "publint": "0.1.8"
+    "publint": "0.1.8",
+    "@adobe/leonardo-contrast-colors": "1.0.0-alpha.13",
+    "polished": "4.2.2"
   }
 }

package/src/base/index.css

@@ -7,5 +7,5 @@ html{
   -webkit-tap-highlight-color: transparent;
 }
 body {
-  @apply font-sans text-base-content bg-white;
+  @apply font-sans text-base-content bg-base-100;
 }

package/src/components/accessibility-menu.css

@@ -15,15 +15,15 @@
   }
 }
 .govgr-accessibility-menu__btn {
-  @apply absolute bottom-4 bg-gray100;
+  @apply absolute bottom-4 bg-base-300;
   @apply p-4 rounded-full !important;
-  box-shadow: 0px 2px 5px var(--color-shadow200);
+  box-shadow: 0px 2px 5px rgba(var(--color-base-900-rgb), 0.3);
   &:hover {
-    @apply bg-gray200;
+    @apply bg-base-400;
   }
 }
 .govgr-accessibility-menu__content {
-  @apply bg-gray50 absolute top-0 bottom-0 p-4 flex flex-col max-w-md;
+  @apply bg-base-200 absolute top-0 bottom-0 p-4 flex flex-col max-w-md;
 }
 
 .govgr-accessibility-menu__header {
@@ -45,7 +45,7 @@
 
 .govgr-accessibility-menu__option-btn {
   @apply flex flex-col gap-2  ;
-  @apply bg-white border-white border-2;
+  @apply bg-base-100 border-base-100 border-2;
   @apply w-full sm:w-fit leading-tight m-0 !important;
   padding: calc(1rem + 2px) !important;
   &:hover {
@@ -67,7 +67,7 @@
   @apply flex flex-nowrap w-full gap-2 h-1 mt-2 opacity-0;
 }
 .govgr-accessibility-menu__step {
-  @apply bg-gray100 w-full;
+  @apply bg-base-300 w-full;
 }
 .govgr-accessibility-menu__step--active {
   @apply bg-success;

package/src/components/accordion.css

@@ -3,7 +3,7 @@
     @apply text-right;
   }
   .govgr-accordion__section {
-    @apply border-b border-gray200;
+    @apply border-b border-base-400;
     &:first-child {
       @apply border-t;
     }
@@ -12,7 +12,7 @@
     @apply border-0 !important;
   }
   .govgr-accordion__section-summary {
-    @apply py-4 pr-8 hover:bg-gray50 transition ease-in-out cursor-pointer;
+    @apply py-4 pr-8 hover:bg-base-200 transition ease-in-out cursor-pointer;
     list-style: none;
     &::-webkit-details-marker {
       @apply hidden;

package/src/components/admin-footer.css

@@ -1,3 +1,3 @@
 .govgr-admin-footer {
-  @apply border-0 border-solid font-normal text-base py-4 md:py-8 border-t-4 border-secondary600 text-gray600 bg-gray50 w-full;
+  @apply border-0 border-solid font-normal text-base py-4 md:py-8 border-t-4 border-tertiary text-base-800 bg-base-200 w-full;
 }

package/src/components/admin-form.css

@@ -1,5 +1,5 @@
 .govgr-admin-filter-wrapper {
   .govgr-field:last-child {
-    @apply border-b border-gray100 md:border-0 mb-0 pb-6;
+    @apply border-b border-base-300 md:border-0 mb-0 pb-6;
   }
 }

package/src/components/admin-header.css

@@ -1,5 +1,5 @@
 .govgr-admin-header {
-  @apply bg-primary print:bg-white border-b-8 print:border-b-2 border-secondary600;
+  @apply bg-primary print:bg-white border-b-8 print:border-b-2 border-tertiary;
   border-bottom-style: solid;
 }
 .govgr-admin-header__container {

package/src/components/autocomplete.css

@@ -16,7 +16,7 @@
 }
 
 .govgr-autocomplete__hint {
-  @apply absolute text-gray200;
+  @apply absolute text-base-400;
 }
 
 .govgr-autocomplete--assestive__hint{
@@ -44,7 +44,7 @@
 }
 
 .govgr-autocomplete__menu {
-  @apply bg-white m-0 max-h-96 overflow-x-hidden w-full m-0 p-0 border-2 border-t-0 border-base-content /*  border-t-0 border-x-2 border-l-2 border-base-content */;
+  @apply bg-base-100 m-0 max-h-96 overflow-x-hidden w-full m-0 p-0 border-2 border-t-0 border-base-content /*  border-t-0 border-x-2 border-l-2 border-base-content */;
 
 }
 
@@ -66,7 +66,7 @@
 
 .govgr-autocomplete__option {
   @apply cursor-pointer block relative;
-  border-bottom: solid var(--color-gray200);
+  border-bottom: solid var(--color-base-400);
   border-width: 1px 0;
 }
 
@@ -83,16 +83,16 @@
 }
 
 .govgr-autocomplete__option--odd {
-  @apply bg-gray100;
+  @apply bg-base-300;
 }
 
 .govgr-autocomplete__option--focused,
 .govgr-autocomplete__option:hover {
   .govgr-hint {
-    @apply text-gray100;
+    @apply text-base-300;
   }
-  @apply bg-secondary600 text-white outline-none;
-  border-color: var(--color-secondary600);
+  @apply bg-info text-white outline-none;
+  border-color: var(--color-tertiary);
 }
 
 .govgr-autocomplete--status__wrapper{

package/src/components/bottom-info.css

@@ -1,5 +1,5 @@
 .govgr-bottom-info__container {
-  @apply w-full bg-gray50 border-t border-gray200 py-2;
+  @apply w-full bg-base-200 border-t border-base-400 py-2;
 }
 /* .govgr-bottom-info__content {
 

package/src/components/button.css

@@ -1,5 +1,5 @@
 .govgr-btn {
-  @apply font-medium cursor-pointer 
+  @apply no-underline font-medium cursor-pointer 
   m-0 mb-8 w-max min-h-10 md:min-h-12 
   flex gap-x-3 items-center;
   border-radius: var(--btn-border-radius);
@@ -27,7 +27,7 @@
     @apply print:border-0 print:border-b-2 print:border-success print:text-base-content print:bg-white print:shadow-none;
   }
   .govgr-btn-secondary {
-    @apply print:border-0 print:border-b-2 print:border-gray300 print:text-base-content print:bg-white print:shadow-none;
+    @apply print:border-0 print:border-b-2 print:border-base-500 print:text-base-content print:bg-white print:shadow-none;
   }
 
   .govgr-btn-warning {
@@ -62,10 +62,10 @@
   }
 }
 .govgr-btn-secondary {
-  -webkit-box-shadow: 0 2px 0 var(--color-gray300);
-  box-shadow: 0 2px 0 var(--color-gray300);
+  -webkit-box-shadow: 0 2px 0 var(--color-base-500);
+  box-shadow: 0 2px 0 var(--color-base-500);
   @apply hover:no-underline
-    print:border-2 print:border-gray300 print:shadow-none;
+    print:border-2 print:border-base-700 print:shadow-none;
   background-color: var(--btn-secondary-background-color);
   color: var(--btn-secondary-color);
   &:hover {
@@ -94,7 +94,7 @@
 }
 .govgr-btn-disabled {
   @apply opacity-50 hover:bg-opacity-50 cursor-not-allowed
-  print:text-gray200 print:border-opacity-50;
+  print:text-base-400 print:border-opacity-50;
 }
 .govgr-btn-link {
   @apply block;

package/src/components/card.css

@@ -8,7 +8,7 @@
   }
 }
 .govgr-card--divider {
-  @apply border-b border-gray100 pb-4 mb-4;
+  @apply border-b border-base-300 pb-4 mb-4;
 }
 .govgr-card__heading {
   word-break: break-word;
@@ -73,7 +73,7 @@
   }
 }
 .govgr-card--border-top {
-  @apply border-t border-gray100 pt-4;
+  @apply border-t border-base-300 pt-4;
   &.govgr-card--border-dark {
     @apply border-t-3; 
   }
@@ -82,5 +82,5 @@
   @apply border-base-content; 
 }
 .govgr-card--border-gray {
-  @apply border-gray100; 
+  @apply border-base-300; 
 }

package/src/components/checkboxes.css

@@ -19,7 +19,7 @@
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     @apply absolute top-0 left-0 w-10 h-10
-    border-solid border-base-content border-2 bg-white opacity-100;
+    border-solid border-base-content border-2 bg-base-100 opacity-100;
   }
   &:after {
     content: "";
@@ -54,7 +54,7 @@
   @apply text-lg text-center w-10 mb-4;
 }
 .govgr-checkboxes__conditional, .govgr-radios__conditional {
-    @apply border-l-4 border-gray300 ml-4 pl-6;
+    @apply border-l-4 border-base-500 ml-4 pl-6;
 }
 .govgr-checkboxes__conditional--hidden, .govgr-radios__conditional--hidden {
     @apply hidden;

package/src/components/cookie.css

@@ -1,3 +1,3 @@
 .govgr-cookie-banner {
-  @apply bg-gray50;
+  @apply bg-base-200;
 }

package/src/components/details.css

@@ -25,7 +25,7 @@
   line-height: var(--details__summary--l-line-height);
 }
 .govgr-details__summary-text {
-  @apply border-l-2 border-gray300 py-2 px-4 mt-4;
+  @apply border-l-2 border-base-500 py-2 px-4 mt-4;
   >*:last-child {
     @apply mb-0;
   }

package/src/components/drawer.css

@@ -1,8 +1,17 @@
 .govgr-drawer{
-  @apply border border-gray100 md:block bg-white p-4
-  h-full max-h-screen overflow-y-scroll w-4/5 min-h-screen
-  fixed top-0 bottom-0 z-40 md:shadow-none shadow-thick
-  md:relative md:overflow-auto md:w-full;
+  @apply border border-base-300 bg-base-100 p-4
+  h-full max-h-screen min-h-screen overflow-y-scroll w-4/5 max-w-md
+  fixed top-0 bottom-0 z-40;
+  @apply shadow-thick !important;
+}
+.govgr-drawer--relative-sm{
+  @apply sm:block sm:relative sm:w-full max-h-full shadow-thick sm:shadow-none !important;
+}
+.govgr-drawer--relative-md{
+  @apply md:block md:relative md:w-full max-h-full shadow-thick md:shadow-none !important;
+}
+.govgr-drawer--relative-lg{
+  @apply lg:block lg:relative lg:w-full max-h-full shadow-thick lg:shadow-none !important;
 }
 .govgr-drawer--right {
   @apply right-0;
@@ -11,13 +20,13 @@
   @apply left-0 ;
 }
 .govgr-drawer--closed {
-  @apply hidden md:block;
+  @apply hidden;
 }
-.govgr-drawer__burger-icon {
-  @apply md:hidden mb-0;
+.govgr-drawer__close-container {
+  @apply flex-grow;
 }
 .govgr-drawer__close-icon {
-  @apply flex flex-nowrap md:hidden text-right w-max float-right;
+  @apply flex flex-nowrap text-right w-max float-right items-center;
   .govgr-close-icon {
     @apply w-5 h-5 z-30 float-right;
     @apply ml-1 !important;

package/src/components/dropdown.css

@@ -47,10 +47,10 @@
   @apply mt-4;
 }
 .govgr-dropdown__content {
-  @apply border border-gray200 p-4 bg-white border-t-0
+  @apply border border-base-400 p-4 bg-base-100 border-t-0
   max-w-xs w-max min-w-full absolute transition z-1 mr-4 -mt-4;
-  -webkit-box-box-shadow: 0 2px 8px var(--color-shadow200), 0 -2px 0 var(--color-gray300);
-  box-shadow: 0 2px 8px var(--color-shadow200), 0 -2px 0 var(--color-gray300);
+  -webkit-box-box-shadow: 0 2px 8px rgba(var(--color-base-900-rgb), 0.3), 0 -2px 0 var(--color-base-500);
+  box-shadow: 0 2px 8px rgba(var(--color-base-900-rgb), 0.3), 0 -2px 0 var(--color-base-500);
   *:last-child {
     @apply mb-0;
   }
@@ -63,7 +63,7 @@
   .govgr-vertical-nav {
     @apply -mx-4 flex-col; 
     .govgr-vertical-nav__item {
-      @apply border-b border-gray100 py-2 px-4;
+      @apply border-b border-base-300 py-2 px-4;
       &:last-child {
         @apply border-0;
       }
@@ -77,8 +77,8 @@
 .govgr-dropdown--up {
   .govgr-dropdown__content {
     @apply mb-4 border border-b-0 bottom-full;
-    -webkit-box-box-shadow: 0 2px 8px var(--color-shadow200), 0 2px 0 var(--color-gray300);
-    box-shadow: 0 2px 8px var(--color-shadow200), 0 2px 0 var(--color-gray300);
+    -webkit-box-box-shadow: 0 2px 8px rgba(var(--color-base-900-rgb), 0.3), 0 2px 0 var(--color-base-500);
+    box-shadow: 0 2px 8px rgba(var(--color-base-900-rgb), 0.3), 0 2px 0 var(--color-base-500);
   }
 }
 .govgr-dropdown--right {
@@ -96,7 +96,7 @@
 } 
 .govgr-header, .govgr-admin-header {
   .govgr-dropdown__button.govgr-link {
-    @apply text-lg text-header-content focus:text-base-content print:text-gray600;
+    @apply text-lg text-white focus:text-base-content print:text-base-800;
   }
   .govgr-dropdown {
     @apply print:hidden;
@@ -109,4 +109,7 @@
   .govgr-dropdown__button {
     @apply mb-0;
   }
+  .govgr-caret-container{
+    @apply flex flex-col;
+  }
 }

package/src/components/fillable.css

@@ -1,9 +1,9 @@
 .govgr-fillable-text {
-  @apply lg:mb-8 mb-4 md:mb-8 p-4 border-l-6 border-gray100 bg-gray50
+  @apply lg:mb-8 mb-4 md:mb-8 p-4 border-l-6 border-base-300 bg-base-200
 text-base-content md:text-lg leading-relaxed text-base;
 }
 .govgr-labeled-text {
-@apply bg-gray100 w-fit inline-block px-3 mx-1 mt-px font-bold border-0 border-b-2 border-gray600;
+@apply bg-base-300 w-fit inline-block px-3 mx-1 mt-px font-bold border-0 border-b-2 border-base-800;
 }
 .govgr-labeled-text--active {
   @apply bg-focus;

package/src/components/filter.css

@@ -1,6 +1,6 @@
 .govgr-filter {
-  @apply bg-white fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
-  box-shadow: 0 0 30px var(--color-shadow600);
+  @apply bg-base-100 fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
+  box-shadow: 0 0 30px rgba(var(--color-base-900-rgb), 0.9);
   .govgr-select {
     @apply w-full;
   }
@@ -32,7 +32,7 @@
   }
 }
 .govgr-filter--border {
-  @apply border border-gray100 p-4;
+  @apply border border-base-300 p-4;
 }
 .govgr-filter--closed {
   @apply hidden;
@@ -84,7 +84,7 @@
   }
 }
 .govgr-filter__selected {
-  @apply bg-gray50 p-4 m-0 rounded;
+  @apply bg-base-200 p-4 m-0 rounded;
 }
 .govgr-filter__selected--indicator {
   @apply md:hidden;
@@ -105,13 +105,13 @@
   @apply flex flex-wrap list-none;
 }
 .govgr-chip {
-  @apply bg-white text-base-content lg:text-base text-sm border-2 border-base-content 
+  @apply bg-base-100 text-base-content lg:text-base text-sm border-2 border-base-content 
   inline-flex items-center px-2 py-1 mr-2 mb-2 rounded shadow;
   .govgr-close-icon {
     @apply w-4 h-4 ml-3;
   }
   &:hover {
-    @apply shadow-lg text-base-content-invert bg-gray800 border-gray800 transition;
+    @apply shadow-lg text-base-content-invert bg-base-900 border-base-900 transition;
     .govgr-close-icon {
       fill: var(--color-base-content-invert);
     }
@@ -128,9 +128,9 @@
 }
 
 .govgr-input__search-btn {
+  @apply shadow-none !important;
   @apply 
-  bg-success border-b-2 border-base-content rounded-none
-  text-lg text-white
+  border-b-2 border-base-content rounded-none
   px-4 py-2 w-min m-0 ml-3
   flex gap-2
   hover:bg-success-hover active:bg-success-hover hover:no-underline;

package/src/components/footer.css

@@ -1,6 +1,6 @@
 .govgr-footer {
   @apply border-0 border-solid font-normal text-base py-4 md:py-8 
-  border-t-4 border-secondary600 text-gray600 bg-gray50 w-full
+  border-t-4 border-tertiary text-base-800 bg-base-200 w-full
   print:py-2 print:bg-white print:border-t-2;
   .govgr-section-break {
     @apply print:hidden;
@@ -85,9 +85,9 @@
   }
 }
 .govgr-footer__section-break {
-  @apply m-auto px-4 py-2 border-t border-gray100 mb-5
+  @apply m-auto px-4 py-2 border-t border-base-300 mb-5
   print:hidden;
 }
 .govgr-footer__heading {
-  @apply mb-4 pb-4 border-b border-gray100;
+  @apply mb-4 pb-4 border-b border-base-300;
 }

package/src/components/form.css

@@ -47,7 +47,7 @@
   }
 }
 .govgr-input, .govgr-select, .govgr-textarea{
-  @apply md:text-lg text-base w-full p-2 border-2 border-base-content bg-white;
+  @apply md:text-lg text-base w-full p-2 border-2 border-base-content bg-base-100;
   text-indent: 2px;
   &:focus {
     outline: 4px solid var(--color-focus);
@@ -159,13 +159,13 @@
 .govgr-radios__input:disabled,
 .govgr-radios__input:disabled::before,
 .govgr-radios__input:disabled:checked:before {
-  @apply bg-gray100 cursor-not-allowed;
+  @apply bg-base-300 cursor-not-allowed;
 }
 .govgr-input:disabled, 
 .govgr-textarea:disabled, 
 .govgr-checkboxes__input:disabled::before, 
 .govgr-radios__input:disabled::before {
-  @apply border-gray500 text-gray600;
+  @apply border-base-700 text-base-800;
 }
 .govgr-checkboxes__input:disabled:checked:after,
 .govgr-radios__input:disabled:checked:after {

package/src/components/full-page-background.css

@@ -1,5 +1,5 @@
 .govgr-full-page-background {
-  @apply flex justify-center items-center content-center bg-opacity-50 bg-gray900
+  @apply flex justify-center items-center content-center bg-opacity-50 bg-base-1000
   fixed z-10 left-0 top-0 w-full h-full;
 }
 .govgr-loader__icon {

package/src/components/header.css

@@ -1,5 +1,5 @@
 .govgr-header {
-  @apply bg-primary border-b-8 print:border-b-2 border-secondary600;
+  @apply bg-primary border-b-8 print:border-b-2 border-tertiary;
   @apply print:bg-white;
   border-bottom-style: solid;
 }
@@ -18,11 +18,11 @@
   @apply flex justify-start items-center gap-x-4 gap-y-2 print:gap-1;
 }
 .govgr-header-title {
-  @apply text-header-content font-bold text-2xl leading-10 tracking-wide no-underline
+  @apply text-white font-bold text-2xl leading-10 tracking-wide no-underline
   w-auto align-middle hover:no-underline 
   print:text-base-content;
   &:hover {
-    @apply text-header-content
+    @apply text-white
   }
 }
 .govgr-header-title:focus {
@@ -48,7 +48,7 @@
   text-decoration: none;
 }
 .govgr-masthead {
-  @apply print:border-2 print:bg-white print:border-secondary800 print:text-base-content;
+  @apply print:border-2 print:bg-white print:border-tertiary-300 print:text-base-content;
   .govgr-grid-column-two-thirds >*:last-child {
     @apply mb-0;
   }
@@ -57,17 +57,17 @@
   }
 }
 .govgr-masthead--primary{
-  @apply bg-secondary600 text-content-dark;
+  @apply bg-tertiary text-white;
   .govgr-masthead-body{
-    @apply text-base-content-invert;
+    @apply text-white;
   }
   .govgr-body {
-    @apply text-content-dark;
+    @apply text-white;
   }
 }
 .govgr-masthead--secondary {
-  @apply border-b border-base150 !important;
-  @apply bg-gray50;
+  @apply border-b border-base-400 !important;
+  @apply bg-base-200;
   .govgr-masthead-body {
       @apply text-base-content;
     }

package/src/components/kitchensink.css

@@ -5,7 +5,7 @@
   @apply flex flex-nowrap gap-32 mb-16;
 }
 .govgr-kitchensink-category__heading {
-  @apply uppercase text-gray300;
+  @apply uppercase text-base-500;
 }
 .govgr-kitchensink-letter-content {
   @apply flex flex-nowrap gap-16;
@@ -58,9 +58,6 @@
   .govgr-kitchensink-card .govgr-drawer--closed {
     @apply hidden;
   }
-  .govgr-kitchensink-card .govgr-drawer__burger-icon {
-    @apply block;
-  }
   .govgr-kitchensink-card .govgr-drawer__close-icon {
     @apply block;
   }

package/src/components/layout.css

@@ -46,7 +46,7 @@
   @apply m-auto px-4 py-2 border-0 w-full bg-transparent;
 }
 .govgr-section-break--visible {
-  @apply border-t border-gray100 border-solid	;
+  @apply border-t border-base-300 border-solid	;
 }
 .govgr-section-break--m {
  @apply mb-5;

package/src/components/misc.css

@@ -6,7 +6,7 @@
   @apply border-8;
 }
 .govgr-blockquote {
-  @apply lg:mb-8 mb-4 mt-8 md:mb-8 p-4 border-l-8 border-gray300;
+  @apply lg:mb-8 mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500;
 }
 .govgr-error-summary {
   @apply border-5 border-error mb-6 md:mb-8 p-4 md:p-5;
@@ -15,7 +15,7 @@
   font-size: var(--warning-text-font-size);
   @apply flex pl-0 pr-0;
   .govgr-warning-text__icon {
-    @apply text-white font-bold bg-base-content text-3xl leading-10 text-center 
+    @apply text-base-content-invert font-bold bg-base-content text-3xl leading-10 text-center 
     rounded-3xl md:min-h-10 min-w-10 h-fit mr-6 mt-1
     print:bg-white print:border-2 print:border-base-content print:text-base-content;
   }
@@ -47,11 +47,11 @@
   &:hover {
     .tooltiptext {
       @apply block opacity-100 absolute w-64 -ml-32 top-8 left-1/2 px-4 py-2 z-1;
-      @apply text-white rounded-sm bg-primary200 bg-opacity-90 shadow;
+      @apply text-white rounded-sm bg-base-content bg-opacity-90 shadow;
 
       &::after {
         content: "";
-        @apply -top-3 left-1/2 -mr-1 border-6 border-primary200 opacity-85 absolute;
+        @apply -top-3 left-1/2 -mr-1 border-6 border-base-content opacity-85 absolute;
         border-right-color: transparent;
         border-left-color: transparent;
         border-top-color: transparent;

package/src/components/modal.css

@@ -1,13 +1,13 @@
 .govgr-modal {
   @apply hidden justify-center items-center content-center text-left
-  mb-7 text-base-content bg-opacity-50 bg-gray300
+  mb-7 text-base-content bg-opacity-50 bg-base-700
   fixed z-50 left-0 top-0 w-full h-full overflow-auto; 
 }
 .govgr-modal__body {
   @apply w-full max-w-md md:max-w-lg lg:max-w-4xl 
   h-fit md:h-auto overflow-y-auto
-  bg-white
-  border border-solid border-gray300;
+  bg-base-100
+  border border-solid border-base-500;
   max-height:95vh;
 }
 .govgr-modal__content {

package/src/components/nav.css

@@ -1,7 +1,7 @@
 .govgr-header {
   @apply relative;
   .govgr-burger-icon {
-    fill: var(--color-header-content);
+    fill: var(--color-white);
   }
   .govgr-drawer__close-icon {
     @apply sm:hidden;
@@ -35,7 +35,7 @@
     }
   }
   .govgr-nav__list--active {
-    @apply sm:bg-secondary600 !important;
+    @apply sm:bg-tertiary !important;
   }
 }
 .govgr-burger-icon {
@@ -81,14 +81,16 @@
 /* --- NAV ---  */
 .govgr-nav {
   @apply sm:block !important;
-  @apply xs:hidden w-3/4 sm:w-full h-full bg-white sm:h-auto xs:text-content z-30 sm:z-auto
+  @apply xs:hidden w-3/4 sm:w-full h-full bg-base-100
+   sm:h-auto sm:bg-base-100 xs:text-base-content
+  z-30 sm:z-auto 
   opacity-100 right-0 top-0 sm:top-auto overflow-x-scroll sm:overflow-visible;
 }
 .govgr-nav--fixed {
   @apply fixed sm:relative;
 }
 .govgr-nav--border {
-  @apply sm:border-b sm:border-base150;
+  @apply sm:border-b sm:border-base-400;
 }
 .govgr-nav--open {
   @apply xs:block;
@@ -180,7 +182,7 @@
   @apply hidden;
 }
 .govgr-nav-menu--horizontal {
-  @apply sm:order-2 sm:left-0 sm:right-0 sm:relative sm:mt-3 sm:bg-white;
+  @apply sm:order-2 sm:left-0 sm:right-0 sm:relative sm:mt-3 sm:bg-base-100;
   .govgr-main-wrapper {
     @apply xs:gap-y-2;
   }