@digigov/css 2.0.0-6e3977bc → 2.0.0-834daea4

package/index.js

@@ -1,66 +1,92 @@
-const path = require("path");
+const path = require('path');
 
-var digigovCssInfo = require(path.join(__dirname,'./package.json'))
-const digigovTailwindConfig = require(path.join(__dirname,'./tailwind.config.js'));
+var digigovCssInfo = require(path.join(__dirname, './package.json'));
+const digigovTailwindConfig = require(
+  path.join(__dirname, './tailwind.config.js')
+);
 
-const base = require(path.join(__dirname,'./dist/base'))
-const utilities = require(path.join(__dirname,'./dist/utilities'))
-const components = require(path.join(__dirname,'./dist/components'))
+const getThemeBaseStyle = require(path.join(__dirname, './theming.js'));
 
-const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
-	let digigovCssIncludedItems = []
-	let logs = false
-	if (config('digigovCss.logs') != false) {
-		logs = true
-	}
-	if (logs) {
-		console.log()
-		console.log('\x1b[35m%s\x1b[0m', '🌼 Digigov CSS components ' + digigovCssInfo.version, '\x1b[0m', digigovCssInfo.homepage)
-		console.group()
-	}
+const base = require(path.join(__dirname, './dist/base'));
+const utilities = require(path.join(__dirname, './dist/utilities'));
+const components = require(path.join(__dirname, './dist/components'));
 
