@digigov/css 2.0.0-113e6661 → 2.0.0-298cfc51

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/summary-list.common.css

@@ -9,7 +9,10 @@
     font-size: var(--summary-list-font-size);
   }
   .util-summary-list__row {
-    @apply sm:flex pb-4 mb-4 border-b border-solid border-base-300 sm:pb-0 sm:mb-0 sm:border-0 print:flex print:flex-row print:flex-nowrap;
+    @apply border-b border-base-300 print:flex print:flex-row print:flex-nowrap;
+  }
+  .util-summary-list__row--no-border {
+    @apply border-0;
   }
   .util-summary-list__key {
     @apply mb-1 sm:w-3/12;

package/src/components/summary-list.css

@@ -26,7 +26,7 @@
 }
 
 .ds-summary-list__row {
-  @apply block util-summary-list__row;
+  @apply util-summary-list__row sm:flex block pb-4 mb-4 sm:pb-0 sm:mb-0 sm:border-0 ;
   &.ds-summary-list__row--no-border {
     .ds-summary-list__key,
     .ds-summary-list__value,
@@ -127,7 +127,8 @@
 }
 .ds-summary-list__key,
 .ds-summary-list__value {
-  @apply break-words;
+  /* @apply break-all break-words; */
+  overflow-wrap: anywhere;
 }
 .ds-summary-list__key,
 .ds-summary-list__value,

package/src/components/summary-list.native.css

@@ -8,7 +8,11 @@
   @apply util-summary-list-text;
 }
 .ds-summary-list__row {
-  @apply util-summary-list__row gap-y-2;
+  @apply border-b border-base-300 pb-2 flex mb-2;
+  row-gap: 0.5rem;
+}
+.ds-summary-list__row--no-border {
+  @apply util-summary-list__row--no-border;
 }
 .ds-summary-list__key {
   @apply util-summary-list__key;

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

@@ -130,6 +130,9 @@
     &:last-child {
       @apply mb-0;
     }
+    > button.ds-link:only-child {
+      display: inline-flex;
+    }
   }
 }
 .ds-list__item > .ds-list--bullet:nth-child(1) {
@@ -175,7 +178,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;
@@ -279,6 +282,7 @@
   }
 }
 button.ds-link {
+  @apply text-left;
   .ds-svg-icon {
     @apply ml-1;
   }

package/src/components/typography.native.css

@@ -12,33 +12,51 @@
 .ds-heading-xl__text {
   @apply util-heading-xl-text;
   margin-bottom: var(--heading-xl-margin-bottom);
+  line-height: calc(
+    var(--heading-xl-line-height) * var(--heading-xl-font-size)
+  );
 }
 .ds-heading-lg__text {
   @apply util-heading-lg-text;
   margin-bottom: var(--heading-lg-margin-bottom);
+  line-height: calc(
+    var(--heading-lg-line-height) * var(--heading-lg-font-size)
+  );
 }
 .ds-heading-md__text {
   @apply util-heading-md-text;
   margin-bottom: var(--heading-md-margin-bottom);
+  line-height: calc(
+    var(--heading-md-line-height) * var(--heading-md-font-size)
+  );
 }
 .ds-heading-sm__text {
   @apply util-heading-sm-text;
   margin-bottom: var(--heading-sm-margin-bottom);
+  line-height: calc(
+    var(--heading-sm-line-height) * var(--heading-sm-font-size)
+  );
 }
 .ds-heading-xs__text {
   @apply util-heading-xs-text;
   margin-bottom: var(--heading-xs-margin-bottom);
+  line-height: calc(
+    var(--heading-xs-line-height) * var(--heading-xs-font-size)
+  );
 }
 
 /* Paragraph */
 .ds-body__text {
   @apply util-body-text;
+  line-height: calc(var(--body-line-height) * var(--body-font-size));
 }
 .ds-body--lg__text {
   @apply util-body-lg-text;
+  line-height: calc(var(--body--lg-line-height) * var(--body--lg-font-size));
 }
 .ds-body--sm__text {
   @apply util-body-sm-text;
+  line-height: calc(var(--body__sm-line-height) * var(--body__sm-font-size));
 }
 
 /* Hint */
@@ -47,12 +65,15 @@
 }
 .ds-hint__text {
   @apply util-hint-text;
+  line-height: calc(var(--hint-line-height) * var(--hint-font-size));
 }
 .ds-hint--lg__text {
   @apply util-hint-lg-text;
+  line-height: calc(var(--hint--lg-line-height) * var(--hint--lg-font-size));
 }
 .ds-hint--sm__text {
   @apply util-hint-sm-text;
+  line-height: calc(var(--hint--sm-line-height) * var(--hint--sm-font-size));
 }
 
 /* Link */
@@ -61,6 +82,7 @@
 }
 .ds-link__text {
   @apply util-link-text;
+  line-height: calc(var(--link-line-height) * var(--link-font-size));
 }
 
 /* HeadingCaption */
