@hazelcast/ui 1.2.0 → 1.2.1-next.0

package/styles/constants/_typography.scss

@@ -2,7 +2,6 @@ $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;
 $fontWeightTextRegular: 400 !default;
@@ -18,7 +17,6 @@ $fontSizeBodyNormal: 1rem !default;
 $fontSizeBodySmall: 0.875rem !default;
 $fontSizeBodySmaller: 0.75rem !default;
 $fontSizeBodyTiny: 0.625rem !default;
-
 $letterSpacingH1: 0.25px !default;
 $letterSpacingH2: 0 !default;
 $letterSpacingH3: 0.15px !default;
@@ -28,7 +26,6 @@ $letterSpacingBodyNormal: 0.5px !default;
 $letterSpacingBodySmall: 0.25px !default;
 $letterSpacingBodySmaller: normal !default;
 $letterSpacingBodyTiny: normal !default;
-
 $lineHeightH1: normal !default;
 $lineHeightH2: normal !default;
 $lineHeightH3: normal !default;
@@ -39,33 +36,37 @@ $lineHeightBodySmaller: normal !default;
 $lineHeightBodyTiny: normal !default;
 
 @function override($override: false) {
-  @if ($override) {
+  @if $override {
     @return '!important';
   }
+
   @return '';
 }
 
 @mixin typographyH1($override: false) {
-  font-family: $fontFamilyHeading #{override($override)}; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+  font-family: $fontFamilyHeading #{override($override)};
   font-weight: $fontWeightHeadingBold #{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)}; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+  font-family: $fontFamilyHeading #{override($override)};
   font-weight: $fontWeightHeadingBold #{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)}; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+  font-family: $fontFamilyHeading #{override($override)};
   font-weight: $fontWeightHeadingBold #{override($override)};
   font-size: $fontSizeH3 #{override($override)};
   letter-spacing: $letterSpacingH3 #{override($override)};
   line-height: $lineHeightH3 #{override($override)};
 }
+
 @mixin typographyButton($size: 'medium') {
   font-family: $fontFamilyText;
   line-height: $lineHeightButton;
@@ -75,23 +76,28 @@ $lineHeightBodyTiny: normal !default;
     font-size: $fontSizeButton;
     letter-spacing: $letterSpacingButton;
   }
+
   @if $size == 'small' {
     font-weight: $fontWeightTextRegular;
     font-size: $fontSizeButtonSmall;
     letter-spacing: $letterSpacingButtonSmall;
   }
 }
+
 @mixin typographyBodyWeight($weight: 'regular') {
   @if $weight == 'regular' {
     font-weight: $fontWeightTextRegular;
   }
+
   @if $weight == 'bold' {
     font-weight: $fontWeightTextBold;
   }
+
   @if $weight == 'light' {
     font-weight: $fontWeightTextLight;
   }
 }
+
 @mixin typographyBodyNormal($weight: 'regular') {
   font-family: $fontFamilyText;
   font-size: $fontSizeBodyNormal;
@@ -100,6 +106,7 @@ $lineHeightBodyTiny: normal !default;
 
   @include typographyBodyWeight($weight);
 }
+
 @mixin typographyBodySmall($weight: 'regular') {
   font-family: $fontFamilyText;
   font-size: $fontSizeBodySmall;
@@ -108,6 +115,7 @@ $lineHeightBodyTiny: normal !default;
 
   @include typographyBodyWeight($weight);
 }
+
 @mixin typographyBodySmaller($weight: 'regular') {
   font-family: $fontFamilyText;
   font-size: $fontSizeBodySmaller;
@@ -116,6 +124,7 @@ $lineHeightBodyTiny: normal !default;
 
   @include typographyBodyWeight($weight);
 }
+
 @mixin typographyBodyTiny($weight: 'regular') {
   font-family: $fontFamilyText;
   font-size: $fontSizeBodyTiny;
@@ -131,9 +140,11 @@ $lineHeightBodyTiny: normal !default;
   h1 {
     @include typographyH1($override);
   }
+
   h2 {
     @include typographyH2($override);
   }
+
   h3 {
     @include typographyH3($override);
   }

package/styles/constants/export.module.scss

@@ -1,4 +1,4 @@
-@use "sass:meta";
+@use 'sass:meta';
 @use '.' as c;
 
 :export {

package/styles/fonts.css

@@ -1,41 +1,26 @@
 /* roboto-300 - latin */
 @font-face {
-  font-family: 'Roboto';
+  font-family: Roboto;
   font-style: normal;
   font-weight: 300;
-  src: url('../fonts/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */
-  src: local(''),
-  url('../fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/roboto-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../fonts/roboto-v27-latin-300.woff') format('woff'), /* Modern Browsers */
-  url('../fonts/roboto-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
+  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-family: Roboto;
   font-style: normal;
   font-weight: 400;
-  src: url('../fonts/roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local(''),
-  url('../fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../fonts/roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
-  url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
+  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-family: Roboto;
   font-style: normal;
   font-weight: 500;
-  src: url('../fonts/roboto-v27-latin-500.eot'); /* IE9 Compat Modes */
-  src: local(''),
-  url('../fonts/roboto-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/roboto-v27-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../fonts/roboto-v27-latin-500.woff') format('woff'), /* Modern Browsers */
-  url('../fonts/roboto-v27-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
+  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 */
 }

package/styles/helpers/_a11y.scss

@@ -10,7 +10,9 @@
 
 @mixin outlineFormField {
   border-color: c.$colorAccessibilityOutline;
-  // Border is also colored with the a11y color. We need to make the total visible outline width c.$outlineWidth, including the border
+
+  // Border is also colored with the a11y color. We need to make the total visible outline width c.$outlineWidth,
+  // including the border
   box-shadow: inset 0 0 0 (c.$outlineWidth - c.$borderWidth) c.$colorAccessibilityOutline;
 
   // Do not remove outline for high-contrast modes
@@ -29,6 +31,7 @@
   overflow: hidden;
   border: 0;
   white-space: nowrap;
+
   // Without explicit top and left it causes rendering a scrollbar
   top: 1px;
   left: 1px;

package/styles/helpers/_error.scss

@@ -3,7 +3,7 @@
 @mixin withError {
   .withError {
     position: relative;
-    padding-bottom: c.$errorHeight;
+    padding-bottom: c.$errorHeight + c.$grid;
 
     .errorContainer {
       position: absolute;

package/styles/helpers/_input.scss

@@ -3,7 +3,7 @@
   /* doiuse-disable css-appearance */
   appearance: menulist-button;
   /* doiuse-enable css-appearance */
-  background-color: rgb(232, 240, 254) !important;
+  background-color: rgb(232 240 254) !important;
   background-image: none !important;
   color: -internal-light-dark(black, white) !important;
 }