chore: fix text theme colors and update button toggle demo with custo…

…m style example
tyler-technologies-oss · Dec 14, 2023 · 2a1186e · 2a1186e
1 parent eec1a53
commit 2a1186e
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 13 deletions.
diff --git a/src/dev/pages/button-toggle/button-toggle.ejs b/src/dev/pages/button-toggle/button-toggle.ejs
@@ -126,6 +126,25 @@
       </div>
     </forge-card>
   </section>
+
+  <!-- Legacy -->
+  <section>
+    <h3 class="forge-typography--heading2">Legacy (custom)</h3>
+    <forge-button-toggle-group class="legacy-button-toggle-group" value="email" aria-label="Custom button toggle group">
+      <forge-button-toggle value="email">
+        <forge-icon name="email" slot="start"></forge-icon>
+        By email
+      </forge-button-toggle>
+      <forge-button-toggle value="mail">
+        <forge-icon name="mail" slot="start"></forge-icon>
+        By mail
+      </forge-button-toggle>
+      <forge-button-toggle value="phone">
+        <forge-icon name="phone" slot="start"></forge-icon>
+        By phone
+      </forge-button-toggle>
+    </forge-button-toggle-group>
+  </section>
 </div>
 
 <script type="module" src="button-toggle.ts"></script>
diff --git a/src/dev/pages/button-toggle/button-toggle.scss b/src/dev/pages/button-toggle/button-toggle.scss
@@ -1,4 +1,6 @@
 @use '../../../lib/button-toggle/button-toggle-group';
+@use '../../../lib/button-toggle/button-toggle';
+@use '../../../lib/core/styles/theme';
 
 #toolbar-card {
   display: inline-block;
@@ -16,4 +18,39 @@
     height: auto;
     margin-block: 4px;
   }
+}
+
+.legacy-button-toggle-group {
+  @include button-toggle-group.provide-theme((
+    gap: 1px,
+    padding: 0
+  ));
+
+  forge-button-toggle {
+    @include button-toggle.provide-theme((
+      selected-color: theme.variable(on-primary),
+      selected-background: theme.variable(primary),
+      focus-indicator-offset: 2px
+    ));
+
+    &:first-of-type {
+      @include button-toggle.provide-theme((
+        shape-start-end: 0,
+        shape-end-end: 0
+      ));
+    }
+
+    &:not(:first-of-type):not(:last-of-type) {
+      @include button-toggle.provide-theme((
+        shape: 0
+      ));
+    }
+
+    &:last-of-type {
+      @include button-toggle.provide-theme((
+        shape-start-start: 0,
+        shape-end-start: 0
+      ));
+    }
+  }
 }
diff --git a/src/dev/pages/theme/theme.ts b/src/dev/pages/theme/theme.ts
@@ -8,7 +8,8 @@ interface ISwatchGroup {
 
 interface ISwatch {
   text?: string;
-  background: string;
+  background?: string;
+  border?: string;
   foreground?: string;
 }
 
@@ -105,17 +106,19 @@ const SWATCH_GROUPS: ISwatchGroup[] = [
   {
     header: 'Text',
     swatches: [
-      { text: 'High', background: 'text-high', foreground: 'text-high-inverse' },
-      { text: 'Medium', background: 'text-medium', foreground: 'text-high-inverse' },
-      { text: 'Low', background: 'text-low', foreground: 'text-high' },
-      { text: 'Lowest', background: 'text-lowest', foreground: 'text-high' }
+      { text: 'High (87%)', foreground: 'text-high'},
+      { text: 'Medium (54%)', foreground: 'text-medium'},
+      { text: 'Low (38%)', foreground: 'text-low'},
+      { text: 'Lowest (12%)', foreground: 'text-lowest' }
     ]
   },
   {
     header: 'Utilities',
     swatches: [
-      { text: 'Outline', background: 'outline', foreground: 'text-high' },
-      { text: 'Outline (high)', background: 'outline-high', foreground: 'text-high-inverse' }
+      { text: 'Outline (high)', border: 'outline-high' },
+      { text: 'Outline (medium)', border: 'outline-medium' },
+      { text: 'Outline (low)', border: 'outline-low' },
+      { text: 'Outline', border: 'outline' }
     ]
   }
 ];
@@ -148,7 +151,14 @@ function createSwatch(config: ISwatch): HTMLElement {
   if (config.text) {
     swatch.textContent = config.text;
   }
-  swatch.style.setProperty('background-color', `var(--forge-theme-${config.background})`);
+
+  if (config.border) {
+    swatch.style.setProperty('border-color', `var(--forge-theme-${config.border})`);
+  }
+
+  if (config.background) {
+    swatch.style.setProperty('background-color', `var(--forge-theme-${config.background})`);
+  }
 
   if (config.foreground) {
     swatch.style.setProperty('color', `var(--forge-theme-${config.foreground})`);

diff --git a/src/lib/button-toggle/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle/button-toggle.scss
@@ -39,8 +39,13 @@ $_host-tokens: [display];
 
   forge-focus-indicator {
     @include focus-indicator.provide-theme((
-      outward-offset: 0px, // Requires unit
-      color: #{token(focus-indicator-color)}
+      outward-offset: #{token(focus-indicator-offset)},
+      color: #{token(focus-indicator-color)},
+      shape: #{token(shape)},
+      shape-start-start: #{token(shape-start-start)},
+      shape-start-end: #{token(shape-start-end)},
+      shape-end-start: #{token(shape-end-start)},
+      shape-end-end: #{token(shape-end-end)},
     ));
   }
 }

diff --git a/src/lib/core/styles/tokens/button-toggle/button-toggle/_tokens.scss b/src/lib/core/styles/tokens/button-toggle/button-toggle/_tokens.scss
@@ -54,7 +54,8 @@ $tokens: (
   transition-timing: utils.module-val(button-toggle, transition-timing, animation.variable(easing-standard)),
 
   // Focus indicator
-  focus-indicator-color: utils.module-val(button-toggle, focus-indicator-color, theme.variable(primary))
+  focus-indicator-color: utils.module-val(button-toggle, focus-indicator-color, theme.variable(primary)),
+  focus-indicator-offset: utils.module-val(button-toggle, focus-indicator-offset, 0px) // Requires unit
 ) !default;
 
 @function get($key) {

diff --git a/src/lib/core/styles/tokens/theme/_tokens.text.scss b/src/lib/core/styles/tokens/theme/_tokens.text.scss
@@ -21,8 +21,8 @@
     text-medium-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(medium)),
     text-low: theme-utils.emphasized($text, color-emphasis.value(medium-low)),
     text-low-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(medium-low)),
-    text-lowest: theme-utils.emphasized($text, color-emphasis.value(lowest)),
-    text-lowest-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(lowest)),
+    text-lowest: theme-utils.emphasized($text, color-emphasis.value(lower)),
+    text-lowest-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(lower)),
   );
 }