src/platform/core/common/styles/_buttons.scss

/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements.  See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/* Buttons */

@mixin fds-buttons-theme($theme) {
  $primaryColor: map-get(map-get($theme, primary), 500);
  $primaryColorHover: map-get(map-get($theme, primary), 100);
  $accentColor: map-get(map-get($theme, accent), 500);
  $accentColorHover: map-get(map-get($theme, accent), 100);
  $buttonFontColor: #FFFFFF;
  $buttonFontColorDisabled: #D1E8D1;
  $buttonBgColorPrimary: $primaryColor;
  $buttonBgColorPrimaryHover: $primaryColorHover;
  $buttonBgColorPrimaryDisabled: $primaryColor;
  $buttonBgColorPrimarySelected: $primaryColor;
  $buttonBgColorSecondary: #FFFFFF;
  $buttonBgColorSecondaryHover: $primaryColorHover;
  $buttonBgColorSecondarySelected: #FFFFFF;
  $buttonBgColorRegular: #FFFFFF;
  $buttonBgColorRegularHover: #808793;
  $buttonBgColorRegularDisabled: #808793;
  $buttonBgColorRegularSelected: #FFFFFF;
  $buttonBorderColorSecondary: $primaryColor;
  $buttonBorderColorSecondaryHover: $buttonBgColorSecondaryHover;
  $buttonBorderColorSecondaryDisabled: $buttonBgColorSecondaryHover;
  $buttonBorderColorSecondarySelected: $primaryColor;
  $buttonBorderColorRegular: #CFD3D7;
  $buttonBorderColorRegularHover: $buttonBgColorRegularHover;
  $buttonBorderColorRegularDisabled: $buttonBgColorRegularHover;
  $buttonBorderColorRegularSelected: #CFD3D7;
  $buttonFontPrimaryColor: $buttonFontColor;
  $buttonFontPrimaryColorHover: $buttonFontColor;
  $buttonFontPrimaryColorDisabled: $buttonFontColorDisabled;
  $buttonFontPrimaryColorSelected: $buttonFontColor;
  $buttonFontSecondaryColor: $primaryColorHover;
  $buttonFontSecondaryColorHover: $buttonFontColor;
  $buttonFontSecondaryColorDisabled: $buttonFontColorDisabled;
  $buttonFontSecondaryColorSelected: $primaryColorHover;
  $buttonFontRegularColor: $descriptionTextColor;
  $buttonFontRegularColorHover: $buttonFontColor;
  $buttonFontRegularColorDisabled: $buttonFontColorDisabled;
  $buttonFontRegularColorSelected: $bodyTextColor;
  $buttonFontWarnColor: $buttonFontColor;
  $buttonFontWarnColorHover: $buttonFontColor;
  $buttonFontWarnColorDisabled: $buttonFontColorDisabled;
  $buttonFontWarnColorSelected: $buttonFontColor;
  $buttonFontCriticalColor: $buttonFontColor;
  $buttonFontCriticalColorHover: $buttonFontColor;
  $buttonFontCriticalColorDisabled: $buttonFontColorDisabled;
  $buttonFontCriticalColorSelected: $buttonFontColor;

  body[fds] .mat-raised-button {
    height: 34px;
    font-family: $fontPrimary;
    font-weight: lighter;
    font-size: 14px;
    text-transform: uppercase;
    line-height: normal;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  }

  body[fds] .mat-raised-button.cdk-focused:focus {
    box-shadow: 0px 0px 2px 0px rgba(19, 145, 193, 1);
  }

  body[fds] .mat-raised-button[disabled] {
    opacity: .6;
    cursor: not-allowed;
  }

  body[fds] .mat-button-toggle-disabled .mat-button-toggle-label-content {
    cursor: not-allowed;
  }

  body[fds] .mat-button-focus-overlay {
    background-color: transparent;
  }

  body[fds] .mat-raised-button.mat-fds-primary {
    border: 1px solid $buttonBgColorPrimary;
    background-color: $buttonBgColorPrimary;
    color: $buttonFontPrimaryColor;
  }

  body[fds] .mat-raised-button.mat-fds-primary:hover {
    background-color: $buttonBgColorPrimaryHover;
    color: $buttonFontPrimaryColorHover;
  }

  body[fds] .mat-raised-button.mat-fds-primary.mat-button-focus {
    color: $buttonFontPrimaryColorSelected;
    background-color: $buttonBgColorPrimarySelected;
  }

  body[fds] .mat-raised-button.mat-fds-primary[disabled] {
    color: $buttonFontPrimaryColorDisabled;
    background-color: $buttonBgColorPrimaryDisabled;
    color: $buttonFontPrimaryColorDisabled;
  }

  body[fds] .mat-raised-button.mat-fds-secondary {
    color: $buttonFontSecondaryColor;
    border: 1px solid $buttonBorderColorSecondary;
  }

  body[fds] .mat-raised-button.mat-fds-secondary:hover:not([disabled]) {
    color: $buttonFontSecondaryColorHover;
    background-color: $buttonBgColorSecondaryHover;
    border: 1px solid $buttonBorderColorSecondaryHover;
  }

  body[fds] .mat-raised-button.mat-fds-secondary.mat-button-focus {
    color: $buttonFontSecondaryColorSelected;
    background-color: $buttonBgColorSecondarySelected;
    border: 1px solid $buttonBorderColorSecondarySelected;
  }

  body[fds] .mat-raised-button.mat-fds-secondary[disabled] {
    color: $buttonFontPrimaryColorDisabled;
    background-color: $buttonBgColorPrimaryDisabled;
  }

  body[fds] .mat-raised-button.mat-fds-regular {
    color: $buttonFontRegularColor;
    background-color: $buttonBgColorRegular;
    border: 1px solid $buttonBorderColorRegular;
  }

  body[fds] .mat-raised-button.mat-fds-regular:hover {
    color: $buttonFontRegularColorHover;
    background-color: $buttonBgColorRegularHover;
    border: 1px solid $buttonBorderColorRegularHover;
  }

  body[fds] .mat-raised-button.mat-fds-regular.mat-button-focus {
    color: $buttonFontRegularColorSelected;
    background-color: $buttonBgColorRegularSelected;
    border: 1px solid $buttonBorderColorRegularSelected;
  }

  body[fds] .mat-raised-button.mat-fds-regular[disabled] {
    color: $buttonFontRegularColorDisabled;
    background-color: $buttonBgColorRegularDisabled;
    border: 1px solid $buttonBorderColorRegularDisabled;
  }

  body[fds] .mat-raised-button.mat-fds-warn {
    border: 1px solid $warnColor;
    background-color: $warnColor;
    color: $buttonFontWarnColor;
  }

  body[fds] .mat-raised-button.mat-fds-warn:hover {
    color: $buttonFontWarnColorHover;
    background-color: $red2;
    border: 1px solid $warnColor;
  }

  body[fds] .mat-raised-button.mat-fds-warn.mat-button-focus {
    color: $buttonFontWarnColorSelected;
    background-color: $warnColor;
    border: 1px solid $buttonBorderColorRegularSelected;
  }

  body[fds] .mat-raised-button.mat-fds-warn[disabled] {
    color: $buttonFontWarnColorDisabled;
    background-color: $warnColor;
    border: 1px solid $warnColor;
  }

  body[fds] .mat-raised-button.mat-fds-critical {
    color: $buttonFontCriticalColor;
    background-color: $orange1;
    border: 1px solid $orange1;
  }

  body[fds] .mat-raised-button.mat-fds-critical:hover {
    color: $buttonFontCriticalColorHover;
    background-color: $orange2;
    border: 1px solid $orange2;
  }

  body[fds] .mat-raised-button.mat-fds-critical.mat-button-focus {
    color: $buttonFontCriticalColorSelected;
    background-color: $orange2;
    border: 1px solid $buttonBorderColorRegularSelected;
  }

  body[fds] .mat-raised-button.mat-fds-critical[disabled] {
    color: $buttonFontCriticalColorDisabled;
    background-color: $orange1;
    border: 1px solid $orange1;
  }

  .fds-primary-dropdown-button-menu .cdk-focused {
    color: $buttonFontPrimaryColorSelected;
    background-color: $buttonBgColorPrimarySelected;
  }
}