@digigov/css 2.0.0-0edebf87 → 2.0.0-2445d5cb

package/src/components/form.css

@@ -4,7 +4,7 @@
   @apply mb-8 md:mb-10;
 
   &.ds-field--error {
-    @apply border-l-5 border-error px-0 pl-4;
+    @apply border-l-5 border-error-text px-0 pl-4;
   }
   .ds-fieldset {
     > .ds-field:last-child,
@@ -32,6 +32,24 @@
 }
 .ds-input {
   border-radius: var(--input-border-radius);
+  &.ds-input--width-20-char {
+    max-width: 41ex;
+  }
+  &.ds-input--width-10-char {
+    max-width: 23ex;
+  }
+  &.ds-input--width-5-char {
+    max-width: 10.8ex;
+  }
+  &.ds-input--width-4-char {
+    max-width: 9ex;
+  }
+  &.ds-input--width-3-char {
+    max-width: 7.2ex;
+  }
+  &.ds-input--width-2-char {
+    max-width: 5.4ex;
+  }
 }
 .ds-textarea {
   border-radius: var(--textarea-border-radius);
@@ -47,6 +65,7 @@
     box-shadow: inset 0 0 0 2px;
   }
 }
+/* stylelint-disable-next-line digigov/nest-related-rules */
 .ds-input--dense,
 .ds-dense .ds-input,
 .ds-textarea--dense,
@@ -82,29 +101,12 @@
   @apply flex flex-wrap gap-y-2;
 }
 .ds-select {
-  border-radius: var(--select-border-radius);
   @apply w-auto max-w-full;
+  border-radius: var(--select-border-radius);
 }
 .ds-select__option {
 }
