Migrate custom BEM to getBEM syntax

Author: anselmbradford

docs/assets/css/color-swatches.less

@@ -12,19 +12,19 @@
 .swatch {
   margin-left: 0;
 
-  &_field {
+  &__field {
     height: 5em;
   }
 
-  &__primary &_field {
+  &--primary &__field {
     height: 10em;
   }
 
-  &_head {
+  &__head {
     margin: 0.25em 0;
   }
 
-  &_table {
+  &__table {
     width: 100%;
   }
 
@@ -40,7 +40,7 @@
     text-align: left;
   }
 
-  &_field__green {
+  &__field__green {
     background: @green;
   }
 }

docs/assets/css/footer.less

@@ -5,7 +5,7 @@
 .ds-footer {
   padding-bottom: 30px;
 
-  &_content {
+  &__content {
     max-width: 41.875rem;
   }
 

docs/assets/css/skip-nav.less

@@ -12,7 +12,7 @@
 .skip-nav {
   position: relative;
 
-  &_link {
+  &__link {
     position: absolute;
     top: auto;
     left: -10000px;
@@ -42,7 +42,7 @@
         background 0.2s linear;
     }
 
-    &__flush-left:focus {
+    &--flush-left:focus {
       left: 0;
     }
   }

docs/assets/css/tabs.less

@@ -1,14 +1,14 @@
 // All screen sizes.
 .m-tabs {
-  &_list {
+  &__list {
     border-top: 1px solid @gray;
     margin: 0;
     padding: 0;
     list-style: none;
     display: none;
   }
 
-  &_list-item {
+  &__list-item {
     .heading-5();
     border-bottom: 0;
     margin-bottom: 0;
@@ -31,7 +31,7 @@
     }
   }
 
-  &_tab {
+  &__tab {
     border: 0;
     color: @gray;
     display: block;
@@ -64,7 +64,7 @@
     }
   }
 
-  &_panel {
+  &__panel {
     background-color: @gray-5;
     margin-bottom: 30px;
   }

docs/assets/css/variation.less

@@ -6,17 +6,17 @@
   border: 5px solid @gray-10;
   margin: 2rem 0;
 
-  &_title {
+  &__title {
     background: @gray-10;
     margin-bottom: 2rem;
     padding: 1rem;
   }
 
-  &_description {
+  &__description {
     margin-bottom: 2rem;
   }
 
-  &_description,
+  &__description,
   & .m-variation {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -26,11 +26,11 @@
 .m-variation {
   border-bottom: 1px solid @gray-40;
 
-  &_name {
+  &__name {
     margin-top: 2rem;
   }
 
-  &_deprecated {
+  &__deprecated {
     background: @gray-10;
     font-size: unit((10px / @base-font-size-px), em);
     font-variant: small-caps;

packages/cfpb-buttons/src/atoms/button-links.less

@@ -4,7 +4,7 @@
 
 // TODO: Refactor the rule combos for simplicity
 
-.a-btn__link {
+.a-btn--link {
   padding: 0;
   // Padding added so the focus rectangle falls below the underline.
   padding-bottom: 1.5px;
@@ -49,7 +49,7 @@
   // Secondary button link
   //
 
-  &.a-btn__secondary {
+  &.a-btn--secondary {
     &,
     &:link,
     &:visited {
@@ -80,7 +80,7 @@
   // Destructive action button link
   //
 
-  &.a-btn__warning {
+  &.a-btn--warning {
     &,
     &:link,
     &:visited {

packages/cfpb-buttons/src/atoms/buttons-with-icons.less

@@ -2,28 +2,28 @@
 // TODO: Replace magic numbers with calculations based off of the
 // button padding size
 
-.a-btn_icon__on-left {
+.a-btn__icon--on-left {
   padding-right: unit((11px / @btn-font-size), em);
   border-right: 1px solid mix(@btn-bg, @btn-text, 50%);
   margin-right: unit((7px / @btn-font-size), em);
 }
 
-.a-btn_icon__on-right {
+.a-btn__icon--on-right {
   padding-left: unit((11px / @btn-font-size), em);
   border-left: 1px solid mix(@btn-bg, @btn-text, 50%);
   margin-left: unit((7px / @btn-font-size), em);
 }
 
-.a-btn_icon {
-  .a-btn__secondary & {
+.a-btn__icon {
+  .a-btn--secondary & {
     border-color: mix(@btn__secondary-bg, @btn__secondary-text, 50%);
   }
 
-  .a-btn__warning & {
+  .a-btn--warning & {
     border-color: mix(@btn__warning-bg, @btn__warning-text, 50%);
   }
 
-  .a-btn__disabled &,
+  .a-btn--disabled &,
   .a-btn[disabled] & {
     border-color: mix(@btn__disabled-bg, @btn__disabled-text, 50%);
   }

packages/cfpb-buttons/src/atoms/buttons.less

@@ -57,7 +57,7 @@
   // Secondary button
   //
 
-  &__secondary {
+  &--secondary {
     &,
     &:link,
     &:visited {
@@ -87,7 +87,7 @@
   // Destructive action button
   //
 
-  &__warning {
+  &--warning {
     &,
     &:link,
     &:visited {
@@ -117,7 +117,7 @@
   // Disabled button
   //
 
-  &__disabled,
+  &--disabled,
   &[disabled] {
     &,
     &:link,
@@ -143,7 +143,7 @@
   //
   // Full width button on x-small screens
   //
-  &__full-on-xs {
+  &--full-on-xs {
     // Mobile only.
     .respond-to-max(@bp-xs-max, {
       display: block;

packages/cfpb-core/src/utilities.less

@@ -150,15 +150,15 @@
 .u-flexible-container {
   .u-flexible-container-mixin();
 
-  &_inner {
+  &__inner {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }
 
-  &__4-3 {
+  &--4-3 {
     .u-flexible-container-mixin( 4, 3 );
   }
 }
@@ -167,39 +167,39 @@
 // Link mixins
 //
 
-.u-link__colors() {
-  .u-link__colors-base();
+.u-link--colors() {
+  .u-link--colors-base();
 }
 
-.u-link__colors( @c ) {
-  .u-link__colors-base(
+.u-link--colors( @c ) {
+  .u-link--colors-base(
     @c, @c, @c, @c, @c,
     @c, @c, @c, @c, @c
   );
 }
 
-.u-link__colors( @c, @h ) {
-  .u-link__colors-base(
+.u-link--colors( @c, @h ) {
+  .u-link--colors-base(
     @c, @c, @h, @h, @c,
     @c, @c, @h, @h, @c
   );
 }
 
-.u-link__colors( @c, @v, @h, @f, @a ) {
-  .u-link__colors-base(
+.u-link--colors( @c, @v, @h, @f, @a ) {
+  .u-link--colors-base(
     @c, @v, @h, @f, @a,
     @c, @v, @h, @f, @a
   );
 }
 
-.u-link__colors( @c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba ) {
-  .u-link__colors-base(
+.u-link--colors( @c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba ) {
+  .u-link--colors-base(
     @c, @v, @h, @f, @a,
     @bc, @bv, @bh, @bf, @ba
   );
 }
 
-.u-link__colors-base(
+.u-link--colors-base(
 @c:  @link-text,
 @v:  @link-text-visited,
 @h:  @link-text-hover,
@@ -238,15 +238,15 @@
   }
 }
 
-.u-link__border() {
+.u-link--border() {
   border-bottom-width: 1px;
 }
 
-.u-link__no-border() {
+.u-link--no-border() {
   border-bottom-width: 0 !important;
 }
 
-.u-link__hover-border() {
+.u-link--hover-border() {
   border-bottom-width: 0 !important;
 
   &:hover,