From 1d9ad60e919d3b5381affa2c11ffd013cd6bcaf7 Mon Sep 17 00:00:00 2001 From: Philip Kuo Date: Wed, 31 May 2017 15:57:20 -0700 Subject: [PATCH 1/5] add more semantic color slots --- .../styling/src/interfaces/ISemanticColors.ts | 15 +++++++++++++++ packages/styling/src/utilities/theme.ts | 15 ++++++++++++++- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/styling/src/interfaces/ISemanticColors.ts b/packages/styling/src/interfaces/ISemanticColors.ts index 8695b135e71da..729741172314a 100644 --- a/packages/styling/src/interfaces/ISemanticColors.ts +++ b/packages/styling/src/interfaces/ISemanticColors.ts @@ -11,6 +11,7 @@ export interface ISemanticColors { bodyBackground?: string; bodyText?: string; bodySubtext?: string; + bodyDivider?: string; disabledBackground?: string; disabledText?: string; @@ -28,4 +29,18 @@ export interface ISemanticColors { inputBackgroundSelected?: string; inputBackgroundSelectedHovered?: string; inputForegroundSelected?: string; + inputFocusBorderAlt?: string; + + // Menus, popups, etc + menuItemBackgroundHovered?: string; + menuItemBackgroundChecked?: string; + menuIcon?: string; + menuHeader?: string; + + // Lists + listBackground?: string; + listTextColor?: string; + listItemBackgroundHovered?: string; + listItemBackgroundChecked?: string; + listItemBackgroundCheckedHovered?: string; } \ No newline at end of file diff --git a/packages/styling/src/utilities/theme.ts b/packages/styling/src/utilities/theme.ts index a3f10c53f6edd..0859664de3760 100644 --- a/packages/styling/src/utilities/theme.ts +++ b/packages/styling/src/utilities/theme.ts @@ -44,6 +44,7 @@ function _makeSemanticColorsFromPalette(p: IPalette): ISemanticColors { bodyBackground: p.white, bodyText: p.neutralPrimary, bodySubtext: p.neutralSecondary, + bodyDivider: p.neutralLight, disabledBackground: p.neutralLighter, disabledText: p.neutralTertiaryAlt, @@ -58,6 +59,18 @@ function _makeSemanticColorsFromPalette(p: IPalette): ISemanticColors { inputBorderHovered: p.neutralPrimary, inputBackgroundSelected: p.themePrimary, inputBackgroundSelectedHovered: p.themeDarkAlt, - inputForegroundSelected: p.white + inputForegroundSelected: p.white, + inputFocusBorderAlt: p.themePrimary, + + menuItemBackgroundHovered: p.neutralLighter, + menuItemBackgroundChecked: p.neutralQuaternaryAlt, + menuIcon: p.themePrimary, + menuHeader: p.themePrimary, + + listBackground: p.white, + listTextColor: p.neutralPrimary, + listItemBackgroundHovered: p.neutralLighter, + listItemBackgroundChecked: p.neutralQuaternary, + listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt }; } From fb17bcd230c33ad88fa0ee924abc4f1443275d75 Mon Sep 17 00:00:00 2001 From: Philip Kuo Date: Wed, 31 May 2017 15:58:53 -0700 Subject: [PATCH 2/5] add chang efile --- .../styling/phkuo-glamor_2017-05-31-22-58.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@uifabric/styling/phkuo-glamor_2017-05-31-22-58.json diff --git a/common/changes/@uifabric/styling/phkuo-glamor_2017-05-31-22-58.json b/common/changes/@uifabric/styling/phkuo-glamor_2017-05-31-22-58.json new file mode 100644 index 0000000000000..797fb64f462f8 --- /dev/null +++ b/common/changes/@uifabric/styling/phkuo-glamor_2017-05-31-22-58.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/styling", + "comment": "add more semantic color slots", + "type": "patch" + } + ], + "packageName": "@uifabric/styling", + "email": "phkuo@microsoft.com" +} \ No newline at end of file From 5e34c55b4d7332261404f7ec78693c0cbd089376 Mon Sep 17 00:00:00 2001 From: Philip Kuo Date: Sat, 3 Jun 2017 01:26:33 -0700 Subject: [PATCH 3/5] add documentation --- .../src/components/Toggle/Toggle.styles.ts | 6 +- .../styling/src/interfaces/ISemanticColors.ts | 65 +++++++++++++++++-- packages/styling/src/utilities/theme.ts | 6 +- 3 files changed, 65 insertions(+), 12 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.styles.ts b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.styles.ts index c2d630a3a39f3..49faaf10ba73c 100644 --- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.styles.ts @@ -13,11 +13,11 @@ export const getStyles = memoizeFunction(( ): IToggleStyles => { const { semanticColors } = theme; const pillUncheckedBackground = semanticColors.bodyBackground; - const pillCheckedBackground = semanticColors.inputBackgroundSelected; - const pillCheckedHoveredBackground = semanticColors.inputBackgroundSelectedHovered; + const pillCheckedBackground = semanticColors.inputBackgroundChecked; + const pillCheckedHoveredBackground = semanticColors.inputBackgroundCheckedHovered; const pillCheckedDisabledBackground = semanticColors.disabledText; const thumbBackground = semanticColors.inputBorderHovered; - const thumbCheckedBackground = semanticColors.inputForegroundSelected; + const thumbCheckedBackground = semanticColors.inputForegroundChecked; const thumbDisabledBackground = semanticColors.disabledText; const thumbCheckedDisabledBackground = semanticColors.disabledBackground; const pillBorderColor = semanticColors.inputBorder; diff --git a/packages/styling/src/interfaces/ISemanticColors.ts b/packages/styling/src/interfaces/ISemanticColors.ts index 729741172314a..5ef336a8ef6ab 100644 --- a/packages/styling/src/interfaces/ISemanticColors.ts +++ b/packages/styling/src/interfaces/ISemanticColors.ts @@ -1,46 +1,99 @@ /** * The collection of semantic slots for colors used in themes. - * See documentation [todo] - */ + * + * + * +Naming Convention  +The name of a semantic slot can quickly tell you how it’s meant to be used. It generally follows this format:  +[category name][element name][checked state][hovered/pressed/disabled state]   +[category name] – The “family” that this slot belongs to.  +[element name] – The name of the thing being targeted, such as the background or border.  +[checked state] – Whether the thing is checked. We assume things are unchecked by default, so no need to specify the unchecked state. +(We used “checked” to refer to anything that is on, selected, toggled, highlighted, emphasized, etc.)  +[hovered/pressed/disabled state] – One of these states, if applicable. Each of these states are mutually exclusive. +Pressed styles overwrite hovered styles, and disabled elements cannot be hovered or pressed.    +  +Base/Body +A basic set of slots that provide many default body styles, such as text, subtext, disabled colors, error text, and so on. +If a category doesn't provide the slot you're looking for, use one from this category. +For example, the placeholder text on a text input field has no corresponding slot in its category, +so you'd use the bodySubtextColor from this category.  +  +Input Controls  +This category contains input components commonly used to denote state, including radio buttons, +check boxes, toggle switches, sliders, progress bars, and more.  +  +Menus  +Any kind of popup menus uses this category.  +  +Lists  +Lists differ from menus in that they are designed to show infinite amounts of items, often scroll, +and have a large and complex interaction surface. +This category covers all kinds of lists, whether they're typical one-item-per-row lists (like DetailsList) or ones with a tiled layout.  +*/ export interface ISemanticColors { /** * ANY ADDITIONS/REMOVALS HERE MUST ALSO BE MADE TO \packages\styling\src\utilities\theme.ts:_makeSemanticColorsFromPalette() */ - // Base slots defining universal colors + /** default color for backgrounds */ bodyBackground?: string; + /** default color for text */ bodyText?: string; + /** de-emphasized text; e.g. metadata, captions, placeholder text */ bodySubtext?: string; + /** divider lines; e.g. lines that separate sections in a menu, an
element */ bodyDivider?: string; + /** default color for backgrounds of disabled controls; e.g. disabled text field */ disabledBackground?: string; + /** default color for disabled text, e.g. user input inside a disabled text field */ disabledText?: string; + /** disabled de-emphasized text; e.g. placeholder text inside disabled input field */ disabledSubtext?: string; + /** color of outline around focused controls that don't already have a border */ focusBorder?: string; // Invariants - slots that rarely change color theme-to-theme because the color has meaning + /** background for errors, if necessary */ errorBackground?: string; + /** default color of error text */ errorText?: string; // Input controls slots (text fields, checkboxes, radios...) + /** border of an input control in its resting, unchecked state; e.g. box of an unchecked checkbox */ inputBorder?: string; + /** hovered border of an input control */ inputBorderHovered?: string; - inputBackgroundSelected?: string; - inputBackgroundSelectedHovered?: string; - inputForegroundSelected?: string; + /** background of a checked control; e.g. checked radio button's dot, checked toggle's background */ + inputBackgroundChecked?: string; + /** e.g. checked checkbox's background color on hover */ + inputBackgroundCheckedHovered?: string; + /** e.g. checked checkbox's checkmark color, checked toggle's thumb color, radio button's background color around the dot */ + inputForegroundChecked?: string; + /** alternate focus border color for elements that already have a border; e.g. text field borders on focus */ inputFocusBorderAlt?: string; // Menus, popups, etc + /** hovered background of a menu item */ menuItemBackgroundHovered?: string; + /** background of checked menu item; e.g. a menu item whose submenu is open, a selected dropdown item */ menuItemBackgroundChecked?: string; + /** default colors of icons in menus */ menuIcon?: string; + /** headers in menus that denote title of a section */ menuHeader?: string; // Lists + /** background color for the entire list */ listBackground?: string; + /** default text color for list item titles and text in column fields */ listTextColor?: string; + /** background color of a hovered list item */ listItemBackgroundHovered?: string; + /** background color of a checked list item */ listItemBackgroundChecked?: string; + /** background color of a checked and hovered list item */ listItemBackgroundCheckedHovered?: string; } \ No newline at end of file diff --git a/packages/styling/src/utilities/theme.ts b/packages/styling/src/utilities/theme.ts index 0859664de3760..10bcc81054439 100644 --- a/packages/styling/src/utilities/theme.ts +++ b/packages/styling/src/utilities/theme.ts @@ -57,9 +57,9 @@ function _makeSemanticColorsFromPalette(p: IPalette): ISemanticColors { inputBorder: p.neutralTertiary, inputBorderHovered: p.neutralPrimary, - inputBackgroundSelected: p.themePrimary, - inputBackgroundSelectedHovered: p.themeDarkAlt, - inputForegroundSelected: p.white, + inputBackgroundChecked: p.themePrimary, + inputBackgroundCheckedHovered: p.themeDarkAlt, + inputForegroundChecked: p.white, inputFocusBorderAlt: p.themePrimary, menuItemBackgroundHovered: p.neutralLighter, From b9631bdddc87aa1c319d11d7eaf06b68104b50f6 Mon Sep 17 00:00:00 2001 From: Philip Kuo Date: Mon, 5 Jun 2017 15:00:01 -0700 Subject: [PATCH 4/5] address code review feedback --- .../styling/src/interfaces/ISemanticColors.ts | 110 +++++++++++++----- 1 file changed, 79 insertions(+), 31 deletions(-) diff --git a/packages/styling/src/interfaces/ISemanticColors.ts b/packages/styling/src/interfaces/ISemanticColors.ts index 5ef336a8ef6ab..938c2fa12f452 100644 --- a/packages/styling/src/interfaces/ISemanticColors.ts +++ b/packages/styling/src/interfaces/ISemanticColors.ts @@ -1,8 +1,7 @@ /** - * The collection of semantic slots for colors used in themes. - * - * * + * The collection of semantic slots for colors used in themes. + Naming Convention  The name of a semantic slot can quickly tell you how it’s meant to be used. It generally follows this format:  [category name][element name][checked state][hovered/pressed/disabled state]   @@ -29,71 +28,120 @@ Any kind of popup menus uses this category.  Lists  Lists differ from menus in that they are designed to show infinite amounts of items, often scroll, and have a large and complex interaction surface. -This category covers all kinds of lists, whether they're typical one-item-per-row lists (like DetailsList) or ones with a tiled layout.  +This category covers all kinds of lists, whether they're typical one-item-per-row lists (like DetailsList) or ones with a tiled layout. + */ export interface ISemanticColors { + /* ANY ADDITIONS/REMOVALS HERE MUST ALSO BE MADE TO \packages\styling\src\utilities\theme.ts:_makeSemanticColorsFromPalette() */ + /** - * ANY ADDITIONS/REMOVALS HERE MUST ALSO BE MADE TO \packages\styling\src\utilities\theme.ts:_makeSemanticColorsFromPalette() + * The default color for backgrounds. */ - - /** default color for backgrounds */ bodyBackground?: string; - /** default color for text */ + /** + * The default color for text. + */ bodyText?: string; - /** de-emphasized text; e.g. metadata, captions, placeholder text */ + /** + * De-emphasized text; e.g. metadata, captions, placeholder text. + */ bodySubtext?: string; - /** divider lines; e.g. lines that separate sections in a menu, an
element */ + /** + * Divider lines; e.g. lines that separate sections in a menu, an
element. + */ bodyDivider?: string; - /** default color for backgrounds of disabled controls; e.g. disabled text field */ + /** + * The default color for backgrounds of disabled controls; e.g. disabled text field. + */ disabledBackground?: string; - /** default color for disabled text, e.g. user input inside a disabled text field */ + /** + * The default color for disabled text; e.g. user input inside a disabled text field. + */ disabledText?: string; - /** disabled de-emphasized text; e.g. placeholder text inside disabled input field */ + /** + * Disabled de-emphasized text; e.g. placeholder text inside disabled input field. + */ disabledSubtext?: string; - /** color of outline around focused controls that don't already have a border */ + /** + * The color of the outline around focused controls that don't already have a border; e.g. menu items + */ focusBorder?: string; // Invariants - slots that rarely change color theme-to-theme because the color has meaning - /** background for errors, if necessary */ + /** + * The background for errors, if necessary, or highlighting the section of the page where the error is present. + */ errorBackground?: string; - /** default color of error text */ + /** + * The default color of error text. + */ errorText?: string; // Input controls slots (text fields, checkboxes, radios...) - /** border of an input control in its resting, unchecked state; e.g. box of an unchecked checkbox */ + /** + * The border of an input control in its resting, unchecked state; e.g. the box of an unchecked checkbox. + */ inputBorder?: string; - /** hovered border of an input control */ + /** + * The border color of a hovered input control. + */ inputBorderHovered?: string; - /** background of a checked control; e.g. checked radio button's dot, checked toggle's background */ + /** + * The background of a checked control; e.g. checked radio button's dot, checked toggle's background. + */ inputBackgroundChecked?: string; - /** e.g. checked checkbox's background color on hover */ + /** + * The background of a checked and hovered control; e.g. checked checkbox's background color on hover. + */ inputBackgroundCheckedHovered?: string; - /** e.g. checked checkbox's checkmark color, checked toggle's thumb color, radio button's background color around the dot */ + /** + * The foreground of a checked control; e.g. checked checkbox's checkmark color, checked toggle's thumb color, radio button's background color around the dot. + */ inputForegroundChecked?: string; - /** alternate focus border color for elements that already have a border; e.g. text field borders on focus */ + /** + * The alternate focus border color for elements that already have a border; e.g. text field borders on focus. + */ inputFocusBorderAlt?: string; // Menus, popups, etc - /** hovered background of a menu item */ + /** + * The background of a hovered menu item. + */ menuItemBackgroundHovered?: string; - /** background of checked menu item; e.g. a menu item whose submenu is open, a selected dropdown item */ + /** + * The background of checked menu item; e.g. a menu item whose submenu is open, a selected dropdown item. + */ menuItemBackgroundChecked?: string; - /** default colors of icons in menus */ + /** + * The default colors of icons in menus. + */ menuIcon?: string; - /** headers in menus that denote title of a section */ + /** + * The headers in menus that denote title of a section. + */ menuHeader?: string; // Lists - /** background color for the entire list */ + /** + * The background color for the entire list. + */ listBackground?: string; - /** default text color for list item titles and text in column fields */ + /** + * The default text color for list item titles and text in column fields. + */ listTextColor?: string; - /** background color of a hovered list item */ + /** + * The background color of a hovered list item. + */ listItemBackgroundHovered?: string; - /** background color of a checked list item */ + /** + * The background color of a checked list item. + */ listItemBackgroundChecked?: string; - /** background color of a checked and hovered list item */ + /** + * The background color of a checked and hovered list item. + */ listItemBackgroundCheckedHovered?: string; } \ No newline at end of file From 8fb8c54922c61efb878dfee683373b8a435d2d18 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Mon, 5 Jun 2017 16:50:57 -0700 Subject: [PATCH 5/5] Update phkuo-glamor_2017-05-31-22-58.json --- .../@uifabric/styling/phkuo-glamor_2017-05-31-22-58.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/common/changes/@uifabric/styling/phkuo-glamor_2017-05-31-22-58.json b/common/changes/@uifabric/styling/phkuo-glamor_2017-05-31-22-58.json index 797fb64f462f8..25d0775f40bbc 100644 --- a/common/changes/@uifabric/styling/phkuo-glamor_2017-05-31-22-58.json +++ b/common/changes/@uifabric/styling/phkuo-glamor_2017-05-31-22-58.json @@ -3,9 +3,9 @@ { "packageName": "@uifabric/styling", "comment": "add more semantic color slots", - "type": "patch" + "type": "minor" } ], "packageName": "@uifabric/styling", "email": "phkuo@microsoft.com" -} \ No newline at end of file +}