@digigov/css 2.0.0-d57821ba → 2.0.0-e20fed09

package/src/components/button.css

@@ -1,14 +1,9 @@
+@import './button.common.css';
 .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;
-  border-radius: var(--btn-border-radius);
-  padding: var(--btn-padding);
-  letter-spacing: var(--btn-letter-spacing);
-  font-size: var(--btn-font-size);
+  @apply util-btn util-btn-text min-h-10 md:min-h-12 w-max gap-x-3 cursor-pointer;
   &:focus {
     box-shadow:
       0 0 0 2px var(--color-white),
@@ -18,10 +13,10 @@
   &:focus-within {
     @apply outline-none;
   }
+
   &.ds-btn--dense,
   .ds-dense & {
-    --btn-padding: 0.375rem 0.75rem;
-    @apply min-h-8;
+    @apply util-btn--dense;
     &:focus {
       box-shadow:
         0 0 0 2px var(--color-white),
@@ -34,12 +29,9 @@
 .ds-btn-primary[type='submit'],
 .ds-btn-primary[type='button'],
 .ds-btn-primary[type='reset'] {
-  @apply hover:no-underline
-  print:border-2 print:border-success print:shadow-none;
-  box-shadow: var(--btn-primary-box-shadow);
-  background-color: var(--btn-primary-background-color);
-  color: var(--btn-primary-color);
+  @apply util-btn-primary util-btn-primary-text;
   &:hover {
+    @apply no-underline;
     background-color: var(--btn-primary-background-color-hover);
     color: var(--btn-primary-color-hover);
   }
@@ -48,8 +40,7 @@
   }
 }
 .ds-btn-cta {
-  @apply py-4 print:pr-2;
-  font-size: var(--btn-cta-font-size);
+  @apply py-4 print:pr-2 util-btn-cta-text;
   &.ds-btn--dense,
   .ds-dense & {
     @apply py-3 px-4;
@@ -59,12 +50,9 @@
 .ds-btn-secondary[type='submit'],
 .ds-btn-secondary[type='button'],
 .ds-btn-secondary[type='reset'] {
-  @apply hover:no-underline
-    print:border-2 print:border-base-700 print:shadow-none;
-  box-shadow: var(--btn-secondary-box-shadow);
-  background-color: var(--btn-secondary-background-color);
-  color: var(--btn-secondary-color);
+  @apply util-btn-secondary util-btn-secondary-text;
   &:hover {
+    @apply no-underline;
     background-color: var(--btn-secondary-background-color-hover);
     color: var(--btn-secondary-color-hover);
   }
@@ -76,12 +64,9 @@
 .ds-btn-warning[type='submit'],
 .ds-btn-warning[type='button'],
 .ds-btn-warning[type='reset'] {
-  @apply hover:no-underline
-    print:border-2 print:border-error print:shadow-none;
-  box-shadow: var(--btn-warning-box-shadow);
-  background-color: var(--btn-warning-background-color);
-  color: var(--btn-warning-color);
+  @apply util-btn-warning util-btn-warning-text;
   &:hover {
+    @apply no-underline;
     background-color: var(--btn-warning-background-color-hover);
     color: var(--btn-warning-color-hover);
   }
@@ -91,9 +76,8 @@
   }
 }
 .ds-btn--disabled {
-  @apply opacity-50 hover:bg-opacity-50
-  print:text-base-400 print:border-opacity-50;
   @apply cursor-not-allowed !important;
+  @apply util-btn--disabled util-btn--disabled-text;
 }
 .ds-close-btn {
   @apply flex flex-nowrap text-right w-max float-right items-center;
@@ -110,6 +94,7 @@
   .ds-svg-icon {
     fill: var(--btn-primary-color);
   }
+  /* stylelint-disable-next-line digigov/nest-related-rules */
   .ds-svg-icon--more-vert {
     @apply h-6 w-6 md:h-8 md:w-8;
   }

package/src/components/button.native.css

@@ -0,0 +1,55 @@
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+/* stylelint-disable digigov/nest-related-rules */
+@import './button.common.css';
+
+.ds-btn {
+  @apply util-btn min-h-4 flex-row flex-nowrap justify-center;
+  border-bottom-width: var(--btn-border-bottom-width-native);
+  border-bottom-color: var(--btn-border-bottom-color-native);
+  padding-top: calc(1.5 * var(--btn-padding-y)) !important;
+  padding-bottom: calc(1.5 * var(--btn-padding-y)) !important;
+}
+.ds-btn__text {
+  @apply util-btn-text min-h-4 text-center;
+}
+.ds-btn--dense {
+  @apply min-h-6;
+}
+.ds-btn--dense__text {
+  @apply min-h-4;
+}
+.ds-btn--disabled {
+  @apply util-btn--disabled;
+}
+.ds-btn--disabled__text {
+  @apply util-btn--disabled-text;
+}
+.ds-btn-primary {
+  @apply util-btn-primary util-btn;
+}
+.ds-btn-primary__text {
+  @apply util-btn-primary-text;
+}
+.ds-btn-secondary {
+  @apply util-btn-secondary;
+}
+.ds-btn-secondary__text {
+  @apply util-btn-secondary-text;
+}
+.ds-btn-warning {
+  @apply util-btn-warning;
+}
+.ds-btn-warning__text {
+  @apply util-btn-warning-text;
+}
+.ds-btn-cta {
+  padding-top: calc(2.25 * var(--btn-padding-y)) !important;
+  padding-bottom: calc(2.25 * var(--btn-padding-y)) !important;
+}
+
+.ds-btn-cta__text {
+  @apply util-btn-cta-text;
+}
+.ds-btn-cta__icon {
+  fill: var(--color-white) !important;
+}

package/src/components/card.common.css

@@ -0,0 +1,33 @@
+@tailwind utilities;
+
+@layer utilities {
+  .util-card {
+    @apply mb-7 text-base-content max-w-full bg-base-100;
+    border-radius: var(--card-border-radius);
+  }
+  .util-card--border {
+    @apply border-2 border-base-content p-6;
+  }
+  .util-card--border-top {
+    @apply border-t border-base-300 pt-4;
+  }
+  .util-card--border-light {
+    @apply border-base-300;
+  }
+  .util-card--border-dark {
+    @apply border-base-content;
+  }
+  .util-card--divider {
+    --card-border-radius: 0;
+    @apply border-b border-base-300 pb-4 mb-4;
+  }
+  .util-card__heading-text {
+    @apply md:text-2xl text-xl font-bold;
+  }
+  .util-card__body {
+    @apply flex flex-col gap-3 md:gap-4;
+  }
+  .util-card__action {
+    @apply flex flex-wrap items-center gap-y-4 mt-auto;
+  }
+}

package/src/components/card.css

@@ -1,6 +1,7 @@
+@import './card.common.css';
+
 .ds-card {
-  @apply mb-7 text-base-content max-w-full;
-  border-radius: var(--card-border-radius);
+  @apply util-card;
   &.ds-card--dense,
   .ds-dense & {
     @apply mb-5;
@@ -9,7 +10,7 @@
     }
   }
   &.ds-card--border {
-    @apply border-2 border-base-content p-6;
+    @apply util-card--border;
     &.ds-card--border-light {
       @apply border;
     }
@@ -19,7 +20,7 @@
     }
   }
   &.ds-card--border-top {
-    @apply border-t border-base-300 pt-4;
+    @apply util-card--border-top;
     &.ds-card--border-dark {
       @apply border-t-3;
     }
@@ -29,8 +30,7 @@
     }
   }
   &.ds-card--divider {
-    --card-border-radius: 0;
-    @apply border-b border-base-300 pb-4 mb-4;
+    @apply util-card--divider;
   }
   &.ds-card--cta {
     .ds-card__body {
@@ -54,26 +54,26 @@
     }
   }
   &.ds-card--border-light {
-    @apply border-base-300;
+    @apply util-card--border-light;
   }
   &.ds-card--border-dark {
-    @apply border-base-content;
+    @apply util-card--border-dark;
   }
   &.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 w-full h-40
   /* @apply  h-40 -mx-6 */
   bg-base-200 bg-cover bg-top
   border border-base-300;
 }
 .ds-card__heading {
-  @apply md:text-2xl text-xl font-bold;
+  @apply util-card__heading-text;
   word-break: break-word;
 }
 .ds-card__content {
@@ -82,7 +82,7 @@
   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.  */

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 & {
@@ -34,7 +36,7 @@
   }
 }
 .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,8 +45,7 @@
   @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;
+  @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;
@@ -52,14 +53,11 @@
     box-sizing: border-box;
   }
   &::after {
-    @apply absolute bg-transparent opacity-0 box-border
-    border-accent border-b-5 border-l-5 border-t-0 border-r-0;
+    @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;
-    transform: rotate(-45deg);
   }
   &:checked {
     &::after {

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,5 +1,7 @@
+@import './chip.common.css';
+
 .ds-chips {
-  @apply flex flex-wrap list-none gap-2 items-center;
+  @apply util-chips gap-x-2 gap-y-2 list-none;
   &.ds-chips--horizontal {
     @apply md:flex md:flex-row md:flex-wrap;
   }
@@ -22,8 +24,7 @@
     }
   }
   .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;
+    @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;
@@ -37,7 +38,7 @@
   }
 }
 .ds-chip__key-value {
-  @apply font-bold mr-2;
+  @apply util-chip__key-value util-chip__key-value-text;
 }
 
 /* overrides */

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

