@digigov/css 1.2.0-fd2cea11 → 1.2.0-mobile

package/src/components/task-list.css

@@ -1,58 +1,58 @@
-.govgr-task-list {
+.ds-task-list {
   @apply mb-4 pl-6 pb-2;
 }
-.govgr-task-list__item {
+.ds-task-list__item {
   @apply mb-8 md:mb-10;
 }
-.govgr-task-list__heading {
+.ds-task-list__heading {
   @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2;
+  &.ds-task-list__heading--md {
+    @apply md:text-2xl text-xl md:mb-4 mb-2;
+  }
+  &.ds-task-list__heading--sm {
+    @apply md:text-lg text-base md:mb-3 mb-1;
+  }
 }
-.govgr-task-list__heading--md {
-  @apply md:text-2xl text-xl md:mb-4 mb-2;
-}
-.govgr-task-list__heading--sm {
-  @apply md:text-lg text-base md:mb-3 mb-1;
-}
-.govgr-task-list__content {
+.ds-task-list__content {
   @apply mb-4;
 }
-.govgr-task-list__content__tag {
+.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;
-}
-.govgr-task-list__content__tag--info {
-  @apply bg-info text-white print:border-info-hover print:text-info-hover;
-}
-.govgr-task-list__content__tag--primary {
-  @apply bg-secondary text-base-content print:border-info print:text-info;
-}
-.govgr-task-list__content__tag--secondary {
-  @apply bg-base-300 print:border-base-800 print:text-base-800;
+  &.ds-task-list__content__tag--info {
+    @apply bg-info text-white print:border-info-hover print:text-info-hover;
+  }
+  &.ds-task-list__content__tag--primary {
+    @apply bg-secondary text-base-content print:border-info print:text-info;
+  }
+  &.ds-task-list__content__tag--secondary {
+    @apply bg-base-300 print:border-base-800 print:text-base-800;
+  }
 }
 
 /* overrides */
 
-.govgr-task-list--dense{
-  .govgr-task-list__item {
+.ds-task-list--dense {
+  .ds-task-list__item {
     @apply mb-4 md:mb-6;
-    .govgr-summary-list{
-      @apply mb-4 md:mb-6; 
+    .ds-summary-list {
+      @apply mb-4 md:mb-6;
     }
   }
 }
-.govgr-task-list__content {
-  .govgr-body {
+.ds-task-list__content {
+  .ds-body {
     @apply mb-2 md:mb-3;
   }
-  .govgr-summary-list__row:first-child {
-    & > .govgr-summary-list__key {
+  .ds-summary-list__row:first-child {
+    & > .ds-summary-list__key {
       @apply border-t-2 border-base-400;
     }
-    & > .govgr-summary-list__value,
-    & > .govgr-summary-list__actions {
+    & > .ds-summary-list__value,
+    & > .ds-summary-list__actions {
       @apply sm:border-t-2 sm:border-base-400;
     }
   }
-  .govgr-summary-list__key {
+  .ds-summary-list__key {
     @apply font-normal sm:mb-0 mb-2 pt-2;
   }
 }

package/src/components/test.css

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

package/src/components/timeline.css

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

package/src/components/typography.common.css

@@ -0,0 +1,137 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+@tailwind utilities;
+
+@layer utilities {
+  .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);
+    margin-bottom: var(--heading-xl-margin-bottom);
+    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);
+    margin-bottom: var(--heading-lg-margin-bottom);
+    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);
+    margin-bottom: var(--heading-md-margin-bottom);
+    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);
+    margin-bottom: var(--heading-sm-margin-bottom);
+    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);
+    margin-bottom: var(--heading-xs-margin-bottom);
+    font-weight: var(--heading-xs-font-weight);
+  }
+
+  .util-body-text {
+    font-size: var(--body-font-size);
+    line-height: calc(var(--body-line-height) * var(--body-font-size));
+    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);
+  }
+  .util-link-text {
+    @apply focus:text-link-active underline;
+    color: var(--link-color);
+    font-size: var(--link-font-size);
+    line-height: var(--link-line-height);
+    /* &:focus {
+      text-decoration: none !important;
+    } */
+  }
+
+  .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);
+  }
+  .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);
+  }
+  .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);
+  }
+
+  /* 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 mt-4;
+
+    @apply md:mb-8 mb-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;
+  }
+}