chore: refactor token organization and usage patterns (#440)

tyler-technologies-oss · Dec 4, 2023 · d1ab4d5 · d1ab4d5
1 parent c08e76e
commit d1ab4d5
Show file tree

Hide file tree

Showing 80 changed files with 419 additions and 578 deletions.
diff --git a/src/lib/app-bar/app-bar/_configuration.scss b/src/lib/app-bar/app-bar/_configuration.scss
diff --git a/src/lib/app-bar/app-bar/_core.scss b/src/lib/app-bar/app-bar/_core.scss
@@ -1,6 +1,8 @@
 @use '../../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   display: block;
 }

diff --git a/src/lib/app-bar/app-bar/app-bar.scss b/src/lib/app-bar/app-bar/app-bar.scss
@@ -1,7 +1,5 @@
 @use 'sass:map';
-@use './configuration' as *;
-@use './token-utils' as *;
-@use './core';
+@use './core' as *;
 @use '../../focus-indicator';
 @use '../../state-layer';
 @use '../../tabs/tab-bar';
@@ -13,12 +11,14 @@
 // Host
 //
 
+$host-tokens: [background foreground];
+
 :host {
-  @include host-configuration;
+  @include tokens($includes: $host-tokens);
 }
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -44,40 +44,40 @@
 //
 
 .forge-app-bar {
-  @include configuration;
+  @include tokens($excludes: $host-tokens);
 }
 
 .forge-app-bar {
-  @include core.base;
+  @include base;
 
   .row {
-    @include core.row;
+    @include row;
   }
 
   &.no-center {
     .row {
-      @include core.row-no-center;
+      @include row-no-center;
     }
   }
 
   .section {
-    @include core.section;
+    @include section;
 
     &:not(:last-child):not(:first-child) {
-      @include core.section-center;
+      @include section-center;
     }
 
     &:last-child {
-      @include core.section-end;
+      @include section-end;
     }
   }
 
   h1 {
-    @include core.title;
+    @include title;
   }
 
   a {
-    @include core.anchor-base;
+    @include anchor-base;
 
     forge-state-layer {
       @include state-layer.provide-theme((
@@ -95,7 +95,7 @@
   }
 
   .logo-title-container {
-    @include core.logo-title-container;
+    @include logo-title-container;
   }
 }
 
@@ -105,7 +105,7 @@
 
 :host(:is(:not([elevation]),[elevation=raised])) {
   .forge-app-bar {
-    @include core.elevation-raised;
+    @include elevation-raised;
   }
 }
 
@@ -122,7 +122,7 @@
 //
 
 ::slotted([slot=logo]) {
-  @include core.logo;
+  @include logo;
 }
 
 //

diff --git a/src/lib/app-bar/app-bar/index.scss b/src/lib/app-bar/app-bar/index.scss
@@ -1,3 +1 @@
-@forward './configuration';
 @forward './core';
-@forward './token-utils' show provide-theme;
diff --git a/src/lib/app-bar/search/_configuration.scss b/src/lib/app-bar/search/_configuration.scss
diff --git a/src/lib/app-bar/search/_core.scss b/src/lib/app-bar/search/_core.scss
@@ -1,6 +1,8 @@
 @use '../../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   display: block;
 }

diff --git a/src/lib/app-bar/search/app-bar-search.scss b/src/lib/app-bar/search/app-bar-search.scss
@@ -1,9 +1,8 @@
-@use './configuration' as *;
-@use './core';
+@use './core' as *;
 @use '../../focus-indicator';
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -15,11 +14,11 @@
 //
 
 .forge-app-bar-search {
-  @include configuration;
+  @include tokens;
 }
 
 .forge-app-bar-search {
-  @include core.base;
+  @include base;
 }
 
 //
@@ -54,5 +53,5 @@ forge-focus-indicator {
 //
 
 ::slotted(input) {
-  @include core.input;
+  @include input;
 }
diff --git a/src/lib/app-bar/search/index.scss b/src/lib/app-bar/search/index.scss
@@ -1,3 +1 @@
-@forward './configuration';
 @forward './core';
-@forward './token-utils' show provide-theme;
diff --git a/src/lib/button/_configuration.scss b/src/lib/button/_configuration.scss
diff --git a/src/lib/button/_core.scss b/src/lib/button/_core.scss
@@ -1,6 +1,8 @@
 @use '../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   display: #{token(display)};
   position: relative;

diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
@@ -1,21 +1,21 @@
-@use './configuration' as *;
-@use './core';
+@use './core' as *;
 @use '../core/styles/theme';
 @use '../state-layer';
 @use '../focus-indicator';
 @use '../circular-progress';
-@use './token-utils' as *;
 
 //
 // Host
 //
 
+$host-tokens: [display disabled-cursor];
+
 :host {
-  @include host-configuration;
+  @include tokens($includes: $host-tokens);;
 }
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -27,19 +27,19 @@
 //
 
 .forge-button {
-  @include configuration;
+  @include tokens($excludes: $host-tokens);
 }
 
 .forge-button {
-  @include core.base;
+  @include base;
 
   ::slotted(:is([slot=start],[slot=end])) {
-    @include core.slotted-start-end;
+    @include slotted-start-end;
   }
 }
 
 a {
-  @include core.anchor-base;
+  @include anchor-base;
 }
 
 forge-state-layer {
@@ -85,13 +85,13 @@ forge-focus-indicator {
 
 :host(:is(:not([variant], [variant=text]))) {
   .forge-button {
-    @include core.text;
+    @include text;
   }
 }
 
 :host(:is([variant=filled],[variant=raised])) {
   .forge-button {
-    @include core.filled;
+    @include filled;
   }
 
   forge-state-layer {
@@ -101,13 +101,13 @@ forge-focus-indicator {
 
 :host([variant=raised]) {
   .forge-button {
-    @include core.raised;
+    @include raised;
   }
 }
 
 :host([variant=tonal]) {
   .forge-button {
-    @include core.tonal;
+    @include tonal;
   }
 
   forge-state-layer {
@@ -117,13 +117,13 @@ forge-focus-indicator {
 
 :host([variant=outlined]) {
   .forge-button {
-    @include core.outlined;
+    @include outlined;
   }
 }
 
 :host([variant=link]) {
   .forge-button {
-    @include core.link;
+    @include link;
   }
 }
 
@@ -142,7 +142,7 @@ forge-focus-indicator {
 
 :host([dense]) {
   .forge-button {
-    @include core.dense;
+    @include dense;
   }
 }
 
@@ -152,7 +152,7 @@ forge-focus-indicator {
 
 :host([pill]) {
   .forge-button {
-    @include core.pill;
+    @include pill;
   }
 
   forge-focus-indicator {
@@ -165,34 +165,34 @@ forge-focus-indicator {
 //
 
 :host(:not([anchor])[disabled]) {
-  @include core.host-disabled;
+  @include host-disabled;
 
   .forge-button {
-    @include core.disabled;
+    @include disabled;
   }
 }
 
 :host(:not([anchor])[variant=outlined][disabled]) {
   .forge-button {
-    @include core.outlined-disabled;
+    @include outlined-disabled;
   }
 }
 
 :host(:not([anchor])[variant=tonal][disabled]) {
   .forge-button {
-    @include core.tonal-disabled;
+    @include tonal-disabled;
   }
 }
 
 :host(:not([anchor]):is([variant=filled],[variant=raised])[disabled]) {
   .forge-button {
-    @include core.filled-disabled;
+    @include filled-disabled;
   }
 }
 
 :host(:not([anchor])[variant=raised][disabled]) {
   .forge-button {
-    @include core.raised-disabled;
+    @include raised-disabled;
   }
 }
 
@@ -202,13 +202,13 @@ forge-focus-indicator {
 
 :host([popover-icon]) {
   .forge-button__popover-icon {
-    @include core.popover-icon;
+    @include popover-icon;
   }
 }
 
 :host([popover-icon][aria-expanded=true]) {
   .forge-button__popover-icon {
-    @include core.popover-icon-open;
+    @include popover-icon-open;
   }
 }
 

diff --git a/src/lib/button/index.scss b/src/lib/button/index.scss
@@ -1,3 +1 @@
-@forward './configuration';
 @forward './core';
-@forward './token-utils' show provide-theme;
diff --git a/src/lib/checkbox/_configuration.scss b/src/lib/checkbox/_configuration.scss
diff --git a/src/lib/checkbox/_core.scss b/src/lib/checkbox/_core.scss
@@ -1,6 +1,8 @@
 @use '../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   display: inline-block;
 }