@digigov/css 2.0.0-7d9a8d86 → 2.0.0-85c27c19

package/src/components/code.css

@@ -0,0 +1,129 @@
+.ds-code-block__container {
+  @apply p-4 bg-base-200 border border-base-300 w-full overflow-x-auto relative;
+  & > pre {
+    @apply bg-transparent p-0 m-0;
+    font: inherit;
+    color: inherit;
+  }
+}
+.ds-code-block__header {
+  @apply sticky left-0 flex mb-0.5 items-start;
+
+  &.ds-code-block__header--start {
+    @apply justify-start;
+  }
+  &.ds-code-block__header--space-between {
+    @apply justify-between;
+  }
+  &.ds-code-block__header--end {
+    @apply justify-end;
+  }
+}
+.ds-code-block__content {
+  @apply text-sm sm:text-base;
+}
+.ds-code--line-number {
+  @apply inline-block text-right pointer-events-none select-none pr-0.5 w-6;
+  color: var(--color-gray-500);
+}
+.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,
+.ds-code--meta .ds-code--keyword,
+.ds-code--template-tag,
+.ds-code--template-variable,
+.ds-code--type,
+.ds-code--variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: var(--color-red-300);
+}
+.ds-code--title,
+.ds-code--title.class_,
+.ds-code--title.class_.inherited__,
+.ds-code--title.function_ {
+  /* prettylights-syntax-entity */
+  color: var(--color-purple-400);
+}
+.ds-code--attr,
+.ds-code--attribute,
+.ds-code--literal,
+.ds-code--meta,
+.ds-code--number,
+.ds-code--operator,
+.ds-code--variable,
+.ds-code--selector-attr,
+.ds-code--selector-class,
+.ds-code--selector-id {
+  /* prettylights-syntax-constant */
+  color: var(--color-green-400);
+}
+.ds-code--regexp,
+.ds-code--string,
+.ds-code--meta .ds-code--string {
+  /* prettylights-syntax-string */
+  color: var(--color-blue-600);
+}
+.ds-code--built_in,
+.ds-code--symbol {
+  /* prettylights-syntax-variable */
+  color: var(--color-orange-500);
+}
+.ds-code--comment,
+.ds-code--code,
+.ds-code--formula {
+  /* prettylights-syntax-comment */
+  color: var(--color-gray-600);
+}
+.ds-code--name,
+.ds-code--quote,
+.ds-code--selector-tag,
+.ds-code--selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: var(--color-green-400);
+
+}
+.ds-code--subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: var(--color-gray-900);
+}
+.ds-code--section {
+  /* prettylights-syntax-markup-heading */
+  @apply font-bold;
+  color: var(--color-blue-500);
+}
+.ds-code--bullet {
+  /* prettylights-syntax-markup-list */
+  color: var(--color-orange-600);
+}
+.ds-code--emphasis {
+  /* prettylights-syntax-markup-italic */
+  @apply italic;
+  color: var(--color-gray-900);
+}
+.ds-code--strong {
+  /* prettylights-syntax-markup-bold */
+  @apply font-bold;
+  color: var(--color-gray-900);
+}
+.ds-code--addition {
+  /* prettylights-syntax-markup-inserted */
+  color: var(--color-green-500);
+  background-color: rgba(var(--color-green-100-rgb), 0.3);
+}
+.ds-code--deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: var(--color-red-500);
+  background-color: rgba(var(--color-red-100-rgb), 0.3);
+}
+.ds-code--char.escape_,
+.ds-code--link,
+.ds-code--params,
+.ds-code--property,
+.ds-code--punctuation,
+.ds-code--tag {
+  /* purposely ignored */
+  
+}

package/src/components/dropdown.css

@@ -30,36 +30,39 @@
       @apply p-2;
     }
   }
