@digigov/css 2.0.0-b4cd6916 → 2.0.0-d0adc9fb

package/src/components/chip.css

@@ -1,5 +1,7 @@
+@import './chip.common.css';
+
 .ds-chips {
-  @apply flex flex-wrap list-none gap-2 items-center;
+  @apply util-chips gap-x-2 gap-y-2 list-none;
   &.ds-chips--horizontal {
     @apply md:flex md:flex-row md:flex-wrap;
   }
@@ -22,8 +24,7 @@
     }
   }
   .ds-chip__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 rounded shadow;
+    @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;
@@ -37,7 +38,7 @@
   }
 }
 .ds-chip__key-value {
-  @apply font-bold mr-2;
+  @apply util-chip__key-value util-chip__key-value-text;
 }
 
 /* overrides */

package/src/components/chip.native.css

@@ -0,0 +1,15 @@
+@import './chip.common.css';
+
+.ds-chips {
+  @apply util-chips flex-row;
+  gap: 0.5rem 0.5rem;
+}
+.ds-chip__content {
+  @apply util-chip__content flex flex-row;
+}
+.ds-chip__content__text {
+  @apply util-chip__content-text;
+}
+.ds-chip__key-value__text {
+  @apply util-chip__key-value-text;
+}

package/src/components/code.css

