@digigov/css 0.35.0 → 0.37.0

package/src/components/notification-banner.css

@@ -1,6 +1,6 @@
 .govgr-notification-banner {
-  @apply bg-secondary600 border-5 border-secondary600 mb-6 md:mb-8 font-normal
-  print:bg-white;
+  @apply bg-info border-5 border-info mb-6 md:mb-8 font-normal
+  print:bg-base-100;
 }
 .govgr-notification-banner--success{
   @apply bg-success border-success
@@ -13,13 +13,13 @@
 }
 .govgr-notification-banner__header {
   @apply text-white p-0 m-0 text-base md:text-lg
-  print:border-b print:border-gray200 print:text-base-content print:pt-2;
+  print:border-b print:border-base-400 print:text-base-content print:pt-2;
 }
 .govgr-notification-banner__title {
   @apply border-b border-transparent pt-1 px-4 sm:px-5 pb-2 font-bold;
 }
 .govgr-notification-banner__content {
-  @apply bg-white text-base-content p-4 md:p-5;
+  @apply bg-base-100 text-base-content p-4 md:p-5;
   &>* {
     @apply box-border max-w-xl;
   }

package/src/components/pagination.css

@@ -24,9 +24,9 @@
 }
 .govgr-pagination__item--inactive {
   .govgr-link {
-    @apply flex text-gray600 cursor-not-allowed no-underline font-normal;
+    @apply flex text-base-800 cursor-not-allowed no-underline font-normal;
   }
   .govgr-arrow--left, .govgr-arrow--right {
-    fill:var(--color-gray600);
+    fill:var(--color-base-800);
   }
 }

package/src/components/phase-banner.css

