@digigov/css 2.0.0-a402a664 → 2.0.0-a594a958

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "2.0.0-a402a664",
+  "version": "2.0.0-a594a958",
   "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-a402a664",
+    "@digigov/cli": "2.0.0-a594a958",
     "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-a402a664",
-    "@digigov/cli-build-tailwind": "2.0.0-a402a664",
+    "@digigov/postcss-banner": "1.0.5-a594a958",
+    "@digigov/cli-build-tailwind": "2.0.0-a594a958",
     "rimraf": "3.0.2",
     "publint": "0.1.8",
     "stylelint": "15.11.0",
-    "stylelint-plugin-digigov": "1.1.0-a402a664",
+    "stylelint-plugin-digigov": "1.1.0-a594a958",
     "prettier": "3.4.2"
   },
   "dependencies": {
-    "@digigov/theme-default": "1.0.0-a402a664",
+    "@digigov/theme-default": "1.0.0-a594a958",
     "@fontsource/roboto": "4.4.0",
     "cssnano": "4.1.10",
     "publint": "0.1.8",

package/src/components/accordion.css

@@ -1,6 +1,7 @@
 @import './accordion.common.css';
 
 .ds-accordion {
+  @apply mb-4 md:mb-8;
   &.ds-accordion--no-border {
     .ds-accordion__section {
       @apply border-0 !important;
@@ -27,7 +28,11 @@
   &.ds-accordion--secondary {
     .ds-accordion__section {
       .ds-accordion__section-summary {
-        @apply px-4 bg-base-200;
+        --accordion__section-summary-background: var(--color-base-200);
+        @apply px-4;
+        &:hover {
+          --accordion__section-summary-background-hover: var(--color-base-300);
+        }
       }
       .ds-accordion__section-content {
         @apply px-4;
@@ -35,7 +40,12 @@
     }
     .ds-accordion__section-button {
       &::after {
-        @apply right-0;
+        @apply right-0 !important;
+      }
+      &.ds-accordion__section-button--arrows {
+        &::after {
+          @apply right-1 !important;
+        }
       }
     }
   }
@@ -72,9 +82,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;
+          }
         }
       }
     }
@@ -95,12 +107,19 @@
     }
   }
   .ds-accordion__section-button {
-    @apply util-accordion__section-button util-accordion__section-button-text focus:underline;
+    @apply util-accordion__section-button util-accordion__section-button-text focus:underline transition ease-in-out;
     &::after {
       @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] {
     .ds-accordion__section-content {
@@ -110,6 +129,12 @@
       &::after {
         content: '\2013';
       }
+      &.ds-accordion__section-button--arrows {
+        &::after {
+          @apply -rotate-[135deg] top-2.5 !important;
+          content: '';
+        }
+      }
     }
   }
   .ds-accordion__section-content {

package/src/components/blockquote.common.css

@@ -9,6 +9,6 @@
     line-height: var(--blockquote-line-height);
   }
   .util-blockquote--dense {
-    @apply mt-3 md:mb-6 p-3 border-l-6;
+    @apply mb-3 md:mb-6 p-3 border-l-6;
   }
 }

package/src/components/breadcrumbs.css