-	// inject @base style 
-	if (config('digigovCss.base') != false) {
-		addBase(base)
-		digigovCssIncludedItems.push('base')
-	}
+/**
+ * Load Digigov CSS styles and add them to the base tailwindcss styles.
+ *
+ * Optionally, you can provide additional options for loading a custom theme.
+ *
+ * @param {object} [options={}]
+ * @param {string} [options.customTheme] - Custom theme package name or file path.
+ * @param {boolean} [options.eject] - Whether to ignore the default Digigov CSS base styles.
+ */
+function mainFunction(options = {}) {
+  return function ({ addBase, addComponents, addUtilities, config }) {
+    let digigovCssIncludedItems = [];
+    let logs = false;
+    if (config('digigovCss.logs') != false) {
+      logs = true;
+    }
+    if (logs) {
+      console.log();
+      console.log(
+        '\x1b[35m%s\x1b[0m',
+        '🌼 Digigov CSS components ' + digigovCssInfo.version,
+        '\x1b[0m',
+        digigovCssInfo.homepage
+      );
+      console.group();
+    }
 
-	// inject components
-	let classNames = [];
-	let mediaQueries = [];
-	// split compiled components in two different sectors
-	// to load them in the correct order, since media queries
-	// should be always after the main CSS rules
-	Object.keys(components).forEach(selector => {
-		// checking if selectors are media queries
-		if (selector.startsWith('@media')) {
-			mediaQueries.push({[selector]: components[selector]});
-		// ... or just regular css rules
-		} else {
-			classNames.push({[selector]: components[selector]});
-		}
-	});
-	if (config('digigovCss.components') != false) {
-		// this order is important for loading CSS rules and media queries
-		// consistently, since the keys in js objects are not ordered and 
-		// sometimes order can be different. By spreading them in sequence 
-		// we fix this bug
-		addComponents([
-			...classNames,
-			...mediaQueries,
-		])
-		digigovCssIncludedItems.push('components')
-	}
+    // inject @base style
+    if (config('digigovCss.base') != false) {
+      const themeBaseStyle = getThemeBaseStyle({
+        eject: options.eject,
+        theme: options.customTheme,
+        debug: logs,
+      });
+      addBase({ ...base, ...themeBaseStyle });
+      digigovCssIncludedItems.push('base');
+    }
 
-	// inject @utilities style needed by components
-	if (config('digigovCss.utils') != false) {
-		addUtilities(utilities)
-		digigovCssIncludedItems.push('utilities')
-	}
-	if (logs) {
-		console.log('\x1b[32m%s\x1b[0m', '✔︎ Including:', '\x1b[0m', '' + digigovCssIncludedItems.join(', '));
-		if (isTailwindInstalled === false) {
-			console.log(`\n\x1b[33;1m! warning\x1b[0m - unable to require \x1b[36mtailwindcss/plugin\x1b[0m
+    // inject components
+    let classNames = [];
+    let mediaQueries = [];
+    // split compiled components in two different sectors
+    // to load them in the correct order, since media queries
+    // should be always after the main CSS rules
+    Object.keys(components).forEach((selector) => {
+      // checking if selectors are media queries
+      if (selector.startsWith('@media')) {
+        mediaQueries.push({ [selector]: components[selector] });
+        // ... or just regular css rules
+      } else {
+        classNames.push({ [selector]: components[selector] });
+      }
+    });
+    if (config('digigovCss.components') != false) {
+      // this order is important for loading CSS rules and media queries
+      // consistently, since the keys in js objects are not ordered and
+      // sometimes order can be different. By spreading them in sequence
+      // we fix this bug
+      addComponents([...classNames, ...mediaQueries]);
+      digigovCssIncludedItems.push('components');
+    }
+
+    // inject @utilities style needed by components
+    if (config('digigovCss.utils') != false) {
+      addUtilities(utilities);
+      digigovCssIncludedItems.push('utilities');
+    }
+    if (logs) {
+      console.log(
+        '\x1b[32m%s\x1b[0m',
+        '🛠️ Including functions:',
+        '\x1b[0m',
+        '' + digigovCssIncludedItems.join(', ')
+      );
+      if (isTailwindInstalled === false) {
+        console.log(`\n\x1b[33;1m! warning\x1b[0m - unable to require \x1b[36mtailwindcss/plugin\x1b[0m
 Digigov CSS color are now only available for Digigov CSS components.
 If you want to use DigigovCSS color as utility classes (like 'bg-primary')
 you need to add this to your \x1b[36mtailwind.config.js\x1b[0m file:
@@ -73,25 +99,29 @@ you need to add this to your \x1b[36mtailwind.config.js\x1b[0m file:
   },\x1b[0m
 \x1b[36m}\x1b[0m
 ───────────────────────────────────────  
-      `)
-		}
-		console.log()
-		console.groupEnd()
-	}
+      `);
+      }
+      console.log();
+      console.groupEnd();
+    }
+  };
 }
 
 // check if tailwindcss package exists
 let isTailwindInstalled = false;
 try {
-	require.resolve('tailwindcss/plugin')
-	isTailwindInstalled = true
+  require.resolve('tailwindcss/plugin');
+  isTailwindInstalled = true;
 } catch (er) {
-	isTailwindInstalled = false
+  isTailwindInstalled = false;
 }
 if (isTailwindInstalled !== false) {
-	module.exports = require("tailwindcss/plugin")(
-		mainFunction, digigovTailwindConfig
-	);
+  module.exports = require('tailwindcss/plugin').withOptions(
+    mainFunction,
+    function (options) {
+      return { ...digigovTailwindConfig, ...options };
+    }
+  );
 } else {
-	module.exports = mainFunction;
+  module.exports = mainFunction;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "2.0.0-6e3977bc",
+  "version": "2.0.0-834daea4",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -27,7 +27,7 @@
     "defaultTheme",
     "src",
     "colors",
-    "themes.plugin.js",
+    "theming.js",
     "postcss.config.js",
     "tailwind.config.js",
     "screens.json"
@@ -39,10 +39,9 @@
     ]
   },
   "devDependencies": {
-    "@digigov/cli": "1.1.2-6e3977bc",
+    "@digigov/cli": "2.0.0-834daea4",
     "autoprefixer": "10.4.16",
     "cssnano": "4.1.10",
-    "postcss": "8.4.4",
     "postcss-cli": "8.3.0",
     "postcss-import": "13.0.0",
     "prejss-cli": "0.3.3",
@@ -50,19 +49,20 @@
     "tailwindcss": "3.3.5",
     "nodemon": "2.0.7",
     "next": "13.1.1",
-    "@digigov/postcss-banner": "1.0.5-6e3977bc",
-    "@digigov/cli-build-tailwind": "1.0.2-6e3977bc",
+    "@digigov/postcss-banner": "1.0.5-834daea4",
+    "@digigov/cli-build-tailwind": "2.0.0-834daea4",
     "rimraf": "3.0.2",
     "publint": "0.1.8",
     "stylelint": "15.11.0",
-    "stylelint-plugin-digigov": "1.1.0-6e3977bc",
-    "prettier": "3.2.5"
+    "stylelint-plugin-digigov": "1.1.0-834daea4",
+    "prettier": "3.2.5",
+    "postcss-sort-media-queries": "5.2.0"
   },
   "dependencies": {
+    "@digigov/theme-default": "1.0.0-834daea4",
     "@fontsource/roboto": "4.4.0",
     "publint": "0.1.8",
-    "@adobe/leonardo-contrast-colors": "1.0.0-alpha.13",
-    "polished": "4.2.2",
+    "postcss": "8.4.4",
     "postcss-js": "4.0.0",
     "postcss-load-config": "3.1.4"
   },

package/postcss.config.js

@@ -1,14 +1,14 @@
-
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    "postcss-import": {},
-    "tailwindcss/nesting": {},
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
+    'postcss-sort-media-queries': {},
     cssnano: {
       preset: [
-        "default",
+        'default',
         {
           mergeRules: false,
         },

package/src/base/index.css

@@ -1,4 +1,5 @@
 @import 'tailwindcss/base';
+
 :root {
   accent-color: var(--color-accent);
 }

package/src/base/postcss.config.js

@@ -1,27 +1,28 @@
-const changeLog = require("../../CHANGELOG.json");
+const changeLog = require('../../CHANGELOG.json');
 const entries = changeLog.entries.sort(
-  (a, b) => new Date(b.date) - new Date(a.date),
+  (a, b) => new Date(b.date) - new Date(a.date)
 );
 const version = entries[0].version;
 const date = entries[0].date;
-const cssDate = new Date(date).toLocaleDateString("si-LK"); //yyyy-MM-dd
+const cssDate = new Date(date).toLocaleDateString('si-LK'); //yyyy-MM-dd
 
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: [
-    require("postcss-import"),
-    require("tailwindcss/nesting"),
-    require("tailwindcss")("./src/base/tailwind.config.js"),
-    require("autoprefixer"),
-    require("cssnano")({
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss')('./src/base/tailwind.config.js'),
+    require('autoprefixer'),
+    require('postcss-sort-media-queries'),
+    require('cssnano')({
       preset: [
-        "default",
+        'default',
         {
           mergeRules: false,
         },
       ],
     }),
-    require("@digigov/postcss-banner")({
+    require('@digigov/postcss-banner')({
       banner: `@digigov/css: ${version}\n\nAuthor: grnet-devs\nDate: ${cssDate}`,
       inline: false,
       important: true,

package/src/base/tailwind.config.js

@@ -1,21 +1,14 @@
-const plugin = require("tailwindcss/plugin");
-const themesPlugin = require("../../themes.plugin");
-const tailwindConfig = require("../../tailwind.config");
+const tailwindConfig = require('../../tailwind.config');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   ...tailwindConfig,
   content: {
     files: [
-      "./*.css",
-      "../../dist/components/*.css",
-      "../../dist/utilities/*.css",
+      './*.css',
+      '../../dist/components/*.css',
+      '../../dist/utilities/*.css',
     ],
     relative: true,
   },
-  themes: {
-    light: require.resolve("../../../../themes/govgr-light"),
-    dark: require.resolve("../../../../themes/govgr-dark"),
-  },
-  plugins: [plugin(themesPlugin)],
 };

package/src/components/accordion.css

@@ -1,4 +1,5 @@
 .ds-accordion {
+  @apply mb-4 md:mb-8;
   &.ds-accordion--no-border {
     .ds-accordion__section {
       @apply border-0 !important;
@@ -122,7 +123,10 @@
 
 .ds-accordion__section-summary {
   .ds-hint {
-    @apply mb-0 mt-1;
+    @apply mb-0;
+  }
+  > *[class^="ds-"]:not(:last-child) {
+    @apply mb-1;
   }
 }
 .ds-accordion__section-heading {

package/src/components/blockquote.common.css

@@ -2,13 +2,13 @@
 
 @layer utilities {
     .util-blockquote {
-      @apply mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
+      @apply mb-4 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
     }
     .util-blockquote-text {
       font-size: var(--blockquote-font-size);
       line-height: var(--blockquote-line-height);
     }
     .util-blockquote--dense {
-        @apply mt-3 md:mb-6 p-3 border-l-6;
+        @apply mb-3 md:mb-6 p-3 border-l-6;
     }
 }

package/src/components/breadcrumbs.css

@@ -1,5 +1,5 @@
 .ds-breadcrumbs {
-  @apply block font-normal text-base-content mt-4 mb-2;
+  @apply block font-normal text-base-content mb-2 md:mb-4;
 }
 .ds-breadcrumbs__list {
   @apply block m-0 p-0 list-none;

package/src/components/button.common.css

@@ -5,7 +5,7 @@
 
 @layer utilities {
   .util-btn {
-    @apply m-0 mb-8 flex items-center;
+    @apply m-0 mb-4 md:mb-8 flex items-center gap-x-3;
     border-radius: var(--btn-border-radius);
     padding-right: var(--btn-padding-x);
     padding-left: var(--btn-padding-x);

package/src/components/button.css

@@ -3,7 +3,7 @@
 .ds-btn[type='submit'],
 .ds-btn[type='button'],
 .ds-btn[type='reset'] {
-  @apply util-btn util-btn-text min-h-10 md:min-h-12 w-max cursor-pointer gap-x-3;
+  @apply util-btn util-btn-text min-h-10 md:min-h-12 w-max cursor-pointer;
   &:focus {
     box-shadow:
       0 0 0 2px var(--color-white),
@@ -40,7 +40,7 @@
   }
 }
 .ds-btn-cta {
-  @apply py-4 print:pr-2 util-btn-cta-text;
+  @apply py-4 print:pr-2 mb-8 util-btn-cta-text;
   &.ds-btn--dense,
   .ds-dense & {
     @apply py-3 px-4;

package/src/components/button.native.css

@@ -4,8 +4,8 @@
 
 .ds-btn {
   @apply util-btn min-h-4 flex-row flex-nowrap justify-center;
-  border-bottom-width: 2px;
-  border-bottom-color: var(--color-base-content);
+  border-bottom-width: var(--btn-border-bottom-width-native);
+  border-bottom-color: var(--btn-border-bottom-color-native);
   padding-top: calc( 1.5 * var(--btn-padding-y)) !important;
   padding-bottom: calc( 1.5 * var(--btn-padding-y)) !important;
 }
@@ -51,6 +51,5 @@
   @apply util-btn-cta-text;
 }
 .ds-btn-cta__icon {
-  @apply ml-2;
   fill: var(--color-white) !important;
 }

package/src/components/card.common.css

@@ -2,7 +2,7 @@
 
 @layer utilities {
     .util-card {
-      @apply mb-7 text-base-content max-w-full bg-base-100;
+      @apply mb-4 md:mb-8 text-base-content max-w-full bg-base-100;
       border-radius: var(--card-border-radius);
     }
     .util-card--border {

package/src/components/code.css

@@ -1,7 +1,7 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
 .ds-code-block__container {
-  @apply p-4 bg-base-200 border border-base-300 w-full overflow-x-auto relative;
-  /* experimental to see if it's disturbing */
-  max-height: 95vh;
+  @apply mb-4 md:mb-8 p-4 bg-base-200 border border-base-300 w-full overflow-x-auto relative;
+  max-height: 95vh; /* experimental to see if it's disturbing */
   & > pre {
     @apply bg-transparent p-0 m-0;
     font: inherit;
@@ -30,6 +30,7 @@
 .ds-code--highlighted-line {
   background-color: rgba(var(--color-orange-100-rgb), 0.3);
 }
+
 /* copied styles from 'highlight.js/styles/github.css' */
 .ds-code--doctag,
 .ds-code--keyword,
@@ -84,7 +85,6 @@
 .ds-code--selector-pseudo {
   /* prettylights-syntax-entity-tag */
   color: var(--color-green-400);
-
 }
 .ds-code--subst {
   /* prettylights-syntax-storage-modifier-import */
@@ -124,5 +124,4 @@
 .ds-code--punctuation,
 .ds-code--tag {
   /* purposely ignored */
-  
-}
+}

package/src/components/details.common.css

@@ -2,7 +2,7 @@
 
 @layer utilities {
     .util-details {
-      @apply md:mb-8 mb-4;
+      @apply mb-4 md:mb-8;
     }
     .util-details-text {
       @apply md:text-lg;

package/src/components/drawer.css

@@ -1,3 +1,20 @@
+.ds-drawer-container {
+  @apply justify-center items-center content-center
+  left-0 top-0 w-full h-full overflow-auto
+  flex fixed z-50 bg-opacity-50 bg-base-700;
+  &.ds-drawer-container--relative-sm {
+    @apply sm:bg-transparent sm:z-0 sm:relative sm:block;
+  }
+  &.ds-drawer-container--relative-md {
+    @apply md:bg-transparent md:z-0 md:relative md:block;
+  }
+  &.ds-drawer-container--relative-lg {
+    @apply lg:bg-transparent lg:z-0 lg:relative lg:block;
+  }
+  &.ds-drawer-container--closed {
+    @apply hidden;
+  }
+}
 .ds-drawer {
   @apply border border-base-300 bg-base-100 p-4
   h-full max-h-screen min-h-screen overflow-y-scroll w-4/5 max-w-md flex flex-col
@@ -36,7 +53,7 @@
   }
 }
 .ds-drawer__heading {
-  @apply p-0 mb-4 flex justify-between align-baseline;
+  @apply p-0 mb-2 md:mb-4 flex justify-between align-baseline;
   .ds--drawer__close-icon {
     @apply m-0;
   }

package/src/components/dropdown.common.css

@@ -9,7 +9,7 @@
     }
     .util-dropdown__content {
       @apply border-base-400 bg-base-100
-      max-w-xs min-w-full absolute transition z-3 mr-4 -mt-4;
+      max-w-xs min-w-full absolute transition z-3 mr-4 mt-0 md:-mt-4;
       box-shadow:
         0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
         0 -2px 0 var(--color-base-500);

package/src/components/fillable.css

@@ -1,5 +1,5 @@
 .ds-fillable-text {
-  @apply lg:mb-8 mb-4 md:mb-8 p-4 border-l-6 border-base-300 bg-base-200
+  @apply mb-4 md:mb-8 p-4 border-l-6 border-base-300 bg-base-200
 text-base-content md:text-lg leading-relaxed text-base;
 }
 .ds-labeled-text {

package/src/components/filter.css

@@ -1,3 +1,32 @@
+.ds-filter-container {
+  @apply justify-center items-center content-center
+  left-0 top-0 overflow-auto w-full h-full
+  flex;
+  &.ds-filter-container--position-relative-sm {
+    @apply z-50 bg-opacity-50 bg-base-700 
+    sm:bg-transparent sm:h-fit sm:z-2 sm:overflow-visible fixed sm:relative;
+    @apply sm:block !important;
+    &.ds-filter-container--closed {
+      @apply hidden;
+    }
+  }
+  &.ds-filter-container--position-relative-md {
+    @apply z-50 bg-opacity-50 bg-base-700 
+    md:bg-transparent md:h-fit md:z-2 md:overflow-visible fixed md:relative;
+    @apply md:block !important;
+    &.ds-filter-container--closed {
+      @apply hidden;
+    }
+  }
+  &.ds-filter-container--position-relative-lg {
+    @apply z-50 bg-opacity-50 bg-base-700 
+    lg:bg-transparent lg:h-fit lg:z-2 lg:overflow-visible fixed lg:relative;
+    @apply lg:block !important;
+    &.ds-filter-container--closed {
+      @apply hidden;
+    }
+  }
+}
 .ds-filter {
   @apply bg-base-100 fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
   box-shadow: 0 0 30px rgba(var(--color-base-900-rgb), 0.9);
@@ -51,23 +80,23 @@
   @apply p-0;
 }
 .ds-filter__heading {
-  @apply mb-4;
+  @apply mb-2 md:mb-4;
 }
 .ds-filter__selected {
   @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 gap-y-4;
+  @apply flex flex-wrap sm:flex-nowrap mb-4 md:mb-8 justify-between gap-x-2 gap-y-4;
 }
 .ds-input__search-btn {
-  @apply shadow-none !important;
+  @apply shadow-none mb-0 !important;
   @apply px-4 py-2 w-min m-0 ml-3 flex gap-2;
 }
 .ds-search {
-  @apply flex w-full max-w-3xl;
+  @apply flex w-full max-w-3xl mb-4 md:mb-8;
 }
 .ds-results__action-bar {
-  @apply py-2 mb-8 flex flex-wrap justify-start gap-4 items-baseline;
+  @apply py-2 mb-4 md:mb-8 flex flex-wrap justify-start gap-4 items-baseline;
   > * {
     @apply mb-0;
   }
@@ -76,7 +105,7 @@
   @apply flex flex-wrap justify-between items-baseline gap-x-2;
 }
 .ds-results__actions {
-  @apply flex flex-wrap gap-4 justify-start min-w-min mb-4;
+  @apply flex flex-wrap gap-4 justify-start min-w-min mb-2 md:mb-4;
 }
 .ds-link-filters {
   @apply block md:hidden;

package/src/components/form.css

@@ -170,7 +170,7 @@
 
 /* error handling  */
 .ds-error-message {
-  @apply md:text-lg text-base block mb-4 text-error-text font-semibold;
+  @apply md:text-lg text-base block mb-4 md:mb-8 text-error-text font-semibold;
 }
 /* stylelint-disable-next-line digigov/nest-related-rules */
 .ds-input--error {

package/src/components/kitchensink.css

@@ -40,10 +40,10 @@
   .ds-dropdown {
     margin-bottom: 20rem;
   }
-  .ds-modal__body {
+  .ds-modal {
     margin: 1rem;
   }
-  .ds-modal {
+  .ds-modal-container {
     position: inherit;
   }
 }

package/src/components/layout.css

@@ -43,7 +43,7 @@
   @apply util-bottom w-full box-border;
 }
 .ds-btn-group {
-  @apply util-btn-group gap-y-4 mb-6;
+  @apply util-btn-group gap-y-4 mb-4 md:mb-8;
 }
 @media print {
   /* When ds-btn-group is empty at print, content at :after limits its height.  */
@@ -88,6 +88,6 @@
 .ds-btn-group {
   .ds-btn,
   .ds-link {
-    @apply mb-0;
+    @apply mb-0 !important;
   }
 }

package/src/components/loader.common.css

@@ -0,0 +1,7 @@
+@tailwind utilities;
+
+@layer utilities {
+  .util-loader {
+    @apply m-auto overflow-hidden;
+  }
+}

package/src/components/loader.css

@@ -1,5 +1,7 @@
+@import './loader.common.css';
+
 .ds-loader {
-  @apply h-fit w-fit m-auto overflow-hidden print:hidden;
+  @apply util-loader h-fit w-fit print:hidden;
 }
 .ds-circular-progress {
   @apply w-fit h-10;