feat: Add component tokens to Calcite Components

.github/workflows/chromatic-7180.yml

@@ -0,0 +1,46 @@
+name: "Chromatic - epic/7180-component-tokens"
+on:
+  push:
+    branches: [epic/7180-component-tokens]
+  pull_request:
+    branches: [epic/7180-component-tokens]
+    types: [labeled, synchronize]
+jobs:
+  run:
+    if: |
+      (github.event.action == 'labeled' && github.event.label.name == 'pr ready for visual snapshots') || github.event_name == 'push'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: package.json
+      - run: npm install
+      - run: npm --workspace="packages/calcite-design-tokens" run build
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          zip: true
+          exitOnceUploaded: true
+          workingDir: packages/calcite-components
+          # Re-enable this option once the snapshots are fixed on the epic branch. Until then, snapshots will need to be
+          # approved/rejected in both the PR and the commit on epic/7180-component-tokens after installing
+          # autoAcceptChanges: epic/7180-component-tokens
+        env:
+          STORYBOOK_SCREENSHOT_TEST_BUILD: true
+          CHROMATIC_DIFF_THRESHOLD: ${{ secrets.CHROMATIC_DIFF_THRESHOLD }}
+  skip:
+    if: contains(github.event.pull_request.labels.*.name, 'skip visual snapshots')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Skip Chromatic
+        uses: Sibz/github-status-action@v1
+        with:
+          authToken: ${{ secrets.GITHUB_TOKEN }}
+          context: UI Tests
+          description: Chromatic run skipped
+          state: success
+          sha: ${{github.event.pull_request.head.sha || github.sha}}

packages/calcite-components/conventions/Styling.md