@@ -1,13 +1,13 @@
 .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__container--wrap-lines {
-    @apply whitespace-pre-wrap overflow-x-hidden;
-  }
 }
 .ds-code-block__header {
   @apply sticky left-0 flex mb-0.5 items-start;
@@ -26,17 +26,12 @@
   @apply text-sm sm:text-base;
 }
 .ds-code--line-number {
-  width: 2.5em;
-  text-align: right;
-  padding-right: 0.5em;
-  pointer-events: none;
-  user-select: none;
-  display: inline-block;  
-  color: #999;
+  @apply inline-block text-right pointer-events-none select-none pr-0.5 w-6 text-base-500;
 }
 .ds-code--highlighted-line {
-  background-color: #ffe2e2;
+  background-color: rgba(var(--color-orange-100-rgb), 0.3);
 }
+
 /* copied styles from 'highlight.js/styles/github.css' */
 .ds-code--doctag,
 .ds-code--keyword,
@@ -46,14 +41,14 @@
 .ds-code--type,
 .ds-code--variable.language_ {
   /* prettylights-syntax-keyword */
-  color: #d73a49
+  color: var(--color-red-300) !important;
 }
 .ds-code--title,
 .ds-code--title.class_,
 .ds-code--title.class_.inherited__,
 .ds-code--title.function_ {
   /* prettylights-syntax-entity */
-  color: #6f42c1
+  color: var(--color-purple-400);
 }
 .ds-code--attr,
 .ds-code--attribute,
