@digigov/css 2.0.0-b4cd6916 → 2.0.0-d0adc9fb

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 {
@@ -115,6 +112,8 @@
 
   /* List */
   .util-list {
+    @apply mt-4;
+
     @apply md:mb-8 mb-4 text-base-content;
   }
   .util-list-bullet {

package/src/components/typography.css

@@ -106,7 +106,7 @@
   @apply util-font-weight-bold-text;
 }
 .ds-list {
-  @apply list-none list-outside mb-4 md:mb-8 text-base-content;
+  @apply list-none list-outside md:mb-8 mb-4 text-base-content;
   font-size: var(--list-font-size);
   line-height: var(--list-line-height);
   &.ds-list--bullet {
@@ -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) {
@@ -143,7 +146,7 @@
   @apply pl-10;
 }
 .ds-list__item > .ds-list {
-  @apply mb-0;
+  @apply mb-0 mt-2;
 }
 .ds-list--spaced:not(.ds-list--horizontal) > .ds-list__item {
   @apply mb-4;
@@ -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/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/components/warning-text.common.css

@@ -4,7 +4,7 @@
 
 @layer utilities {
   .util-warning-text {
-    @apply flex pb-0 mb-4 md:mb-8;
+    @apply flex pb-0;
   }
   .util-warning-text-text {
     font-size: var(--warning-text-font-size);

package/src/components/warning-text.css

@@ -1,11 +1,8 @@
-@import './warning-text.common.css';
-
 .ds-warning-text {
-  @apply util-warning-text py-4 px-0;
+  @apply flex py-4 px-0;
   font-size: var(--warning-text-font-size);
   &.ds-warning-text--dense,
   .ds-dense & {
-    @apply mb-3 md:mb-6;
     .ds-warning-text__icon {
       @apply mr-4 md:mr-5;
     }

package/src/index.native.css

@@ -19,3 +19,6 @@
 @import './components/checkboxes.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

@@ -138,4 +138,4 @@
 }
 .ds-gap-xl-12 {
   @apply xl:gap-12;
-}
+}

package/src/utilities/index.css

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

package/src/utilities/index.native.css

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

package/src/utilities/layout.css

@@ -228,4 +228,4 @@
   .lg\:ds-grid__col-span-12 {
     @apply col-span-12;
   }
-}
+}

package/src/utilities/layout.native.css

@@ -275,4 +275,4 @@
     flex-basis: 100%;
     max-width: 100%;
   }
-}
+}

package/src/utilities/margin.css

@@ -758,7 +758,7 @@
   @apply m-5;
 }
 .ds-m-xs-6 {
-  @apply m-6 ;
+  @apply m-6;
 }
 .ds-m-xs-7 {
   @apply m-7;
@@ -3278,106 +3278,106 @@
   @apply xl:ml-96 !important;
 }
 .ds-mx-xs-0 {
-  @apply mx-0 ;
+  @apply mx-0;
 }
 .ds-mx-xs-0\.5 {
-  @apply mx-0.5 ;
+  @apply mx-0.5;
 }
 .ds-mx-xs-1 {
-  @apply mx-1 ;
+  @apply mx-1;
 }
 .ds-mx-xs-1\.5 {
-  @apply mx-1.5 ;
+  @apply mx-1.5;
 }
 .ds-mx-xs-2 {
-  @apply mx-2 ;
+  @apply mx-2;
 }
 .ds-mx-xs-2\.5 {
-  @apply mx-2.5 ;
+  @apply mx-2.5;
 }
 .ds-mx-xs-3 {
-  @apply mx-3 ;
+  @apply mx-3;
 }
 .ds-mx-xs-3\.5 {
-  @apply mx-3.5 ;
+  @apply mx-3.5;
 }
 .ds-mx-xs-4 {
-  @apply mx-4 ;
+  @apply mx-4;
 }
 .ds-mx-xs-5 {
-  @apply mx-5 ;
+  @apply mx-5;
 }
 .ds-mx-xs-6 {
-  @apply mx-6 ;
+  @apply mx-6;
 }
 .ds-mx-xs-7 {
-  @apply mx-7 ;
+  @apply mx-7;
 }
 .ds-mx-xs-8 {
-  @apply mx-8 ;
+  @apply mx-8;
 }
 .ds-mx-xs-9 {
-  @apply mx-9 ;
+  @apply mx-9;
 }
 .ds-mx-xs-10 {
-  @apply mx-10 ;
+  @apply mx-10;
 }
 .ds-mx-xs-11 {
-  @apply mx-11 ;
+  @apply mx-11;
 }
 .ds-mx-xs-12 {
-  @apply mx-12 ;
+  @apply mx-12;
 }
 .ds-mx-xs-14 {
-  @apply mx-14 ;
+  @apply mx-14;
 }
 .ds-mx-xs-16 {
-  @apply mx-16 ;
+  @apply mx-16;
 }
 .ds-mx-xs-20 {
-  @apply mx-20 ;
+  @apply mx-20;
 }
 .ds-mx-xs-24 {
-  @apply mx-24 ;
+  @apply mx-24;
 }
 .ds-mx-xs-28 {
-  @apply mx-28 ;
+  @apply mx-28;
 }
 .ds-mx-xs-32 {
-  @apply mx-32 ;
+  @apply mx-32;
 }
 .ds-mx-xs-36 {
-  @apply mx-36 ;
+  @apply mx-36;
 }
 .ds-mx-xs-40 {
-  @apply mx-40 ;
+  @apply mx-40;
 }
 .ds-mx-xs-44 {
-  @apply mx-44 ;
+  @apply mx-44;
 }
 .ds-mx-xs-48 {
-  @apply mx-48 ;
+  @apply mx-48;
 }
 .ds-mx-xs-52 {
-  @apply mx-52 ;
+  @apply mx-52;
 }
 .ds-mx-xs-56 {
-  @apply mx-56 ;
+  @apply mx-56;
 }
 .ds-mx-xs-60 {
-  @apply mx-60 ;
+  @apply mx-60;
 }
 .ds-mx-xs-64 {
-  @apply mx-64 ;
+  @apply mx-64;
 }
 .ds-mx-xs-72 {
-  @apply mx-72 ;
+  @apply mx-72;
 }
 .ds-mx-xs-80 {
-  @apply mx-80 ;
+  @apply mx-80;
 }
 .ds-mx-xs-96 {
-  @apply mx-96 ;
+  @apply mx-96;
 }
 .ds-mx-sm-0 {
   @apply sm:mx-0 !important;

package/src/utilities/padding.css

@@ -4296,4 +4296,4 @@
 }
 .ds-py-xl-96 {
   @apply xl:py-96 !important;
-}
+}

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/src/utilities/print.css

@@ -8,4 +8,4 @@
 
 .ds-print-visible-inline {
   @apply print:inline !important;
-}
+}

package/src/utilities/utilities.css

@@ -1,4 +1,3 @@
-@import "./gap.css";
-@import "./margin.css";
-@import "./padding.css";
-
+@import './gap.css';
+@import './margin.css';
+@import './padding.css';