UIDS-149 Some css updates from the project builder design review (#159)

Author: rroppolo

.github/workflows/gh-pages-deploy.yml

@@ -2,7 +2,7 @@
   on:
     push:
       branches:
-        - master
+        - feature/UIDS-149-builder-related-followons
   jobs:
     gh-pages-deploy:
       name: Deploying to gh-pages

scss/forms/control_button_group.scss

@@ -44,6 +44,8 @@
   }
 
   .FormControlLabel {
+    @include font-type-30;
+
     flex-wrap: wrap;
     margin-right: 0.5rem;
     display: block;

scss/forms/form_control_label.scss

@@ -3,17 +3,21 @@
 @import '../typography';
 
 .FormControlLabel {
+  @include font-type-30;
+
   align-items: center;
   display: flex;
 
   &--with-children {
+    @include font-type-30--bold;
+
     align-items: flex-start;
     flex-direction: column;
     display: flex;
   }
 
   &__label {
-    align-items: center;
+    align-items: flex-start;
     display: flex;
     flex-direction: row;
   }
@@ -32,8 +36,6 @@
   }
 
   &--bordered {
-    @include font-type-30;
-
     border: 1px solid $ux-gray-400;
     border-radius: $ux-border-radius;
     padding: 1rem;
@@ -53,5 +55,6 @@
   input[type='checkbox'], input[type='radio'] {
     min-height: 1rem;
     min-width: 1rem;
+    margin-top: 0.125rem;
   }
 }

spec/__snapshots__/Storyshots.test.js.snap

@@ -1437,7 +1437,7 @@ exports[`Storyshots Design System/Selects/Async Default 1`] = `
         />
         <div
           aria-hidden="true"
-          className=" css-tlfecz-indicatorContainer"
+          className=" css-fric97-indicatorContainer"
           onMouseDown={[Function]}
           onTouchEnd={[Function]}
         >
@@ -1559,7 +1559,7 @@ exports[`Storyshots Design System/Selects/Async Labeled 1`] = `
         />
         <div
           aria-hidden="true"
-          className=" css-tlfecz-indicatorContainer"
+          className=" css-fric97-indicatorContainer"
           onMouseDown={[Function]}
           onTouchEnd={[Function]}
         >
@@ -1629,7 +1629,7 @@ exports[`Storyshots Design System/Selects/Single Default 1`] = `
         />
         <div
           aria-hidden="true"
-          className=" css-tlfecz-indicatorContainer"
+          className=" css-fric97-indicatorContainer"
           onMouseDown={[Function]}
           onTouchEnd={[Function]}
         >
@@ -1706,7 +1706,7 @@ exports[`Storyshots Design System/Selects/Single Labeled 1`] = `
         />
         <div
           aria-hidden="true"
-          className=" css-tlfecz-indicatorContainer"
+          className=" css-fric97-indicatorContainer"
           onMouseDown={[Function]}
           onTouchEnd={[Function]}
         >
@@ -1776,7 +1776,7 @@ exports[`Storyshots Design System/Selects/Single Loading 1`] = `
         />
         <div
           aria-hidden="true"
-          className=" css-tlfecz-indicatorContainer"
+          className=" css-fric97-indicatorContainer"
           onMouseDown={[Function]}
           onTouchEnd={[Function]}
         >
@@ -1891,7 +1891,7 @@ exports[`Storyshots Design System/Selects/Single Searchable 1`] = `
         />
         <div
           aria-hidden="true"
-          className=" css-tlfecz-indicatorContainer"
+          className=" css-fric97-indicatorContainer"
           onMouseDown={[Function]}
           onTouchEnd={[Function]}
         >

src/Select/styles.js

@@ -1,4 +1,5 @@
 import systemColors from 'src/Styles/colors';
+import fontWeights from '../Styles/fontWeights';
 
 export const SELECT_SIZES = { SMALL: 'small' };
 
@@ -23,10 +24,12 @@ const defaultStyles = ({ size }) => ({
       backgroundColor: isDisabled ? systemColors.inputDisabledBg : styles.backgroundColor,
       borderColor: systemColors.inputBorderColor,
     }),
+    dropdownIndicator: (styles) => ({ ...styles, color: systemColors.uxGray600 }),
     indicatorSeparator: (styles) => ({ ...styles, display: 'none' }),
     singleValue: (styles, { data }) => ({
       ...styles,
-      color: (data.colors ? data.colors.text : systemColors.uxGray600) || systemColors.uxGray600,
+      color: (data.colors ? data.colors.text : systemColors.uxGray900) || systemColors.uxGray900,
+      fontWeight: fontWeights.light,
     }),
     option: (styles, {
       data,
@@ -40,6 +43,7 @@ const defaultStyles = ({ size }) => ({
         ...styles,
         backgroundColor: isSelected || isFocused ? colors.hover : styles.backgroundColor,
         color: colors.text,
+        fontWeight: fontWeights.light,
         cursor: 'pointer',
 
         ':active': {

src/Styles/fontWeights.js

@@ -0,0 +1,5 @@
+export default {
+  light: 300,
+  regular: 400,
+  bold: 700,
+};