@digigov/css 2.0.0-b3ec0588 → 2.0.0-b4cd6916

package/src/components/chip.css

@@ -1,41 +1,40 @@
 .ds-chips {
-  @apply flex flex-wrap list-none gap-2;
+  @apply flex flex-wrap list-none gap-2 items-center;
+  &.ds-chips--horizontal {
+    @apply md:flex md:flex-row md:flex-wrap;
+  }
   .ds-chip:last-child .ds-chip__content {
     @apply mr-0;
   }
 }
-.ds-chips--horizontal {
-  @apply md:flex md:flex-row md:flex-wrap;
-}
 .ds-chip {
   @apply list-none;
+  &:last-child {
+    .ds-chip__content {
+      @apply mr-0;
+    }
+  }
+  &.ds-chip--deletable {
+    .ds-chip__content {
+      &:hover {
+        @apply shadow-lg transition;
+      }
+    }
+  }
   .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"] {
+    &[role='button'] {
       &:hover {
         @apply shadow-lg text-base-content-invert bg-base-900 border-base-900 transition;
       }
       &:focus {
         outline: 3px solid var(--color-focus);
         outline-offset: 0;
-        -webkit-box-shadow: inset 0 0 0 2px;
         box-shadow: inset 0 0 0 2px;
       }
     }
   }
