@digigov/css 1.1.1 → 1.2.0-mobile

package/src/components/typography.css

@@ -1,280 +1,206 @@
-.govgr-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);
+@import './typography.common.css';
+
+.ds-heading-xl {
+  @apply util-heading-xl util-heading-xl-text;
   letter-spacing: var(--heading-xl-letter-spacing);
 }
-.govgr-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);
+.ds-heading-lg {
+  @apply util-heading-lg-text mx-0;
+  letter-spacing: var(--heading-lg-letter-spacing);
+}
+.ds-heading-md {
+  @apply util-heading-md-text mx-0;
+  letter-spacing: var(--heading-lg-letter-spacing);
+}
+.ds-heading-sm {
+  @apply util-heading-sm-text mx-0;
   letter-spacing: var(--heading-lg-letter-spacing);
 }
-.govgr-heading-md {
-  @apply mx-0;
-  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);
-  letter-spacing: var(--heading-md-letter-spacing);
-}
-.govgr-heading-sm {
-  @apply mx-0;
-  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);
-  letter-spacing: var(--heading-sm-letter-spacing);
-}
-.govgr-heading-xs {
-  @apply mx-0;
-  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);
-  letter-spacing: var(--heading-xs-letter-spacing);
-}
-.govgr-heading--break-words {
+.ds-heading-xs {
+  @apply util-heading-xs-text mx-0;
+  letter-spacing: var(--heading-lg-letter-spacing);
+}
+
+.ds-heading--break-words {
   @apply break-words;
 }
-.govgr-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);
+.ds-caption-xl {
+  @apply util-caption-xl util-caption-xl-text block;
   letter-spacing: var(--heading-xl-letter-spacing);
 }