@@ -66,64 +61,62 @@
 .ds-code--selector-class,
 .ds-code--selector-id {
   /* prettylights-syntax-constant */
-  color: #005cc5
+  color: var(--color-green-400) !important;
 }
 .ds-code--regexp,
 .ds-code--string,
 .ds-code--meta .ds-code--string {
   /* prettylights-syntax-string */
-  color: #032f62
+  color: var(--color-blue-600) !important;
 }
 .ds-code--built_in,
 .ds-code--symbol {
   /* prettylights-syntax-variable */
-  color: #e36209
+  color: var(--color-orange-500);
 }
 .ds-code--comment,
 .ds-code--code,
 .ds-code--formula {
   /* prettylights-syntax-comment */
-  color: #6a737d
+  @apply text-base-600;
 }
 .ds-code--name,
 .ds-code--quote,
 .ds-code--selector-tag,
 .ds-code--selector-pseudo {
   /* prettylights-syntax-entity-tag */
-  color: #22863a
+  color: var(--color-green-400) !important;
 }
 .ds-code--subst {
   /* prettylights-syntax-storage-modifier-import */
-  color: #24292e
+  @apply text-base-900;
 }
 .ds-code--section {
   /* prettylights-syntax-markup-heading */
-  color: #005cc5;
-  font-weight: bold
+  @apply font-bold;
+  color: var(--color-blue-500);
 }
 .ds-code--bullet {
   /* prettylights-syntax-markup-list */
-  color: #735c0f
+  color: var(--color-orange-600);
 }
 .ds-code--emphasis {
   /* prettylights-syntax-markup-italic */
-  color: #24292e;
-  font-style: italic
+  @apply italic text-base-900;
 }
 .ds-code--strong {
   /* prettylights-syntax-markup-bold */
-  color: #24292e;
-  font-weight: bold
+  @apply font-bold text-base-900;
 }
 .ds-code--addition {
   /* prettylights-syntax-markup-inserted */
-  color: #22863a;
-  background-color: #f0fff4
+  color: var(--color-green-500);
+  background-color: rgba(var(--color-green-100-rgb), 0.3);
 }
 .ds-code--deletion {
   /* prettylights-syntax-markup-deleted */
-  color: #b31d28;
-  background-color: #ffeef0
+  color: var(--color-red-500);
+  background-color: rgba(var(--color-red-100-rgb), 0.3);
 }
 .ds-code--char.escape_,
 .ds-code--link,
@@ -132,5 +125,4 @@
 .ds-code--punctuation,
 .ds-code--tag {
   /* purposely ignored */
-  
-}
+}

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

@@ -35,7 +35,7 @@
     }
   }
   .ds-copy-to-clipboard__message {
-    @apply bg-success py-4 px-6 absolute mt-4 text-center z-50 w-fit md:w-max;
+    @apply bg-success py-4 px-6 absolute mt-4 text-center z-40 w-fit md:w-max;
     &::before {
       @apply w-4 h-4 border-t-8 border-l-8 border-success transform rotate-45
       absolute -top-1;

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

@@ -0,0 +1,26 @@
+.ds-copy-to-clipboard {
+  @apply flex z-10;
+}
+.ds-copy-to-clipboard--hidden {
+  @apply hidden w-0 h-0;
+}
+.ds-copy-to-clipboard__before {
+  @apply w-4 h-4 border-t-8 border-l-8 border-success absolute bottom-1;
+  /* stylelint-disable-next-line plugin/no-react-native-incompatible-css */
+  transform: rotate(45deg);
+  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 md:mb-8 mb-4;
+  }
+  .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,15 @@
     @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;
+  &.ds-details__content--secondary {
+    @apply border-0 bg-base-200 py-4 mt-2;
+    border-radius:0 0 0.25rem 0.25rem;
+  }
   > *:last-child {
     @apply mb-0;
   }