@digigov/css 2.0.0-cbc56209 → 2.0.0-fec6f1f7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "2.0.0-cbc56209",
+  "version": "2.0.0-fec6f1f7",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -55,7 +55,7 @@
     "rimraf": "3.0.2",
     "publint": "0.1.8",
     "stylelint": "15.11.0",
-    "stylelint-plugin-digigov": "1.0.0",
+    "stylelint-plugin-digigov": "1.1.0-fec6f1f7",
     "prettier": "3.2.5"
   },
   "dependencies": {

package/src/components/accordion.css

@@ -57,9 +57,12 @@
     }
   }
   .ds-accordion__section-summary {
-    @apply py-4 pr-8 hover:bg-base-200 transition ease-in-out cursor-pointer;
-    @apply mb-0;
+    @apply py-4 pr-8 mb-0 transition ease-in-out cursor-pointer;
+    background: var(--accordion__section-summary-background);
     list-style: none;
+    &:hover {
+      background: var(--accordion__section-summary-background-hover);
+    }
     &::-webkit-details-marker {
       @apply hidden;
     }

package/src/components/admin-header.css

@@ -3,7 +3,8 @@
   border-bottom-style: solid;
 }
 .ds-admin-header__content {
-  @apply px-4 py-2 mx-auto max-w-full w-full flex justify-between items-center;
+  @apply px-4 py-2 mx-auto max-w-full w-full flex justify-between items-center
+  flex-wrap sm:flex-nowrap print:px-0 gap-3;
 }
 
 /* overrides */
