@digigov/css 0.29.7 → 0.29.9

package/src/components/table.css

@@ -2,6 +2,21 @@
 .example {
   @apply px-5 py-5;
 }
+.govgr-table__caption {
+  @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;
+}
+.govgr-table__caption--m {
+  @apply md:text-3xl text-xl font-bold mx-0 md:mb-8 mb-6 antialiased;
+}
+.govgr-table__caption--l {
+  @apply md:text-4xl text-2xl font-bold mx-0 lg:mb-9 mb-7 antialiased;
+}
+.govgr-table__caption--xl {
+  @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 lg:mb-10 mb-8 max-w-2xl antialiased;
+}
 .govgr-table-container {
   @apply w-full  overflow-x-auto md:mb-10 mb-6;
   .govgr-table {
@@ -9,23 +24,45 @@
   }
 }
 .govgr-table-container--border {
-  @apply border border-gray50 p-2;
+  @apply border border-gray100 p-2;
 }
 .govgr-table {
   @apply w-full border-collapse table;
-  @apply md:mb-10 mb-6 text-base-content md:text-lg text-base font-normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  @apply md:mb-10 mb-6 text-base-content md:text-lg text-base font-normal antialiased;
   border-spacing: 0;
 }
 .govgr-table--with-vertical-lines {
-  .govgr-table__cell {
-    @apply border-l border-r border-solid border-gray50 !important;
+  .govgr-table__cell, .govgr-table__header {
+    @apply border-l border-r border-solid border-gray100 px-4;
   } 
+  .govgr-table__head {
+    @apply border-t border-gray100 ;
+  }
 }
 .govgr-table__body {
   @apply relative;
 }
+
+@supports (-moz-appearance:none) {
+  .govgr-table {
+    border-collapse: unset;
+  }
+  .govgr-table--with-vertical-lines {
+    .govgr-table__header {
+      @apply border-t;
+      @apply border-r-0 !important;
+      &:last-child {
+        @apply border-r border-solid border-gray100 px-4 !important;
+      }
+    }
+    .govgr-table__cell {
+      @apply border-r-0 !important;
+      &:last-child {
+        @apply border-r border-solid border-gray100 px-4 !important;
+      }
+    }
+  }
+}
 .govgr-table__row {
   @apply bg-white;
 }
@@ -37,75 +74,44 @@
     @apply mb-0;
   }
 }
