@hazelcast/ui 1.1.1 → 1.3.1-next.0

package/styles/constants/_typography.scss

@@ -1,12 +1,11 @@
-$fontFamilyHeading: 'Ubuntu', sans-serif !default;
+$fontFamilyHeading: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
 $fontWeightHeadingLight: 300 !default;
 $fontWeightHeadingRegular: 400 !default;
 $fontWeightHeadingBold: 500 !default;
-
-$fontFamilyText: 'Open Sans', sans-serif !default;
+$fontFamilyText: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
 $fontWeightTextLight: 300 !default;
 $fontWeightTextRegular: 400 !default;
-$fontWeightTextBold: 600 !default;
+$fontWeightTextBold: 500 !default;
 
 // https://www.figma.com/file/8mVm6LTbp2Z0RaWWjTZoft/%F0%9F%90%9DHIVE?node-id=0%3A136
 $fontSizeH1: 2rem !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,77 +1,26 @@
-/* Generated with https://google-webfonts-helper.herokuapp.com/fonts */
-
-/* ubuntu-300 - latin */
+/* roboto-300 - latin */
 @font-face {
-  font-family: 'Ubuntu';
+  font-family: Roboto;
   font-style: normal;
   font-weight: 300;
-  src: url('../assets/ubuntu-v15-latin-300.eot'); /* IE9 Compat Modes */
-  src: local('Ubuntu Light'), local('Ubuntu-Light'), url('../assets/ubuntu-v15-latin-300.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/ubuntu-v15-latin-300.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/ubuntu-v15-latin-300.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/ubuntu-v15-latin-300.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/ubuntu-v15-latin-300.svg#Ubuntu') format('svg'); /* Legacy iOS */
-}
-/* ubuntu-regular - latin */
-@font-face {
-  font-family: 'Ubuntu';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../assets/ubuntu-v15-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url('../assets/ubuntu-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/ubuntu-v15-latin-regular.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/ubuntu-v15-latin-regular.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/ubuntu-v15-latin-regular.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/ubuntu-v15-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
-}
-/* ubuntu-500 - latin */
-@font-face {
-  font-family: 'Ubuntu';
-  font-style: normal;
-  font-weight: 500;
-  src: url('../assets/ubuntu-v15-latin-500.eot'); /* IE9 Compat Modes */
-  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url('../assets/ubuntu-v15-latin-500.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/ubuntu-v15-latin-500.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/ubuntu-v15-latin-500.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/ubuntu-v15-latin-500.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/ubuntu-v15-latin-500.svg#Ubuntu') 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 */
 }
 
-/* open-sans-300 - latin */
+/* roboto-regular - latin */
 @font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 300;
-  src: url('../assets/open-sans-v18-latin-300.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('../assets/open-sans-v18-latin-300.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/open-sans-v18-latin-300.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/open-sans-v18-latin-300.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/open-sans-v18-latin-300.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/open-sans-v18-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-regular - latin */
-@font-face {
-  font-family: 'Open Sans';
+  font-family: Roboto;
   font-style: normal;
   font-weight: 400;
-  src: url('../assets/open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url('../assets/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/open-sans-v18-latin-regular.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/open-sans-v18-latin-regular.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/open-sans-v18-latin-regular.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/open-sans-v18-latin-regular.svg#OpenSans') 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 */
 }
-/* open-sans-600 - latin */
+
+/* roboto-500 - latin */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: Roboto;
   font-style: normal;
-  font-weight: 600;
-  src: url('../assets/open-sans-v18-latin-600.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url('../assets/open-sans-v18-latin-600.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/open-sans-v18-latin-600.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/open-sans-v18-latin-600.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/open-sans-v18-latin-600.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/open-sans-v18-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
+  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 */
 }

package/styles/helpers/_a11y.scss

@@ -4,9 +4,15 @@
   box-shadow: inset 0 0 0 c.$outlineWidth c.$colorAccessibilityOutline;
 }
 
+@mixin outlineAround {
+  box-shadow: 0 0 0 c.$outlineWidth c.$colorAccessibilityOutline;
+}
+
 @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
@@ -25,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

@@ -0,0 +1,17 @@
+@use '../constants' as c;
+
+@mixin withError {
+  .withError {
+    position: relative;
+    padding-bottom: c.$errorHeight + c.$grid;
+
+    .errorContainer {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      overflow: hidden;
+      height: c.$errorHeight;
+      width: 100%;
+    }
+  }
+}

package/styles/helpers/_index.scss

@@ -1,3 +1,4 @@
 @forward './a11y';
 @forward './input';
 @forward './text';
+@forward './error';

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;
 }