@orangesk/orange-design-system 2.0.0-beta.19 → 2.0.0-beta.20

package/src/styles/typography/config.scss

@@ -4,35 +4,75 @@
 
 $body-text: (
   small: (
-    font-size: convert.to-rem(16px),
-    line-height: convert.to-rem(24px),
-    font-weight: 400,
-    letter-spacing: convert.to-rem(-0.1px),
+    default: (
+      font-size: convert.to-rem(14px),
+      line-height: convert.to-rem(14px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(0px),
+    ),
+    md: (
+      font-size: convert.to-rem(16px),
+      line-height: convert.to-rem(24px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.1px),
+    ),
+    lg: (
+      font-size: convert.to-rem(16px),
+      line-height: convert.to-rem(24px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.1px),
+    ),
   ),
   default: (
-    font-size: convert.to-rem(18px),
-    line-height: convert.to-rem(26px),
-    font-weight: 400,
-    letter-spacing: convert.to-rem(-0.2px),
+    default: (
+      font-size: convert.to-rem(16px),
+      line-height: convert.to-rem(24px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.1px),
+    ),
+    md: (
+      font-size: convert.to-rem(18px),
+      line-height: convert.to-rem(26px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.2px),
+    ),
+    lg: (
+      font-size: convert.to-rem(18px),
+      line-height: convert.to-rem(26px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.2px),
+    ),
   ),
   large: (
-    font-size: convert.to-rem(20px),
-    line-height: convert.to-rem(30px),
-    font-weight: 400,
-    letter-spacing: convert.to-rem(-0.2px),
+    default: (
+      font-size: convert.to-rem(18px),
+      line-height: convert.to-rem(26px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.2px),
+    ),
+    md: (
+      font-size: convert.to-rem(20px),
+      line-height: convert.to-rem(30px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.2px),
+    ),
+    lg: (
+      font-size: convert.to-rem(20px),
+      line-height: convert.to-rem(30px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.2px),
+    ),
   ),
 );
 
 $heading-base: (
   margin-top: 0,
-  margin-bottom: space.get("large"),
-  font-weight: bold,
+  margin-bottom: space.get("large"), // font-weight: bold,
 );
 
 $display-base: (
   margin-top: 0,
-  margin-bottom: space.get("large"),
-  font-weight: bold,
+  margin-bottom: space.get("large"), // font-weight: bold,
 );
 
 $headings: (
@@ -40,19 +80,19 @@ $headings: (
     default: (
       font-size: convert.to-rem(34px),
       line-height: convert.to-rem(40px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.4px),
     ),
     md: (
       font-size: convert.to-rem(40px),
       line-height: convert.to-rem(46px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
     xl: (
       font-size: convert.to-rem(50px),
       line-height: convert.to-rem(56px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
   ),
@@ -60,19 +100,19 @@ $headings: (
     default: (
       font-size: convert.to-rem(28px),
       line-height: convert.to-rem(32px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.2px),
     ),
     md: (
       font-size: convert.to-rem(34px),
       line-height: convert.to-rem(40px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.4px),
     ),
     xl: (
       font-size: convert.to-rem(40px),
       line-height: convert.to-rem(46px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
   ),
@@ -80,27 +120,27 @@ $headings: (
     default: (
       font-size: convert.to-rem(24px),
       line-height: convert.to-rem(28px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
     md: (
       font-size: convert.to-rem(28px),
       line-height: convert.to-rem(32px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
   ),
   4: (
     default: (
-      font-size: convert.to-rem(16px),
-      line-height: convert.to-rem(20px),
-      font-weight: 700,
+      font-size: convert.to-rem(18px),
+      line-height: convert.to-rem(22px),
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.1px),
     ),
     md: (
       font-size: convert.to-rem(24px),
       line-height: convert.to-rem(28px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.4px),
     ),
   ),
@@ -108,18 +148,24 @@ $headings: (
     default: (
       font-size: convert.to-rem(16px),
       line-height: convert.to-rem(20px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.1px),
     ),
     md: (
       font-size: convert.to-rem(18px),
       line-height: convert.to-rem(22px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.2px),
     ),
   ),
   6: (
     default: (
+      font-size: convert.to-rem(16px),
+      line-height: convert.to-rem(24px),
+      font-weight: 400,
+      letter-spacing: convert.to-rem(-0.1px),
+    ),
+    md: (
       font-size: convert.to-rem(18px),
       line-height: convert.to-rem(26px),
       font-weight: 400,
@@ -133,13 +179,13 @@ $displays: (
     default: (
       font-size: convert.to-rem(40px),
       line-height: convert.to-rem(46px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
     xl: (
       font-size: convert.to-rem(140px),
       line-height: convert.to-rem(158px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-2.6px),
     ),
   ),
@@ -147,13 +193,13 @@ $displays: (
     default: (
       font-size: convert.to-rem(40px),
       line-height: convert.to-rem(46px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
     md: (
       font-size: convert.to-rem(80px),
       line-height: convert.to-rem(92px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-1.4px),
     ),
   ),
@@ -161,21 +207,21 @@ $displays: (
     default: (
       font-size: convert.to-rem(40px),
       line-height: convert.to-rem(46px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
 
     md: (
       font-size: convert.to-rem(50px),
       line-height: convert.to-rem(56px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-0.6px),
     ),
 
     xl: (
       font-size: convert.to-rem(60px),
       line-height: convert.to-rem(68px),
-      font-weight: 700,
+      font-weight: 300,
       letter-spacing: convert.to-rem(-1px),
     ),
   ),

package/src/styles/typography/mixins.scss

@@ -48,7 +48,7 @@
     margin-top: 0;
     margin-bottom: space.get("large");
     // Default štýly pre všetky p elementy
-    @include generate.responsive-css-map($config);
+    @include generate.responsive-css-map(map.get($config, "default"));
 
     a {
       text-decoration: underline !important;
@@ -116,7 +116,7 @@
   padding-left: space.get("large");
   @include text-readable;
   // Apply the same font styles as paragraphs
-  @include generate.responsive-css-map(config.$body-text);
+  @include generate.responsive-css-map(map.get(config.$body-text, "default"));
 }
 
 @mixin list-spacing($space, $config: config.$list-spacing) {
@@ -185,7 +185,7 @@
 
 @mixin description-list() {
   @include text-readable;
-  @include generate.responsive-css-map(config.$body-text);
+  @include generate.responsive-css-map(map.get(config.$body-text, "default"));
   padding-left: 0;
 
   dt {

package/src/styles/utilities/text.scss

@@ -6,6 +6,7 @@
 @use "../tokens/color";
 @use "../tokens/base";
 @use "../tokens/breakpoint";
+@use "sass:map";
 
 @layer utilities {
   strong,
@@ -50,11 +51,15 @@
 
   small,
   .small {
-    @include generate.css-map(typographyConfig.$body-text, "small");
+    @include generate.responsive-css-map(
+      map.get(typographyConfig.$body-text, "small")
+    );
   }
 
   .large {
-    @include generate.css-map(typographyConfig.$body-text, "large");
+    @include generate.responsive-css-map(
+      map.get(typographyConfig.$body-text, "large")
+    );
   }
 
   .text-nowrap {
@@ -112,6 +117,25 @@
     vertical-align: baseline !important;
   }
 
+  @each $name, $width in breakpoint.$map {
+    @if $name != "xs" {
+      @include breakpoint.get($name) {
+        .align-middle--#{$name} {
+          vertical-align: middle !important;
+        }
+        .align-top--#{$name} {
+          vertical-align: top !important;
+        }
+        .align-bottom--#{$name} {
+          vertical-align: bottom !important;
+        }
+        .align-baseline--#{$name} {
+          vertical-align: baseline !important;
+        }
+      }
+    }
+  }
+
   .reset-font-weight {
     font-weight: normal !important;
   }

package/src/components/Pagination/tests/utils.js

@@ -1,12 +0,0 @@
-export const getItems = (count = 10, current = 0) =>
-  [
-    ...Array(count)
-      .fill('')
-      .map((_, i) => i + 1),
-  ].map(n => ({
-    label: `${n}`,
-    ariaLabel: `Strana ${n}`,
-    href: `/?page=${n}`,
-    key: n.toString(),
-    ...(current === n ? { isActive: true } : {}),
-  }));