@digigov/css 1.2.1-496927f3 → 1.3.0-01ea6f24

package/src/components/button.css

@@ -1,7 +1,7 @@
-.govgr-btn,
-.govgr-btn[type=submit],
-.govgr-btn[type=button],
-.govgr-btn[type=reset] {
+.ds-btn,
+.ds-btn[type=submit],
+.ds-btn[type=button],
+.ds-btn[type=reset] {
   @apply no-underline font-medium cursor-pointer 
   m-0 mb-8 w-max min-h-10 md:min-h-12 
   flex gap-x-3 items-center;
@@ -18,8 +18,8 @@
   &:focus-within {
     @apply outline-none;
   }
-  &.govgr-btn--dense,
-  .govgr-dense & {
+  &.ds-btn--dense,
+  .ds-dense & {
     --btn-padding: 0.375rem 0.75rem;
     @apply min-h-8;
     &:focus {
@@ -30,10 +30,10 @@
     }
   }
 }
-.govgr-btn-primary,
-.govgr-btn-primary[type="submit"],
-.govgr-btn-primary[type="button"],
-.govgr-btn-primary[type="reset"] {
+.ds-btn-primary,
+.ds-btn-primary[type="submit"],
+.ds-btn-primary[type="button"],
+.ds-btn-primary[type="reset"] {
   -webkit-box-shadow: 0 2px 0 var(--color-base-content);
   box-shadow: 0 2px 0 var(--color-base-content);
   background-color: var(--btn-primary-background-color);
@@ -48,17 +48,17 @@
     background-color: var(--btn-primary-background-color-active);
   }
 }
-.govgr-btn-cta {
+.ds-btn-cta {
   @apply py-4 print:pr-2;
   font-size: var(--btn-cta-font-size);
-  &.govgr-btn--dense, .govgr-dense & {
+  &.ds-btn--dense, .ds-dense & {
     @apply py-3 px-4;
   }
 }
-.govgr-btn-secondary,
-.govgr-btn-secondary[type="submit"],
-.govgr-btn-secondary[type="button"],
-.govgr-btn-secondary[type="reset"] {
+.ds-btn-secondary,
+.ds-btn-secondary[type="submit"],
+.ds-btn-secondary[type="button"],
+.ds-btn-secondary[type="reset"] {
   -webkit-box-shadow: 0 2px 0 var(--color-base-500);
   box-shadow: 0 2px 0 var(--color-base-500);
   @apply hover:no-underline
@@ -73,10 +73,10 @@
     background-color: var(--btn-secondary-background-color-active);
   }
 }
-.govgr-btn-warning,
-.govgr-btn-warning[type="submit"],
-.govgr-btn-warning[type="button"],
-.govgr-btn-warning[type="reset"] {
+.ds-btn-warning,
+.ds-btn-warning[type="submit"],
+.ds-btn-warning[type="button"],
+.ds-btn-warning[type="reset"] {
   -webkit-box-shadow: 0 2px 0 var(--color-base-content);
   box-shadow: 0 2px 0 var(--color-base-content);
   @apply hover:no-underline
@@ -92,85 +92,85 @@
     background-color: var(--btn-warning-background-color-active);
   }
 }
-.govgr-btn--disabled {
+.ds-btn--disabled {
   @apply opacity-50 hover:bg-opacity-50
   print:text-base-400 print:border-opacity-50;
   @apply cursor-not-allowed !important;
 }
-.govgr-svg-icon--caret {
+.ds-svg-icon--caret {
   fill: var(--color-base-content);
   @apply w-4 h-4 inline-block;
 }
-.govgr-close-btn {
+.ds-close-btn {
   @apply flex flex-nowrap text-right w-max float-right items-center;
 }
 
 /* overrides */
 
-.govgr-btn {
-  .govgr-svg-icon {
+.ds-btn {
+  .ds-svg-icon {
     @apply h-4 w-4 inline transition-all;
   }
 }
-.govgr-btn-primary,
-.govgr-btn-warning {
-  .govgr-svg-icon {
+.ds-btn-primary,
+.ds-btn-warning {
+  .ds-svg-icon {
     fill: var(--color-white);
   }
-  .govgr-svg-icon--more-vert {
+  .ds-svg-icon--more-vert {
     @apply h-6 w-6 md:h-8 md:w-8;
   }
 }
-.govgr-btn-cta {
-  .govgr-svg-icon--chevron {
+.ds-btn-cta {
+  .ds-svg-icon--chevron {
     @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
   }
   &:hover {
-    .govgr-svg-icon--chevron {
+    .ds-svg-icon--chevron {
       @apply ml-4 mr-0;
     }
   }
 }
-.govgr-btn-secondary {
-  .govgr-svg-icon {
+.ds-btn-secondary {
+  .ds-svg-icon {
     fill: var(--color-base-content);
   }
-  .govgr-svg-icon--more-vert {
+  .ds-svg-icon--more-vert {
     @apply h-6 w-6;
   }
 }
-.govgr-close-btn {
-  .govgr-svg-icon--close {
+.ds-close-btn {
+  .ds-svg-icon--close {
     @apply w-5 h-5 float-right;
     @apply ml-1 !important;
     fill: var(--color-link);
   }
   &:focus {
-    .govgr-svg-icon--close {
+    .ds-svg-icon--close {
       fill: var(--color-link-active);
     }
   }
   &:hover {
-    .govgr-svg-icon--close {
+    .ds-svg-icon--close {
       fill: var(--color-link-hover);
     }
   }
 }
 @media print {
-  .govgr-btn {
-    .govgr-circular-progress--secondary {
-      .govgr-circular-progress__circle--1,
-      .govgr-circular-progress__circle--2 {
+  .ds-btn {
+    .ds-circular-progress--secondary {
+      .ds-circular-progress__circle--1,
+      .ds-circular-progress__circle--2 {
         stroke: var(--color-base-content);
       }
     }
   }
 }
 @media print {
-  .govgr-btn-primary,
-  .govgr-btn-warning,
-  .govgr-btn-secondary {
-    .govgr-svg-icon {
+  .ds-btn-primary,
+  .ds-btn-warning,
+  .ds-btn-secondary {
+    .ds-svg-icon {
       fill: var(--color-base-content);
     }
   }

package/src/components/card.css

@@ -1,35 +1,35 @@
-.govgr-card {
+.ds-card {
   @apply mb-7 text-base-content;
-  &.govgr-card--dense, .gov-dense & {
+  &.ds-card--dense, .gov-dense & {
     @apply mb-5;
-    .govgr-card__body {
+    .ds-card__body {
       @apply gap-2 md:gap-3;
     }
   }
 }
-.govgr-card--border {
+.ds-card--border {
   @apply border-2 border-base-content p-6;
-  &.govgr-card--border-light {
+  &.ds-card--border-light {
     @apply border;
   }
-  &.govgr-card--dense, .govgr-dense & {
+  &.ds-card--dense, .ds-dense & {
     @apply p-4 pt-3;
   }
 }
-.govgr-card--border-top {
+.ds-card--border-top {
   @apply border-t border-base-300 pt-4;
-  &.govgr-card--border-dark {
+  &.ds-card--border-dark {
     @apply border-t-3;
   }
-  &.govgr-card--dense, .govgr-dense & {
+  &.ds-card--dense, .ds-dense & {
     @apply p-3;
   }
 }
-.govgr-card--divider {
+.ds-card--divider {
   @apply border-b border-base-300 pb-4 mb-4;
 }
-.govgr-card--cta {
-  .govgr-card__body {
+.ds-card--cta {
+  .ds-card__body {
     @apply pr-8 relative;
     &:after {
       content: "";
@@ -44,45 +44,45 @@
     }
   }
 
-  .govgr-card__heading {
+  .ds-card__heading {
     @apply md:text-xl text-lg tracking-wide;
     @apply leading-8 !important;
   }
 }
-.govgr-card--border-light {
+.ds-card--border-light {
   @apply border-base-300;
 }
-.govgr-card--border-dark {
+.ds-card--border-dark {
   @apply border-base-content;
 }
-.govgr-card__body {
+.ds-card__body {
   @apply flex flex-col gap-3 md:gap-4 h-full;
 }
-.govgr-card__heading {
+.ds-card__heading {
   word-break: break-word;
   @apply md:text-2xl text-xl font-bold;
 }
-.govgr-card__content {
+.ds-card__content {
   word-break: break-word;
   @apply text-base;
   font-size: var(--card__text-font-size);
   line-height: var(--card__text-line-height);
 }
-.govgr-card__action {
+.ds-card__action {
   @apply flex flex-wrap items-center gap-y-4 mt-auto;
 }
 @media print {
-  /* When govgr-card__action is empty at print, content at :after limits its height.  */
-  .govgr-card__action:after {
+  /* When ds-card__action is empty at print, content at :after limits its height.  */
+  .ds-card__action:after {
     content: "";
   }
 }
 
 /* overrides */
 
-.govgr-card--cta {
-  .govgr-card__heading {
-    .govgr-link {
+.ds-card--cta {
+  .ds-card__heading {
+    .ds-link {
       /* Clickable area will be at all the card with 'after' */
       &::after {
         content: "";
@@ -91,9 +91,9 @@
     }
   }
 }
-.govgr-card__action {
-  .govgr-link,
-  .govgr-btn {
+.ds-card__action {
+  .ds-link,
+  .ds-btn {
     @apply mb-0;
   }
 }

package/src/components/checkboxes.css

@@ -1,13 +1,13 @@
-.govgr-checkboxes {
-  &.govgr-checkboxes--dense,
-  .govgr-dense & {
-    .govgr-checkboxes__item {
+.ds-checkboxes {
+  &.ds-checkboxes--dense,
+  .ds-dense & {
+    .ds-checkboxes__item {
       @apply mb-2 pl-10 min-h-8;
       &:last-child {
         @apply mb-0;
       }
     }
-    .govgr-checkboxes__input {
+    .ds-checkboxes__input {
       @apply w-8 h-8 left-0.5 md:top-0.5;
       &:before {
         @apply w-8 h-8;
@@ -25,24 +25,24 @@
         }
       }
     }
-    .govgr-field {
+    .ds-field {
       @apply mb-4 md:mb-6;
     }
   }
 }
-.govgr-checkboxes--horizontal {
+.ds-checkboxes--horizontal {
   @apply inline-flex flex-wrap items-baseline gap-4 md:gap-6;
 }
-.govgr-checkboxes__item {
+.ds-checkboxes__item {
   @apply block relative mb-4 pl-12 min-h-10;
   &:last-child {
     @apply mb-0;
   }
 }
-.govgr-checkboxes__label {
+.ds-checkboxes__label {
   @apply inline-block py-1 px-2 cursor-pointer;
 }
-.govgr-checkboxes__input {
+.ds-checkboxes__input {
   @apply absolute z-1 left-0.5 -top-0.5 m-0 opacity-100
   w-10 h-10 cursor-pointer;
   &:before {
@@ -78,21 +78,21 @@
     }
   }
 }
-.govgr-checkboxes__conditional {
+.ds-checkboxes__conditional {
   @apply border-l-4 border-base-500 ml-4 pl-6;
 }
 
 /* overrides */
 
-.govgr-checkboxes--horizontal {
-  .govgr-choice-divider-text {
+.ds-checkboxes--horizontal {
+  .ds-choice-divider-text {
     @apply min-w-max mx-2;
   }
 }
-.govgr-checkboxes {
-  &.govgr-checkboxes--dense,
-  .govgr-dense & {
-    .govgr-field {
+.ds-checkboxes {
+  &.ds-checkboxes--dense,
+  .ds-dense & {
+    .ds-field {
       @apply mb-4 md:mb-6;
     }
   }

package/src/components/chip.css

@@ -1,15 +1,15 @@
-.govgr-chips {
+.ds-chips {
   @apply flex flex-wrap list-none gap-2;
-  .govgr-chip:last-child .govgr-chip__content {
+  .ds-chip:last-child .ds-chip__content {
     @apply mr-0;
   }
 }
-.govgr-chips--horizontal {
+.ds-chips--horizontal {
   @apply md:flex md:flex-row md:flex-wrap;
 }
-.govgr-chip {
+.ds-chip {
   @apply list-none;
-  .govgr-chip__content {
+  .ds-chip__content {
     @apply bg-base-100 text-base-content lg:text-base text-sm border-2 border-base-content 
     inline-flex items-center px-2 py-1 rounded shadow;
     &[role="button"] {
@@ -25,41 +25,41 @@
     }
   }
   &:last-child {
-    .govgr-chip__content {
+    .ds-chip__content {
       @apply mr-0;
     }
   }
 }
-.govgr-chip--deletable {
-  .govgr-chip__content {
+.ds-chip--deletable {
+  .ds-chip__content {
     &:hover {
       @apply shadow-lg transition;
     }
   }
 }
-.govgr-chip__key-value {
+.ds-chip__key-value {
   @apply font-bold mr-2;
 }
 
 /* overrides */
 
-.govgr-chip {
-  .govgr-chip__content {
-    .govgr-svg-icon--close {
+.ds-chip {
+  .ds-chip__content {
+    .ds-svg-icon--close {
       @apply w-4 h-4 ml-3;
     }
     &[role="button"] {
       &:hover {
-        .govgr-svg-icon--close {
+        .ds-svg-icon--close {
           fill: var(--color-base-content-invert);
         }
       }
     }
   }
 }
-.govgr-chip--deletable {
-  .govgr-chip__content {
-    .govgr-svg-icon--close {
+.ds-chip--deletable {
+  .ds-chip__content {
+    .ds-svg-icon--close {
       &:hover {
         @apply cursor-pointer;
       }

package/src/components/copy-to-clipboard.css

@@ -1,9 +1,9 @@
-.govgr-copy-to-clipboard {
+.ds-copy-to-clipboard {
   @apply flex w-fit;
 }
-.govgr-copy-to-clipboard__tooltip {
+.ds-copy-to-clipboard__tooltip {
   @apply relative;
-  .govgr-copy-to-clipboard__message {
+  .ds-copy-to-clipboard__message {
     @apply bg-success py-4 px-6 absolute mt-4 text-center z-50 w-fit md:w-max;
     &::before {
       content: "";
@@ -12,8 +12,8 @@
       transform: rotate(45deg);
     }
   }
-  &.govgr-copy-to-clipboard__tooltip--dense, .govgr-dense & {
-    .govgr-copy-to-clipboard__message {
+  &.ds-copy-to-clipboard__tooltip--dense, .ds-dense & {
+    .ds-copy-to-clipboard__message {
       @apply py-2 px-4;
     }
     &::before {
@@ -21,8 +21,8 @@
     }
   }
 }
-.govgr-copy-to-clipboard__tooltip--right {
-  .govgr-copy-to-clipboard__message {
+.ds-copy-to-clipboard__tooltip--right {
+  .ds-copy-to-clipboard__message {
     @apply right-0;
     &::before {
       content: "";
@@ -30,8 +30,8 @@
     }
   }
 }
-.govgr-copy-to-clipboard__tooltip--left {
-  .govgr-copy-to-clipboard__message {
+.ds-copy-to-clipboard__tooltip--left {
+  .ds-copy-to-clipboard__message {
     @apply left-0;
     &::before {
       content: "";
@@ -39,27 +39,27 @@
     }
   }
 }
-.govgr-copy-to-clipboard__banner {
-  .govgr-copy-to-clipboard__message {
+.ds-copy-to-clipboard__banner {
+  .ds-copy-to-clipboard__message {
     @apply bg-success bg-opacity-95 p-2 w-full fixed top-0 right-0 text-center;
   }
 }
 
-.govgr-copy-to-clipboard--hidden {
+.ds-copy-to-clipboard--hidden {
   @apply invisible w-0 h-0;
 }
 
 /* overrides */
 
-.govgr-copy-to-clipboard__tooltip {
-  & > .govgr-btn {
+.ds-copy-to-clipboard__tooltip {
+  & > .ds-btn {
     @apply m-0;
   }
 }
-.govgr-copy-to-clipboard__tooltip,
-.govgr-copy-to-clipboard__banner {
-  .govgr-copy-to-clipboard__message {
-    & > .govgr-body {
+.ds-copy-to-clipboard__tooltip,
+.ds-copy-to-clipboard__banner {
+  .ds-copy-to-clipboard__message {
+    & > .ds-body {
       @apply text-white;
     }
   }

package/src/components/details.css

@@ -1,10 +1,10 @@
-.govgr-details {
+.ds-details {
   @apply md:text-lg;
   @apply md:mb-8 mb-4;
   font-size: var(--details-font-size);
   line-height: var(--details-line-height);
 }
-.govgr-details__summary {
+.ds-details__summary {
   @apply mb-0 underline cursor-pointer w-fit;
   &:hover {
     text-decoration-thickness: 2px;
@@ -18,12 +18,12 @@
     @apply outline-none;
   }
 }
-.govgr-details__summary--lg {
+.ds-details__summary--lg {
   @apply font-semibold;
   font-size: var(--details__summary--lg-font-size);
   line-height: var(--details__summary--lg-line-height);
 }
-.govgr-details__content {
+.ds-details__content {
   @apply border-l-2 border-base-500 py-2 px-4 mt-4;
   >*:last-child {
     @apply mb-0;

package/src/components/dev-theme.css

@@ -4,7 +4,7 @@
 /*
 Here we can experiment with dark theme. 
 Storybook does not need restart when writing here. 
-Final styling should then go to themes/govgr-dark/overrides/index.css
+Final styling should then go to themes/ds-dark/overrides/index.css
 */
   
 }

package/src/components/drawer.css

@@ -1,80 +1,80 @@
-.govgr-drawer {
+.ds-drawer {
   @apply border border-base-300 bg-base-100 p-4
   h-full max-h-screen min-h-screen overflow-y-scroll w-4/5 max-w-md flex flex-col
   fixed top-0 bottom-0 z-40;
   @apply shadow-thick !important;
 }
-.govgr-drawer--relative-sm {
+.ds-drawer--relative-sm {
   @apply sm:relative sm:w-full max-h-full shadow-thick sm:shadow-none !important;
 }
-.govgr-drawer--relative-md {
+.ds-drawer--relative-md {
   @apply md:relative md:w-full max-h-full shadow-thick md:shadow-none !important;
 }
-.govgr-drawer--relative-lg {
+.ds-drawer--relative-lg {
   @apply lg:relative lg:w-full max-h-full shadow-thick lg:shadow-none !important;
 }
-.govgr-drawer--right {
+.ds-drawer--right {
   @apply right-0;
 }
-.govgr-drawer--left {
+.ds-drawer--left {
   @apply left-0;
 }
-.govgr-drawer--bg-secondary {
+.ds-drawer--bg-secondary {
   @apply bg-base-200 border-0;
   @apply shadow-xl !important;
 }
-.govgr-drawer--closed {
+.ds-drawer--closed {
   @apply hidden;
-  &.govgr-drawer--relative-sm {
+  &.ds-drawer--relative-sm {
     @apply hidden sm:flex;
   }
-  &.govgr-drawer--relative-md {
+  &.ds-drawer--relative-md {
     @apply hidden md:flex;
   }
-  &.govgr-drawer--relative-lg {
+  &.ds-drawer--relative-lg {
     @apply hidden lg:flex;
   }
 }
-.govgr-drawer__heading {
+.ds-drawer__heading {
   @apply p-0 mb-4 flex justify-between align-baseline;
-  .govgr--drawer__close-icon {
+  .ds--drawer__close-icon {
     @apply m-0;
   }
 }
 
 /* overrides */
 
-.govgr-drawer {
-  > .govgr-container {
+.ds-drawer {
+  > .ds-container {
     @apply p-0;
   }
 }
-.govgr-drawer__heading {
-  .govgr-heading-xs,
-  .govgr-heading-sm,
-  .govgr-heading-md,
-  .govgr-heading-lg,
-  .govgr-heading-xl {
+.ds-drawer__heading {
+  .ds-heading-xs,
+  .ds-heading-sm,
+  .ds-heading-md,
+  .ds-heading-lg,
+  .ds-heading-xl {
     @apply m-0;
   }
 }
-.govgr-drawer--relative-sm {
-  .govgr-drawer__heading {
-    >.govgr-close-btn {
+.ds-drawer--relative-sm {
+  .ds-drawer__heading {
+    >.ds-close-btn {
       @apply sm:hidden;
     }
   }
 }
-.govgr-drawer--relative-md {
-  .govgr-drawer__heading {
-    >.govgr-close-btn {
+.ds-drawer--relative-md {
+  .ds-drawer__heading {
+    >.ds-close-btn {
       @apply md:hidden;
     }
   }
 }
-.govgr-drawer--relative-lg {
-  .govgr-drawer__heading {
-    >.govgr-close-btn {
+.ds-drawer--relative-lg {
+  .ds-drawer__heading {
+    >.ds-close-btn {
       @apply lg:hidden;
     }
   }