@digigov/css 2.0.0-cbc56209 → 2.0.0-f0a886ce

package/src/components/breadcrumbs.css

@@ -12,8 +12,12 @@
 .ds-breadcrumbs__list-item {
   @apply inline-block relative mb-1 ml-2 pl-4 float-left;
   font-size: var(--breadcrumbs__list-item-font-size);
+  &[aria-current='page'] {
+    @apply font-semibold;
+  }
   &::before {
-    @apply block absolute top-2 bottom-0 left-0 md:w-3 md:h-3 w-2 h-2 mx-auto my-0 bg-contain bg-no-repeat bg-center;
+    @apply block absolute top-2 bottom-0 left-0 md:w-3 md:h-3 w-2 h-2 mx-auto my-0 
+    bg-contain bg-no-repeat bg-center;
     content: '';
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'> <path d='M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z' />  </svg>");
   }
@@ -47,4 +51,7 @@
     text-decoration: none;
     outline: none;
   }
+  &.ds-breadcrumbs__link--inactive {
+    @apply no-underline;
+  }
 }

package/src/components/button.css

@@ -36,7 +36,7 @@
 .ds-btn-primary[type='reset'] {
   @apply hover:no-underline
   print:border-2 print:border-success print:shadow-none;
-  box-shadow: 0 2px 0 var(--color-base-content);
+  box-shadow: var(--btn-primary-box-shadow);
   background-color: var(--btn-primary-background-color);
   color: var(--btn-primary-color);
   &:hover {
@@ -61,7 +61,7 @@
 .ds-btn-secondary[type='reset'] {
   @apply hover:no-underline
     print:border-2 print:border-base-700 print:shadow-none;
-  box-shadow: 0 2px 0 var(--color-base-500);
+  box-shadow: var(--btn-secondary-box-shadow);
   background-color: var(--btn-secondary-background-color);
   color: var(--btn-secondary-color);
   &:hover {
@@ -78,7 +78,7 @@
 .ds-btn-warning[type='reset'] {
   @apply hover:no-underline
     print:border-2 print:border-error print:shadow-none;
-  box-shadow: 0 2px 0 var(--color-base-content);
+  box-shadow: var(--btn-warning-box-shadow);
   background-color: var(--btn-warning-background-color);
   color: var(--btn-warning-color);
   &:hover {
@@ -95,10 +95,6 @@
   print:text-base-400 print:border-opacity-50;
   @apply cursor-not-allowed !important;
 }
-.ds-svg-icon--caret {
-  @apply w-4 h-4 inline-block;
-  fill: var(--color-base-content);
-}
 .ds-close-btn {
   @apply flex flex-nowrap text-right w-max float-right items-center;
 }
@@ -110,7 +106,14 @@
     @apply h-4 w-4 inline transition-all;
   }
 }
-.ds-btn-primary,
+.ds-btn-primary {
+  .ds-svg-icon {
+    fill: var(--btn-primary-color);
+  }
+  .ds-svg-icon--more-vert {
+    @apply h-6 w-6 md:h-8 md:w-8;
+  }
+}
 .ds-btn-warning {
   .ds-svg-icon {
     fill: var(--color-white);
@@ -121,11 +124,11 @@
 }
 .ds-btn-cta {
   &:hover {
-    .ds-svg-icon--chevron {
+    .ds-svg-icon {
       @apply ml-4 mr-0;
     }
   }
-  .ds-svg-icon--chevron {
+  .ds-svg-icon {
     @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
   }
 }

package/src/components/card.css

@@ -1,5 +1,6 @@
 .ds-card {
-  @apply mb-7 text-base-content;
+  @apply mb-7 text-base-content max-w-full;
+  border-radius: var(--card-border-radius);
   &.ds-card--dense,
   .ds-dense & {
     @apply mb-5;
@@ -28,6 +29,7 @@
     }
   }
   &.ds-card--divider {
+    --card-border-radius: 0;
     @apply border-b border-base-300 pb-4 mb-4;
   }
   &.ds-card--cta {
@@ -64,15 +66,20 @@
 .ds-card__body {
   @apply flex flex-col gap-3 md:gap-4 h-full;
 }
+.ds-card__image {
+  @apply  w-full h-40
+  /* @apply  h-40 -mx-6 */
+  bg-base-200 bg-cover bg-top
+  border border-base-300;
+}
 .ds-card__heading {
   @apply md:text-2xl text-xl font-bold;
   word-break: break-word;
 }
 .ds-card__content {
-  @apply text-base;
   word-break: break-word;
-  font-size: var(--card__text-font-size);
-  line-height: var(--card__text-line-height);
+  font-size: var(--card__content-font-size);
+  line-height: var(--card__content-line-height);
 }
 .ds-card__action {
   @apply flex flex-wrap items-center gap-y-4 mt-auto;

package/src/components/chip.css

@@ -1,5 +1,5 @@
 .ds-chips {
-  @apply flex flex-wrap list-none gap-2;
+  @apply flex flex-wrap list-none gap-2 items-center;
   &.ds-chips--horizontal {
     @apply md:flex md:flex-row md:flex-wrap;
   }

package/src/components/code.css

@@ -0,0 +1,136 @@
+.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__container--wrap-lines {
+    @apply whitespace-pre-wrap overflow-x-hidden;
+  }
+}
+.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 {
+  width: 2.5em;
+  text-align: right;
+  padding-right: 0.5em;
+  pointer-events: none;
+  user-select: none;
+  display: inline-block;  
+  color: #999;
+}
+.ds-code--highlighted-line {
+  background-color: #ffe2e2;
+}
+/* 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: #d73a49
+}
+.ds-code--title,
+.ds-code--title.class_,
+.ds-code--title.class_.inherited__,
+.ds-code--title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1
+}
+.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: #005cc5
+}
+.ds-code--regexp,
+.ds-code--string,
+.ds-code--meta .ds-code--string {
+  /* prettylights-syntax-string */
+  color: #032f62
+}
+.ds-code--built_in,
+.ds-code--symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209
+}
+.ds-code--comment,
+.ds-code--code,
+.ds-code--formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d
+}
+.ds-code--name,
+.ds-code--quote,
+.ds-code--selector-tag,
+.ds-code--selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a
+}
+.ds-code--subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e
+}
+.ds-code--section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold
+}
+.ds-code--bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f
+}
+.ds-code--emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
+  font-style: italic
+}
+.ds-code--strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
+  font-weight: bold
+}
+.ds-code--addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4
+}
+.ds-code--deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #b31d28;
+  background-color: #ffeef0
+}
+.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,33 +30,39 @@
       @apply p-2;
     }
   }