-.govgr-table--with-vertical-lines.govgr-table--light {
-  th, td {
-    @apply px-4 !important;
-  }
-}
 .govgr-table--dark, .govgr-table--zebra {
-  th, td {
+  .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-gray50 !important;
-  }
-.govgr-table--with-vertical-lines.govgr-table--dense.govgr-table--dark {
-  .govgr-table__head .govgr-table__row .govgr-table__header:first-child {
-    @apply border-b-0 border-l border-solid border-primary !important;
-  }
+.govgr-table--with-vertical-lines.govgr-table--light {
+  .govgr-table__body .govgr-table__header {
+      @apply border-l border-solid border-gray100 !important;
+    }
 }
 .govgr-table--with-vertical-lines.govgr-table--dark{
-  .govgr-table__head .govgr-table__row .govgr-table__header:last-child {
-        @apply border-b-0 border-r border-solid border-primary !important;
-    }
+  .govgr-table__header {
+    @apply border-0;
+    @apply print:border;
+  } 
 }
 .govgr-table--dark {
-  th {
-    @apply border-none bg-primary text-white;
-  }
-  .govgr-table__head .govgr-table__row .govgr-table__header {
-    @apply py-3 !important;
-  }
-  .govgr-table__body .govgr-table__row .govgr-table__header {
-    @apply border-r border-solid border-gray50 !important;
+  .govgr-table__header {
+    @apply border-0 bg-primary text-white;
+    @apply print:border-b print:bg-white print:text-base-content;
   }
 }
 .govgr-table--zebra {
   .govgr-table__body {
     .govgr-table__row:nth-child(even) {
-      @apply bg-base100;
+      @apply bg-base100 print:bg-white;
     }
   }
 }
 .govgr-table--dense {
   &.govgr-table {
-    tr, th, td {
+    .govgr-table__row, .govgr-table__header, .govgr-table__cell {
      @apply text-sm py-2;
    }
   }
 }
-.govgr-table__caption {
-  @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;
-  -webkit-font-smoothing: antialiased;
-}
-.govgr-table__caption--m {
-  @apply md:text-3xl text-xl font-bold mx-0 md:mb-8 mb-6;
-  -webkit-font-smoothing: antialiased;
-}
-.govgr-table__caption--l {
-  @apply md:text-4xl text-2xl font-bold mx-0 lg:mb-9 mb-7;
-  -webkit-font-smoothing: antialiased;
-}
-.govgr-table__caption--xl {
-  @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 lg:mb-10 mb-8 max-w-2xl;
-  -webkit-font-smoothing: antialiased;
-}
 .govgr-table__header, .govgr-table__cell {
-  @apply pr-5 py-2.5 pl-0 border-b border-solid border-gray50 text-left align-middle;
+  @apply pr-5 py-2.5 pl-0 border-b border-solid border-gray100 text-left align-middle;
    &:last-child {
       @apply pr-0;
     }
@@ -123,7 +129,7 @@
 }
 .govgr-table__loading{
   @apply h-full w-full absolute right-0 left-0 flex items-center justify-center
-   bg-white bg-opacity-50;
+   bg-white bg-opacity-50 print:hidden;
 }
  
 @supports ((-webkit-backdrop-filter: blur(0.6px)) or (backdrop-filter: blur(0.6px))) {

package/src/components/tabs.css

@@ -13,6 +13,7 @@
     .govgr-tabs__list-item {
       @apply relative  px-4 py-2 m-0 shadow-none cursor-pointer;
       @apply md:float-left  md:border md:border-base100 md:bg-base100 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;
         margin-bottom: -1px;
@@ -44,7 +45,8 @@
     }
   }
   .govgr-tabs__panel {
-    @apply bg-white md:hidden block md:px-4 py-4 pt-8 md:border md:border-base150 mb-0;
+    @apply bg-white md:hidden block md:px-4 py-4 pt-8 md:border md:border-base150 mb-0
+    print:block print:border-0 print:py-3;
     &.govgr-tabs__panel-visible {
       @apply block;
     }

package/src/components/task-list.css

@@ -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;
+  @apply bg-secondary600 text-white print:border-2 print:bg-white print:border-secondary800 print:text-secondary800 print:mr-4; 
 }
 .govgr-tag__secondary {
-  @apply bg-secondary50 text-primary;
+  @apply bg-secondary50 text-primary print:border-2 print:bg-white print:border-secondary600 print:text-secondary600 print:mr-4;
 }
 .govgr-tag__gray {
-  @apply bg-base100;
+  @apply bg-base100 print:border-2 print:bg-white print:border-base300 print:text-base300 print:mr-4;
 }

package/src/components/timeline.css

@@ -13,8 +13,8 @@
   @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2 relative;
   &::before {
     content: "";
-    @apply block absolute top-4 -left-6
-    w-4 h-1 bg-secondary;
+    @apply block absolute top-4 -left-6 w-4 
+    border-b-4 border-secondary;
   }
 }
 .govgr-timeline__heading-m {

package/src/components/typography.css

@@ -93,7 +93,7 @@
 }
 .govgr-background-dark, .govgr-masthead {
   .govgr-hint {
-    @apply opacity-70 text-white;
+    @apply opacity-70 text-white print:text-base-content;
   }
 }
 .govgr-\!-font-weight-regular {
@@ -116,10 +116,10 @@
 }
 .govgr-header {
   .govgr-header__container > .govgr-link {
-    @apply text-gray100 focus:text-link-active print:text-base-content;
+    @apply text-gray50 focus:text-link-active print:text-base-content;
   }
   .govgr-header__content > .govgr-link {
-    @apply text-gray100 focus:text-link-active print:text-base-content;
+    @apply text-gray50 focus:text-link-active print:text-base-content;
   }
 }
 .govgr-link--no-underline {
@@ -161,3 +161,19 @@
     @apply text-white print:text-base-content;
   }
 }
+
+@media print {
+  .govgr-body .govgr-link[href^="#"]:after {
+    display: none;
+  }
+  .govgr-link[href^="http://"]:after, .govgr-link[href^="https://"]:after {
+    content: " (" attr(href) ")";
+    font-size: 80%;
+  }
+  .govgr-body .govgr-link {
+    word-wrap: break-word;
+  }
+  .govgr-link {
+    @apply text-base-content;
+  }
+}

package/tailwind.config.js

@@ -1,84 +1,94 @@
-const plugin = require('tailwindcss/plugin')
-const defaultTheme = require('tailwindcss/defaultTheme')
-const colors = require('./colors');
-const colorVarsPlugin = require('./color-vars.plugin')
+const plugin = require("tailwindcss/plugin");
+const defaultTheme = require("tailwindcss/defaultTheme");
+const colors = require("./colors");
+const colorVarsPlugin = require("./color-vars.plugin");
 
-const buildOnly = !process.env['DIGIGOV_CSS_BUILD'] ? {
-  mode: 'jit',
-} : {}
+const buildOnly = !process.env["DIGIGOV_CSS_BUILD"]
+  ? {
+      mode: "jit",
+    }
+  : {};
+const colorVariables = Object.keys(colors.light).reduce((allColors, color) => {
+  allColors[color] = `var(--color-${color})`;
+  return allColors;
+}, {});
 module.exports = {
   ...buildOnly,
+  darkMode: 'class',
   theme: {
-    colors,
+    colors: colors.light,
+    themes: colors,
     container: {
       center: true,
     },
     fontSize: {
       ...defaultTheme.fontSize,
-      'lg': '1.1875rem',
+      lg: "1.1875rem",
     },
     screens: {
-      xs: '0px',
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '2xl': '1280px',
-      'print': {'raw': 'print'},
+      xs: "0px",
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1280px",
+      print: { raw: "print" },
     },
     fontFamily: {
-      sans: ['Roboto', ...defaultTheme.fontFamily.sans]
+      sans: ["Roboto", ...defaultTheme.fontFamily.sans],
     },
+    borderColor: colorVariables,
+    backgroundColor: colorVariables,
+    textColor: colorVariables,
     extend: {
       height: {
-        'fit': 'fit-content',
+        fit: "fit-content",
       },
       width: {
-        'fit': 'fit-content',
+        fit: "fit-content",
       },
       minWidth: {
-        '10': '2.5rem',
-        '52': '13rem',
+        10: "2.5rem",
+        32: "8rem",
+        52: "13rem",
       },
       minHeight: {
-        '4': '1rem',
-        '6': '1.5rem',
-        '8': '2rem',
-        '10': '2.5rem',
-        '12': '3rem',
-        '14': '3.5rem',
+        4: "1rem",
+        6: "1.5rem",
+        8: "2rem",
+        10: "2.5rem",
+        12: "3rem",
+        14: "3.5rem",
       },
       borderWidth: {
-        '3': '3px',
-        '5': '5px',
-        '6': '6px',
+        3: "3px",
+        5: "5px",
+        6: "6px",
       },
       flexGrow: {
-        '2': '2',
+        2: "2",
       },
       zIndex: {
-        '/1': -1,
-        '1': 1,
+        "/1": -1,
+        1: 1,
       },
       opacity: {
-        '85': '0.85',
+        85: "0.85",
       },
       margin: {
-        '15': '3.75rem',
+        15: "3.75rem",
       },
       boxShadow: {
-        'thick': '0 0 30px rgba(0, 0, 0, 0.6)',
-      }
+        thick: "0 0 30px rgba(0, 0, 0, 0.6)",
+      },
     },
   },
   variants: {
     extend: {
-      textDecoration: ['active'],
-      backgroundColor: ['active'],
-      borderColor: ['active']
-    }
+      textDecoration: ["active"],
+      backgroundColor: ["active"],
+      borderColor: ["active"],
+    },
   },
-  plugins: [
-    plugin(colorVarsPlugin)
-  ],
+  plugins: [plugin(colorVarsPlugin)],
 };

