feat(components/toast): tokenize toast styling (#2791)

apps/e2e/toast-storybook-e2e/src/e2e/toast.component.cy.ts

@@ -43,5 +43,5 @@ describe('toast-storybook', () => {
         );
       });
     });
-  });
+  }, true);
 });

apps/e2e/toast-storybook/project.json

@@ -18,7 +18,8 @@
         "styles": [
           "apps/e2e/toast-storybook/src/styles.scss",
           "libs/components/theme/src/lib/styles/sky.scss",
-          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
         ],
         "scripts": []
       },
@@ -88,7 +89,8 @@
         "compodoc": false,
         "styles": [
           "libs/components/theme/src/lib/styles/sky.scss",
-          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
         ]
       },
       "configurations": {
@@ -108,7 +110,8 @@
         "compodoc": false,
         "styles": [
           "libs/components/theme/src/lib/styles/sky.scss",
-          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
         ]
       },
       "configurations": {

libs/components/indicators/src/lib/modules/alert/alert.modern.component.scss

@@ -8,6 +8,7 @@
 
 @include compatMixins.sky-modern-overrides('.sky-alert') {
   --sky-override-alert-padding: 0 var(--modern-size-10);
+  --sky-override-alert-text-link-color: #212327cc;
   --sky-override-alert-text-vertical-padding: var(--modern-size-15);
   --sky-override-alert-button-size: 32px;
   --sky-override-alert-button-padding: 0;
@@ -27,20 +28,23 @@
         --sky-override-alert-text-vertical-padding,
         var(--sky-space-inset-balanced-none)
       )
-      var(--sky-space-text_action_gap-m)
+      var(--sky-space-gap-text_action-m)
       var(
         --sky-override-alert-text-vertical-padding,
         var(--sky-space-inset-balanced-none)
       )
-      var(--sky-space-icon_gap-l);
+      var(--sky-space-gap-icon-l);
     width: 100%;
 
     ::ng-deep a {
-      color: change-color($sky-text-color-default, $alpha: 0.8);
-      text-decoration: underline;
+      color: var(
+        --sky-override-alert-text-link-color,
+        var(--sky-color-text-default)
+      );
+      text-decoration: var(--sky-font-text_decoration-visible_link);
 
       &:hover {
-        color: var(--sky-text-color-default);
+        color: var(--sky-color-text-default);
       }
     }
   }
@@ -95,26 +99,26 @@
     border-style: solid;
     border-color: var(--sky-color-border-action-tertiary-base);
     border-radius: var(--sky-border-radius-s);
-    border-width: var(--sky-border-width-interactive-base);
+    border-width: var(--sky-border-width-action-base);
     background-color: var(--sky-color-background-action-tertiary-base);
     display: none;
     flex-shrink: 0;
 
     &:hover {
       opacity: 1;
       border-color: var(--sky-color-border-action-tertiary-hover);
-      border-width: var(--sky-border-width-interactive-hover);
+      border-width: var(--sky-border-width-action-hover);
     }
 
     &:focus-visible {
       outline: none;
       border-color: var(--sky-color-border-action-tertiary-focus);
-      border-width: var(--sky-border-width-interactive-focus);
+      border-width: var(--sky-border-width-action-focus);
     }
 
     &:active {
       border-color: var(--sky-color-border-action-tertiary-focus);
-      border-width: var(--sky-border-width-interactive-focus);
+      border-width: var(--sky-border-width-action-focus);
     }
 
     &:focus-visible:not(:active) {

libs/components/indicators/src/lib/modules/label/label.component.scss

@@ -141,7 +141,7 @@
   display: inline-block;
   padding-left: var(
     --sky-override-label-text-padding-left,
-    var(--sky-space-icon_gap-s)
+    var(--sky-space-gap-icon-s)
   );
 }
 

libs/components/indicators/src/lib/modules/status-indicator/status-indicator.component.scss

@@ -30,7 +30,7 @@
   flex-shrink: 1;
   padding-right: var(
     --sky-override-status-indicator-icon-padding-right,
-    var(--sky-space-icon_gap-s)
+    var(--sky-space-gap-icon-s)
   );
 }
 

libs/components/layout/src/lib/modules/box/box-header.component.scss

@@ -14,7 +14,7 @@ sky-box-header {
   .sky-box-header {
     padding-right: var(
       --sky-override-box-header-padding-right,
-      var(--sky-space-text_action_gap-l)
+      var(--sky-space-gap-text_action-l)
     );
 
     h1,

libs/components/layout/src/lib/modules/box/box.component.scss

@@ -51,7 +51,7 @@ sky-box {
       flex: 1 0;
       padding-right: var(
         --sky-override-box-header-padding-right,
-        var(--sky-space-text_action_gap-l)
+        var(--sky-space-gap-text_action-l)
       );
     }
 

libs/components/theme/package.json

@@ -20,7 +20,7 @@
     "@angular/core": "^18.2.5"
   },
   "dependencies": {
-    "@blackbaud/skyux-design-tokens": "0.0.32",
+    "@blackbaud/skyux-design-tokens": "0.0.35",
     "@skyux/icons": "7.8.0",
     "fontfaceobserver": "2.3.0",
     "tslib": "^2.6.3"

libs/components/theme/src/lib/styles/_forms.scss

@@ -71,7 +71,7 @@ textarea.ng-invalid.ng-touched {
 .sky-control-help-container:not(:empty) {
   margin-left: var(
     --sky-override-help-inline-margin-left,
-    var(--sky-space-text_action_gap-xs)
+    var(--sky-space-gap-text_action-xs)
   );
 }
 

libs/components/theme/src/lib/styles/themes/modern/_elevation.scss

@@ -36,8 +36,7 @@
   }
 
   .sky-elevation-24 {
-    box-shadow: $sky-theme-modern-elevation-24-shadow-size
-      $sky-theme-modern-elevation-24-shadow-color;
+    box-shadow: var(--sky-elevation-overlay-400);
   }
 
   &.sky-theme-mode-dark {

libs/components/theme/src/lib/styles/themes/modern/_theme.scss

@@ -86,6 +86,6 @@
     }
   }
   .sky-rounded-corners {
-    border-radius: $sky-theme-modern-box-border-radius-default;
+    border-radius: var(--sky-border-radius-s);
   }
 }