@digigov/css 2.0.0-298cfc51 → 2.0.0-32ae417f

package/package.json

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

package/src/base/index.native.css

@@ -1,2 +0,0 @@
-
-

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 {
@@ -35,6 +37,11 @@
       &::after {
         @apply right-0;
       }
+      &.ds-accordion__section-button--arrows {
+        &::after {
+          @apply right-1;
+        }
+      }
     }
   }
   &.ds-accordion--dense {
@@ -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;
+        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;
+          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

@@ -5,10 +5,10 @@
 }
 .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)";
+  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 {
@@ -21,7 +21,6 @@
   &.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;
   }
 }
@@ -44,7 +43,6 @@
   &.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;
   }
   &:not(.ds-autocomplete__multi-input-container--focused) {
@@ -64,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/blockquote.common.css

@@ -1,14 +1,14 @@
 @tailwind utilities;
 
 @layer utilities {
-    .util-blockquote {
-      @apply mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
-    }
-    .util-blockquote-text {
-      font-size: var(--blockquote-font-size);
-      line-height: var(--blockquote-line-height);
-    }
-    .util-blockquote--dense {
-        @apply mt-3 md:mb-6 p-3 border-l-6;
-    }
-}
+  .util-blockquote {
+    @apply mb-4 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
+  }
+  .util-blockquote-text {
+    font-size: var(--blockquote-font-size);
+    line-height: var(--blockquote-line-height);
+  }
+  .util-blockquote--dense {
+    @apply mt-3 md:mb-6 p-3 border-l-6;
+  }
+}

package/src/components/blockquote.css

@@ -1,9 +1,9 @@
 @import './blockquote.common.css';
 
 .ds-blockquote {
-    @apply util-blockquote util-blockquote-text;
-    &.ds-blockquote--dense,
-    .ds-dense & {
-      @apply util-blockquote--dense;
-    }
-  }
+  @apply util-blockquote util-blockquote-text;
+  &.ds-blockquote--dense,
+  .ds-dense & {
+    @apply util-blockquote--dense;
+  }
+}

package/src/components/blockquote.native.css

@@ -5,8 +5,10 @@
 }
 .ds-blockquote__text {
   @apply util-blockquote-text;
-  line-height: calc(var(--blockquote-font-size) * var(--blockquote-line-height));
+  line-height: calc(
+    var(--blockquote-font-size) * var(--blockquote-line-height)
+  );
 }
 .ds-blockquote--dense {
   @apply util-blockquote--dense;
-}
+}

package/src/components/breadcrumbs.css

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

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/button.native.css

@@ -6,8 +6,8 @@
   @apply util-btn min-h-4 flex-row flex-nowrap justify-center;
   border-bottom-width: var(--btn-border-bottom-width-native);
   border-bottom-color: var(--btn-border-bottom-color-native);
