@digigov/css 0.29.8 → 0.29.10-dark-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "0.29.8",
+  "version": "0.29.10-dark-beta",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -24,16 +24,17 @@
     "dist",
     "!dist/components",
     "index.js",
+    "defaultTheme.js",
     "src",
     "colors",
-    "color-vars.plugin.js",
+    "themes.plugin.js",
     "postcss.config.js",
     "tailwind.config.js"
   ],
   "publishConfig": {
     "access": "public",
     "branches": [
-      "master"
+      "main"
     ]
   },
   "devDependencies": {
@@ -49,7 +50,9 @@
     "nodemon": "2.0.7",
     "next": "10.0.9",
     "@digigov/postcss-banner": "0.3.18",
-    "rimraf": "3.0.2"
+    "rimraf": "3.0.2",
+    "postcss-js": "4.0.0",
+    "postcss-load-config": "3.1.4"
   },
   "scripts": {
     "preutilities": "DIGIGOV_CSS_BUILD=TRUE postcss --config src/utilities src/utilities/index.css --base src --dir dist",

package/src/base/tailwind.config.js

@@ -1,6 +1,6 @@
 const plugin = require('tailwindcss/plugin')
 const tailwindConfig = require('../../tailwind.config.js');
-const colorVarsPlugin = require('../../color-vars.plugin')
+const themesPlugin = require('../../themes.plugin')
 
 module.exports = {
 	...tailwindConfig,
@@ -9,6 +9,6 @@ module.exports = {
 			addComponents(require('../../dist/components'))
 			addUtilities(require('../../dist/utilities'))
 		}),
-    plugin(colorVarsPlugin) 
+    plugin(themesPlugin) 
 	],
 }

package/src/components/button.css

