feat(buttons): add tokens and update shim (#829)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [x] Docs have been added / updated (for bug fixes / features)
- [x] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [x] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [x] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

Issue Number: N/A

## What is the new behavior?
In `@cds/core` themes default versions of `group buttons` overlap their
borders. This change will be fixed after token migration, because
otherwise breaks standard NG theme.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <noreply@github.com>

projects/angular/src/button/_buttons.clarity.scss

@@ -106,14 +106,13 @@
     @include button-css-var($button-type, color, color, variables.$clr-use-custom-properties);
   }
 
-  //To override the visited state of anchor links styled as buttons
-  &:visited {
-    @include button-css-var($button-type, color, color, variables.$clr-use-custom-properties);
-  }
-
   &:hover {
     @include button-css-var($button-type, background-color, hover-bg-color, variables.$clr-use-custom-properties);
     @include button-css-var($button-type, color, hover-color, variables.$clr-use-custom-properties);
+    cds-icon,
+    clr-icon {
+      @include button-css-var($button-type, color, hover-color, variables.$clr-use-custom-properties);
+    }
   }
 
   &:active {
@@ -122,6 +121,11 @@
     } @else {
       $fallbackColor: getSassButtonColor($button-type, box-shadow-color);
 
+      // ATM (after token migration)
+      // Replace box-shadow section with commented section. Renaming all of clr-btn 'box-shadow' to 'click' color properties is needed.
+      // $buttonColor: 'clr-btn-' + $button-type + '-click-color';
+      // @include mixins.css-var(background-color, $buttonColor, $fallbackColor, variables.$clr-use-custom-properties);
+
       // IE/OldEdge
       box-shadow: 0 getActiveWidthBoxShadowTop($button-type) 0 0 $fallbackColor inset;
 
@@ -138,7 +142,7 @@
   &:disabled {
     @include button-css-var($button-type, color, disabled-color, variables.$clr-use-custom-properties);
     cursor: not-allowed;
-    opacity: 0.4;
+    @include mixins.css-var(opacity, clr-btn-disabled-opacity, 0.4, variables.$clr-use-custom-properties);
     @include button-css-var($button-type, background-color, disabled-bg-color, variables.$clr-use-custom-properties);
     @include button-css-var($button-type, border-color, disabled-border-color, variables.$clr-use-custom-properties);
     box-shadow: none;
@@ -196,7 +200,14 @@
 
 @mixin btn-appearance() {
   cursor: pointer;
-  display: inline-block;
+
+  // ATM (after token migration)
+  // clr-btn-display and clr-btn-appearance-gap variables will be removed
+  // display: inline-flex and gap: var(--cds-global-space-5); will become standard
+  align-items: center;
+  place-content: center;
+  @include mixins.css-var(display, clr-btn-display, inline-block, variables.$clr-use-custom-properties);
+  @include mixins.css-var(gap, clr-btn-appearance-gap, 8px, variables.$clr-use-custom-properties);
 
   // Overrides a Fix for IOS in BS4 _normalize.scss (~ln 330)
   // `!important` is to override specificity in this instance
@@ -211,7 +222,12 @@
     buttons-variables.$clr-btn-appearance-standard-line-height,
     variables.$clr-use-custom-properties
   );
-  letter-spacing: buttons-variables.$clr-btn-appearance-standard-letter-spacing;
+  @include mixins.css-var(
+    letter-spacing,
+    clr-btn-appearance-standard-letter-spacing,
+    buttons-variables.$clr-btn-appearance-standard-letter-spacing,
+    variables.$clr-use-custom-properties
+  );
   @include mixins.css-var(
     font-size,
     clr-btn-appearance-standard-font-size,
@@ -259,7 +275,12 @@
       buttons-variables.$clr-btn-appearance-form-line-height,
       variables.$clr-use-custom-properties
     );
-    letter-spacing: buttons-variables.$clr-btn-appearance-form-letter-spacing;
+    @include mixins.css-var(
+      letter-spacing,
+      clr-btn-appearance-form-letter-spacing,
+      buttons-variables.$clr-btn-appearance-form-letter-spacing,
+      variables.$clr-use-custom-properties
+    );
     @include mixins.css-var(
       font-size,
       clr-btn-appearance-form-font-size,
@@ -293,34 +314,30 @@
       transform: translate3d(0, -1 * variables.$clr_baselineRem_2px, 0);
     }
     cds-icon {
-      margin-top: -1.4 * variables.$clr_baselineRem_2px;
+      // ATM (after token migration)
+      // clr-btn-appearance-icon-margin variable will be removed
+      // margin-top: var(--cds-global-space-0); will become standard or simply removed
+      @include mixins.css-var(
+        margin-top,
+        clr-btn-appearance-icon-margin,
+        -1.4 * variables.$clr_baselineRem_2px,
+        variables.$clr-use-custom-properties
+      );
     }
   }
 
   //.btn-outline-<state> is the new BS4 naming convention. We are using both for now
   // TODO: Refactor these classnames when the standard clarity naming convention is set.
   // This is a breaking change and will need an upgrade path so users know how to easily migrate to the new
   // version.
+  a.btn,
   .btn.btn-secondary,
-  .btn.btn-info,
-  .btn.btn-outline,
-  .btn.btn-primary-outline,
-  .btn.btn-secondary-outline,
-  .btn.btn-outline-primary,
-  .btn.btn-outline-secondary,
-  .btn.btn-info-outline,
-  .btn-secondary .btn,
-  .btn-info .btn,
-  .btn-outline .btn,
-  .btn-primary-outline .btn,
-  .btn-secondary-outline .btn,
-  .btn-outline-primary .btn,
-  .btn-outline-secondary .btn,
-  .btn-info-outline .btn,
-  .btn-outline-info .btn {
+  .btn-secondary .btn {
     @include populateButtonProperties(default);
   }
 
+  .btn.btn-info,
+  .btn-info .btn,
   .btn.btn-primary,
   .btn-primary .btn {
     @include populateButtonProperties(primary);
@@ -342,13 +359,26 @@
 
   .btn.btn-outline,
   .btn.btn-outline .btn,
-  .btn.btn-info-outline,
-  .btn-info-outline .btn,
-  .btn.btn-outline-info,
+  .btn.btn-secondary-outline,
+  .btn.btn-outline-secondary,
+  .btn-secondary-outline .btn,
+  .btn-outline-secondary .btn,
   .btn-outline .btn {
     @include populateButtonProperties(default-outline);
   }
 
+  .btn.btn-primary-outline,
+  .btn-outline-info .btn,
+  .btn-info-outline .btn,
+  .btn-primary-outline .btn,
+  .btn-outline-primary .btn,
+  .btn.btn-outline-primary,
+  .btn.btn-outline-info,
+  .btn.btn-info-outline,
+  .btn.btn-info-outline {
+    @include populateButtonProperties(primary-outline);
+  }
+
   .btn.btn-success-outline,
   .btn.btn-outline-success,
   .btn-success-outline .btn,
@@ -372,6 +402,22 @@
   .btn.btn-link,
   .btn-link .btn {
     @include populateButtonProperties(link);
+
+    //To override the visited state of anchor links styled as buttons
+    &:visited {
+      @include button-css-var(link, color, visited-color, variables.$clr-use-custom-properties);
+      cds-icon,
+      clr-icon {
+        @include button-css-var(link, color, visited-color, variables.$clr-use-custom-properties);
+      }
+      &:hover {
+        @include button-css-var(link, color, visited-hover-color, variables.$clr-use-custom-properties);
+        cds-icon,
+        clr-icon {
+          @include button-css-var(link, color, visited-hover-color, variables.$clr-use-custom-properties);
+        }
+      }
+    }
   }
 
   .btn.btn-inverse,
@@ -385,7 +431,7 @@
   }
 
   .btn-block {
-    display: block;
+    @include mixins.css-var(display, clr-btn-block-display, block, variables.$clr-use-custom-properties);
     width: 100%;
     max-width: 100%;
   }
@@ -450,7 +496,15 @@
         variables.$clr_baselineRem_0_5,
         variables.$clr-use-custom-properties
       );
-      margin-top: -0.1rem;
+      // ATM (after token migration)
+      // clr-btn-appearance-sm-icon-margin variable will be removed
+      // margin-top: var(--cds-global-space-0); will become standard or simply removed
+      @include mixins.css-var(
+        margin-top,
+        clr-btn-appearance-sm-icon-margin,
+        -0.1rem,
+        variables.$clr-use-custom-properties
+      );
     }
   }
 