@@ -1,5 +1,5 @@
 .ds-breadcrumbs {
-  @apply block font-normal text-base-content mb-2;
+  @apply block font-normal text-base-content mb-2 md:mb-4;
 }
 .ds-breadcrumbs__list {
   @apply block m-0 p-0 list-none;

package/src/components/card.common.css

@@ -2,7 +2,7 @@
 
 @layer utilities {
   .util-card {
-    @apply mb-7 text-base-content max-w-full bg-base-100;
+    @apply mb-4 md:mb-8 text-base-content max-w-full bg-base-100;
     border-radius: var(--card-border-radius);
   }
   .util-card--border {

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

@@ -1,8 +1,6 @@
 .ds-code-block__container {
-  @apply p-4 bg-base-200 border border-base-300 w-full overflow-x-auto relative;
-
-  /* experimental to see if it's disturbing */
-  max-height: 95vh;
+  @apply mb-4 md:mb-8 p-4 bg-base-200 border border-base-300 w-full overflow-x-auto relative;
+  max-height: 95vh; /* experimental to see if it's disturbing */
   & > pre {
     @apply bg-transparent p-0 m-0;
     font: inherit;
@@ -33,6 +31,7 @@
 }
 
 /* copied styles from 'highlight.js/styles/github.css' */
+/* stylelint-disable-next-line digigov/enforce-class-selector-namespace */
 .ds-code--doctag,
 .ds-code--keyword,
 .ds-code--meta .ds-code--keyword,
@@ -43,6 +42,7 @@
   /* prettylights-syntax-keyword */
   color: var(--color-red-300) !important;
 }
+/* stylelint-disable-next-line digigov/enforce-class-selector-namespace */
 .ds-code--title,
 .ds-code--title.class_,
 .ds-code--title.class_.inherited__,
@@ -118,6 +118,7 @@
   color: var(--color-red-500);
   background-color: rgba(var(--color-red-100-rgb), 0.3);
 }
+/* stylelint-disable-next-line digigov/enforce-class-selector-namespace */
 .ds-code--char.escape_,
 .ds-code--link,
 .ds-code--params,

package/src/components/details.common.css

@@ -2,7 +2,7 @@
 
 @layer utilities {
   .util-details {
-    @apply md:mb-8 mb-4;
+    @apply mb-4 md:mb-8;
   }
   .util-details-text {
     @apply md:text-lg;

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/drawer.css

@@ -53,7 +53,7 @@
   }
 }
 .ds-drawer__heading {
-  @apply p-0 mb-4 flex justify-between align-baseline;
+  @apply p-0 mb-2 md:mb-4 flex justify-between align-baseline;
   .ds--drawer__close-icon {
     @apply m-0;
   }

package/src/components/dropdown.common.css

@@ -9,7 +9,7 @@
   }
   .util-dropdown__content {
     @apply border-base-400 bg-base-100
-      max-w-xs min-w-full absolute transition z-3 mr-4 -mt-4;
+      max-w-xs min-w-full absolute transition z-3 mr-4 mt-0 md:-mt-4;
     box-shadow:
       0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
       0 -2px 0 var(--color-base-500);

package/src/components/fillable.css

@@ -1,5 +1,5 @@
 .ds-fillable-text {
-  @apply lg:mb-8 mb-4 md:mb-8 p-4 border-l-6 border-base-300 bg-base-200
+  @apply 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;
 }
 .ds-labeled-text {

package/src/components/filter.css

@@ -1,20 +1,20 @@
 .ds-filter-container {
-  @apply fixed left-0 top-0 overflow-auto w-full h-full
+  @apply fixed left-0 top-0 w-full h-full
   flex justify-center items-center content-center
   z-50 bg-opacity-50 bg-base-700;
   &.ds-filter-container--position-relative-always {
-    @apply bg-transparent h-fit z-2 overflow-visible relative block !important;
+    @apply bg-transparent h-fit z-2 relative block !important;
   }
   &.ds-filter-container--position-relative-sm {
-    @apply sm:bg-transparent sm:h-fit sm:z-2 sm:overflow-visible sm:relative;
+    @apply sm:bg-transparent sm:h-fit sm:z-2 sm:relative;
     @apply sm:block !important;
   }
   &.ds-filter-container--position-relative-md {
-    @apply md:bg-transparent md:h-fit md:z-2 md:overflow-visible md:relative;
+    @apply md:bg-transparent md:h-fit md:z-2 md:relative;
     @apply md:block !important;
   }
   &.ds-filter-container--position-relative-lg {
-    @apply lg:bg-transparent lg:h-fit lg:z-2 lg:overflow-visible lg:relative;
+    @apply lg:bg-transparent lg:h-fit lg:z-2 lg:relative;
     @apply lg:block !important;
   }
   &.ds-filter-container--closed {
@@ -25,16 +25,16 @@
   @apply bg-base-100 fixed top-0 right-0 bottom-0 overflow-y-scroll w-4/5 max-w-md p-4;
   box-shadow: 0 0 30px rgba(var(--color-base-900-rgb), 0.9);
   &.ds-filter--position-relative-always {
-    @apply relative w-full max-w-full shadow-none mb-4 md:mb-8;
+    @apply relative w-full max-w-full shadow-none overflow-visible mb-4 md:mb-8;
   }
   &.ds-filter--position-relative-sm {
-    @apply sm:relative sm:w-full sm:shadow-none sm:mb-4 md:mb-8 sm:max-w-full;
+    @apply sm:relative sm:w-full sm:shadow-none sm:overflow-visible sm:mb-4 md:mb-8 sm:max-w-full;
     &:not(.ds-filter--border) {
       @apply sm:p-0;
     }
   }
   &.ds-filter--position-relative-md {
-    @apply md:relative md:w-full md:shadow-none md:mb-8 md:max-w-full;
+    @apply md:relative md:w-full md:shadow-none md:overflow-visible md:mb-8 md:max-w-full;
     &:not(.ds-filter--border) {
       @apply md:p-0;
     }
@@ -83,14 +83,14 @@
   @apply flex flex-wrap mb-4 md:mb-8 justify-between gap-x-2 gap-y-4;
 }
 .ds-input__search-btn {
-  @apply shadow-none !important;
+  @apply shadow-none mb-0 !important;
   @apply px-4 py-2 w-min m-0 ml-3 flex gap-2;
 }
 .ds-search {
-  @apply flex w-full max-w-3xl;
+  @apply flex w-full max-w-3xl mb-4 md:mb-8;
 }
 .ds-results__action-bar {
-  @apply py-2 mb-8 flex flex-wrap justify-start gap-4 items-baseline;
+  @apply py-2 mb-4 md:mb-8 flex flex-wrap justify-start gap-4 items-baseline;
   > * {
     @apply mb-0;
   }
@@ -99,7 +99,7 @@
   @apply flex flex-wrap justify-between items-baseline gap-x-2;
 }
 .ds-results__actions {
-  @apply flex flex-wrap gap-4 justify-start min-w-min mb-4;
+  @apply flex flex-wrap gap-4 justify-start min-w-min mb-2 md:mb-4;
 }
 .ds-link-filters {
   @apply block md:hidden;

package/src/components/header.css

@@ -65,6 +65,10 @@
         }
       }
     }
+    > .ds-body {
+      @apply print:text-base-content;
+      color: var(--color-header-text);
+    }
   }
   .ds-dropdown {
     @apply print:hidden;

package/src/components/misc.css

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

package/src/components/panel.common.css

@@ -2,7 +2,7 @@
 
 @layer utilities {
   .util-panel {
-    @apply mb-4 p-8 border-5 border-transparent 
+    @apply mb-4 md:mb-8 p-8 border-5 border-transparent 
         print:p-4 print:border-4 print:text-base-content print:bg-white;
     border-radius: var(--panel-border-radius);
   }

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

@@ -5,7 +5,7 @@
 
 @layer utilities {
   .util-phase-banner {
-    @apply py-2 mb-4;
+    @apply py-2 mb-4 md:mb-8;
   }
   .util-phase-banner--underline {
     @apply border-b border-base-500;

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/stepnav.css

@@ -1,5 +1,5 @@
 .ds-step-nav {
-  @apply mb-8 md:mb-12;
+  @apply mb-4 md:mb-8;
   &.ds-step-nav--dense,
   .ds-dense & {
     @apply mb-4 md:mb-8;
@@ -151,7 +151,7 @@
     -0.1em 0 0 var(--color-white);
 }
 .ds-nav-step__accordion__content {
-  @apply md:pt-2 mb-6 pt-1 mx-0;
+  @apply md:pt-2 mb-4 md:mb-8 pt-1 mx-0;
   > *:last-child {
     @apply mb-0;
   }

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

@@ -3,7 +3,10 @@
 
 @layer utilities {
   .util-summary-list {
-    @apply m-0 mb-6 sm:mb-8 w-full sm:w-full;
+    @apply m-0 mb-4 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);
@@ -17,12 +20,18 @@
   .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

@@ -26,6 +26,9 @@
       }
     }
   }
+  &.ds-summary-list--error {
+    @apply util-summary-list--error;
+  }
 }
 
 .ds-summary-list__row {
@@ -103,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 {
@@ -111,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;

package/src/components/table.css

@@ -1,20 +1,20 @@
 .ds-table__caption {
-  @apply table-caption text-left font-bold;
+  @apply table-caption text-left font-bold mx-0 antialiased;
   &.ds-table__caption--sm {
-    @apply md:text-2xl text-lg font-bold mx-0 md:mb-6 mb-4 antialiased;
+    @apply text-lg md:text-xl mb-3 md:mb-5;
   }
   &.ds-table__caption--md {
-    @apply md:text-3xl text-xl font-bold mx-0 md:mb-8 mb-6 antialiased;
+    @apply text-xl md:text-2xl mb-6 md:mb-8;
   }
   &.ds-table__caption--lg {
-    @apply md:text-4xl text-2xl font-bold mx-0 md:mb-9 mb-7 antialiased;
+    @apply text-2xl md:text-4xl mb-8 md:mb-10;
   }
   &.ds-table__caption--xl {
-    @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 md:mb-10 mb-8 max-w-2xl antialiased;
+    @apply text-3xl md:text-5xl md:leading-tight leading-tight mb-8 md:mb-10 max-w-2xl;
   }
 }
 .ds-table-container {
-  @apply w-full overflow-x-auto md:mb-10 mb-6;
+  @apply w-full overflow-x-auto mb-4 md:mb-8;
   &.ds-table-container--border {
     @apply border border-base-300 p-2;
   }
@@ -23,8 +23,8 @@
   }
 }
 .ds-table {
-  @apply w-full border-collapse table;
-  @apply md:mb-10 mb-6 text-base-content md:text-lg text-base font-normal antialiased;
+  @apply w-full border-collapse table
+  mb-4 md:mb-8 text-base-content md:text-lg text-base font-normal antialiased;
   border-spacing: 0;
   &.ds-table--vertical-lines {
     .ds-table__cell.ds-table__cell--border,
@@ -251,6 +251,12 @@
   &.ds-table__cell--break-all {
     @apply break-all;
   }
+  &.ds-table__cell--warning {
+   @apply border-l-4 border-l-warning pl-2;
+  }
+  &.ds-table__cell--error {
+   @apply border-l-5 border-l-error pl-2;
+  }
 }
 .ds-table__header--numeric,
 .ds-table__cell--numeric {

package/src/components/tabs.css

@@ -1,4 +1,5 @@
 .ds-tabs {
+  @apply mb-4 md:mb-8;
   scroll-behavior: smooth;
   &.ds-tabs--dense,
   .ds-dense & {
@@ -31,20 +32,22 @@
   @apply relative px-4 py-1 md:py-2 m-0 shadow-none cursor-pointer text-link
   md:float-left md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2 md:text-base-content
   print:hidden;
+  transition: 0.2s ease-in-out padding-right, padding-left;
   word-break: break-word;
   &.ds-tabs__list-item-selected {
-    @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:py-4 md:-mt-1;
-    margin-bottom: -1px;
+    @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:pt-3 md:pb-5 md:-mt-1 md:mb-[-1px];
+    transition: 0.2s ease-in-out padding-right, padding-left;
     &:hover {
       text-decoration-thickness: 2px;
     }
   }
 }
 .ds-tabs__tab {
-  @apply text-lg no-underline hover:underline;
+  @apply no-underline hover:underline;
+  font-size: var(--tabs__tab-font-size);
+  line-height: var(--tabs__tab-line-height);
   &::before {
-    @apply absolute top-0 left-0 text-base-content;
-    @apply md:content-[''] !important;
+    @apply absolute top-0 left-0 text-base-content md:!content-[''];
     content: '_';
   }
   &:focus {

package/src/components/task-list.css

@@ -1,20 +1,26 @@
 .ds-task-list {
-  @apply mb-4 pl-6 pb-2;
+  @apply mb-4 md:mb-8 pl-6 pb-2;
+  &.ds-task-list--dense,
+  .ds-dense & {
+    .ds-task-list__item {
+      @apply mb-3 md:mb-6;
+    }
+  }
 }
 .ds-task-list__item {
-  @apply mb-8 md:mb-10;
+  @apply mb-10 md:mb-12;
 }
 .ds-task-list__heading {
-  @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2;
+  @apply text-2xl md:text-3xl font-bold mx-0 mb-3 md:mb-6;
   &.ds-task-list__heading--md {
-    @apply md:text-2xl text-xl md:mb-4 mb-2;
+    @apply text-xl md:text-2xl mb-2 md:mb-4;
   }
   &.ds-task-list__heading--sm {
-    @apply md:text-lg text-base md:mb-3 mb-1;
+    @apply text-base md:text-lg mb-1 md:mb-3;
   }
 }
 .ds-task-list__content {
-  @apply mb-4;
+  @apply mb-2 md:mb-4;
 }
 .ds-task-list__content__tag {
   @apply px-2 py-1 mr-2 inline-block font-sans text-sm uppercase tracking-widest print:border-2 print:bg-white print:mr-4;
@@ -33,7 +39,6 @@
 
 .ds-task-list--dense {
   .ds-task-list__item {
-    @apply mb-4 md:mb-6;
     .ds-summary-list {
       @apply mb-4 md:mb-6;
     }

package/src/components/timeline.css

@@ -1,10 +1,10 @@
 .ds-timeline {
-  @apply mb-4 pl-6 pb-2 border-l-4 border-secondary;
+  @apply mb-4 md:mb-8 pl-6 pb-2 border-l-4 border-secondary;
   &.ds-timeline--dense,
   .ds-dense & {
     @apply pb-0 border-l-3;
     .ds-timeline__item {
-      @apply mb-4 md:mb-6;
+      @apply mb-3 md:mb-6;
     }
     .ds-timeline__heading {
       @apply mb-2;
@@ -20,7 +20,7 @@
   @apply mb-10 md:mb-12;
 }
 .ds-timeline__heading {
-  @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2 relative;
+  @apply text-2xl md:text-3xl font-bold mx-0 mb-3 md:mb-6 relative;
   &::before {
     @apply block absolute top-4 -left-6 w-4 
     border-b-4 border-secondary;
@@ -28,22 +28,22 @@
   }
 }
 .ds-timeline__heading-md {
-  @apply md:text-2xl text-xl md:mb-4 mb-2;
+  @apply text-xl md:text-2xl mb-2 md:mb-4;
   &::before {
     @apply top-3 w-3;
   }
 }
 .ds-timeline__heading-sm {
-  @apply md:text-lg text-base md:mb-3 mb-1;
+  @apply text-base md:text-lg mb-1 md:mb-3;
   &::before {
     @apply top-2.5 w-3;
   }
 }
 .ds-timeline__content {
-  @apply mb-4;
+  @apply mb-2 md:mb-4;
 }
 .ds-timeline__actions {
-  @apply flex flex-wrap items-center gap-4 mb-6;
+  @apply flex flex-wrap items-center gap-4 mb-0;
 }
 
 /* overrides */
@@ -54,6 +54,7 @@
   }
 }
 .ds-timeline__actions {
+  .ds-btn-group,
   .ds-btn,
   .ds-link {
     @apply mb-0;

package/src/components/typography.common.css

@@ -112,7 +112,7 @@
 
   /* List */
   .util-list {
-    @apply md:mb-8 mb-4 mt-4 text-base-content;
+    @apply mb-4 md:mb-8 mt-4 text-base-content;
   }
   .util-list-bullet {
     @apply pl-4;

package/src/components/warning-text.common.css

@@ -4,7 +4,7 @@
 
 @layer utilities {
   .util-warning-text {
-    @apply flex;
+    @apply flex mb-4 md:mb-8;
   }
   .util-warning-text-text {
     font-size: var(--warning-text-font-size);

package/src/components/warning-text.css

@@ -5,6 +5,7 @@
   font-size: var(--warning-text-font-size);
   &.ds-warning-text--dense,
   .ds-dense & {
+    @apply mb-3 md:mb-6;
     .ds-warning-text__icon {
       @apply mr-4 md:mr-5;
     }