@digigov/css 2.0.0-d0adc9fb → 2.0.0-d2ffc726

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "2.0.0-d0adc9fb",
+  "version": "2.0.0-d2ffc726",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -39,7 +39,7 @@
     ]
   },
   "devDependencies": {
-    "@digigov/cli": "2.0.0-d0adc9fb",
+    "@digigov/cli": "2.0.0-d2ffc726",
     "autoprefixer": "10.4.16",
     "postcss-cli": "8.3.0",
     "postcss-import": "13.0.0",
@@ -48,16 +48,16 @@
     "tailwindcss": "3.4.13",
     "nodemon": "2.0.7",
     "next": "13.1.1",
-    "@digigov/postcss-banner": "1.0.5-d0adc9fb",
-    "@digigov/cli-build-tailwind": "2.0.0-d0adc9fb",
+    "@digigov/postcss-banner": "1.0.5-d2ffc726",
+    "@digigov/cli-build-tailwind": "2.0.0-d2ffc726",
     "rimraf": "3.0.2",
     "publint": "0.1.8",
     "stylelint": "15.11.0",
-    "stylelint-plugin-digigov": "1.1.0-d0adc9fb",
+    "stylelint-plugin-digigov": "1.1.0-d2ffc726",
     "prettier": "3.4.2"
   },
   "dependencies": {
-    "@digigov/theme-default": "1.0.0-d0adc9fb",
+    "@digigov/theme-default": "1.0.0-d2ffc726",
     "@fontsource/roboto": "4.4.0",
     "cssnano": "4.1.10",
     "publint": "0.1.8",

package/src/components/accordion.common.css

@@ -0,0 +1,29 @@
+@tailwind utilities;
+
+@layer utilities {
+  .util-accordion__section {
+    @apply border-b border-base-400;
+  }
+  .util-accordion__section-summary {
+    @apply py-4 pr-8 mb-0;
+  }
+  .util-accordion__section-heading {
+    @apply mb-0 transition-all justify-between;
+  }
+  .util-accordion__section-heading-text {
+    @apply no-underline font-semibold;
+  }
+  .util-accordion__section-button {
+    @apply flex justify-between;
+  }
+  .util-accordion__section-button-text {
+    @apply text-base-content;
+  }
+  .util-accordion__section-content {
+    @apply md:pt-2 mb-6 pt-1 mx-0;
+  }
+  .util-accordion__section-button-icon {
+    @apply text-base-content relative ml-2;
+    font-size: var(--text-2xl);
+  }
+}

package/src/components/accordion.css

@@ -1,3 +1,5 @@
+@import './accordion.common.css';
+
 .ds-accordion {
   &.ds-accordion--no-border {
     .ds-accordion__section {
@@ -33,7 +35,12 @@
     }
     .ds-accordion__section-button {
       &::after {
-        @apply right-0;
+        @apply right-0 !important;
+      }
+      &.ds-accordion__section-button--arrows {
+        &::after {
+          @apply right-1 !important;
+        }
       }
     }
   }
@@ -51,13 +58,13 @@
     @apply text-right;
   }
   .ds-accordion__section {
-    @apply border-b border-base-400;
+    @apply util-accordion__section;
     &:first-child {
       @apply border-t;
     }
   }
   .ds-accordion__section-summary {
-    @apply py-4 pr-8 mb-0 transition ease-in-out cursor-pointer;
+    @apply util-accordion__section-summary transition ease-in-out cursor-pointer;
     background: var(--accordion__section-summary-background);
     list-style: none;
     &:hover {
@@ -70,9 +77,11 @@
       .ds-accordion__section-button {
         @apply underline bg-focus;
         text-decoration-thickness: 2px;
-        &::after {
-          @apply underline bg-focus;
-          text-decoration-thickness: 2px;
+        &:not(.ds-accordion__section-button--arrows) {
+          &::after {
+            @apply underline bg-focus;
+            text-decoration-thickness: 2px;
+          }
         }
       }
     }
@@ -86,18 +95,25 @@
   .ds-accordion__section-header {
   }
   .ds-accordion__section-heading {
-    @apply no-underline font-semibold 
-    mb-0 transition-all justify-between cursor-pointer;
+    @apply util-accordion__section-heading util-accordion__section-heading-text cursor-pointer;
     font-size: var(--accordion__section-heading-font-size);
     &:active {
       @apply ring-link-visited;
     }
   }
   .ds-accordion__section-button {
-    @apply text-base-content focus:underline flex justify-between;
+    @apply util-accordion__section-button util-accordion__section-button-text focus:underline transition ease-in-out;
     &::after {
-      @apply text-2xl text-base-content float-right relative -right-8 ml-2;
+      @apply util-accordion__section-button-icon float-right -right-8;
       content: '+';
+      line-height: 2rem;
+    }
+    &.ds-accordion__section-button--arrows {
+      &::after {
+        @apply h-3 w-3 rotate-45 border-b-3 border-r-3 border-base-content top-1.5 -right-7 bg-transparent !important;
+        transition: all 0.3s ease;
+        content: '';
+      }
     }
   }
   .ds-accordion__section[open] {
@@ -108,10 +124,16 @@
       &::after {
         content: '\2013';
       }
+      &.ds-accordion__section-button--arrows {
+        &::after {
+          @apply -rotate-[135deg] top-2.5 !important;
+          content: '';
+        }
+      }
     }
   }
   .ds-accordion__section-content {
-    @apply hidden md:pt-2 mb-6 pt-1 mx-0;
+    @apply util-accordion__section-content hidden;
     > *:last-child {
       @apply mb-0;
     }

package/src/components/accordion.native.css

@@ -0,0 +1,27 @@
+@import './accordion.common.css';
+
+.ds-accordion__section {
+  @apply util-accordion__section;
+}
+.ds-accordion__section__first-child {
+  @apply border-t;
+}
+.ds-accordion__section-summary {
+  @apply util-accordion__section-summary flex-1;
+}
+.ds-accordion__section-button {
+  @apply util-accordion__section-button;
+}
+.ds-accordion__section-button__text {
+  @apply util-accordion__section-heading-text util-accordion__section-button-text;
+  font-size: var(--text-xl);
+}
+.ds-accordion__section-content {
+  @apply util-accordion__section-content;
+}
+.ds-accordion__section-content__text {
+  font-size: var(--text-md);
+}
+.ds-accordion__section-button-icon {
+  @apply util-accordion__section-button-icon;
+}

package/src/components/autocomplete.css

@@ -8,7 +8,7 @@
   clip: 'rect(0 0 0 0)';
 }
 .ds-autocomplete__hint {
-  @apply absolute text-base-400;
+  @apply h-full absolute text-base-400;
 }
 .ds-autocomplete__hint,
 .ds-autocomplete__input {
@@ -62,6 +62,10 @@
       }
     }
   }
