@digigov/css 2.0.0-rc.3 → 2.0.0-rc.30

package/src/components/card.css

@@ -1,82 +1,93 @@
+@import './card.common.css';
+
 .ds-card {
-  @apply mb-7 text-base-content;
-  &.ds-card--dense, .gov-dense & {
+  @apply util-card;
+  &.ds-card--dense,
+  .ds-dense & {
     @apply mb-5;
     .ds-card__body {
       @apply gap-2 md:gap-3;
     }
   }
-}
-.ds-card--border {
-  @apply border-2 border-base-content p-6;
-  &.ds-card--border-light {
-    @apply border;
-  }
-  &.ds-card--dense, .ds-dense & {
-    @apply p-4 pt-3;
+  &.ds-card--border {
+    @apply util-card--border;
+    &.ds-card--border-light {
+      @apply border;
+    }
+    &.ds-card--dense,
+    .ds-dense & {
+      @apply p-4 pt-3;
+    }
   }
-}
-.ds-card--border-top {
-  @apply border-t border-base-300 pt-4;
-  &.ds-card--border-dark {
-    @apply border-t-3;
+  &.ds-card--border-top {
+    @apply util-card--border-top;
+    &.ds-card--border-dark {
+      @apply border-t-3;
+    }
+    &.ds-card--dense,
+    .ds-dense & {
+      @apply p-3;
+    }
   }
-  &.ds-card--dense, .ds-dense & {
-    @apply p-3;
+  &.ds-card--divider {
+    @apply util-card--divider;
   }
-}
-.ds-card--divider {
-  @apply border-b border-base-300 pb-4 mb-4;
-}
-.ds-card--cta {
-  .ds-card__body {
-    @apply pr-8 relative;
-    &:after {
-      content: "";
-      transition: all 0.1s ease;
-      @apply w-5 h-5 bg-contain bg-no-repeat bg-center absolute right-2 top-2;
-      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'> <path d='M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z' />  </svg>");
-    }
-    &:hover {
-      &:after {
-        @apply right-1;
+  &.ds-card--cta {
+    .ds-card__body {
+      @apply pr-8 relative;
+      &::after {
+        @apply w-5 h-5 bg-contain bg-no-repeat bg-center absolute right-2 top-2;
+        content: '';
+        transition: all 0.1s ease;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'> <path d='M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z' />  </svg>");
+      }
+      &:hover {
+        &::after {
+          @apply right-1;
+        }
       }
     }
+
+    .ds-card__heading {
+      @apply md:text-xl text-lg tracking-wide;
+      @apply leading-8 !important;
+    }
   }
-  .ds-card__heading {
-    @apply md:text-xl text-lg tracking-wide;
-    @apply leading-8 !important;
+  &.ds-card--border-light {
+    @apply util-card--border-light;
+  }
+  &.ds-card--border-dark {
+    @apply util-card--border-dark;
+  }
+  &.ds-card--full-height {
+    @apply h-full;
   }
-}
-.ds-card--border-light {
-  @apply border-base-300;
-}
-.ds-card--border-dark {
-  @apply border-base-content;
-}
-.ds-card--full-height {
-  @apply h-full;
 }
 .ds-card__body {
-  @apply flex flex-col gap-3 md:gap-4 h-full;
+  @apply util-card__body h-full;
+}
+.ds-card__image {
+  @apply w-full h-40
+  /* @apply  h-40 -mx-6 */
+  bg-base-200 bg-cover bg-top
+  border border-base-300;
 }
 .ds-card__heading {
+  @apply util-card__heading-text;
   word-break: break-word;
-  @apply md:text-2xl text-xl font-bold;
 }
 .ds-card__content {
   word-break: break-word;
-  @apply text-base;
-  font-size: var(--card__text-font-size);
-  line-height: var(--card__text-line-height);
+  font-size: var(--card__content-font-size);
+  line-height: var(--card__content-line-height);
 }
 .ds-card__action {
-  @apply flex flex-wrap items-center gap-y-4 mt-auto;
+  @apply util-card__action;
 }
 @media print {
   /* When ds-card__action is empty at print, content at :after limits its height.  */
-  .ds-card__action:after {
-    content: "";
+  .ds-card__action::after {
+    content: '';
   }
 }
 
@@ -87,8 +98,8 @@
     .ds-link {
       /* Clickable area will be at all the card with 'after' */
       &::after {
-        content: "";
         @apply block absolute top-0 bottom-0 right-0 left-0;
+        content: '';
       }
     }
   }

package/src/components/card.native.css

@@ -0,0 +1,29 @@
+@import './card.common.css';
+
+.ds-card {
+  @apply util-card;
+}
+.ds-card--border {
+  @apply util-card--border;
+}
+.ds-card__body {
+  @apply util-card__body;
+}
+.ds-card__action {
+  @apply util-card__action;
+}
+.ds-card--border-top {
+  @apply util-card--border-top;
+}
+.ds-card--border-light {
+  @apply util-card--border-light;
+}
+.ds-card--border-dark {
+  @apply util-card--border-dark;
+}
+.ds-card--divider {
+  @apply util-card--divider;
+}
+.ds-card__heading__text {
+  @apply util-card__heading-text;
+}

package/src/components/checkboxes.common.css

@@ -0,0 +1,16 @@
+@tailwind utilities;
+
+@layer utilities {
+  .util-checkboxes__item {
+    @apply relative mb-4 min-h-10;
+  }
+  .util-checkboxes__input {
+    @apply absolute z-1 left-0.5 -top-0.5 m-0 opacity-100 w-10 h-10;
+  }
+  .util-checkboxes__input__after {
+    @apply absolute border-b-5 border-l-5;
+    width: 23px;
+    height: 12px;
+    transform: rotate(-45deg);
+  }
+}

package/src/components/checkboxes.css

@@ -1,3 +1,5 @@
+@import './checkboxes.common.css';
+
 .ds-checkboxes {
   &.ds-checkboxes--dense,
   .ds-dense & {
@@ -9,18 +11,18 @@
     }
     .ds-checkboxes__input {
       @apply w-8 h-8 left-0.5 md:top-0.5;
-      &:before {
+      &::before {
         @apply w-8 h-8;
       }
-      &:after {
+      &::after {
+        @apply border-b-4 border-l-4;
         top: 10px;
         left: 7px;
         width: 19px;
         height: 10px;
-        @apply border-b-4 border-l-4;
       }
       &:focus {
-        &:before {
+        &::before {
           @apply border-3;
         }
       }
@@ -29,12 +31,12 @@
       @apply mb-4 md:mb-6;
     }
   }
-}
-.ds-checkboxes--horizontal {
-  @apply inline-flex flex-wrap items-baseline gap-4 md:gap-6;
+  &.ds-checkboxes--horizontal {
+    @apply inline-flex flex-wrap items-baseline gap-4 md:gap-6;
+  }
 }
 .ds-checkboxes__item {
-  @apply block relative mb-4 pl-12 min-h-10;
+  @apply util-checkboxes__item block pl-12;
   &:last-child {
     @apply mb-0;
   }
@@ -43,29 +45,22 @@
   @apply inline-block py-1 px-2 cursor-pointer;
 }
 .ds-checkboxes__input {
-  @apply absolute z-1 left-0.5 -top-0.5 m-0 opacity-100
-  w-10 h-10 cursor-pointer;
-  &:before {
-    content: "";
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
+  @apply util-checkboxes__input cursor-pointer;
+  &::before {
     @apply absolute top-0 left-0 w-10 h-10
     border-solid border-base-content border-2 bg-base-100 opacity-100;
+    content: '';
+    box-sizing: border-box;
   }
-  &:after {
-    content: "";
-    @apply absolute bg-transparent opacity-0 box-border
-    border-accent border-b-5 border-l-5 border-t-0 border-r-0;
+  &::after {
+    @apply util-checkboxes__input__after bg-transparent opacity-0 box-border
+    border-accent border-t-0 border-r-0;
+    content: '';
     top: 11px;
     left: 9px;
-    width: 23px;
-    height: 12px;
-    -webkit-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    transform: rotate(-45deg);
   }
   &:checked {
-    &:after {
+    &::after {
       @apply opacity-100;
     }
   }
@@ -73,7 +68,7 @@
     outline: 3px solid transparent;
     outline-offset: 1px;
     box-shadow: 0 0 0 4px var(--color-focus);
-    &:before {
+    &::before {
       @apply border-4;
     }
   }
@@ -83,12 +78,6 @@
 }
 
 /* overrides */
-
-.ds-checkboxes--horizontal {
-  .ds-choice-divider-text {
-    @apply min-w-max mx-2;
-  }
-}
 .ds-checkboxes {
   &.ds-checkboxes--dense,
   .ds-dense & {
@@ -96,4 +85,10 @@
       @apply mb-4 md:mb-6;
     }
   }
+
+  &.ds-checkboxes--horizontal {
+    .ds-choice-divider-text {
+      @apply min-w-max mx-2;
+    }
+  }
 }

package/src/components/checkboxes.native.css

@@ -0,0 +1,27 @@
+@import './checkboxes.common.css';
+
+.ds-checkboxes__item {
+  @apply util-checkboxes__item;
+}
+.ds-checkboxes__label {
+  @apply pl-12;
+}
+.ds-checkboxes__input {
+  @apply util-checkboxes__input top-0 left-0 border-solid border-base-content border-2 bg-base-100;
+}
+
+.ds-checkboxes__input--checked {
+  @apply util-checkboxes__input__after text-black;
+  top: 8;
+  left: 5;
+}
+
+.ds-checkboxes__input__wrapper--focus {
+  border-width: 4px;
+  border-color: var(--color-focus);
+}
+.ds-checkboxes__label__text {
+  font-size: var(--label-font-size);
+  line-height: 2rem;
+  letter-spacing: 0;
+}

package/src/components/chip.common.css

@@ -0,0 +1,19 @@
+@tailwind utilities;
+
+@layer utilities {
+  .util-chips {
+    @apply flex flex-wrap items-center;
+  }
+  .util-chip__content {
+    @apply bg-base-100 border-2 border-base-content rounded px-2 py-1 items-center shadow;
+  }
+  .util-chip__content-text {
+    @apply text-base-content lg:text-base text-sm;
+  }
+  .util-chip__key-value {
+    @apply mr-2;
+  }
+  .util-chip__key-value-text {
+    @apply font-bold;
+  }
+}

package/src/components/chip.css

@@ -1,68 +1,68 @@
+@import './chip.common.css';
+
 .ds-chips {
-  @apply flex flex-wrap list-none gap-2;
+  @apply util-chips gap-x-2 gap-y-2 list-none;
+  &.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"] {
+    @apply util-chip__content util-chip__content-text inline-flex;
+    &[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;
+  @apply util-chip__key-value util-chip__key-value-text;
 }
 
 /* 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/chip.native.css

@@ -0,0 +1,15 @@
+@import './chip.common.css';
+
+.ds-chips {
+  @apply util-chips flex-row;
+  gap: 0.5rem 0.5rem;
+}
+.ds-chip__content {
+  @apply util-chip__content flex flex-row;
+}
+.ds-chip__content__text {
+  @apply util-chip__content-text;
+}
+.ds-chip__key-value__text {
+  @apply util-chip__key-value-text;
+}

package/src/components/code.css

@@ -0,0 +1,128 @@
+.ds-code-block__container {
+  @apply p-4 bg-base-200 border border-base-300 w-full overflow-x-auto relative;
+
+  /* experimental to see if it's disturbing */
+  max-height: 95vh;
+  & > 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-40 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 {