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

package/src/components/typography.native.css

@@ -0,0 +1,128 @@
+/* stylelint-disable digigov/nest-related-rules */
+@import './typography.common.css';
+
+.ds-\!-font-weight-bold__text {
+  @apply util-font-weight-bold-text;
+}
+
+/* Heading */
+.ds-heading-xl {
+  @apply util-heading-xl;
+}
+.ds-heading-xl__text {
+  @apply util-heading-xl-text;
+  margin-bottom: var(--heading-xl-margin-bottom);
+  line-height: calc(
+    var(--heading-xl-line-height) * var(--heading-xl-font-size)
+  );
+}
+.ds-heading-lg__text {
+  @apply util-heading-lg-text;
+  margin-bottom: var(--heading-lg-margin-bottom);
+  line-height: calc(
+    var(--heading-lg-line-height) * var(--heading-lg-font-size)
+  );
+}
+.ds-heading-md__text {
+  @apply util-heading-md-text;
+  margin-bottom: var(--heading-md-margin-bottom);
+  line-height: calc(
+    var(--heading-md-line-height) * var(--heading-md-font-size)
+  );
+}
+.ds-heading-sm__text {
+  @apply util-heading-sm-text;
+  margin-bottom: var(--heading-sm-margin-bottom);
+  line-height: calc(
+    var(--heading-sm-line-height) * var(--heading-sm-font-size)
+  );
+}
+.ds-heading-xs__text {
+  @apply util-heading-xs-text;
+  margin-bottom: var(--heading-xs-margin-bottom);
+  line-height: calc(
+    var(--heading-xs-line-height) * var(--heading-xs-font-size)
+  );
+}
+
+/* Paragraph */
+.ds-body__text {
+  @apply util-body-text;
+  line-height: calc(var(--body-line-height) * var(--body-font-size));
+}
+.ds-body--lg__text {
+  @apply util-body-lg-text;
+  line-height: calc(var(--body--lg-line-height) * var(--body--lg-font-size));
+}
+.ds-body--sm__text {
+  @apply util-body-sm-text;
+  line-height: calc(var(--body__sm-line-height) * var(--body__sm-font-size));
+}
+
+/* Hint */
+.ds-hint {
+  @apply util-hint flex flex-row;
+}
+.ds-hint__text {
+  @apply util-hint-text;
+  line-height: calc(var(--hint-line-height) * var(--hint-font-size));
+}
+.ds-hint--lg__text {
+  @apply util-hint-lg-text;
+  line-height: calc(var(--hint--lg-line-height) * var(--hint--lg-font-size));
+}
+.ds-hint--sm__text {
+  @apply util-hint-sm-text;
+  line-height: calc(var(--hint--sm-line-height) * var(--hint--sm-font-size));
+}
+
+/* Link */
+.ds-link {
+  @apply util-link focus:border-b-4 border-b-base-content;
+}
+.ds-link__text {
+  @apply util-link-text;
+  line-height: calc(var(--link-line-height) * var(--link-font-size));
+}
+
+/* HeadingCaption */
+.ds-caption-xl {
+  @apply util-caption-xl;
+}
+.ds-caption-xl__text {
+  @apply util-caption-xl-text;
+  line-height: calc(
+    var(--caption-xl-line-height) * var(--caption-xl-font-size)
+  );
+}
+.ds-caption-lg {
+  @apply util-caption-lg;
+}
+.ds-caption-lg__text {
+  @apply util-caption-lg-text;
+  line-height: calc(
+    var(--caption-lg-line-height) * var(--caption-lg-font-size)
+  );
+}
+.ds-caption-md {
+  @apply util-caption-md;
+}
+.ds-caption-md__text {
+  @apply util-caption-md-text;
+  line-height: calc(
+    var(--caption-md-line-height) * var(--caption-md-font-size)
+  );
+}
+
+.ds-list {
+  @apply util-list;
+}
+.ds-list__item {
+  @apply util-list-item;
+}
+.ds-list--bullet {
+  @apply util-list-bullet;
+}
+.ds-list--number {
+  @apply util-list-number;
+}