@@ -482,7 +536,7 @@
     &.btn-danger :disabled {
       @include mixins.css-var(
         border-color,
-        --clr-color-neutral-400,
+        clr-color-neutral-400,
         variables.$clr-color-neutral-400,
         variables.$clr-use-custom-properties
       );

projects/angular/src/button/_properties.buttons.scss

@@ -16,6 +16,11 @@
       --clr-btn-horizontal-padding: #{button-variables.$clr-btn-horizontal-padding};
       --clr-btn-vertical-padding: 0;
       --clr-btn-padding: var(--clr-btn-vertical-padding) var(--clr-btn-horizontal-padding);
+      --clr-btn-appearance-gap: #{variables.$clr_baselineRem_8px};
+      --clr-btn-display: inline-block;
+      --clr-btn-block-display: block;
+      --clr-btn-appearance-icon-margin: #{-1.4 * variables.$clr_baselineRem_2px};
+      --clr-btn-appearance-sm-icon-margin: -0.1rem;
 
       // Sizing
       --clr-btn-height: #{button-variables.$clr-btn-height};
@@ -29,10 +34,12 @@
       --clr-btn-border-width: #{button-variables.$clr-btn-border-width};
 
       // Shared colors
-      --clr-btn-outline-bg-color: transparent;
+      --clr-btn-transparent-bg-color: transparent;
+      --clr-btn-outline-bg-color: var(--clr-btn-transparent-bg-color);
 
       // Standard button appearance - overrideable but not advertised!
       --clr-btn-appearance-standard-line-height: #{button-variables.$clr-btn-appearance-standard-line-height};
+      --clr-btn-appearance-standard-letter-spacing: #{button-variables.$clr-btn-appearance-standard-letter-spacing};
       --clr-btn-appearance-standard-font-size: #{button-variables.$clr-btn-appearance-standard-font-size};
       --clr-btn-appearance-standard-font-weight: #{button-variables.$clr-btn-appearance-standard-font-weight};
       --clr-btn-appearance-standard-height: #{button-variables.$clr-btn-appearance-standard-height};
@@ -86,6 +93,19 @@
       --clr-btn-primary-checked-bg-color: var(--clr-color-action-600);
       --clr-btn-primary-checked-color: var(--clr-color-neutral-0);
 
+      // Primary outline button
+      --clr-btn-primary-outline-color: var(--clr-color-action-600);
+      --clr-btn-primary-outline-border-color: var(--clr-btn-default-outline-color);
+      --clr-btn-primary-outline-bg-color: var(--clr-btn-outline-bg-color);
+      --clr-btn-primary-outline-hover-bg-color: var(--clr-color-action-50);
+      --clr-btn-primary-outline-hover-color: var(--clr-color-action-800);
+      --clr-btn-primary-outline-box-shadow-color: var(--clr-color-action-500);
+      --clr-btn-primary-outline-disabled-color: var(--clr-color-neutral-700);
+      --clr-btn-primary-outline-disabled-bg-color: var(--clr-btn-default-outline-bg-color);
+      --clr-btn-primary-outline-disabled-border-color: var(--clr-color-neutral-600);
+      --clr-btn-primary-outline-checked-color: var(--clr-color-neutral-0);
+      --clr-btn-primary-outline-checked-bg-color: var(--clr-btn-default-outline-color);
+
       // Success button colors
       --clr-btn-success-color: var(--clr-color-neutral-0);
       --clr-btn-success-bg-color: var(--clr-color-success-700);
@@ -166,20 +186,22 @@
 
       // Link button colors
       --clr-btn-link-color: var(--clr-color-action-600);
-      --clr-btn-link-bg-color: transparent;
-      --clr-btn-link-border-color: transparent;
-      --clr-btn-link-hover-bg-color: transparent;
+      --clr-btn-link-visited-color: var(--clr-btn-link-color);
+      --clr-btn-link-bg-color: var(--clr-btn-transparent-bg-color);
+      --clr-btn-link-border-color: var(--clr-btn-transparent-bg-color);
+      --clr-btn-link-hover-bg-color: var(--clr-btn-transparent-bg-color);
       --clr-btn-link-hover-color: var(--clr-color-action-800);
+      --clr-btn-link-visited-hover-color: var(--clr-btn-link-hover-color);
       --clr-btn-link-disabled-color: var(--clr-color-neutral-700);
-      --clr-btn-link-disabled-bg-color: transparent;
-      --clr-btn-link-disabled-border-color: transparent;
-      --clr-btn-link-checked-bg-color: transparent;
+      --clr-btn-link-disabled-bg-color: var(--clr-btn-transparent-bg-color);
+      --clr-btn-link-disabled-border-color: var(--clr-btn-transparent-bg-color);
+      --clr-btn-link-checked-bg-color: var(--clr-btn-transparent-bg-color);
       --clr-btn-link-checked-color: var(--clr-color-action-800);
 
       // Inverse button colors
       --clr-btn-inverse-color: var(--clr-color-neutral-0);
       --clr-btn-inverse-border-color: var(--clr-color-neutral-0);
-      --clr-btn-inverse-bg-color: transparent;
+      --clr-btn-inverse-bg-color: var(--clr-btn-transparent-bg-color);
       --clr-btn-inverse-hover-bg-color: rgba(255, 255, 255, 0.15);
       --clr-btn-inverse-hover-color: var(--clr-color-neutral-0);
       --clr-btn-inverse-box-shadow-color: rgba(0, 0, 0, 0.25);
@@ -190,6 +212,7 @@
       --clr-btn-inverse-checked-color: var(--clr-color-neutral-0);
 
       // For theme-able icon button color
+      --clr-btn-disabled-opacity: 0.4;
       --clr-btn-icon-disabled-color: var(
         --clr-btn-default-disabled-color,
         #{button-variables.$clr-btn-default-disabled-color}

projects/angular/src/button/button-group/_button-group.clarity.scss

@@ -88,6 +88,9 @@
       }
     }
 