@@ -69,18 +91,27 @@
 }
 .ds-caption-xl__text {
   @apply util-caption-xl-text;
+  line-height: calc(
+    var(--caption-xl-line-height) * var(--caption-xl-font-size)
+  );
 }
 .ds-caption-lg {
   @apply util-caption-lg;
 }
 .ds-caption-lg__text {
   @apply util-caption-lg-text;
+  line-height: calc(
+    var(--caption-lg-line-height) * var(--caption-lg-font-size)
+  );
 }
 .ds-caption-md {
   @apply util-caption-md;
 }
 .ds-caption-md__text {
   @apply util-caption-md-text;
+  line-height: calc(
+    var(--caption-md-line-height) * var(--caption-md-font-size)
+  );
 }
 
 .ds-list {

package/src/index.native.css

@@ -17,4 +17,8 @@
 @import './components/warning-text.native';
 @import './components/form.native';
 @import './components/checkboxes.native';
-@import './components/radios.native';
+@import './components/radios.native';
+@import './components/modal.native';
+@import './components/loader.native';
+@import './components/stack.native';
+@import './components/chip.native';

package/src/utilities/gap.css

@@ -0,0 +1,141 @@
+.ds-gap-1 {
+  @apply gap-1;
+}
+.ds-gap-2 {
+  @apply gap-2;
+}
+.ds-gap-4 {
+  @apply gap-4;
+}
+.ds-gap-6 {
+  @apply gap-6;
+}
+.ds-gap-8 {
+  @apply gap-8;
+}
+.ds-gap-10 {
+  @apply gap-10;
+}
+.ds-gap-12 {
+  @apply gap-12;
+}
+.ds-gap-xs-1 {
+  @apply gap-1;
+}
+.ds-gap-xs-2 {
+  @apply gap-2;
+}
+.ds-gap-xs-4 {
+  @apply gap-4;
+}
+.ds-gap-xs-5 {
+  @apply gap-5;
+}
+.ds-gap-xs-6 {
+  @apply gap-6;
+}
+.ds-gap-xs-8 {
+  @apply gap-8;
+}
+.ds-gap-xs-10 {
+  @apply gap-10;
+}
+.ds-gap-xs-12 {
+  @apply gap-12;
+}
+.ds-gap-sm-1 {
+  @apply sm:gap-1;
+}
+.ds-gap-sm-2 {
+  @apply sm:gap-2;
+}
+.ds-gap-sm-4 {
+  @apply sm:gap-4;
+}
+.ds-gap-sm-5 {
+  @apply sm:gap-5;
+}
+.ds-gap-sm-6 {
+  @apply sm:gap-6;
+}
+.ds-gap-sm-8 {
+  @apply sm:gap-8;
+}
+.ds-gap-sm-10 {
+  @apply sm:gap-10;
+}
+.ds-gap-sm-12 {
+  @apply sm:gap-12;
+}
+.ds-gap-md-1 {
+  @apply md:gap-1;
+}
+.ds-gap-md-2 {
+  @apply md:gap-2;
+}
+.ds-gap-md-4 {
+  @apply md:gap-4;
+}
+.ds-gap-md-5 {
+  @apply md:gap-5;
+}
+.ds-gap-md-6 {
+  @apply md:gap-6;
+}
+.ds-gap-md-8 {
+  @apply md:gap-8;
+}
+.ds-gap-md-10 {
+  @apply md:gap-10;
+}
+.ds-gap-md-12 {
+  @apply md:gap-12;
+}
+.ds-gap-lg-1 {
+  @apply lg:gap-1;
+}
+.ds-gap-lg-2 {
+  @apply lg:gap-2;
+}
+.ds-gap-lg-4 {
+  @apply lg:gap-4;
+}
+.ds-gap-lg-5 {
+  @apply lg:gap-5;
+}
+.ds-gap-lg-6 {
+  @apply lg:gap-6;
+}
+.ds-gap-lg-8 {
+  @apply lg:gap-8;
+}
+.ds-gap-lg-10 {
+  @apply lg:gap-10;
+}
+.ds-gap-lg-12 {
+  @apply lg:gap-12;
+}
+.ds-gap-xl-1 {
+  @apply xl:gap-1;
+}
+.ds-gap-xl-2 {
+  @apply xl:gap-2;
+}
+.ds-gap-xl-4 {
+  @apply xl:gap-4;
+}
+.ds-gap-xl-5 {
+  @apply xl:gap-5;
+}
+.ds-gap-xl-6 {
+  @apply xl:gap-6;
+}
+.ds-gap-xl-8 {
+  @apply xl:gap-8;
+}
+.ds-gap-xl-10 {
+  @apply xl:gap-10;
+}
+.ds-gap-xl-12 {
+  @apply xl:gap-12;
+}

package/src/utilities/index.css

@@ -1,3 +1,6 @@
 @import "./layout.css";
-@import "./spacing.css";
+@import "./gap.css";
+@import "./margin.css";
+@import "./padding.css";
+@import "./margin.css";
 @import "./print.css";

package/src/utilities/index.native.css

@@ -1,2 +1,6 @@
 @import "./layout.native.css";
-@import "./spacing.css";
+@import "./gap.css";
+@import "./margin.css";
+@import "./padding.css";
+@import "./margin.css";
+@import "./print.css";