diff --git a/specifications/creating-components.md b/specifications/creating-components.md index 8178382cfe..7b0e0e31e4 100644 --- a/specifications/creating-components.md +++ b/specifications/creating-components.md @@ -46,7 +46,7 @@ We explored the following approaches. The below code snippets simplified for ea A HOC that wraps the provided component and passes features through props. ```jsx -import imageRules from './imageRules' +import imageStyles from './imageStyles' import imageVariables from './imageVariables' const Image = (props) => { @@ -56,7 +56,7 @@ const Image = (props) => { } export default createComponent(Image, { - rules: imageRules, + rules: imageStyles, variables: imageVariables, }) ``` @@ -90,7 +90,7 @@ Directly import context consumers and use them in the render method to access th ```jsx import Provider from '../Provider' -import imageRules from './imageRules' +import imageStyles from './imageStyles' import imageVariables from './imageVariables' class Image extends React.Component { @@ -98,7 +98,7 @@ class Image extends React.Component { return ( { - const classes = getClasses(this.props, imageRules, imageVariables, theme) + const classes = getClasses(this.props, imageStyles, imageVariables, theme) return }} @@ -114,12 +114,12 @@ A function to be returned in the render method. Calls back with the theme. Impl ```jsx import Provider from '../Provider' -import imageRules from './imageRules' +import imageStyles from './imageStyles' import imageVariables from './imageVariables' const Image = (props) => { return hocContext((theme) => { - const classes = getClasses(props, imageRules, imageVariables, theme) + const classes = getClasses(props, imageStyles, imageVariables, theme) return }) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 30b3a3661f..73df06c508 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { AutoControlledComponent, customPropTypes, childrenExist } from '../../lib' -import accordionRules from './accordionRules' +import accordionStyles from '../../themes/teams/components/Accordion/accordionStyles' import AccordionTitle from './AccordionTitle' import AccordionContent from './AccordionContent' import { DefaultBehavior } from '../../lib/accessibility' @@ -66,7 +66,7 @@ class Accordion extends AutoControlledComponent { accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } - static rules = accordionRules + static styles = accordionStyles static handledProps = [ 'accessibility', diff --git a/src/components/Accordion/AccordionContent.tsx b/src/components/Accordion/AccordionContent.tsx index fb97e4721f..dd10c9bd5d 100644 --- a/src/components/Accordion/AccordionContent.tsx +++ b/src/components/Accordion/AccordionContent.tsx @@ -2,8 +2,8 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' -import accordionContentRules from './accordionContentRules' -import accordionContentVariables from './accordionContentVariables' +import accordionContentStyles from '../../themes/teams/components/Accordion/accordionContentStyles' +import accordionContentVariables from '../../themes/teams/components/Accordion/accordionContentVariables' /** * A standard AccordionContent. @@ -42,7 +42,7 @@ class AccordionContent extends UIComponent { static handledProps = ['as', 'active', 'children', 'className', 'content', 'onClick'] - static rules = accordionContentRules + static styles = accordionContentStyles static variables = accordionContentVariables diff --git a/src/components/Accordion/AccordionTitle.tsx b/src/components/Accordion/AccordionTitle.tsx index 17148dade1..4ba8b23f19 100644 --- a/src/components/Accordion/AccordionTitle.tsx +++ b/src/components/Accordion/AccordionTitle.tsx @@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' -import accordionTitleRules from './accordionTitleRules' +import accordionTitleStyles from '../../themes/teams/components/Accordion/accordionTitleStyles' /** * A standard AccordionTitle. @@ -45,7 +45,7 @@ class AccordionTitle extends UIComponent { static handledProps = ['as', 'active', 'children', 'className', 'content', 'index', 'onClick'] - static rules = accordionTitleRules + static styles = accordionTitleStyles handleClick = e => { _.invoke(this.props, 'onClick', e, this.props) diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index be0884d0f9..758545e36e 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -3,8 +3,8 @@ import * as React from 'react' import { Image, Label, Icon } from '../../' import { customPropTypes, UIComponent } from '../../lib' -import avatarRules from './avatarRules' -import avatarVariables from './avatarVariables' +import avatarStyles from '../../themes/teams/components/Avatar/avatarStyles' +import avatarVariables from '../../themes/teams/components/Avatar/avatarVariables' /** * An avatar is a graphic representation of user alongside with a presence icon. @@ -18,7 +18,7 @@ class Avatar extends UIComponent { static handledProps = ['alt', 'as', 'className', 'getInitials', 'name', 'size', 'src', 'status'] - static rules = avatarRules + static styles = avatarStyles static variables = avatarVariables diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 7bf704f37d..4f17b19650 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -2,8 +2,8 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { UIComponent, childrenExist, customPropTypes } from '../../lib' -import buttonRules from './buttonRules' -import buttonVariables from './buttonVariables' +import buttonStyles from '../../themes/teams/components/Button/buttonStyles' +import buttonVariables from '../../themes/teams/components/Button/buttonVariables' import Icon from '../Icon' import Text from '../Text' import { ButtonBehavior } from '../../lib/accessibility' @@ -18,7 +18,7 @@ class Button extends UIComponent { public static className = 'ui-button' - public static rules = buttonRules + public static styles = buttonStyles public static variables = buttonVariables diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index 9538cc7785..fbedabef36 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { childrenExist, customPropTypes, UIComponent } from '../../lib' -import chatRules from './chatRules' +import chatStyles from '../../themes/teams/components/Chat/chatStyles' import ChatMessage from './ChatMessage' class Chat extends UIComponent { @@ -27,7 +27,7 @@ class Chat extends UIComponent { static defaultProps = { as: 'ul' } - static rules = chatRules + static styles = chatStyles static Message = ChatMessage diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx index e64e6370b4..fafaee65d9 100644 --- a/src/components/Chat/ChatMessage.tsx +++ b/src/components/Chat/ChatMessage.tsx @@ -3,8 +3,8 @@ import * as PropTypes from 'prop-types' import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' -import chatMessageRules from './chatMessageRules' -import chatMessageVariables from './chatMessageVariables' +import chatMessageStyles from '../../themes/teams/components/Chat/chatMessageStyles' +import chatMessageVariables from '../../themes/teams/components/Chat/chatMessageVariables' class ChatMessage extends UIComponent { static className = 'ui-chat__message' @@ -35,7 +35,7 @@ class ChatMessage extends UIComponent { as: 'li', } - static rules = chatMessageRules + static styles = chatMessageStyles static variables = chatMessageVariables diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index 9c5d5caf11..f0bc88ec28 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -1,8 +1,8 @@ import * as React from 'react' import * as PropTypes from 'prop-types' -import dividerRules from './dividerRules' -import dividerVariables from './dividerVariables' +import dividerStyles from '../../themes/teams/components/Divider/dividerStyles' +import dividerVariables from '../../themes/teams/components/Divider/dividerVariables' import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' @@ -17,7 +17,7 @@ class Divider extends UIComponent { static className = 'ui-divider' - static rules = dividerRules + static styles = dividerStyles static variables = dividerVariables diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 550b4afe21..5ed89de58c 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -3,7 +3,7 @@ import * as React from 'react' import { childrenExist, customPropTypes, UIComponent } from '../../lib' import HeaderDescription from './HeaderDescription' -import headerRules from './headerRules' +import headerStyles from '../../themes/teams/components/Header/headerStyles' /** * A header provides a short summary of content @@ -42,7 +42,7 @@ class Header extends UIComponent { static handledProps = ['as', 'children', 'className', 'content', 'description', 'textAlign'] - static rules = headerRules + static styles = headerStyles static Description = HeaderDescription diff --git a/src/components/Header/HeaderDescription.tsx b/src/components/Header/HeaderDescription.tsx index 30337da245..4ea73b3f17 100644 --- a/src/components/Header/HeaderDescription.tsx +++ b/src/components/Header/HeaderDescription.tsx @@ -3,7 +3,7 @@ import * as React from 'react' import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' -import headerDescriptionRules from './headerDescriptionRules' +import headerDescriptionStyles from '../../themes/teams/components/Header/headerDescriptionStyles' /** * Headers may contain description. @@ -35,7 +35,7 @@ class HeaderDescription extends UIComponent { static handledProps = ['as', 'children', 'className', 'content'] - static rules = headerDescriptionRules + static styles = headerDescriptionStyles renderComponent({ ElementType, classes, rest }) { const { children, content } = this.props diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index a4084a4a83..09aa3cf881 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -2,8 +2,8 @@ import * as React from 'react' import * as PropTypes from 'prop-types' import { customPropTypes, UIComponent, createShorthandFactory } from '../../lib' -import iconRules from './iconRules' -import iconVariables from './iconVariables' +import iconStyles from '../../themes/teams/components/Icon/iconStyles' +import iconVariables from '../../themes/teams/components/Icon/iconVariables' import svgIcons from './svgIcons' export type IconXSpacing = 'none' | 'before' | 'after' | 'both' @@ -77,7 +77,7 @@ class Icon extends UIComponent { size: 'normal', } - static rules = iconRules + static styles = iconStyles renderFontIcon(ElementType, classes, rest): React.ReactNode { return diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx index 8bb7d4bd6c..0ef96ba97a 100644 --- a/src/components/Image/Image.tsx +++ b/src/components/Image/Image.tsx @@ -2,8 +2,8 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { customPropTypes, UIComponent } from '../../lib' -import imageRules from './imageRules' -import imageVariables from './imageVariables' +import imageStyles from '../../themes/teams/components/Image/imageStyles' +import imageVariables from '../../themes/teams/components/Image/imageVariables' import { ImageBehavior } from '../../lib/accessibility' /** @@ -14,7 +14,7 @@ class Image extends UIComponent { static displayName = 'Image' - static rules = imageRules + static styles = imageStyles static variables = imageVariables diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index ec1c58ce80..56754fb135 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -10,8 +10,8 @@ import { partitionHTMLProps, UIComponent, } from '../../lib' -import inputRules from './inputRules' -import inputVariables from './inputVariables' +import inputStyles from '../../themes/teams/components/Input/inputStyles' +import inputVariables from '../../themes/teams/components/Input/inputVariables' import Icon from '../Icon' import callable from '../../lib/callable' @@ -24,7 +24,7 @@ class Input extends UIComponent { static displayName = 'Input' - static rules = inputRules + static styles = inputStyles static variables = inputVariables static propTypes = { diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 231770095d..9883303b5f 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -5,8 +5,8 @@ import * as _ from 'lodash' import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' import { Icon } from '../..' -import labelRules from './labelRules' -import labelVariables from './labelVariables' +import labelStyles from '../../themes/teams/components/Label/labelStyles' +import labelVariables from '../../themes/teams/components/Label/labelVariables' import callable from '../../lib/callable' /** @@ -65,7 +65,7 @@ class Label extends UIComponent { as: 'label', } - static rules = labelRules + static styles = labelStyles static variables = labelVariables diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index a1fda2d32a..f8ef53ac78 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -3,14 +3,14 @@ import * as PropTypes from 'prop-types' import * as cx from 'classnames' import { customPropTypes, UIComponent } from '../../lib' -import layoutRules from './layoutRules' +import layoutStyles from '../../themes/teams/components/Layout/layoutStyles' class Layout extends UIComponent { static className = 'ui-layout' static displayName = 'Layout' - static rules = layoutRules + static styles = layoutStyles static propTypes = { as: customPropTypes.as, diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx index 50570c3081..a946582037 100644 --- a/src/components/List/List.tsx +++ b/src/components/List/List.tsx @@ -4,8 +4,7 @@ import * as PropTypes from 'prop-types' import { customPropTypes, UIComponent, childrenExist } from '../../lib' import ListItem from './ListItem' -import listRules from './listRules' -import listVariables from './listVariables' +import listStyles from '../../themes/teams/components/List/listStyles' import { ListBehavior } from '../../lib/accessibility' class List extends UIComponent { @@ -13,9 +12,7 @@ class List extends UIComponent { static className = 'ui-list' - static rules = listRules - - static variables = listVariables + static styles = listStyles static propTypes = { as: customPropTypes.as, diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 37c4c24de0..967bfdbaf1 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -4,8 +4,8 @@ import * as cx from 'classnames' import { createShorthandFactory, customPropTypes, pxToRem, UIComponent } from '../../lib' import Layout from '../Layout' -import listVariables from './listVariables' -import listItemRules from './listItemRules' +import listVariables from '../../themes/teams/components/List/listItemVariables' +import listItemStyles from '../../themes/teams/components/List/listItemStyles' import { ListItemBehavior } from '../../lib/accessibility' class ListItem extends UIComponent { @@ -15,7 +15,7 @@ class ListItem extends UIComponent { static className = 'ui-list__item' - static rules = listItemRules + static styles = listItemStyles static variables = listVariables diff --git a/src/components/List/listVariables.ts b/src/components/List/listVariables.ts deleted file mode 100644 index 62517e227b..0000000000 --- a/src/components/List/listVariables.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { pxToRem } from '../../lib' - -export default siteVars => { - const vars: any = {} - - // Item - vars.itemPaddingLeft = pxToRem(20) - vars.itemPaddingRight = pxToRem(18) - vars.columnGap = pxToRem(8) - - vars.itemHeight = pxToRem(48) - - // Header - // TODO: prod app uses 17.5px here, it should be 16px per the design guide! - vars.headerLineHeight = siteVars.lineHeightSmall - - // Header Media - vars.headerMediaColor = siteVars.mutedTextColor - vars.headerMediaFontSize = siteVars.fontSizeSmall - // TODO: prod app uses 17.5px here, it should be 16px per the design guide! - vars.headerMediaLineHeight = siteVars.lineHeightSmall - - // Content - vars.contentColor = siteVars.mutedTextColor - vars.contentFontSize = siteVars.fontSizeSmall - vars.contentLineHeight = siteVars.lineHeightSmall - - return vars -} diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index ed984c09bd..f43999890b 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -4,8 +4,8 @@ import * as React from 'react' import { AutoControlledComponent, childrenExist, customPropTypes } from '../../lib' import MenuItem from './MenuItem' -import menuRules from './menuRules' -import menuVariables from './menuVariables' +import menuStyles from '../../themes/teams/components/Menu/menuStyles' +import menuVariables from '../../themes/teams/components/Menu/menuVariables' import { MenuBehavior } from '../../lib/accessibility' class Menu extends AutoControlledComponent { @@ -72,7 +72,7 @@ class Menu extends AutoControlledComponent { static autoControlledProps = ['activeIndex'] - static rules = menuRules + static styles = menuStyles static Item = MenuItem diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 196f0dbf65..ddcfa63bba 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -4,8 +4,8 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' -import menuItemRules from './menuItemRules' -import menuVariables from './menuVariables' +import menuItemStyles from '../../themes/teams/components/Menu/menuItemStyles' +import menuVariables from '../../themes/teams/components/Menu/menuVariables' import { MenuItemBehavior } from '../../lib/accessibility' class MenuItem extends UIComponent { @@ -17,7 +17,7 @@ class MenuItem extends UIComponent { static create: Function - static rules = menuItemRules + static styles = menuItemStyles static propTypes = { /** A menu item can be active. */ diff --git a/src/components/Provider/Provider.tsx b/src/components/Provider/Provider.tsx index aefbc0a6b3..10aafd8a19 100644 --- a/src/components/Provider/Provider.tsx +++ b/src/components/Provider/Provider.tsx @@ -63,7 +63,7 @@ class Provider extends React.Component { renderObject(staticStyle(siteVariables)) } else { throw new Error( - `staticStyles array must contain CSS strings, style objects, or rule functions, got: ${typeof staticStyle}`, + `staticStyles array must contain CSS strings, style objects, or style functions, got: ${typeof staticStyle}`, ) } }) diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index d9dca10369..fe09948a15 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -2,8 +2,8 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { childrenExist, customPropTypes, UIComponent } from '../../lib' -import textRules from './textRules' -import textVariables from './textVariables' +import textStyles from '../../themes/teams/components/Text/textStyles' +import textVariables from '../../themes/teams/components/Text/textVariables' /** * A component containing text @@ -64,7 +64,7 @@ class Text extends UIComponent { 'truncated', ] - static rules = textRules + static styles = textStyles static variables = textVariables diff --git a/src/components/Text/textRules.ts b/src/components/Text/textRules.ts deleted file mode 100644 index d9ba970dc9..0000000000 --- a/src/components/Text/textRules.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { - atMentionTextColor, - disabledTextColor, - errorTextColor, - successTextColor, - timestampTextColor, - textExtraSmallFontSize, - textExtraSmallLineHeight, - textSmallFontSize, - textSmallLineHeight, - textMediumFontSize, - textMediumLineHeight, - textLargeFontSize, - textLargeLineHeight, - textExtraLargeFontSize, - textExtraLargeLineHeight, - textX2FontSize, - textX2LineHeight, - textX3FontSize, - textX3LineHeight, - textX4FontSize, - textX4LineHeight, -} from '../../themes/teams/siteVariables' - -import { Sizes } from '../../lib/enums' -import { truncateStyle } from '../../styles/customCSS' -import { ITextVariables } from './textVariables' - -export interface TextRulesParams { - props: any - variables: ITextVariables -} - -export default { - root: ({ - props: { atMention, disabled, error, size, important, success, timestamp, truncated }, - variables: v, - }: TextRulesParams) => ({ - ...(truncated && truncateStyle), - ...(atMention && { color: atMentionTextColor }), - ...(disabled && { color: disabledTextColor }), - ...(error && { color: errorTextColor }), - ...(success && { color: successTextColor }), - ...(timestamp && { color: timestampTextColor }), - ...(important && { fontWeight: v.importantWeight }), - ...(size === Sizes.ExtraSmall && { - fontSize: textExtraSmallFontSize, - lineHeight: textExtraSmallLineHeight, - }), - ...(size === Sizes.Small && { - fontSize: textSmallFontSize, - lineHeight: textSmallLineHeight, - }), - ...(size === Sizes.Medium && { - fontSize: textMediumFontSize, - lineHeight: textMediumLineHeight, - }), - ...(size === Sizes.Large && { - fontSize: textLargeFontSize, - lineHeight: textLargeLineHeight, - }), - ...(size === Sizes.ExtraLarge && { - fontSize: textExtraLargeFontSize, - lineHeight: textExtraLargeLineHeight, - }), - ...(size === Sizes['2x'] && { - fontSize: textX2FontSize, - lineHeight: textX2LineHeight, - }), - ...(size === Sizes['3x'] && { - fontSize: textX3FontSize, - lineHeight: textX3LineHeight, - }), - ...(size === Sizes['4x'] && { - fontSize: textX4FontSize, - lineHeight: textX4LineHeight, - }), - }), -} diff --git a/src/components/Text/textVariables.ts b/src/components/Text/textVariables.ts deleted file mode 100644 index 69c3884fff..0000000000 --- a/src/components/Text/textVariables.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface ITextVariables { - importantWeight: number -} - -export default (): ITextVariables => { - return { - importantWeight: 600, - } -} diff --git a/src/lib/SUI.tsx b/src/lib/SUI.tsx index 0d9c4b7415..370f1f0f5c 100644 --- a/src/lib/SUI.tsx +++ b/src/lib/SUI.tsx @@ -2114,7 +2114,7 @@ export const ICONS_AND_ALIASES = _.uniq([...ICONS, ...ICON_ALIASES]) // Some icon names are not part of icons.css. // These are only valid as children of other components. -// Their CSS rules are defined by a specific component's CSS. +// Their CSS styles are defined by a specific component's CSS. // We don't want to show name warnings for those usages so we add them as valid names here. export const COMPONENT_CONTEXT_SPECIFIC_ICONS = [ 'left dropdown', // nested dropdown menu direction icon diff --git a/src/lib/UIComponent.tsx b/src/lib/UIComponent.tsx index 4eae456f25..b748854ce5 100644 --- a/src/lib/UIComponent.tsx +++ b/src/lib/UIComponent.tsx @@ -7,7 +7,7 @@ class UIComponent extends React.Component { static displayName: string static className: string static variables?: any - static rules?: any + static styles?: any static handledProps: any constructor(props, context) { @@ -37,7 +37,7 @@ class UIComponent extends React.Component { handledProps: this.childClass.handledProps, props: this.props, state: this.state, - rules: this.childClass.rules, + styles: this.childClass.styles, variables: this.childClass.variables, }, this.renderComponent, diff --git a/src/lib/getClasses.tsx b/src/lib/getClasses.tsx index 85d7b98bb6..ecff8f03d1 100644 --- a/src/lib/getClasses.tsx +++ b/src/lib/getClasses.tsx @@ -3,7 +3,7 @@ export interface IClasses { } /** - * @param rules + * @param styles * @param props * @param variables * @param theme @@ -12,20 +12,20 @@ export interface IClasses { const getClasses = ( renderer, props, - rules, + styles, variables: any = () => {}, theme: any = {}, ): IClasses => { const { renderRule } = renderer - const ruleProps = { + const styleProps = { props, theme, variables: variables(theme.siteVariables), rtl: theme.rtl, } - return Object.keys(rules).reduce((acc, ruleName) => { - acc[ruleName] = renderRule(rules[ruleName], ruleProps) + return Object.keys(styles).reduce((acc, styleName) => { + acc[styleName] = renderRule(styles[styleName], styleProps) return acc }, {}) diff --git a/src/lib/renderComponent.tsx b/src/lib/renderComponent.tsx index 54b8560091..713c688459 100644 --- a/src/lib/renderComponent.tsx +++ b/src/lib/renderComponent.tsx @@ -25,7 +25,7 @@ export interface IRenderConfig { handledProps: string[] props: { [key: string]: any } state: { [key: string]: any } - rules?: { [key: string]: Function } + styles?: { [key: string]: Function } variables?: (siteVariables: object) => object } @@ -47,7 +47,7 @@ const renderComponent =

( displayName, handledProps, props, - rules, + styles, state, variables, } = config @@ -66,7 +66,7 @@ const renderComponent =

( const mergedVariables = () => Object.assign({}, variablesFromFile, variablesFromTheme, variablesFromProp) - const classes = getClasses(renderer, props, rules, mergedVariables, theme) + const classes = getClasses(renderer, props, styles, mergedVariables, theme) classes.root = cx(className, classes.root, props.className) const accessibility = getAccessibility(props, state) diff --git a/src/styles/debugRules.ts b/src/styles/debugStyles.ts similarity index 81% rename from src/styles/debugRules.ts rename to src/styles/debugStyles.ts index f78e8ed9bb..0f65aad5b7 100644 --- a/src/styles/debugRules.ts +++ b/src/styles/debugStyles.ts @@ -1,4 +1,4 @@ -const debugRule = ({ name, color, style }) => ({ +const debugStyle = ({ name, color, style }) => ({ position: 'relative', border: `2px ${style} ${color}`, '::before': { @@ -17,13 +17,13 @@ const debugRule = ({ name, color, style }) => ({ }) export const debugRoot = () => ({ - ...debugRule({ name: 'LAYOUT', color: 'cornflowerblue', style: 'solid' }), + ...debugStyle({ name: 'LAYOUT', color: 'cornflowerblue', style: 'solid' }), padding: '8px', margin: '2px', }) export const debugArea = () => ({ - ...debugRule({ name: 'AREA', color: 'lightsalmon', style: 'dashed' }), + ...debugStyle({ name: 'AREA', color: 'lightsalmon', style: 'dashed' }), padding: '8px', margin: '2px', }) diff --git a/src/components/Accordion/accordionContentRules.ts b/src/themes/teams/components/Accordion/accordionContentStyles.ts similarity index 65% rename from src/components/Accordion/accordionContentRules.ts rename to src/themes/teams/components/Accordion/accordionContentStyles.ts index a8b1867900..117c131d80 100644 --- a/src/components/Accordion/accordionContentRules.ts +++ b/src/themes/teams/components/Accordion/accordionContentStyles.ts @@ -1,4 +1,4 @@ -const accordionContentRules = { +const accordionContentStyles = { root: ({ props }) => ({ display: 'none', verticalAlign: 'middle', @@ -6,4 +6,4 @@ const accordionContentRules = { }), } -export default accordionContentRules +export default accordionContentStyles diff --git a/src/components/Accordion/accordionContentVariables.ts b/src/themes/teams/components/Accordion/accordionContentVariables.ts similarity index 100% rename from src/components/Accordion/accordionContentVariables.ts rename to src/themes/teams/components/Accordion/accordionContentVariables.ts diff --git a/src/components/Accordion/accordionRules.ts b/src/themes/teams/components/Accordion/accordionStyles.ts similarity index 64% rename from src/components/Accordion/accordionRules.ts rename to src/themes/teams/components/Accordion/accordionStyles.ts index 91d7a910cf..e2b84fd3c4 100644 --- a/src/components/Accordion/accordionRules.ts +++ b/src/themes/teams/components/Accordion/accordionStyles.ts @@ -1,4 +1,4 @@ -const accordionRules = { +const accordionStyles = { root: () => ({ verticalAlign: 'middle', display: 'flex', @@ -6,4 +6,4 @@ const accordionRules = { }), } -export default accordionRules +export default accordionStyles diff --git a/src/components/Accordion/accordionTitleRules.ts b/src/themes/teams/components/Accordion/accordionTitleStyles.ts similarity index 66% rename from src/components/Accordion/accordionTitleRules.ts rename to src/themes/teams/components/Accordion/accordionTitleStyles.ts index 84a2b5d1ba..238752dc1c 100644 --- a/src/components/Accordion/accordionTitleRules.ts +++ b/src/themes/teams/components/Accordion/accordionTitleStyles.ts @@ -1,4 +1,4 @@ -const accordionTitleRules = { +const accordionTitleStyles = { root: () => ({ display: 'inline-block', verticalAlign: 'middle', @@ -7,4 +7,4 @@ const accordionTitleRules = { }), } -export default accordionTitleRules +export default accordionTitleStyles diff --git a/src/components/Avatar/avatarRules.ts b/src/themes/teams/components/Avatar/avatarStyles.ts similarity index 98% rename from src/components/Avatar/avatarRules.ts rename to src/themes/teams/components/Avatar/avatarStyles.ts index aa9e92b975..127fd2c208 100644 --- a/src/components/Avatar/avatarRules.ts +++ b/src/themes/teams/components/Avatar/avatarStyles.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../lib' +import { pxToRem } from '../../../../lib' import { PositionProperty } from 'csstype' const getAvatarDimension = (size: number) => { diff --git a/src/components/Avatar/avatarVariables.tsx b/src/themes/teams/components/Avatar/avatarVariables.ts similarity index 100% rename from src/components/Avatar/avatarVariables.tsx rename to src/themes/teams/components/Avatar/avatarVariables.ts diff --git a/src/components/Button/buttonRules.ts b/src/themes/teams/components/Button/buttonStyles.ts similarity index 93% rename from src/components/Button/buttonRules.ts rename to src/themes/teams/components/Button/buttonStyles.ts index b10a078c8e..32644d38a1 100644 --- a/src/components/Button/buttonRules.ts +++ b/src/themes/teams/components/Button/buttonStyles.ts @@ -1,5 +1,5 @@ -import { pxToRem } from '../../lib' -import { disabledStyle, truncateStyle } from '../../styles/customCSS' +import { pxToRem } from '../../../../lib' +import { disabledStyle, truncateStyle } from '../../../../styles/customCSS' import { IButtonVariables } from './buttonVariables' export default { @@ -26,7 +26,7 @@ export default { typeSecondaryBorderColor, } = variables - const rules = { + const styles = { height, minWidth, maxWidth, @@ -66,13 +66,13 @@ export default { if (disabled) { return { - ...rules, + ...styles, ...disabledStyle, } } return { - ...rules, + ...styles, borderWidth: `${secondary ? (circular ? 1 : 2) : 0}px`, cursor: 'pointer', diff --git a/src/components/Button/buttonVariables.ts b/src/themes/teams/components/Button/buttonVariables.ts similarity index 96% rename from src/components/Button/buttonVariables.ts rename to src/themes/teams/components/Button/buttonVariables.ts index 3676345504..a5df1c878c 100644 --- a/src/components/Button/buttonVariables.ts +++ b/src/themes/teams/components/Button/buttonVariables.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../lib' +import { pxToRem } from '../../../../lib' export interface IButtonVariables { height: string diff --git a/src/components/Chat/chatMessageRules.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts similarity index 87% rename from src/components/Chat/chatMessageRules.ts rename to src/themes/teams/components/Chat/chatMessageStyles.ts index 200ef31998..99a4932102 100644 --- a/src/components/Chat/chatMessageRules.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -1,4 +1,4 @@ -const chatMessageRules = { +const chatMessageStyles = { root: ({ props, variables }) => ({ position: 'relative', padding: '1rem', @@ -18,4 +18,4 @@ const chatMessageRules = { }), } -export default chatMessageRules +export default chatMessageStyles diff --git a/src/components/Chat/chatMessageVariables.ts b/src/themes/teams/components/Chat/chatMessageVariables.ts similarity index 100% rename from src/components/Chat/chatMessageVariables.ts rename to src/themes/teams/components/Chat/chatMessageVariables.ts diff --git a/src/components/Chat/chatRules.ts b/src/themes/teams/components/Chat/chatStyles.ts similarity index 73% rename from src/components/Chat/chatRules.ts rename to src/themes/teams/components/Chat/chatStyles.ts index 35cb4467f5..93bf42871f 100644 --- a/src/components/Chat/chatRules.ts +++ b/src/themes/teams/components/Chat/chatStyles.ts @@ -1,4 +1,4 @@ -const chatRules = { +const chatStyles = { root: () => ({ display: 'flex', flexDirection: 'column', @@ -8,4 +8,4 @@ const chatRules = { }), } -export default chatRules +export default chatStyles diff --git a/src/components/Divider/dividerRules.ts b/src/themes/teams/components/Divider/dividerStyles.ts similarity index 70% rename from src/components/Divider/dividerRules.ts rename to src/themes/teams/components/Divider/dividerStyles.ts index 6b04d42cc1..48ca53257c 100644 --- a/src/components/Divider/dividerRules.ts +++ b/src/themes/teams/components/Divider/dividerStyles.ts @@ -1,6 +1,6 @@ -import { childrenExist, pxToRem } from '../../lib' +import { childrenExist, pxToRem } from '../../../../lib' -const dividerBorderRule = (size, color) => ({ +const dividerBorderStyle = (size, color) => ({ height: `${size + 1}px`, background: color, }) @@ -8,12 +8,12 @@ const dividerBorderRule = (size, color) => ({ const beforeAndAfter = (size, type, variables) => ({ content: '""', flex: 1, - ...dividerBorderRule(size, variables.defaultBackgroundColor), // the default border rule + ...dividerBorderStyle(size, variables.defaultBackgroundColor), // the default border style ...(type === 'primary' && { - ...dividerBorderRule(size, variables.typePrimaryBackgroundColor), + ...dividerBorderStyle(size, variables.typePrimaryBackgroundColor), }), ...(type === 'secondary' && { - ...dividerBorderRule(size, variables.typeSecondaryBackgroundColor), + ...dividerBorderStyle(size, variables.typeSecondaryBackgroundColor), }), }) @@ -51,12 +51,12 @@ export default { }), } : { - ...dividerBorderRule(size, variables.typeSecondaryBackgroundColor), // the default border rule + ...dividerBorderStyle(size, variables.typeSecondaryBackgroundColor), // the default border style ...(type === 'primary' && { - ...dividerBorderRule(size, variables.typePrimaryBackgroundColor), + ...dividerBorderStyle(size, variables.typePrimaryBackgroundColor), }), ...(type === 'secondary' && { - ...dividerBorderRule(size, variables.defaultBackgroundColor), + ...dividerBorderStyle(size, variables.defaultBackgroundColor), }), }), } diff --git a/src/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts similarity index 100% rename from src/components/Divider/dividerVariables.ts rename to src/themes/teams/components/Divider/dividerVariables.ts diff --git a/src/components/Header/headerDescriptionRules.ts b/src/themes/teams/components/Header/headerDescriptionStyles.ts similarity index 77% rename from src/components/Header/headerDescriptionRules.ts rename to src/themes/teams/components/Header/headerDescriptionStyles.ts index 3987c8b9db..c4cabe9a78 100644 --- a/src/components/Header/headerDescriptionRules.ts +++ b/src/themes/teams/components/Header/headerDescriptionStyles.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../lib' +import { pxToRem } from '../../../../lib' export default { root: () => ({ diff --git a/src/components/Header/headerRules.ts b/src/themes/teams/components/Header/headerStyles.ts similarity index 100% rename from src/components/Header/headerRules.ts rename to src/themes/teams/components/Header/headerStyles.ts diff --git a/src/components/Icon/fontAwesomeIconRules.ts b/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts similarity index 93% rename from src/components/Icon/fontAwesomeIconRules.ts rename to src/themes/teams/components/Icon/fontAwesomeIconStyles.ts index afbf2618f8..509fa76378 100644 --- a/src/components/Icon/fontAwesomeIconRules.ts +++ b/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts @@ -37,5 +37,5 @@ export default name => { } /** - * TODO We should probably declare a @fontface rule here + * TODO We should probably declare a @fontface style here */ diff --git a/src/components/Icon/iconRules.ts b/src/themes/teams/components/Icon/iconStyles.ts similarity index 90% rename from src/components/Icon/iconRules.ts rename to src/themes/teams/components/Icon/iconStyles.ts index bdc82f648f..b581719dd2 100644 --- a/src/components/Icon/iconRules.ts +++ b/src/themes/teams/components/Icon/iconStyles.ts @@ -1,10 +1,10 @@ -import fontAwesomeIcons from './fontAwesomeIconRules' -import { disabledStyle, fittedStyle } from '../../styles/customCSS' -import { IconXSpacing } from './Icon' +import fontAwesomeIcons from './fontAwesomeIconStyles' +import { disabledStyle, fittedStyle } from '../../../../styles/customCSS' +import { IconXSpacing } from '../../../../components/Icon/Icon' import { IconVariables } from './iconVariables' import * as React from 'react' -export interface IconRulesParams { +export interface IconStylesParams { props: any variables: IconVariables } @@ -95,11 +95,11 @@ const getPaddedStyle = isFontBased => ({ height: '2em', }) -const iconRules = { +const iconStyles = { root: ({ props: { disabled, font, svg, name, size, bordered, circular, xSpacing }, variables: v, - }: IconRulesParams) => { + }: IconStylesParams) => { const isFontBased = !svg return { @@ -141,4 +141,4 @@ const iconRules = { }), } -export default iconRules +export default iconStyles diff --git a/src/components/Icon/iconVariables.ts b/src/themes/teams/components/Icon/iconVariables.ts similarity index 88% rename from src/components/Icon/iconVariables.ts rename to src/themes/teams/components/Icon/iconVariables.ts index 4cd36436bd..a00e079966 100644 --- a/src/components/Icon/iconVariables.ts +++ b/src/themes/teams/components/Icon/iconVariables.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../lib' +import { pxToRem } from '../../../../lib' export interface IconVariables { color: string diff --git a/src/components/Image/imageRules.tsx b/src/themes/teams/components/Image/imageStyles.ts similarity index 90% rename from src/components/Image/imageRules.tsx rename to src/themes/teams/components/Image/imageStyles.ts index 55d5755a68..ada74b63f4 100644 --- a/src/components/Image/imageRules.tsx +++ b/src/themes/teams/components/Image/imageStyles.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../lib' +import { pxToRem } from '../../../../lib' export default { root: ({ props, variables }) => ({ diff --git a/src/components/Image/imageVariables.ts b/src/themes/teams/components/Image/imageVariables.ts similarity index 75% rename from src/components/Image/imageVariables.ts rename to src/themes/teams/components/Image/imageVariables.ts index 3410852726..97584be1a3 100644 --- a/src/components/Image/imageVariables.ts +++ b/src/themes/teams/components/Image/imageVariables.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../lib' +import { pxToRem } from '../../../../lib' export default () => ({ width: undefined, diff --git a/src/components/Input/inputRules.ts b/src/themes/teams/components/Input/inputStyles.ts similarity index 94% rename from src/components/Input/inputRules.ts rename to src/themes/teams/components/Input/inputStyles.ts index b2e279c046..ca315f5935 100644 --- a/src/components/Input/inputRules.ts +++ b/src/themes/teams/components/Input/inputStyles.ts @@ -1,4 +1,4 @@ -const inputRules = { +const inputStyles = { root: ({ props, variables }) => { return { display: 'inline-flex', @@ -36,4 +36,4 @@ const inputRules = { }, } -export default inputRules +export default inputStyles diff --git a/src/components/Input/inputVariables.ts b/src/themes/teams/components/Input/inputVariables.ts similarity index 93% rename from src/components/Input/inputVariables.ts rename to src/themes/teams/components/Input/inputVariables.ts index 75d23a3c53..1c9c10b05f 100644 --- a/src/components/Input/inputVariables.ts +++ b/src/themes/teams/components/Input/inputVariables.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../lib' +import { pxToRem } from '../../../../lib' export default (siteVars: any) => { const vars: any = {} diff --git a/src/components/Label/labelRules.ts b/src/themes/teams/components/Label/labelStyles.ts similarity index 92% rename from src/components/Label/labelRules.ts rename to src/themes/teams/components/Label/labelStyles.ts index 0f451a9cb5..0a7689ce86 100644 --- a/src/components/Label/labelRules.ts +++ b/src/themes/teams/components/Label/labelStyles.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../lib' +import { pxToRem } from '../../../../lib' export default { root: ({ props, variables }) => ({ diff --git a/src/components/Label/labelVariables.ts b/src/themes/teams/components/Label/labelVariables.ts similarity index 81% rename from src/components/Label/labelVariables.ts rename to src/themes/teams/components/Label/labelVariables.ts index f590cd856d..69302b6995 100644 --- a/src/components/Label/labelVariables.ts +++ b/src/themes/teams/components/Label/labelVariables.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../lib' +import { pxToRem } from '../../../../lib' export default () => { const vars: any = {} diff --git a/src/components/Layout/layoutRules.ts b/src/themes/teams/components/Layout/layoutStyles.ts similarity index 81% rename from src/components/Layout/layoutRules.ts rename to src/themes/teams/components/Layout/layoutStyles.ts index 66aae27dee..9d1d307102 100644 --- a/src/components/Layout/layoutRules.ts +++ b/src/themes/teams/components/Layout/layoutStyles.ts @@ -1,12 +1,12 @@ -import { debugRoot, debugArea, debugGap } from '../../styles/debugRules' +import { debugRoot, debugArea, debugGap } from '../../../../styles/debugStyles' -const truncateRule = { +const truncateStyle = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', } -const layoutRules = { +const layoutStyles = { root: ({ props }) => { const { alignItems, @@ -52,21 +52,21 @@ const layoutRules = { start: ({ props }) => ({ ...(props.debug && debugArea()), - ...(props.truncateStart && truncateRule), + ...(props.truncateStart && truncateStyle), ...props.startCSS, }), main: ({ props }) => ({ ...(props.debug && debugArea()), - ...(props.truncateMain && truncateRule), + ...(props.truncateMain && truncateStyle), ...props.mainCSS, }), end: ({ props }) => ({ ...(props.debug && debugArea()), - ...(props.truncateEnd && truncateRule), + ...(props.truncateEnd && truncateStyle), ...props.endCSS, }), } -export default layoutRules +export default layoutStyles diff --git a/src/components/List/listItemRules.ts b/src/themes/teams/components/List/listItemStyles.ts similarity index 79% rename from src/components/List/listItemRules.ts rename to src/themes/teams/components/List/listItemStyles.ts index 1b6f936b97..9bdf8d50d6 100644 --- a/src/components/List/listItemRules.ts +++ b/src/themes/teams/components/List/listItemStyles.ts @@ -1,14 +1,14 @@ -import { pxToRem } from '../../lib' -import { debugRoot } from '../../styles/debugRules' +import { pxToRem } from '../../../../lib' +import { debugRoot } from '../../../../styles/debugStyles' -const listItemRules = { +const listItemStyles = { root: ({ props, variables }) => { const { debugLayout, important, selection } = props return { ...(debugLayout && debugRoot()), - gridTemplateRows: `minmax(${variables.itemHeight}, max-content)`, - paddingLeft: variables.itemPaddingLeft, - paddingRight: variables.itemPaddingRight, + gridTemplateRows: `minmax(${variables.height}, max-content)`, + paddingLeft: variables.paddingLeft, + paddingRight: variables.paddingRight, ...(important && { fontWeight: 'bold', @@ -60,4 +60,4 @@ const listItemRules = { contentMedia: () => ({}), } -export default listItemRules +export default listItemStyles diff --git a/src/themes/teams/components/List/listItemVariables.ts b/src/themes/teams/components/List/listItemVariables.ts new file mode 100644 index 0000000000..8fb793e181 --- /dev/null +++ b/src/themes/teams/components/List/listItemVariables.ts @@ -0,0 +1,24 @@ +import { pxToRem } from '../../../../lib' + +export default siteVars => ({ + paddingLeft: pxToRem(20), + paddingRight: pxToRem(18), + columnGap: pxToRem(8), + + height: pxToRem(48), + + // Header + // TODO: prod app uses 17.5px here, it should be 16px per the design guide! + headerLineHeight: siteVars.lineHeightSmall, + + // Header Media + headerMediaColor: siteVars.mutedTextColor, + headerMediaFontSize: siteVars.fontSizeSmall, + // TODO: prod app uses 17.5px here, it should be 16px per the design guide! + headerMediaLineHeight: siteVars.lineHeightSmall, + + // Content + contentColor: siteVars.mutedTextColor, + contentFontSize: siteVars.fontSizeSmall, + contentLineHeight: siteVars.lineHeightSmall, +}) diff --git a/src/components/List/listRules.ts b/src/themes/teams/components/List/listStyles.ts similarity index 77% rename from src/components/List/listRules.ts rename to src/themes/teams/components/List/listStyles.ts index 5938a42028..c6f03c359a 100644 --- a/src/components/List/listRules.ts +++ b/src/themes/teams/components/List/listStyles.ts @@ -1,10 +1,10 @@ -import { debugRoot } from '../../styles/debugRules' +import { debugRoot } from '../../../../styles/debugStyles' // ---------------------------------------- // Root // ---------------------------------------- -const listRules = { +const listStyles = { root: ({ props }) => { const { as, debugLayout } = props return { @@ -19,4 +19,4 @@ const listRules = { }, } -export default listRules +export default listStyles diff --git a/src/components/Menu/menuItemRules.ts b/src/themes/teams/components/Menu/menuItemStyles.ts similarity index 99% rename from src/components/Menu/menuItemRules.ts rename to src/themes/teams/components/Menu/menuItemStyles.ts index b764669cb0..c18884ac17 100644 --- a/src/components/Menu/menuItemRules.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../lib' +import { pxToRem } from '../../../../lib' const underlinedItem = (color: string) => ({ borderBottom: `solid 4px ${color}`, diff --git a/src/components/Menu/menuRules.ts b/src/themes/teams/components/Menu/menuStyles.ts similarity index 95% rename from src/components/Menu/menuRules.ts rename to src/themes/teams/components/Menu/menuStyles.ts index a1c9345a60..593670892b 100644 --- a/src/components/Menu/menuRules.ts +++ b/src/themes/teams/components/Menu/menuStyles.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../lib' +import { pxToRem } from '../../../../lib' const solidBorder = (color: string) => ({ border: `1px solid ${color}`, diff --git a/src/components/Menu/menuVariables.ts b/src/themes/teams/components/Menu/menuVariables.ts similarity index 100% rename from src/components/Menu/menuVariables.ts rename to src/themes/teams/components/Menu/menuVariables.ts diff --git a/src/themes/teams/components/Text/textStyles.ts b/src/themes/teams/components/Text/textStyles.ts new file mode 100644 index 0000000000..a78fc5d8b6 --- /dev/null +++ b/src/themes/teams/components/Text/textStyles.ts @@ -0,0 +1,57 @@ +import { Sizes } from '../../../../lib/enums' +import { truncateStyle } from '../../../../styles/customCSS' +import { ITextVariables } from './textVariables' + +export interface TextStylesParams { + props: any + variables: ITextVariables +} + +export default { + root: ({ + props: { atMention, disabled, error, size, important, success, timestamp, truncated }, + variables: v, + }: TextStylesParams) => { + return { + ...(truncated && truncateStyle), + ...(atMention && { color: v.atMentionTextColor }), + ...(disabled && { color: v.disabledTextColor }), + ...(error && { color: v.errorTextColor }), + ...(success && { color: v.successTextColor }), + ...(timestamp && { color: v.timestampTextColor }), + ...(important && { fontWeight: v.importantWeight }), + ...(size === Sizes.ExtraSmall && { + fontSize: v.textExtraSmallFontSize, + lineHeight: v.textExtraSmallLineHeight, + }), + ...(size === Sizes.Small && { + fontSize: v.textSmallFontSize, + lineHeight: v.textSmallLineHeight, + }), + ...(size === Sizes.Medium && { + fontSize: v.textMediumFontSize, + lineHeight: v.textMediumLineHeight, + }), + ...(size === Sizes.Large && { + fontSize: v.textLargeFontSize, + lineHeight: v.textLargeLineHeight, + }), + ...(size === Sizes.ExtraLarge && { + fontSize: v.textExtraLargeFontSize, + lineHeight: v.textExtraLargeLineHeight, + }), + ...(size === Sizes['2x'] && { + fontSize: v.textX2FontSize, + lineHeight: v.textX2LineHeight, + }), + ...(size === Sizes['3x'] && { + fontSize: v.textX3FontSize, + lineHeight: v.textX3LineHeight, + }), + ...(size === Sizes['4x'] && { + fontSize: v.textX4FontSize, + lineHeight: v.textX4LineHeight, + }), + } + }, +} diff --git a/src/themes/teams/components/Text/textVariables.ts b/src/themes/teams/components/Text/textVariables.ts new file mode 100644 index 0000000000..b1b0b29bb7 --- /dev/null +++ b/src/themes/teams/components/Text/textVariables.ts @@ -0,0 +1,51 @@ +export interface ITextVariables { + importantWeight: number + atMentionTextColor: string + disabledTextColor: string + errorTextColor: string + successTextColor: string + timestampTextColor: string + textExtraSmallFontSize: string + textExtraSmallLineHeight: string + textSmallFontSize: string + textSmallLineHeight: string + textMediumFontSize: string + textMediumLineHeight: string + textLargeFontSize: string + textLargeLineHeight: string + textExtraLargeFontSize: string + textExtraLargeLineHeight: string + textX2FontSize: string + textX2LineHeight: string + textX3FontSize: string + textX3LineHeight: string + textX4FontSize: string + textX4LineHeight: string +} + +export default (siteVariables): ITextVariables => { + return { + atMentionTextColor: siteVariables.atMentionTextColor, + disabledTextColor: siteVariables.disabledTextColor, + errorTextColor: siteVariables.errorTextColor, + successTextColor: siteVariables.successTextColor, + timestampTextColor: siteVariables.timestampTextColor, + textExtraSmallFontSize: siteVariables.textExtraSmallFontSize, + textExtraSmallLineHeight: siteVariables.textExtraSmallLineHeight, + textSmallFontSize: siteVariables.textSmallFontSize, + textSmallLineHeight: siteVariables.textSmallLineHeight, + textMediumFontSize: siteVariables.textMediumFontSize, + textMediumLineHeight: siteVariables.textMediumLineHeight, + textLargeFontSize: siteVariables.textLargeFontSize, + textLargeLineHeight: siteVariables.textLargeLineHeight, + textExtraLargeFontSize: siteVariables.textExtraLargeFontSize, + textExtraLargeLineHeight: siteVariables.textExtraLargeLineHeight, + textX2FontSize: siteVariables.textX2FontSize, + textX2LineHeight: siteVariables.textX2LineHeight, + textX3FontSize: siteVariables.textX3FontSize, + textX3LineHeight: siteVariables.textX3LineHeight, + textX4FontSize: siteVariables.textX4FontSize, + textX4LineHeight: siteVariables.textX4LineHeight, + importantWeight: 600, + } +} diff --git a/src/themes/teams/normalizeCSS.tsx b/src/themes/teams/normalizeCSS.tsx index f51fa7877c..5173dd5f68 100644 --- a/src/themes/teams/normalizeCSS.tsx +++ b/src/themes/teams/normalizeCSS.tsx @@ -208,7 +208,7 @@ button::-moz-focus-inner, } /** - * Restore the focus styles unset by the previous rule. + * Restore the focus styles unset by the previous style. */ button:-moz-focusring,