@digigov/css 2.0.0-462194bf → 2.0.0-60d81ed8

package/src/components/code.css

@@ -0,0 +1,127 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+.ds-code-block__container {
+  @apply mb-4 md:mb-8 p-4 bg-base-200 border border-base-300 w-full overflow-x-auto relative;
+  max-height: 95vh; /* experimental to see if it's disturbing */
+  & > pre {
+    @apply bg-transparent p-0 m-0;
+    font: inherit;
+    color: inherit;
+  }
+}
+.ds-code-block__header {
+  @apply sticky left-0 flex mb-0.5 items-start;
+
+  &.ds-code-block__header--start {
+    @apply justify-start;
+  }
+  &.ds-code-block__header--space-between {
+    @apply justify-between;
+  }
+  &.ds-code-block__header--end {
+    @apply justify-end;
+  }
+}
+.ds-code-block__content {
+  @apply text-sm sm:text-base;
+}
+.ds-code--line-number {
+  @apply inline-block text-right pointer-events-none select-none pr-0.5 w-6 text-base-500;
+}
+.ds-code--highlighted-line {
+  background-color: rgba(var(--color-orange-100-rgb), 0.3);
+}
+
+/* copied styles from 'highlight.js/styles/github.css' */
+.ds-code--doctag,
+.ds-code--keyword,
+.ds-code--meta .ds-code--keyword,
+.ds-code--template-tag,
+.ds-code--template-variable,
+.ds-code--type,
+.ds-code--variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: var(--color-red-300);
+}
+.ds-code--title,
+.ds-code--title.class_,
+.ds-code--title.class_.inherited__,
+.ds-code--title.function_ {
+  /* prettylights-syntax-entity */
+  color: var(--color-purple-400);
+}
+.ds-code--attr,
+.ds-code--attribute,
+.ds-code--literal,
+.ds-code--meta,
+.ds-code--number,
+.ds-code--operator,
+.ds-code--variable,
+.ds-code--selector-attr,
+.ds-code--selector-class,
+.ds-code--selector-id {
+  /* prettylights-syntax-constant */
+  color: var(--color-green-400);
+}
+.ds-code--regexp,
+.ds-code--string,
+.ds-code--meta .ds-code--string {
+  /* prettylights-syntax-string */
+  color: var(--color-blue-600);
+}
+.ds-code--built_in,
+.ds-code--symbol {
+  /* prettylights-syntax-variable */
+  color: var(--color-orange-500);
+}
+.ds-code--comment,
+.ds-code--code,
+.ds-code--formula {
+  /* prettylights-syntax-comment */
+  @apply text-base-600;
+}
+.ds-code--name,
+.ds-code--quote,
+.ds-code--selector-tag,
+.ds-code--selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: var(--color-green-400);
+}
+.ds-code--subst {
+  /* prettylights-syntax-storage-modifier-import */
+  @apply text-base-900;
+}
+.ds-code--section {
+  /* prettylights-syntax-markup-heading */
+  @apply font-bold;
+  color: var(--color-blue-500);
+}
+.ds-code--bullet {
+  /* prettylights-syntax-markup-list */
+  color: var(--color-orange-600);
+}
+.ds-code--emphasis {
+  /* prettylights-syntax-markup-italic */
+  @apply italic text-base-900;
+}
+.ds-code--strong {
+  /* prettylights-syntax-markup-bold */
+  @apply font-bold text-base-900;
+}
+.ds-code--addition {
+  /* prettylights-syntax-markup-inserted */
+  color: var(--color-green-500);
+  background-color: rgba(var(--color-green-100-rgb), 0.3);
+}
+.ds-code--deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: var(--color-red-500);
+  background-color: rgba(var(--color-red-100-rgb), 0.3);
+}
+.ds-code--char.escape_,
+.ds-code--link,
+.ds-code--params,
+.ds-code--property,
+.ds-code--punctuation,
+.ds-code--tag {
+  /* purposely ignored */
+}

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