package/colors/color-values.js

@@ -1,66 +0,0 @@
-module.exports = {
-
-  "primary": "#003375",
-  "primary-focus": "#004594",
-  "primary200": "#002152",
-
-  "secondary50": "#4dd5ff",
-  "secondary200": "#00b0f0",
-  "secondary": "#00b0f0",
-  "secondary-focus": "#0081d6",
-  "secondary400": "#0081d6",
-  "secondary600": "#0065b3",
-  "secondary800": "#004594",
-
-  "content-dark": "#fff",
-  "content": "#212930",
-  "content-secondary":"#56565d",
-
-  "accent": "#212930",  /* Accent sets the color for user-interface controls generated by some elements (checkbox, radio, range input, progress tag).*/
-  "accent-focus": "#2aa79b",
-  "accent-content": "#fff",
-  "neutral": "#43454c",
-  "neutral-focus": "#31363f",
-  "neutral-content": "#fff",
-
-  "base100": "#ebebeb",
-  "base150": "#b3b2b3",
-  "base200": "#99989a",
-  "base300": "#56565d",
-  "base300-content": "#fff",
-  "base-content": "#212930",
-  "base-content-secondary": "#56565d",
-  "base-content-invert": "#fff",
-
-  "info": "#00b0f0",
-  "success": "#006636", 
-  "success-hover": "#004D29",
-  "warning": "#f90",
-  "error": "#B60202",
-  "error-hover": "#880202",
-  "focus": "#fd0",
-  "link": "#0149A7",
-  "link-hover": "#003375",
-  "link-visited": "#4c2b91",
-  "link-active": "#002152",
-
-  "white": "#fff",
-  "gray50": "#ccc",
-  "gray100": "#ebebeb",
-  "gray200": "#b3b2b3",
-  "base-bg": "#b3b2b3",
-  "gray300": "#99989a",
-  "gray400": "#828085",
-  "gray500": "#6c6a71",
-  "gray600": "#56565d",
-  "gray700": "#43454c",
-  "gray800": "#31363f",
-  "gray900": "#212930",
-  "black": "#000",
-
-  "shadow200" : "#21293033",
-  "shadow600" :"#21293099",
-
-}
-
-