package/src/components/warning-text.common.css

@@ -0,0 +1,23 @@
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+
+@tailwind utilities;
+
+@layer utilities {
+  .util-warning-text {
+    @apply flex;
+  }
+  .util-warning-text-text {
+    font-size: var(--warning-text-font-size);
+  }
+  .util-warning-text__icon {
+    @apply md:min-h-10 w-10 h-10 rounded-3xl bg-base-content 
+    print:bg-white print:border-2 print:border-base-content;
+  }
+  .util-warning-text__icon-text {
+    @apply text-base-content-invert font-bold leading-10 text-center 
+    print:text-base-content;
+  }
+  .util-warning-text__assistive {
+    @apply absolute w-px h-px m-0 p-0 border-0 overflow-hidden !important;
+  }
+}

package/src/components/warning-text.css

@@ -1,23 +1,25 @@
+@import './warning-text.common.css';
+
 .ds-warning-text {
+  @apply util-warning-text py-4 px-0;
   font-size: var(--warning-text-font-size);
-  @apply flex py-4 px-0;
+  &.ds-warning-text--dense,
+  .ds-dense & {
+    .ds-warning-text__icon {
+      @apply mr-4 md:mr-5;
+    }
+  }
   .ds-warning-text__icon {
     @apply text-base-content-invert font-bold bg-base-content text-3xl leading-10 text-center 
     rounded-3xl md:min-h-10 min-w-10 h-fit mr-6 mt-1
     print:bg-white print:border-2 print:border-base-content print:text-base-content;
   }
-  .ds-warning-text__text {
+  .ds-warning-text__content {
     @apply flex items-center;
   }
-  .ds-warning-text__assistive {
-    @apply absolute w-px h-px m-0 p-0 border-0 overflow-hidden whitespace-nowrap !important;
-    clip: rect(0 0 0 0) !important;
-    -webkit-clip-path: inset(50%) !important;
-    clip-path: inset(50%) !important;
-  }
-  &.ds-warning-text--dense, .ds-dense & {
-    .ds-warning-text__icon  {
-      @apply mr-4 md:mr-5;
-    }
-  }
+}
+.ds-warning-text__assistive {
+  @apply absolute w-px h-px m-0 p-0 border-0 overflow-hidden whitespace-nowrap !important;
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
 }

package/src/components/warning-text.native.css

@@ -0,0 +1,22 @@
+@import './warning-text.common.css';
+
+.ds-warning-text {
+  @apply util-warning-text flex-row items-center mb-4;
+}
+.ds-warning-text__content {
+  @apply flex-1 flex;
+}
+.ds-warning-text__content__text {
+  /* @apply util-warning-text-text font-bold text-base-content flex-1; */
+  @apply text-base-content font-bold p-0 m-0;
+  font-size: var(--warning-text-font-size);
+}
+.ds-warning-text__icon {
+  @apply util-warning-text__icon mr-4;
+}
+.ds-warning-text__icon__text {
+  @apply util-warning-text__icon-text text-2xl;
+}
+.ds-warning-text__assistive {
+  @apply util-warning-text__assistive;
+}

package/src/index.native.css

@@ -0,0 +1,26 @@
+@import './utilities/index.native';
+@import './components/button.native';
+@import './components/copy-to-clipboard.native';
+@import './components/layout.native';
+@import './components/header.native';
+@import './components/typography.native';
+@import './components/card.native';
+@import './components/blockquote.native';
+@import './components/summary-list.native';
+@import './components/details.native';
+@import './components/dropdown.native';
+@import './components/notification-banner.native';
+@import './components/nav.native';
+@import './components/phase-banner.native';
+@import './components/svg-icons.native';
+@import './components/panel.native';
+@import './components/warning-text.native';
+@import './components/form.native';
+@import './components/checkboxes.native';
+@import './components/radios.native';
+@import './components/modal.native';
+@import './components/loader.native';
+@import './components/stack.native';
+@import './components/chip.native';
+@import './components/skeleton.native';
+@import './components/accordion.native';

package/src/pages/index.js

@@ -397,7 +397,7 @@ export default function Home() {
                     <a className="ds-footer__link" href="#3">Σύνδεσμος 3</a>
                   </li>
                 </ul>
-                <div className="ds-footer__content--logos">
+                <div className="ds-footer__content__logos">
                   <img className="ds-footer__logo" src="/img/government-logo2.svg" alt="government logo" />
                   <img className="ds-footer__logo" src="/img/government-logo2.svg" alt="government logo" />
                 </div>

package/src/utilities/gap.css

@@ -0,0 +1,141 @@
+.ds-gap-1 {
+  @apply gap-1;
+}
+.ds-gap-2 {
+  @apply gap-2;
+}
+.ds-gap-4 {
+  @apply gap-4;
+}
+.ds-gap-6 {
+  @apply gap-6;
+}
+.ds-gap-8 {
+  @apply gap-8;
+}
+.ds-gap-10 {
+  @apply gap-10;
+}
+.ds-gap-12 {
+  @apply gap-12;
+}
+.ds-gap-xs-1 {
+  @apply gap-1;
+}
+.ds-gap-xs-2 {
+  @apply gap-2;
+}
+.ds-gap-xs-4 {
+  @apply gap-4;
+}
+.ds-gap-xs-5 {
+  @apply gap-5;
+}
+.ds-gap-xs-6 {
+  @apply gap-6;
+}
+.ds-gap-xs-8 {
+  @apply gap-8;
+}
+.ds-gap-xs-10 {
+  @apply gap-10;
+}
+.ds-gap-xs-12 {
+  @apply gap-12;
+}
+.ds-gap-sm-1 {
+  @apply sm:gap-1;
+}
+.ds-gap-sm-2 {
+  @apply sm:gap-2;
+}
+.ds-gap-sm-4 {
+  @apply sm:gap-4;
+}
+.ds-gap-sm-5 {
+  @apply sm:gap-5;
+}
+.ds-gap-sm-6 {
+  @apply sm:gap-6;
+}
+.ds-gap-sm-8 {
+  @apply sm:gap-8;
+}
+.ds-gap-sm-10 {
+  @apply sm:gap-10;
+}
+.ds-gap-sm-12 {
+  @apply sm:gap-12;
+}
+.ds-gap-md-1 {
+  @apply md:gap-1;
+}
+.ds-gap-md-2 {
+  @apply md:gap-2;
+}
+.ds-gap-md-4 {
+  @apply md:gap-4;
+}
+.ds-gap-md-5 {
+  @apply md:gap-5;
+}
+.ds-gap-md-6 {
+  @apply md:gap-6;
+}
+.ds-gap-md-8 {
+  @apply md:gap-8;
+}
+.ds-gap-md-10 {
+  @apply md:gap-10;
+}
+.ds-gap-md-12 {
+  @apply md:gap-12;
+}
+.ds-gap-lg-1 {
+  @apply lg:gap-1;
+}
+.ds-gap-lg-2 {
+  @apply lg:gap-2;
+}
+.ds-gap-lg-4 {
+  @apply lg:gap-4;
+}
+.ds-gap-lg-5 {
+  @apply lg:gap-5;
+}
+.ds-gap-lg-6 {
+  @apply lg:gap-6;
+}
+.ds-gap-lg-8 {
+  @apply lg:gap-8;
+}
+.ds-gap-lg-10 {
+  @apply lg:gap-10;
+}
+.ds-gap-lg-12 {
+  @apply lg:gap-12;
+}
+.ds-gap-xl-1 {
+  @apply xl:gap-1;
+}
+.ds-gap-xl-2 {
+  @apply xl:gap-2;
+}
+.ds-gap-xl-4 {
+  @apply xl:gap-4;
+}
+.ds-gap-xl-5 {
+  @apply xl:gap-5;
+}
+.ds-gap-xl-6 {
+  @apply xl:gap-6;
+}
+.ds-gap-xl-8 {
+  @apply xl:gap-8;
+}
+.ds-gap-xl-10 {
+  @apply xl:gap-10;
+}
+.ds-gap-xl-12 {
+  @apply xl:gap-12;
+}