@@ -0,0 +1,28 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+
+.ds-copy-to-clipboard {
+  @apply flex z-10;
+}
+.ds-copy-to-clipboard--hidden {
+  @apply hidden w-0 h-0;
+}
+.ds-copy-to-clipboard__before {
+  /* stylelint-disable-next-line plugin/no-react-native-incompatible-css */
+  @apply w-4 h-4 border-t-8 border-l-8 border-success transform rotate-45
+  absolute bottom-1;
+  left: 50%;
+}
+.ds-copy-to-clipboard__message {
+  @apply bg-success w-full mb-4 
+  absolute -top-4;
+}
+.ds-copy-to-clipboard__message__text {
+  @apply p-2 flex-1 text-center text-white py-3 px-4;
+}
+.ds-copy-to-clipboard__tooltip {
+}
+.ds-copy-to-clipboard__banner {
+}
+.ds-copy-to-clipboard__message--dense {
+  @apply py-2 px-4;
+}

package/src/components/details.common.css

@@ -0,0 +1,26 @@
+@tailwind utilities;
+
+@layer utilities {
+    .util-details {
+      @apply mb-4 md:mb-8;
+    }
+    .util-details-text {
+      @apply md:text-lg;
+      font-size: var(--details-font-size);
+      line-height: var(--details-line-height);
+    }
+    .util-details__summary {
+      @apply mb-0;
+    }
+    .util-details__summary-text {
+      @apply underline;
+    }
+    .util-details__summary--lg-text {
+      @apply font-semibold;
+      font-size: var(--details__summary--lg-font-size);
+      line-height: var(--details__summary--lg-line-height);
+    }
+    .util-details__content {
+      @apply border-l-2 border-base-500 py-2 px-4 mt-4;
+    }
+}

package/src/components/details.css

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

package/src/components/details.native.css

@@ -0,0 +1,26 @@
+@import './details.common.css';
+
+.ds-details {
+  @apply util-details;
+}
+.ds-details__text {
+  @apply util-details-text;
+}
+.ds-details__summary {
+  @apply util-details__summary;
+}
+.ds-details__summary--focus {
+  background-color: var(--color-focus);
+  box-shadow:
+    0 -2px var(--color-focus),
+    0 4px var(--color-base-content);
+}
+.ds-details__summary__text {
+  @apply util-details__summary-text;
+}
+.ds-details__summary--lg__text {
+  @apply util-details__summary--lg-text;
+}
+.ds-details__content {
+  @apply util-details__content;
+}

package/src/components/drawer.css

