semantic slot update wip

packages/office-ui-fabric-react/src/common/_semanticSlots.scss

@@ -16,13 +16,14 @@ $linkHoveredColor: '[theme:linkHovered, default: #004578]';
 
 $disabledBackgroundColor: '[theme:disabledBackground, default: #f4f4f4]';
 $disabledTextColor: '[theme:disabledText, default: #a6a6a6]';
-$disabledBodyTextColor: '[theme:disabledText, default: #c8c8c8]';
+$disabledBodyTextColor: '[theme:disabledText, default: #a6a6a6]';
 $disabledSubtextColor: '[theme:disabledSubtext, default: #dadada]';
+$disabledBodySubtextColor: '[theme:disabledBodySubtext, default: #c8c8c8]';
 
 $focusBorderColor: '[theme:focusBorder, default: #000000]';
 $variantBorderColor: '[theme:variantBorder, default: #eaeaea]';
 $variantBorderHoveredColor: '[theme:variantBorderHovered, default: #a6a6a6]';
-$defaultStateBackgroundColor: '[theme:defaultStateBackground, default: #eaeaea]';
+$defaultStateBackgroundColor: '[theme:defaultStateBackground, default: #f8f8f8]';
 
 $errorTextColor: '[theme:errorText, default: #a80000]';
 $warningTextColor: '[theme:warningText, default: #333333]';
@@ -35,12 +36,14 @@ $successBackgroundColor: '[theme:successBackground, default: rgba(186,216,10,.2)
 /* Input controls */
 $inputBorderColor: '[theme:inputBorder, default: #a6a6a6]';
 $smallInputBorderColor: '[theme:inputBorder, default: #666666]';
-$inputBorderHoveredColor: '[theme:inputBorderHovered, default: #212121]';
+$inputBorderHoveredColor: '[theme:inputBorderHovered, default: #333333]';
 $inputBackgroundColor: '[theme:inputBackground, default: #ffffff]';
 $inputBackgroundCheckedColor: '[theme:inputBackgroundChecked, default: #0078d4]';
 $inputBackgroundCheckedHoveredColor: '[theme:inputBackgroundCheckedHovered, default: #106ebe]';
 $inputForegroundCheckedColor: '[theme:inputForegroundChecked, default: #ffffff]';
 $inputFocusBorderAltColor: '[theme:inputFocusBorderAlt, default: #0078d4]';
+$inputTextColor: '[theme:inputText, default: #333333]';
+$inputTextHoveredColor: '[theme:inputTextHovered, default: #212121]';
 $inputPlaceholderTextColor: '[theme:inputPlaceholderText, default: #666666]';
 
 /* Buttons */
@@ -65,6 +68,8 @@ $primaryButtonBorderColor: '[theme:primaryButtonText, default: transparent]';
 $primaryButtonTextColor: '[theme:primaryButtonText, default: #ffffff]';
 $primarybuttonTextHoveredColor: '[theme:primaryButtonTextHovered, default: #ffffff]';
 $primaryButtonTextPressedColor: '[theme:primaryButtonTextPressed, default: #ffffff]';
+// $accentButtonBackgroundColor: '[theme:accentButtonBackground, default: ]';
+$accentButtonTextColor: '[theme:accentButtonText, default: #ffffff]';
 
 /* Menus */
 

packages/styling/src/interfaces/ISemanticColors.ts

