@digigov/css 2.0.0-2445d5cb → 2.0.0-36b707c1

package/src/components/summary-list.css

@@ -1,9 +1,10 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+@import './summary-list.common.css';
+
 .ds-summary-list {
-  @apply m-0 mb-6 sm:mb-8 w-full
-  sm:table sm:w-full sm:table-fixed;
-  font-size: var(--summary-list-font-size);
+  @apply util-summary-list sm:table sm:table-fixed util-summary-list-text;
   &.ds-summary-list--no-border {
-    >.ds-summary-list__row:last-child {
+    > .ds-summary-list__row:last-child {
       @apply border-b-0 pb-0 mb-0;
     }
     .ds-summary-list__key,
@@ -13,7 +14,7 @@
     }
   }
   &.ds-summary-list--no-last-border {
-    >.ds-summary-list__row:last-child {
+    > .ds-summary-list__row:last-child {
       @apply border-b-0 pb-0 mb-0;
       .ds-summary-list__key,
       .ds-summary-list__value,
@@ -25,9 +26,7 @@
 }
 
 .ds-summary-list__row {
-  @apply block sm:flex
-  pb-4 mb-4 border-b border-solid border-base-300
-  sm:pb-0 sm:mb-0 sm:border-0 print:flex print:flex-row print:flex-nowrap;
+  @apply block util-summary-list__row;
   &.ds-summary-list__row--no-border {
     .ds-summary-list__key,
     .ds-summary-list__value,
@@ -37,7 +36,70 @@
   }
 }
 .ds-summary-list__key {
-  @apply font-bold mb-1 sm:w-3/12;
+  @apply util-summary-list__key-text util-summary-list__key;
+  &.ds-summary-list__key--sm-3 {
+    @apply util-summary-list__key--sm-3;
+  }
+  &.ds-summary-list__key--sm-4 {
+    @apply util-summary-list__key--sm-4;
+  }
+  &.ds-summary-list__key--sm-5 {
+    @apply util-summary-list__key--sm-5;
+  }
+  &.ds-summary-list__key--sm-6 {
+    @apply util-summary-list__key--sm-6;
+  }
+  &.ds-summary-list__key--sm-7 {
+    @apply util-summary-list__key--sm-7;
+  }
+  &.ds-summary-list__key--sm-8 {
+    @apply util-summary-list__key--sm-8;
+  }
+  &.ds-summary-list__key--sm-9 {
+    @apply util-summary-list__key--sm-9;
+  }
+  &.ds-summary-list__key--md-3 {
+    @apply util-summary-list__key--md-3;
+  }
+  &.ds-summary-list__key--md-4 {
+    @apply util-summary-list__key--md-4;
+  }
+  &.ds-summary-list__key--md-5 {
+    @apply util-summary-list__key--md-5;
+  }
+  &.ds-summary-list__key--md-6 {
+    @apply util-summary-list__key--md-6;
+  }
+  &.ds-summary-list__key--md-7 {
+    @apply util-summary-list__key--md-7;
+  }
+  &.ds-summary-list__key--md-8 {
+    @apply util-summary-list__key--md-8;
+  }
+  &.ds-summary-list__key--md-9 {
+    @apply util-summary-list__key--md-9;
+  }
+  &.ds-summary-list__key--lg-3 {
+    @apply util-summary-list__key--lg-3;
+  }
+  &.ds-summary-list__key--lg-4 {
+    @apply util-summary-list__key--lg-4;
+  }
+  &.ds-summary-list__key--lg-5 {
+    @apply util-summary-list__key--lg-5;
+  }
+  &.ds-summary-list__key--lg-6 {
+    @apply util-summary-list__key--lg-6;
+  }
+  &.ds-summary-list__key--lg-7 {
+    @apply util-summary-list__key--lg-7;
+  }
+  &.ds-summary-list__key--lg-8 {
+    @apply util-summary-list__key--lg-8;
+  }
+  &.ds-summary-list__key--lg-9 {
+    @apply util-summary-list__key--lg-9;
+  }
 }
 @media print {
   .ds-summary-list__key {
@@ -45,22 +107,17 @@
   }
 }
 .ds-summary-list__value {
-  @apply sm:w-6/12;
+  @apply util-summary-list__value;
 }
 .ds-summary-list__actions {
-  @apply sm:w-3/12 sm:pr-0 sm:text-right;
+  @apply util-summary-list__actions;
 }
 
 /* When "actions" are right after "key" */
 .ds-summary-list__key + .ds-summary-list__actions {
-  @apply sm:w-9/12;
+  @apply sm:flex-1;
 }
 
-/* When "value" is 1st or 2nd among 2 children */
-.ds-summary-list__value:nth-child(2):nth-last-child(1),
-.ds-summary-list__value:nth-child(1):nth-last-child(2) {
-  @apply sm:w-9/12;
-}
 
 /* When there is only one child */
 .ds-summary-list__key:only-child,

package/src/components/summary-list.native.css

@@ -0,0 +1,93 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+@import './summary-list.common.css';
+
+.ds-summary-list {
+  @apply util-summary-list;
+}
+.ds-summary-list__text {
+  @apply util-summary-list-text;
+}
+.ds-summary-list__row {
+  @apply util-summary-list__row gap-y-2;
+}
+.ds-summary-list__key {
+  @apply util-summary-list__key;
+}
+
+.ds-summary-list__key--sm-3 {
+  @apply util-summary-list__key--sm-3;
+}
+.ds-summary-list__key--sm-4 {
+  @apply util-summary-list__key--sm-4;
+}
+.ds-summary-list__key--sm-5 {
+  @apply util-summary-list__key--sm-5;
+}
+.ds-summary-list__key--sm-6 {
+  @apply util-summary-list__key--sm-6;
+}
+.ds-summary-list__key--sm-7 {
+  @apply util-summary-list__key--sm-7;
+}
+.ds-summary-list__key--sm-8 {
+  @apply util-summary-list__key--sm-8;
+}
+.ds-summary-list__key--sm-9 {
+  @apply util-summary-list__key--sm-9;
+}
+.ds-summary-list__key--md-3 {
+  @apply util-summary-list__key--md-3;
+}
+.ds-summary-list__key--md-4 {
+  @apply util-summary-list__key--md-4;
+}
+.ds-summary-list__key--md-5 {
+  @apply util-summary-list__key--md-5;
+}
+.ds-summary-list__key--md-6 {
+  @apply util-summary-list__key--md-6;
+}
+.ds-summary-list__key--md-7 {
+  @apply util-summary-list__key--md-7;
+}
+.ds-summary-list__key--md-8 {
+  @apply util-summary-list__key--md-8;
+}
+.ds-summary-list__key--md-9 {
+  @apply util-summary-list__key--md-9;
+}
+.ds-summary-list__key--lg-3 {
+  @apply util-summary-list__key--lg-3;
+}
+.ds-summary-list__key--lg-4 {
+  @apply util-summary-list__key--lg-4;
+}
+.ds-summary-list__key--lg-5 {
+  @apply util-summary-list__key--lg-5;
+}
+.ds-summary-list__key--lg-6 {
+  @apply util-summary-list__key--lg-6;
+}
+.ds-summary-list__key--lg-7 {
+  @apply util-summary-list__key--lg-7;
+}
+.ds-summary-list__key--lg-8 {
+  @apply util-summary-list__key--lg-8;
+}
+.ds-summary-list__key--lg-9 {
+  @apply util-summary-list__key--lg-9;
+}
+
+.ds-summary-list__key__text {
+  @apply util-summary-list-text util-summary-list__key-text;
+}
+.ds-summary-list__value {
+  @apply util-summary-list__value;
+}
+.ds-summary-list__value__text {
+  @apply util-summary-list-text;
+}
+.ds-summary-list__actions {
+  @apply util-summary-list__actions;
+  align-self: 'flex-start';
+}

package/src/components/svg-icons.common.css

@@ -0,0 +1,56 @@
+@tailwind utilities;
+
+@layer utilities {
+  .util-svg-icon {
+    @apply h-4 w-4;
+    fill: var(--color-base-content);
+  }
+  .util-svg-icon--base-content {
+    fill: var(--color-base-content) !important;
+  }
+  .util-svg-icon--dark {
+    fill: var(--color-black) !important;
+  }
+  .util-svg-icon--white {
+    fill: var(--color-white) !important;
+  }
+  .util-svg-icon--gray {
+    fill: var(--color-base-700) !important;
+  }
+  .util-svg-icon--primary {
+    fill: var(--color-primary) !important;
+  }
+  .util-svg-icon--success {
+    fill: var(--color-success) !important;
+  }
+  .util-svg-icon--warning {
+    fill: var(--color-warning) !important;
+  }
+  .util-svg-icon--error {
+    fill: var(--color-error-text) !important;
+  }
+  .util-svg-icon--focus {
+    fill: var(--color-focus) !important;
+  }
+  .util-svg-icon--link {
+    fill: var(--color-link) !important;
+  }
+  .util-svg-icon--info {
+    fill: var(--color-info) !important;
+  }
+  .util-svg-icon--xs {
+    @apply h-3 w-3 !important;
+  }
+  .util-svg-icon--sm {
+    @apply h-4 w-4 !important;
+  }
+  .util-svg-icon--md {
+    @apply h-6 w-6 !important;
+  }
+  .util-svg-icon--lg {
+    @apply h-8 w-8 !important;
+  }
+  .util-svg-icon--xl {
+    @apply h-10 w-10 !important;
+  }
+}

package/src/components/svg-icons.native.css

@@ -0,0 +1,55 @@
+@import './svg-icons.common.css';
+
+.ds-svg-icon {
+  @apply util-svg-icon;
+  flex-direction:'row';
+  flex-wrap:'wrap';
+}
+.ds-svg-icon--base-content {
+  @apply util-svg-icon--base-content;
+}
+.ds-svg-icon--dark {
+  @apply util-svg-icon--dark;
+}
+.ds-svg-icon--white {
+  @apply util-svg-icon--white;
+}
+.ds-svg-icon--gray {
+  @apply util-svg-icon--gray;
+}
+.ds-svg-icon--primary {
+  @apply util-svg-icon--primary;
+}
+.ds-svg-icon--success {
+  @apply util-svg-icon--success;
+}
+.ds-svg-icon--warning {
+  @apply util-svg-icon--warning;
+}
+.ds-svg-icon--error {
+  @apply util-svg-icon--error;
+}
+.ds-svg-icon--focus {
+  @apply util-svg-icon--focus;
+}
+.ds-svg-icon--link {
+  @apply util-svg-icon--link;
+}
+.ds-svg-icon--info {
+  @apply util-svg-icon--info;
+}
+.ds-svg-icon--xs {
+  @apply util-svg-icon--xs;
+}
+.ds-svg-icon--sm {
+  @apply util-svg-icon--sm;
+}
+.ds-svg-icon--md {
+  @apply util-svg-icon--md;
+}
+.ds-svg-icon--lg {
+  @apply util-svg-icon--lg;
+}
+.ds-svg-icon--xl {
+  @apply util-svg-icon--xl;
+}

package/src/components/test.css

@@ -0,0 +1,7 @@
+.ds-underline {
+  text-decoration-line: underline;
+}
+
+.ds-button:focus {
+    @apply ds-underline;
+}

package/src/components/typography.common.css

@@ -0,0 +1,140 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+@tailwind utilities;
+
+@layer utilities {
+  .util-font-weight-bold-text {
+    @apply font-bold !important;
+  }
+
+  .util-heading-xl {
+    @apply mx-0 max-w-2xl;
+  }
+  .util-heading-xl-text {
+    font-size: var(--heading-xl-font-size);
+    line-height: var(--heading-xl-line-height);
+    font-weight: var(--heading-xl-font-weight);
+  }
+  .util-heading-lg-text {
+    font-size: var(--heading-lg-font-size);
+    line-height: var(--heading-lg-line-height);
+    font-weight: var(--heading-lg-font-weight);
+  }
+  .util-heading-md-text {
+    font-size: var(--heading-md-font-size);
+    line-height: var(--heading-md-line-height);
+    font-weight: var(--heading-md-font-weight);
+  }
+  .util-heading-sm-text {
+    font-size: var(--heading-sm-font-size);
+    line-height: var(--heading-sm-line-height);
+    font-weight: var(--heading-sm-font-weight);
+  }
+  .util-heading-xs-text {
+    font-size: var(--heading-xs-font-size);
+    line-height: var(--heading-xs-line-height);
+    font-weight: var(--heading-xs-font-weight);
+  }
+
+  .util-body-text {
+    font-size: var(--body-font-size);
+    line-height: var(--body-line-height);
+    margin-bottom: var(--body-margin-bottom);
+    color: var(--body-color);
+  }
+  .util-body-lg-text {
+    font-size: var(--body--lg-font-size);
+    line-height: var(--body--lg-line-height);
+  }
+  .util-body-sm-text {
+    font-size: var(--body--sm-font-size);
+    line-height: var(--body--sm-line-height);
+  }
+  .util-link {
+    @apply focus:bg-focus;
+    padding: var(--link-padding);
+  }
+  .util-link-text {
+    /* @apply focus:text-link-active underline; */
+    @apply underline;
+    color: var(--link-color);
+    font-size: var(--link-font-size);
+    line-height: var(--link-line-height);
+    /* &:focus {
+      text-decoration: none !important;
+    } */
+  }
+
+  .util-caption-xl {
+    @apply mx-0 font-normal;
+  }
+  .util-caption-xl-text {
+    color: var(--caption-xl-color);
+    font-size: var(--caption-xl-font-size);
+    margin-bottom: var(--caption-xl-margin-bottom);
+    font-weight: var(--caption-xl-font-weight);
+    line-height: var(--caption-xl-line-height);
+  }
+  .util-caption-lg {
+    @apply mx-0 font-normal;
+  }
+  .util-caption-lg-text {
+    color: var(--caption-lg-color);
+    font-size: var(--caption-lg-font-size);
+    margin-bottom: var(--caption-lg-margin-bottom);
+    font-weight: var(--caption-lg-font-weight);
+    line-height: var(--caption-lg-line-height);
+  }
+  .util-caption-md {
+    @apply mx-0 font-normal;
+  }
+  .util-caption-md-text {
+    color: var(--caption-md-color);
+    font-size: var(--caption-md-font-size);
+    margin-bottom: var(--caption-md-margin-bottom);
+    font-weight: var(--caption-md-font-weight);
+    line-height: var(--caption-md-line-height);
+  }
+
+  /* Hint */
+  .util-hint {
+    margin-bottom: var(--hint-margin-bottom);
+  }
+  .util-hint-text {
+    font-size: var(--hint-font-size);
+    line-height: var(--hint-line-height);
+    color: var(--hint-color);
+  }
+  .util-hint-lg-text {
+    font-size: var(--hint--lg-font-size);
+    line-height: var(--hint--lg-line-height);
+  }
+  .util-hint-sm-text {
+    font-size: var(--hint--sm-font-size);
+    line-height: var(--hint--sm-line-height);
+  }
+
+  /* List */
+  .util-list {
+    @apply mt-4;
+
+    @apply md:mb-8 mb-4 text-base-content;
+  }
+  .util-list-bullet {
+    @apply pl-4;
+  }
+  .util-list-number {
+    @apply pl-4;
+  }
+  .util-list-horizontal {
+    @apply flex flex-wrap gap-x-6 gap-y-3;
+  }
+  .util-list-spaced {
+    @apply gap-x-10 gap-y-5;
+  }
+  .util-list-item {
+    @apply mb-2 last:mb-0;
+  }
+  .util-list-item-horizontal {
+    @apply w-full;
+  }
+}

package/src/components/typography.css

@@ -1,86 +1,54 @@
+@import './typography.common.css';
+
 .ds-heading-xl {
-  @apply mx-0 max-w-2xl;
-  font-size: var(--heading-xl-font-size);
-  line-height: var(--heading-xl-line-height);
-  margin-bottom: var(--heading-xl-margin-bottom);
-  font-weight: var(--heading-xl-font-weight);
+  @apply util-heading-xl util-heading-xl-text;
   letter-spacing: var(--heading-xl-letter-spacing);
+  margin-bottom: var(--heading-xl-margin-bottom);
 }
 .ds-heading-lg {
-  @apply mx-0;
-  font-size: var(--heading-lg-font-size);
-  line-height: var(--heading-lg-line-height);
-  margin-bottom: var(--heading-lg-margin-bottom);
-  font-weight: var(--heading-lg-font-weight);
+  @apply util-heading-lg-text mx-0;
   letter-spacing: var(--heading-lg-letter-spacing);
+  margin-bottom: var(--heading-lg-margin-bottom);
 }
 .ds-heading-md {
-  @apply mx-0;
-  font-size: var(--heading-md-font-size);
-  line-height: var(--heading-md-line-height);
+  @apply util-heading-md-text mx-0;
+  letter-spacing: var(--heading-lg-letter-spacing);
   margin-bottom: var(--heading-md-margin-bottom);
-  font-weight: var(--heading-md-font-weight);
-  letter-spacing: var(--heading-md-letter-spacing);
 }
 .ds-heading-sm {
-  @apply mx-0;
-  font-size: var(--heading-sm-font-size);
-  line-height: var(--heading-sm-line-height);
+  @apply util-heading-sm-text mx-0;
+  letter-spacing: var(--heading-lg-letter-spacing);
   margin-bottom: var(--heading-sm-margin-bottom);
-  font-weight: var(--heading-sm-font-weight);
-  letter-spacing: var(--heading-sm-letter-spacing);
 }
 .ds-heading-xs {
-  @apply mx-0;
-  font-size: var(--heading-xs-font-size);
-  line-height: var(--heading-xs-line-height);
+  @apply util-heading-xs-text mx-0;
+  letter-spacing: var(--heading-lg-letter-spacing);
   margin-bottom: var(--heading-xs-margin-bottom);
-  font-weight: var(--heading-xs-font-weight);
-  letter-spacing: var(--heading-xs-letter-spacing);
 }
+
 .ds-heading--break-words {
   @apply break-words;
 }
 .ds-caption-xl {
-  @apply block mx-0 font-normal;
-  color: var(--caption-xl-color);
-  font-size: var(--caption-xl-font-size);
-  line-height: var(--caption-xl-line-height);
-  margin-bottom: var(--caption-xl-margin-bottom);
-  font-weight: var(--caption-xl-font-weight);
+  @apply util-caption-xl util-caption-xl-text block;
   letter-spacing: var(--heading-xl-letter-spacing);
 }
 .ds-caption-lg {
-  @apply block mx-0 font-normal;
-  color: var(--caption-lg-color);
-  font-size: var(--caption-lg-font-size);
-  line-height: var(--caption-lg-line-height);
-  margin-bottom: var(--caption-lg-margin-bottom);
-  font-weight: var(--caption-lg-font-weight);
-  letter-spacing: var(--caption-lg-letter-spacing);
+  @apply util-caption-lg util-caption-lg-text block;
+  letter-spacing: var(--heading-lg-letter-spacing);
 }
 .ds-caption-md {
-  @apply block mx-0 font-normal;
-  color: var(--caption-md-color);
-  font-size: var(--caption-md-font-size);
-  line-height: var(--caption-md-line-height);
-  margin-bottom: var(--caption-md-margin-bottom);
-  font-weight: var(--caption-md-font-weight);
-  letter-spacing: var(--caption-md-letter-spacing);
+  @apply util-caption-md util-caption-md-text block;
+  letter-spacing: var(--heading-md-letter-spacing);
 }
 .ds-hint {
-  font-size: var(--hint-font-size);
-  line-height: var(--hint-line-height);
-  margin-bottom: var(--hint-margin-bottom);
-  color: var(--hint-color);
+  @apply util-hint util-hint-text;
   letter-spacing: var(--hint-letter-spacing);
   &.ds-hint--lg {
-    font-size: var(--hint-lg-font-size);
-    line-height: var(--hint--lg-line-height);
+    @apply util-hint-lg-text;
   }
   &.ds-hint--sm {
-    font-size: var(--hint--sm-font-size);
-    line-height: var(--hint--sm-line-height);
+    @apply util-hint-sm-text;
   }
   &.ds-hint--break-words {
     @apply break-words;
@@ -135,14 +103,13 @@
   @apply font-normal !important;
 }
 .ds-\!-font-weight-bold {
-  @apply font-bold !important;
+  @apply util-font-weight-bold-text;
 }
 .ds-list {
   @apply list-none list-outside mt-4;
   @apply md:mb-8 mb-4 text-base-content;
   font-size: var(--list-font-size);
   line-height: var(--list-line-height);
-  letter-spacing: var(--list-letter-spacing);
   &.ds-list--bullet {
     @apply list-disc list-outside pl-4;
   }
@@ -193,51 +160,32 @@
     column-count: 2;
   }
 }
-.ds-blockquote {
-  @apply mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
-  font-size: var(--blockquote-font-size);
-  line-height: var(--blockquote-line-height);
-  &.ds-blockquote--dense,
-  .ds-dense & {
-    @apply mt-3 md:mb-6 p-3 border-l-6;
-  }
-}
 .ds-body {
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-  margin-bottom: var(--body-margin-bottom);
-  color: var(--body-color);
+  @apply util-body-text;
   letter-spacing: var(--body-letter-spacing);
   &.ds-body--lg {
-    font-size: var(--body--lg-font-size);
-    line-height: var(--body--lg-line-height);
+    @apply util-body-lg-text;
   }
   &.ds-body--sm {
-    font-size: var(--body--sm-font-size);
-    line-height: var(--body--sm-line-height);
+    @apply util-body-sm-text;
   }
   .ds-code {
-    @apply p-2 bg-base-200;
+    @apply p-1 bg-base-200;
   }
 }
 
 .ds-link {
-  @apply focus:text-link-active underline cursor-pointer;
-  color: var(--link-color);
-  padding: var(--link-padding);
-  font-size: var(--link-font-size);
-  line-height: var(--link-line-height);
+  @apply focus:text-link-active util-link util-link-text cursor-pointer;
   letter-spacing: var(--link-letter-spacing);
   &:hover {
     text-decoration-thickness: 2px;
     color: var(--link-color-hover);
   }
   &:focus {
-    color: var(--link-color-active);
-    background-color: var(--color-focus);
     box-shadow:
       0 -2px var(--color-focus),
       0 4px var(--color-base-content);
+
     text-decoration: none !important;
     outline: none;
   }