@digigov/css 2.0.0-b4cd6916 → 2.0.0-c6d0b3b8

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/stepnav.css

@@ -1,7 +1,8 @@
 .ds-step-nav {
-  @apply mb-4 md:mb-8;
+  @apply mb-8 md:mb-12;
   &.ds-step-nav--dense,
   .ds-dense & {
+    @apply mb-4 md:mb-8;
     .ds-step-nav__circle {
       @apply md:w-8 md:h-8;
       margin-left: 0.1rem;
@@ -150,7 +151,7 @@
     -0.1em 0 0 var(--color-white);
 }
 .ds-nav-step__accordion__content {
-  @apply md:pt-2 mb-4 md:mb-8 pt-1 mx-0;
+  @apply md:pt-2 mb-6 pt-1 mx-0;
   > *:last-child {
     @apply mb-0;
   }

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

@@ -3,15 +3,16 @@
 
 @layer utilities {
   .util-summary-list {
-    @apply m-0 mb-4 md:mb-8 w-full sm:w-full;
+    @apply m-0 mb-6 sm:mb-8 w-full sm:w-full;
   }
   .util-summary-list-text {
     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;
@@ -25,7 +26,7 @@
   .util-summary-list__actions {
     @apply sm:w-3/12 sm:pr-0 sm:text-right;
   }
-  
+
   .util-summary-list__key--sm-3 {
     @apply 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,
@@ -118,7 +118,6 @@
   @apply sm:flex-1;
 }
 
-
 /* When there is only one child */
 .ds-summary-list__key:only-child,
 .ds-summary-list__value:only-child,
@@ -127,7 +126,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/svg-icons.common.css

@@ -53,4 +53,4 @@
   .util-svg-icon--xl {
     @apply h-10 w-10 !important;
   }
-}
+}

package/src/components/svg-icons.native.css

@@ -2,8 +2,7 @@
 
 .ds-svg-icon {
   @apply util-svg-icon;
-  flex-direction:'row';
-  flex-wrap:'wrap';
+  flex-flow: 'row' 'wrap';
 }
 .ds-svg-icon--base-content {
   @apply util-svg-icon--base-content;
@@ -52,4 +51,4 @@
 }
 .ds-svg-icon--xl {
   @apply util-svg-icon--xl;
-}
+}

package/src/components/table.css

@@ -1,20 +1,20 @@
 .ds-table__caption {
-  @apply table-caption text-left font-bold mx-0 antialiased;
+  @apply table-caption text-left font-bold;
   &.ds-table__caption--sm {
-    @apply text-lg md:text-xl mb-3 md:mb-5;
+    @apply md:text-2xl text-lg font-bold mx-0 md:mb-6 mb-4 antialiased;
   }
   &.ds-table__caption--md {
-    @apply text-xl md:text-2xl mb-6 md:mb-8;
+    @apply md:text-3xl text-xl font-bold mx-0 md:mb-8 mb-6 antialiased;
   }
   &.ds-table__caption--lg {
-    @apply text-2xl md:text-4xl mb-8 md:mb-10;
+    @apply md:text-4xl text-2xl font-bold mx-0 md:mb-9 mb-7 antialiased;
   }
   &.ds-table__caption--xl {
-    @apply text-3xl md:text-5xl md:leading-tight leading-tight mb-8 md:mb-10 max-w-2xl;
+    @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 md:mb-10 mb-8 max-w-2xl antialiased;
   }
 }
 .ds-table-container {
-  @apply w-full overflow-x-auto mb-4 md:mb-8;
+  @apply w-full overflow-x-auto md:mb-10 mb-6;
   &.ds-table-container--border {
     @apply border border-base-300 p-2;
   }
@@ -23,8 +23,8 @@
   }
 }
 .ds-table {
-  @apply w-full border-collapse table
-  mb-4 md:mb-8 text-base-content text-base md:text-lg font-normal antialiased;
+  @apply w-full border-collapse table;
+  @apply md:mb-10 mb-6 text-base-content md:text-lg text-base font-normal antialiased;
   border-spacing: 0;
   &.ds-table--vertical-lines {
     .ds-table__cell,
@@ -81,9 +81,12 @@
     .ds-table__header,
     .ds-table__cell {
       &:last-child {
-        @apply border-b-2;
-        border-bottom-color: rgb(var(--color-base-content-rgb));
+        @apply border-b-2 border-b-base-content;
       }
+    }
+     .ds-table__header--numeric,
+    .ds-table__cell--numeric {
+      @apply text-left;
     }
     .ds-table__head {
       .ds-table__header {
@@ -98,6 +101,7 @@
       @apply block font-semibold mb-2;
       content: attr(data-label);
     }
+
   }
   &.ds-table--stacked-sm {
     @media (min-width: 640px) {
@@ -108,9 +112,13 @@
     .ds-table__header,
     .ds-table__cell {
       &:last-child {
-        @apply border-b-2 sm:border-b border-b-base-content sm:border-b-base-300;
+        @apply xsOnly:border-b-2 xsOnly:border-b-base-content;
       }
     }
+    .ds-table__header--numeric,
+    .ds-table__cell--numeric {
+      @apply xsOnly:text-left;
+    }
     .ds-table__head {
       .ds-table__header {
         @apply hidden sm:table-cell;
@@ -134,9 +142,14 @@
     .ds-table__header,
     .ds-table__cell {
       &:last-child {
-        @apply border-b-2 md:border-b border-b-base-content md:border-b-base-300;
+        @apply xsOnly:border-b-2 smOnly:border-b-2 
+        xsOnly:border-b-base-content smOnly:border-b-base-content;
       }
     }
+    .ds-table__header--numeric,
+    .ds-table__cell--numeric {
+      @apply smOnly:text-left mdOnly:text-left;
+    }
     .ds-table__head {
       .ds-table__header {
         @apply hidden md:table-cell;

package/src/components/tabs.css

@@ -1,5 +1,4 @@
 .ds-tabs {
-  @apply mb-4 md:mb-8;
   scroll-behavior: smooth;
   &.ds-tabs--dense,
   .ds-dense & {

package/src/components/task-list.css

@@ -1,26 +1,20 @@
 .ds-task-list {
-  @apply mb-4 md:mb-8 pl-6 pb-2;
-  &.ds-task-list--dense,
-  .ds-dense & {
-    .ds-task-list__item {
-      @apply mb-3 md:mb-6;
-    }
-  }
+  @apply mb-4 pl-6 pb-2;
 }
 .ds-task-list__item {
-  @apply mb-10 md:mb-12;
+  @apply mb-8 md:mb-10;
 }
 .ds-task-list__heading {
-  @apply text-2xl md:text-3xl font-bold mx-0 mb-3 md:mb-6;
+  @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2;
   &.ds-task-list__heading--md {
-    @apply text-xl md:text-2xl mb-2 md:mb-4;
+    @apply md:text-2xl text-xl md:mb-4 mb-2;
   }
   &.ds-task-list__heading--sm {
-    @apply text-base md:text-lg mb-1 md:mb-3;
+    @apply md:text-lg text-base md:mb-3 mb-1;
   }
 }
 .ds-task-list__content {
-  @apply mb-2 md:mb-4;
+  @apply mb-4;
 }
 .ds-task-list__content__tag {
   @apply px-2 py-1 mr-2 inline-block font-sans text-sm uppercase tracking-widest print:border-2 print:bg-white print:mr-4;
@@ -39,6 +33,7 @@
 
 .ds-task-list--dense {
   .ds-task-list__item {
+    @apply mb-4 md:mb-6;
     .ds-summary-list {
       @apply mb-4 md:mb-6;
     }

package/src/components/test.css

@@ -3,5 +3,5 @@
 }
 
 .ds-button:focus {
-    @apply ds-underline;
-}
+  @apply ds-underline;
+}

package/src/components/timeline.css

@@ -1,10 +1,10 @@
 .ds-timeline {
-  @apply mb-4 md:mb-8 pl-6 pb-2 border-l-4 border-secondary;
+  @apply mb-4 pl-6 pb-2 border-l-4 border-secondary;
   &.ds-timeline--dense,
   .ds-dense & {
     @apply pb-0 border-l-3;
     .ds-timeline__item {
-      @apply mb-3 md:mb-6;
+      @apply mb-4 md:mb-6;
     }
     .ds-timeline__heading {
       @apply mb-2;
@@ -20,30 +20,30 @@
   @apply mb-10 md:mb-12;
 }
 .ds-timeline__heading {
-  @apply text-2xl md:text-3xl font-bold mx-0 mb-3 md:mb-6 relative;
+  @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2 relative;
   &::before {
     @apply block absolute top-4 -left-6 w-4 
     border-b-4 border-secondary;
     content: '';
   }
-  &.ds-timeline__heading--md {
-    @apply text-xl md:text-2xl mb-2 md:mb-4;
-    &::before {
-      @apply top-3 w-3;
-    }
+}
+.ds-timeline__heading-md {
+  @apply md:text-2xl text-xl md:mb-4 mb-2;
+  &::before {
+    @apply top-3 w-3;
   }
-  &.ds-timeline__heading--sm {
-    @apply text-base md:text-lg mb-1 md:mb-3;
-    &::before {
-      @apply top-2.5 w-3;
-    }
+}
+.ds-timeline__heading-sm {
+  @apply md:text-lg text-base md:mb-3 mb-1;
+  &::before {
+    @apply top-2.5 w-3;
   }
 }
 .ds-timeline__content {
-  @apply mb-2 md:mb-4;
+  @apply mb-4;
 }
 .ds-timeline__actions {
-  @apply flex flex-wrap items-center gap-4 mb-0;
+  @apply flex flex-wrap items-center gap-4 mb-6;
 }
 
 /* overrides */
@@ -54,7 +54,6 @@
   }
 }
 .ds-timeline__actions {
-  .ds-btn-group,
   .ds-btn,
   .ds-link {
     @apply mb-0;

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

package/src/components/typography.css

@@ -60,21 +60,6 @@
     @apply opacity-70 text-white print:text-base-content;
   }
 }
-.ds-code {
-  @apply text-sm sm:text-base bg-base-100;
-  &.ds-code--attr {
-    @apply text-info;
-  }
-  &.ds-code--string {
-    @apply text-success;
-  }
-  &.ds-code--keyword {
-    @apply text-warning;
-  }
-  &.ds-code--name {
-    @apply text-tertiary;
-  }
-}
 .ds-\!-font-size-14 {
   @apply text-xs md:text-sm !important;
 }
@@ -106,7 +91,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 +114,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 +131,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 +162,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;
@@ -191,6 +179,9 @@
   &.ds-link--no-underline {
     @apply no-underline hover:underline;
   }
+  &.ds-link-warning {
+    color: var(--color-error-text);
+  }
   .ds-heading-xl &,
   .ds-heading-lg &,
   .ds-heading-md &,
@@ -278,6 +269,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;
   }
   .util-warning-text-text {
     font-size: var(--warning-text-font-size);

package/src/components/warning-text.css

@@ -5,7 +5,6 @@
   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;
     }
@@ -18,9 +17,9 @@
   .ds-warning-text__content {
     @apply flex items-center;
   }
-  .ds-warning-text__assistive {
-    @apply absolute w-px h-px m-0 p-0 border-0 overflow-hidden whitespace-nowrap !important;
-    clip: rect(0 0 0 0) !important;
-    clip-path: inset(50%) !important;
-  }
+}
+.ds-warning-text__assistive {
+  @apply absolute w-px h-px m-0 p-0 border-0 overflow-hidden whitespace-nowrap !important;
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
 }

package/src/index.native.css

@@ -19,3 +19,8 @@
 @import './components/checkboxes.native';
 @import './components/radios.native';
 @import './components/modal.native';
+@import './components/loader.native';
+@import './components/stack.native';
+@import './components/chip.native';
+@import './components/skeleton.native';
+@import './components/accordion.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;
   }
-}
+}