+    // ATM (after token migration)
+    // once shim is fully integrated all rules to be replaced with
+    // &:not([class*='-outline'])
     &.btn-primary,
     &.btn-success,
     &.btn-danger,

projects/angular/src/data/datagrid/_datagrid.clarity.scss

@@ -1470,9 +1470,13 @@
       .column-toggle--action {
         // I'm overriding .btn/.btn-link here but am not confident this is the correct way to do it.
         min-width: variables.$clr_baselineRem_0_75;
-        padding-left: variables.$clr_baselineRem_6px;
-        padding-right: variables.$clr_baselineRem_6px;
         text-transform: capitalize;
+        @include mixins.css-var(
+          padding,
+          clr-datagrid-column-toggle-padding,
+          0 variables.$clr_baselineRem_6px,
+          variables.$clr-use-custom-properties
+        );
         @include mixins.css-var(
           border-color,
           clr-datagrid-column-toggle-border-color,
@@ -1492,6 +1496,39 @@
           variables.$clr-use-custom-properties
         );
 
+        &.disabled,
+        &:disabled,
+        &.disabled:hover,
+        &:disabled:hover,
+        &.disabled:active,
+        &:disabled:active {
+          cursor: not-allowed;
+          @include mixins.css-var(
+            opacity,
+            clr-datagrid-column-toggle-disabled-opacity,
+            0.4,
+            variables.$clr-use-custom-properties
+          );
+          @include mixins.css-var(
+            border-color,
+            clr-datagrid-column-toggle-disabled-color,
+            variables.$clr-color-neutral-700,
+            variables.$clr-use-custom-properties
+          );
+          @include mixins.css-var(
+            color,
+            clr-datagrid-column-toggle-disabled-color,
+            variables.$clr-color-neutral-700,
+            variables.$clr-use-custom-properties
+          );
+          @include mixins.css-var(
+            background-color,
+            clr-datagrid-column-toggle-fill-color,
+            datagrid-variables.$clr-datagrid-column-toggle-fill-color,
+            variables.$clr-use-custom-properties
+          );
+        }
+
         &:hover {
           @include mixins.css-var(
             border-color,

projects/angular/src/data/datagrid/_properties.datagrid.scss

@@ -40,6 +40,8 @@
 
       --clr-datagrid-pagination-btn-disabled-opacity: #{datagrid-variables.$clr-datagrid-pagination-btn-disabled-opacity};
 
+      --clr-datagrid-column-toggle-gap: #{variables.$clr_baselineRem_4px};
+      --clr-datagrid-column-toggle-padding: #{0 variables.$clr_baselineRem_6px};
       --clr-datagrid-column-toggle-border-color: var(--clr-color-neutral-600);
       --clr-datagrid-column-toggle-fill-color: var(--clr-color-neutral-50);
       --clr-datagrid-column-toggle-text-color: var(--clr-color-neutral-700);
@@ -49,6 +51,8 @@
       --clr-datagrid-column-toggle-border-active-color: var(--clr-color-neutral-700);
       --clr-datagrid-column-toggle-fill-active-color: var(--clr-color-neutral-100);
       --clr-datagrid-column-toggle-text-active-color: var(--clr-color-neutral-700);
+      --clr-datagrid-column-toggle-disabled-color: #{variables.$clr-color-neutral-700};
+      --clr-datagrid-column-toggle-disabled-opacity: 0.4;
     }
   }
 }