@digigov/css 0.29.11 → 0.29.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "0.29.11",
+  "version": "0.29.13",
   "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": {
@@ -48,8 +49,10 @@
     "tailwindcss": "2.2.6",
     "nodemon": "2.0.7",
     "next": "10.0.9",
-    "@digigov/postcss-banner": "0.3.18",
-    "rimraf": "3.0.2"
+    "@digigov/postcss-banner": "0.3.19",
+    "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/index.css

@@ -1,7 +1,6 @@
 @import "tailwindcss/base";
  
 :root {
-  color-scheme: light !important;
   accent-color: var(--color-accent);
 }
 html{

package/src/base/tailwind.config.js

@@ -1,7 +1,8 @@
 const plugin = require('tailwindcss/plugin')
 const tailwindConfig = require('../../tailwind.config.js');
-const colorVarsPlugin = require('../../color-vars.plugin')
+const themesPlugin = require('../../themes.plugin')
 
+tailwindConfig.themes.dark = require.resolve('../../../../themes/govgr-dark');
 module.exports = {
 	...tailwindConfig,
 	plugins: [
@@ -9,6 +10,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/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/layout.css

@@ -43,10 +43,10 @@
   }
 }
 .govgr-section-break {
-  @apply m-auto px-4 py-2 border-0 w-full;
+  @apply m-auto px-4 py-2 border-0 w-full bg-white;
 }
 .govgr-section-break--visible {
-  @apply border-t border-gray100;
+  @apply border-t border-gray100 border-solid	;
 }
 .govgr-section-break--m {
  @apply mb-5;

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/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",
   }
   : {};
-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",
@@ -93,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;

package/colors/color-values.dark.js

@@ -1,68 +0,0 @@
-module.exports = {
-  name: 'dark',
-  colors: {
-    "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": "#56565d",
-    "base150": "#99989a",
-    "base200": "#b3b2b3",
-    "base300": "#ebebeb",
-    "base300-content": "#fff",
-    "base-content": "#fff",
-    "base-content-secondary": "#56565d",
-    "base-content-invert": "#1B2127",
-  
-    "info": "#00b0f0",
-    "success": "#07CA4D", 
-    "success-hover": "#118f1e",
-    "warning": "#f90",
-    "error": "#FF3838",
-    "error-hover": "#B60202",
-    "focus": "#fd0",
-    "link": "#00b0f0",
-    "link-hover": "#0081d6",
-    "link-visited": "#9772FD",
-    "link-active": "#0065b3",
-  
-    "white": "#1B2127",
-    "gray50": "#212930",
-    "gray100": "#31363f",
-    "gray200": "#43454c",
-    "base-bg": "#43454c",
-    "gray300": "#56565d",
-    "gray400": "#6c6a71",
-    "gray500": "#828085",
-    "gray600": "#99989a",
-    "gray700": "#b3b2b3",
-    "gray800": "#ccc",
-    "gray900": "#ebebeb",
-    "black": "#fff",
-  
-    "shadow200" : "#21293033",
-    "shadow600" :"#21293099",
-  }
-
-}
-
-

package/colors/index.js

@@ -1,17 +0,0 @@
-const colorValuesLight = require('./color-values.light');
-const colorValuesDark = require('./color-values.dark');
-const themeObject = {};
-const themes = [ colorValuesLight, colorValuesDark]; 
-
-themes.forEach((theme)=> {
-  const colorObject = {
-    "transparent": "transparent",
-    "current": "currentColor",
-  }
-  for (const [key, value] of Object.entries(theme.colors)) {
-    colorObject[key] = value.startsWith('#')?value:value.startsWith('rgb')?value:`hsl(${value})`
-  }
-  themeObject[theme.name] = colorObject;
-})
-
-module.exports = {...themeObject};