@digigov/css 1.2.1-2702533a → 1.3.0-01ea6f24

package/src/components/timeline.css

@@ -1,11 +1,11 @@
-.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: "";
@@ -15,10 +15,10 @@
   }
 }
 
-.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: "";
@@ -26,35 +26,35 @@
     border-b-4 border-secondary;
   }
 }
-.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.css

@@ -1,4 +1,4 @@
-.govgr-heading-xl {
+.ds-heading-xl {
   @apply mx-0 max-w-2xl;
   font-size: var(--heading-xl-font-size);
   line-height: var(--heading-xl-line-height);
@@ -6,7 +6,7 @@
   font-weight: var(--heading-xl-font-weight);
   letter-spacing: var(--heading-xl-letter-spacing);
 }
-.govgr-heading-lg {
+.ds-heading-lg {
   @apply mx-0;
   font-size: var(--heading-lg-font-size);
   line-height: var(--heading-lg-line-height);
@@ -14,7 +14,7 @@
   font-weight: var(--heading-lg-font-weight);
   letter-spacing: var(--heading-lg-letter-spacing);
 }
-.govgr-heading-md {
+.ds-heading-md {
   @apply mx-0;
   font-size: var(--heading-md-font-size);
   line-height: var(--heading-md-line-height);
@@ -22,7 +22,7 @@
   font-weight: var(--heading-md-font-weight);
   letter-spacing: var(--heading-md-letter-spacing);
 }
-.govgr-heading-sm {
+.ds-heading-sm {
   @apply mx-0;
   font-size: var(--heading-sm-font-size);
   line-height: var(--heading-sm-line-height);
@@ -30,7 +30,7 @@
   font-weight: var(--heading-sm-font-weight);
   letter-spacing: var(--heading-sm-letter-spacing);
 }
-.govgr-heading-xs {
+.ds-heading-xs {
   @apply mx-0;
   font-size: var(--heading-xs-font-size);
   line-height: var(--heading-xs-line-height);
@@ -38,10 +38,10 @@
   font-weight: var(--heading-xs-font-weight);
   letter-spacing: var(--heading-xs-letter-spacing);
 }
-.govgr-heading--break-words {
+.ds-heading--break-words {
   @apply break-words;
 }
-.govgr-caption-xl {
+.ds-caption-xl {
   @apply block mx-0 font-normal;
   color: var(--caption-xl-color);
   font-size: var(--caption-xl-font-size);
@@ -50,7 +50,7 @@
   font-weight: var(--caption-xl-font-weight);
   letter-spacing: var(--heading-xl-letter-spacing);
 }
-.govgr-caption-lg {
+.ds-caption-lg {
   @apply block mx-0 font-normal;
   color: var(--caption-lg-color);
   font-size: var(--caption-lg-font-size);
@@ -59,7 +59,7 @@
   font-weight: var(--caption-lg-font-weight);
   letter-spacing: var(--caption-lg-letter-spacing);
 }
-.govgr-caption-md {
+.ds-caption-md {
   @apply block mx-0 font-normal;
   color: var(--caption-md-color);
   font-size: var(--caption-md-font-size);
@@ -68,183 +68,183 @@
   font-weight: var(--caption-md-font-weight);
   letter-spacing: var(--caption-md-letter-spacing);
 }
-.govgr-body {
+.ds-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 {
+.ds-body-lg {
   font-size: var(--body-lg-font-size);
   line-height: var(--body-lg-line-height);
 }
-.govgr-body-sm {
+.ds-body-sm {
   font-size: var(--body-sm-font-size);
   line-height: var(--body-sm-line-height);
 }
-.govgr-hint {
+.ds-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-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;
 }
-.govgr-code--attr {
+.ds-code--attr {
   @apply text-info;
 }
-.govgr-code--string {
+.ds-code--string {
   @apply text-success;
 }
-.govgr-code--keyword {
+.ds-code--keyword {
   @apply text-warning;
 }
-.govgr-code--name {
+.ds-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;
   font-size: var(--list-font-size);
   line-height: var(--list-line-height);
   letter-spacing: var(--list-letter-spacing);
-  .govgr-list__item {
+  .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):not(.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 {
+.ds-list--bullet {
   @apply list-disc list-outside pl-4;
 }
-.govgr-list--number {
+.ds-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 {
+.ds-list--horizontal {
   @apply flex flex-wrap gap-x-6 gap-y-3;
-  .govgr-list__item {
+  .ds-list__item {
     @apply w-full sm:w-auto;
   }
-  &.govgr-list--spaced {
+  &.ds-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 {
+.ds-list {
   @apply md:mb-8 mb-4 text-base-content;
 }
-.govgr-blockquote {
+.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);
-  &.govgr-blockquote--dense, .govgr-dense & {
+  &.ds-blockquote--dense, .ds-dense & {
     @apply mt-3 md:mb-6 p-3 border-l-6;
   } 
 }
-.govgr-body {
+.ds-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 {
+.ds-body-lg {
   font-size: var(--body-lg-font-size);
   line-height: var(--body-lg-line-height);
 }
-.govgr-body-sm {
+.ds-body-sm {
   font-size: var(--body-sm-font-size);
   line-height: var(--body-sm-line-height);
 }
-.govgr-hint {
+.ds-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-lg {
+.ds-hint-lg {
   font-size: var(--hint-lg-font-size);
   line-height: var(--hint-lg-line-height);
 }
-.govgr-hint-sm {
+.ds-hint-sm {
   font-size: var(--hint-sm-font-size);
   line-height: var(--hint-sm-line-height);
 }
-.govgr-hint--break-words {
+.ds-hint--break-words {
   @apply break-words;
 }
 
 
-.govgr-link {
+.ds-link {
   @apply focus:text-link-active underline cursor-pointer;
   color: var(--link-color);
   padding: var(--link-padding);
@@ -264,22 +264,22 @@
     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-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 {
+.ds-link--no-underline {
   @apply no-underline hover:underline;
 }
 
-.govgr-back-link {
+.ds-back-link {
   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;
@@ -296,17 +296,17 @@
   }
 }
 
-.govgr-highlight-links {
-  .govgr-link {
+.ds-highlight-links {
+  .ds-link {
     @apply bg-base-content p-1 text-focus underline m-1;
   }
   &.dark {
-    .govgr-link {
+    .ds-link {
       @apply bg-base-300;
     }
   }
 }
-.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;
@@ -315,54 +315,54 @@
   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) ")";
     font-size: 80%;
   }
-  .govgr-body .govgr-link {
+  .ds-body .ds-link {
     word-wrap: break-word;
   }
-  .govgr-link {
+  .ds-link {
     @apply text-base-content;
   }
 }
 
 /* overrides */
 
-.govgr-link {
-  .govgr-svg-icon {
+.ds-link {
+  .ds-svg-icon {
     fill: var(--color-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);
     }
   }
 }
-button.govgr-link {
-  .govgr-svg-icon {
+button.ds-link {
+  .ds-svg-icon {
     @apply ml-1;
   }
 }
-.govgr-back-link {
-  .govgr-svg-icon--caret {
+.ds-back-link {
+  .ds-svg-icon--caret {
     fill: var(--color-base-content);
     @apply md:w-4 md:h-4 w-3 h-3 inline-block mr-2;
   }
 }
 
-.govgr-code-block__container {
+.ds-code-block__container {
   @apply p-4 bg-base-200 border border-base-300 w-full;
 }
-.govgr-code-block__content {
+.ds-code-block__content {
   @apply text-sm sm:text-base;
 }

package/src/components/warning-text.css

@@ -1,22 +1,22 @@
-.govgr-warning-text {
+.ds-warning-text {
   font-size: var(--warning-text-font-size);
   @apply flex py-4 px-0;
-  .govgr-warning-text__icon {
+  .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__text {
     @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  {
+  &.ds-warning-text--dense, .ds-dense & {
+    .ds-warning-text__icon  {
       @apply mr-4 md:mr-5;
     }
   }