feat(table): add tokens and update shim (#860)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] 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
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

## 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/data/STYLES.md

@@ -5,6 +5,7 @@
 | CSS Custom Property                    | Description                                               |
 | -------------------------------------- | --------------------------------------------------------- |
 | --clr-table-bgcolor                    | Background color of a table                               |
+| --clr-table-margin                     | Margin of a table                                         |
 | --clr-thead-bgcolor                    | Background color of table header                          |
 | --clr-table-header-border-bottom-color | Not used                                                  |
 | --clr-table-footer-border-top-color    | Not used in tables. Used for datagrid footer border color |

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

@@ -33,9 +33,27 @@
       // Usage: ./data/_tables.clarity.scss
       // Usage: ./data/datagrid/_datagrid.clarity.scss
       --clr-table-font-color: var(--clr-color-neutral-700);
+      --clr-table-margin: #{variables.$clr_baselineRem_1} 0 0 0;
 
       // Table header styles
       --clr-thead-color: #{table-variables.$clr-thead-color};
+
+      --clr-table-cell-padding: #{table-variables.$clr-table-topcellpadding
+        table-variables.$clr-table-cellpadding
+        table-variables.$clr-table-bottomcellpadding};
+      --clr-table-cell-padding-left: #{table-variables.$clr-table-smallpadding}; // ATM delete this property
+      --clr-table-cell-compact-padding: #{table-variables.$clr-table--compact-verticalPadding +
+        variables.$clr_baselineRem_1px
+        table-variables.$clr-table-cellpadding
+        table-variables.$clr-table--compact-verticalPadding};
+      --clr-table-noborder-cell-padding-left: 0; // ATM delete this property
+      --clr-table-noborder-borderwidth: 0;
+      --clr-table-noborder-bg-color: transparent;
+      --clr-table-noborder-th-border-color: #{table-variables.$clr-table-border-color};
+      --clr-table-vertical-align: bottom;
+      --clr-table-data-cell-font-size: #{table-variables.$clr-table-fontsize};
+      --clr-table-data-cell-line-height: #{table-variables.$clr-table-lineheight};
+      --clr-table-data-cell-font-weight: 400;
     }
   }
 }

projects/angular/src/data/_tables.clarity.scss

@@ -43,16 +43,31 @@
       table-variables.$clr-table-font-color,
       variables.$clr-use-custom-properties
     );
-    margin: 0;
-    margin-top: variables.$clr_baselineRem_1;
+    @include mixins.css-var(
+      margin,
+      clr-table-margin,
+      variables.$clr_baselineRem_1 0 0 0,
+      variables.$clr-use-custom-properties
+    );
     max-width: 100%;
     width: 100%;
 
     #{$th},
     #{$td} {
-      font-size: table-variables.$clr-table-fontsize;
-      line-height: table-variables.$clr-table-lineheight;
       border-top-style: solid;
+      @include mixins.css-var(
+        font-size,
+        clr-table-data-cell-font-size,
+        table-variables.$clr-table-fontsize,
+        variables.$clr-use-custom-properties
+      );
+      @include mixins.css-var(
+        line-height,
+        clr-table-data-cell-line-height,
+        table-variables.$clr-table-lineheight,
+        variables.$clr-use-custom-properties
+      );
+      @include mixins.css-var(font-weight, clr-table-data-cell-font-weight, 400, variables.$clr-use-custom-properties);
       @include mixins.css-var(
         border-top-width,
         clr-table-borderwidth,
@@ -65,18 +80,34 @@
         table-variables.$clr-tablerow-bordercolor,
         variables.$clr-use-custom-properties
       );
-      padding: table-variables.$clr-table-topcellpadding table-variables.$clr-table-cellpadding
-        table-variables.$clr-table-bottomcellpadding;
+      @include mixins.css-var(
+        padding,
+        clr-table-cell-padding,
+        table-variables.$clr-table-topcellpadding table-variables.$clr-table-cellpadding
+          table-variables.$clr-table-bottomcellpadding,
+        variables.$clr-use-custom-properties
+      );
       text-align: center;
       vertical-align: top;
 
       &.left {
         text-align: left;
 
         &:first-child {
-          padding-left: table-variables.$clr-table-smallpadding;
+          // ATM (after token migration)
+          // this padding left must be deleted
+          @include mixins.css-var(
+            padding-left,
+            clr-table-cell-padding-left,
+            table-variables.$clr-table-smallpadding,
+            variables.$clr-use-custom-properties
+          );
         }
       }