-  .ds-dropdown__button {
-    @apply w-fit print:text-base-content;
-    &::marker {
-      font-size: 0;
-    }
+}
+.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-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-btn-group .ds-btn + .ds-dropdown__content {
-    @apply mt-4;
+  &.ds-dropdown__content--scrollable {
+    @apply overflow-y-auto max-h-64 md:max-h-96;
   }
-  .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;
-    }
+  *:last-child {
+    @apply mb-0;
   }
 }
 
@@ -105,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 {
@@ -118,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,14 +57,11 @@
   @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;
-  @apply border-b-2 border-base-content rounded-none
-  px-4 py-2 w-min m-0 ml-3
-  flex gap-2
-  hover:bg-success-hover active:bg-success-hover hover:no-underline;
+  @apply px-4 py-2 w-min m-0 ml-3 flex gap-2;
 }
 .ds-search {
   @apply flex w-full max-w-3xl;

package/src/components/footer.css

@@ -1,6 +1,9 @@
 .ds-footer {
-  @apply border-0 border-solid font-normal text-base py-4 md:py-8 
-  border-t-4 border-tertiary text-base-800 bg-base-200 w-full
+  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 {
@@ -40,12 +43,15 @@
   }
 }
 .ds-footer__link {
-  @apply underline;
+  text-decoration: var(--footer__link-text-decoration);
+  
   &:hover {
+    text-decoration: var(--footer__link-text-decoration-hover);
     text-decoration-thickness: 2px;
-    color: var(--color-base-800);
+    color:var(--footer__link-color-hover);
   }
   &:focus {
+    color:var(--footer__link-color-focus);
     background-color: var(--color-focus) !important;
     box-shadow:
       0 -2px var(--color-focus),
@@ -94,6 +100,11 @@
     @apply print:hidden;
   }
   .ds-link {
+    --link-color:var(--color-footer);
+    @apply print:text-base-content;
+  }
+  .ds-body {
+    --body-color:var(--color-footer);
     @apply print:text-base-content;
   }
 }

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,
@@ -30,6 +30,30 @@
   line-height: var(--label-line-height);
   letter-spacing: var(--label-letter-spacing);
 }
+.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);
+}
 .ds-input,
 .ds-select,
 .ds-textarea {
@@ -41,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,
@@ -77,27 +102,11 @@
 }
 .ds-select {
   @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;
@@ -136,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);
   }
 }
 
@@ -164,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

@@ -1,14 +1,19 @@
 .ds-header {
-  @apply relative bg-primary border-b-8 print:border-b-2 border-tertiary print:bg-white;
-  border-bottom-style: solid;
+  @apply relative border-b-8 print:border-b-2 border-tertiary print:bg-white;
+  background: var(--header-background);
+  border: var(--header-border);
+  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;
@@ -27,11 +32,13 @@
   text-decoration: none;
 }
 .ds-header__title {
-  @apply text-white font-bold text-2xl leading-10 tracking-wide no-underline
+  @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;
+    /* @apply text-white; */
+    color: var(--header__title-color-hover);
   }
   &:focus {
     text-decoration: none;
@@ -50,7 +57,21 @@
   .ds-header__section {
     > .ds-link,
     > .ds-dropdown .ds-dropdown__button.ds-link {
-      @apply text-white focus:text-link-active print:text-base-content;
+      @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 {
@@ -62,7 +83,7 @@
   .ds-link {
     &:hover {
       .ds-svg-icon {
-        fill: var(--color-white);
+        fill: var(--color-header-text-hover);
       }
     }
     &:focus {
@@ -75,7 +96,8 @@
     }
   }
   .ds-phase-banner__text {
-    @apply text-white print:text-base-content;
+    @apply print:text-base-content;
+    color: var(--color-header-text);
   }
 }
 .ds-header__section {
@@ -88,12 +110,12 @@
 .ds-header__section {
   > .ds-svg-icon--burger {
     @apply float-right focus:bg-focus;
-    fill: var(--color-white);
+    fill: var(--color-header-text);
   }
   > .ds-close-btn {
     @apply sm:hidden;
     .ds-svg-icon--close {
-      fill: var(--color-link) !important;
+      fill: var(--color-header-text) !important;
     }
   }
   > .ds-nav__list {
@@ -101,16 +123,16 @@
       > .ds-nav__list-item-link,
       > .ds-nav__list-item-btn {
         &:not(:focus) {
-          @apply text-white;
+          color: var(--color-header-text);
         }
       }
       > .ds-nav__list-item-link--active,
       > .ds-nav__list-item-btn--active {
         &:not(:focus) {
-          @apply text-white !important;
+          color: var(--color-header-text) !important;
         }
         .ds-svg-icon {
-          fill: var(--color-white);
+          fill: var(--color-header-text);
         }
       }
     }

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;
 }