@@ -83,6 +83,10 @@ There are some edge cases where you may wish to isolate and use only the values
 }
 ```
 
+#### Component Tokens
+
+Component tokens provide custom theming to individual components. Component tokens inherit from the global semantic tokens provided by Calcite Design Tokens.
+
 ## Legacy Tokens
 
 In Calcite's [2.0.0](https://github.com/Esri/calcite-design-system/releases/tag/%40esri%2Fcalcite-design-tokens%402.0.0) release, design tokens were refactored, which included the removal and refactoring of legacy CSS custom properties. Refer to the [map of token changes from 2.0.0](https://github.com/Esri/calcite-design-tokens/CHANGELOG.md#20-map-of-token-changes) for a more comprehensive list of changes.

packages/calcite-components/src/assets/styles/_floating-ui.scss

@@ -3,19 +3,19 @@ $floating-ui-transform-top: translateY(5px);
 $floating-ui-transform-left: translateX(5px);
 $floating-ui-transform-right: translateX(-5px);
 
-@mixin floating-ui-base {
-  --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: theme("zIndex.dropdown");
-}
-
-@mixin floatingUIAnim {
+@mixin floatingUIAnim($boxShadow, $borderRadius, $borderWidth, $borderColor, $backgroundColor) {
   .calcite-floating-ui-anim {
     position: relative;
-    transition: var(--calcite-floating-ui-transition);
+    transition: var(--calcite-animation-timing);
     transition-property: transform, visibility, opacity;
     opacity: 0;
-    box-shadow: $shadow-2;
-    @apply rounded z-default;
+    border-style: solid;
+    border-width: #{$borderWidth};
+    box-shadow: #{$boxShadow};
+    border-radius: #{$borderRadius};
+    z-index: var(--calcite-z-index);
+    background-color: #{$backgroundColor};
+    border-color: #{$borderColor};
   }
 }
 
@@ -24,9 +24,16 @@ $floating-ui-transform-right: translateX(-5px);
   transform: translate(0);
 }
 
-@mixin floatingUIElemAnim($selector) {
+@mixin floatingUIElemAnim(
+  $selector,
+  $boxShadow: "var(--calcite-shadow-md)",
+  $borderRadius: "var(--calcite-corner-radius-0)",
+  $borderWidth: "var(--calcite-border-width-none)",
+  $borderColor: "var(--calcite-color-border-3)",
+  $backgroundColor: "var(--calcite-color-foreground-1)"
+) {
   #{$selector} {
-    @include floatingUIAnim();
+    @include floatingUIAnim($boxShadow, $borderRadius, $borderWidth, $borderColor, $backgroundColor);
 
     &[data-placement^="bottom"] .calcite-floating-ui-anim {
       transform: $floating-ui-transform-bottom;
@@ -50,8 +57,8 @@ $floating-ui-transform-right: translateX(-5px);
   }
 }
 
-@mixin floatingUIHostAnim {
-  @include floatingUIAnim();
+@mixin floatingUIHostAnim($boxShadow, $borderRadius, $borderWidth, $borderColor, $backgroundColor) {
+  @include floatingUIAnim($boxShadow, $borderRadius, $borderWidth, $borderColor, $backgroundColor);
 
   :host([data-placement^="bottom"]) .calcite-floating-ui-anim {
     transform: $floating-ui-transform-bottom;
@@ -74,10 +81,10 @@ $floating-ui-transform-right: translateX(-5px);
   }
 }
 
-@mixin floatingUIContainer() {
+@mixin floatingUIContainer($zIndex) {
   display: block;
   position: absolute;
-  z-index: var(--calcite-floating-ui-z-index);
+  z-index: #{$zIndex};
 }
 
 @mixin floatingUIWrapper {
@@ -88,25 +95,34 @@ $floating-ui-transform-right: translateX(-5px);
   visibility: visible;
 }
 
-@mixin floatingUIHost() {
+@mixin floatingUIHost(
+  $zIndex: "var(--calcite-z-index-dropdown)",
+  $boxShadow: "var(--calcite-shadow-md)",
+  $borderRadius: "var(--calcite-corner-radius-0)",
+  $borderWidth: "var(--calcite-border-width-none)",
+  $borderColor: "var(--calcite-color-border-3)",
+  $backgroundColor: "var(--calcite-color-foreground-1)"
+) {
   :host {
-    @include floatingUIContainer();
+    @include floatingUIContainer($zIndex);
   }
 
-  @include floatingUIHostAnim();
+  @include floatingUIHostAnim($boxShadow, $borderRadius, $borderWidth, $borderColor, $backgroundColor);
 
   @include calciteHydratedHidden();
+
+  @include floatingUIArrow($backgroundColor, $borderColor);
 }
 
-@mixin floatingUIArrow {
+@mixin floatingUIArrow($backgroundColor, $borderColor) {
   .calcite-floating-ui-arrow {
-    @apply -z-default
-    absolute
-    pointer-events-none
-    fill-background-foreground-1;
+    z-index: var(--calcite-z-index-default);
+    position: absolute;
+    pointer-events: none;
+    fill: #{$backgroundColor};
   }
 
   .calcite-floating-ui-arrow__stroke {
-    stroke: theme("borderColor.color.3");
+    stroke: #{$borderColor};
   }
 }

packages/calcite-components/src/assets/styles/_header.scss

@@ -1,17 +1,26 @@
-/* Shared styles for header elements */
-.header {
-  @apply text-color-2
-    fill-color-2
-    m-0
-    flex
-    content-between
-    items-center;
-}
+@mixin header(
+  $textColor: "--calcite-color-text-2",
+  $fontWeight: "--calcite-font-weight-medium",
+  $spacing: "--calcite-spacing-xxs"
+) {
+  /* Shared styles for header elements */
+  .header {
+    color: var(#{$textColor}, var(--calcite-color-text-2));
+    fill: var(#{$textColor}, var(--calcite-color-text-2));
+    margin: 0px;
+    display: flex;
+    align-content: space-between;
+    align-items: center;
+  }
 
-.heading {
-  @apply m-0 p-0 font-medium;
-}
+  .heading {
+    margin: 0px;
+    padding: 0px;
+    font-weight: var(#{$fontWeight}, var(--calcite-font-weight-medium));
+  }
 
-.header .heading {
-  @apply flex-auto p-2;
+  .header .heading {
+    flex: 1 1 auto;
+    padding: var(#{$spacing}, var(--calcite-spacing-xxs));
+  }
 }

packages/calcite-components/src/assets/styles/_host.scss

@@ -8,3 +8,11 @@
   color: var(--calcite-color-text-2);
   font-size: var(--calcite-font-size--1);
 }
+
+@mixin base-host() {
+  /* Base ":host" styles for the component */
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+}

packages/calcite-components/src/assets/styles/_sortable.scss

@@ -9,20 +9,17 @@
 
   .calcite-sortable--ghost::before {
     content: "";
-    @apply box-border
-      border
-      border-dashed
-      border-color-brand
-      bg-foreground-2
-      absolute
-      top-0
-      left-0
-      bottom-0
-      right-0
-      z-default;
+    box-sizing: border-box;
+    border-width: var(--calcite-border-width-sm);
+    border-style: dashed;
+    border-color: var(--calcite-color-brand);
+    background-color: var(--calcite-color-foreground-2);
+    position: absolute;
+    inset: 0px;
+    z-index: var(--calcite-z-index);
   }
 
   .calcite-sortable--drag {
-    @apply shadow-2;
+    box-shadow: var(--calcite-shadow-2);
   }
 }

packages/calcite-components/src/assets/styles/_x-button.scss

@@ -0,0 +1,61 @@
+@mixin xButton(
+  $textColor: "--calcite-color-text-3",
+  $backgroundColor: "--calcite-color-foreground-2",
+  $hoverTextColor: "--calcite-color-text-3",
+  $hoverBackgroundColor: "--calcite-color-foreground-3",
+  $activeBorderColor: "--calcite-color-brand",
+  $borderWidth: "--calcite-border-width-md"
+) {
+  .x-button {
+    appearance: none;
+    align-content: center;
+    cursor: pointer;
+    display: flex;
+    outline-color: transparent;
+    align-items: center;
+    justify-content: center;
+    margin: 0px;
+    align-self: center;
+    color: var(#{$textColor}, var(--calcite-color-text-3));
+    transition:
+      color,
+      background-color,
+      border-color var(--calcite-animation-timing) ease-in-out 0s,
+      outline 0s,
+      outline-offset 0s;
+    border-width: var(#{$borderWidth}, var(--calcite-border-width-md));
+    border-radius: 50%;
+    border-color: transparent;
+    background-color: var(#{$backgroundColor}, var(--calcite-color-foreground-2));
+
+    &:active,
+    &:hover {
+      color: var(#{$hoverTextColor});
+      background-color: var(#{$hoverBackgroundColor}, var(--calcite-color-foreground-3));
+    }
+
+    &:active {
+      border-style: solid;
+      border-color: var(#{$activeBorderColor}, var(--calcite-color-brand));
+    }
+
+    & calcite-icon {
+      color: inherit;
+    }
+  }
+
+  :host([scale="s"]) .x-button {
+    inline-size: var(--calcite-spacing-lg);
+    block-size: var(--calcite-spacing-lg);
+  }
+
+  :host([scale="m"]) .x-button {
+    inline-size: var(--calcite-size-xxl);
+    block-size: var(--calcite-size-xxl);
+  }
+
+  :host([scale="l"]) .x-button {
+    inline-size: var(--calcite-size-xxxl);
+    block-size: var(--calcite-size-xxxl);
+  }
+}

packages/calcite-components/src/assets/styles/global.scss

@@ -1,4 +1,4 @@
-@import "~@esri/calcite-base/dist/_index";
+@import "~@esri/calcite-base/dist/index";
 @import "~@esri/calcite-design-tokens/dist/scss/index";
 @import "~@esri/calcite-design-tokens/dist/scss/core";
 
@@ -13,13 +13,10 @@
 
 :root {
   @extend %type-vars;
-  @include floating-ui-base();
   @include animation-base();
   --calcite-popover-z-index: var(--calcite-z-index-popup);
   --calcite-border-radius: var(--calcite-border-radius-round, 4px);
-  --calcite-border-radius-base: 0;
   --calcite-offset-invert-focus: 0; // should be 0 or 1
-  --calcite-panel-width-multiplier: 1;
   --calcite-ui-icon-color: currentColor;
 
   text-rendering: optimizeLegibility;