+
+      &.right {
+        text-align: right;
+      }
     }
 
     #{$th} {
@@ -86,16 +117,32 @@
         table-variables.$clr-thead-color,
         variables.$clr-use-custom-properties
       );
-      font-size: table-variables.$clr-thead-font-size;
-      font-weight: table-variables.$clr-thead-font-weight;
       letter-spacing: table-variables.$clr-thead-letter-spacing;
+      @include mixins.css-var(
+        font-size,
+        clr-table-header-cell-font-size,
+        table-variables.$clr-thead-font-size,
+        variables.$clr-use-custom-properties
+      );
+      @include mixins.css-var(
+        line-height,
+        clr-table-header-cell-line-height,
+        table-variables.$clr-table-lineheight,
+        variables.$clr-use-custom-properties
+      );
+      @include mixins.css-var(
+        font-weight,
+        clr-table-header-cell-font-weight,
+        table-variables.$clr-thead-font-weight,
+        variables.$clr-use-custom-properties
+      );
       @include mixins.css-var(
         background-color,
         clr-thead-bgcolor,
         table-variables.$clr-thead-bgcolor,
         variables.$clr-use-custom-properties
       );
-      vertical-align: bottom;
+      @include mixins.css-var(vertical-align, clr-table-vertical-align, bottom, variables.$clr-use-custom-properties);
       border-bottom-style: solid;
       @include mixins.css-var(
         border-bottom-width,
@@ -186,8 +233,13 @@
   #{$table}-compact {
     #{$th},
     #{$td} {
-      padding-top: table-variables.$clr-table--compact-verticalPadding + variables.$clr_baselineRem_1px;
-      padding-bottom: table-variables.$clr-table--compact-verticalPadding;
+      @include mixins.css-var(
+        padding,
+        clr-table-cell-compact-padding,
+        table-variables.$clr-table--compact-verticalPadding + variables.$clr_baselineRem_1px
+          table-variables.$clr-table-cellpadding table-variables.$clr-table--compact-verticalPadding,
+        variables.$clr-use-custom-properties
+      );
     }
   }
 }
@@ -317,13 +369,22 @@
     border-radius: 0;
     box-shadow: none;
     background-color: transparent;
