Bootstrap: Inconsistency in variable naming pattern V4

[pat270]

In most places variables are named using the pattern $(component)-(state)-(css property)-(size) except in tables and inputs where it follows $(component)-(css property)-(size)-(state). I think it should be consistent across your variable api. I prefer the pattern in tables and inputs since it's easier to order alphabetically, $(component)-(css property)-(size)-(state), but realize it's easier to change it according to the first pattern.

[mdo]

I think you've submitted some PRs for this recently that we merged. Have any other areas you'd like to see addressed?

[pat270]

@mdo Yes! Some variables I would like to see changed for consistency are:

$font-size-h1                                   =>      $h1-font-size
$font-size-h2                                   =>      $h2-font-size
$font-size-h3                                   =>      $h3-font-size
$font-size-h4                                   =>      $h4-font-size
$font-size-h5                                   =>      $h5-font-size
$font-size-h6                                   =>      $h6-font-size
$table-sm-cell-padding                          =>      $table-cell-padding-sm
$table-bg-accent                                =>      $table-accent-bg
$table-bg-hover                                 =>      $table-hover-bg
$table-bg-active                                =>      $table-active-bg
$table-inverse-bg-accent                        =>      $table-inverse-accent-bg
$table-inverse-bg-hover                         =>      $table-inverse-hover-bg
$input-bg-disabled                              =>      $input-disabled-bg
$input-bg-focus                                 =>      $input-focus-bg
$input-border-color-focus                       =>      $input-focus-border-color
$input-box-shadow-focus                         =>      $input-focus-box-shadow
$input-color-focus                              =>      $input-focus-color
$input-color-placeholder                        =>      $input-placeholder-color
$custom-control-disabled-indicator-bg           =>      $custom-control-indicator-disabled-bg
$custom-control-disabled-description-color      =>      $custom-control-description-disabled-color
$custom-control-checked-indicator-color         =>      $custom-control-indicator-checked-color
$custom-control-checked-indicator-bg            =>      $custom-control-indicator-checked-bg
$custom-control-checked-indicator-box-shadow    =>      $custom-control-indicator-checked-box-shadow
$custom-control-focus-indicator-box-shadow      =>      $custom-control-indicator-focus-box-shadow
$custom-control-active-indicator-color          =>      $custom-control-indicator-active-color
$custom-control-active-indicator-bg             =>      $custom-control-indicator-active-bg
$custom-control-active-indicator-box-shadow     =>      $custom-control-indicator-active-box-shadow
$custom-checkbox-checked-icon                   =>      $custom-checkbox-icon-checked
$custom-checkbox-indeterminate-indicator-color  =>      $custom-checkbox-indicator-indeterminate-color
$custom-checkbox-indeterminate-icon             =>      $custom-checkbox-icon-indeterminate
$custom-radio-checked-icon                      =>      $custom-radio-icon-checked
$custom-select-sm-font-size                     =>      $custom-select-font-size-sm
$nav-disabled-link-color                        =>      $nav-link-disabled-color
$nav-tabs-active-link-color                     =>      $nav-tabs-link-active-color
$nav-tabs-active-link-bg                        =>      $nav-tabs-link-active-bg
$nav-tabs-active-link-border-color              =>      $nav-tabs-link-active-border-color
$nav-pills-active-link-color                    =>      $nav-pills-link-active-color
$nav-pills-active-link-bg                       =>      $nav-pills-link-active-bg
$modal-dialog-sm-up-margin-y                    =>      $modal-dialog-margin-y-sm-up
$modal-content-xs-box-shadow                    =>      $modal-content-box-shadow-xs
$modal-content-sm-up-box-shadow                 =>      $modal-content-box-shadow-sm-up

This list isn't comprehensive (I probably missed some). Let me know if this is something worth merging, I can send a pull with changes.

[mdo]

Whoa, that's a big list lol. Separate PRs would be fantastic if you can manage.

[pat270]

Not a problem, I'll try and send everything this week.

[mdo]

Lol wow, so amazing to see those PRs coming in. I was staring at the /pulls page and thinking what the hell just happened!? <3

[mdo]

Ready for the next batch lol!

[vvpanchenko]

Extended list of changes, faced during upgrade: Bootstrap 4 Alpha 6 -> Bootstrap 4.0.0:

$brand-primary                                  =>      $primary    // theme-color("primary")
$brand-secondary                                =>      $secondary  // theme-color("secondary")
$brand-success                                  =>      $success    // theme-color("success")
$brand-info                                     =>      $info       // theme-color("info")
$brand-warning                                  =>      $warning    // theme-color("warning")
$brand-danger                                   =>      $danger     // theme-color("danger")
$brand-inverse                                  =>      $dark       // theme-color("dark")

$card-border-radius-inner                       =>      $card-inner-border-radius
$card-link-hover-color                          =>      $card-inverse-link-hover-color
$card-columns-sm-up-column-gap                  =>      $card-columns-gap