@@ -195,7 +195,6 @@ export interface ISemanticColors extends ISemanticTextColors {
   /**
    * Background of a hovered standard button
    */
-
   buttonBackgroundHovered: string;
 
   /**
@@ -248,6 +247,11 @@ export interface ISemanticColors extends ISemanticTextColors {
    */
   primaryButtonBorder: string;
 
+  /**
+   * Background of an accent button (kicker)
+   */
+  accentButtonBackground: string;
+
   //// Menus, popups, etc
 
   /**

packages/styling/src/interfaces/ISemanticTextColors.ts

@@ -53,6 +53,11 @@ export interface ISemanticTextColors {
    */
   disabledSubtext: string;
 
+  /**
+   * Disabled de-emphasized text, for use on the default background (bodyBackground).
+   */
+  disabledBodySubtext: string;
+
   //// Invariants - slots that rarely change color theme-to-theme because the color has meaning
 
   /**
@@ -64,6 +69,16 @@ export interface ISemanticTextColors {
    */
   warningText: string;
 
+  /**
+   * The color of input text.
+   */
+  inputText: string;
+
+  /**
+   * The color of input text on hover.
+   */
+  inputTextHovered: string;
+
   /**
    * The color of placeholder text.
    */
@@ -115,6 +130,11 @@ export interface ISemanticTextColors {
    */
   primaryButtonTextDisabled: string;
 
+  /**
+   * Color of text for accent button (kicker)
+   */
+  accentButtonText: string;
+
   //// Lists
 
   /**

packages/styling/src/styles/theme.ts

@@ -177,13 +177,14 @@ function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean, depCom
 
     disabledBackground: p.neutralLighter,
     disabledText: p.neutralTertiary,
-    disabledBodyText: p.neutralTertiaryAlt,
+    disabledBodyText: p.neutralTertiary,
     disabledSubtext: p.neutralQuaternary,
+    disabledBodySubtext: p.neutralTertiaryAlt,
 
     focusBorder: p.neutralSecondary,
     variantBorder: p.neutralLight,
     variantBorderHovered: p.neutralTertiary,
-    defaultStateBackground: p.neutralLight,
+    defaultStateBackground: p.neutralLighterAlt,
 
     errorText: !isInverted ? p.redDark : '#ff5f5f',
     warningText: !isInverted ? '#333333' : '#ffffff',
@@ -194,13 +195,15 @@ function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean, depCom
     successBackground: !isInverted ? 'rgba(186, 216, 10, .2)' : 'rgba(186, 216, 10, .4)',
 
     inputBorder: p.neutralTertiary,
-    inputBorderHovered: p.neutralDark,
+    inputBorderHovered: p.neutralPrimary,
     inputBackground: p.white,
     inputBackgroundChecked: p.themePrimary,
     inputBackgroundCheckedHovered: p.themeDarkAlt,
     inputForegroundChecked: p.white,
     inputFocusBorderAlt: p.themePrimary,
     smallInputBorder: p.neutralSecondary,
+    inputText: p.neutralPrimary,
+    inputTextHovered: p.neutralDark,
     inputPlaceholderText: p.neutralSecondary,
 
     buttonBackground: p.neutralLighter,
@@ -223,12 +226,14 @@ function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean, depCom
     primaryButtonBackgroundPressed: p.themeDark,
     primaryButtonBackgroundDisabled: p.neutralLighter,
     primaryButtonBorder: 'transparent',
-
     primaryButtonText: p.white,
     primaryButtonTextHovered: p.white,
     primaryButtonTextPressed: p.white,
     primaryButtonTextDisabled: p.neutralQuaternary,
 
+    accentButtonBackground: p.accent,
+    accentButtonText: p.white,
+
     menuBackground: p.white,
     menuDivider: p.neutralTertiaryAlt,
     menuIcon: p.themePrimary,

packages/variants/src/variants.ts

@@ -88,6 +88,7 @@ export function getNeutralVariant(theme: IPartialTheme): ITheme {
     bodyText: p.neutralPrimary,
     bodySubtext: p.neutralSecondary,
     bodyDivider: p.neutralQuaternaryAlt,
+    focusBorder: p.neutralSecondary,
     variantBorder: p.neutralLight,
     variantBorderHovered: p.neutralTertiary,
     defaultStateBackground: p.neutralLight,
@@ -96,7 +97,10 @@ export function getNeutralVariant(theme: IPartialTheme): ITheme {
     actionLinkHovered: !fullTheme.isInverted ? p.neutralDark : p.neutralPrimary,
     link: p.themeDarkAlt,
     linkHovered: p.themeDarker,
+    disabledBackground: !fullTheme.isInverted ? p.neutralLight : p.neutralLighter,
     disabledText: p.neutralTertiary,
+    disabledBodyText: p.neutralTertiary,
+    disabledBodySubtext: p.neutralTertiaryAlt,
 
     buttonBackground: p.neutralQuaternaryAlt,
     buttonBackgroundHovered: p.neutralQuaternary,