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

package/src/components/layout.css

@@ -1,94 +1,94 @@
 
-.govgr-layout {
+.ds-layout {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
 }
-.govgr-layout--full-height {
+.ds-layout--full-height {
   min-height: 100vh;
 }
-.govgr-container {
+.ds-container {
   @apply max-w-5xl box-border mx-auto px-3 md:px-6 w-full;
   flex: 1 1 0%;
 }
-.govgr-container--full-width {
+.ds-container--full-width {
   @apply max-w-full;
 }
-.govgr-top {
+.ds-top {
   @apply mb-4;
 }
-.govgr-aside {
+.ds-aside {
   @apply flex flex-wrap flex-col md:top-8 h-fit print:order-1;
-  .govgr-back-to-top {
+  .ds-back-to-top {
     @apply flex flex-1 content-end flex-wrap;
-    .govgr-back-to-top-link {
+    .ds-back-to-top-link {
       @apply md:mx-6 md:my-4;
     }
-    &.govgr-back-to-top--persistent {
-      .govgr-back-to-top-content {
+    &.ds-back-to-top--persistent {
+      .ds-back-to-top-content {
         @apply sticky bottom-0 mb-4;
       }
     }
   }
 }
-.govgr-aside--sticky {
+.ds-aside--sticky {
   @apply md:sticky;
-  &.govgr-aside--full-height {
+  &.ds-aside--full-height {
     max-height: calc(100vh - 2rem);
   }
 }
-.govgr-aside--full-height {
+.ds-aside--full-height {
   @apply h-full;
 }
-.govgr-bottom {
+.ds-bottom {
   @apply w-full flex flex-wrap  box-border;
 }
-.govgr-btn-group {
+.ds-btn-group {
   @apply flex flex-wrap items-center gap-4 mb-6 print:items-baseline;
 }
 @media print {
-  /* When govgr-btn-group is empty at print, content at :after limits its height.  */
-  .govgr-btn-group:after {
+  /* When ds-btn-group is empty at print, content at :after limits its height.  */
+  .ds-btn-group:after {
     content: "";
   }
 }
-.govgr-section-break {
+.ds-section-break {
   @apply m-auto px-4 py-2 border-0 w-full bg-transparent;
 }
-.govgr-section-break--visible {
+.ds-section-break--visible {
   @apply border-t border-base-300 border-solid;
 }
-.govgr-section-break--md {
+.ds-section-break--md {
   @apply mb-3 md:mb-5;
 }
-.govgr-section-break--lg {
+.ds-section-break--lg {
   @apply mb-5 md:mb-7;
 }
-.govgr-section-break--xl {
+.ds-section-break--xl {
   @apply  mb-7 md:mb-9;
 }
 
 /* overrides */
 
-.govgr-main {
-  >.govgr-back-to-top--persistent {
+.ds-main {
+  >.ds-back-to-top--persistent {
     @apply fixed bottom-0 right-0 bg-base-200 w-full z-5;
-    .govgr-back-to-top-link {
+    .ds-back-to-top-link {
       @apply mx-6 my-4;
     }
-    .govgr-back-to-top-content {
+    .ds-back-to-top-content {
       @apply max-w-5xl mx-auto my-0;
     }
   }
 }
-.govgr-container {
-  &.govgr-grid {
+.ds-container {
+  &.ds-grid {
     @apply py-4 print:gap-4 print:grid-cols-1;
   }
 }
-.govgr-btn-group {
-  .govgr-btn,
-  .govgr-link {
+.ds-btn-group {
+  .ds-btn,
+  .ds-link {
     @apply mb-0;
   }
 }

package/src/components/loader.css

@@ -1,42 +1,42 @@
-.govgr-loader {
+.ds-loader {
   @apply h-fit w-fit m-auto overflow-hidden print:hidden;
 }
-.govgr-circular-progress {
+.ds-circular-progress {
   animation: rotate 10s linear infinite;
   @apply w-fit h-10;
 }
-.govgr-circular-progress__circle {
+.ds-circular-progress__circle {
   fill: none;
   stroke-miterlimit: 10;
   stroke-width: 42px;
 }
-.govgr-circular-progress__circle--1 {
+.ds-circular-progress__circle--1 {
   stroke: var(--color-secondary);
 }
-.govgr-circular-progress__circle--2 {
+.ds-circular-progress__circle--2 {
   --full-length: 470;
   stroke: var(--color-primary);
   stroke-dasharray: var(--full-length);
   stroke-dashoffset: 0;
   animation: dash 4s ease-in-out 0s forwards infinite;
 }
-.govgr-circular-progress--secondary {
-  .govgr-circular_progress__circle--1 {
+.ds-circular-progress--secondary {
+  .ds-circular_progress__circle--1 {
     @apply opacity-40;
     stroke: var(--color-white);
   }
 
-  .govgr-circular-progress__circle--2 {
+  .ds-circular-progress__circle--2 {
     stroke: var(--color-white);
   }
 }
-.govgr-circular-progress--sm {
+.ds-circular-progress--sm {
   @apply h-5 w-5;
 }
-.govgr-circular-progress--md {
+.ds-circular-progress--md {
   @apply h-10 w-10;
 }
-.govgr-circular-progress--lg {
+.ds-circular-progress--lg {
   @apply h-12 w-12;
 }
 @keyframes dash {

package/src/components/masthead.css

@@ -1,78 +1,78 @@
-.govgr-masthead {
+.ds-masthead {
   @apply print:border-2 print:bg-white print:border-tertiary-300 print:text-base-content;
 }
-.govgr-masthead--primary {
+.ds-masthead--primary {
   @apply bg-tertiary text-white;
-  .govgr-masthead__body {
+  .ds-masthead__body {
     @apply text-white;
   }
 }
-.govgr-masthead--secondary {
+.ds-masthead--secondary {
   @apply border-b border-base-400 !important;
   @apply bg-base-200;
-  .govgr-masthead__body {
+  .ds-masthead__body {
     @apply text-base-content;
   }
 }
-.govgr-masthead__body {
+.ds-masthead__body {
   @apply md:mb-10 mb-6 md:text-lg text-base leading-7 print:text-base-content;
 }
-.govgr-masthead__logo {
+.ds-masthead__logo {
   @apply md:mb-6 mb-4 h-10;
 }
 
 /* overrides */
 
-.govgr-masthead {
-  .govgr-main > *:last-child {
+.ds-masthead {
+  .ds-main > *:last-child {
     @apply mb-0;
   }
-  .govgr-header__content {
+  .ds-header__content {
     @apply flex-wrap;
   }
 }
-.govgr-masthead--primary {
-  .govgr-body {
+.ds-masthead--primary {
+  .ds-body {
     @apply text-white;
   }
-  .govgr-link {
+  .ds-link {
     @apply text-white hover:text-white focus:text-base-content print:text-base-content;
     &:hover {
       text-decoration-thickness: 2px;
     }
   }
-  .govgr-link--no-underline {
+  .ds-link--no-underline {
     @apply no-underline hover:underline;
     &:hover {
       text-decoration-thickness: 2px;
     }
   }
-  .govgr-back-link {
+  .ds-back-link {
     @apply text-white print:text-base-content;
   }
-  .govgr-phase-banner__text {
+  .ds-phase-banner__text {
     @apply text-white print:text-base-content;
   }
 }
-.govgr-masthead--primary,
-.govgr-background-dark {
-  .govgr-btn {
+.ds-masthead--primary,
+.ds-background-dark {
+  .ds-btn {
     @apply border-white hover:border-white border-2 shadow-none;
     &:focus {
       -webkit-box-shadow: 0 0 0 4px var(--color-base-content), 0 0 0 8px var(--color-focus);
       box-shadow: 0 0 0 4px var(--color-base-content), 0 0 0 8px var(--color-focus);
     }
   }
-  .govgr-btn-primary {
+  .ds-btn-primary {
     @apply print:border-0 print:border-b-2 print:border-success print:text-base-content print:bg-white print:shadow-none;
   }
-  .govgr-btn-secondary {
+  .ds-btn-secondary {
     @apply print:border-0 print:border-b-2 print:border-base-500 print:text-base-content print:bg-white print:shadow-none;
   }
-  .govgr-btn-warning {
+  .ds-btn-warning {
     @apply print:border-0 print:border-b-2  print:border-error print:text-base-content print:bg-white print:shadow-none;
   }
-  .govgr-hint {
+  .ds-hint {
     @apply opacity-70 text-white print:text-base-content;
   }
 }

package/src/components/misc.css

@@ -1,10 +1,10 @@
-.govgr-tooltip {
+.ds-tooltip {
   @apply
   /* inline-block */
   relative m-0 p-0 underline w-min cursor-pointer;
   text-decoration-style: dotted;
 
-  .govgr-tooltiptext {
+  .ds-tooltiptext {
     @apply hidden opacity-0 transition-all text-left;
     backdrop-filter: blur(2px);
   }
@@ -20,7 +20,7 @@
       @apply md:left-1/2;
     }
 
-    .govgr-tooltiptext {
+    .ds-tooltiptext {
       @apply block opacity-100 absolute md:w-64 md:-ml-32 top-8 md:left-1/2 px-4 py-2 z-1
       text-base-100 rounded-sm bg-base-content bg-opacity-90 shadow;
 
@@ -29,33 +29,33 @@
 }
 
 @media (max-width: 767.9px) {
-  .govgr-tooltip:hover {
-    .govgr-tooltiptext {
+  .ds-tooltip:hover {
+    .ds-tooltiptext {
       width: calc(100vw - 3.5rem);
     }
   }
 }
 
-.govgr-cookie-banner {
+.ds-cookie-banner {
   @apply bg-base-200;
 }
 
 /* overrides */
 
-div[class*="govgr-grid__col-span"] {
-  >.govgr-card {
+div[class*="ds-grid__col-span"] {
+  >.ds-card {
     @apply mb-0;
   }
 }
 
-.govgr-image-logo {
+.ds-image-logo {
   @apply h-10;
 }
 
-.govgr-image-logo--light {
+.ds-image-logo--light {
   @apply h-10;
 }
 
-.govgr-image-logo--dark {
+.ds-image-logo--dark {
   @apply h-10 hidden;
 }

package/src/components/modal.css

@@ -1,38 +1,38 @@
-.govgr-modal {
+.ds-modal {
   @apply hidden justify-center items-center content-center text-left
   mb-7 text-base-content bg-opacity-50 bg-base-700
   fixed z-50 left-0 top-0 w-full h-full overflow-auto;
 }
 
-.govgr-modal--open {
+.ds-modal--open {
   @apply flex;
 }
-.govgr-modal__body {
+.ds-modal__body {
   @apply w-full max-w-md md:max-w-lg lg:max-w-4xl 
   h-fit md:h-auto overflow-y-auto
   bg-base-100
   border border-solid border-base-500;
   max-height: 95vh;
 }
-.govgr-modal__container {
+.ds-modal__container {
   @apply grid p-10 gap-6 px-6 py-2;
 }
-.govgr-modal__content {
+.ds-modal__content {
   @apply text-base lg:text-xl text-lg;
 }
-.govgr-modal__action {
+.ds-modal__action {
   @apply flex flex-wrap items-center gap-4;
 }
 
-.govgr-modal__action {
-  .govgr-link,
-  .govgr-btn {
+.ds-modal__action {
+  .ds-link,
+  .ds-btn {
     @apply mb-0;
   }
 }
 
-.govgr-modal--dense, .govgr-dense & {
-  .govgr-modal__container {
+.ds-modal--dense, .ds-dense & {
+  .ds-modal__container {
     @apply px-4 py-0 gap-4;
   }
 }

package/src/components/nav.css

@@ -1,68 +1,68 @@
-.govgr-nav {
+.ds-nav {
   @apply relative block w-full h-auto bg-base-100 text-base-content;
-  /* .govgr-nav__list {
+  /* .ds-nav__list {
     @apply px-3;
   } */
-  .govgr-nav__list-item-link,
-  .govgr-nav__list-item-btn {
+  .ds-nav__list-item-link,
+  .ds-nav__list-item-btn {
     @apply md:no-underline !important;
   }
 }
-.govgr-nav--hidden {
+.ds-nav--hidden {
   @apply hidden;
 }
-.govgr-nav--drawer {
+.ds-nav--drawer {
   @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto p-4;
   @apply shadow-thick !important;
-  .govgr-nav__list--horizontal {
+  .ds-nav__list--horizontal {
     @apply px-0;
   }
 }
-.govgr-nav--drawer-smDown {
+.ds-nav--drawer-smDown {
   @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto p-4
   sm:relative sm:block sm:w-full sm:h-auto sm:z-auto sm:top-auto sm:overflow-visible sm:p-0;
   @apply shadow-thick sm:shadow-none !important;
-  .govgr-nav__list--horizontal {
+  .ds-nav__list--horizontal {
     @apply px-0 sm:px-4;
   }
 }
-.govgr-nav--drawer-mdDown {
+.ds-nav--drawer-mdDown {
   @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto p-4
   md:relative md:block md:w-full md:h-auto md:z-auto md:top-auto md:overflow-visible md:p-0;
   @apply shadow-thick md:shadow-none !important;
-  .govgr-nav__list--horizontal {
+  .ds-nav__list--horizontal {
     @apply px-0 md:px-4;
   }
 }
 
-.govgr-nav--drawer-lgDown {
+.ds-nav--drawer-lgDown {
   @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto p-4
   lg:relative lg:block lg:w-full lg:h-auto lg:z-auto lg:top-auto lg:overflow-visible lg:p-0;
   @apply shadow-thick lg:shadow-none !important;
-  .govgr-nav__list--horizontal {
+  .ds-nav__list--horizontal {
     @apply px-0 lg:px-4;
   }
 }
-.govgr-nav--border {
+.ds-nav--border {
   @apply sm:border-b sm:border-base-400;
 }
-.govgr-nav__list {
+.ds-nav__list {
   @apply w-full m-0 max-w-5xl static flex flex-wrap flex-col;
 }
-.govgr-nav__list--horizontal {
+.ds-nav__list--horizontal {
   @apply sm:mx-auto sm:gap-x-6 sm:py-1 px-4 sm:flex-row;
-  .govgr-nav__list-item {
+  .ds-nav__list-item {
     @apply sm:gap-x-6;
   }
 }
-.govgr-nav__list--full-width {
+.ds-nav__list--full-width {
   @apply max-w-none;
 }
-.govgr-nav__list-item {
+.ds-nav__list-item {
   @apply text-base-content font-normal py-1;
 }
-.govgr-nav__list-item-link,
-.govgr-nav__list-item-btn {
+.ds-nav__list-item-link,
+.ds-nav__list-item-btn {
   @apply text-left;
   &:focus {
     @apply bg-focus text-base-content outline-none;
@@ -72,75 +72,75 @@
     @apply underline !important;
   }
 }
-.govgr-nav__list-item-link--active,
-.govgr-nav__list-item-btn--active {
+.ds-nav__list-item-link--active,
+.ds-nav__list-item-btn--active {
   @apply text-base-content !important;
   @apply font-semibold;
 }
 
-.govgr-nav-menu {
+.ds-nav-menu {
   @apply flex w-full;
 }
-.govgr-nav-menu--hidden {
+.ds-nav-menu--hidden {
   @apply hidden;
 }
-.govgr-nav-menu--horizontal {
+.ds-nav-menu--horizontal {
   @apply sm:order-2 sm:left-0 sm:right-0 sm:relative sm:mt-3 sm:bg-base-100;
-  .govgr-nav-menu__content-list {
+  .ds-nav-menu__content-list {
     @apply sm:grid-rows-1 sm:grid-cols-3;
   }
-  .govgr-nav-menu__title {
+  .ds-nav-menu__title {
     @apply hidden sm:block;
-    + .govgr-nav-menu__content > .govgr-nav-menu__content-list {
+    + .ds-nav-menu__content > .ds-nav-menu__content-list {
       @apply sm:grid-cols-2;
     }
   }
 }
-.govgr-nav-menu--vertical {
-  .govgr-nav-menu__title {
+.ds-nav-menu--vertical {
+  .ds-nav-menu__title {
     @apply hidden;
   }
-  .govgr-nav-menu__content-list {
+  .ds-nav-menu__content-list {
     @apply py-2 sm:py-4;
   }
 }
-.govgr-nav-menu__content-list {
+.ds-nav-menu__content-list {
   @apply p-0 grid grid-flow-row grid-cols-1;
 }
-.govgr-nav-menu__content-list-item {
+.ds-nav-menu__content-list-item {
   @apply relative pt-0 pb-5 pr-3 pl-0 box-border;
 }
 
 /* overrides */
 
-.govgr-nav {
-  .govgr-close-btn {
+.ds-nav {
+  .ds-close-btn {
     @apply mb-4;
   }
-  .govgr-heading-md {
+  .ds-heading-md {
     @apply mb-2 md:mb-0;
   }
 }
-/* .govgr-nav__list,
-.govgr-grid {
-  .govgr-drawer__heading {
+/* .ds-nav__list,
+.ds-grid {
+  .ds-drawer__heading {
     @apply flex-row-reverse;
   }
 } */
-.govgr-nav__list-item-link,
-.govgr-nav__list-item-btn {
-  > .govgr-svg-icon {
+.ds-nav__list-item-link,
+.ds-nav__list-item-btn {
+  > .ds-svg-icon {
     @apply ml-1;
   }
 }
-.govgr-nav__list-item-link--active,
-.govgr-nav__list-item-btn--active {
-  > .govgr-svg-icon {
+.ds-nav__list-item-link--active,
+.ds-nav__list-item-btn--active {
+  > .ds-svg-icon {
     fill: var(--color-base-content) !important;
   }
 }
-.govgr-nav-menu--horizontal {
-  .govgr-grid {
+.ds-nav-menu--horizontal {
+  .ds-grid {
     @apply gap-y-2;
   }
 }

package/src/components/notification-banner.css

@@ -1,42 +1,42 @@
-.govgr-notification-banner {
+.ds-notification-banner {
   @apply border-5 mb-6 md:mb-8 font-normal print:bg-white;
-  &.govgr-notification-banner--dense, .govgr-dense & {
+  &.ds-notification-banner--dense, .ds-dense & {
     @apply border-4 mb-4 md:mb-5;
-    .govgr-notification-banner__title {
+    .ds-notification-banner__title {
       @apply px-2 sm:px-3 pb-1;
     }
-    .govgr-notification-banner__content {
+    .ds-notification-banner__content {
       @apply p-3 md:p-4;
     }
   }
 }
-.govgr-notification-banner--info {
+.ds-notification-banner--info {
   @apply bg-info border-info;
 }
-.govgr-notification-banner--success {
+.ds-notification-banner--success {
   @apply bg-success border-success;
-  .govgr-notification-banner__link {
+  .ds-notification-banner__link {
     &:link:not(:focus) {
       @apply text-success;
     }
   }
 }
-.govgr-notification-banner--error {
+.ds-notification-banner--error {
   @apply bg-error border-error;
-  .govgr-notification-banner__link {
+  .ds-notification-banner__link {
     &:link:not(:focus) {
       @apply text-error;
     }
   }
 }
-.govgr-notification-banner__header {
+.ds-notification-banner__header {
   @apply text-white p-0 m-0 text-base md:text-lg
   print:border-b print:border-base-400 print:text-base-content print:pt-2;
 }
-.govgr-notification-banner__title {
+.ds-notification-banner__title {
   @apply border-b border-transparent pt-1 px-4 sm:px-5 pb-2 font-bold;
 }
-.govgr-notification-banner__content {
+.ds-notification-banner__content {
   @apply bg-base-100 text-base-content p-4 md:p-5;
   & > * {
     @apply box-border max-w-xl;
@@ -45,7 +45,7 @@
     @apply mb-0;
   }
 }
-.govgr-notification-banner__link {
+.ds-notification-banner__link {
   @apply underline text-base md:text-lg;
   &:link {
     @apply text-link;
@@ -62,8 +62,8 @@
     outline: none;
   }
 }
-.govgr-notification-banner__heading {
-  .govgr-notification-banner__link {
+.ds-notification-banner__heading {
+  .ds-notification-banner__link {
     font-size: inherit;
   }
 }