@@ -71,7 +71,7 @@
   }
 }
 .govgr-btn-disabled {
-  @apply bg-opacity-50 hover:bg-opacity-50 cursor-not-allowed
+  @apply opacity-50 hover:bg-opacity-50 cursor-not-allowed
   print:text-gray200 print:border-opacity-50;
 }
 .govgr-btn-link {

package/src/components/card.css

@@ -1,5 +1,5 @@
 .govgr-card {
-  @apply mb-7 text-base-content;
+  @apply mb-7 text-base-content h-full;
 }
 .govgr-card--border {
   @apply border-2 border-base-content p-6;
@@ -11,18 +11,20 @@
   @apply border-b border-gray100 pb-4 mb-4;
 }
 .govgr-card__heading {
+  word-break: break-word;
   @apply md:text-2xl text-xl font-bold;
 }
 .govgr-card__text {
+  word-break: break-word;
   @apply text-base lg:text-xl text-lg;
 }
 .govgr-card__body {
-  @apply grid gap-3 md:gap-4;
+  @apply flex flex-col gap-3 md:gap-4 h-full;
 }
 .govgr-card__action {
-  @apply flex flex-wrap items-center gap-y-4;
+  @apply flex flex-wrap items-center gap-y-4 mt-auto;
   .govgr-link, .govgr-btn {
-    @apply mb-0;
+    @apply mb-0 max-w-fit w-fit;
   }
 }
 @media print {
@@ -39,24 +41,29 @@
 .govgr-card--cta {
   .govgr-card__body {
     @apply pr-8 relative;
+
     &:after {
       content: "";
-      transition: all 0.1s ease; 
+      transition: all 0.1s ease;
       @apply w-5 h-5 bg-contain bg-no-repeat bg-center absolute right-2 top-2 z-/1;
-      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>" );
+      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>");
     }
+
     &:hover {
       &:after {
         @apply right-1;
       }
     }
   }
+
   .govgr-card__heading {
     @apply md:text-xl text-lg tracking-wide;
     @apply leading-8 !important;
+
     .govgr-link {
+
       /* Clickable area will be at all the card with 'after' */
-      &::after {  
+      &::after {
         content: "";
         @apply block absolute top-0 bottom-0 right-0 left-0;
       }

package/src/components/checkboxes.css

@@ -19,13 +19,12 @@
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     @apply absolute top-0 left-0 w-10 h-10
-    border-base-content border-2 bg-transparent opacity-100;
+    border-solid border-base-content border-2 bg-white opacity-100;
   }
   &:after {
     content: "";
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    position: absolute;
+    @apply absolute bg-transparent opacity-0 box-border
+    border-accent border-b-5 border-l-5 border-t-0 border-r-0;
     top: 11px;
     left: 9px;
     width: 23px;
@@ -33,18 +32,10 @@
     -webkit-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     transform: rotate(-45deg);
-    border: solid;
-    border-width: 0 0 5px 5px;
-    border-top-color: transparent;
-    opacity: 0;
-    background: transparent;
   }
   &:checked {
     &:after {
-      opacity: 1;
-    }
-    &:before {
-      background-color: white;
+      @apply opacity-100;
     }
   }
   &:focus {
@@ -52,7 +43,7 @@
     outline-offset: 1px;
     box-shadow: 0 0 0 4px var(--color-focus);
     &:before {
-      border-width: 4px;
+      @apply border-4;
     }
   }
 } 

package/src/components/dev-theme.css

@@ -0,0 +1,10 @@
+/* Experimental css file. */
+
+.dark {
+/*
+Here we can experiment with dark theme. 
+Storybook does not need restart when writing here. 
+Final styling should then go to themes/govgr-dark/overrides/index.css
+*/
+  
+}

package/src/components/dropdown.css

@@ -93,7 +93,7 @@
 } 
 .govgr-header, .govgr-admin-header {
   .govgr-dropdown__button.govgr-link {
-    @apply text-lg text-white focus:text-base-content print:text-gray600;
+    @apply text-lg text-header-content focus:text-base-content print:text-gray600;
   }
   .govgr-dropdown {
     @apply print:hidden;

package/src/components/footer.css

@@ -1,8 +1,7 @@
 .govgr-footer {
   @apply border-0 border-solid font-normal text-base py-4 md:py-8 
   border-t-4 border-secondary600 text-gray600 bg-gray50 w-full
-  print:py-2 print:bg-white print:border-t-2
-  dark:border-secondary800 dark:text-gray800;
+  print:py-2 print:bg-white print:border-t-2;
   .govgr-section-break {
     @apply print:hidden;
   }
@@ -32,8 +31,12 @@
     @apply mr-0;
   }
 }
+.govgr-footer__government-logo-inverted {
+  @apply max-w-full h-auto w-52 min-w-52 hidden;
+
+}
 .govgr-footer__logo, .govgr-footer__government-logo {
-  @apply max-w-full h-auto w-52 min-w-52;
+  @apply max-w-full h-auto w-52 min-w-52 block;
 }
 .govgr-footer__licence-description {
   @apply mt-6 print:mt-4;

package/src/components/header.css

@@ -15,9 +15,12 @@
   print:gap-1;
 }
 .govgr-header-title {
-  @apply text-base100 font-bold text-2xl leading-10 tracking-wide no-underline
-  w-auto align-middle hover:text-base100 hover:no-underline 
+  @apply text-header-content font-bold text-2xl leading-10 tracking-wide no-underline
+  w-auto align-middle hover:no-underline 
   print:text-base-content;
+  &:hover {
+    @apply text-header-content
+  }
 }
 .govgr-header-title:focus {
   text-decoration:none;

package/src/components/index.css

@@ -37,4 +37,5 @@
 @import "./skiplink.css";
 @import "./timeline.css";
 @import "./task-list.css";
-@import "./stepnav.css"
+@import "./stepnav.css";
+@import "./dev-theme.css";

package/src/components/nav.css

@@ -1,6 +1,6 @@
 .govgr-header {
   .govgr-burger-icon {
-    fill: var(--color-white) ;
+    fill: var(--color-header-content) ;
   }
 }
 .govgr-burger-icon {
@@ -71,14 +71,14 @@
   }
 }
 .govgr-horizontal-nav__item  {
-  @apply p-1 text-xl
+  @apply p-1 text-xl text-base-content
   sm:py-1 sm:px-1 sm:text-base
   no-underline hover:underline;
 }
 .govgr-horizontal-nav__item:focus {
   @apply bg-focus text-base-content outline-none;
   box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
-  }
+}
 .govgr-horizontal-nav__item-active, .govgr-vertical-nav__item--active {
   @apply font-semibold;
 }

package/src/components/phase-banner.css

@@ -15,7 +15,7 @@
   @apply table-cell text-base-content;
 }
 .govgr-header .govgr-phase-banner__text, .govgr-masthead .govgr-phase-banner__text {
-  @apply text-white print:text-base-content;
+  @apply text-header-content print:text-base-content;
 }
 .govgr-phase-banner_header {
   @apply bg-focus top-0 z-30

package/src/components/radios.css

@@ -1,5 +1,5 @@
 .govgr-radios__item {
-  @apply block relative mb-4 pl-12; 
+  @apply block relative mb-4 pl-12;
   min-height: 40px;
 }
 .govgr-radios--inline {
@@ -13,35 +13,30 @@
   }
 }
 .govgr-radios__label {
-  @apply inline-block py-1 px-2 cursor-pointer text-lg ;
+  @apply inline-block py-1 px-2 cursor-pointer text-lg;
 }
 .govgr-radios__input {
   @apply absolute z-1 left-0.5 -top-1 m-0 rounded-3xl
-  w-10 h-10 opacity-100 cursor-pointer;
+  w-10 h-10 opacity-100 cursor-pointer
+  bg-white m-0;
   appearance: none;
-  background-color: #fff;
-  margin: 0;
   width: 40px;
   height: 40px;
   border: 2px solid currentColor;
   border-radius: 50%;
   &::before {
     content: "";
-    position: absolute;
+    @apply absolute bg-white opacity-0 w-0 h-0;
     top: 6px;
     left: 6px;
-    width: 0;
-    height: 0;
     border: 12px solid currentColor;
     border-radius: 50%;
-    opacity: 0;
-    background: currentColor;
   }
-  &:checked { 
+  &:checked {
     &::before {
-      opacity: 1;
+      @apply opacity-100;
     }
-  } 
+  }
   &:focus {
     outline: 3px solid transparent;
     outline-offset: 1px;
@@ -52,4 +47,4 @@
       left: 4px;
     }
   }
-}
+}