-.ds-input--width-20-char {
-  max-width: 41ex;
-}
-.ds-input--width-10-char {
-  max-width: 23ex;
-}
-.ds-input--width-5-char {
-  max-width: 10.8ex;
-}
-.ds-input--width-4-char {
-  max-width: 9ex;
-}
-.ds-input--width-3-char {
-  max-width: 7.2ex;
-}
-.ds-input--width-2-char {
-  max-width: 5.4ex;
-}
+
 .ds-single-character-input__item {
   @apply text-center px-0 mr-3;
   max-width: 4.4ex;
@@ -143,14 +145,15 @@
 
 /* error handling  */
 .ds-error-message {
-  @apply md:text-lg text-base block mb-4 text-error font-semibold;
+  @apply md:text-lg text-base block mb-4 text-error-text font-semibold;
 }
+/* stylelint-disable-next-line digigov/nest-related-rules */
 .ds-input--error {
-  @apply border-error border-3;
+  @apply border-error-text border-3;
   &:focus {
     outline: 4px solid var(--color-focus);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px var(--color-error);
+    box-shadow: inset 0 0 0 1px var(--color-error-text);
   }
 }
 

package/src/components/hidden.css

@@ -1,33 +1,33 @@
 .ds-hidden {
-  @apply hidden;
+  @apply hidden !important;
 }
 .ds-hidden-xs-up {
-  @apply xs:hidden;
+  @apply xs:hidden !important;
 }
 .ds-hidden-sm-up {
-  @apply sm:hidden;
+  @apply sm:hidden !important;
 }
 .ds-hidden-md-up {
-  @apply md:hidden;
+  @apply md:hidden !important;
 }
 .ds-hidden-lg-up {
-  @apply lg:hidden;
+  @apply lg:hidden !important;
 }
 .ds-hidden-xl-up {
-  @apply xl:hidden;
+  @apply xl:hidden !important;
 }
 .ds-hidden-xs {
-  @apply xsOnly:hidden;
+  @apply xsOnly:hidden !important;
 }
 .ds-hidden-sm {
-  @apply smOnly:hidden;
+  @apply smOnly:hidden !important;
 }
 .ds-hidden-md {
-  @apply mdOnly:hidden;
+  @apply mdOnly:hidden !important;
 }
 .ds-hidden-lg {
-  @apply lgOnly:hidden;
+  @apply lgOnly:hidden !important;
 }
 .ds-hidden-xl {
-  @apply xlOnly:hidden;
+  @apply xlOnly:hidden !important;
 }

package/src/components/index.css

@@ -7,6 +7,7 @@
 @import './breadcrumbs.css';
 @import './button.css';
 @import './card.css';
+@import './code.css';
 @import './form.css';
 @import './checkboxes.css';
 @import './chip.css';

package/src/components/nav.css

@@ -38,10 +38,6 @@
   &.ds-nav--border {
     @apply sm:border-b sm:border-base-400;
   }
-
-  /* .ds-nav__list {
-    @apply px-3;
-  } */
   .ds-nav__list-item-link,
   .ds-nav__list-item-btn {
     @apply md:no-underline !important;
@@ -81,6 +77,13 @@
   @apply font-semibold;
 }
 
+.ds-nav__list-item-badge {
+  @apply inline-flex w-fit items-center justify-center p-1 ml-2
+  bg-error text-white text-xs md:text-xs font-semibold no-underline rounded-3xl
+  relative bottom-1;
+  min-width: 24px;
+  min-height: 24px;
+}
 .ds-nav-menu {
   @apply flex w-full;
   &.ds-nav-menu--hidden {

package/src/components/summary-list.css

@@ -3,19 +3,23 @@
   sm:table sm:w-full sm:table-fixed;
   font-size: var(--summary-list-font-size);
   &.ds-summary-list--no-border {
+    >.ds-summary-list__row:last-child {
+      @apply border-b-0 pb-0 mb-0;
+    }
     .ds-summary-list__key,
     .ds-summary-list__value,
     .ds-summary-list__actions {
       @apply sm:border-0 pb-2;
     }
   }
-}
-
-
-.ds-summary-list--no-last-border {
-  .ds-summary-list__row:last-child {
-    .ds-summary-list__key, .ds-summary-list__value, .ds-summary-list__actions {
-      @apply border-b-0;
+  &.ds-summary-list--no-last-border {
+    >.ds-summary-list__row:last-child {
+      @apply border-b-0 pb-0 mb-0;
+      .ds-summary-list__key,
+      .ds-summary-list__value,
+      .ds-summary-list__actions {
+        @apply border-b-0;
+      }
     }
   }
 }

package/src/components/svg-icons.css

@@ -23,7 +23,7 @@
     fill: var(--color-warning) !important;
   }
   &.ds-svg-icon--error {
-    fill: var(--color-error) !important;
+    fill: var(--color-error-text) !important;
   }
   &.ds-svg-icon--focus {
     fill: var(--color-focus) !important;

package/src/components/tabs.css

@@ -4,7 +4,7 @@
   .ds-dense & {
     .ds-tabs__list {
       .ds-tabs__list-item {
-        @apply px-3 py-1;
+        @apply md:px-3 md:py-1;
         &.ds-tabs__list-item-selected {
           @apply md:px-4 md:pb-3 md:pt-2;
         }
@@ -14,70 +14,52 @@
       @apply pb-2 pt-3;
     }
   }
-
-  &.ds-tabs--vertical {
-    .ds-tabs__panel {
-      @apply min-h-full pt-4 pl-6;
-    }
-    .ds-tabs__list {
-      .ds-tabs__list-item {
-        @apply w-full rounded-none mb-1 md:bg-base-200 border-base-200;
-        width: calc(100% - 0.25rem);
-        &.ds-tabs__list-item-selected {
-          @apply md:border-b md:border-r-0 mb-1 mt-0 px-4 py-2;
-
-          /* margin-right: -1px; */
-          width: calc(100% + 1px);
-
-          /* margin-top: 0px; */
-        }
-      }
+}
+.ds-tabs__title {
+  @apply block md:hidden;
+}
+.ds-tabs__list {
+  @apply list-none m-0 p-0 
+  md:flex md:flex-nowrap md:w-full md:items-start;
+  &::after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+.ds-tabs__list-item {
+  @apply relative px-4 py-1 md:py-2 m-0 shadow-none cursor-pointer text-link
+  md:float-left md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2 md:text-base-content
+  print:hidden;
+  word-break: break-word;
+  &.ds-tabs__list-item-selected {
+    @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:py-4 md:-mt-1;
+    margin-bottom: -1px;
+    &:hover {
+      text-decoration-thickness: 2px;
     }
   }
-  .ds-tabs__title {
-    @apply block md:hidden lg:hidden;
+}
+.ds-tabs__tab {
+  @apply text-lg no-underline hover:underline;
+  &::before {
+    @apply absolute top-0 left-0 text-base-content;
+    @apply md:content-[''] !important;
+    content: '_';
   }
-  .ds-tabs__list {
-    @apply list-none m-0 p-0;
-    &::after {
-      content: '';
-      display: block;
-      clear: both;
-    }
-    .ds-tabs__list-item {
-      @apply relative px-4 py-2 m-0 shadow-none cursor-pointer;
-      @apply md:float-left md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2;
-      @apply print:hidden;
-      &.ds-tabs__list-item-selected {
-        @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:py-4 md:-mt-1;
-        margin-bottom: -1px;
-        &:hover {
-          text-decoration-thickness: 2px;
-        }
-      }
-    }
-    .ds-tabs__tab {
-      @apply text-lg no-underline hover:underline focus:underline;
-      text-underline-offset: 0.1em;
-      &::after {
-        @apply absolute top-0 right-0 bottom-0 left-0;
-        content: '';
-      }
-      &:focus {
-        background-color: var(--color-focus);
-        outline: 3px solid transparent;
-        box-shadow: inset 0 0 0 3px var(--color-focus);
-        outline-offset: 0;
-        text-decoration-thickness: 0.2rem;
-      }
-    }
+  &:focus {
+    @apply bg-focus underline text-link-active;
+    outline: 3px solid transparent;
+    box-shadow: inset 0 0 0 3px var(--color-focus);
+    outline-offset: 0;
+    text-decoration-thickness: 0.2rem;
   }
-  .ds-tabs__panel {
-    @apply bg-base-100 md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-400 mb-0
-    print:block print:border-0 print:py-3;
-    border-radius: var(--tabs__panel-border-radius);
-    &.ds-tabs__panel--visible {
-      @apply block;
-    }
+}
+.ds-tabs__panel {
+  @apply bg-base-100 md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-400 mb-0
+  print:block print:border-0 print:py-3;
+  border-radius: var(--tabs__panel-border-radius);
+  &.ds-tabs__panel--visible {
+    @apply block;
   }
 }

package/src/components/typography.css

@@ -341,19 +341,8 @@ button.ds-link {
     fill: var(--color-base-content);
   }
 }
-.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;
   }
 }
-.ds-code-block__content {
-  @apply text-sm sm:text-base;
-}

package/src/utilities/index.css

@@ -1467,42 +1467,215 @@
 .ds-grid__col-auto {
   @apply col-auto;
 }
+.xs\:ds-grid__col-span-1,
 .ds-grid__col-span-1 {
   @apply col-span-1;
 }
+
+.xs\:ds-grid__col-span-2,
 .ds-grid__col-span-2 {
   @apply col-span-2;
 }
+
+.xs\:ds-grid__col-span-3,
 .ds-grid__col-span-3 {
   @apply col-span-3;
 }
+
+.xs\:ds-grid__col-span-4,
 .ds-grid__col-span-4 {
   @apply col-span-4;
 }
+
+.xs\:ds-grid__col-span-5,
 .ds-grid__col-span-5 {
   @apply col-span-5;
 }
+
+.xs\:ds-grid__col-span-6,
 .ds-grid__col-span-6 {
   @apply col-span-6;
 }
+
+.xs\:ds-grid__col-span-7,
 .ds-grid__col-span-7 {
   @apply col-span-7;
 }
+
+.xs\:ds-grid__col-span-8,
 .ds-grid__col-span-8 {
   @apply col-span-8;
 }
+
+.xs\:ds-grid__col-span-9,
 .ds-grid__col-span-9 {
   @apply col-span-9;
 }
+
+.xs\:ds-grid__col-span-10,
 .ds-grid__col-span-10 {
   @apply col-span-10;
 }
+
+.xs\:ds-grid__col-span-11,
 .ds-grid__col-span-11 {
   @apply col-span-11;
 }
+
+.xs\:ds-grid__col-span-12,
 .ds-grid__col-span-12 {
   @apply col-span-12;
 }
+@media (min-width: 640px) {
+  .sm\:ds-grid__col-span-1 {
+    @apply col-span-1;
+  }
+
+  .sm\:ds-grid__col-span-2 {
+    @apply col-span-2;
+  }
+
+  .sm\:ds-grid__col-span-3 {
+    @apply col-span-3;
+  }
+
+  .sm\:ds-grid__col-span-4 {
+    @apply col-span-4;
+  }
+
+  .sm\:ds-grid__col-span-5 {
+    @apply col-span-5;
+  }
+
+  .sm\:ds-grid__col-span-6 {
+    @apply col-span-6;
+  }
+
+  .sm\:ds-grid__col-span-7 {
+    @apply col-span-7;
+  }
+
+  .sm\:ds-grid__col-span-8 {
+    @apply col-span-8;
+  }
+
+  .sm\:ds-grid__col-span-9 {
+    @apply col-span-9;
+  }
+
+  .sm\:ds-grid__col-span-10 {
+    @apply col-span-10;
+  }
+
+  .sm\:ds-grid__col-span-11 {
+    @apply col-span-11;
+  }
+
+  .sm\:ds-grid__col-span-12 {
+    @apply col-span-12;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:ds-grid__col-span-1 {
+    @apply col-span-1;
+  }
+
+  .md\:ds-grid__col-span-2 {
+    @apply col-span-2;
+  }
+
+  .md\:ds-grid__col-span-3 {
+    @apply col-span-3;
+  }
+
+  .md\:ds-grid__col-span-4 {
+    @apply col-span-4;
+  }
+
+  .md\:ds-grid__col-span-5 {
+    @apply col-span-5;
+  }
+
+  .md\:ds-grid__col-span-6 {
+    @apply col-span-6;
+  }
+
+  .md\:ds-grid__col-span-7 {
+    @apply col-span-7;
+  }
+
+  .md\:ds-grid__col-span-8 {
+    @apply col-span-8;
+  }
+
+  .md\:ds-grid__col-span-9 {
+    @apply col-span-9;
+  }
+
+  .md\:ds-grid__col-span-10 {
+    @apply col-span-10;
+  }
+
+  .md\:ds-grid__col-span-11 {
+    @apply col-span-11;
+  }
+
+  .md\:ds-grid__col-span-12 {
+    @apply col-span-12;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:ds-grid__col-span-1 {
+    @apply col-span-1;
+  }
+
+  .lg\:ds-grid__col-span-2 {
+    @apply col-span-2;
+  }
+
+  .lg\:ds-grid__col-span-3 {
+    @apply col-span-3;
+  }
+
+  .lg\:ds-grid__col-span-4 {
+    @apply col-span-4;
+  }
+
+  .lg\:ds-grid__col-span-5 {
+    @apply col-span-5;
+  }
+
+  .lg\:ds-grid__col-span-6 {
+    @apply col-span-6;
+  }
+
+  .lg\:ds-grid__col-span-7 {
+    @apply col-span-7;
+  }
+
+  .lg\:ds-grid__col-span-8 {
+    @apply col-span-8;
+  }
+
+  .lg\:ds-grid__col-span-9 {
+    @apply col-span-9;
+  }
+
+  .lg\:ds-grid__col-span-10 {
+    @apply col-span-10;
+  }
+
+  .lg\:ds-grid__col-span-11 {
+    @apply col-span-11;
+  }
+
+  .lg\:ds-grid__col-span-12 {
+    @apply col-span-12;
+  }
+}
+
 .ds-print-hidden {
   @apply print:hidden !important;
 }