-  &:last-child {
-    .ds-chip__content {
-      @apply mr-0;
-    }
-  }
-}
-.ds-chip--deletable {
-  .ds-chip__content {
-    &:hover {
-      @apply shadow-lg transition;
-    }
-  }
 }
 .ds-chip__key-value {
   @apply font-bold mr-2;
@@ -44,25 +43,25 @@
 /* overrides */
 
 .ds-chip {
-  .ds-chip__content {
-    .ds-svg-icon--close {
-      @apply w-4 h-4 ml-3;
+  &.ds-chip--deletable {
+    .ds-chip__content {
+      .ds-svg-icon--close {
+        &:hover {
+          @apply cursor-pointer;
+        }
+      }
     }
-    &[role="button"] {
+  }
+  .ds-chip__content {
+    &[role='button'] {
       &:hover {
         .ds-svg-icon--close {
           fill: var(--color-base-content-invert);
         }
       }
     }
-  }
-}
-.ds-chip--deletable {
-  .ds-chip__content {
     .ds-svg-icon--close {
-      &:hover {
-        @apply cursor-pointer;
-      }
+      @apply w-4 h-4 ml-3;
     }
   }
 }

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/components.css

@@ -1,2 +1,2 @@
-@import "tailwindcss/components";
-@import "./index.css";
+@import 'tailwindcss/components';
+@import './index.css';

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

@@ -1,41 +1,46 @@
 .ds-copy-to-clipboard {
   @apply flex w-fit;
+
+  &.ds-copy-to-clipboard--hidden {
+    @apply invisible w-0 h-0;
+  }
 }
 .ds-copy-to-clipboard__tooltip {
   @apply relative;
-  .ds-copy-to-clipboard__message {
-    @apply bg-success py-4 px-6 absolute mt-4 text-center z-50 w-fit md:w-max;
+  &.ds-copy-to-clipboard__tooltip--dense,
+  .ds-dense & {
     &::before {
-      content: "";
-      @apply w-4 h-4 border-t-8 border-l-8 border-success transform rotate-45
-      absolute -top-1;
-      transform: rotate(45deg);
+      @apply w-2 h-2;
     }
-  }
-  &.ds-copy-to-clipboard__tooltip--dense, .ds-dense & {
     .ds-copy-to-clipboard__message {
       @apply py-2 px-4;
     }
-    &::before {
-      @apply w-2 h-2;
+  }
+  &.ds-copy-to-clipboard__tooltip--right {
+    .ds-copy-to-clipboard__message {
+      @apply right-0;
+      &::before {
+        @apply right-4;
+        content: '';
+      }
     }
   }
-}
-.ds-copy-to-clipboard__tooltip--right {
-  .ds-copy-to-clipboard__message {
-    @apply right-0;
-    &::before {
-      content: "";
-      @apply right-4;
+  &.ds-copy-to-clipboard__tooltip--left {
+    .ds-copy-to-clipboard__message {
+      @apply left-0;
+      &::before {
+        @apply left-4;
+        content: '';
+      }
     }
   }
-}
-.ds-copy-to-clipboard__tooltip--left {
   .ds-copy-to-clipboard__message {
-    @apply left-0;
+    @apply bg-success py-4 px-6 absolute mt-4 text-center z-50 w-fit md:w-max;
     &::before {
-      content: "";
-      @apply left-4;
+      @apply w-4 h-4 border-t-8 border-l-8 border-success transform rotate-45
+      absolute -top-1;
+      content: '';
+      transform: rotate(45deg);
     }
   }
 }
@@ -45,10 +50,6 @@
   }
 }
 
-.ds-copy-to-clipboard--hidden {
-  @apply invisible w-0 h-0;
-}
-
 /* overrides */
 
 .ds-copy-to-clipboard__tooltip {

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,31 +1,30 @@
+@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;
   }
   &:focus {
     background-color: var(--color-focus);
-    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
-    text-decoration:none;
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-base-content);
+    text-decoration: none;
   }
   &:focus-within {
     @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);
+  &.ds-details__summary--lg {
+    @apply util-details__summary--lg-text;
+  }
 }
 .ds-details__content {
-  @apply border-l-2 border-base-500 py-2 px-4 mt-4;
-  >*:last-child {
+  @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/dev-theme.css

@@ -1,10 +1,9 @@
 /* Experimental css file. */
 
 .dark {
-/*
+  /*
 Here we can experiment with dark theme. 
 Storybook does not need restart when writing here. 
 Final styling should then go to themes/ds-dark/overrides/index.css
 */
-  
-}
+}

package/src/components/drawer.css

@@ -3,40 +3,40 @@
   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;
-}
-.ds-drawer--relative-sm {
-  @apply sm:relative sm:w-full max-h-full shadow-thick sm:shadow-none !important;
-}
-.ds-drawer--relative-md {
-  @apply md:relative md:w-full max-h-full shadow-thick md:shadow-none !important;
-}
-.ds-drawer--relative-lg {
-  @apply lg:relative lg:w-full max-h-full shadow-thick lg:shadow-none !important;
-}
-.ds-drawer--right {
-  @apply right-0;
-}
-.ds-drawer--left {
-  @apply left-0;
-}
-.ds-drawer--bg-secondary {
-  @apply bg-base-200 border-0;
-  @apply shadow-xl !important;
-}
-.ds-drawer--closed {
-  @apply hidden;
   &.ds-drawer--relative-sm {
-    @apply hidden sm:flex;
+    @apply sm:relative sm:w-full max-h-full shadow-thick sm:shadow-none !important;
   }
   &.ds-drawer--relative-md {
-    @apply hidden md:flex;
+    @apply md:relative md:w-full max-h-full shadow-thick md:shadow-none !important;
   }
   &.ds-drawer--relative-lg {
-    @apply hidden lg:flex;
+    @apply lg:relative lg:w-full max-h-full shadow-thick lg:shadow-none !important;
+  }
+  &.ds-drawer--right {
+    @apply right-0;
+  }
+  &.ds-drawer--left {
+    @apply left-0;
+  }
+  &.ds-drawer--bg-secondary {
+    @apply bg-base-200 border-0;
+    @apply shadow-xl !important;
+  }
+  &.ds-drawer--closed {
+    @apply hidden;
+    &.ds-drawer--relative-sm {
+      @apply hidden sm:flex;
+    }
+    &.ds-drawer--relative-md {
+      @apply hidden md:flex;
+    }
+    &.ds-drawer--relative-lg {
+      @apply hidden lg:flex;
+    }
   }
 }
 .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;
   }
@@ -45,6 +45,27 @@
 /* overrides */
 
 .ds-drawer {
+  &.ds-drawer--relative-sm {
+    .ds-drawer__heading {
+      > .ds-close-btn {
+        @apply sm:hidden;
+      }
+    }
+  }
+  &.ds-drawer--relative-md {
+    .ds-drawer__heading {
+      > .ds-close-btn {
+        @apply md:hidden;
+      }
+    }
+  }
+  &.ds-drawer--relative-lg {
+    .ds-drawer__heading {
+      > .ds-close-btn {
+        @apply lg:hidden;
+      }
+    }
+  }
   > .ds-container {
     @apply p-0;
   }
@@ -58,25 +79,3 @@
     @apply m-0;
   }
 }
-.ds-drawer--relative-sm {
-  .ds-drawer__heading {
-    >.ds-close-btn {
-      @apply sm:hidden;
-    }
-  }
-}
-.ds-drawer--relative-md {
-  .ds-drawer__heading {
-    >.ds-close-btn {
-      @apply md:hidden;
-    }
-  }
-}
-.ds-drawer--relative-lg {
-  .ds-drawer__heading {
-    >.ds-close-btn {
-      @apply lg:hidden;
-    }
-  }
-}
-

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-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;
+    }
+}