@@ -13,7 +14,7 @@
     @apply print:hidden;
   }
   .ds-dropdown__button.ds-link {
-    @apply text-lg text-white focus:text-base-content print:text-base-800;
+    @apply text-lg text-white focus:text-base-content print:text-base-800 text-right;
   }
   .ds-link {
     &:hover {

package/src/components/autocomplete.css

@@ -1,13 +1,11 @@
-.ds-autocomplete__wrapper {
+.ds-autocomplete__container {
   @apply relative;
 }
 .ds-autocomplete__status {
 }
-.ds-autocomplete__status__wrapper {
-  @apply border-0 h-px overflow-hidden absolute whitespace-nowrap p-0 w-px;
-  clip: 'rect(0 0 0 0)';
-  margin-bottom: '-1px';
-  margin-right: '-1px';
+.ds-autocomplete__status__container {
+  @apply border-0 h-px overflow-hidden absolute whitespace-nowrap p-0 w-px -mb-px -mr-px;
+  clip: "rect(0 0 0 0)";
 }
 .ds-autocomplete__hint {
   @apply absolute text-base-400;
@@ -19,40 +17,76 @@
   box-sizing: border-box;
 }
 .ds-autocomplete__input {
-  @apply relative bg-transparent;
-  &.ds-autocomplete__input--default {
-    @apply p-2;
-  }
+  @apply relative bg-transparent cursor-pointer pr-8;
   &.ds-autocomplete__input--focused {
     outline: 4px solid var(--color-focus);
     outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 2px;
     box-shadow: inset 0 0 0 2px;
   }
-  &.ds-autocomplete__input--show-all-values {
-    @apply cursor-text;
-  }
 }
-.ds-autocomplete__dropdown-arrow-down {
-  @apply inline-block absolute right-2 top-4 w-6 h-6 cursor-pointer;
+.ds-autocomplete__container > .ds-svg-icon {
+  @apply inline-block absolute right-2 top-3;
+  pointer-events: none;
 }
-.ds-autocomplete__menu {
-  @apply bg-base-100 m-0 max-h-96 overflow-x-hidden w-full p-0 border-2 border-t-0 border-base-content /*  border-t-0 border-x-2 border-l-2 border-base-content */;
-  &.ds-autocomplete__menu--inline {
-    @apply relative;
+.ds-autocomplete__multi-input-container > .ds-link {
+  @apply inline-block absolute right-2 top-4;
+  .ds-svg-icon {
+    @apply ml-0 fill-base-content;
   }
-  &.ds-autocomplete__menu--overlay {
-    @apply absolute w-full left-0 top-full z-50 shadow-xl;
+}
+.ds-autocomplete__multi-input-container {
+  @apply w-full p-2 pr-8 border-2 border-base-content bg-base-100
+  flex gap-2 flex-wrap items-center;
+  min-height: 52px;
+  text-indent: 2px;
+  &:focus,
+  &.ds-autocomplete__multi-input-container--focused {
+    outline: 4px solid var(--color-focus);
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 2px;
+    box-shadow: inset 0 0 0 2px;
   }
-  &.ds-autocomplete__menu--visible {
-    @apply block;
+  &:not(.ds-autocomplete__multi-input-container--focused) {
+    &.ds-autocomplete__multi-input-container--1 {
+      .ds-chip + .ds-chip {
+        @apply hidden;
+      }
+    }
+    &.ds-autocomplete__multi-input-container--2 {
+      .ds-chip + .ds-chip + .ds-chip {
+        @apply hidden;
+      }
+    }
+    &.ds-autocomplete__multi-input-container--3 {
+      .ds-chip + .ds-chip + .ds-chip + .ds-chip {
+        @apply hidden;
+      }
+    }
   }
+}
+.ds-autocomplete__multi-input {
+  @apply flex-1 w-full focus:border-0 focus:outline-0 bg-base-100;
+}
+.ds-autocomplete__multi-btn {
+  @apply absolute bottom-0 right-0 m-2;
+  margin: 4px 2px;
+  height: 44px;
+  .ds-svg-icon {
+    @apply mx-2 !important;
+  }
+}
+
+.ds-autocomplete__menu {
+  @apply block max-h-96 w-full m-0 p-0 overflow-x-hidden
+  border-2 border-t-0 border-base-content bg-base-100
+  absolute left-0 top-full z-50 shadow-xl;
   &.ds-autocomplete__menu--hidden {
     @apply hidden;
   }
 }
 .ds-autocomplete__option {
-  @apply cursor-pointer block relative p-2;
-  border-bottom: solid var(--color-base-400);
+  @apply cursor-pointer block relative p-2 border-b-base-400;
   border-width: 1px 0;
   &.ds-autocomplete__option--odd {
     @apply bg-base-300;
@@ -74,12 +108,24 @@
 }
 .ds-autocomplete__option > * {
   @apply pointer-events-none;
+  &:first-of-type,
+  &:last-of-type {
+    @apply border-t-0;
+  }
+}
+.ds-autocomplete__option--odd {
+  @apply bg-base-300;
+}
+.ds-autocomplete__option--focused,
+.ds-autocomplete__option:hover {
+  @apply bg-info text-white outline-none border-tertiary;
 }
-.ds-autocomplete__option:first-of-type {
-  @apply border-t-0;
+.ds-autocomplete__option--no-results {
+  @apply text-current cursor-not-allowed;
 }
-.ds-autocomplete__option:last-of-type {
-  @apply border-t-0;
+.ds-autocomplete__option--empty {
+  @apply cursor-default hover:border-base-400;
+  @apply bg-base-100 text-base-content !important;
 }
 .ds-autocomplete__hint,
 .ds-autocomplete__option {

package/src/components/button.css

@@ -36,7 +36,7 @@
 .ds-btn-primary[type='reset'] {
   @apply hover:no-underline
   print:border-2 print:border-success print:shadow-none;
-  box-shadow: 0 2px 0 var(--color-base-content);
+  box-shadow: var(--btn-primary-box-shadow);
   background-color: var(--btn-primary-background-color);
   color: var(--btn-primary-color);
   &:hover {
@@ -61,7 +61,7 @@
 .ds-btn-secondary[type='reset'] {
   @apply hover:no-underline
     print:border-2 print:border-base-700 print:shadow-none;
-  box-shadow: 0 2px 0 var(--color-base-500);
+  box-shadow: var(--btn-secondary-box-shadow);
   background-color: var(--btn-secondary-background-color);
   color: var(--btn-secondary-color);
   &:hover {
@@ -78,7 +78,7 @@
 .ds-btn-warning[type='reset'] {
   @apply hover:no-underline
     print:border-2 print:border-error print:shadow-none;
-  box-shadow: 0 2px 0 var(--color-base-content);
+  box-shadow: var(--btn-warning-box-shadow);
   background-color: var(--btn-warning-background-color);
   color: var(--btn-warning-color);
   &:hover {
@@ -95,10 +95,6 @@
   print:text-base-400 print:border-opacity-50;
   @apply cursor-not-allowed !important;
 }
-.ds-svg-icon--caret {
-  @apply w-4 h-4 inline-block;
-  fill: var(--color-base-content);
-}
 .ds-close-btn {
   @apply flex flex-nowrap text-right w-max float-right items-center;
 }
@@ -110,7 +106,14 @@
     @apply h-4 w-4 inline transition-all;
   }
 }
-.ds-btn-primary,
+.ds-btn-primary {
+  .ds-svg-icon {
+    fill: var(--btn-primary-color);
+  }
+  .ds-svg-icon--more-vert {
+    @apply h-6 w-6 md:h-8 md:w-8;
+  }
+}
 .ds-btn-warning {
   .ds-svg-icon {
     fill: var(--color-white);
@@ -121,11 +124,11 @@
 }
 .ds-btn-cta {
   &:hover {
-    .ds-svg-icon--chevron {
+    .ds-svg-icon {
       @apply ml-4 mr-0;
     }
   }
-  .ds-svg-icon--chevron {
+  .ds-svg-icon {
     @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
   }
 }

package/src/components/card.css

@@ -1,5 +1,6 @@
 .ds-card {
   @apply mb-7 text-base-content;
+  border-radius: var(--card-border-radius);
   &.ds-card--dense,
   .ds-dense & {
     @apply mb-5;
@@ -28,6 +29,7 @@
     }
   }
   &.ds-card--divider {
+    --card-border-radius: 0;
     @apply border-b border-base-300 pb-4 mb-4;
   }
   &.ds-card--cta {

package/src/components/chip.css

@@ -1,5 +1,5 @@
 .ds-chips {
-  @apply flex flex-wrap list-none gap-2;
+  @apply flex flex-wrap list-none gap-2 items-center;
   &.ds-chips--horizontal {
     @apply md:flex md:flex-row md:flex-wrap;
   }

package/src/components/dropdown.css

@@ -35,6 +35,9 @@
     &::marker {
       font-size: 0;
     }
+    &::-webkit-details-marker {
+      display: none;
+    }
   }
   .ds-dropdown__button.ds-link + .ds-dropdown__content {
     @apply mt-4 print:text-base-content;
@@ -54,6 +57,9 @@
     &.ds-dropdown__content--full-width {
       @apply min-w-full;
     }
+    &.ds-dropdown__content--scrollable {
+      @apply overflow-y-auto max-h-96;
+    }
     *:last-child {
       @apply mb-0;
     }
@@ -105,8 +111,7 @@
       }
     }
     .ds-svg-icon {
-      @apply w-5 h-6 md:h-8;
-      @apply print:hidden;
+      @apply w-5 h-6 md:h-8 min-w-4 print:hidden;
     }
   }
   .ds-dropdown__content {
@@ -118,6 +123,12 @@
     }
     > .ds-nav__list {
       @apply w-auto -mx-4 flex-col;
+      &:nth-child(1) {
+        @apply -mt-4;
+      }
+      &:last-child {
+        @apply -mb-4 !important;
+      }
       .ds-nav__list-item {
         @apply border-b border-base-300 py-2 px-4;
         &:last-child {

package/src/components/filter.css

@@ -61,10 +61,7 @@
 }
 .ds-input__search-btn {
   @apply shadow-none !important;
-  @apply 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;
+  @apply px-4 py-2 w-min m-0 ml-3 flex gap-2;
 }
 .ds-search {
   @apply flex w-full max-w-3xl;

package/src/components/footer.css

@@ -1,6 +1,9 @@
 .ds-footer {
-  @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
+  border: var(--footer-border);
+  border-width: var(--footer-border-width);
+  background-color: var(--footer-background-color);
+  color: var(--footer-color);
+  @apply font-normal text-base py-4 md:py-8 w-full
   print:py-2 print:bg-white print:border-t-2;
 }
 .ds-footer__info {
@@ -40,12 +43,15 @@
   }
 }
 .ds-footer__link {
-  @apply underline;
+  text-decoration: var(--footer__link-text-decoration);
+  
   &:hover {
+    text-decoration: var(--footer__link-text-decoration-hover);
     text-decoration-thickness: 2px;
-    color: var(--color-base-800);
+    color:var(--footer__link-color-hover);
   }
   &:focus {
+    color:var(--footer__link-color-focus);
     background-color: var(--color-focus) !important;
     box-shadow:
       0 -2px var(--color-focus),
@@ -94,6 +100,11 @@
     @apply print:hidden;
   }
   .ds-link {
+    --link-color:var(--color-footer);
+    @apply print:text-base-content;
+  }
+  .ds-body {
+    --body-color:var(--color-footer);
     @apply print:text-base-content;
   }
 }

package/src/components/form.css

@@ -30,6 +30,12 @@
   line-height: var(--label-line-height);
   letter-spacing: var(--label-letter-spacing);
 }
+.ds-input {
+  border-radius: var(--input-border-radius);
+}
+.ds-textarea {
+  border-radius: var(--textarea-border-radius);
+}
 .ds-input,
 .ds-select,
 .ds-textarea {
@@ -76,6 +82,7 @@
   @apply flex flex-wrap gap-y-2;
 }
 .ds-select {
+  border-radius: var(--select-border-radius);
   @apply w-auto max-w-full;
 }
 .ds-select__option {

package/src/components/header.css

@@ -1,14 +1,19 @@
 .ds-header {
-  @apply relative bg-primary border-b-8 print:border-b-2 border-tertiary print:bg-white;
-  border-bottom-style: solid;
+  @apply relative border-b-8 print:border-b-2 border-tertiary print:bg-white;
+  background: var(--header-background);
+  border: var(--header-border);
+  border-width: var(--header-border-width);
 }
 .ds-header__content {
-  @apply px-4 py-2 mx-auto max-w-5xl w-full flex justify-between items-center
+  @apply px-4 py-2 mx-auto max-w-5xl w-full flex justify-between items-center flex-wrap sm:flex-nowrap
   print:px-0 gap-3;
 }
 .ds-header__section {
   @apply flex justify-start flex-wrap items-center gap-x-4 gap-y-2
   print:gap-1;
+  &:last-child:not(:first-child) {
+    @apply flex-1 justify-end sm:flex-none sm:justify-start;
+  }
 }
 .ds-header__logo {
   @apply h-12 print:hidden;
@@ -27,11 +32,13 @@
   text-decoration: none;
 }
 .ds-header__title {
-  @apply text-white font-bold text-2xl leading-10 tracking-wide no-underline
+  @apply font-bold text-2xl leading-10 tracking-wide no-underline
   w-auto align-middle hover:no-underline 
   print:text-base-content;
+  color: var(--header__title-color);
   &:hover {
-    @apply text-white;
+    /* @apply text-white; */
+    color: var(--header__title-color-hover);
   }
   &:focus {
     text-decoration: none;
@@ -50,7 +57,8 @@
   .ds-header__section {
     > .ds-link,
     > .ds-dropdown .ds-dropdown__button.ds-link {
-      @apply text-white focus:text-link-active print:text-base-content;
+      @apply focus:text-link-active print:text-base-content;
+      color: var(--color-header-text);
     }
   }
   .ds-dropdown {
@@ -62,7 +70,7 @@
   .ds-link {
     &:hover {
       .ds-svg-icon {
-        fill: var(--color-white);
+        fill: var(--color-header-text-hover);
       }
     }
     &:focus {
@@ -75,7 +83,8 @@
     }
   }
   .ds-phase-banner__text {
-    @apply text-white print:text-base-content;
+    @apply print:text-base-content;
+    color: var(--color-header-text);
   }
 }
 .ds-header__section {
@@ -88,12 +97,12 @@
 .ds-header__section {
   > .ds-svg-icon--burger {
     @apply float-right focus:bg-focus;
-    fill: var(--color-white);
+    fill: var(--color-header-text);
   }
   > .ds-close-btn {
     @apply sm:hidden;
     .ds-svg-icon--close {
-      fill: var(--color-link) !important;
+      fill: var(--color-header-text) !important;
     }
   }
   > .ds-nav__list {
@@ -101,16 +110,16 @@
       > .ds-nav__list-item-link,
       > .ds-nav__list-item-btn {
         &:not(:focus) {
-          @apply text-white;
+          color: var(--color-header-text);
         }
       }
       > .ds-nav__list-item-link--active,
       > .ds-nav__list-item-btn--active {
         &:not(:focus) {
-          @apply text-white !important;
+          color: var(--color-header-text) !important;
         }
         .ds-svg-icon {
-          fill: var(--color-white);
+          fill: var(--color-header-text);
         }
       }
     }

package/src/components/loader.css

@@ -29,11 +29,11 @@
   stroke-miterlimit: 10;
   stroke-width: 42px;
   &.ds-circular-progress__circle--1 {
-    stroke: var(--color-secondary);
+    stroke: var(--circular-progress__circle--1-stroke);
   }
   &.ds-circular-progress__circle--2 {
     --full-length: 470;
-    stroke: var(--color-primary);
+    stroke: var(--circular-progress__circle--2-stroke);
     stroke-dasharray: var(--full-length);
     stroke-dashoffset: 0;
     animation: dash 4s ease-in-out 0s forwards infinite;

package/src/components/notification-banner.css

@@ -1,5 +1,6 @@
 .ds-notification-banner {
   @apply border-5 mb-6 md:mb-8 font-normal print:bg-white;
+  border-radius: var(--notification-banner-border-radius);
   &.ds-notification-banner--dense,
   .ds-dense & {
     @apply border-4 mb-4 md:mb-5;

package/src/components/panel.css

@@ -2,6 +2,7 @@
   @apply box-border mb-4 p-8 border-5 border-transparent text-center
   print:p-4 text-white
   print:border-4 print:text-base-content print:bg-white;
+  border-radius: var(--panel-border-radius);
   &.ds-panel--success {
     @apply bg-success print:border-success;
   }

package/src/components/table.css

@@ -95,14 +95,14 @@
       @apply block;
     }
     .ds-table__cell[data-label]::before {
-      @apply block font-semibold;
+      @apply block font-semibold mb-2;
       content: attr(data-label);
     }
   }
   &.ds-table--stacked-sm {
     @media (min-width: 640px) {
       .ds-table__cell[data-label]::before {
-        content: none;
+        content: none !important;
       }
     }
     .ds-table__header,
@@ -121,14 +121,14 @@
       @apply block sm:table-cell;
     }
     .ds-table__cell[data-label]::before {
-      @apply block font-semibold;
+      @apply block font-semibold mb-2;
       content: attr(data-label);
     }
   }
   &.ds-table--stacked-md {
     @media (min-width: 768px) {
       .ds-table__cell[data-label]::before {
-        content: none;
+        content: none !important;
       }
     }
     .ds-table__header,
@@ -147,7 +147,7 @@
       @apply block md:table-cell;
     }
     .ds-table__cell[data-label]::before {
-      @apply block font-semibold;
+      @apply block font-semibold mb-2;
       content: attr(data-label);
     }
   }
@@ -258,9 +258,6 @@
   }
 }
 .ds-table__header {
-  .ds-dropdown__content {
-    @apply py-0;
-  }
   .ds-dropdown__button:not(:focus) {
     @apply no-underline font-bold text-base-content !important;
   }

package/src/components/tabs.css

@@ -75,6 +75,7 @@
   .ds-tabs__panel {
     @apply bg-base-100 md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-400 mb-0
     print:block print:border-0 print:py-3;
+    border-radius: var(--tabs__panel-border-radius);
     &.ds-tabs__panel--visible {
       @apply block;
     }

package/tailwind.config.js

@@ -130,6 +130,7 @@ module.exports = {
         fit: "fit-content",
       },
       minWidth: {
+        4: "1rem",
         10: "2.5rem",
         32: "8rem",
         52: "13rem",

package/defaultTheme/footer.json

@@ -1,8 +0,0 @@
-{
-  "footer__copyright": {
-    "font-size": {
-      "xs": "var(--text-sm)",
-      "md": "var(--text-base)"
-    }
-  }
-}