@@ -1,7 +1,8 @@
-/* stylelint-disable digigov/enforce-class-selector-namespace */
 .ds-code-block__container {
-  @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 */
+  @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 {
     @apply bg-transparent p-0 m-0;
     font: inherit;

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

@@ -35,7 +35,7 @@
     }
   }
   .ds-copy-to-clipboard__message {
-    @apply bg-success py-4 px-6 absolute mt-4 text-center z-50 w-fit md:w-max;
+    @apply bg-success py-4 px-6 absolute mt-4 text-center z-40 w-fit md:w-max;
     &::before {
       @apply w-4 h-4 border-t-8 border-l-8 border-success transform rotate-45
       absolute -top-1;

package/src/components/details.common.css

@@ -1,26 +1,26 @@
 @tailwind utilities;
 
 @layer utilities {
-    .util-details {
-      @apply mb-4 md:mb-8;
-    }
-    .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.native.css

@@ -5,6 +5,7 @@
 }
 .ds-details__text {
   @apply util-details-text;
+  line-height: calc(var(--details-line-height) * var(--details-font-size));
 }
 .ds-details__summary {
   @apply util-details__summary;
@@ -20,7 +21,14 @@
 }
 .ds-details__summary--lg__text {
   @apply util-details__summary--lg-text;
+  line-height: calc(
+    var(--details--lg-line-height) * var(--details--lg-font-size)
+  );
 }
 .ds-details__content {
   @apply util-details__content;
 }
+.ds-details__content__text {
+  font-size: var(--details-font-size);
+  line-height: calc(var(--details-line-height) * var(--details-font-size));
+}

package/src/components/drawer.css

@@ -1,16 +1,33 @@
+.ds-drawer-container {
+  @apply justify-center items-center content-center
+  left-0 top-0 w-full h-full overflow-auto
+  flex fixed z-50 bg-opacity-50 bg-base-700;
+  &.ds-drawer-container--relative-sm {
+    @apply sm:bg-transparent sm:z-0 sm:relative sm:block;
+  }
+  &.ds-drawer-container--relative-md {
+    @apply md:bg-transparent md:z-0 md:relative md:block;
+  }
+  &.ds-drawer-container--relative-lg {
+    @apply lg:bg-transparent lg:z-0 lg:relative lg:block;
+  }
+  &.ds-drawer-container--closed {
+    @apply hidden;
+  }
+}
 .ds-drawer {
   @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 flex flex-col
   fixed top-0 bottom-0 z-40;
   @apply shadow-thick !important;
   &.ds-drawer--relative-sm {
-    @apply sm:relative sm:w-full max-h-full shadow-thick sm:shadow-none !important;
+    @apply sm:relative sm:w-full sm:min-h-fit shadow-thick sm:shadow-none !important;
   }
   &.ds-drawer--relative-md {
-    @apply md:relative md:w-full max-h-full shadow-thick md:shadow-none !important;
+    @apply md:relative md:w-full md:min-h-fit shadow-thick md:shadow-none !important;
   }
   &.ds-drawer--relative-lg {
-    @apply lg:relative lg:w-full max-h-full shadow-thick lg:shadow-none !important;
+    @apply lg:relative lg:w-full lg:min-h-fit shadow-thick lg:shadow-none !important;
   }
   &.ds-drawer--right {
     @apply right-0;
@@ -36,7 +53,7 @@
   }
 }
 .ds-drawer__heading {
-  @apply p-0 mb-2 md:mb-4 flex justify-between align-baseline;
+  @apply p-0 mb-4 flex justify-between align-baseline;
   .ds--drawer__close-icon {
     @apply m-0;
   }

package/src/components/dropdown.common.css

@@ -1,23 +1,23 @@
 @tailwind utilities;
 
 @layer utilities {
-    .util-dropdown {
-      @apply relative;
-    }
-    .util-dropdown--right {
-      @apply right-0 mr-0 ml-4;
-    }
-    .util-dropdown__content {
-      @apply border-base-400 bg-base-100
+  .util-dropdown {
+    @apply relative;
+  }
+  .util-dropdown--right {
+    @apply right-0 mr-0 ml-4;
+  }
+  .util-dropdown__content {
+    @apply border-base-400 bg-base-100
       max-w-xs min-w-full absolute transition z-3 mr-4 -mt-4;
-      box-shadow:
-        0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
-        0 -2px 0 var(--color-base-500);
-    }
-    .util-dropdown__content--full-width {
-      @apply min-w-full;
-    }
-    .util-dropdown__content--scrollable {
-      @apply max-h-64 md:max-h-96;
-    }
-}
+    box-shadow:
+      0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+      0 -2px 0 var(--color-base-500);
+  }
+  .util-dropdown__content--full-width {
+    @apply min-w-full;
+  }
+  .util-dropdown__content--scrollable {
+    @apply max-h-64 md:max-h-96;
+  }
+}

package/src/components/dropdown.native.css

@@ -1,28 +1,27 @@
 @import './dropdown.common.css';
 
 .ds-dropdown {
-   @apply util-dropdown;
-   z-index: 2;
+  @apply util-dropdown;
+  z-index: 2;
 }
 .ds-dropdown--right {
-   @apply util-dropdown--right;
+  @apply util-dropdown--right;
 }
 
 .ds-dropdown__button {
-   @apply gap-1 items-center p-2;
-   flex-direction: row;
-   flex-wrap: wrap;
+  @apply gap-1 items-center p-2;
+  flex-flow: row wrap;
 }
 .ds-dropdown__button__text {
-   color: var(--color-base-100);
+  color: var(--color-base-100);
 }
 
 .ds-dropdown__content {
-   @apply util-dropdown__content p-2 border-2;
+  @apply util-dropdown__content p-2 border-2;
 }
 .ds-dropdown__content--full-width {
-   @apply util-dropdown__content--full-width;
+  @apply util-dropdown__content--full-width;
 }
 .ds-dropdown__content--scrollable {
-   @apply util-dropdown__content--scrollable;
-}
+  @apply util-dropdown__content--scrollable;
+}

package/src/components/fillable.css

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

package/src/components/filter.css

@@ -1,40 +1,63 @@
+.ds-filter-container {
+  @apply fixed left-0 top-0 overflow-auto 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;
+  }
+  &.ds-filter-container--position-relative-sm {
+    @apply sm:bg-transparent sm:h-fit sm:z-2 sm:overflow-visible 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: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:block !important;
+  }
+  &.ds-filter-container--closed {
+    @apply hidden;
+  }
+}
 .ds-filter {
-  @apply bg-base-100 fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
+  @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 block relative overflow-visible w-full shadow-none z-2 !important;
-    &.ds-filter--closed {
-      @apply block !important;
-    }
+    @apply relative w-full max-w-full shadow-none mb-4 md:mb-8;
   }
   &.ds-filter--position-relative-sm {
-    @apply sm:block sm:relative sm:overflow-visible sm:w-full sm:shadow-none sm:z-2;
-    &.ds-filter--closed {
-      @apply sm:block;
+    @apply sm:relative sm:w-full sm:shadow-none 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:block md:relative md:overflow-visible md:w-full md:shadow-none md:z-2;
-    &.ds-filter--closed {
-      @apply md:block;
+    @apply md:relative md:w-full md:shadow-none md:mb-8 md:max-w-full;
+    &:not(.ds-filter--border) {
+      @apply md:p-0;
     }
   }
   &.ds-filter--position-relative-lg {
-    @apply lg:block lg:relative lg:overflow-visible lg:w-full lg:shadow-none lg:z-2;
-    &.ds-filter--closed {
-      @apply lg:block;
+    @apply lg:relative lg:overflow-visible lg:w-full lg:shadow-none 
+    lg:z-2 lg:mb-8 lg:max-w-full;
+    &:not(.ds-filter--border) {
+      @apply lg:p-0;
     }
   }
   &.ds-filter--border {
-    @apply border border-base-300 p-4;
-  }
-  &.ds-filter--closed {
-    @apply hidden;
+    @apply border border-base-300;
   }
 }
 .ds-filter__content {
   @apply flex flex-col gap-8 p-0;
 }
+.ds-filter__options {
+  .ds-btn:last-child {
+    @apply mb-0;
+  }
+}
 .ds-filter__options--horizontal {
   @apply flex gap-4 flex-col;
   @apply md:flex-row md:flex-wrap;
@@ -51,23 +74,23 @@
   @apply p-0;
 }
 .ds-filter__heading {
-  @apply mb-2 md:mb-4;
+  @apply mb-4;
 }
 .ds-filter__selected {
   @apply bg-base-200 p-4 m-0 rounded;
 }
 .ds-filter__selected-heading {
-  @apply flex flex-wrap sm:flex-nowrap mb-4 md:mb-8 justify-between gap-x-2 gap-y-4;
+  @apply flex flex-wrap mb-4 md:mb-8 justify-between gap-x-2 gap-y-4;
 }
 .ds-input__search-btn {
-  @apply shadow-none mb-0 !important;
+  @apply shadow-none !important;
   @apply px-4 py-2 w-min m-0 ml-3 flex gap-2;
 }
 .ds-search {
   @apply flex w-full max-w-3xl;
 }
 .ds-results__action-bar {
-  @apply py-2 mb-4 md:mb-8 flex flex-wrap justify-start gap-4 items-baseline;
+  @apply py-2 mb-8 flex flex-wrap justify-start gap-4 items-baseline;
   > * {
     @apply mb-0;
   }
@@ -76,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-2 md:mb-4;
+  @apply flex flex-wrap gap-4 justify-start min-w-min mb-4;
 }
 .ds-link-filters {
   @apply block md:hidden;
@@ -85,8 +108,34 @@
 /* overrides */
 
 .ds-filter {
-  @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);
+  &.ds-filter--position-relative-always {
+    .ds-filter__heading {
+      > .ds-close-btn {
+        @apply hidden;
+      }
+    }
+  }
+  &.ds-filter--position-relative-sm {
+    .ds-filter__heading {
+      > .ds-close-btn {
+        @apply sm:hidden;
+      }
+    }
+  }
+  &.ds-filter--position-relative-md {
+    .ds-filter__heading {
+      > .ds-close-btn {
+        @apply md:hidden;
+      }
+    }
+  }
+  &.ds-filter--position-relative-lg {
+    .ds-filter__heading {
+      > .ds-close-btn {
+        @apply lg:hidden;
+      }
+    }
+  }
   .ds-select {
     @apply w-full;
   }

package/src/components/footer.css

@@ -1,10 +1,10 @@
 .ds-footer {
+  @apply font-normal text-base py-4 md:py-8 w-full
+  print:py-2 print:bg-white print:border-t-2;
   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 {
   @apply w-full flex flex-1 flex-wrap md:flex-nowrap items-end justify-center md:justify-between box-border;
@@ -44,14 +44,14 @@
 }
 .ds-footer__link {
   text-decoration: var(--footer__link-text-decoration);
-  
+
   &:hover {
     text-decoration: var(--footer__link-text-decoration-hover);
     text-decoration-thickness: 2px;
-    color:var(--footer__link-color-hover);
+    color: var(--footer__link-color-hover);
   }
   &:focus {
-    color:var(--footer__link-color-focus);
+    color: var(--footer__link-color-focus);
     background-color: var(--color-focus) !important;
     box-shadow:
       0 -2px var(--color-focus),
@@ -100,11 +100,11 @@
     @apply print:hidden;
   }
   .ds-link {
-    --link-color:var(--color-footer);
+    --link-color: var(--color-footer);
     @apply print:text-base-content;
   }
   .ds-body {
-    --body-color:var(--color-footer);
+    --body-color: var(--color-footer);
     @apply print:text-base-content;
   }
 }

package/src/components/form.common.css

@@ -1,82 +1,81 @@
 @tailwind utilities;
 
 @layer utilities {
-    .util-field {
-        @apply mb-8 md:mb-10;
-    }
-    .util-field--error {
-        @apply border-l-5 border-error-text px-0 pl-4;
-    }
+  .util-field {
+    @apply mb-8 md:mb-10;
+  }
+  .util-field--error {
+    @apply border-l-5 border-error-text px-0 pl-4;
+  }
 
-    .util-fieldset__legend {
-        margin-bottom: var(--fieldset__legend-margin-bottom);
-    }
-    .util-fieldset__legend-text {
-        font-weight: var(--fieldset__legend-font-weight);
-        letter-spacing: var(--fieldset__legend-letter-spacing);
-    }
-    .util-fieldset__legend--xl-text {
-        @apply max-w-2xl;
-        font-size: var(--fieldset__legend--xl-font-size);
-        line-height: var(--fieldset__legend--xl-line-height);
-    }
-    .util-fieldset__legend--lg-text {
-        font-size: var(--fieldset__legend--lg-font-size);
-        line-height: var(--fieldset__legend--lg-line-height);
-    }
-    .util-fieldset__legend--md-text {
-        font-size: var(--fieldset__legend--md-font-size);
-        line-height: var(--fieldset__legend--md-line-height);
-    }
-    .util-fieldset__legend--sm-text {
-        font-size: var(--fieldset__legend--sm-font-size);
-        line-height: var(--fieldset__legend--sm-line-height);
-    }
+  .util-fieldset__legend {
+    margin-bottom: var(--fieldset__legend-margin-bottom);
+  }
+  .util-fieldset__legend-text {
+    font-weight: var(--fieldset__legend-font-weight);
+    letter-spacing: var(--fieldset__legend-letter-spacing);
+  }
+  .util-fieldset__legend--xl-text {
+    @apply max-w-2xl;
+    font-size: var(--fieldset__legend--xl-font-size);
+    line-height: var(--fieldset__legend--xl-line-height);
+  }
+  .util-fieldset__legend--lg-text {
+    font-size: var(--fieldset__legend--lg-font-size);
+    line-height: var(--fieldset__legend--lg-line-height);
+  }
+  .util-fieldset__legend--md-text {
+    font-size: var(--fieldset__legend--md-font-size);
+    line-height: var(--fieldset__legend--md-line-height);
+  }
+  .util-fieldset__legend--sm-text {
+    font-size: var(--fieldset__legend--sm-font-size);
+    line-height: var(--fieldset__legend--sm-line-height);
+  }
 
+  .util-label {
+    @apply mb-0 flex gap-y-3 flex-col;
+  }
+  .util-label-text {
+    font-size: var(--label-font-size);
+    line-height: var(--label-line-height);
+    letter-spacing: var(--label-letter-spacing);
+  }
+  .util-label__title--xl-text {
+    @apply max-w-2xl;
+    font-size: var(--label__title--xl-font-size);
+    line-height: var(--label__title--xl-line-height);
+    font-weight: var(--label__title-font-weight);
+    letter-spacing: var(--label__title-letter-spacing);
+  }
+  .util-label__title--lg-text {
+    font-size: var(--label__title--lg-font-size);
+    line-height: var(--label__title--lg-line-height);
+    font-weight: var(--label__title-font-weight);
+    letter-spacing: var(--label__title-letter-spacing);
+  }
+  .util-label__title--md-text {
+    font-size: var(--label__title--md-font-size);
+    line-height: var(--label__title--md-line-height);
+    font-weight: var(--label__title-font-weight);
+    letter-spacing: var(--label__title-letter-spacing);
+  }
+  .util-label__title--sm-text {
+    font-size: var(--label__title--sm-font-size);
+    line-height: var(--label__title--sm-line-height);
+    font-weight: var(--label__title-font-weight);
+    letter-spacing: var(--label__title-letter-spacing);
+  }
 
-    .util-label {
-        @apply mb-0 flex gap-y-3 flex-col;
-    }
-    .util-label-text {
-        font-size: var(--label-font-size);
-        line-height: var(--label-line-height);
-        letter-spacing: var(--label-letter-spacing);
-    }
-    .util-label__title--xl-text {
-        @apply max-w-2xl;
-        font-size: var(--label__title--xl-font-size);
-        line-height: var(--label__title--xl-line-height);
-        font-weight: var(--label__title-font-weight);
-        letter-spacing: var(--label__title-letter-spacing);
-    }
-    .util-label__title--lg-text {
-        font-size: var(--label__title--lg-font-size);
-        line-height: var(--label__title--lg-line-height);
-        font-weight: var(--label__title-font-weight);
-        letter-spacing: var(--label__title-letter-spacing);
-    }
-    .util-label__title--md-text {
-        font-size: var(--label__title--md-font-size);
-        line-height: var(--label__title--md-line-height);
-        font-weight: var(--label__title-font-weight);
-        letter-spacing: var(--label__title-letter-spacing);
-    }
-    .util-label__title--sm-text {
-        font-size: var(--label__title--sm-font-size);
-        line-height: var(--label__title--sm-line-height);
-        font-weight: var(--label__title-font-weight);
-        letter-spacing: var(--label__title-letter-spacing);
-    }
-
-    .util-input {
-        @apply md:text-lg w-full p-2 border-2 border-base-content bg-base-100;
-        border-radius: var(--input-border-radius);
-    }
-    .util-input--error {
-        @apply border-error-text border-3;
-    }
-    .util-textarea {
-        @apply md:text-lg w-full p-2 border-2 border-base-content bg-base-100;
-        border-radius: var(--textarea-border-radius);
-    }
-}
+  .util-input {
+    @apply md:text-lg w-full p-2 border-2 border-base-content bg-base-100;
+    border-radius: var(--input-border-radius);
+  }
+  .util-input--error {
+    @apply border-error-text border-3;
+  }
+  .util-textarea {
+    @apply md:text-lg w-full p-2 border-2 border-base-content bg-base-100;
+    border-radius: var(--textarea-border-radius);
+  }
+}

package/src/components/form.css

@@ -170,7 +170,7 @@
 
 /* error handling  */
 .ds-error-message {
-  @apply md:text-lg text-base block mb-4 md:mb-8 text-error-text font-semibold;
+  @apply md:text-lg text-base block mb-4 text-error-text font-semibold;
 }
 /* stylelint-disable-next-line digigov/nest-related-rules */
 .ds-input--error {