+  .ds-autocomplete__hint,
+  .ds-autocomplete__input {
+    @apply h-full;
+  }
 }
 .ds-autocomplete__multi-input {
   @apply flex-1 w-full focus:border-0 focus:outline-0 bg-base-100;

package/src/components/button.common.css

@@ -5,7 +5,7 @@
 
 @layer utilities {
   .util-btn {
-    @apply m-0 mb-8 flex items-center gap-x-3;
+    @apply m-0 mb-8 flex items-center;
     border-radius: var(--btn-border-radius);
     padding-right: var(--btn-padding-x);
     padding-left: var(--btn-padding-x);

package/src/components/button.css

@@ -3,7 +3,7 @@
 .ds-btn[type='submit'],
 .ds-btn[type='button'],
 .ds-btn[type='reset'] {
-  @apply util-btn util-btn-text min-h-10 md:min-h-12 w-max cursor-pointer;
+  @apply util-btn util-btn-text min-h-10 md:min-h-12 w-max gap-x-3 cursor-pointer;
   &:focus {
     box-shadow:
       0 0 0 2px var(--color-white),

package/src/components/card.css

@@ -16,7 +16,7 @@
     }
     &.ds-card--dense,
     .ds-dense & {
-      @apply p-4 pt-3;
+      @apply py-2 px-2;
     }
   }
   &.ds-card--border-top {

package/src/components/code.css

@@ -41,7 +41,7 @@
 .ds-code--type,
 .ds-code--variable.language_ {
   /* prettylights-syntax-keyword */
-  color: var(--color-red-300);
+  color: var(--color-red-300) !important;
 }
 .ds-code--title,
 .ds-code--title.class_,
@@ -61,13 +61,13 @@
 .ds-code--selector-class,
 .ds-code--selector-id {
   /* prettylights-syntax-constant */
-  color: var(--color-green-400);
+  color: var(--color-green-400) !important;
 }
 .ds-code--regexp,
 .ds-code--string,
 .ds-code--meta .ds-code--string {
   /* prettylights-syntax-string */
-  color: var(--color-blue-600);
+  color: var(--color-blue-600) !important;
 }
 .ds-code--built_in,
 .ds-code--symbol {
@@ -85,7 +85,7 @@
 .ds-code--selector-tag,
 .ds-code--selector-pseudo {
   /* prettylights-syntax-entity-tag */
-  color: var(--color-green-400);
+  color: var(--color-green-400) !important;
 }
 .ds-code--subst {
   /* prettylights-syntax-storage-modifier-import */

package/src/components/copy-to-clipboard.native.css

@@ -1,5 +1,3 @@
-/* stylelint-disable digigov/enforce-class-selector-namespace */
-
 .ds-copy-to-clipboard {
   @apply flex z-10;
 }
@@ -7,9 +5,9 @@
   @apply hidden w-0 h-0;
 }
 .ds-copy-to-clipboard__before {
+  @apply w-4 h-4 border-t-8 border-l-8 border-success absolute bottom-1;
   /* stylelint-disable-next-line plugin/no-react-native-incompatible-css */
-  @apply w-4 h-4 border-t-8 border-l-8 border-success transform rotate-45
-  absolute bottom-1;
+  transform: rotate(45deg);
   left: 50%;
 }
 .ds-copy-to-clipboard__message {

package/src/components/details.css

@@ -24,6 +24,10 @@
 }
 .ds-details__content {
   @apply util-details__content;
+  &.ds-details__content--secondary {
+    @apply border-0 bg-base-200 py-4 mt-2;
+    border-radius:0 0 0.25rem 0.25rem;
+  }
   > *:last-child {
     @apply mb-0;
   }

package/src/components/filter.css

@@ -74,7 +74,7 @@
   @apply p-0;
 }
 .ds-filter__heading {
-  @apply mb-4;
+  @apply mb-4 flex justify-between align-baseline items-baseline;
 }
 .ds-filter__selected {
   @apply bg-base-200 p-4 m-0 rounded;

package/src/components/footer.css

@@ -100,11 +100,12 @@
     @apply print:hidden;
   }
   .ds-link {
-    --link-color: var(--color-footer);
+    --link-color: var(--color-footer-link);
+    --link-color-hover: var(--color-footer-link-hover);
     @apply print:text-base-content;
   }
   .ds-body {
-    --body-color: var(--color-footer);
+    --body-color: var(--color-footer-text);
     @apply print:text-base-content;
   }
 }

package/src/components/form.css

@@ -77,6 +77,7 @@
   }
 }
 .ds-textarea {
+  @apply min-h-12;
   border-radius: var(--textarea-border-radius);
 }
 .ds-input,
@@ -113,6 +114,9 @@
 .ds-uploaded-file {
   @apply flex flex-wrap gap-x-4 mb-0;
 }
+.ds-uploaded-file-border {
+  @apply p-4 border border-base-300;
+}
 .ds-date-input {
   @apply flex flex-wrap gap-y-2;
   &.ds-date-input--dense,
@@ -219,12 +223,12 @@
   &.ds-grid {
     @apply grid gap-4;
     .ds-fieldset {
-      @apply grid gap-4;
-      :not(.ds-field) {
+      @apply grid gap-4 grid-cols-12;
+      :not(.ds-field, .ds-grid-item) {
         @apply col-span-12;
       }
     }
-    :not(.ds-field) {
+    :not(.ds-field, .ds-grid-item) {
       @apply col-span-12;
     }
   }
@@ -245,7 +249,7 @@
 }
 .ds-uploaded-file {
   .ds-link {
-    @apply h-fit text-lg;
+    @apply h-fit;
   }
 }
 .ds-dashed--border {

package/src/components/header.css

@@ -84,7 +84,7 @@
       }
     }
     .ds-svg-icon {
-      fill: var(--color-white);
+      fill: var(--color-header-text);
     }
   }
   .ds-phase-banner__message {

package/src/components/layout.css

@@ -43,7 +43,7 @@
   @apply util-bottom w-full box-border;
 }
 .ds-btn-group {
-  @apply util-btn-group gap-4 mb-6;
+  @apply util-btn-group gap-x-4 gap-y-4 mb-6;
 }
 @media print {
   /* When ds-btn-group is empty at print, content at :after limits its height.  */

package/src/components/misc.css

@@ -34,7 +34,7 @@
   }
 }
 
-.ds-cookie-banner {
+.ds-banner-container {
   @apply bg-base-200;
 }
 

package/src/components/notification-banner.common.css

@@ -29,7 +29,7 @@
     print:text-base-content print:pt-2;
   }
   .util-notification-banner__content {
-    @apply bg-base-100 p-4 md:p-5;
+    @apply bg-base-100 px-4 py-4 md:px-5 md:py-5;
   }
   .util-notification-banner__content-text {
     @apply text-base-content;

package/src/components/notification-banner.css

@@ -24,7 +24,8 @@
       }
     }
   }
