@hazelcast/ui 1.3.2-next.40 → 1.3.2-next.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "1.3.2-next.40+e04d579",
+  "version": "1.3.2-next.42+2145a74",
   "description": "Hazelcast design system components",
   "author": "",
   "homepage": "https://github.com/hazelcast/frontend-shared#readme",
@@ -112,5 +112,5 @@
     "webpack": "^5.65.0",
     "yup": "^0.32.11"
   },
-  "gitHead": "e04d5795d44430adc664e504059ac6fc68f18918"
+  "gitHead": "2145a743f6f6494fa811eec77d6e6bf6a6b1916a"
 }

package/styles/constants/_typography.scss

@@ -1,31 +1,32 @@
 $fontFamilyHeading: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
-$fontWeightHeadingLight: 300 !default;
 $fontWeightHeadingRegular: 400 !default;
 $fontWeightHeadingBold: 500 !default;
-$fontFamilyText: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
-$fontWeightTextLight: 300 !default;
+$fontFamilyText: 'Open Sans', 'Helvetica', 'Arial', sans-serif !default;
 $fontWeightTextRegular: 400 !default;
-$fontWeightTextBold: 500 !default;
+$fontWeightTextBold: 600 !default;
 
 // https://www.figma.com/file/8mVm6LTbp2Z0RaWWjTZoft/%F0%9F%90%9DHIVE?node-id=0%3A136
-$fontSizeH1: 2rem !default;
-$fontSizeH2: 1.625rem !default;
-$fontSizeH3: 1.25rem !default;
+$fontSizeH1Hero: 2.875rem !default; // 46px
+$fontSizeH1: 2.125rem !default; // 34px
+$fontSizeH2: 1.625rem !default; // 26px
+$fontSizeH3: 1.25rem !default; // 20px
 $fontSizeButton: 1.125rem !default;
 $fontSizeButtonSmall: 0.875rem !default;
 $fontSizeBodyNormal: 1rem !default;
 $fontSizeBodySmall: 0.875rem !default;
 $fontSizeBodySmaller: 0.75rem !default;
 $fontSizeBodyTiny: 0.625rem !default;
+$letterSpacingH1Hero: 0.25px !default;
 $letterSpacingH1: 0.25px !default;
-$letterSpacingH2: 0 !default;
-$letterSpacingH3: 0.15px !default;
+$letterSpacingH2: 0.25px !default;
+$letterSpacingH3: 0.25px !default;
 $letterSpacingButton: 1.25px !default;
 $letterSpacingButtonSmall: 0.25px !default;
-$letterSpacingBodyNormal: 0.5px !default;
-$letterSpacingBodySmall: 0.25px !default;
+$letterSpacingBodyNormal: 0.25px !default;
+$letterSpacingBodySmall: 0.5px !default;
 $letterSpacingBodySmaller: normal !default;
 $letterSpacingBodyTiny: normal !default;
+$lineHeightH1Hero: normal !default;
 $lineHeightH1: normal !default;
 $lineHeightH2: normal !default;
 $lineHeightH3: normal !default;
@@ -43,25 +44,29 @@ $lineHeightBodyTiny: normal !default;
   @return '';
 }
 
+@mixin typographyH1Hero($override: false) {
+  font-weight: $fontWeightHeadingRegular #{override($override)};
+  font-size: $fontSizeH4 #{override($override)};
+  letter-spacing: $letterSpacingH4 #{override($override)};
+  line-height: $lineHeightH4 #{override($override)};
+}
+
 @mixin typographyH1($override: false) {
-  font-family: $fontFamilyHeading #{override($override)};
-  font-weight: $fontWeightHeadingBold #{override($override)};
+  font-weight: $fontWeightHeadingRegular #{override($override)};
   font-size: $fontSizeH1 #{override($override)};
   letter-spacing: $letterSpacingH1 #{override($override)};
   line-height: $lineHeightH1 #{override($override)};
 }
 
 @mixin typographyH2($override: false) {
-  font-family: $fontFamilyHeading #{override($override)};
-  font-weight: $fontWeightHeadingBold #{override($override)};
+  font-weight: $fontWeightHeadingRegular #{override($override)};
   font-size: $fontSizeH2 #{override($override)};
   letter-spacing: $letterSpacingH2 #{override($override)};
   line-height: $lineHeightH2 #{override($override)};
 }
 
 @mixin typographyH3($override: false) {
-  font-family: $fontFamilyHeading #{override($override)};
-  font-weight: $fontWeightHeadingBold #{override($override)};
+  font-weight: $fontWeightHeadingRegular #{override($override)};
   font-size: $fontSizeH3 #{override($override)};
   letter-spacing: $letterSpacingH3 #{override($override)};
   line-height: $lineHeightH3 #{override($override)};
@@ -92,10 +97,6 @@ $lineHeightBodyTiny: normal !default;
   @if $weight == 'bold' {
     font-weight: $fontWeightTextBold;
   }
-
-  @if $weight == 'light' {
-    font-weight: $fontWeightTextLight;
-  }
 }
 
 @mixin typographyBodyNormal($weight: 'regular') {
@@ -137,6 +138,15 @@ $lineHeightBodyTiny: normal !default;
 @mixin typographyGlobal($override: false) {
   @include typographyBodyNormal;
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: $fontFamilyHeading;
+  }
+
   h1 {
     @include typographyH1($override);
   }

package/styles/fonts.css

@@ -1,26 +0,0 @@
-/* roboto-300 - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 300;
-  src: url('../fonts/roboto-v27-latin-300.woff2') format('woff2'), url('../fonts/roboto-v27-latin-300.woff') format('woff'),
-    url('../fonts/roboto-v27-latin-300.ttf') format('truetype'), url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
-}
-
-/* roboto-regular - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 400;
-  src: url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), url('../fonts/roboto-v27-latin-regular.woff') format('woff'),
-    url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'), url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
-}
-
-/* roboto-500 - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 500;
-  src: url('../fonts/roboto-v27-latin-500.woff2') format('woff2'), url('../fonts/roboto-v27-latin-500.woff') format('woff'),
-    url('../fonts/roboto-v27-latin-500.ttf') format('truetype'), url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
-}