@@ -2,21 +2,21 @@
   @apply py-2 mb-4;
 }
 .govgr-phase-banner__underline {
-  @apply border-gray300 border-b;
+  @apply border-base-500 border-b;
 }
 .govgr-phase-banner__content {
   font-size: var(--phase-banner__content-font-size);
   @apply table;
 }
 .govgr-phase-banner__content__tag {
-  @apply px-2 py-1 mr-2 inline-block bg-secondary600 font-sans text-white text-sm uppercase tracking-widest
-  print:bg-white print:border-2 print:border-secondary600 print:text-secondary600 print:mr-4;
+  @apply px-2 py-1 mr-2 inline-block bg-info font-sans text-white text-sm uppercase tracking-widest
+  print:bg-white print:border-2 print:border-info print:text-info print:mr-4;
 }
 .govgr-phase-banner__text {
   @apply table-cell text-base-content;
 }
 .govgr-header .govgr-phase-banner__text, .govgr-masthead--primary .govgr-phase-banner__text {
-  @apply text-header-content print:text-base-content;
+  @apply text-white print:text-base-content;
 }
 .govgr-phase-banner_header {
   @apply bg-focus top-0 z-30

package/src/components/radios.css

@@ -19,7 +19,7 @@
 .govgr-radios__input {
   @apply absolute z-1 left-0.5 -top-1 m-0 rounded-3xl
   w-10 h-10 opacity-100 cursor-pointer
-  bg-white m-0;
+  bg-base-100 m-0;
   appearance: none;
   width: 40px;
   height: 40px;
@@ -27,7 +27,7 @@
   border-radius: 50%;
   &::before {
     content: "";
-    @apply absolute bg-white opacity-0 w-0 h-0;
+    @apply absolute bg-base-100 opacity-0 w-0 h-0;
     top: 6px;
     left: 6px;
     border: 12px solid currentColor;

package/src/components/stepnav.css

@@ -18,12 +18,12 @@
       height: calc(100% - 2rem);
     }
     &:after {
-      @apply absolute z-/1 w-0 h-full bg-white left-0 top-8 border-2 border-gray200 border-r-0 border-t-0 border-b-0 md:border-l-3;
+      @apply absolute z-/1 w-0 h-full bg-base-100 left-0 top-8 border-2 border-base-400 border-r-0 border-t-0 border-b-0 md:border-l-3;
       content: "";
       margin-left: calc(0.75rem + 1px);
     }
     &:last-child:before {
-      @apply absolute z-1 left-0 h-0 bottom-0 ml-2 w-3 border border-gray200;
+      @apply absolute z-1 left-0 h-0 bottom-0 ml-2 w-3 border border-base-400;
       @apply md:border-t-2 md:ml-2 md:w-5;
       content: "";
     }
@@ -46,7 +46,7 @@
   text-shadow: 0 -0.1em 0 var(--color-white), 0.1em 0 0 var(--color-white), 0 0.1em 0 var(--color-white), -0.1em 0 0 var(--color-white);
 }
 .govgr-step-nav__circle--number {
-  @apply border-2 border-gray200;
+  @apply border-2 border-base-400;
 }
 
 .govgr-step-nav__circle--number {
@@ -60,7 +60,7 @@
   @apply md:border-0 border-0;
 }
 .govgr-step-nav__accordion {
-  @apply  border-gray200;
+  @apply  border-base-400;
 
   &:first-child {
     @apply border-t-2;

package/src/components/summary-list.css

@@ -15,7 +15,7 @@
 
 .govgr-summary-list__row {  
   @apply block sm:flex
-  pb-4 mb-4 border-b border-solid border-gray100
+  pb-4 mb-4 border-b border-solid border-base-300
   sm:pb-0 sm:mb-0 sm:border-0 print:flex print:flex-row print:flex-nowrap;
 }
 .govgr-summary-list--no-border .govgr-summary-list__row {  
@@ -67,7 +67,7 @@
 .govgr-summary-list__value, 
 .govgr-summary-list__actions {
   @apply m-0 
-  sm:table-cell sm:py-2 sm:pr-4 sm:border-b sm:border-solid sm:border-gray100; 
+  sm:table-cell sm:py-2 sm:pr-4 sm:border-b sm:border-solid sm:border-base-300; 
 }
 .govgr-summary-list--no-border {
   .govgr-summary-list__key, 

package/src/components/svg-icons.css

@@ -43,11 +43,11 @@
 .govgr-header, .govgr-admin-header {
   .govgr-link {
     .govgr-svg-icon {
-      fill:var(--color-header-content);
+      fill:var(--color-white);
     }
     &:hover {
       .govgr-svg-icon {
-        fill:var(--color-header-content);
+        fill:var(--color-white);
       }
     }
     &:focus {
@@ -64,7 +64,7 @@
   fill: var(--color-white) !important;
 }
 .govgr-svg-icon--gray {
-  fill: var(--color-gray200) !important;
+  fill: var(--color-base-400) !important;
 }
 .govgr-svg-icon--primary {
   fill: var(--color-primary) !important;

package/src/components/table.css

@@ -3,7 +3,7 @@
   @apply px-5 py-5;
 }
 .govgr-table__caption {
-  @apply table-caption text-left font-bold;  
+  @apply table-caption text-left font-bold;
 }
 .govgr-table__caption--s {
   @apply md:text-2xl text-lg font-bold mx-0 md:mb-6 mb-4 antialiased;
@@ -24,7 +24,7 @@
   }
 }
 .govgr-table-container--border {
-  @apply border border-gray100 p-2;
+  @apply border border-base-300 p-2;
 }
 .govgr-table {
   @apply w-full border-collapse table;
@@ -32,18 +32,37 @@
   border-spacing: 0;
 }
 .govgr-table--with-vertical-lines {
-  .govgr-table__cell, .govgr-table__header {
-    @apply border-l border-r border-solid border-gray100 px-4;
-  } 
+  .govgr-table__cell,
+  .govgr-table__header {
+    @apply border-l border-r border-solid border-base-300 px-4;
+  }
   .govgr-table__head {
-    @apply border-t border-gray100 ;
+    @apply border-t border-base-300 text-base-content !important;
+  }
+}
+.govgr-table__header {
+  .govgr-dropdown__button {
+    @apply no-underline font-bold text-base-content !important;
+  }
+  .govgr-dropdown__button--underline:not(:focus) {
+    @apply underline !important;
+    text-decoration-thickness: 2px !important;
+  }
+  .govgr-dropdown__content {
+    @apply py-0;
+  }
+  .govgr-vertical-nav__item {
+    @apply flex font-normal no-underline;
+  }
+  .govgr-vertical-nav__item--active:not(:focus) {
+    @apply bg-base-200 font-normal !important;
   }
 }
 .govgr-table__body {
   @apply relative;
 }
 
-@supports (-moz-appearance:none) {
+@supports (-moz-appearance: none) {
   .govgr-table {
     border-collapse: unset;
   }
@@ -52,49 +71,51 @@
       @apply border-t;
       @apply border-r-0 !important;
       &:last-child {
-        @apply border-r border-solid border-gray100 px-4 !important;
+        @apply border-r border-solid border-base-300 px-4 !important;
       }
     }
     .govgr-table__cell {
       @apply border-r-0 !important;
       &:last-child {
-        @apply border-r border-solid border-gray100 px-4 !important;
+        @apply border-r border-solid border-base-300 px-4 !important;
       }
     }
   }
 }
 .govgr-table__row {
-  @apply bg-white;
+  @apply bg-base-100;
 }
 .govgr-table__row--warning {
   @apply border-l-4 border-warning;
-  .govgr-table__cell:first-child{
+  .govgr-table__cell:first-child {
     @apply pl-2;
   }
 }
-.govgr-table__cell{
+.govgr-table__cell {
   .govgr-btn {
-      @apply mb-0;
+    @apply mb-0;
   }
   .govgr-button-group {
     @apply mb-0;
   }
 }
-.govgr-table--dark, .govgr-table--zebra {
-  .govgr-table__header, .govgr-table__cell {
+.govgr-table--dark,
+.govgr-table--zebra {
+  .govgr-table__header,
+  .govgr-table__cell {
     @apply px-4 !important;
   }
 }
 .govgr-table--with-vertical-lines.govgr-table--light {
   .govgr-table__body .govgr-table__header {
-      @apply border-l border-solid border-gray100 !important;
-    }
+    @apply border-l border-solid border-base-300 !important;
+  }
 }
-.govgr-table--with-vertical-lines.govgr-table--dark{
+.govgr-table--with-vertical-lines.govgr-table--dark {
   .govgr-table__header {
     @apply border-0;
     @apply print:border;
-  } 
+  }
 }
 .govgr-table--dark {
   .govgr-table__header {
@@ -105,24 +126,92 @@
 .govgr-table--zebra {
   .govgr-table__body {
     .govgr-table__row:nth-child(even) {
-      @apply bg-gray100 print:bg-white;
+      @apply bg-base-200 print:bg-white;
     }
   }
 }
 .govgr-table--dense {
   &.govgr-table {
-    .govgr-table__row, .govgr-table__header, .govgr-table__cell {
-     @apply text-sm py-2;
-   }
+    .govgr-table__row,
+    .govgr-table__header,
+    .govgr-table__cell {
+      @apply text-sm py-2;
+    }
   }
 }
-.govgr-table__header, .govgr-table__cell {
-  @apply pr-5 py-2.5 pl-0 border-b border-solid border-gray100 text-left align-middle;
-   &:last-child {
-      @apply pr-0;
+.govgr-table--stacked-always {
+  .govgr-table__header,
+  .govgr-table__cell {
+    &:last-child {
+      @apply border-b-2 border-base-content;
     }
+  }
+  .govgr-table__header {
+    @apply hidden;
+  }
+  .govgr-table__cell {
+    @apply block;
+  }
+  .govgr-table__cell[data-label]:before {
+    content: attr(data-label);
+    @apply block font-semibold;
+  }
 }
-.govgr-table__header--numeric, .govgr-table__cell--numeric {
+.govgr-table--stacked-s {
+  .govgr-table__header,
+  .govgr-table__cell {
+    &:last-child {
+      @apply border-b-2 border-base-content sm:border-b sm:border-base-300;
+    }
+  }
+  .govgr-table__header {
+    @apply hidden sm:table-cell;
+  }
+  .govgr-table__cell {
+    @apply block sm:table-cell;
+  }
+  .govgr-table__cell[data-label]:before {
+    content: attr(data-label);
+    @apply block font-semibold;
+  }
+  @media (min-width: 640px) {
+    .govgr-table__cell[data-label]:before {
+      content: none;
+    }
+  }
+}
+.govgr-table--stacked-m {
+  .govgr-table__header,
+  .govgr-table__cell {
+    &:last-child {
+      @apply border-b-2 border-base-content md:border-b md:border-base-300;
+    }
+  }
+  .govgr-table__header {
+    @apply hidden md:table-cell;
+  }
+  .govgr-table__cell {
+    @apply block md:table-cell;
+  }
+  .govgr-table__cell[data-label]:before {
+    content: attr(data-label);
+    @apply block font-semibold;
+  }
+  @media (min-width: 768px) {
+    .govgr-table__cell[data-label]:before {
+      content: none;
+    }
+  }
+}
+.govgr-table__header,
+.govgr-table__cell {
+  @apply pr-5 py-2.5 pl-0 border-b border-solid border-base-300 text-left align-middle;
+  &:last-child {
+    @apply pr-0;
+  }
+}
+.govgr-table__header--numeric,
+.govgr-table__cell--numeric {
   @apply text-right;
 }
 .govgr-table__body--vertical-top {
@@ -138,17 +227,19 @@
 .govgr-table__cell--numeric {
   @apply font-normal;
   font-feature-settings: normal;
-  font-variant-numeric: tabular-nums;  
+  font-variant-numeric: tabular-nums;
 }
-.govgr-table__cell--no-data{
+.govgr-table__cell--no-data {
   @apply border-b-0 pt-2.5;
 }
-.govgr-table__loading{
+.govgr-table__loading {
   @apply h-full w-full absolute right-0 left-0 flex items-center justify-center
    bg-white bg-opacity-50 print:hidden;
 }
- 
-@supports ((-webkit-backdrop-filter: blur(0.6px)) or (backdrop-filter: blur(0.6px))) {
+
+@supports (
+  (-webkit-backdrop-filter: blur(0.6px)) or (backdrop-filter: blur(0.6px))
+) {
   .govgr-table__loading {
     @apply bg-opacity-30;
     -webkit-backdrop-filter: blur(0.6px);

package/src/components/tabs.css

@@ -12,10 +12,10 @@
     }
     .govgr-tabs__list-item {
       @apply relative  px-4 py-2 m-0 shadow-none cursor-pointer;
-      @apply md:float-left  md:border md:border-gray100 md:bg-gray100 md:rounded-t-sm md:mr-2 ;
+      @apply md:float-left  md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2 ;
       @apply print:hidden;
       &.govgr-tabs__list-item-selected {
-        @apply no-underline md:border-gray200 md:border bg-white md:border-b-0 md:px-5 md:pb-4 md:-mt-1 md:pt-4;
+        @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:pb-4 md:-mt-1 md:pt-4;
         margin-bottom: -1px;
         &:hover {
           text-decoration-thickness: 2px;
@@ -45,7 +45,7 @@
     }
   }
   .govgr-tabs__panel {
-    @apply bg-white md:hidden block md:px-4 py-4 pt-8 md:border md:border-gray200 mb-0
+    @apply bg-base-100 md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-400 mb-0
     print:block print:border-0 print:py-3;
     &.govgr-tabs__panel-visible {
       @apply block;

package/src/components/task-list.css

@@ -20,10 +20,10 @@
   }
   .govgr-summary-list__row:first-child  {
     &>dt {
-      @apply border-t-2 border-gray200;
+      @apply border-t-2 border-base-400;
     }
     &>dd {
-      @apply sm:border-t-2 sm:border-gray200;
+      @apply sm:border-t-2 sm:border-base-400;
     }
   }
   .govgr-summary-list__key {
@@ -34,11 +34,11 @@
   @apply px-2 py-1 mr-2 inline-block font-sans text-sm uppercase tracking-widest;
 }
 .govgr-tag__primary {
-  @apply bg-secondary600 text-white print:border-2 print:bg-white print:border-secondary800 print:text-secondary800 print:mr-4; 
+  @apply bg-info text-white print:border-2 print:bg-white print:border-info-hover print:text-info-hover print:mr-4; 
 }
 .govgr-tag__secondary {
-  @apply bg-secondary50 text-primary print:border-2 print:bg-white print:border-secondary600 print:text-secondary600 print:mr-4;
+  @apply bg-secondary text-base-content print:border-2 print:bg-white print:border-info print:text-info print:mr-4;
 }
 .govgr-tag__gray {
-  @apply bg-gray100 print:border-2 print:bg-white print:border-gray600 print:text-gray600 print:mr-4;
+  @apply bg-base-300 print:border-2 print:bg-white print:border-base-800 print:text-base-800 print:mr-4;
 }

package/src/components/typography.css

@@ -140,7 +140,7 @@
   line-height: var(--body-s-line-height);
 }
 .govgr-hint-l {
-  @apply mb-4 lg:text-2xl text-lg text-gray600;
+  @apply mb-4 lg:text-2xl text-lg text-base-800;
 }
 .govgr-hint {
   font-size: var(--hint-font-size);
@@ -150,7 +150,7 @@
   letter-spacing: var(--hint-letter-spacing);
 }
 .govgr-hint-s {
-  @apply mb-4 lg:text-base text-sm text-gray600;
+  @apply mb-4 lg:text-base text-sm text-base-800;
 }
 .govgr-background-dark, .govgr-masthead--primary {
   .govgr-hint {
@@ -171,7 +171,7 @@
   font-size: var(--link-font-size);
   line-height: var(--link-line-height);
   letter-spacing: var(--link-letter-spacing);
-  &:hover {
+  &:hover:not(:focus) {
     text-decoration-thickness: 2px;
     color: var(--link-color-hover);
   }
@@ -184,10 +184,10 @@
 }
 .govgr-header {
   .govgr-header__container > .govgr-link {
-    @apply text-header-content focus:text-link-active print:text-base-content;
+    @apply text-white focus:text-link-active print:text-base-content;
   }
   .govgr-header__content > .govgr-link {
-    @apply text-header-content focus:text-link-active print:text-base-content;
+    @apply text-white focus:text-link-active print:text-base-content;
   }
 }
 .govgr-link--no-underline {
@@ -237,7 +237,7 @@
   }
   &.dark {
     .govgr-link {
-      @apply bg-gray100;
+      @apply bg-base-300;
     }
   }
 }

package/tailwind.config.js

@@ -6,34 +6,36 @@ const allColors = [
   "transparent",
   "current",
   "primary",
-  "primary-focus",
-  "primary200",
-  "secondary50",
-  "secondary200",
+  "primary-100",
+  "primary-200",
+  "primary-300",
   "secondary",
-  "secondary-focus",
-  "secondary400",
-  "secondary600",
-  "secondary800",
-  "content-dark",
-  "content",
-  "content-secondary",
+  "secondary-100",
+  "secondary-200",
+  "secondary-300",
+  "tertiary",
+  "tertiary-100",
+  "tertiary-200",
+  "tertiary-300",
   "accent",
   "accent-focus",
   "accent-content",
-  "neutral",
-  "neutral-focus",
-  "neutral-content",
-  "header-content",
-  "base100",
-  "base150",
-  "base200",
-  "base300",
-  "base300-content",
+  "base-100",
+  "base-200",
+  "base-300",
+  "base-400",
+  "base-500",
+  "base-600",
+  "base-700",
+  "base-800",
+  "base-900",
+  "base-1000",
+  "base-11000",
   "base-content",
   "base-content-secondary",
   "base-content-invert",
   "info",
+  "info-hover",
   "success",
   "success-hover",
   "warning",
@@ -45,17 +47,18 @@ const allColors = [
   "link-visited",
   "link-active",
   "white",
-  "gray50",
-  "gray100",
-  "gray200",
-  "base-bg",
-  "gray300",
-  "gray400",
-  "gray500",
-  "gray600",
-  "gray700",
-  "gray800",
-  "gray900",
+  "gray-100",
+  "gray-200",
+  "gray-300",
+  "gray-400",
+  "gray-500",
+  "gray-600",
+  "gray-700",
+  "gray-800",
+  "gray-900",
+  "gray-1000",
+  "gray-1100",
+  "gray-1200",
   "black",
   "shadow200",
   "shadow600",

package/themes.plugin.js

@@ -28,19 +28,21 @@ function addThemes({ addBase, addComponents, theme, config }) {
   }
   hasRun = true;
   function extractColorVars(colorObj, colorGroup = "") {
-    return Object.keys(colorObj).reduce((vars, colorKey) => {
-      const value = colorObj[colorKey];
-
-      const newVars =
-        typeof value === "string"
-          ? {
-              [`--color${colorGroup}-${colorKey}`]: value,
-              [`--color${colorGroup}-${colorKey}-rgb`]: hexToRGB(value),
-            }
-          : extractColorVars(value, `-${colorKey}`);
-
-      return { ...vars, ...newVars };
-    }, {});
+      return Object.keys(colorObj).reduce((vars, colorKey) => {
+        const value = colorObj[colorKey];
+        const colorName =
+          colorKey == "default"
+            ? `--color${colorGroup}`
+            : `--color${colorGroup}-${colorKey}`;
+        const newVars =
+          typeof value === "string"
+            ? {
+                [colorName]: value,
+                [`${colorName}-rgb`]: hexToRGB(value),
+              }
+            : extractColorVars(value, `-${colorKey}`);
+        return { ...vars, ...newVars };
+      }, {});
   }
 
   function extractMediaQueriesFromComponentVars(componentObj, customTheme) {
@@ -55,21 +57,23 @@ function addThemes({ addBase, addComponents, theme, config }) {
             const newAttr = { [newAttrKey]: newAttrValue };
             const newClass = `.${prefix}-${componentClass}`;
             const newMedia = mediaQueriesMapping[componentMedia];
-            const newTheme = customTheme === defaultTheme ? "" : `.${customTheme}`;
-                        
+            const newTheme =
+              customTheme === defaultTheme ? "" : `.${customTheme}`;
+
             if (mediaObj[newMedia]) {
               if (mediaObj[newMedia][newTheme][newClass]) {
-                mediaObj[newMedia][newTheme][newClass][newAttrKey] = newAttrValue;
+                mediaObj[newMedia][newTheme][newClass][newAttrKey] =
+                  newAttrValue;
               } else {
                 mediaObj[newMedia][newTheme][newClass] = newAttr;
               }
             } else {
-              mediaObj[newMedia] = { [newTheme]: { [newClass]: newAttr }};
-            }          
+              mediaObj[newMedia] = { [newTheme]: { [newClass]: newAttr } };
+            }
           }
-          );
-        });
+        );
       });
+    });
     return mediaObj;
   }
 
@@ -136,13 +140,12 @@ function addThemes({ addBase, addComponents, theme, config }) {
       );
       Object.keys(extractedVariables).forEach((key) => {
         if (base[key]) {
-          base[key] = {...base[key], ...extractedVariables[key]}
+          base[key] = { ...base[key], ...extractedVariables[key] };
         } else {
           base[key] = extractedVariables[key];
         }
-      }); 
+      });
     }
-
   }
   addBase(base);
 }