-    border: 0;
+    @include mixins.css-var(border-width, clr-table-noborder-borderwidth, 0, variables.$clr-use-custom-properties);
 
     th {
-      background-color: transparent;
+      // ATM (after token migration)
+      // this background-color must be deleted
+      @include mixins.css-var(
+        background-color,
+        clr-table-noborder-bg-color,
+        transparent,
+        variables.$clr-use-custom-properties
+      );
+      // ATM (after token migration)
+      // this border-bottom-color must be transparent. Delete it.
       @include mixins.css-var(
         border-bottom-color,
-        clr-table-border-color,
+        clr-table-noborder-th-border-color,
         table-variables.$clr-table-border-color,
         variables.$clr-use-custom-properties
       );
@@ -339,8 +400,13 @@
     td {
       border-top: 0 none;
 
+      // ATM (after token migration)
+      // this padding top must be deleted
       // there's no border so we have to adjust padding to preserve baseline.
-      padding-top: table-variables.$clr-table-topcellpadding + table-variables.$clr-table-borderwidth;
+      padding-top: var(
+        --clr-table-cell-padding-vertical,
+        table-variables.$clr-table-topcellpadding + table-variables.$clr-table-borderwidth
+      );
 
       &:first-child {
         border-right: 0 none;
@@ -360,26 +426,47 @@
       border-radius: 0 !important;
 
       &:first-child {
-        padding-left: 0;
+        // ATM (after token migration)
+        // this padding left must be deleted
+        @include mixins.css-var(
+          padding-left,
+          clr-table-noborder-cell-padding-left,
+          0,
+          variables.$clr-use-custom-properties
+        );
       }
     }
   }
 
+  // ATM
+  // delete all of .table.table-compact padding calculations
   .table.table-compact {
     th,
     td {
       // nudge down to force row to 24px height with border
-      padding-top: table-variables.$clr-table--compact-verticalPadding + variables.$clr_baselineRem_1px;
-      padding-bottom: table-variables.$clr-table--compact-verticalPadding;
+      padding-top: var(
+        --clr-table-cell-compact-padding-vertical,
+        table-variables.$clr-table--compact-verticalPadding + variables.$clr_baselineRem_1px
+      );
+      padding-bottom: var(
+        --clr-table-cell-compact-padding-vertical,
+        table-variables.$clr-table--compact-verticalPadding
+      );
     }
 
     &.table-noborder {
       th,
       td {
         // nudge down to force row to 24px height with border
-        padding-top: table-variables.$clr-table--compact-verticalPadding + variables.$clr_baselineRem_2px;
+        padding-top: var(
+          --clr-table-cell-compact-padding-vertical,
+          table-variables.$clr-table--compact-verticalPadding + variables.$clr_baselineRem_2px
+        );
         // account for now missing bottom border
-        padding-bottom: table-variables.$clr-table--compact-verticalPadding + variables.$clr_baselineRem_1px;
+        padding-bottom: var(
+          --clr-table-cell-compact-padding-vertical,
+          table-variables.$clr-table--compact-verticalPadding + variables.$clr_baselineRem_1px
+        );
       }
     }
   }

projects/ui/src/shim.cds-core.scss

@@ -948,11 +948,33 @@
 
   /* Tables */
 
+  // General
+  --clr-table-borderwidth: var(--cds-global-space-1);
+  --clr-table-border-radius: var(--cds-alias-object-border-radius-100);
+  --clr-table-cornercellradius: var(--cds-alias-object-border-radius-100);
+  --clr-table-cell-padding-horizontal: var(--cds-global-space-7);
+  --clr-table-cell-padding-vertical: var(--cds-global-space-5);
+  --clr-table-cell-padding: var(--clr-table-cell-padding-vertical) var(--clr-table-cell-padding-horizontal);
+  --clr-table-cell-compact-padding-vertical: var(--cds-global-space-3);
+  --clr-table-cell-compact-padding: var(--clr-table-cell-compact-padding-vertical) var(--clr-table-cell-padding-horizontal);
+  --clr-table-noborder-borderwidth: var(--cds-global-space-0);
+  --clr-table-cell-padding-left: var(--cds-global-space-7); // ATM delete this property
+  --clr-table-noborder-cell-padding-left: var(--cds-global-space-7); // ATM delete this property
+  --clr-table-vertical-align: middle;
+  --clr-table-data-cell-font-size: var(--cds-global-typography-font-size-4);
+  --clr-table-data-cell-line-height: var(--cds-global-space-7);
+  --clr-table-data-cell-font-weight: var(--cds-global-typography-font-weight-regular);
+  --clr-table-header-cell-font-size: var(--cds-global-typography-font-size-1);
+  --clr-table-header-cell-line-height: var(--cds-global-space-7);
+  --clr-table-header-cell-font-weight: var(--cds-global-typography-font-weight-semibold);
+
   // Theme variables
   // Usage: ./data/_tables.clarity.scss
   // Usage: ./data/datagrid/_datagrid.clarity.scss
   --clr-table-bgcolor: var(--cds-alias-object-container-background); // var(--clr-color-neutral-0);
   --clr-thead-bgcolor: var(--cds-alias-object-container-background-tint); // var(--clr-color-neutral-50);
+  --clr-table-noborder-bg-color: var(--clr-thead-bgcolor);
+  --clr-table-noborder-th-border-color: var(--cds-alias-object-opacity-0);
 
   // Usage: ./data/datagrid/_datagrid.clarity.scss
   --clr-table-header-border-bottom-color: var(--cds-alias-object-border-color); // var(--clr-color-neutral-400);
@@ -964,10 +986,10 @@
 
   // Usage: ./data/_tables.clarity.scss
   // Usage: ./data/datagrid/_datagrid.clarity.scss
-  --clr-table-font-color: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); // var(--clr-color-neutral-700);
+  --clr-table-font-color: var(--cds-alias-typography-color-400, var(--cds-global-typography-color-400)); // var(--clr-color-neutral-700);
 
   // Table header styles
-  --clr-thead-color: var(--cds-alias-typography-color-500, var(--cds-global-typography-color-500)); // #{$clr-thead-color};
+  --clr-thead-color: var(--cds-alias-typography-color-400, var(--cds-global-typography-color-400)); // #{$clr-thead-color};
 
   /* Datagrid */