package/src/components/svg-icons.css

@@ -43,11 +43,11 @@
 .govgr-header, .govgr-admin-header {
   .govgr-link {
     .govgr-svg-icon {
-      fill:var(--color-gray50);
+      fill:var(--color-header-content);
     }
     &:hover {
       .govgr-svg-icon {
-        fill:var(--color-gray50);
+        fill:var(--color-header-content);
       }
     }
     &:focus {

package/src/components/table.css

@@ -40,17 +40,25 @@
   }
 }
 .govgr-table__body {
-  @apply relative z-/1;
+  @apply relative;
 }
 
 @supports (-moz-appearance:none) {
-  @media print {
-    .govgr-table {
-      border-collapse: unset;
+  .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--with-vertical-lines {
-      .govgr-table__header {
-        @apply border-t;
+    .govgr-table__cell {
+      @apply border-r-0 !important;
+      &:last-child {
+        @apply border-r border-solid border-gray100 px-4 !important;
       }
     }
   }

package/src/components/typography.css

@@ -116,10 +116,10 @@
 }
 .govgr-header {
   .govgr-header__container > .govgr-link {
-    @apply text-gray50 focus:text-link-active print:text-base-content;
+    @apply text-header-content focus:text-link-active print:text-base-content;
   }
   .govgr-header__content > .govgr-link {
-    @apply text-gray50 focus:text-link-active print:text-base-content;
+    @apply text-header-content focus:text-link-active print:text-base-content;
   }
 }
 .govgr-link--no-underline {

package/tailwind.config.js

@@ -1,23 +1,98 @@
 const plugin = require("tailwindcss/plugin");
 const defaultTheme = require("tailwindcss/defaultTheme");
-const colors = require("./colors");
-const colorVarsPlugin = require("./color-vars.plugin");
+const themesPlugin = require("./themes.plugin");
+
+const allColors = [
+  "transparent",
+  "current",
+  "primary",
+  "primary-focus",
+  "primary200",
+  "secondary50",
+  "secondary200",
+  "secondary",
+  "secondary-focus",
+  "secondary400",
+  "secondary600",
+  "secondary800",
+  "content-dark",
+  "content",
+  "content-secondary",
+  "accent",
+  "accent-focus",
+  "accent-content",
+  "neutral",
+  "neutral-focus",
+  "neutral-content",
+  "header-content",
+  "base100",
+  "base150",
+  "base200",
+  "base300",
+  "base300-content",
+  "base-content",
+  "base-content-secondary",
+  "base-content-invert",
+  "info",
+  "success",
+  "success-hover",
+  "warning",
+  "error",
+  "error-hover",
+  "focus",
+  "link",
+  "link-hover",
+  "link-visited",
+  "link-active",
+  "white",
+  "gray50",
+  "gray100",
+  "gray200",
+  "base-bg",
+  "gray300",
+  "gray400",
+  "gray500",
+  "gray600",
+  "gray700",
+  "gray800",
+  "gray900",
+  "black",
+  "shadow200",
+  "shadow600",
+];
 
 const buildOnly = !process.env["DIGIGOV_CSS_BUILD"]
   ? {
-      mode: "jit",
-    }
+    mode: "jit",
+  }
   : {};
-const colorVariables = Object.keys(colors.light).reduce((allColors, color) => {
-  allColors[color] = `var(--color-${color})`;
-  return allColors;
+
+const colorVariables = allColors.reduce((colorVars, color) => {
+  if(['transparent', 'currentColor'].includes(color)) {
+    colorVars[color] = color;
+  } else {
+    colorVars[color] = ({opacityVariable, opacityValue}) => {
+      if(opacityValue !== undefined) {
+        return `rgba(var(--color-${color}-rgb), ${opacityValue})`;
+      }
+      if(opacityVariable !== undefined) {
+        return `rgba(var(--color-${color}-rgb), var(${opacityVariable}, 1))`;
+      }
+      return `rgb(var(--color-${color}-rgb))`;
+    };
+  }
+  return colorVars;
 }, {});
+
 module.exports = {
   ...buildOnly,
   darkMode: 'class',
+  themes: {
+    light: require.resolve('./defaultTheme'), 
+  },
+  defaultTheme: 'light',
   theme: {
-    colors: colors.light,
-    themes: colors,
+    colors: colorVariables,
     container: {
       center: true,
     },
@@ -32,14 +107,11 @@ module.exports = {
       lg: "1024px",
       xl: "1280px",
       "2xl": "1280px",
-      print: { raw: "print" },
+      print: {raw: "print"},
     },
     fontFamily: {
       sans: ["Roboto", ...defaultTheme.fontFamily.sans],
     },
-    borderColor: colorVariables,
-    backgroundColor: colorVariables,
-    textColor: colorVariables,
     extend: {
       height: {
         fit: "fit-content",
@@ -47,6 +119,9 @@ module.exports = {
       width: {
         fit: "fit-content",
       },
+      maxWidth: {
+        fit: "fit-content",
+      },
       minWidth: {
         10: "2.5rem",
         32: "8rem",
@@ -90,5 +165,5 @@ module.exports = {
       borderColor: ["active"],
     },
   },
-  plugins: [plugin(colorVarsPlugin)],
+  plugins: [plugin(themesPlugin)],
 };

package/themes.plugin.js

@@ -0,0 +1,74 @@
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+const postcssrc = require('postcss-load-config');
+const postcssJs = require('postcss-js');
+
+function hexToRGB(hex) {
+  var r = parseInt(hex.slice(1, 3), 16),
+    g = parseInt(hex.slice(3, 5), 16),
+    b = parseInt(hex.slice(5, 7), 16);
+
+  return r + ", " + g + ", " + b;
+}
+let hasRun = false;
+
+function addThemes({ addBase, addComponents, theme,config }) {
+  if(hasRun){
+    return
+  }
+  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 };
+      },
+      { }
+    );
+  }
+  const base = {
+  }
+
+
+  const themes = config("themes");
+  const defaultTheme = config('defaultTheme');
+  for (const customTheme in themes) {
+
+    const customThemeObject = require(themes[customTheme]);
+    if (customThemeObject.overrides) {
+      if(config('mode') === 'jit'){
+        console.log('Loading theme css from source!')
+        const css = fs.readFileSync(path.resolve(path.dirname(themes[customTheme]),'overrides/index.css')).toString();
+        const ctx = {  };
+        const {plugins, options} = postcssrc.sync(ctx)
+        const result = postcss(plugins)
+            .process(css, options).root;
+        const cssJs = postcssJs.objectify(result);
+        addComponents({[`.${customTheme}`]: cssJs});
+      }else{
+        customThemeObject.overrides.forEach(async(override) => {
+          const cssJs = require(path.resolve(path.dirname(themes[customTheme]),override));
+          addComponents({[`.${customTheme}`]: cssJs});
+        });
+      }
+    }
+    if (customTheme === defaultTheme) {
+      base[`:root,:root.${customTheme},::before,::after`] = extractColorVars(customThemeObject.colors);
+    } else {
+      base[`:root.${customTheme},.${customTheme} *::before,.${customTheme} *::after`] = extractColorVars(customThemeObject.colors);
+    }
+  }
+  addBase(base);
+}
+
+module.exports = addThemes;

package/color-vars.plugin.js

@@ -1,21 +0,0 @@
-
-function addColorVars ({ addBase, theme }) {
-  function extractColorVars(colorObj, colorGroup = '') {
-    return Object.keys(colorObj).reduce((vars, colorKey) => {
-      const value = colorObj[colorKey];
-
-      const newVars =
-        typeof value === 'string'
-          ? { [`--color${colorGroup}-${colorKey}`]: value }
-          : extractColorVars(value, `-${colorKey}`);
-
-      return { ...vars, ...newVars };
-    }, {});
-  }
-  addBase({
-    ':root,:root.light': extractColorVars(theme('themes').light),
-    ':root.dark': extractColorVars(theme('themes').dark),
-  });
-}
-
-module.exports = addColorVars;