global reset with emotion

src-docs/src/views/app_view.js

@@ -12,6 +12,7 @@ import {
 } from '../../../src/components';
 
 import { keys } from '../../../src/services';
+import { EuiGlobalReset } from '../../../src/global_styling/reset/global_reset';
 import { GuidePageHeader } from '../components/guide_page/guide_page_header';
 
 import favicon16Prod from '../images/favicon/prod/favicon-16x16.png';
@@ -75,6 +76,7 @@ export class AppView extends Component {
             sizes="96x96"
           />
         </Helmet>
+        <EuiGlobalReset />
         <GuidePageHeader
           onToggleLocale={toggleLocale}
           selectedLocale={locale}

src/global_styling/index.scss

@@ -13,7 +13,7 @@
 @import 'utility/index';
 
 // The reset file makes use of variables and mixins
-@import 'reset/index';
+// @import 'reset/index';
 
 // Customization of the React Date Picker
 @import 'react_date_picker/index';

src/global_styling/mixins/_helpers.ts

@@ -55,29 +55,43 @@ export const useInnerBorder = ({
 // Set scroll bar appearance on Chrome (and firefox).
 export const useScrollBar = ({
   thumbColor: _thumbColor,
-  trackBackgroundColor: _trackBackgroundColor,
+  trackBackgroundColor = 'transparent',
+  width = 'thin',
 }: {
   thumbColor?: string;
   trackBackgroundColor?: string;
+  width?: 'thin' | 'thick';
 } = {}) => {
   const {
     euiTheme: { colors, size },
   } = useEuiTheme();
   const thumbColor = _thumbColor || colors.darkShade;
-  const trackBackgroundColor = _trackBackgroundColor || 'transparent';
-  // Firefox's scrollbar coloring cascades, but the sizing does not,
-  // so it's being added to this mixin for allowing support wherever custom scrollbars are
   return `
-    scrollbar-width: thin;
+    // Firefox's scrollbar coloring cascades, but the sizing does not,
+    // so it's being added to this mixin for allowing support wherever custom scrollbars are
+    // sass-lint:disable-block no-misspelled-properties
+    scrollbar-color: ${transparentize(
+      thumbColor,
+      0.5
+    )} ${trackBackgroundColor}; // Firefox support
+
+    ${width === 'thin' ? 'scrollbar-width: thin' : ''};
+
     &::-webkit-scrollbar {
       width: ${size.base};
       height: ${size.base};
     }
+
     &::-webkit-scrollbar-thumb {
       background-color: ${transparentize(thumbColor, 0.5)};
-      border: calc(${size.base} * 0.75) solid ${trackBackgroundColor};
       background-clip: content-box;
+      border-radius: ${size.base};
+ 
+      border: ${
+        width === 'thin' ? `calc(${size.s} * 0.75)` : size.xs
+      } solid ${trackBackgroundColor};
     }
+
     &::-webkit-scrollbar-corner,
     &::-webkit-scrollbar-track {
       background-color: ${trackBackgroundColor};

src/global_styling/mixins/_typography.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useEuiTheme, isDefaultTheme } from '../../services/theme';
+
+// Some mixins that help us deal with browser scaling of text more consistently.
+// Essentially, fonts across eui should scale against the root html element, not
+// against parent inheritance.
+
+// Our base fonts
+
+export const useEuiFont = () => {
+  const {
+    euiTheme: { font, themeName },
+  } = useEuiTheme();
+  const defaultTheme = isDefaultTheme(themeName);
+  return `
+    font-family: ${font.family};
+    font-weight: ${font.weight.regular};
+    letter-spacing: ${defaultTheme ? '-.005em' : 'normal'};
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    font-kerning: normal;
+  `;
+};