-  padding-top: calc( 1.5 * var(--btn-padding-y)) !important;
-  padding-bottom: calc( 1.5 * var(--btn-padding-y)) !important;
+  padding-top: calc(1.5 * var(--btn-padding-y)) !important;
+  padding-bottom: calc(1.5 * var(--btn-padding-y)) !important;
 }
 .ds-btn__text {
   @apply util-btn-text min-h-4 text-center;
@@ -43,8 +43,8 @@
   @apply util-btn-warning-text;
 }
 .ds-btn-cta {
-  padding-top: calc( 2.25 * var(--btn-padding-y)) !important;
-  padding-bottom: calc( 2.25 * var(--btn-padding-y)) !important;
+  padding-top: calc(2.25 * var(--btn-padding-y)) !important;
+  padding-bottom: calc(2.25 * var(--btn-padding-y)) !important;
 }
 
 .ds-btn-cta__text {

package/src/components/card.common.css

@@ -1,33 +1,33 @@
 @tailwind utilities;
 
 @layer utilities {
-    .util-card {
-      @apply mb-7 text-base-content max-w-full bg-base-100;
-      border-radius: var(--card-border-radius);
-    }
-    .util-card--border {
-      @apply border-2 border-base-content p-6;
-    }
-    .util-card--border-top {
-      @apply border-t border-base-300 pt-4;
-    }
-    .util-card--border-light {
-      @apply border-base-300;
-    }
-    .util-card--border-dark {
-      @apply border-base-content;
-    }
-    .util-card--divider {
-      --card-border-radius: 0;
-      @apply border-b border-base-300 pb-4 mb-4;
-    }
-    .util-card__heading-text {
-      @apply md:text-2xl text-xl font-bold;
-  }
-    .util-card__body {
-      @apply flex flex-col gap-3 md:gap-4;
-    }
-    .util-card__action {
-      @apply flex flex-wrap items-center gap-y-4 mt-auto;
-    }
-}
+  .util-card {
+    @apply mb-7 text-base-content max-w-full bg-base-100;
+    border-radius: var(--card-border-radius);
+  }
+  .util-card--border {
+    @apply border-2 border-base-content p-6;
+  }
+  .util-card--border-top {
+    @apply border-t border-base-300 pt-4;
+  }
+  .util-card--border-light {
+    @apply border-base-300;
+  }
+  .util-card--border-dark {
+    @apply border-base-content;
+  }
+  .util-card--divider {
+    --card-border-radius: 0;
+    @apply border-b border-base-300 pb-4 mb-4;
+  }
+  .util-card__heading-text {
+    @apply md:text-2xl text-xl font-bold;
+  }
+  .util-card__body {
+    @apply flex flex-col gap-3 md:gap-4;
+  }
+  .util-card__action {
+    @apply flex flex-wrap items-center gap-y-4 mt-auto;
+  }
+}

package/src/components/card.css

@@ -67,7 +67,7 @@
   @apply util-card__body h-full;
 }
 .ds-card__image {
-  @apply  w-full h-40
+  @apply w-full h-40
   /* @apply  h-40 -mx-6 */
   bg-base-200 bg-cover bg-top
   border border-base-300;

package/src/components/checkboxes.common.css

@@ -1,16 +1,16 @@
 @tailwind utilities;
 
 @layer utilities {
-    .util-checkboxes__item {
-      @apply relative mb-4 min-h-10;
-    }
-    .util-checkboxes__input {
-      @apply absolute z-1 left-0.5 -top-0.5 m-0 opacity-100 w-10 h-10;
-    }
-    .util-checkboxes__input__after {
-      @apply absolute border-b-5 border-l-5;
-      width: 23px;
-      height: 12px;
-      transform: rotate(-45deg);
-    }
-}
+  .util-checkboxes__item {
+    @apply relative mb-4 min-h-10;
+  }
+  .util-checkboxes__input {
+    @apply absolute z-1 left-0.5 -top-0.5 m-0 opacity-100 w-10 h-10;
+  }
+  .util-checkboxes__input__after {
+    @apply absolute border-b-5 border-l-5;
+    width: 23px;
+    height: 12px;
+    transform: rotate(-45deg);
+  }
+}

package/src/components/checkboxes.native.css

@@ -10,7 +10,6 @@
   @apply util-checkboxes__input top-0 left-0 border-solid border-base-content border-2 bg-base-100;
 }
 
-
 .ds-checkboxes__input--checked {
   @apply util-checkboxes__input__after text-black;
   top: 8;
@@ -24,5 +23,5 @@
 .ds-checkboxes__label__text {
   font-size: var(--label-font-size);
   line-height: 2rem;
-  letter-spacing: 0rem;
-}
+  letter-spacing: 0;
+}

package/src/components/chip.common.css

@@ -16,4 +16,4 @@
   .util-chip__key-value-text {
     @apply font-bold;
   }
- }
+}

package/src/components/chip.css

