Refactoring

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -2195,6 +2195,18 @@
             Less common properties.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ThemeToken.CommonProps.BaseLayerLuminance">
+            <summary>
+            This is a decimal value, and the LightMode (0.98) and DarkMode (0.15) constants represent the standard 
+            points for light and dark mode. You could set it to any value 0 (black) to 1 (white) 
+            depending on your needs.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ThemeToken.CommonProps.AccentBaseColor">
+            <summary>
+            Set to a custom swatch to use for color recipes for accent buttons, checkboxes, etc.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ThemeToken.CommonProps.FillColor">
             <summary>
             Gets or sets a value that may be applied to an element's styles and used as context for child color recipes.

src/Core.Assets/src/Design/ColorsUtils.ts

@@ -1,5 +1,5 @@
-import { Swatch, SwatchRGB } from "@fluentui/web-components";
-import { CSSDesignToken } from '@microsoft/fast-foundation';
+import { SwatchRGB } from "@fluentui/web-components";
+
 
 class ColorsUtils {
 
@@ -73,46 +73,6 @@ class ColorsUtils {
     return i / (max - min);
   }
 
-  /**
-   * Apply the string to the item (if not null).
-   * @param item
-   * @param value
-   * @returns
-   */
-  public static applyDefaultString(item: CSSDesignToken<string>, value: string | null): void {
-    value && item.withDefault(value);
-  }
-
-  /**
-   * Apply the number to the item (if not null).
-   * @param item
-   * @param value
-   * @returns
-   */
-  public static applyDefaultNumber(item: CSSDesignToken<number>, value: number| null): void {
-    value && item.withDefault(value);
-  }
-
-  /**
-   * Apply the color to the item (if not null).
-   * @param item
-   * @param color
-   * @returns
-   */
-  public static applyDefaultColors(item: CSSDesignToken<Swatch>, color: string | null): void {
-
-    if (color == null) {
-      return;
-    }
-
-    const swatchRGB = ColorsUtils.swatchHexColor(color);
-    if (swatchRGB == null) {
-      return
-    }
-
-    item.withDefault(swatchRGB);
-  }
-
   /**
    * Convert to named color to an equivalent Hex color
    * @param name Office color name

src/Core.Assets/src/Design/Converters.ts

@@ -0,0 +1,47 @@
+import { CSSDesignToken } from '@microsoft/fast-foundation';
+import { Swatch } from "@fluentui/web-components";
+import { ColorsUtils } from './ColorsUtils';
+
+class Converters {
+  /**
+   * Apply the string to the item (if not null).
+   * @param item
+   * @param value
+   * @returns
+   */
+  public static applyDefaultString(item: CSSDesignToken<string>, value: string | null): void {
+    value && item.withDefault(value);
+  }
+
+  /**
+   * Apply the number to the item (if not null).
+   * @param item
+   * @param value
+   * @returns
+   */
+  public static applyDefaultNumber(item: CSSDesignToken<number>, value: number | null): void {
+    value && item.withDefault(value);
+  }
+
+  /**
+   * Apply the color to the item (if not null).
+   * @param item
+   * @param color
+   * @returns
+   */
+  public static applyDefaultColors(item: CSSDesignToken<Swatch>, color: string | null): void {
+
+    if (color == null) {
+      return;
+    }
+
+    const swatchRGB = ColorsUtils.swatchHexColor(color);
+    if (swatchRGB == null) {
+      return
+    }
+
+    item.withDefault(swatchRGB);
+  }
+}
+
+export { Converters };

src/Core.Assets/src/Design/Tokens.ts

@@ -1,7 +1,7 @@
 import {
-    Swatch,
-  SwatchRGB,
+  accentBaseColor,
   accentFillRecipe,
+  baseLayerLuminance,
   bodyFont,
   controlCornerRadius,
   density,
@@ -10,16 +10,22 @@ import {
   layerCornerRadius,
   neutralBaseColor
 } from "@fluentui/web-components/dist/web-components";
-import { ColorsUtils } from "./ColorsUtils";
+import { Converters } from "./Converters";
 
 class Tokens {
   public apply(token: ThemeToken) {
-    ColorsUtils.applyDefaultColors(fillColor, token.common.fillColor);
-    ColorsUtils.applyDefaultColors(neutralBaseColor, token.common.neutralBaseColor);
-    ColorsUtils.applyDefaultString(bodyFont, token.common.bodyFont);
-    ColorsUtils.applyDefaultNumber(controlCornerRadius, token.common.controlCornerRadius);
-    ColorsUtils.applyDefaultNumber(layerCornerRadius, token.common.layerCornerRadius);
-    ColorsUtils.applyDefaultNumber(density, token.common.density);
+
+    // Duplicate with DesignTheme attributes
+    Converters.applyDefaultNumber(baseLayerLuminance, token.common.baseLayerLuminance)
+    Converters.applyDefaultColors(accentBaseColor, token.common.accentBaseColor);
+
+    // Common
+    Converters.applyDefaultColors(fillColor, token.common.fillColor);
+    Converters.applyDefaultColors(neutralBaseColor, token.common.neutralBaseColor);
+    Converters.applyDefaultString(bodyFont, token.common.bodyFont);
+    Converters.applyDefaultNumber(controlCornerRadius, token.common.controlCornerRadius);
+    Converters.applyDefaultNumber(layerCornerRadius, token.common.layerCornerRadius);
+    Converters.applyDefaultNumber(density, token.common.density);
   }
 }
 
@@ -34,6 +40,8 @@ interface ThemeToken {
 }
 
 interface CommonProps {
+  baseLayerLuminance: number | null;
+  accentBaseColor: string | null;
   bodyFont: string | null;
   fillColor: string | null;
   neutralBaseColor: string | null;

src/Core/Components/DesignSystemProvider/ThemeToken.cs

@@ -24,6 +24,20 @@ public class ThemeToken
 
     public class CommonProps
     {
+        /// <summary>
+        /// This is a decimal value, and the LightMode (0.98) and DarkMode (0.15) constants represent the standard 
+        /// points for light and dark mode. You could set it to any value 0 (black) to 1 (white) 
+        /// depending on your needs.
+        /// </summary>
+        [ThemeTokenType(TokenType.Text)]
+        public double BaseLayerLuminance { get; set; }
+
+        /// <summary>
+        /// Set to a custom swatch to use for color recipes for accent buttons, checkboxes, etc.
+        /// </summary>
+        [ThemeTokenType(TokenType.Color)]
+        public string? AccentBaseColor { get; set; }
+
         /// <summary>
         /// Gets or sets a value that may be applied to an element's styles and used as context for child color recipes.
         /// </summary>