$carousel-icon-width                            =>      $carousel-control-icon-width

$custom-control-disabled-indicator-bg           =>      $custom-control-indicator-disabled-bg
$custom-control-disabled-description-color      =>      $custom-control-description-disabled-color
$custom-control-checked-indicator-color         =>      $custom-control-indicator-checked-color
$custom-control-checked-indicator-bg            =>      $custom-control-indicator-checked-bg
$custom-control-checked-indicator-box-shadow    =>      $custom-control-indicator-checked-box-shadow
$custom-control-focus-indicator-box-shadow      =>      $custom-control-indicator-focus-box-shadow
$custom-control-active-indicator-color          =>      $custom-control-indicator-active-color
$custom-control-active-indicator-bg             =>      $custom-control-indicator-active-bg
$custom-control-active-indicator-box-shadow     =>      $custom-control-indicator-active-box-shadow
$custom-checkbox-checked-icon                   =>      $custom-checkbox-icon-checked
$custom-checkbox-indeterminate-indicator-color  =>      $custom-checkbox-indicator-indeterminate-color
$custom-checkbox-indeterminate-icon             =>      $custom-checkbox-icon-indeterminate
$custom-radio-checked-icon                      =>      $custom-radio-icon-checked
$custom-select-sm-font-size                     =>      $custom-select-font-size-sm

$dropdown-margin-top                            =>      $dropdown-spacer

$font-size-h1                                   =>      $h1-font-size
$font-size-h2                                   =>      $h2-font-size
$font-size-h3                                   =>      $h3-font-size
$font-size-h4                                   =>      $h4-font-size
$font-size-h5                                   =>      $h5-font-size
$font-size-h6                                   =>      $h6-font-size

$input-bg-disabled                              =>      $input-disabled-bg
$input-bg-focus                                 =>      $input-focus-bg
$input-border-color-focus                       =>      $input-focus-border-color
$input-box-shadow-focus                         =>      $input-focus-box-shadow
$input-color-focus                              =>      $input-focus-color
$input-color-placeholder                        =>      $input-placeholder-color

$list-group-link-color                          =>      $list-group-action-color
$list-group-link-hover-color                    =>      $list-group-action-hover-color
$list-group-link-active-color                   =>      $list-group-action-active-color
$list-group-link-active-bg                      =>      $list-group-action-active-bg

$nav-disabled-link-color                        =>      $nav-link-disabled-color
$nav-tabs-active-link-color                     =>      $nav-tabs-link-active-color
$nav-tabs-active-link-bg                        =>      $nav-tabs-link-active-bg
$nav-tabs-active-link-border-color              =>      $nav-tabs-link-active-border-color
$nav-pills-active-link-color                    =>      $nav-pills-link-active-color
$nav-pills-active-link-bg                       =>      $nav-pills-link-active-bg

$navbar-inverse-color                           =>      $navbar-dark-color
$navbar-inverse-hover-color                     =>      $navbar-dark-hover-color
$navbar-inverse-active-color                    =>      $navbar-dark-active-color
$navbar-inverse-disabled-color                  =>      $navbar-dark-disabled-color
$navbar-inverse-toggler-bg                      =>      $navbar-inverse-toggler-icon-bg
$navbar-inverse-toggler-icon-bg                 =>      $navbar-dark-toggler-icon-bg
$navbar-inverse-toggler-border-color            =>      $navbar-dark-toggler-border-color
$navbar-light-toggler-bg                        =>      $navbar-light-toggler-icon-bg

$modal-dialog-sm-up-margin-y                    =>      $modal-dialog-margin-y-sm-up
$modal-content-xs-box-shadow                    =>      $modal-content-box-shadow-xs
$modal-content-sm-up-box-shadow                 =>      $modal-content-box-shadow-sm-up

$popover-content-color                          =>      $popover-body-color
$popover-content-padding-y                      =>      $popover-body-padding-y
$popover-content-padding-x                      =>      $popover-body-padding-x
$popover-title-bg                               =>      $popover-header-bg
$popover-title-color                            =>      $popover-header-color
$popover-title-padding-y                        =>      $popover-header-padding-y
$popover-title-padding-x                        =>      $popover-header-padding-x

$table-sm-cell-padding                          =>      $table-cell-padding-sm
$table-bg-accent                                =>      $table-accent-bg
$table-bg-hover                                 =>      $table-hover-bg
$table-bg-active                                =>      $table-active-bg

$table-inverse-bg                               =>      $table-dark-bg
$table-inverse-bg-accent                        =>      $table-inverse-accent-bg      =>      $table-dark-accent-bg
$table-inverse-bg-hover                         =>      $table-inverse-hover-bg       =>      $table-dark-hover-bg
$table-inverse-border-color                     =>      $table-dark-border-color
$table-inverse-color                            =>      $table-dark-color