@@ -24,7 +24,7 @@
     }
   }
   .ds-chip__content {
-    @apply util-chip__content util-chip__content-text inline-flex ;
+    @apply util-chip__content util-chip__content-text inline-flex;
     &[role='button'] {
       &:hover {
         @apply shadow-lg text-base-content-invert bg-base-900 border-base-900 transition;

package/src/components/chip.native.css

@@ -2,8 +2,7 @@
 
 .ds-chips {
   @apply util-chips flex-row;
-  column-gap: 0.5rem;
-  row-gap: 0.5rem;
+  gap: 0.5rem 0.5rem;
 }
 .ds-chip__content {
   @apply util-chip__content flex flex-row;
@@ -14,5 +13,3 @@
 .ds-chip__key-value__text {
   @apply util-chip__key-value-text;
 }
-
-

package/src/components/code.css

@@ -1,5 +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;
   & > pre {
@@ -30,6 +31,7 @@
 .ds-code--highlighted-line {
   background-color: rgba(var(--color-orange-100-rgb), 0.3);
 }
+
 /* copied styles from 'highlight.js/styles/github.css' */
 .ds-code--doctag,
 .ds-code--keyword,
@@ -39,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_,
@@ -59,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 {
@@ -83,8 +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 */
@@ -124,5 +125,4 @@
 .ds-code--punctuation,
 .ds-code--tag {
   /* purposely ignored */
-  
-}
+}

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.common.css

@@ -1,26 +1,26 @@
 @tailwind utilities;
 
 @layer utilities {
-    .util-details {
-      @apply md:mb-8 mb-4;
-    }
-    .util-details-text {
-      @apply md:text-lg;
-      font-size: var(--details-font-size);
-      line-height: var(--details-line-height);
-    }
-    .util-details__summary {
-      @apply mb-0;
-    }
-    .util-details__summary-text {
-      @apply underline;
-    }
-    .util-details__summary--lg-text {
-      @apply font-semibold;
-      font-size: var(--details__summary--lg-font-size);
-      line-height: var(--details__summary--lg-line-height);
-    }
-    .util-details__content {
-      @apply border-l-2 border-base-500 py-2 px-4 mt-4;
-    }
-}
+  .util-details {
+    @apply md:mb-8 mb-4;
+  }
+  .util-details-text {
+    @apply md:text-lg;
+    font-size: var(--details-font-size);
+    line-height: var(--details-line-height);
+  }
+  .util-details__summary {
+    @apply mb-0;
+  }
+  .util-details__summary-text {
+    @apply underline;
+  }
+  .util-details__summary--lg-text {
+    @apply font-semibold;
+    font-size: var(--details__summary--lg-font-size);
+    line-height: var(--details__summary--lg-line-height);
+  }
+  .util-details__content {
+    @apply border-l-2 border-base-500 py-2 px-4 mt-4;
+  }
+}

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/details.native.css

@@ -13,15 +13,17 @@
 .ds-details__summary--focus {
   background-color: var(--color-focus);
   box-shadow:
-  0 -2px var(--color-focus),
-  0 4px var(--color-base-content);
+    0 -2px var(--color-focus),
+    0 4px var(--color-base-content);
 }
 .ds-details__summary__text {
   @apply util-details__summary-text;
 }
 .ds-details__summary--lg__text {
   @apply util-details__summary--lg-text;
-  line-height: calc(var(--details--lg-line-height) * var(--details--lg-font-size));
+  line-height: calc(
+    var(--details--lg-line-height) * var(--details--lg-font-size)
+  );
 }
 .ds-details__content {
   @apply util-details__content;

package/src/components/drawer.css

@@ -54,9 +54,6 @@
 }
 .ds-drawer__heading {
   @apply p-0 mb-4 flex justify-between align-baseline;
-  &:has(.ds-close-btn:only-child) {
-    @apply justify-end;
-  }
   .ds--drawer__close-icon {
     @apply m-0;
   }