@digigov/css 2.0.0-60d81ed8 → 2.0.0-6452adf3

package/src/components/modal.native.css

@@ -1,13 +1,13 @@
 @import './modal.common.css';
 
-.ds-modal {
+.ds-modal-container {
   @apply absolute justify-center items-center top-0 left-0 right-0 bottom-0;
   background-color: rgba(var(--color-black-rgb), 0.5);
 }
-.ds-modal__body {
+.ds-modal {
   @apply util-modal__body;
 }
-.ds-modal__container {
+.ds-modal__body {
   @apply util-modal__container;
 }
 .ds-modal__content__text {

package/src/components/pagination.css

@@ -1,5 +1,6 @@
 .ds-pagination {
-  @apply flex flex-wrap items-center justify-items-center justify-between mb-4 md:mb-8;
+  @apply flex flex-wrap items-center justify-items-center justify-between 
+  gap-y-2 md:gap-y-4 gap-x-6 mb-4 md:mb-8;
   &.ds-pagination--sm {
     .ds-pagination__label,
     .ds-pagination__item--current {
@@ -17,7 +18,7 @@
   @apply text-base-content md:leading-normal;
 }
 .ds-pagination__list {
-  @apply flex items-center;
+  @apply flex items-center flex-wrap;
 }
 .ds-pagination__item {
   @apply inline-block p-2 m-0;
@@ -32,6 +33,14 @@
     @apply font-bold;
   }
 }
+@media (max-width: 639.9px) {
+  .ds-pagination__item {
+    @apply py-0;
+    &.ds-pagination__item--current {
+      @apply flex items-center justify-center min-h-12 min-w-12;
+    }
+  }
+}
 
 /* overrides */
 
@@ -69,6 +78,13 @@
     }
   }
   .ds-link {
-    @apply flex items-center no-underline;
+    @apply flex items-center justify-center no-underline;
+  }
+}
+@media (max-width: 639.9px) {
+  .ds-pagination__item {
+    .ds-link {
+      @apply min-h-12 min-w-12;
+    }
   }
 }

package/src/components/postcss.config.js

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

package/src/components/stack.common.css

@@ -0,0 +1,67 @@
+@tailwind utilities;
+
+@layer utilities {
+  .util-stack {
+    @apply flex flex-col flex-wrap;
+  }
+  .util-stack--row {
+    @apply flex-row;
+  }
+  .util-stack--reverse-row {
+    @apply flex-row-reverse;
+  }
+  .util-stack--col-reverse {
+    @apply flex-col-reverse;
+  }
+  .util-stack--nowrap {
+    @apply flex-nowrap;
+  }
+  .util-stack--justify-flex-start {
+    @apply justify-start;
+  }
+  .util-stack--justify-flex-end {
+    @apply justify-end;
+  }
+  .util-stack--justify-center {
+    @apply justify-center;
+  }
+  .util-stack--justify-space-between {
+    @apply justify-between;
+  }
+  .util-stack--justify-space-around {
+    @apply justify-around;
+  }
+  .util-stack--justify-space-evenly {
+    @apply justify-evenly;
+  }
+  .util-stack--align-stretch {
+    @apply items-stretch;
+  }
+  .util-stack--align-flex-start {
+    @apply items-start;
+  }
+  .util-stack--align-flex-end {
+    @apply items-end;
+  }
+  .util-stack--align-center {
+    @apply items-center;
+  }
+  .util-stack--align-baseline {
+    @apply items-baseline;
+  }
+  .util-stack--content-flex-start {
+    @apply content-start;
+  }
+  .util-stack--content-flex-end {
+    @apply content-end;
+  }
+  .util-stack--content-center {
+    @apply content-center;
+  }
+  .util-stack--content-space-between {
+    @apply content-between;
+  }
+  .util-stack--content-space-around {
+    @apply content-around;
+  }
+}

package/src/components/stack.css

@@ -1,64 +1,66 @@
+@import './stack.common.css';
+
 .ds-stack {
-  @apply flex flex-col flex-wrap;
+  @apply util-stack;
   &.ds-stack--row {
-    @apply flex-row;
+    @apply util-stack--row;
   }
   &.ds-stack--reverse-row {
-    @apply flex-row-reverse;
+    @apply util-stack--reverse-row;
   }
   &.ds-stack--col-reverse {
-    @apply flex-col-reverse;
+    @apply util-stack--col-reverse;
   }
   &.ds-stack--nowrap {
-    @apply flex-nowrap;
+    @apply util-stack--nowrap;
   }
   &.ds-stack--justify-flex-start {
-    @apply justify-start;
+    @apply util-stack--justify-flex-start;
   }
   &.ds-stack--justify-flex-end {
-    @apply justify-end;
+    @apply util-stack--justify-flex-end;
   }
   &.ds-stack--justify-center {
-    @apply justify-center;
+    @apply util-stack--justify-center;
   }
   &.ds-stack--justify-space-between {
-    @apply justify-between;
+    @apply util-stack--justify-space-between;
   }
   &.ds-stack--justify-space-around {
-    @apply justify-around;
+    @apply util-stack--justify-space-around;
   }
   &.ds-stack--justify-space-evenly {
-    @apply justify-evenly;
+    @apply util-stack--justify-space-evenly;
   }
   &.ds-stack--align-stretch {
-    @apply items-stretch;
+    @apply util-stack--align-stretch;
   }
   &.ds-stack--align-flex-start {
-    @apply items-start;
+    @apply util-stack--align-flex-start;
   }
   &.ds-stack--align-flex-end {
-    @apply items-end;
+    @apply util-stack--align-flex-end;
   }
   &.ds-stack--align-center {
-    @apply items-center;
+    @apply util-stack--align-center;
   }
   &.ds-stack--align-baseline {
-    @apply items-baseline;
+    @apply util-stack--align-baseline;
   }
   &.ds-stack--content-flex-start {
-    @apply content-start;
+    @apply util-stack--content-flex-start;
   }
   &.ds-stack--content-flex-end {
-    @apply content-end;
+    @apply util-stack--content-flex-end;
   }
   &.ds-stack--content-center {
-    @apply content-center;
+    @apply util-stack--content-center;
   }
   &.ds-stack--content-space-between {
-    @apply content-between;
+    @apply util-stack--content-space-between;
   }
   &.ds-stack--content-space-around {
-    @apply content-around;
+    @apply util-stack--content-space-around;
   }
   &.ds-stack--content-space-evenly {
     @apply content-evenly;

package/src/components/stack.native.css

@@ -0,0 +1,68 @@
+@import './stack.common.css';
+
+.ds-stack {
+  @apply util-stack;
+}
+.ds-stack--row {
+  @apply util-stack--row;
+}
+.ds-stack--reverse-row {
+  @apply util-stack--reverse-row;
+}
+.ds-stack--col-reverse {
+  @apply util-stack--col-reverse;
+}
+.ds-stack--nowrap {
+  @apply util-stack--nowrap;
+}
+.ds-stack--justify-flex-start {
+  @apply util-stack--justify-flex-start;
+}
+.ds-stack--justify-flex-end {
+  @apply util-stack--justify-flex-end;
+}
+.ds-stack--justify-center {
+  @apply util-stack--justify-center;
+}
+.ds-stack--justify-space-between {
+  @apply util-stack--justify-space-between;
+}
+.ds-stack--justify-space-around {
+  @apply util-stack--justify-space-around;
+}
+.ds-stack--justify-space-evenly {
+  @apply util-stack--justify-space-evenly;
+}
+.ds-stack--align-stretch {
+  @apply util-stack--align-stretch;
+}
+.ds-stack--align-flex-start {
+  @apply util-stack--align-flex-start;
+}
+.ds-stack--align-flex-end {
+  @apply util-stack--align-flex-end;
+}
+.ds-stack--align-center {
+  @apply util-stack--align-center;
+}
+.ds-stack--align-baseline {
+  @apply util-stack--align-baseline;
+}
+.ds-stack--content-flex-start {
+  @apply util-stack--content-flex-start;
+}
+.ds-stack--content-flex-end {
+  @apply util-stack--content-flex-end;
+}
+.ds-stack--content-center {
+  @apply util-stack--content-center;
+}
+.ds-stack--content-space-between {
+  @apply util-stack--content-space-between;
+}
+.ds-stack--content-space-around {
+  @apply util-stack--content-space-around;
+}
+.ds-stack--content-space-evenly {
+  justify-content: 'space-evenly';
+}

package/src/components/typography.common.css

@@ -51,7 +51,7 @@
   }
   .util-link {
     @apply focus:bg-focus;
-    padding: var(--link-padding);
+    padding: var(--link-padding-y) var(--link-padding-x);
   }
   .util-link-text {
     /* @apply focus:text-link-active underline; */
@@ -59,9 +59,6 @@
     color: var(--link-color);
     font-size: var(--link-font-size);
     line-height: var(--link-line-height);
-    /* &:focus {
-      text-decoration: none !important;
-    } */
   }
 
   .util-caption-xl {

package/src/components/typography.css

@@ -129,6 +129,9 @@
     &:last-child {
       @apply mb-0;
     }
+    > button.ds-link:only-child {
+      display: inline-flex;
+    }
   }
 }
 .ds-list__item > .ds-list--bullet:nth-child(1) {
@@ -174,7 +177,7 @@
 }
 
 .ds-link {
-  @apply focus:text-link-active util-link util-link-text cursor-pointer;
+  @apply focus:text-link-active util-link util-link-text cursor-pointer text-left;
   letter-spacing: var(--link-letter-spacing);
   &:hover {
     text-decoration-thickness: 2px;
@@ -278,6 +281,7 @@
   }
 }
 button.ds-link {
+  @apply text-left;
   .ds-svg-icon {
     @apply ml-1;
   }

package/src/index.native.css

@@ -19,3 +19,5 @@
 @import './components/checkboxes.native';
 @import './components/radios.native';
 @import './components/modal.native';
+@import './components/loader.native';
+@import './components/stack.native';

package/src/utilities/postcss.config.js

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

package/tailwind.config.js

@@ -1,72 +1,70 @@
-const plugin = require("tailwindcss/plugin");
-const defaultTheme = require("tailwindcss/defaultTheme");
-const themesPlugin = require("./themes.plugin");
+const defaultTheme = require('tailwindcss/defaultTheme');
 
 const allColors = [
-  "transparent",
-  "current",
-  "primary",
-  "primary-100",
-  "primary-200",
-  "primary-300",
-  "secondary",
-  "secondary-100",
-  "secondary-200",
-  "secondary-300",
-  "tertiary",
-  "tertiary-100",
-  "tertiary-200",
-  "tertiary-300",
-  "accent",
-  "accent-focus",
-  "accent-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",
-  "error",
-  "error-hover",
-  "error-text",
-  "focus",
-  "link",
-  "link-hover",
-  "link-visited",
-  "link-active",
-  "white",
-  "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",
+  'transparent',
+  'current',
+  'primary',
+  'primary-100',
+  'primary-200',
+  'primary-300',
+  'secondary',
+  'secondary-100',
+  'secondary-200',
+  'secondary-300',
+  'tertiary',
+  'tertiary-100',
+  'tertiary-200',
+  'tertiary-300',
+  'accent',
+  'accent-focus',
+  'accent-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',
+  'error',
+  'error-hover',
+  'error-text',
+  'focus',
+  'link',
+  'link-hover',
+  'link-visited',
+  'link-active',
+  'white',
+  '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',
 ];
 
 const colorVariables = allColors.reduce((colorVars, color) => {
-  if (["transparent", "currentColor"].includes(color)) {
+  if (['transparent', 'currentColor'].includes(color)) {
     colorVars[color] = color;
   } else {
     colorVars[color] = ({ opacityVariable, opacityValue }) => {
@@ -81,94 +79,92 @@ const colorVariables = allColors.reduce((colorVars, color) => {
   }
   return colorVars;
 }, {});
+
 const screens = require('./screens.json');
 const screensWithPixels = Object.keys(screens).reduce((screenVars, screen) => {
   screenVars[screen] = `${screens[screen]}px`;
   return screenVars;
-},{})
+}, {});
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: "class",
+  darkMode: 'class',
   content: {
-    files: ["./src/*.css"],
+    files: ['./src/*.css'],
     relative: true,
   },
-  themes: {
-    light: require.resolve("./defaultTheme"),
-  },
-  defaultTheme: "light",
   theme: {
     colors: colorVariables,
+    screens: {
+      ...screensWithPixels,
+      print: { raw: 'print' },
+      xsOnly: { min: '0px', max: '639.98px' },
+      smOnly: { min: '640px', max: '767.98px' },
+      mdOnly: { min: '768px', max: '1023.98px' },
+      lgOnly: { min: '1024px', max: '1279.98px' },
+      xlOnly: { min: '1280px', max: '1535.98px' },
+    },
     container: {
       center: true,
     },
     fontSize: {
       ...defaultTheme.fontSize,
-      lg: "1.1875rem",
-    },
-    screens: {
-        ...screensWithPixels,
-      print: { raw: "print" },
-      xsOnly: { min: "0px", max: "639.98px" },
-      smOnly: { min: "640px", max: "767.98px" },
-      mdOnly: { min: "768px", max: "1023.98px" },
-      lgOnly: { min: "1024px", max: "1279.98px" },
-      xlOnly: { min: "1280px", max: "1535.98px" },
+      lg: '1.1875rem',
     },
     fontFamily: {
-      sans: ["Roboto", ...defaultTheme.fontFamily.sans],
+      sans: ['Roboto', ...defaultTheme.fontFamily.sans],
     },
     extend: {
       height: {
-        fit: "fit-content",
+        fit: 'fit-content',
       },
       width: {
-        fit: "fit-content",
-        "2xl": "42rem",
-        "4xl": "56rem",
+        fit: 'fit-content',
+        '2xl': '42rem',
+        '4xl': '56rem',
       },
       maxWidth: {
-        fit: "fit-content",
+        fit: 'fit-content',
       },
       minWidth: {
-        4: "1rem",
-        10: "2.5rem",
-        32: "8rem",
-        52: "13rem",
+        4: '1rem',
+        10: '2.5rem',
+        12: '3rem',
+        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,
         2: 2,
         3: 3,
         5: 5,
       },
       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)',
       },
     },
   },
-  plugins: [plugin(themesPlugin)],
 };