Chore/UIDS-177 update style double digit naming convention (#184)

jasonbasuil · web-flow · commit b538b219291c · 2021-02-24T16:54:55.000-08:00
* updates Card scss variables

* updates CheckboxButtonGroup scss variables

* updates CopyToClipboard scss variables

* updates CopyToClipboardButton scss variables

* updates Input scss variables

* updates Pill scss variables

* updates Popper scss variables

* updates Avatar / ProfileCell scss variables

* updates Tooltip scss variables

* updates $ux-spacing to double digit increments

* updates $ux-elevations to double digit increments
diff --git a/scss/elevations.scss b/scss/elevations.scss
@@ -1,6 +1,6 @@
 $ux-elevations-00:  0rem 0rem 0rem rgba(0, 0, 0, 0.1);
-$ux-elevations-01:  0rem 0.06rem 0.12rem rgba(0, 0, 0, 0.1);
-$ux-elevations-02:  0rem 0.13rem 0.3rem rgba(0, 0, 0, 0.1);
-$ux-elevations-03:  0rem 0.3rem 0.5rem rgba(0, 0, 0, 0.1);
-$ux-elevations-04:  0rem 0.4rem 0.8rem rgba(0, 0, 0, 0.1);
-$ux-elevations-05:  0rem 0.5rem 1rem rgba(0, 0, 0, 0.1);
+$ux-elevations-10:  0rem 0.06rem 0.12rem rgba(0, 0, 0, 0.1);
+$ux-elevations-20:  0rem 0.13rem 0.3rem rgba(0, 0, 0, 0.1);
+$ux-elevations-30:  0rem 0.3rem 0.5rem rgba(0, 0, 0, 0.1);
+$ux-elevations-40:  0rem 0.4rem 0.8rem rgba(0, 0, 0, 0.1);
+$ux-elevations-50:  0rem 0.5rem 1rem rgba(0, 0, 0, 0.1);
diff --git a/scss/spacing.scss b/scss/spacing.scss
@@ -1,7 +1,7 @@
-$ux-spacing-01: 0.25rem;
-$ux-spacing-02: 0.5rem;
-$ux-spacing-03: 0.75rem;
-$ux-spacing-04: 1rem;
-$ux-spacing-05: 1.5rem;
-$ux-spacing-06: 2rem;
-$ux-spacing-07: 3rem;
+$ux-spacing-10: 0.25rem;
+$ux-spacing-20: 0.5rem;
+$ux-spacing-30: 0.75rem;
+$ux-spacing-40: 1rem;
+$ux-spacing-50: 1.5rem;
+$ux-spacing-60: 2rem;
+$ux-spacing-70: 3rem;
diff --git a/src/Alert/Alert.scss b/src/Alert/Alert.scss
@@ -41,7 +41,7 @@
   background-color: $ux-green-200;
   color: $ux-green-800;
   border-left: 0.5rem solid $ux-green-400;
-  box-shadow: $ux-elevations-02;
+  box-shadow: $ux-elevations-20;
 
   .close {
     color: $ux-green-800;
@@ -52,7 +52,7 @@
   background-color: $ux-blue-100;
   color: $ux-blue-700;
   border-left: 0.5rem solid $ux-blue-300;
-  box-shadow: $ux-elevations-02;
+  box-shadow: $ux-elevations-20;
 
   .close {
     color: $ux-blue-700;
@@ -63,7 +63,7 @@
   background-color: $ux-blue-100;
   color: $ux-blue-700;
   border-left: 0.5rem solid $ux-blue-300;
-  box-shadow: $ux-elevations-02;
+  box-shadow: $ux-elevations-20;
 
   .close {
     color: $ux-blue-700;
@@ -74,7 +74,7 @@
   background-color: $ux-yellow-100;
   color: $ux-yellow-800;
   border-left: 0.5rem solid $ux-yellow-600;
-  box-shadow: $ux-elevations-02;
+  box-shadow: $ux-elevations-20;
 
   .close {
     color: $ux-yellow-800;
@@ -85,7 +85,7 @@
   background-color: $ux-red-100;
   color: $ux-red-800;
   border-left: 0.5rem solid $ux-red-400;
-  box-shadow: $ux-elevations-02;
+  box-shadow: $ux-elevations-20;
 
   .close {
     color: $ux-red-800;
diff --git a/src/Card/Card.scss b/src/Card/Card.scss
@@ -15,7 +15,7 @@ $card-width-xs: 15rem;
   background-color: $ux-white;
   border: none;
   border-radius: 0.25rem;
-  box-shadow: 0 .125rem .25rem rgba(0,0,0,0.1);
+  box-shadow: $ux-elevations-20;
   margin: $card-spacing auto;
   outline-color: $ux-green-500;
   padding: $card-spacing;
@@ -29,8 +29,8 @@ $card-width-xs: 15rem;
   &__divider {
     border-top: 1px solid rgba(0,0,0,.1);
 
-    margin-bottom: 0.5rem;
-    margin-top: 0.25rem;
+    margin-bottom: $ux-spacing-20;
+    margin-top: $ux-spacing-10;
   }
 
   &__header {
@@ -41,7 +41,7 @@ $card-width-xs: 15rem;
   &__helper-text {
     @include font-type-50--light;
     color: $ux-gray-900;
-    margin-left: 0.25rem;
+    margin-left: $ux-spacing-10;
   }
 
   &__subtitle {
@@ -51,7 +51,7 @@ $card-width-xs: 15rem;
 
   &__title {
     @include font-type-50--bold;
-    margin-bottom: 0.25rem;
+    margin-bottom: $ux-spacing-10;
   }
 
   &--divided {
@@ -83,7 +83,7 @@ $card-width-xs: 15rem;
 
     .Card__helper-text {
       margin-left: 0;
-      margin-bottom: 0.5rem;
+      margin-bottom: $ux-spacing-20;
     }
   }
 }
diff --git a/src/CheckboxButtonGroup/CheckboxButtonGroup.scss b/src/CheckboxButtonGroup/CheckboxButtonGroup.scss
@@ -7,7 +7,7 @@
   flex-direction: column;
 
   label {
-    margin-bottom: 0.5rem;
+    margin-bottom: $ux-spacing-20;
   }
 
   &--row {
diff --git a/src/CopyToClipboard/CopyToClipboard.scss b/src/CopyToClipboard/CopyToClipboard.scss
@@ -2,14 +2,14 @@
 
 .CopyToClipboard {
   align-items: center;
-  border: 1px solid $ux-gray-400;
+  border: 0.06rem solid $ux-gray-400;
   border-radius: .25rem;
   color: $ux-gray-800;
   display: flex;
   font-weight: $font-weight-bold;
   justify-content: space-between;
   min-height: 2rem;
-  padding: 0 0 0 .375rem;
+  padding: 0 0 0 $ux-spacing-20;
 
   &__copy-text {
     overflow: hidden;
diff --git a/src/CopyToClipboardButton/CopyToClipboardButton.scss b/src/CopyToClipboardButton/CopyToClipboardButton.scss
@@ -3,6 +3,6 @@
 .CopyToClipboardButton {
   &__display-text {
     @include font-type-40--bold;
-    margin-left: .5rem;
+    margin-left: $ux-spacing-20;
   }
 }
diff --git a/src/Input/Input.scss b/src/Input/Input.scss
@@ -9,15 +9,15 @@
   }
 
   &:focus {
-    border: 1px solid #92CBFC;
+    border: 0.06rem solid #92CBFC;
     box-shadow: $input-focus-box-shadow;
     color: $input-focus-color;
     filter: drop-shadow(0px 0px 3px rgba(102, 175, 233, 0.7));
   }
 
   .form-control {
     color: $input-color;
-    padding: 0.5rem 0.75rem;
+    padding: $ux-spacing-20 $ux-spacing-30;
   }
 
   .input-group-text {
diff --git a/src/Pill/Pill.scss b/src/Pill/Pill.scss
@@ -6,54 +6,54 @@
   font-weight: $font-weight-normal;
   background-color: $ux-gray-200;
   color: $ux-gray-800;
-  border: 1px solid $ux-gray-400;
+  border: 0.06rem solid $ux-gray-400;
 
   &--blue {
     background-color: $ux-blue-100;
     color: $ux-blue-700;
-    border: 1px solid $ux-blue-300;
+    border: 0.06rem solid $ux-blue-300;
   }
 
   &--orange {
     background-color: $ux-orange-100;
     color: $ux-orange-900;
-    border: 1px solid $ux-orange-400;
+    border: 0.06rem solid $ux-orange-400;
   }
 
   &--green {
     background-color: $ux-green-200;
     color: $ux-green-800;
-    border: 1px solid $ux-green-400;
+    border: 0.06rem solid $ux-green-400;
   }
 
   &--yellow {
     background-color: $ux-yellow-100;
     color: $ux-yellow-900;
-    border: 1px solid $ux-yellow-600;
+    border: 0.06rem solid $ux-yellow-600;
   }
 
   &--gray {
     background-color: $ux-gray-300;
     color: $ux-gray-800;
-    border: 1px solid $ux-gray-400;
+    border: 0.06rem solid $ux-gray-400;
   }
 
   &--silver {
     background-color: $ux-gray-200;
     color: $ux-gray-800;
-    border: 1px solid $ux-gray-400;
+    border: 0.06rem solid $ux-gray-400;
   }
 
   /////// SIZES
   // Seems like a fine default size
   border-radius: 2rem;
   font-size: $font-size-base;
-  padding: .25rem .75rem;
+  padding: $ux-spacing-10 $ux-spacing-30;
 
   &--sm {
     border-radius: 1rem;
     font-size: .625rem;
-    padding: .25rem .5rem;
+    padding: $ux-spacing-10 $ux-spacing-20;
   }
 
   &--squared {
diff --git a/src/Popper/Popper.scss b/src/Popper/Popper.scss
@@ -4,16 +4,16 @@
   @include font-type-30;
   background-color: $ux-white;
   border-radius: $ux-border-radius;
-  border: 1px solid $ux-gray-300;
+  border: 0.06rem solid $ux-gray-300;
   box-shadow: $ux-box-shadow-card;
   max-width: 15rem;
   letter-spacing: normal;
-  padding: 0.75rem;
+  padding: $ux-spacing-30;
   z-index: $z-index-flash;
   font-weight: $font-weight-light;
 
   &__header {
-    margin-bottom: 0.3rem;
+    margin-bottom: $ux-spacing-10;
     @include font-type-30--bold;
   }
 
diff --git a/src/ProfileCell/Avatar.scss b/src/ProfileCell/Avatar.scss
@@ -8,7 +8,7 @@
 
   &__alert {
      background-color: $ux-red-400;
-     border: 2px solid $ux-white;
+     border: 0.125rem solid $ux-white;
      border-radius: 50%;
      height: 0.75rem;
      position: absolute;
diff --git a/src/ProfileCell/ProfileCell.scss b/src/ProfileCell/ProfileCell.scss
@@ -34,7 +34,7 @@
   &__image {
     align-items: center;
     display: flex;
-    margin-right: 1rem;
+    margin-right: $ux-spacing-40;
   }
 
   &--large {
diff --git a/src/Tooltip/Tooltip.scss b/src/Tooltip/Tooltip.scss
@@ -1,11 +1,12 @@
 @import '../../scss/colors';
+@import '../../scss/spacing.scss';
 
 .Tooltip {
   &__icon {
     color: $ux-blue-500;
     cursor: pointer;
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
+    margin-left: $ux-spacing-20;
+    margin-right: $ux-spacing-20;
     vertical-align: middle;
 
     &--gray {

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`flex-direction: column;`
`8`	`8`
`9`	`9`	`label {`
`10`		`- margin-bottom: 0.5rem;`
	`10`	`+ margin-bottom: $ux-spacing-20;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`&--row {`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,6 @@`
`3`	`3`	`.CopyToClipboardButton {`
`4`	`4`	`&__display-text {`
`5`	`5`	`@include font-type-40--bold;`
`6`		`- margin-left: .5rem;`
	`6`	`+ margin-left: $ux-spacing-20;`
`7`	`7`	`}`
`8`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,15 +9,15 @@`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`&:focus {`
`12`		`- border: 1px solid #92CBFC;`
	`12`	`+ border: 0.06rem solid #92CBFC;`
`13`	`13`	`box-shadow: $input-focus-box-shadow;`
`14`	`14`	`color: $input-focus-color;`
`15`	`15`	`filter: drop-shadow(0px 0px 3px rgba(102, 175, 233, 0.7));`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`.form-control {`
`19`	`19`	`color: $input-color;`
`20`		`- padding: 0.5rem 0.75rem;`
	`20`	`+ padding: $ux-spacing-20 $ux-spacing-30;`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.input-group-text {`