-.govgr-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);
-}
-.govgr-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);
-}
-.govgr-body {
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-  margin-bottom: var(--body-margin-bottom);
-  color: var(--body-color);
-  letter-spacing: var(--body-letter-spacing);
-}
-.govgr-body-lg {
-  font-size: var(--body-lg-font-size);
-  line-height: var(--body-lg-line-height);
+.ds-caption-lg {
+  @apply util-caption-lg util-caption-lg-text block;
+  letter-spacing: var(--heading-xl-letter-spacing);
 }
-.govgr-body-sm {
-  font-size: var(--body-sm-font-size);
-  line-height: var(--body-sm-line-height);
+.ds-caption-md {
+  @apply util-caption-md util-caption-md-text block;
+  letter-spacing: var(--heading-xl-letter-spacing);
 }
-.govgr-hint {
-  font-size: var(--hint-font-size);
-  line-height: var(--hint-line-height);
-  margin-bottom: var(--hint-margin-bottom);
-  color: var(--hint-color);
-  letter-spacing: var(--hint-letter-spacing);
+.ds-hint {
+  @apply util-hint-text;
+  &.ds-hint--lg {
+    @apply util-hint-lg-text;
+  }
+  &.ds-hint--sm {
+    @apply util-hint-sm-text;
+  }
+  &.ds-hint--break-words {
+    @apply break-words;
+  }
 }
-.govgr-background-dark, .govgr-masthead--primary {
-  .govgr-hint {
+.ds-background-dark,
+.ds-masthead--primary {
+  .ds-hint {
     @apply opacity-70 text-white print:text-base-content;
   }
 }
-.govgr-code {
+.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;
+  }
 }
-.govgr-code--attr {
-  @apply text-info;
-}
-.govgr-code--string {
-  @apply text-success;
-}
-.govgr-code--keyword {
-  @apply text-warning;
-}
-.govgr-code--name {
-  @apply text-tertiary;
-}
-.govgr-\!-font-size-14 {
+.ds-\!-font-size-14 {
   @apply text-xs md:text-sm !important;
 }
-.govgr-\!-font-size-16 {
+.ds-\!-font-size-16 {
   @apply text-sm md:text-base !important;
 }
-.govgr-\!-font-size-19 {
+.ds-\!-font-size-19 {
   @apply text-base md:text-lg !important;
 }
-.govgr-\!-font-size-24 {
+.ds-\!-font-size-24 {
   @apply text-xl md:text-2xl !important;
 }
-.govgr-\!-font-size-30 {
+.ds-\!-font-size-30 {
   @apply text-2xl md:text-3xl !important;
 }
-.govgr-\!-font-size-36 {
+.ds-\!-font-size-36 {
   @apply text-3xl md:text-4xl !important;
 }
-.govgr-\!-font-size-48 {
+.ds-\!-font-size-48 {
   @apply text-4xl md:text-5xl !important;
 }
-.govgr-\!-font-size-72 {
+.ds-\!-font-size-72 {
   @apply text-6xl md:text-7xl !important;
 }
-.govgr-\!-font-weight-regular {
+.ds-\!-font-weight-regular {
   @apply font-normal !important;
 }
-.govgr-\!-font-weight-bold {
+.ds-\!-font-weight-bold {
   @apply font-bold !important;
 }
-.govgr-list {
+.ds-list {
   @apply list-none list-outside mt-4;
+  @apply 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);
-  .govgr-list__item {
+  &.ds-list--bullet {
+    @apply list-disc list-outside pl-4;
+  }
+  &.ds-list--number {
+    @apply list-decimal list-outside pl-6;
+  }
+  &.ds-list--horizontal {
+    @apply flex flex-wrap gap-x-6 gap-y-3;
+    &.ds-list--spaced {
+      @apply gap-x-10 gap-y-5;
+    }
+    .ds-list__item {
+      @apply w-full sm:w-auto;
+    }
+  }
+  .ds-list__item {
     @apply mb-2;
     &:last-child {
       @apply mb-0;
     }
   }
 }
-.govgr-list__item > .govgr-list--bullet:nth-child(1) {
+.ds-list__item > .ds-list--bullet:nth-child(1) {
   list-style: circle inside none;
 }
-.govgr-list__item
-  > .govgr-list
-  > .govgr-list__item
-  > .govgr-list--bullet:nth-child(1) {
+.ds-list__item > .ds-list > .ds-list__item > .ds-list--bullet:nth-child(1) {
   @apply list-disc;
 }
-.govgr-list__item
-  > .govgr-list:not(.govgr-list--bullet):not(.govgr-list--number):nth-child(1)
-  > .govgr-list__item {
+.ds-list__item
+  > .ds-list:not(.ds-list--bullet, .ds-list--number):nth-child(1)
+  > .ds-list__item {
   @apply pl-10;
 }
-.govgr-list__item > .govgr-list {
+.ds-list__item > .ds-list {
   @apply mb-0 mt-2;
 }
-.govgr-list--bullet {
-  @apply list-disc list-outside pl-4;
-}
-.govgr-list--number {
-  @apply list-decimal list-outside pl-6;
-}
-.govgr-list--spaced:not(.govgr-list--horizontal) > .govgr-list__item {
+.ds-list--spaced:not(.ds-list--horizontal) > .ds-list__item {
   @apply mb-4;
   &:last-child {
     @apply mb-0;
   }
 }
-.govgr-list--horizontal {
-  @apply flex flex-wrap gap-x-6 gap-y-3;
-  .govgr-list__item {
-    @apply w-full sm:w-auto;
-  }
-  &.govgr-list--spaced {
-    @apply gap-x-10 gap-y-5;
-  }
-}
 @media (min-width: 768px) {
-  .govgr-list--col-2 {
+  .ds-list--col-2 {
     column-count: 2;
   }
-  .govgr-list--col-3 {
+  .ds-list--col-3 {
     column-count: 2;
   }
 }
-.govgr-list {
-  @apply md:mb-8 mb-4 text-base-content;
-}
-.govgr-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);
-  &.govgr-blockquote--dense, .govgr-dense & {
-    @apply mt-3 md:mb-6 p-3 border-l-6;
-  } 
-}
-.govgr-body {
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-  margin-bottom: var(--body-margin-bottom);
-  color: var(--body-color);
+.ds-body {
+  @apply util-body-text;
   letter-spacing: var(--body-letter-spacing);
+  &.ds-body--lg {
+    @apply util-body-lg-text;
+  }
+  &.ds-body--sm {
+    @apply util-body-sm-text;
+  }
+  .ds-code {
+    @apply p-2 bg-base-200;
+  }
 }
-.govgr-body-lg {
-  font-size: var(--body-lg-font-size);
-  line-height: var(--body-lg-line-height);
-}
-.govgr-body-sm {
-  font-size: var(--body-sm-font-size);
-  line-height: var(--body-sm-line-height);
-}
-.govgr-hint {
-  font-size: var(--hint-font-size);
-  line-height: var(--hint-line-height);
-  margin-bottom: var(--hint-margin-bottom);
-  color: var(--hint-color);
-  letter-spacing: var(--hint-letter-spacing);
-}
-.govgr-hint--break-words {
-  @apply break-words;
-}
-
 
-.govgr-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);
+.ds-link {
+  @apply util-link util-link-text cursor-pointer;
   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;
   }
-  .govgr-heading-xl & ,
-  .govgr-heading-lg & ,
-  .govgr-heading-md & ,
-  .govgr-heading-sm & ,
-  .govgr-body &,
-  .govgr-hint &,
-  .govgr-footer__list &
-  {
+  &.ds-link--no-underline {
+    @apply no-underline hover:underline;
+  }
+  .ds-heading-xl &,
+  .ds-heading-lg &,
+  .ds-heading-md &,
+  .ds-heading-sm &,
+  .ds-body &,
+  .ds-hint &,
+  .ds-footer__list & {
     font-size: inherit;
   }
 }
-.govgr-link--no-underline {
-  @apply no-underline hover:underline;
-}
 
-.govgr-back-link {
+.ds-back-link {
+  @apply w-fit text-base-content underline flex items-center mb-4 cursor-pointer;
   font-size: var(--back-link-font-size);
   letter-spacing: var(--back-link-letter-spacing);
-  @apply w-fit text-base-content underline flex items-center mb-4 cursor-pointer;
   &:hover {
     text-decoration-thickness: 2px;
   }
@@ -288,73 +214,88 @@
   }
 }
 
-.govgr-highlight-links {
-  .govgr-link {
-    @apply bg-base-content p-1 text-focus underline m-1;
-  }
+.ds-highlight-links {
   &.dark {
-    .govgr-link {
+    .ds-link {
       @apply bg-base-300;
     }
   }
+  .ds-link {
+    @apply bg-base-content p-1 text-focus underline m-1;
+  }
 }
-.govgr-visually-hidden {
+.ds-visually-hidden {
   @apply absolute m-0 p-0 overflow-hidden border-0 whitespace-nowrap !important;
   width: 1px !important;
   height: 1px !important;
   clip: rect(0 0 0 0) !important;
-  -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important;
 }
 @media print {
-  .govgr-body .govgr-link[href^="#"]:after {
+  .ds-body .ds-link[href^='#']::after {
     display: none;
   }
-  .govgr-link[href^="http://"]:after, .govgr-link[href^="https://"]:after
+  .ds-link[href^="http://"]:after, .ds-link[href^="https://"]:after
   {
-    content: " (" attr(href) ")";
+    content: ' (' attr(href) ')';
     font-size: 80%;
   }
-  .govgr-body .govgr-link {
-    word-wrap: break-word;
+  .ds-body {
+    .ds-link {
+      word-wrap: break-word;
+    }
   }
-  .govgr-link {
+  .ds-link {
     @apply text-base-content;
   }
 }
 
 /* overrides */
 
-.govgr-link {
-  .govgr-svg-icon {
-    fill: var(--color-link);
+.ds-hint {
+  .ds-svg-icon {
+    fill: var(--hint-color);
   }
+}
+.ds-link {
   &:hover {
-    .govgr-svg-icon {
+    .ds-svg-icon {
       fill: var(--color-link-hover);
     }
   }
   &:focus {
-    .govgr-svg-icon {
+    .ds-svg-icon {
       fill: var(--color-link-active);
     }
   }
+  .ds-svg-icon {
+    fill: var(--color-link);
+  }
 }
-button.govgr-link {
-  .govgr-svg-icon {
+button.ds-link {
+  .ds-svg-icon {
     @apply ml-1;
   }
 }
-.govgr-back-link {
-  .govgr-svg-icon--caret {
-    fill: var(--color-base-content);
+.ds-back-link {
+  .ds-svg-icon--caret {
     @apply md:w-4 md:h-4 w-3 h-3 inline-block mr-2;
+    fill: var(--color-base-content);
   }
 }
-
-.govgr-code-block__container {
+.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;
+  }
 }
-.govgr-code-block__content {
+.ds-code-block__content {
   @apply text-sm sm:text-base;
 }

package/src/components/typography.native.css

@@ -0,0 +1,93 @@
+@import './typography.common.css';
+
+/* Heading */
+.ds-heading-xl {
+  @apply util-heading-xl;
+}
+.ds-heading-xl {
+  @apply util-heading-xl;
+}
+.ds-heading-xl {
+  @apply util-heading-xl;
+}
+.ds-heading-xl__text {
+  @apply util-heading-xl-text;
+}
+.ds-heading-lg__text {
+  @apply util-heading-lg-text;
+}
+.ds-heading-md__text {
+  @apply util-heading-md-text;
+}
+.ds-heading-sm__text {
+  @apply util-heading-sm-text;
+}
+.ds-heading-xs__text {
+  @apply util-heading-xs-text;
+}
+
+/* Paragraph */
+.ds-body__text {
+  @apply util-body-text;
+}
+.ds-body--lg__text {
+  @apply util-body-lg-text;
+}
+.ds-body--sm__text {
+  @apply util-body-sm-text;
+}
+
+/* Hint */
+.ds-hint {
+  @apply util-hint;
+}
+.ds-hint__text {
+  @apply util-hint-text;
+}
+.ds-hint--lg__text {
+  @apply util-hint-lg-text;
+}
+.ds-hint--sm__text {
+  @apply util-hint-sm-text;
+}
+
+/* Link */
+.ds-link {
+  @apply util-link focus:border-b-4 border-b-base-content;
+}
+.ds-link__text {
+  @apply util-link-text pt-4 pb-1;
+}
+
+/* HeadingCaption */
+.ds-caption-xl {
+  @apply util-caption-xl;
+}
+.ds-caption-xl__text {
+  @apply util-caption-xl-text;
+}
+.ds-caption-lg {
+  @apply util-caption-lg;
+}
+.ds-caption-lg__text {
+  @apply util-caption-lg-text;
+}
+.ds-caption-md {
+  @apply util-caption-md;
+}
+.ds-caption-md__text {
+  @apply util-caption-md-text;
+}
+
+.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;
+}

package/src/components/warning-text.common.css

@@ -0,0 +1,23 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+
+@tailwind utilities;
+
+@layer utilities {
+  .util-warning-text {
+    @apply flex pb-0;
+  }
+  .util-warning-text-text {
+    font-size: var(--warning-text-font-size);
+  }
+  .util-warning-text__icon {
+    @apply md:min-h-10 w-10 h-10 rounded-3xl bg-base-content 
+    print:bg-white print:border-2 print:border-base-content;
+  }
+  .util-warning-text__icon-text {
+    @apply text-base-content-invert font-bold leading-10 text-center 
+    print:text-base-content;
+  }
+  .util-warning-text__assistive {
+    @apply absolute w-px h-px m-0 p-0 border-0 overflow-hidden !important;
+  }
+}

package/src/components/warning-text.css

@@ -1,23 +1,23 @@
-.govgr-warning-text {
-  font-size: var(--warning-text-font-size);
+.ds-warning-text {
   @apply flex py-4 px-0;
-  .govgr-warning-text__icon {
+  font-size: var(--warning-text-font-size);
+  &.ds-warning-text--dense,
+  .ds-dense & {
+    .ds-warning-text__icon {
+      @apply mr-4 md:mr-5;
+    }
+  }
+  .ds-warning-text__icon {
     @apply text-base-content-invert font-bold bg-base-content text-3xl leading-10 text-center 
     rounded-3xl md:min-h-10 min-w-10 h-fit mr-6 mt-1
     print:bg-white print:border-2 print:border-base-content print:text-base-content;
   }
-  .govgr-warning-text__text {
+  .ds-warning-text__content {
     @apply flex items-center;
   }
-  .govgr-warning-text__assistive {
+  .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;
-    -webkit-clip-path: inset(50%) !important;
     clip-path: inset(50%) !important;
   }
-  &.govgr-warning-text--dense, .govgr-dense & {
-    .govgr-warning-text__icon  {
-      @apply mr-4 md:mr-5;
-    }
-  }
 }

package/src/components/warning-text.native.css

@@ -0,0 +1,22 @@
+@import './warning-text.common.css';
+
+.ds-warning-text {
+  @apply util-warning-text flex-row items-center mb-4;
+}
+.ds-warning-text__content {
+  @apply flex-1 flex;
+}
+.ds-warning-text__content__text {
+  /* @apply util-warning-text-text font-bold text-base-content flex-1; */
+  @apply text-base-content font-bold p-0 m-0;
+  font-size: var(--warning-text-font-size);
+}
+.ds-warning-text__icon {
+  @apply util-warning-text__icon mr-4;
+}
+.ds-warning-text__icon__text {
+  @apply util-warning-text__icon-text text-2xl;
+}
+.ds-warning-text__assistive {
+  @apply util-warning-text__assistive;
+}