-  .ds-dropdown__button {
-    @apply w-fit print:text-base-content;
-    &::marker {
-      font-size: 0;
-    }
-    &::-webkit-details-marker {
-      display: none;
-    }
+}
+.ds-dropdown__button {
+  @apply w-fit print:text-base-content;
+  &::marker {
+    font-size: 0;
   }
-  .ds-dropdown__button.ds-link + .ds-dropdown__content {
-    @apply mt-4 print:text-base-content;
+  &::-webkit-details-marker {
+    display: none;
   }
-  .ds-btn-group .ds-btn + .ds-dropdown__content {
-    @apply mt-4;
+}
+.ds-dropdown__button.ds-link + .ds-dropdown__content {
+  @apply mt-4 print:text-base-content;
+}
+.ds-btn-group .ds-btn + .ds-dropdown__content {
+  @apply mt-4;
+}
+.ds-dropdown__content {
+  @apply border border-base-400 p-4 bg-base-100 border-t-0
+  max-w-xs w-max min-w-full absolute transition z-3 mr-4 -mt-4;
+  -webkit-box-box-shadow:
+    0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+    0 -2px 0 var(--color-base-500);
+  box-shadow:
+    0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+    0 -2px 0 var(--color-base-500);
+  &.ds-dropdown__content--full-width {
+    @apply min-w-full;
   }
-  .ds-dropdown__content {
-    @apply border border-base-400 p-4 bg-base-100 border-t-0
-    max-w-xs w-max min-w-full absolute transition z-3 mr-4 -mt-4;
-    -webkit-box-box-shadow:
-      0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
-      0 -2px 0 var(--color-base-500);
-    box-shadow:
-      0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
-      0 -2px 0 var(--color-base-500);
-    &.ds-dropdown__content--full-width {
-      @apply min-w-full;
-    }
-    *:last-child {
-      @apply mb-0;
-    }
+  &.ds-dropdown__content--scrollable {
+    @apply overflow-y-auto max-h-64 md:max-h-96;
+  }
+  *:last-child {
+    @apply mb-0;
   }
 }
 
@@ -108,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 {
@@ -121,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

@@ -57,7 +57,7 @@
   @apply bg-base-200 p-4 m-0 rounded;
 }
 .ds-filter__selected-heading {
-  @apply flex flex-wrap sm:flex-nowrap mb-4 md:mb-6 justify-between gap-x-2;
+  @apply flex flex-wrap sm:flex-nowrap mb-4 md:mb-6 justify-between gap-x-2 gap-y-4;
 }
 .ds-input__search-btn {
   @apply shadow-none !important;

package/src/components/form.css

@@ -4,7 +4,7 @@
   @apply mb-8 md:mb-10;
 
   &.ds-field--error {
-    @apply border-l-5 border-error px-0 pl-4;
+    @apply border-l-5 border-error-text px-0 pl-4;
   }
   .ds-fieldset {
     > .ds-field:last-child,
@@ -32,6 +32,24 @@
 }
 .ds-input {
   border-radius: var(--input-border-radius);
+  &.ds-input--width-20-char {
+    max-width: 41ex;
+  }
+  &.ds-input--width-10-char {
+    max-width: 23ex;
+  }
+  &.ds-input--width-5-char {
+    max-width: 10.8ex;
+  }
+  &.ds-input--width-4-char {
+    max-width: 9ex;
+  }
+  &.ds-input--width-3-char {
+    max-width: 7.2ex;
+  }
+  &.ds-input--width-2-char {
+    max-width: 5.4ex;
+  }
 }
 .ds-textarea {
   border-radius: var(--textarea-border-radius);
@@ -47,6 +65,7 @@
     box-shadow: inset 0 0 0 2px;
   }
 }
+/* stylelint-disable-next-line digigov/nest-related-rules */
 .ds-input--dense,
 .ds-dense .ds-input,
 .ds-textarea--dense,
@@ -82,29 +101,12 @@
   @apply flex flex-wrap gap-y-2;
 }
 .ds-select {
-  border-radius: var(--select-border-radius);
   @apply w-auto max-w-full;
+  border-radius: var(--select-border-radius);
 }
 .ds-select__option {
 }
-.ds-input--width-20-char {
-  max-width: 41ex;
-}
-.ds-input--width-10-char {
-  max-width: 23ex;
-}
-.ds-input--width-5-char {
-  max-width: 10.8ex;
-}
-.ds-input--width-4-char {
-  max-width: 9ex;
-}
-.ds-input--width-3-char {
-  max-width: 7.2ex;
-}
-.ds-input--width-2-char {
-  max-width: 5.4ex;
-}
+
 .ds-single-character-input__item {
   @apply text-center px-0 mr-3;
   max-width: 4.4ex;
@@ -143,14 +145,15 @@
 
 /* error handling  */
 .ds-error-message {
-  @apply md:text-lg text-base block mb-4 text-error 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 {
-  @apply border-error border-3;
+  @apply border-error-text border-3;
   &:focus {
     outline: 4px solid var(--color-focus);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px var(--color-error);
+    box-shadow: inset 0 0 0 1px var(--color-error-text);
   }
 }
 
@@ -171,7 +174,7 @@
 .ds-textarea:disabled,
 .ds-checkboxes__input:disabled::before,
 .ds-radios__input:disabled::before {
-  @apply border-base-content text-base-content;
+  @apply border-base-700 text-base-800;
 }
 .ds-checkboxes__input:disabled:checked::after,
 .ds-radios__input:disabled:checked::after {

package/src/components/header.css

@@ -5,12 +5,15 @@
   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;
@@ -29,10 +32,10 @@
   text-decoration: none;
 }
 .ds-header__title {
-  color: var(--header__title-color);
   @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; */
     color: var(--header__title-color-hover);
@@ -54,8 +57,21 @@
   .ds-header__section {
     > .ds-link,
     > .ds-dropdown .ds-dropdown__button.ds-link {
-      color: var(--color-header-text);
       @apply focus:text-link-active print:text-base-content;
+      color: var(--color-header-text);
+    }
+    > .ds-skeleton {
+      @apply bg-primary-100 w-80 max-w-xs;
+      &.ds-skeleton--animate {
+        &::after {
+          background: linear-gradient(
+            90deg,
+            transparent,
+            rgba(255, 255, 255, 0.05),
+            transparent
+          );
+        }
+      }
     }
   }
   .ds-dropdown {
@@ -65,9 +81,6 @@
     @apply sm:w-max;
   }
   .ds-link {
-    .ds-svg-icon {
-      fill: var(--color-header-text);
-    }
     &:hover {
       .ds-svg-icon {
         fill: var(--color-header-text-hover);
@@ -83,8 +96,8 @@
     }
   }
   .ds-phase-banner__text {
-    color: var(--color-header-text);
     @apply print:text-base-content;
+    color: var(--color-header-text);
   }
 }
 .ds-header__section {

package/src/components/hidden.css

@@ -1,33 +1,33 @@
 .ds-hidden {
-  @apply hidden;
+  @apply hidden !important;
 }
 .ds-hidden-xs-up {
-  @apply xs:hidden;
+  @apply xs:hidden !important;
 }
 .ds-hidden-sm-up {
-  @apply sm:hidden;
+  @apply sm:hidden !important;
 }
 .ds-hidden-md-up {
-  @apply md:hidden;
+  @apply md:hidden !important;
 }
 .ds-hidden-lg-up {
-  @apply lg:hidden;
+  @apply lg:hidden !important;
 }
 .ds-hidden-xl-up {
-  @apply xl:hidden;
+  @apply xl:hidden !important;
 }
 .ds-hidden-xs {
-  @apply xsOnly:hidden;
+  @apply xsOnly:hidden !important;
 }
 .ds-hidden-sm {
-  @apply smOnly:hidden;
+  @apply smOnly:hidden !important;
 }
 .ds-hidden-md {
-  @apply mdOnly:hidden;
+  @apply mdOnly:hidden !important;
 }
 .ds-hidden-lg {
-  @apply lgOnly:hidden;
+  @apply lgOnly:hidden !important;
 }
 .ds-hidden-xl {
-  @apply xlOnly:hidden;
+  @apply xlOnly:hidden !important;
 }

package/src/components/index.css

@@ -1,46 +1,48 @@
 @import './accordion.css';
+@import './admin-header.css';
+@import './admin-layout.css';
 @import './autocomplete.css';
-@import './button.css';
+@import './back-to-top.css';
 @import './bottom-info.css';
-@import './chip.css';
+@import './breadcrumbs.css';
+@import './button.css';
+@import './card.css';
+@import './code.css';
 @import './form.css';
 @import './checkboxes.css';
+@import './chip.css';
+@import './copy-to-clipboard.css';
+@import './details.css';
+@import './dev-theme.css';
+@import './drawer.css';
 @import './dropdown.css';
-@import './radios.css';
-@import './header.css';
+@import './fillable.css';
+@import './filter.css';
 @import './footer.css';
+@import './full-page-background.css';
+@import './header.css';
+@import './hidden.css';
 @import './layout.css';
-@import './nav.css';
-@import './typography.css';
-@import './back-to-top.css';
-@import './table.css';
-@import './filter.css';
-@import './admin-layout.css';
-@import './admin-header.css';
-@import './breadcrumbs.css';
-@import './card.css';
-@import './details.css';
-@import './notification-banner.css';
+@import './loader.css';
 @import './masthead.css';
-@import './panel.css';
-@import './phase-banner.css';
-@import './summary-list.css';
-@import './stack.css';
-@import './tabs.css';
 @import './misc.css';
 @import './modal.css';
-@import './svg-icons.css';
+@import './nav.css';
 @import './pagination.css';
-@import './loader.css';
-@import './full-page-background.css';
-@import './drawer.css';
-@import './copy-to-clipboard.css';
-@import './fillable.css';
+@import './panel.css';
+@import './phase-banner.css';
+@import './radios.css';
+@import './skeleton.css';
 @import './skiplink.css';
-@import './timeline.css';
-@import './task-list.css';
+@import './stack.css';
 @import './stepnav.css';
-@import './dev-theme.css';
-@import './kitchensink.css';
-@import './hidden.css';
+@import './summary-list.css';
+@import './svg-icons.css';
+@import './table.css';
+@import './tabs.css';
+@import './task-list.css';
+@import './timeline.css';
+@import './typography.css';
+@import './notification-banner.css';
 @import './warning-text.css';
+@import './kitchensink.css';

package/src/components/misc.css

@@ -57,3 +57,27 @@ div[class*='ds-grid__col-span'] {
 .ds-image-logo-dark {
   @apply h-10 hidden;
 }
+
+.ds-test-variant {
+  @apply mb-4 mx-2;
+}
+
+.ds-test-variant__title {
+  @apply font-semibold text-3xl break-all -mb-1;
+  color: var(--color-red-300);
+}
+
+.ds-test-variant__content {
+  border-color: var(--color-red-100);
+  border-width: 10px;
+
+  /* For transparency check:
+  padding: 25px;
+  background-image:
+  linear-gradient(45deg, #ccc 25%, transparent 25%), 
+  linear-gradient(135deg, #ccc 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, #ccc 75%),
+  linear-gradient(135deg, transparent 75%, #ccc 75%);
+  background-size:25px 25px;
+  background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; */
+}

package/src/components/modal.css

@@ -9,8 +9,11 @@
 
   &.ds-modal--dense,
   &.ds-dense & {
+    .ds-modal__body {
+      @apply px-4 py-0;
+    }
     .ds-modal__container {
-      @apply px-4 py-0 gap-4;
+      @apply gap-4 my-0;
     }
   }
 }
@@ -18,11 +21,17 @@
   @apply w-full max-w-md md:max-w-lg lg:max-w-4xl 
   h-fit md:h-auto overflow-y-auto
   bg-base-100
-  border border-solid border-base-500;
+  border border-solid border-base-500 p-6;
   max-height: 95vh;
 }
 .ds-modal__container {
-  @apply grid p-10 gap-6 px-6 py-2;
+  @apply grid gap-6 -my-4;
+  .ds-modal__action {
+    @apply mb-0;
+  }
+  >.ds-heading-xs, >.ds-heading-sm, >.ds-heading-md, >.ds-heading-lg, >.ds-heading-xl {
+    @apply mb-0;
+  }
 }
 .ds-modal__content {
   @apply text-base lg:text-xl text-lg;

package/src/components/nav.css

@@ -38,10 +38,6 @@
   &.ds-nav--border {
     @apply sm:border-b sm:border-base-400;
   }
-
-  /* .ds-nav__list {
-    @apply px-3;
-  } */
   .ds-nav__list-item-link,
   .ds-nav__list-item-btn {
     @apply md:no-underline !important;
@@ -81,6 +77,13 @@
   @apply font-semibold;
 }
 
+.ds-nav__list-item-badge {
+  @apply inline-flex w-fit items-center justify-center p-1 ml-2
+  bg-error text-white text-xs md:text-xs font-semibold no-underline rounded-3xl
+  relative bottom-1;
+  min-width: 24px;
+  min-height: 24px;
+}
 .ds-nav-menu {
   @apply flex w-full;
   &.ds-nav-menu--hidden {

package/src/components/skeleton.css

@@ -0,0 +1,85 @@
+.ds-skeleton {
+  @apply block bg-base-300 h-auto w-full max-w-full rounded-sm;
+
+  /* max-width: 105ch; */
+  &.ds-skeleton--text {
+    /* @apply text-lg; */
+    &::before {
+      content: '\00a0';
+      visibility: hidden;
+    }
+    &.ds-skeleton--font-xs {
+      @apply text-sm md:text-base mb-2 md:mb-4;
+      line-height: 1rem;
+    }
+    &.ds-skeleton--font-sm {
+      @apply text-base md:text-lg mb-3 md:mb-5;
+    }
+    &.ds-skeleton--font-md {
+      @apply text-xl md:text-2xl mb-5 md:mb-6;
+    }
+    &.ds-skeleton--font-lg {
+      @apply text-2xl md:text-3xl mb-6 md:mb-7;
+    }
+    &.ds-skeleton--font-xl {
+      @apply text-3xl md:text-4xl mb-8 md:mb-10;
+    }
+  }
+  &.ds-skeleton--circular {
+    border-radius: 50%;
+  }
+  &.ds-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;
+    .ds-skeleton__line {
+      @apply block bg-base-400 w-full max-w-full max-h-full visible;
+      &::before {
+        content: '\00a0';
+      }
+      &.ds-skeleton__line--size-default {
+        @apply h-4 w-20;
+      }
+    }
+  }
+
+  /* Skeleton with a child. */
+  &.ds-skeleton--width-fit-content {
+    @apply w-fit;
+  }
+  &.ds-skeleton--animate {
+    /* @apply animate-pulse; */
+    position: relative;
+    overflow: hidden;
+    mask-image: radial-gradient(white, black);
+    &::after {
+      @apply absolute top-0 bottom-0 left-0 right-0;
+      animation: wave 2s linear 0.5s infinite;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(0, 0, 0, 0.05),
+        transparent
+      );
+      content: '';
+      transform: translateX(-100%);
+    }
+  }
+  > * {
+    @apply invisible;
+  }
+}
+
+@keyframes wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}