@digigov/css 2.0.0-0edebf87 → 2.0.0-13876dba

package/src/components/table.css

@@ -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

@@ -4,7 +4,7 @@
   .ds-dense & {
     .ds-tabs__list {
       .ds-tabs__list-item {
-        @apply px-3 py-1;
+        @apply md:px-3 md:py-1;
         &.ds-tabs__list-item-selected {
           @apply md:px-4 md:pb-3 md:pt-2;
         }
@@ -14,70 +14,52 @@
       @apply pb-2 pt-3;
     }
   }
-
-  &.ds-tabs--vertical {
-    .ds-tabs__panel {
-      @apply min-h-full pt-4 pl-6;
-    }
-    .ds-tabs__list {
-      .ds-tabs__list-item {
-        @apply w-full rounded-none mb-1 md:bg-base-200 border-base-200;
-        width: calc(100% - 0.25rem);
-        &.ds-tabs__list-item-selected {
-          @apply md:border-b md:border-r-0 mb-1 mt-0 px-4 py-2;
-
-          /* margin-right: -1px; */
-          width: calc(100% + 1px);
-
-          /* margin-top: 0px; */
-        }
-      }
+}
+.ds-tabs__title {
+  @apply block md:hidden;
+}
+.ds-tabs__list {
+  @apply list-none m-0 p-0 
+  md:flex md:flex-nowrap md:w-full md:items-start;
+  &::after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+.ds-tabs__list-item {
+  @apply relative px-4 py-1 md:py-2 m-0 shadow-none cursor-pointer text-link
+  md:float-left md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2 md:text-base-content
+  print:hidden;
+  word-break: break-word;
+  &.ds-tabs__list-item-selected {
+    @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:py-4 md:-mt-1;
+    margin-bottom: -1px;
+    &:hover {
+      text-decoration-thickness: 2px;
     }
   }
-  .ds-tabs__title {
-    @apply block md:hidden lg:hidden;
+}
+.ds-tabs__tab {
+  @apply text-lg no-underline hover:underline;
+  &::before {
+    @apply absolute top-0 left-0 text-base-content;
+    @apply md:content-[''] !important;
+    content: '_';
   }
-  .ds-tabs__list {
-    @apply list-none m-0 p-0;
-    &::after {
-      content: '';
-      display: block;
-      clear: both;
-    }
-    .ds-tabs__list-item {
-      @apply relative px-4 py-2 m-0 shadow-none cursor-pointer;
-      @apply md:float-left md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2;
-      @apply print:hidden;
-      &.ds-tabs__list-item-selected {
-        @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:py-4 md:-mt-1;
-        margin-bottom: -1px;
-        &:hover {
-          text-decoration-thickness: 2px;
-        }
-      }
-    }
-    .ds-tabs__tab {
-      @apply text-lg no-underline hover:underline focus:underline;
-      text-underline-offset: 0.1em;
-      &::after {
-        @apply absolute top-0 right-0 bottom-0 left-0;
-        content: '';
-      }
-      &:focus {
-        background-color: var(--color-focus);
-        outline: 3px solid transparent;
-        box-shadow: inset 0 0 0 3px var(--color-focus);
-        outline-offset: 0;
-        text-decoration-thickness: 0.2rem;
-      }
-    }
+  &:focus {
+    @apply bg-focus underline text-link-active;
+    outline: 3px solid transparent;
+    box-shadow: inset 0 0 0 3px var(--color-focus);
+    outline-offset: 0;
+    text-decoration-thickness: 0.2rem;
   }
-  .ds-tabs__panel {
-    @apply bg-base-100 md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-400 mb-0
-    print:block print:border-0 print:py-3;
-    border-radius: var(--tabs__panel-border-radius);
-    &.ds-tabs__panel--visible {
-      @apply block;
-    }
+}
+.ds-tabs__panel {
+  @apply bg-base-100 md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-400 mb-0
+  print:block print:border-0 print:py-3;
+  border-radius: var(--tabs__panel-border-radius);
+  &.ds-tabs__panel--visible {
+    @apply block;
   }
 }

package/src/components/test.css

@@ -0,0 +1,7 @@
+.ds-underline {
+  text-decoration-line: underline;
+}
+
+.ds-button:focus {
+  @apply ds-underline;
+}

package/src/components/typography.common.css

@@ -0,0 +1,135 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+@tailwind utilities;
+
+@layer utilities {
+  .util-font-weight-bold-text {
+    @apply font-bold !important;
+  }
+
+  .util-heading-xl {
+    @apply mx-0 max-w-2xl;
+  }
+  .util-heading-xl-text {
+    font-size: var(--heading-xl-font-size);
+    line-height: var(--heading-xl-line-height);
+    font-weight: var(--heading-xl-font-weight);
+  }
+  .util-heading-lg-text {
+    font-size: var(--heading-lg-font-size);
+    line-height: var(--heading-lg-line-height);
+    font-weight: var(--heading-lg-font-weight);
+  }
+  .util-heading-md-text {
+    font-size: var(--heading-md-font-size);
+    line-height: var(--heading-md-line-height);
+    font-weight: var(--heading-md-font-weight);
+  }
+  .util-heading-sm-text {
+    font-size: var(--heading-sm-font-size);
+    line-height: var(--heading-sm-line-height);
+    font-weight: var(--heading-sm-font-weight);
+  }
+  .util-heading-xs-text {
+    font-size: var(--heading-xs-font-size);
+    line-height: var(--heading-xs-line-height);
+    font-weight: var(--heading-xs-font-weight);
+  }
+
+  .util-body-text {
+    font-size: var(--body-font-size);
+    line-height: var(--body-line-height);
+    margin-bottom: var(--body-margin-bottom);
+    color: var(--body-color);
+  }
+  .util-body-lg-text {
+    font-size: var(--body--lg-font-size);
+    line-height: var(--body--lg-line-height);
+  }
+  .util-body-sm-text {
+    font-size: var(--body--sm-font-size);
+    line-height: var(--body--sm-line-height);
+  }
+  .util-link {
+    @apply focus:bg-focus;
+    padding: var(--link-padding-y) var(--link-padding-x);
+  }
+  .util-link-text {
+    /* @apply focus:text-link-active underline; */
+    @apply underline;
+    color: var(--link-color);
+    font-size: var(--link-font-size);
+    line-height: var(--link-line-height);
+  }
+
+  .util-caption-xl {
+    @apply mx-0 font-normal;
+  }
+  .util-caption-xl-text {
+    color: var(--caption-xl-color);
+    font-size: var(--caption-xl-font-size);
+    margin-bottom: var(--caption-xl-margin-bottom);
+    font-weight: var(--caption-xl-font-weight);
+    line-height: var(--caption-xl-line-height);
+  }
+  .util-caption-lg {
+    @apply mx-0 font-normal;
+  }
+  .util-caption-lg-text {
+    color: var(--caption-lg-color);
+    font-size: var(--caption-lg-font-size);
+    margin-bottom: var(--caption-lg-margin-bottom);
+    font-weight: var(--caption-lg-font-weight);
+    line-height: var(--caption-lg-line-height);
+  }
+  .util-caption-md {
+    @apply mx-0 font-normal;
+  }
+  .util-caption-md-text {
+    color: var(--caption-md-color);
+    font-size: var(--caption-md-font-size);
+    margin-bottom: var(--caption-md-margin-bottom);
+    font-weight: var(--caption-md-font-weight);
+    line-height: var(--caption-md-line-height);
+  }
+
+  /* Hint */
+  .util-hint {
+    margin-bottom: var(--hint-margin-bottom);
+  }
+  .util-hint-text {
+    font-size: var(--hint-font-size);
+    line-height: var(--hint-line-height);
+    color: var(--hint-color);
+  }
+  .util-hint-lg-text {
+    font-size: var(--hint--lg-font-size);
+    line-height: var(--hint--lg-line-height);
+  }
+  .util-hint-sm-text {
+    font-size: var(--hint--sm-font-size);
+    line-height: var(--hint--sm-line-height);
+  }
+
+  /* List */
+  .util-list {
+    @apply md:mb-8 mb-4 mt-4 text-base-content;
+  }
+  .util-list-bullet {
+    @apply pl-4;
+  }
+  .util-list-number {
+    @apply pl-4;
+  }
+  .util-list-horizontal {
+    @apply flex flex-wrap gap-x-6 gap-y-3;
+  }
+  .util-list-spaced {
+    @apply gap-x-10 gap-y-5;
+  }
+  .util-list-item {
+    @apply mb-2 last:mb-0;
+  }
+  .util-list-item-horizontal {
+    @apply w-full;
+  }
+}

package/src/components/typography.css

@@ -1,86 +1,54 @@
+@import './typography.common.css';
+
 .ds-heading-xl {
-  @apply mx-0 max-w-2xl;
-  font-size: var(--heading-xl-font-size);
-  line-height: var(--heading-xl-line-height);
-  margin-bottom: var(--heading-xl-margin-bottom);
-  font-weight: var(--heading-xl-font-weight);
+  @apply util-heading-xl util-heading-xl-text;
   letter-spacing: var(--heading-xl-letter-spacing);
+  margin-bottom: var(--heading-xl-margin-bottom);
 }
 .ds-heading-lg {
-  @apply mx-0;
-  font-size: var(--heading-lg-font-size);
-  line-height: var(--heading-lg-line-height);
-  margin-bottom: var(--heading-lg-margin-bottom);
-  font-weight: var(--heading-lg-font-weight);
+  @apply util-heading-lg-text mx-0;
   letter-spacing: var(--heading-lg-letter-spacing);
+  margin-bottom: var(--heading-lg-margin-bottom);
 }
 .ds-heading-md {
-  @apply mx-0;
-  font-size: var(--heading-md-font-size);
-  line-height: var(--heading-md-line-height);
+  @apply util-heading-md-text mx-0;
+  letter-spacing: var(--heading-lg-letter-spacing);
   margin-bottom: var(--heading-md-margin-bottom);
-  font-weight: var(--heading-md-font-weight);
-  letter-spacing: var(--heading-md-letter-spacing);
 }
 .ds-heading-sm {
-  @apply mx-0;
-  font-size: var(--heading-sm-font-size);
-  line-height: var(--heading-sm-line-height);
+  @apply util-heading-sm-text mx-0;
+  letter-spacing: var(--heading-lg-letter-spacing);
   margin-bottom: var(--heading-sm-margin-bottom);
-  font-weight: var(--heading-sm-font-weight);
-  letter-spacing: var(--heading-sm-letter-spacing);
 }
 .ds-heading-xs {
-  @apply mx-0;
-  font-size: var(--heading-xs-font-size);
-  line-height: var(--heading-xs-line-height);
+  @apply util-heading-xs-text mx-0;
+  letter-spacing: var(--heading-lg-letter-spacing);
   margin-bottom: var(--heading-xs-margin-bottom);
-  font-weight: var(--heading-xs-font-weight);
-  letter-spacing: var(--heading-xs-letter-spacing);
 }
+
 .ds-heading--break-words {
   @apply break-words;
 }
 .ds-caption-xl {
-  @apply block mx-0 font-normal;
-  color: var(--caption-xl-color);
-  font-size: var(--caption-xl-font-size);
-  line-height: var(--caption-xl-line-height);
-  margin-bottom: var(--caption-xl-margin-bottom);
-  font-weight: var(--caption-xl-font-weight);
+  @apply util-caption-xl util-caption-xl-text block;
   letter-spacing: var(--heading-xl-letter-spacing);
 }
 .ds-caption-lg {
-  @apply block mx-0 font-normal;
-  color: var(--caption-lg-color);
-  font-size: var(--caption-lg-font-size);
-  line-height: var(--caption-lg-line-height);
-  margin-bottom: var(--caption-lg-margin-bottom);
-  font-weight: var(--caption-lg-font-weight);
-  letter-spacing: var(--caption-lg-letter-spacing);
+  @apply util-caption-lg util-caption-lg-text block;
+  letter-spacing: var(--heading-lg-letter-spacing);
 }
 .ds-caption-md {
-  @apply block mx-0 font-normal;
-  color: var(--caption-md-color);
-  font-size: var(--caption-md-font-size);
-  line-height: var(--caption-md-line-height);
-  margin-bottom: var(--caption-md-margin-bottom);
-  font-weight: var(--caption-md-font-weight);
-  letter-spacing: var(--caption-md-letter-spacing);
+  @apply util-caption-md util-caption-md-text block;
+  letter-spacing: var(--heading-md-letter-spacing);
 }
 .ds-hint {
-  font-size: var(--hint-font-size);
-  line-height: var(--hint-line-height);
-  margin-bottom: var(--hint-margin-bottom);
-  color: var(--hint-color);
+  @apply util-hint util-hint-text;
   letter-spacing: var(--hint-letter-spacing);
   &.ds-hint--lg {
-    font-size: var(--hint-lg-font-size);
-    line-height: var(--hint--lg-line-height);
+    @apply util-hint-lg-text;
   }
   &.ds-hint--sm {
-    font-size: var(--hint--sm-font-size);
-    line-height: var(--hint--sm-line-height);
+    @apply util-hint-sm-text;
   }
   &.ds-hint--break-words {
     @apply break-words;
@@ -92,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;
 }
@@ -135,14 +88,12 @@
   @apply font-normal !important;
 }
 .ds-\!-font-weight-bold {
-  @apply font-bold !important;
+  @apply util-font-weight-bold-text;
 }
 .ds-list {
-  @apply list-none list-outside mt-4;
-  @apply md:mb-8 mb-4 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);
-  letter-spacing: var(--list-letter-spacing);
   &.ds-list--bullet {
     @apply list-disc list-outside pl-4;
   }
@@ -163,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) {
@@ -193,57 +147,41 @@
     column-count: 2;
   }
 }
-.ds-blockquote {
-  @apply mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
-  font-size: var(--blockquote-font-size);
-  line-height: var(--blockquote-line-height);
-  &.ds-blockquote--dense,
-  .ds-dense & {
-    @apply mt-3 md:mb-6 p-3 border-l-6;
-  }
-}
 .ds-body {
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-  margin-bottom: var(--body-margin-bottom);
-  color: var(--body-color);
+  @apply util-body-text;
   letter-spacing: var(--body-letter-spacing);
   &.ds-body--lg {
-    font-size: var(--body--lg-font-size);
-    line-height: var(--body--lg-line-height);
+    @apply util-body-lg-text;
   }
   &.ds-body--sm {
-    font-size: var(--body--sm-font-size);
-    line-height: var(--body--sm-line-height);
+    @apply util-body-sm-text;
   }
   .ds-code {
-    @apply p-2 bg-base-200;
+    @apply p-1 bg-base-200;
   }
 }
 
 .ds-link {
-  @apply focus:text-link-active underline cursor-pointer;
-  color: var(--link-color);
-  padding: var(--link-padding);
-  font-size: var(--link-font-size);
-  line-height: var(--link-line-height);
+  @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;
     color: var(--link-color-hover);
   }
   &:focus {
-    color: var(--link-color-active);
-    background-color: var(--color-focus);
     box-shadow:
       0 -2px var(--color-focus),
       0 4px var(--color-base-content);
+
     text-decoration: none !important;
     outline: none;
   }
   &.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 &,
@@ -331,6 +269,7 @@
   }
 }
 button.ds-link {
+  @apply text-left;
   .ds-svg-icon {
     @apply ml-1;
   }
@@ -341,19 +280,8 @@ button.ds-link {
     fill: var(--color-base-content);
   }
 }
-.ds-code-block__container {
-  @apply p-4 bg-base-200 border border-base-300 w-full;
-  & > pre {
-    @apply bg-transparent p-0 m-0;
-    font: inherit;
-    color: inherit;
-  }
-}
 .ds-table__cell {
   & > code {
     @apply border-none;
   }
 }
-.ds-code-block__content {
-  @apply text-sm sm:text-base;
-}

package/src/components/typography.native.css

@@ -0,0 +1,128 @@
+/* stylelint-disable digigov/nest-related-rules */
+@import './typography.common.css';
+
+.ds-\!-font-weight-bold__text {
+  @apply util-font-weight-bold-text;
+}
+
+/* Heading */
+.ds-heading-xl {
+  @apply util-heading-xl;
+}
+.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 */
+.ds-hint {
+  @apply util-hint flex flex-row;
+}
+.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 */
+.ds-link {
+  @apply util-link focus:border-b-4 border-b-base-content;
+}
+.ds-link__text {
+  @apply util-link-text;
+  line-height: calc(var(--link-line-height) * var(--link-font-size));
+}
+
+/* HeadingCaption */
+.ds-caption-xl {
+  @apply util-caption-xl;
+}
+.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 {
+  @apply util-list;
+}
+.ds-list__item {
+  @apply util-list-item;
+}
+.ds-list--bullet {
+  @apply util-list-bullet;
+}
+.ds-list--number {
+  @apply util-list-number;
+}