-  &.ds-notification-banner--error {
+  &.ds-notification-banner--error,
+  &.ds-notification-banner--error-group {
     @apply util-notification-banner--error;
     .ds-notification-banner__link {
       &:link:not(:focus) {
@@ -32,6 +33,23 @@
       }
     }
   }
+  &.ds-notification-banner--error-group {
+    @apply border-0 border-l-5;
+    .ds-notification-error-group-banner__content {
+      @apply flex gap-3 w-full p-3 md:p-4 bg-base-200 print:bg-white;
+      .ds-notification-banner__icon--error-group {
+        @apply text-base-content-invert font-bold bg-error text-3xl leading-10 text-center 
+          rounded-3xl md:min-h-10 min-w-10 h-fit
+          print:bg-white print:border-2 print:border-base-content print:text-base-content;
+      }
+    }
+    .ds-notification-banner__text-error-group {
+      @apply mt-1;
+      .ds-list {
+        @apply mb-2;
+      }
+    }
+  }
 }
 .ds-notification-banner__header {
   @apply text-white p-0 m-0 text-base md:text-lg

package/src/components/skeleton.common.css

@@ -0,0 +1,20 @@
+@tailwind utilities;
+
+@layer utilities {
+  .util-skeleton {
+    @apply bg-base-300 w-full max-w-full;
+  }
+  .util-skeleton--circular {
+    @apply rounded-full;
+  }
+  .util-skeleton--rectangular {
+    @apply h-4;
+  }
+  .util-skeleton--button {
+    @apply mb-8 min-h-10 md:min-h-12 px-6 
+    border-b-2 border-gray-400 flex items-center justify-center;
+  }
+  .util-skeleton__line {
+    @apply bg-base-400 w-full max-w-full max-h-full;
+  }
+}

package/src/components/skeleton.css

@@ -1,9 +1,8 @@
-.ds-skeleton {
-  @apply block bg-base-300 h-auto w-full max-w-full rounded-sm;
+@import './skeleton.common.css';
 
-  /* max-width: 105ch; */
+.ds-skeleton {
+  @apply util-skeleton block h-auto rounded-sm;
   &.ds-skeleton--text {
-    /* @apply text-lg; */
     &::before {
       content: '\00a0';
       visibility: hidden;
@@ -26,16 +25,15 @@
     }
   }
   &.ds-skeleton--circular {
-    border-radius: 50%;
+    @apply util-skeleton--circular;
   }
   &.ds-skeleton--rectangular {
+    @apply util-skeleton--rectangular;
   }
   &.ds-skeleton--button {
-    @apply mb-8 w-fit min-h-10 md:min-h-12 px-6 py-3
-    border-b-2 border-gray-400
-    flex items-center justify-center;
+    @apply util-skeleton--button py-3 w-fit;
     .ds-skeleton__line {
-      @apply block bg-base-400 w-full max-w-full max-h-full visible;
+      @apply util-skeleton__line visible;
       &::before {
         content: '\00a0';
       }
@@ -50,7 +48,6 @@
     @apply w-fit;
   }
   &.ds-skeleton--animate {
-    /* @apply animate-pulse; */
     position: relative;
     overflow: hidden;
     mask-image: radial-gradient(white, black);

package/src/components/skeleton.native.css

@@ -0,0 +1,53 @@
+@import './skeleton.common.css';
+
+.ds-skeleton {
+  @apply util-skeleton min-h-8 flex-1 rounded-md;
+}
+.ds-skeleton--text {
+  @apply flex-1 h-4;
+}
+.ds-skeleton--font-xs {
+  @apply h-4 mb-3 !important;
+}
+.ds-skeleton--font-sm {
+  @apply h-6 mb-4 !important;
+}
+.ds-skeleton--font-md {
+  @apply h-10 mb-5 !important;
+}
+.ds-skeleton--font-lg {
+  @apply h-14 mb-6 !important;
+}
+.ds-skeleton--font-xl {
+  @apply h-16 mb-8 !important;
+}
+.ds-skeleton--circular {
+  @apply util-skeleton--circular;
+}
+.ds-skeleton--rectangular {
+  @apply util-skeleton--rectangular;
+}
+.ds-skeleton--button {
+  @apply util-skeleton--button py-6;
+}
+.ds-skeleton__line {
+  @apply util-skeleton__line h-4;
+}
+.ds-skeleton__line--size-default {
+  @apply h-4 w-36;
+}
+.ds-skeleton--width-fit-content {
+  @apply flex-1;
+}
+.ds-skeleton--animate {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@keyframes pulse {
+  0%,
+  100% {
+    @apply opacity-100;
+  }
+  50% {
+    @apply opacity-50;
+  }
+}

package/src/components/stack.css

@@ -5,10 +5,10 @@
   &.ds-stack--row {
     @apply util-stack--row;
   }
-  &.ds-stack--reverse-row {
+  &.ds-stack--row-reverse {
     @apply util-stack--reverse-row;
   }
-  &.ds-stack--col-reverse {
+  &.ds-stack--column-reverse {
     @apply util-stack--col-reverse;
   }
   &.ds-stack--nowrap {

package/src/components/summary-list.common.css

@@ -5,21 +5,33 @@
   .util-summary-list {
     @apply m-0 mb-6 sm:mb-8 w-full sm:w-full;
   }
+  .util-summary-list--error {
+    @apply border-l-5 border-error-text pl-4;
+  }
   .util-summary-list-text {
     font-size: var(--summary-list-font-size);
   }
   .util-summary-list__row {
-    @apply sm:flex pb-4 mb-4 border-b border-solid border-base-300 sm:pb-0 sm:mb-0 sm:border-0 print:flex print:flex-row print:flex-nowrap;
+    @apply border-b border-base-300 print:flex print:flex-row print:flex-nowrap;
+  }
+  .util-summary-list__row--no-border {
+    @apply border-0;
   }
   .util-summary-list__key {
     @apply mb-1 sm:w-3/12;
   }
+  .util-summary-list__key--error-text {
+    @apply text-error-text font-semibold;
+  }
   .util-summary-list__key-text {
     @apply font-bold;
   }
   .util-summary-list__value {
     @apply sm:flex-1;
   }
+  .util-summary-list__value--error-text {
+    @apply text-error-text;
+  }
   .util-summary-list__actions {
     @apply sm:w-3/12 sm:pr-0 sm:text-right;
   }

package/src/components/summary-list.css

@@ -4,13 +4,16 @@
 .ds-summary-list {
   @apply util-summary-list sm:table sm:table-fixed util-summary-list-text;
   &.ds-summary-list--no-border {
-    > .ds-summary-list__row:last-child {
-      @apply border-b-0 pb-0 mb-0;
+    > .ds-summary-list__row {
+      @apply border-0 pb-0;
+      &:last-child {
+        @apply mb-0;
+      }
     }
     .ds-summary-list__key,
     .ds-summary-list__value,
     .ds-summary-list__actions {
-      @apply sm:border-0 pb-2;
+      @apply border-0 pb-0 sm:pb-2;
     }
   }
   &.ds-summary-list--no-last-border {
@@ -23,6 +26,9 @@
       }
     }
   }
+  &.ds-summary-list--error {
+    @apply util-summary-list--error;
+  }
 }
 
 .ds-summary-list__row {
@@ -31,7 +37,7 @@
     .ds-summary-list__key,
     .ds-summary-list__value,
     .ds-summary-list__actions {
-      @apply sm:border-0 pb-2;
+      @apply border-0 pb-0 sm:pb-2;
     }
   }
 }
@@ -100,6 +106,9 @@
   &.ds-summary-list__key--lg-9 {
     @apply util-summary-list__key--lg-9;
   }
+    &.ds-summary-list__key--error {
+      @apply util-summary-list__key--error-text;
+  }
 }
 @media print {
   .ds-summary-list__key {
@@ -108,6 +117,9 @@
 }
 .ds-summary-list__value {
   @apply util-summary-list__value;
+      &.ds-summary-list__value--error {
+      @apply util-summary-list__value--error-text;
+  }
 }
 .ds-summary-list__actions {
   @apply util-summary-list__actions;