From 61b482528bb91c34e3cdca79580034e88d34560b Mon Sep 17 00:00:00 2001
From: Dylan <99700808+dylankilgore@users.noreply.github.com>
Date: Mon, 4 Apr 2022 16:35:22 -0700
Subject: [PATCH] fix: html base pixel unit: changes the base from 16 to 10
 (#34)

Match the pixel base of vscode
---
 src/components/Button/BaseButton.tsx          |   2 +-
 src/components/Button/button.module.scss      |   7 +-
 .../ConfigProvider/ConfigProvider.stories.tsx |   9 +-
 src/components/Icon/Icon.stories.tsx          |  16 ++-
 src/components/Icon/Icon.types.ts             |   8 +-
 src/components/Pills/Pill.tsx                 |  24 +++-
 src/components/Pills/pills.module.scss        |  27 ++--
 src/components/Tabs/tabs.module.scss          |   1 +
 src/components/Tooltip/tooltip.module.scss    |   1 +
 src/styles/abstracts/_functions.scss          | 104 ++++++++++++++-
 src/styles/abstracts/_mixins.scss             | 120 ------------------
 11 files changed, 156 insertions(+), 163 deletions(-)

diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/BaseButton.tsx
index afe43450e..4c680d96f 100644
--- a/src/components/Button/BaseButton.tsx
+++ b/src/components/Button/BaseButton.tsx
@@ -157,7 +157,7 @@ export const BaseButton: FC<InternalButtonProps> = ({
         >
             {iconExists && !textExists && getButtonIcon(icon)}
             {iconExists && textExists && (
-                <span className={styles.flexStructureHorizontal}>
+                <span>
                     {getButtonIcon(icon)}
                     {getButtonText(buttonTextClassNames, text)}
                 </span>
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
index 3b046acab..a64ac03aa 100644
--- a/src/components/Button/button.module.scss
+++ b/src/components/Button/button.module.scss
@@ -1,12 +1,17 @@
 .button {
     background-color: inherit;
     border: rem(2px) solid $button-color-default-active;
+    border-radius: $corner-radius-s;
     cursor: pointer;
     display: inline-block;
     transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
     white-space: nowrap;
 
-    border-radius: $corner-radius-s;
+    span {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
 
     .icon + .button1:not(:empty) {
         margin-left: $button-spacer-large;
diff --git a/src/components/ConfigProvider/ConfigProvider.stories.tsx b/src/components/ConfigProvider/ConfigProvider.stories.tsx
index 8925d907e..9bd3b4c4f 100644
--- a/src/components/ConfigProvider/ConfigProvider.stories.tsx
+++ b/src/components/ConfigProvider/ConfigProvider.stories.tsx
@@ -44,7 +44,7 @@ const ThemedComponents = () => {
 
     return (
         <>
-            <h2>
+            <h1>
                 Selected Theme:
                 <span
                     style={{
@@ -55,10 +55,10 @@ const ThemedComponents = () => {
                 >
                     {themeOptions.name}
                 </span>
-            </h2>
+            </h1>
             <div style={{ display: 'flex', alignItems: 'flex-start' }}>
                 <div style={{ marginRight: '40px' }}>
-                    <h3>Predefined</h3>
+                    <h2>Predefined</h2>
                     <select
                         value={themeOptions.name}
                         onChange={(e) => {
@@ -66,6 +66,7 @@ const ThemedComponents = () => {
                                 name: e.target.value as OcThemeNames,
                             });
                         }}
+                        style={{ fontSize: '1.4rem' }}
                     >
                         {themes.map((theme) => (
                             <option value={theme} key={theme}>
@@ -76,7 +77,7 @@ const ThemedComponents = () => {
                 </div>
                 <br />
                 <div>
-                    <h3>Custom</h3>
+                    <h2>Custom</h2>
                     <CompactPicker
                         color={customColor}
                         onChange={(color) => {
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
index 218bc9357..39d64fd0b 100644
--- a/src/components/Icon/Icon.stories.tsx
+++ b/src/components/Icon/Icon.stories.tsx
@@ -8,14 +8,20 @@ export default {
 
 export const Icons = () => (
     <>
-        <h2>Icons</h2>
-        <p>X-Small</p>
+        <h1>Icons</h1>
+        <h2>X-Small</h2>
         <Icon path={IconName.mdiCardsHeart} size={IconSize.XSmall} />
-        <p>Small</p>
+        <br />
+        <br />
+        <h2>Small</h2>
         <Icon path={IconName.mdiCardsHeart} size={IconSize.Small} />
-        <p>Medium</p>
+        <br />
+        <br />
+        <h2>Medium</h2>
         <Icon path={IconName.mdiCardsHeart} />
-        <p>Large</p>
+        <br />
+        <br />
+        <h2>Large</h2>
         <Icon path={IconName.mdiCardsHeart} size={IconSize.Large} />
     </>
 );
diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts
index 86e558fd1..79ef584b7 100644
--- a/src/components/Icon/Icon.types.ts
+++ b/src/components/Icon/Icon.types.ts
@@ -2,10 +2,10 @@ import { IconName } from './mdi';
 import { IconProps as MdiIconProps } from '@mdi/react/dist/IconProps';
 
 export enum IconSize {
-    Large = '1.5rem',
-    Medium = '1.25rem',
-    Small = '1rem',
-    XSmall = '0.875rem',
+    Large = '2.4rem',
+    Medium = '2rem',
+    Small = '1.6rem',
+    XSmall = '1.4rem',
 }
 
 export interface IconProps extends MdiIconProps {
diff --git a/src/components/Pills/Pill.tsx b/src/components/Pills/Pill.tsx
index 35c8cd028..33b9e4fc2 100644
--- a/src/components/Pills/Pill.tsx
+++ b/src/components/Pills/Pill.tsx
@@ -18,6 +18,22 @@ export const Pill: FC<PillProps> = ({
     type = PillType.default,
     size = PillSize.Large,
 }) => {
+    const pillSizeToButtonSizeMap = new Map<PillSize, ButtonSize>([
+        [PillSize.Large, ButtonSize.Medium],
+        [PillSize.Medium, ButtonSize.Small],
+        [PillSize.Small, ButtonSize.Small],
+    ]);
+    const pillSizeToIconSizeMap = new Map<PillSize, IconSize>([
+        [PillSize.Large, IconSize.Medium],
+        [PillSize.Medium, IconSize.Small],
+        [PillSize.Small, IconSize.XSmall],
+    ]);
+    const labelClassName: string = classNames([
+        styles.label,
+        { [styles.header4]: size === PillSize.Large },
+        { [styles.header5]: size === PillSize.Medium },
+        { [styles.header6]: size === PillSize.Small },
+    ]);
     const tagClassName: string = classNames([
         styles.tagPills,
         { [styles.red]: theme === 'red' },
@@ -36,16 +52,16 @@ export const Pill: FC<PillProps> = ({
             {icon && (
                 <Icon
                     path={icon}
-                    size={IconSize.Small}
+                    size={pillSizeToIconSizeMap.get(size)}
                     className={styles.icon}
                 />
             )}
-            <span className={styles.label}>{label}</span>
+            <span className={labelClassName}>{label}</span>
             {type === PillType.withButton && (
                 <DefaultButton
                     {...pillButtonProps}
                     onClick={onClick}
-                    size={ButtonSize.Small}
+                    size={pillSizeToButtonSizeMap.get(size)}
                     className={styles.button}
                 />
             )}
@@ -54,7 +70,7 @@ export const Pill: FC<PillProps> = ({
                     {...closeButtonProps}
                     icon={IconName.mdiClose}
                     onClick={onClose}
-                    size={ButtonSize.Small}
+                    size={pillSizeToButtonSizeMap.get(size)}
                     className={styles.closeButton}
                 />
             )}
diff --git a/src/components/Pills/pills.module.scss b/src/components/Pills/pills.module.scss
index ac16e0258..38bdda33d 100644
--- a/src/components/Pills/pills.module.scss
+++ b/src/components/Pills/pills.module.scss
@@ -18,25 +18,8 @@
     align-items: center;
 
     .label {
-        font-weight: $text-font-weight-semibold;
-        font-size: $text-font-size-5;
-    }
-
-    &.medium {
-        .label {
-            font-size: $text-font-size-3;
-        }
-    }
-
-    &.small {
-        .label {
-            font-size: $text-font-size-2;
-        }
-    }
-
-    &:hover {
-        --bg: var(--hover-bg);
-        --label: var(--hover-label);
+        margin-bottom: rem(1px);
+        margin-top: rem(-1px);
     }
 
     &.red {
@@ -86,6 +69,11 @@
         --hover-bg: var(--grey-color-30);
     }
 
+    &:hover {
+        --bg: var(--hover-bg);
+        --label: var(--hover-label);
+    }
+
     .button,
     .close-button {
         border: none;
@@ -94,6 +82,7 @@
         color: inherit;
         padding: 0;
         margin: 0 0 0 $space-xxs;
+        transition: none;
     }
 
     .label + .button:not(:empty) {
diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss
index be37ba97a..d34745937 100644
--- a/src/components/Tabs/tabs.module.scss
+++ b/src/components/Tabs/tabs.module.scss
@@ -58,6 +58,7 @@
 
         .label {
             font-weight: $text-font-weight-semibold;
+            font-size: $text-font-size-3;
             white-space: nowrap;
         }
 
diff --git a/src/components/Tooltip/tooltip.module.scss b/src/components/Tooltip/tooltip.module.scss
index a43144725..f3438bbeb 100644
--- a/src/components/Tooltip/tooltip.module.scss
+++ b/src/components/Tooltip/tooltip.module.scss
@@ -17,6 +17,7 @@ $tooltip-arrow-shadow: 1px 1px 2px rgba(15, 20, 31, 0.12);
     box-shadow: $shadow-object-xs;
     background: var(--bg);
     color: var(--text-color);
+    font-size: $text-font-size-1;
     text-align: center;
     z-index: $z-index-100;
     padding: $space-xs;
diff --git a/src/styles/abstracts/_functions.scss b/src/styles/abstracts/_functions.scss
index 6c2f90e99..2b29b2c5e 100644
--- a/src/styles/abstracts/_functions.scss
+++ b/src/styles/abstracts/_functions.scss
@@ -1,7 +1,101 @@
-$html-font-size: 16px;
-@function stripUnit($value) {
-    @return calc($value / ($value * 0 + 1px));
+// Extend sass-rem https://github.com/pierreburel/sass-rem
+// Update $baseline to set base pixel value
+
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+
+$baseline: 10px !default;
+$fallback: false !default;
+$px-only: false !default;
+
+// Dart Sass <1.33.0 compatibility
+@function _divide($a, $b) {
+    @if map.has-key(meta.module-functions('math'), 'div') {
+        @return math.div($a, $b);
+    }
+
+    @return $a / $b;
 }
-@function rem($pxValue) {
-    @return #{calc(stripUnit($pxValue) / stripUnit($html-font-size))}rem;
+
+@function _convert($to, $values...) {
+    $result: ();
+    $separator: list.separator($values);
+
+    @each $value in $values {
+        @if meta.type-of($value) ==
+            'number' and
+            math.unit($value) ==
+            'rem' and
+            $to ==
+            'px'
+        {
+            $result: list.append(
+                $result,
+                _divide($value, 1rem) * $baseline,
+                $separator
+            );
+        } @else if
+            meta.type-of($value) ==
+            'number' and
+            math.unit($value) ==
+            'px' and
+            $to ==
+            'rem'
+        {
+            $result: list.append(
+                $result,
+                _divide($value, $baseline) * 1rem,
+                $separator
+            );
+        } @else if meta.type-of($value) == 'list' {
+            $result: list.append($result, _convert($to, $value...), $separator);
+        } @else {
+            $result: list.append($result, $value, $separator);
+        }
+    }
+
+    @return if(list.length($result) == 1, list.nth($result, 1), $result);
+}
+
+@function convert($values...) {
+    @if $px-only {
+        @return _convert(px, $values...);
+    } @else {
+        @return _convert(rem, $values...);
+    }
+}
+
+@mixin convert($properties, $values...) {
+    @if meta.type-of($properties) == 'map' {
+        @each $property, $values in $properties {
+            @include convert($property, $values);
+        }
+    } @else {
+        @each $property in $properties {
+            @if $fallback or $px-only {
+                #{$property}: _convert(px, $values...);
+            }
+            @if not $px-only {
+                #{$property}: _convert(rem, $values...);
+            }
+        }
+    }
+}
+
+@function rem($values...) {
+    @return convert($values...);
+}
+
+@mixin rem($properties, $values...) {
+    @include convert($properties, $values...);
+}
+
+@mixin baseline($zoom: 100%) {
+    font-size: _divide($zoom, 16px) * $baseline;
+}
+
+html {
+    @include baseline;
 }
diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
index daa12ba47..544aada6f 100644
--- a/src/styles/abstracts/_mixins.scss
+++ b/src/styles/abstracts/_mixins.scss
@@ -1,123 +1,3 @@
-.flex-structure-horizontal {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    //justify-content: space-evenly;
-    //flex-grow: 1;
-
-    &.full-height {
-        height: 100vh;
-    }
-}
-
-.flex-structure-vertical {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-
-    &.full-height {
-        height: 100vh;
-        width: 100%;
-    }
-}
-
-.octuple-menu {
-    display: flex;
-    flex-direction: column;
-    padding-left: $space-xl;
-
-    .logo-text {
-        padding-top: $space-m;
-        font-size: $text-font-size-8;
-        line-height: $text-line-height-7;
-        //color: $eightfold-logo-gradient;
-        font-weight: $text-font-weight-bold;
-        font-family: 'Source Sans Pro', sans-serif;
-        background: $eightfold-logo-gradient;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }
-}
-
-.spacer {
-    &.button-spacer-1 {
-        width: $button-spacer-large;
-    }
-    &.button-spacer-2 {
-        width: $button-spacer-medium;
-    }
-    &.button-spacer-3 {
-        width: $button-spacer-small;
-    }
-
-    &.space-m {
-        min-width: $space-m;
-    }
-
-    &.chevron-spacer {
-        width: $space-xxs;
-    }
-}
-
-.divider-line {
-    background-color: $divider-line-color;
-    width: 100%;
-    height: rem(1px);
-}
-
-.custom-padding-vertical {
-    .s {
-        min-height: $space-s;
-    }
-
-    .m {
-        min-height: $space-m;
-    }
-
-    .l {
-        min-height: $space-l;
-    }
-
-    .xl {
-        min-height: $space-xl;
-    }
-
-    .xxl {
-        min-height: $space-xxl;
-    }
-
-    .xxxl {
-        min-height: $space-xxxl;
-    }
-}
-
-.icon,
-.chevron-icon {
-    display: flex;
-    align-items: center !important;
-    text-align: center !important;
-
-    .icon-1-material {
-        font-size: $icon-font-size-material-l;
-        height: $text-line-height-3;
-    }
-
-    .icon-2-material {
-        font-size: $icon-font-size-material-m;
-        height: $text-line-height-2;
-    }
-
-    .icon-3-material {
-        font-size: $icon-font-size-material-s;
-        height: $text-line-height-1;
-    }
-
-    .icon-4-material {
-        font-size: $icon-font-size-material-xs;
-        height: $text-line-height-1;
-    }
-}
-
 @mixin no-scrollbars {
     // IE and Edge
     -ms-overflow-style: none;