@dynamic-framework/ui-react 1.20.0 → 1.21.0

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -149,5 +149,5 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1"
   },
-  "gitHead": "390121896cb0178e9faf24aef8f1da30a55fa6bf"
+  "gitHead": "b56a0d3b750c6e09caa743b3445b49b157704fa1"
 }

package/src/style/abstracts/_utilities.scss

@@ -125,5 +125,12 @@ $utilities: map-merge(
         responsive: true,
       )
     ),
+    "body-font-size": (
+      class: "fs-body",
+      responsive: true,
+      css-var: true,
+      css-variable-name: fs-body-font-size,
+      values: $body-font-sizes
+    )
   )
 );

package/src/style/abstracts/variables/_typography.scss

@@ -38,12 +38,47 @@ $font-weight-base: $font-weight-normal !default;
 $line-height-base: 1.5 !default;
 
 // custom
-$h1-font-size-value: $font-size-base * 4 !default;
-$h2-font-size-value: $font-size-base * 3.5 !default;
-$h3-font-size-value: $font-size-base * 3 !default;
-$h4-font-size-value: $font-size-base * 2 !default;
-$h5-font-size-value: $font-size-base * 1.5 !default;
-$h6-font-size-value: $font-size-base * 1.125 !default;
+$body-large-font-size-value: $font-size-base * 1.5 !default;   // 24px - 21.525px
+$body-medium-font-size-value: $font-size-base * 1.25 !default; // 20px - 20px
+$body-normal-font-size-value: $font-size-base * 1 !default;    // 16px - 16px
+$body-small-font-size-value: $font-size-base * .875 !default;  // 14px - 14px
+$body-tiny-font-size-value: $font-size-base * .8125 !default;  // 13px - 13px
+
+$body-large-font-size: var(--#{$prefix}fs-body-large) !default;
+$body-medium-font-size: var(--#{$prefix}fs-body-medium) !default;
+$body-normal-font-size: var(--#{$prefix}fs-body-normal) !default;
+$body-small-font-size: var(--#{$prefix}fs-body-small) !default;
+$body-tiny-font-size: var(--#{$prefix}fs-body-tiny) !default;
+// end custom
+// scss-docs-end font-variables
+
+// scss-docs-start body-font-sizes
+// custom
+$body-font-sizes-value: (
+  large: $body-large-font-size-value,
+  medium: $body-medium-font-size-value,
+  normal: $body-normal-font-size-value,
+  small: $body-small-font-size-value,
+  tiny: $body-tiny-font-size-value,
+) !default;
+
+$body-font-sizes: (
+  large: $body-large-font-size,
+  medium: $body-medium-font-size,
+  normal: $body-normal-font-size,
+  small: $body-small-font-size,
+  tiny: $body-tiny-font-size,
+) !default;
+// end custom
+// scss-docs-end body-font-sizes
+
+// custom
+$h1-font-size-value: $font-size-base * 3 !default;    // 48px - 30.675px
+$h2-font-size-value: $font-size-base * 2.5 !default;  // 40px - 27.625px
+$h3-font-size-value: $font-size-base * 2 !default;    // 32px - 25.575px
+$h4-font-size-value: $font-size-base * 1.5 !default;  // 24px - 21.525px
+$h5-font-size-value: $font-size-base * 1.25 !default; // 20px - 20px
+$h6-font-size-value: $font-size-base !default;        // 16px - 16px
 
 $h1-font-size: var(--#{$prefix}fs-1) !default;
 $h2-font-size: var(--#{$prefix}fs-2) !default;
@@ -85,12 +120,12 @@ $headings-line-height: var(--#{$prefix}heading-line-height) !default;
 
 // scss-docs-start display-headings
 // custom
-$display1-font-size-value: 7.5rem !default;
-$display2-font-size-value: 4.5rem !default;
-$display3-font-size-value: 4rem !default;
-$display4-font-size-value: 3.5rem !default;
-$display5-font-size-value: 3rem !default;
-$display6-font-size-value: 2.5rem !default;
+$display1-font-size-value: $font-size-base * 6 !default;   // 96px - 48.975px
+$display2-font-size-value: $font-size-base * 5.5 !default; // 88px - 45.925px
+$display3-font-size-value: $font-size-base * 5 !default;   // 80px - 42.875px
+$display4-font-size-value: $font-size-base * 4.5 !default; // 72px - 39.825px
+$display5-font-size-value: $font-size-base * 4 !default;   // 64px - 36.775px
+$display6-font-size-value: $font-size-base * 3.5 !default; // 56px - 33.725px
 
 $display1-font-size: var(--#{$prefix}fs-display-1) !default;
 $display2-font-size: var(--#{$prefix}fs-display-2) !default;

package/src/style/base/_type.scss

@@ -40,6 +40,11 @@
   line-height: $display-line-height;
 }
 
+// Body display classes
+[class*="fs-body-"] {
+  font-size: var(--#{$prefix}fs-body-font-size);
+}
+
 //
 // Emphasis
 //

package/src/style/root/_root.scss

@@ -183,6 +183,11 @@
   @include rfs($small-font-size-value, --#{$prefix}rfs-fs-small);
   --#{$prefix}fs-small: var(--#{$prefix}rfs-fs-small);
 
+  @each $level, $value in $body-font-sizes-value {
+    @include rfs($value, --#{$prefix}rfs-fs-body-#{$level});
+    --#{$prefix}fs-body-#{$level}: var(--#{$prefix}rfs-fs-body-#{$level});
+  }
+
   --#{$prefix}fw-lighter: #{$font-weight-lighter-value};
   --#{$prefix}fw-light: #{$font-weight-light-value};
   --#{$prefix}fw-normal: #{$font-weight-normal-value};