refactor styles for clean separation and css variables

Author: francisrupert

packages/dialtone-css/lib/build/less/components/banner.less

@@ -18,6 +18,8 @@
     --banner-line-height: var(--dt-font-line-height-200);
     --banner-dialog-padding-y: var(--dt-spacing-100);
     --banner-dialog-padding-x: var(--dt-spacing-200);
+    --notice-icon-gap: var(--dt-spacing-100);
+    --notice-actions-align: inherit;
 
     position: fixed;
     inset-block-start: 0;
@@ -26,7 +28,7 @@
     max-inline-size: 100%;
     padding: 0;
     line-height: var(--banner-line-height);
-    border-block-end: 1px solid var(--banner-color-border);
+    border-block-end: var(--dt-size-border-100) solid var(--banner-color-border);
     border-radius: 0;
     box-shadow: none;
 
@@ -50,27 +52,18 @@
 //  $   CONTENT CONTAINER
 //  ----------------------------------------------------------------------------
 .d-banner__dialog {
+    --notice-icon-block-offset: var(--dt-spacing-0);
+    --notice-content-direction: row;
+    --notice-content-gap: var(--dt-spacing-75);
+    --notice-content-align: baseline;
+
     position: relative;
     display: flex;
     align-items: center;
     inline-size: 100%;
     min-block-size: calc(var(--dt-layout-75) + var(--dt-spacing-25));
     margin: 0 auto;
     padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
-
-    .d-notice__icon {
-        margin-block-start: var(--dt-spacing-0);
-    }
-
-    .d-notice__content {
-        flex-direction: row;
-        gap: var(--dt-spacing-75);
-        align-items: baseline;
-    }
-
-    .d-notice__message {
-        font: var(--dt-text-body-sm);
-    }
 }
 
 //  ============================================================================

packages/dialtone-css/lib/build/less/components/notice.less

@@ -25,10 +25,8 @@
     --notice-border-radius: var(--dt-size-radius-400);
     --notice-box-shadow: 0 0 0 var(--dt-size-border-100) var(--notice-color-shadow) inset;
 
-    //  Base Styles
+    //  Shared Styles
     //  ------------------------------------------------------------------------
-    display: flex;
-    align-items: start;
     box-sizing: border-box;
     inline-size: 100%;
     max-inline-size: var(--dt-layout-1000);
@@ -41,6 +39,11 @@
     box-shadow: var(--notice-box-shadow);
 }
 
+.d-notice {
+    display: flex;
+    align-items: start;
+}
+
 //  ============================================================================
 //  $   NOTICE AREAS
 //  ============================================================================
@@ -49,9 +52,10 @@
 .d-notice__content {
     display: flex;
     flex: 1 auto;
-    flex-direction: column;
+    flex-direction: var(--notice-content-direction, column);
     margin-inline-end: var(--dt-spacing-200);
-    gap: var(--dt-spacing-100);
+    gap: var(--notice-content-gap, var(--dt-spacing-100));
+    align-items: var(--notice-content-align, normal);
     align-self: center;
 }
 
@@ -62,10 +66,10 @@
     flex: 0 auto;
     gap: var(--dt-spacing-100);
     align-items: center;
-    align-self: start;
+    align-self: var(--notice-actions-align, start);
 
-    .d-banner & {
-        align-self: inherit;
+    :where(button:first-child) {
+        margin-inline-start: var(--notice-actions-button-offset, 0);
     }
 
     .d-btn {
@@ -79,16 +83,12 @@
     display: flex;
     flex: 0 auto;
     color: var(--notice-color-icon);
-    margin-inline-end: var(--dt-spacing-150);
-    margin-block-start: var(--dt-spacing-25);
+    margin-inline-end: var(--notice-icon-gap, var(--dt-spacing-150));
+    margin-block-start: var(--notice-icon-block-offset, var(--dt-spacing-25));
 
     &--has-title {
         margin-block-start: var(--dt-spacing-0);
     }
-
-    .d-banner & {
-        margin-inline-end: var(--dt-spacing-100);
-    }
 }
 
 //  ============================================================================
@@ -185,16 +185,14 @@
 
 //  $$  TRUNCATE TEXT
 //  ----------------------------------------------------------------------------
-.d-notice.d-notice--truncate {
-    .d-notice__content {
-        overflow: hidden;
-
-        .d-notice__title,
-        .d-notice__message {
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-    }
+.d-notice--truncate :where(.d-notice__content) {
+    overflow: hidden;
+}
+
+.d-notice--truncate :where(.d-notice__title),
+.d-notice--truncate :where(.d-notice__message) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 }

packages/dialtone-css/lib/build/less/components/toast.less

@@ -58,13 +58,11 @@
 //  $   CONTENT CONTAINER
 //  ----------------------------------------------------------------------------
 .d-toast__dialog {
+    --notice-actions-button-offset: var(--dt-spacing-400);
+
     position: relative;
     display: flex;
     align-items: start;
-
-    .d-notice__actions :where(button:first-child) {
-        margin-inline-start: var(--dt-spacing-400); // 32
-    }
 }
 
 //  ============================================================================
@@ -206,14 +204,11 @@
 }
 
 .d-toast-alternate__dialog {
+    --notice-actions-button-offset: var(--dt-spacing-400);
+
   position: relative;
   align-items: center;
   inline-size: var(--dt-layout-100-percent);
-
-
-  .d-notice__actions :where(button:first-child) {
-    margin-inline-start: var(--dt-spacing-400); // 32
-  }
 }
 
 .d-toast-alternate__header {