@@ -36,7 +36,7 @@
   }
 }
 .ds-drawer__heading {
-  @apply p-0 mb-4 flex justify-between align-baseline;
+  @apply p-0 mb-2 md:mb-4 flex justify-between align-baseline;
   .ds--drawer__close-icon {
     @apply m-0;
   }

package/src/components/dropdown.common.css

@@ -0,0 +1,23 @@
+@tailwind utilities;
+
+@layer utilities {
+    .util-dropdown {
+      @apply relative;
+    }
+    .util-dropdown--right {
+      @apply right-0 mr-0 ml-4;
+    }
+    .util-dropdown__content {
+      @apply border-base-400 bg-base-100
+      max-w-xs min-w-full absolute transition z-3 mr-4 mt-0 md:-mt-4;
+      box-shadow:
+        0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+        0 -2px 0 var(--color-base-500);
+    }
+    .util-dropdown__content--full-width {
+      @apply min-w-full;
+    }
+    .util-dropdown__content--scrollable {
+      @apply max-h-64 md:max-h-96;
+    }
+}

package/src/components/dropdown.css

@@ -1,5 +1,7 @@
+@import './dropdown.common.css';
+
 .ds-dropdown {
-  @apply w-fit relative;
+  @apply util-dropdown w-fit;
   &.ds-dropdown--up {
     .ds-dropdown__content {
       @apply mb-4 border border-b-0 bottom-full;
@@ -13,7 +15,7 @@
   }
   &.ds-dropdown--right {
     .ds-dropdown__content {
-      @apply right-0 mr-0 ml-4;
+      @apply util-dropdown--right;
     }
   }
   &.ds-dropdown--disabled {
@@ -47,19 +49,15 @@
   @apply mt-4;
 }
 .ds-dropdown__content {
-  @apply border border-base-400 p-4 bg-base-100 border-t-0
-  max-w-xs w-max min-w-full absolute transition z-3 mr-4 -mt-4;
+  @apply util-dropdown__content border p-4 border-t-0 w-max;
   -webkit-box-box-shadow:
     0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
     0 -2px 0 var(--color-base-500);
-  box-shadow:
-    0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
-    0 -2px 0 var(--color-base-500);
   &.ds-dropdown__content--full-width {
-    @apply min-w-full;
+    @apply util-dropdown__content--full-width;
   }
   &.ds-dropdown__content--scrollable {
-    @apply overflow-y-auto max-h-64 md:max-h-96;
+    @apply overflow-y-auto util-dropdown__content--scrollable;
   }
   *:last-child {
     @apply mb-0;

package/src/components/dropdown.native.css

@@ -0,0 +1,28 @@
+@import './dropdown.common.css';
+
+.ds-dropdown {
+   @apply util-dropdown;
+   z-index: 2;
+}
+.ds-dropdown--right {
+   @apply util-dropdown--right;
+}
+
+.ds-dropdown__button {
+   @apply gap-1 items-center p-2;
+   flex-direction: row;
+   flex-wrap: wrap;
+}
+.ds-dropdown__button__text {
+   color: var(--color-base-100);
+}
+
+.ds-dropdown__content {
+   @apply util-dropdown__content p-2 border-2;
+}
+.ds-dropdown__content--full-width {
+   @apply util-dropdown__content--full-width;
+}
+.ds-dropdown__content--scrollable {
+   @apply util-dropdown__content--scrollable;
+}

package/src/components/fillable.css

@@ -1,5 +1,5 @@
 .ds-fillable-text {
-  @apply lg:mb-8 mb-4 md:mb-8 p-4 border-l-6 border-base-300 bg-base-200
+  @apply mb-4 md:mb-8 p-4 border-l-6 border-base-300 bg-base-200
 text-base-content md:text-lg leading-relaxed text-base;
 }
 .ds-labeled-text {

package/src/components/filter.css

@@ -51,23 +51,23 @@
   @apply p-0;
 }
 .ds-filter__heading {
-  @apply mb-4;
+  @apply mb-2 md:mb-4;
 }
 .ds-filter__selected {
   @apply bg-base-200 p-4 m-0 rounded;
 }
 .ds-filter__selected-heading {
-  @apply flex flex-wrap sm:flex-nowrap mb-4 md:mb-6 justify-between gap-x-2;
+  @apply flex flex-wrap sm:flex-nowrap mb-4 md:mb-8 justify-between gap-x-2 gap-y-4;
 }
 .ds-input__search-btn {
-  @apply shadow-none !important;
+  @apply shadow-none mb-0 !important;
   @apply px-4 py-2 w-min m-0 ml-3 flex gap-2;
 }
 .ds-search {
-  @apply flex w-full max-w-3xl;
+  @apply flex w-full max-w-3xl mb-4 md:mb-8;
 }
 .ds-results__action-bar {
-  @apply py-2 mb-8 flex flex-wrap justify-start gap-4 items-baseline;
+  @apply py-2 mb-4 md:mb-8 flex flex-wrap justify-start gap-4 items-baseline;
   > * {
     @apply mb-0;
   }
@@ -76,7 +76,7 @@
   @apply flex flex-wrap justify-between items-baseline gap-x-2;
 }
 .ds-results__actions {
-  @apply flex flex-wrap gap-4 justify-start min-w-min mb-4;
+  @apply flex flex-wrap gap-4 justify-start min-w-min mb-2 md:mb-4;
 }
 .ds-link-filters {
   @apply block md:hidden;

package/src/components/form.common.css

@@ -0,0 +1,82 @@
+@tailwind utilities;
+
+@layer utilities {
+    .util-field {
+        @apply mb-8 md:mb-10;
+    }
+    .util-field--error {
+        @apply border-l-5 border-error-text px-0 pl-4;
+    }
+
+    .util-fieldset__legend {
+        margin-bottom: var(--fieldset__legend-margin-bottom);
+    }
+    .util-fieldset__legend-text {
+        font-weight: var(--fieldset__legend-font-weight);
+        letter-spacing: var(--fieldset__legend-letter-spacing);
+    }
+    .util-fieldset__legend--xl-text {
+        @apply max-w-2xl;
+        font-size: var(--fieldset__legend--xl-font-size);
+        line-height: var(--fieldset__legend--xl-line-height);
+    }
+    .util-fieldset__legend--lg-text {
+        font-size: var(--fieldset__legend--lg-font-size);
+        line-height: var(--fieldset__legend--lg-line-height);
+    }
+    .util-fieldset__legend--md-text {
+        font-size: var(--fieldset__legend--md-font-size);
+        line-height: var(--fieldset__legend--md-line-height);
+    }
+    .util-fieldset__legend--sm-text {
+        font-size: var(--fieldset__legend--sm-font-size);
+        line-height: var(--fieldset__legend--sm-line-height);
+    }
+
+
+    .util-label {
+        @apply mb-0 flex gap-y-3 flex-col;
+    }
+    .util-label-text {
+        font-size: var(--label-font-size);
+        line-height: var(--label-line-height);
+        letter-spacing: var(--label-letter-spacing);
+    }
+    .util-label__title--xl-text {
+        @apply max-w-2xl;
+        font-size: var(--label__title--xl-font-size);
+        line-height: var(--label__title--xl-line-height);
+        font-weight: var(--label__title-font-weight);
+        letter-spacing: var(--label__title-letter-spacing);
+    }
+    .util-label__title--lg-text {
+        font-size: var(--label__title--lg-font-size);
+        line-height: var(--label__title--lg-line-height);
+        font-weight: var(--label__title-font-weight);
+        letter-spacing: var(--label__title-letter-spacing);
+    }
+    .util-label__title--md-text {
+        font-size: var(--label__title--md-font-size);
+        line-height: var(--label__title--md-line-height);
+        font-weight: var(--label__title-font-weight);
+        letter-spacing: var(--label__title-letter-spacing);
+    }
+    .util-label__title--sm-text {
+        font-size: var(--label__title--sm-font-size);
+        line-height: var(--label__title--sm-line-height);
+        font-weight: var(--label__title-font-weight);
+        letter-spacing: var(--label__title-letter-spacing);
+    }
+
+    .util-input {
+        @apply md:text-lg w-full p-2 border-2 border-base-content bg-base-100;
+        border-radius: var(--input-border-radius);
+    }
+    .util-input--error {
+        @apply border-error-text border-3;
+    }
+    .util-textarea {
+        @apply md:text-lg w-full p-2 border-2 border-base-content bg-base-100;
+        border-radius: var(--textarea-border-radius);
+    }
+}

package/src/components/form.css

@@ -1,10 +1,12 @@
+@import './form.common.css';
+
 .ds-form {
 }
 .ds-field {
   @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,
@@ -22,16 +24,57 @@
   }
 }
 .ds-fieldset__legend {
-  @apply mb-4 !important;
+  @apply util-fieldset__legend util-fieldset__legend-text;
+}
+.ds-fieldset__legend--xl {
+  @apply util-fieldset__legend--xl-text;
+}
+.ds-fieldset__legend--lg {
+  @apply util-fieldset__legend--lg-text;
+}
+.ds-fieldset__legend--md {
+  @apply util-fieldset__legend--md-text;
 }
+.ds-fieldset__legend--sm {
+  @apply util-fieldset__legend--sm-text;
+}
+
 .ds-label {
-  @apply mb-0 flex gap-y-3 flex-col;
-  font-size: var(--label-font-size);
-  line-height: var(--label-line-height);
-  letter-spacing: var(--label-letter-spacing);
+  @apply util-label util-label-text gap-y-3;
+}
+.ds-label__title--xl {
+  @apply util-label__title--xl-text;
 }
+.ds-label__title--lg {
+  @apply util-label__title--lg-text;
+}
+.ds-label__title--md {
+  @apply util-label__title--md-text;
+}
+.ds-label__title--sm {
+  @apply util-label__title--sm-text;
+}
+
 .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 +90,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 +126,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 +170,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 md:mb-8 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);
   }
 }