diff --git a/CHANGELOG.md b/CHANGELOG.md index 89f3dc0561..68bbce667f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### BREAKING CHANGES +- Remove base theme and move everything to teams theme @mnajdova ([#1908](https://github.com/stardust-ui/react/pull/1908)) + ### Fixes - Fix `Menu` and `Submenu` to use correct indicator icon and have correct width behavior [redlines] @bcalvery ([#1831](https://github.com/stardust-ui/react/pull/1831)) - Fix order of applying unhandled props and key handlers @jurokapsiar ([#1901](https://github.com/stardust-ui/react/pull/1901)) diff --git a/docs/src/examples/components/Checkbox/Types/CheckboxExample.shorthand.steps.ts b/docs/src/examples/components/Checkbox/Types/CheckboxExample.shorthand.steps.ts index 18003762d8..77c373508a 100644 --- a/docs/src/examples/components/Checkbox/Types/CheckboxExample.shorthand.steps.ts +++ b/docs/src/examples/components/Checkbox/Types/CheckboxExample.shorthand.steps.ts @@ -1,7 +1,6 @@ import getScreenerSteps from '../commonScreenerSteps' export const config: ScreenerTestsConfig = { - themes: ['base', 'teams'], steps: getScreenerSteps(), } diff --git a/docs/src/examples/components/Checkbox/Types/CheckboxExampleToggle.shorthand.steps.ts b/docs/src/examples/components/Checkbox/Types/CheckboxExampleToggle.shorthand.steps.ts index 18003762d8..77c373508a 100644 --- a/docs/src/examples/components/Checkbox/Types/CheckboxExampleToggle.shorthand.steps.ts +++ b/docs/src/examples/components/Checkbox/Types/CheckboxExampleToggle.shorthand.steps.ts @@ -1,7 +1,6 @@ import getScreenerSteps from '../commonScreenerSteps' export const config: ScreenerTestsConfig = { - themes: ['base', 'teams'], steps: getScreenerSteps(), } diff --git a/packages/react/src/themes/base/colors.ts b/packages/react/src/themes/base/colors.ts deleted file mode 100644 index ab3a32246e..0000000000 --- a/packages/react/src/themes/base/colors.ts +++ /dev/null @@ -1,193 +0,0 @@ -import * as _ from 'lodash' - -import { - ColorPalette, - ContextualColors, - EmphasisColors, - NaturalColors, - ColorSchemeMapping, -} from '../types' - -export const naturalColors: NaturalColors = { - blue: { - 50: '#E5F2FF', - 100: '#CCE5FF', - 200: '#99CCFF', - 300: '#66B2FF', - 400: '#3399FF', - 500: '#0a84ff', - 600: '#0066CC', - 700: '#004C99', - 800: '#003366', - 900: '#001933', - }, - green: { - 50: '#EBFEE7', - 100: '#D6FDCE', - 200: '#ADFA9E', - 300: '#84F86D', - 400: '#5CF63C', - 500: '#30e60b', - 600: '#29C309', - 700: '#1E9207', - 800: '#146105', - 900: '#0A3102', - }, - grey: { - 50: '#F2F2F2', - 100: '#E6E6E6', - 200: '#CCCCCC', - 300: '#B3B3B3', - 400: '#999999', - 500: '#737373', - 600: '#666666', - 700: '#4D4D4D', - 800: '#333333', - 900: '#1A1A1A', - }, - orange: { - 50: '#FFF4E5', - 100: '#FFEACC', - 200: '#FFD499', - 300: '#FFBF66', - 400: '#FFA933', - 500: '#ff9400', - 600: '#CC7600', - 700: '#995900', - 800: '#663B00', - 900: '#331E00', - }, - pink: { - 50: '#FFE5FB', - 100: '#FFCCF7', - 200: '#FF99EE', - 300: '#FF66E6', - 400: '#FF33DD', - 500: '#ff1ad9', - 600: '#CC00AA', - 700: '#990080', - 800: '#660055', - 900: '#33002B', - }, - purple: { - 50: '#F4E5FF', - 100: '#EACCFF', - 200: '#D499FF', - 300: '#BF66FF', - 400: '#A933FF', - 500: '#9400ff', - 600: '#7600CC', - 700: '#590099', - 800: '#3B0066', - 900: '#1E0033', - }, - teal: { - 50: '#E5FFFF', - 100: '#CCFFFF', - 200: '#99FFFF', - 300: '#66FEFF', - 400: '#33FEFF', - 500: '#00feff', - 600: '#00CBCC', - 700: '#009899', - 800: '#006666', - 900: '#003333', - }, - red: { - 50: '#FFE5EB', - 100: '#FFCCD7', - 200: '#FF99B0', - 300: '#FF6688', - 400: '#FF3361', - 500: '#ff0039', - 600: '#CC002E', - 700: '#990022', - 800: '#660017', - 900: '#33000B', - }, - yellow: { - 50: '#FFFDE5', - 100: '#FFFBCC', - 200: '#FFF699', - 300: '#FFF266', - 400: '#FFED33', - 500: '#ffe900', - 600: '#CCBA00', - 700: '#998C00', - 800: '#665D00', - 900: '#332F00', - }, -} - -export const emphasisColors: EmphasisColors = { - secondary: naturalColors.grey, -} - -export const contextualColors: ContextualColors = { - brand: { - 50: '#E5F2FF', - 100: '#CCE5FF', - 200: '#99CCFF', - 300: '#66B2FF', - 400: '#3399FF', - 500: '#0a84ff', - 600: '#0066CC', - 700: '#004C99', - 800: '#003366', - 900: '#001933', - }, - text: naturalColors.grey, - info: naturalColors.blue, - danger: naturalColors.red, - success: naturalColors.green, - warning: naturalColors.yellow, -} - -const emphasisAndNaturalColors: EmphasisColors & NaturalColors = { - ...emphasisColors, - ...naturalColors, -} - -export const colors: ColorPalette = { - ...emphasisAndNaturalColors, - ...contextualColors, - - black: '#000', - white: '#fff', -} - -export const colorScheme: ColorSchemeMapping = { - ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => { - return { - foreground: colorVariants[500], - border: colorVariants[500], - shadow: colorVariants[500], - background: colorVariants[50], - - foregroundActive: colorVariants[500], - borderActive: colorVariants[500], - shadowActive: colorVariants[500], - backgroundActive: colorVariants[50], - - foregroundHover: colorVariants[500], - borderHover: colorVariants[500], - shadowHover: colorVariants[500], - backgroundHover: colorVariants[50], - - foregroundFocus: colorVariants[500], - borderFocus: colorVariants[500], - shadowFocus: colorVariants[500], - backgroundFocus: colorVariants[50], - - foregroundPressed: colorVariants[500], - borderPressed: colorVariants[500], - shadowPressed: colorVariants[500], - backgroundPressed: colorVariants[50], - - foregroundDisabled: colorVariants[500], - borderDisabled: colorVariants[500], - shadowDisabled: colorVariants[500], - backgroundDisabled: colorVariants[50], - } - }), -} diff --git a/packages/react/src/themes/base/componentStyles.ts b/packages/react/src/themes/base/componentStyles.ts deleted file mode 100644 index f36e618450..0000000000 --- a/packages/react/src/themes/base/componentStyles.ts +++ /dev/null @@ -1,25 +0,0 @@ -export { default as Checkbox } from './components/Checkbox/checkboxStyles' - -export { default as Dialog } from './components/Dialog/dialogStyles' - -export { default as Flex } from './components/Flex/flexStyles' -export { default as FlexItem } from './components/Flex/flexItemStyles' - -export { default as Icon } from './components/Icon/iconStyles' - -export { default as Input } from './components/Input/inputStyles' - -export { default as Loader } from './components/Loader/loaderStyles' - -export { default as ProviderBox } from './components/Provider/providerBoxStyles' - -export { default as Text } from './components/Text/textStyles' - -export { default as Toolbar } from './components/Toolbar/toolbarStyles' -export { default as ToolbarRadioGroup } from './components/Toolbar/toolbarRadioGroupStyles' - -export { default as Grid } from './components/Grid/gridStyles' - -export { default as Image } from './components/Image/imageStyles' - -export { default as Slider } from './components/Slider/sliderStyles' diff --git a/packages/react/src/themes/base/componentVariables.ts b/packages/react/src/themes/base/componentVariables.ts deleted file mode 100644 index 08150e0ef6..0000000000 --- a/packages/react/src/themes/base/componentVariables.ts +++ /dev/null @@ -1,22 +0,0 @@ -export { default as Checkbox } from './components/Checkbox/checkboxVariables' - -export { default as Dialog } from './components/Dialog/dialogVariables' - -export { default as Flex } from './components/Flex/flexVariables' -export { default as FlexItem } from './components/Flex/flexItemVariables' - -export { default as Icon } from './components/Icon/iconVariables' - -export { default as Input } from './components/Input/inputVariables' - -export { default as Loader } from './components/Loader/loaderVariables' - -export { default as ProviderBox } from './components/Provider/providerBoxVariables' - -export { default as Text } from './components/Text/textVariables' - -export { default as Grid } from './components/Grid/gridVariables' - -export { default as Image } from './components/Image/imageVariables' - -export { default as Slider } from './components/Slider/sliderVariables' diff --git a/packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts b/packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts deleted file mode 100644 index bf9f5e0507..0000000000 --- a/packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' -import { CheckboxProps, CheckboxState } from '../../../../components/Checkbox/Checkbox' -import { CheckboxVariables } from './checkboxVariables' - -const checkboxStyles: ComponentSlotStylesInput = { - root: ({ props: p, variables: v }): ICSSInJSStyle => ({ - alignItems: 'center', - position: 'relative', - - display: 'inline-grid', - // IE11: Gap is done via virtual column as in autoprefixer - gridTemplateColumns: p.labelPosition === 'start' ? `1fr ${v.gap} auto` : `auto ${v.gap} 1fr`, - cursor: 'pointer', - outline: 0, - - padding: v.padding, - - ...(p.disabled && { - color: v.disabledColor, - cursor: 'default', - }), - }), - - checkbox: ({ props: p, variables: v }): ICSSInJSStyle => ({ - gridColumn: p.labelPosition === 'start' ? 3 : 1, - '-ms-grid-row-align': 'center', - - borderColor: v.borderColor, - borderStyle: v.borderStyle, - borderRadius: v.borderRadius, - borderWidth: v.borderWidth, - boxShadow: 'unset', - color: v.checkboxColor, - margin: v.margin, - padding: v.padding, - - ...(p.checked && { - background: v.checkedBackground, - borderColor: v.checkedBorderColor, - color: v.checkboxCheckedColor, - }), - - ...(p.disabled && { - borderColor: v.disabledCheckboxColor, - - ...(p.checked && { - color: v.disabledCheckboxColor, - background: v.disabledBackground, - }), - }), - }), - - label: ({ props: p }): ICSSInJSStyle => ({ - display: 'block', // IE11: should be forced to be block, as inline-block is not supported - gridColumn: p.labelPosition === 'start' ? 1 : 3, - }), - - toggle: ({ props: p, variables: v }): ICSSInJSStyle => ({ - '-ms-grid-row-align': 'center', - gridColumn: p.labelPosition === 'start' ? 3 : 1, - - background: v.toggleBackground, - borderColor: v.toggleBorderColor, - borderStyle: v.toggleBorderStyle, - borderRadius: v.toggleBorderRadius, - borderWidth: v.toggleBorderWidth, - boxShadow: 'unset', - color: v.toggleIndicatorColor, - margin: v.toggleMargin, - - padding: v.togglePadding, - transition: 'padding .3s ease', - - ...(p.checked && { - background: v.checkboxToggleCheckedBackground, - borderColor: v.checkboxToggleCheckedBorderColor, - color: v.checkboxToggleCheckedColor, - padding: v.toggleCheckedPadding, - }), - - ...(p.disabled && { - background: v.disabledToggleBackground, - borderColor: v.disabledToggleBorderColor, - color: v.disabledToggleIndicatorColor, - }), - }), -} - -export default checkboxStyles diff --git a/packages/react/src/themes/base/components/Checkbox/checkboxVariables.ts b/packages/react/src/themes/base/components/Checkbox/checkboxVariables.ts deleted file mode 100644 index 46713dc297..0000000000 --- a/packages/react/src/themes/base/components/Checkbox/checkboxVariables.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { pxToRem } from '../../../../lib' - -export type CheckboxVariables = { - background: string - borderColor: string - borderStyle: string - borderRadius: string - borderWidth: string - checkboxColor: string - gap: string - margin: string - padding: string - - toggleBackground: string - toggleBorderColor: string - toggleBorderStyle: string - toggleBorderRadius: string - toggleBorderWidth: string - toggleIndicatorColor: string - toggleMargin: string - togglePadding: string - - checkedBackground: string - checkedBorderColor: string - checkboxCheckedColor: string - checkboxToggleCheckedColor: string - checkboxToggleCheckedBackground: string - checkboxToggleCheckedBorderColor: string - toggleCheckedPadding: string - - disabledColor: string - disabledBackground: string - disabledBorderColor: string - disabledCheckboxColor: string - disabledToggleIndicatorColor: string - disabledToggleBackground: string - disabledToggleBorderColor: string -} - -export default (siteVars: any): CheckboxVariables => ({ - background: 'transparent', - borderColor: siteVars.colors.grey[300], - borderStyle: `solid`, - borderRadius: pxToRem(4), - borderWidth: pxToRem(1), - checkboxColor: 'transparent', - gap: pxToRem(12), - margin: '0', - padding: '0', - - toggleBackground: 'transparent', - toggleBorderColor: siteVars.colors.grey[300], - toggleBorderStyle: `solid`, - toggleBorderRadius: pxToRem(999), - toggleBorderWidth: pxToRem(1), - toggleIndicatorColor: 'inherit', - toggleMargin: '0', - togglePadding: `0 ${pxToRem(20)} 0 0`, - - checkedBackground: 'transparent', - checkedBorderColor: siteVars.colors.grey[500], - checkboxCheckedColor: siteVars.colors.grey[500], - checkboxToggleCheckedBackground: 'transparent', - checkboxToggleCheckedBorderColor: siteVars.colors.grey[500], - checkboxToggleCheckedColor: 'inherit', - toggleCheckedPadding: `0 0 0 ${pxToRem(20)}`, - - disabledColor: siteVars.colors.grey[300], - disabledBackground: siteVars.colors.grey[200], - disabledBorderColor: siteVars.colors.grey[100], - disabledCheckboxColor: siteVars.colors.grey[300], - disabledToggleBackground: 'transparent', - disabledToggleBorderColor: siteVars.colors.grey[200], - disabledToggleIndicatorColor: siteVars.colors.grey[300], -}) diff --git a/packages/react/src/themes/base/components/Dialog/dialogStyles.ts b/packages/react/src/themes/base/components/Dialog/dialogStyles.ts deleted file mode 100644 index 514778482e..0000000000 --- a/packages/react/src/themes/base/components/Dialog/dialogStyles.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { DialogProps } from '../../../../components/Dialog/Dialog' -import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' -import { DialogVariables } from './dialogVariables' - -type DialogStyleParams = ComponentStyleFunctionParam - -export default { - root: ({ props: p, variables: v }: DialogStyleParams): ICSSInJSStyle => ({ - background: v.rootBackground, - borderRadius: v.rootBorderRadius, - outline: 'none', - padding: v.rootPadding, - position: 'relative', - width: v.rootWidth, - display: 'grid', - gridTemplateColumns: '1fr auto', - }), - actions: (): ICSSInJSStyle => ({ - gridRow: 3, - gridColumn: '1 / span 2', - '-ms-grid-column-align': 'end', - justifySelf: 'right', - }), - content: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({ - margin: v.contentMargin, - gridColumn: '1 / span 2', - gridRow: 2, - justifySelf: 'left', - }), - header: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({ - margin: v.headerMargin, - gridRow: 1, - gridColumn: 1, - justifySelf: 'left', - }), - headerAction: (): ICSSInJSStyle => ({ - gridRow: 1, - gridColumn: 2, - }), - overlay: ({ props: p, variables: v }: DialogStyleParams): ICSSInJSStyle => ({ - alignItems: 'center', - background: 'transparent', - bottom: 0, - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - left: 0, - overflow: 'auto', - position: 'fixed', - right: 0, - top: 0, - zIndex: v.overlayZIndex, - - ...(p.backdrop && { background: v.overlayBackground }), - }), -} diff --git a/packages/react/src/themes/base/components/Dialog/dialogVariables.ts b/packages/react/src/themes/base/components/Dialog/dialogVariables.ts deleted file mode 100644 index 7a409e817c..0000000000 --- a/packages/react/src/themes/base/components/Dialog/dialogVariables.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { pxToRem } from '../../../../lib' - -export interface DialogVariables { - rootBackground: string - rootBorderRadius: string - rootPadding: string - rootWidth: string - - contentMargin: string - - headerMargin: string - - overlayBackground: string - overlayZIndex: number -} - -export default (siteVariables): DialogVariables => ({ - rootBackground: siteVariables.colors.white, - rootBorderRadius: pxToRem(3), - rootPadding: pxToRem(24), - rootWidth: '50vw', - - contentMargin: `0 0 ${pxToRem(20)} 0`, - - headerMargin: `0 0 ${pxToRem(20)} 0`, - - overlayBackground: 'rgba(0,0,0,.33)', - overlayZIndex: 1000, -}) diff --git a/packages/react/src/themes/base/components/Grid/gridStyles.ts b/packages/react/src/themes/base/components/Grid/gridStyles.ts deleted file mode 100644 index 24f87212df..0000000000 --- a/packages/react/src/themes/base/components/Grid/gridStyles.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { GridVariables } from './gridVariables' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' -import { GridProps } from '../../../../components/Grid/Grid' - -const getCSSTemplateValue = (template: string | number): string => { - const templateAsNumber = Number(template) - - return !isNaN(templateAsNumber) && templateAsNumber > 0 - ? `repeat(${template}, 1fr)` - : String(template) -} - -const gridStyles: ComponentSlotStylesInput = { - root: ({ - props, - variables: { height, width, defaultColumnCount, gridGap, padding }, - }): ICSSInJSStyle => { - const { rows, columns = !props.rows && defaultColumnCount } = props - - const styles = { - height, - width, - padding, - gridGap, - display: 'grid', - justifyContent: 'space-evenly', - - ...(rows && !columns && { gridAutoFlow: 'column' }), - ...(rows && { gridTemplateRows: getCSSTemplateValue(rows) }), - ...(columns && { gridTemplateColumns: getCSSTemplateValue(columns) }), - } - - return styles - }, -} - -export default gridStyles diff --git a/packages/react/src/themes/base/components/Icon/iconNames.ts b/packages/react/src/themes/base/components/Icon/iconNames.ts deleted file mode 100644 index 6eb8d5f8ad..0000000000 --- a/packages/react/src/themes/base/components/Icon/iconNames.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ThemeIcons, ThemeIconSpec } from '../../../types' - -const fontIcon = (content: string): ThemeIconSpec => ({ - icon: { content: `'\\${content}'` }, -}) - -export const icons: ThemeIcons = { - 'stardust-checkmark': fontIcon('2713'), - 'stardust-circle': fontIcon('25CF'), - 'stardust-close': fontIcon('2715'), - 'stardust-arrow-down': fontIcon('25BE'), - 'stardust-arrow-end': fontIcon('25B8'), - 'stardust-arrow-up': fontIcon('25B4'), - 'stardust-menu-arrow-down': fontIcon('25BE'), - 'stardust-menu-arrow-end': fontIcon('25B8'), - 'stardust-pause': fontIcon('25B6'), - 'stardust-play': fontIcon('23F8'), -} - -export const emptyIcon: ThemeIconSpec = { icon: { content: '?' } } - -export default (name: string): ThemeIconSpec => icons[name] || emptyIcon diff --git a/packages/react/src/themes/base/components/Icon/iconStyles.ts b/packages/react/src/themes/base/components/Icon/iconStyles.ts deleted file mode 100644 index e5df011d7c..0000000000 --- a/packages/react/src/themes/base/components/Icon/iconStyles.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { pxToRem } from '../../../../lib' -import { - ComponentSlotStylesInput, - ICSSInJSStyle, - FontIconSpec, - ThemeIconSpec, -} from '../../../types' -import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon' -import { IconVariables } from './iconVariables' -import { emptyIcon } from './iconNames' - -const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICSSInJSStyle => { - switch (xSpacing) { - case 'none': - return { marginLeft: 0, marginRight: 0 } - case 'before': - return { marginLeft: horizontalSpace, marginRight: 0 } - case 'after': - return { marginLeft: 0, marginRight: horizontalSpace } - case 'both': - return { marginLeft: horizontalSpace, marginRight: horizontalSpace } - } -} - -const getBorderedStyles = (boxShadowColor: string): ICSSInJSStyle => { - return { - ...getPaddedStyle(), - - boxShadow: `0 0 0 .05rem ${boxShadowColor} inset`, - } -} - -const getPaddedStyle = (): ICSSInJSStyle => ({ - padding: pxToRem(4), -}) - -const iconStyles: ComponentSlotStylesInput = { - root: ({ props: p, variables: v, theme: t, rtl }): ICSSInJSStyle => { - const iconSpec: ThemeIconSpec = t.icons[p.name] || emptyIcon - const isFontIcon = !iconSpec.isSvg - - return { - speak: 'none', - verticalAlign: 'middle', - - ...getXSpacingStyles(p.xSpacing, v.horizontalSpace), - - ...(p.bordered && getBorderedStyles(v.borderColor)), - ...(p.circular && { ...getPaddedStyle(), borderRadius: '50%' }), - ...(p.disabled && { - color: v.disabledColor, - }), - - ...(isFontIcon && { - alignItems: 'center', - boxSizing: 'content-box', - display: 'inline-flex', - justifyContent: 'center', - - fontFamily: (iconSpec.icon as FontIconSpec).fontFamily, - fontSize: v[`${p.size}Size`], - lineHeight: 1, - width: v[`${p.size}Size`], - height: v[`${p.size}Size`], - - '::before': { - content: (iconSpec.icon as FontIconSpec).content, - }, - - transform: rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`, - }), - } - }, -} - -export default iconStyles diff --git a/packages/react/src/themes/base/components/Icon/iconVariables.ts b/packages/react/src/themes/base/components/Icon/iconVariables.ts deleted file mode 100644 index 49c9cc0fbd..0000000000 --- a/packages/react/src/themes/base/components/Icon/iconVariables.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { pxToRem } from '../../../../lib' - -export interface IconVariables { - color: string - borderColor: string - backgroundColor: string - disabledColor: string - horizontalSpace: string - - smallestSize: string - smallerSize: string - smallSize: string - mediumSize: string - largeSize: string - largerSize: string - largestSize: string -} - -export default (): IconVariables => ({ - color: undefined, - backgroundColor: undefined, - borderColor: 'black', - disabledColor: 'gray', - - horizontalSpace: pxToRem(10), - - smallestSize: pxToRem(7), - smallerSize: pxToRem(10), - smallSize: pxToRem(12), - mediumSize: pxToRem(16), - largeSize: pxToRem(20), - largerSize: pxToRem(32), - largestSize: pxToRem(40), -}) diff --git a/packages/react/src/themes/base/components/Input/inputVariables.ts b/packages/react/src/themes/base/components/Input/inputVariables.ts deleted file mode 100644 index a03ee39ffb..0000000000 --- a/packages/react/src/themes/base/components/Input/inputVariables.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { pxToRem } from '../../../../lib' - -export interface InputVariables { - backgroundColor: string - backgroundColorInverted: string - borderColor: string - borderRadius: string - borderWidth: string - fontColor: string - fontSize: string - iconColor: string - iconPosition: string - iconRight: string - iconLeft: string - inputPaddingWithIconAtStart: string - inputPaddingWithIconAtEnd: string - inputPadding: string - inputFocusBorderColor: string - inputFocusBorderRadius: string - placeholderColor: string -} - -export default (siteVars): InputVariables => ({ - backgroundColor: siteVars.colors.grey[50], - backgroundColorInverted: siteVars.colors.white, - borderColor: siteVars.colors.grey[300], - borderRadius: pxToRem(3), - borderWidth: `1px`, - - fontColor: siteVars.colors.grey[600], - fontSize: pxToRem(14), - - iconPosition: 'absolute', - iconRight: pxToRem(10), - iconColor: siteVars.colors.grey[800], - iconLeft: pxToRem(6), - inputPaddingWithIconAtStart: `${pxToRem(7)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(24)}`, - inputPaddingWithIconAtEnd: `${pxToRem(7)} ${pxToRem(24)} ${pxToRem(7)} ${pxToRem(12)}`, - - inputPadding: `${pxToRem(7)} ${pxToRem(12)}`, - inputFocusBorderColor: siteVars.colors.brand[300], - inputFocusBorderRadius: pxToRem(3), - - placeholderColor: siteVars.colors.grey[600], -}) diff --git a/packages/react/src/themes/base/components/Loader/loaderStyles.ts b/packages/react/src/themes/base/components/Loader/loaderStyles.ts deleted file mode 100644 index db67ad30fd..0000000000 --- a/packages/react/src/themes/base/components/Loader/loaderStyles.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { FlexDirectionProperty } from 'csstype' - -import { pxToRem } from '../../../../lib' -import { LoaderProps } from '../../../../components/Loader/Loader' -import { ComponentStyleFunctionParam, ICSSInJSStyle, StardustAnimationName } from '../../../types' -import { ObjectOf } from '../../../../types' -import { LoaderVariables } from './loaderVariables' - -const rootFlexDirections: ObjectOf = { - above: 'column-reverse', - below: 'column', - start: 'row-reverse', - end: 'row', -} - -export default { - root: ({ - props: p, - }: ComponentStyleFunctionParam): ICSSInJSStyle => ({ - alignItems: 'center', - display: p.inline ? 'inline-flex' : 'flex', - justifyContent: 'center', - flexDirection: rootFlexDirections[p.labelPosition], - }), - indicator: ({ - props: p, - theme: t, - variables: v, - }: ComponentStyleFunctionParam): ICSSInJSStyle => { - const animationName: StardustAnimationName = { - keyframe: ({ from, to }) => ({ - from: { - transform: `rotate(${from})`, - }, - to: { - transform: `rotate(${to})`, - }, - }), - params: { - from: '0deg', - to: '360deg', - }, - } - const borderColor = `${v.foregroundColor} ${v.backgroundColor} ${v.backgroundColor}` - - return { - animationName, - animationDuration: '1.3s', - animationIterationCount: 'infinite', - animationTimingFunction: 'cubic-bezier(0.53, 0.21, 0.29, 0.67)', - - borderColor, - borderRadius: '50%', - borderStyle: 'solid', - borderWidth: v.borderSizes[p.size], - - boxSizing: 'border-box', - - width: v.indicatorSizes[p.size], - height: v.indicatorSizes[p.size], - } - }, - label: { - margin: pxToRem(10), - }, -} diff --git a/packages/react/src/themes/base/components/Loader/loaderVariables.ts b/packages/react/src/themes/base/components/Loader/loaderVariables.ts deleted file mode 100644 index c04f2e520e..0000000000 --- a/packages/react/src/themes/base/components/Loader/loaderVariables.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { pxToRem, SizeValue } from '../../../../lib' - -export interface LoaderVariables { - foregroundColor: string - backgroundColor: string - - borderSizes: Record - indicatorSizes: Record -} - -export default (siteVariables): LoaderVariables => ({ - foregroundColor: siteVariables.colors.grey[400], - backgroundColor: siteVariables.colors.grey[100], - - borderSizes: { - smallest: pxToRem(1.5), - small: pxToRem(2), - smaller: pxToRem(2), - - medium: pxToRem(2), - - large: pxToRem(2.5), - larger: pxToRem(3), - largest: pxToRem(4), - }, - indicatorSizes: { - smallest: pxToRem(16), - small: pxToRem(20), - smaller: pxToRem(22), - - medium: pxToRem(24), - - large: pxToRem(26), - larger: pxToRem(30), - largest: pxToRem(34), - }, -}) diff --git a/packages/react/src/themes/base/components/Provider/providerBoxStyles.ts b/packages/react/src/themes/base/components/Provider/providerBoxStyles.ts deleted file mode 100644 index 82fc7b6d3c..0000000000 --- a/packages/react/src/themes/base/components/Provider/providerBoxStyles.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { ICSSInJSStyle } from '../../../types' - -export default { - root: ({ variables: v }): ICSSInJSStyle => ({ - background: v.background, - color: v.color, - textAlign: 'left', - }), -} diff --git a/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts b/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts deleted file mode 100644 index efe2a7e2fe..0000000000 --- a/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface ProviderBoxVariables { - background: string - color: string -} - -export default (siteVariables): ProviderBoxVariables => ({ - background: siteVariables.bodyBackground, - color: siteVariables.bodyColor, -}) diff --git a/packages/react/src/themes/base/components/Slider/sliderStyles.ts b/packages/react/src/themes/base/components/Slider/sliderStyles.ts deleted file mode 100644 index 225c789131..0000000000 --- a/packages/react/src/themes/base/components/Slider/sliderStyles.ts +++ /dev/null @@ -1,105 +0,0 @@ -import { SliderVariables } from './sliderVariables' -import { SliderProps, SliderState } from '../../../../components/Slider/Slider' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' - -const selectors = { - WEBKIT_THUMB: '::-webkit-slider-thumb', - MOZ_THUMB: '::-moz-range-thumb', - MS_FILL_LOWER: '::-ms-fill-lower', - MS_FILL_UPPER: '::-ms-fill-upper', - MS_THUMB: '::-ms-thumb', -} - -const getCommonSlotStyles = (p: SliderProps, v: SliderVariables) => ({ - cursor: 'pointer', - pointerEvents: 'none', - position: 'absolute', - border: 0, - height: v.railHeight, - marginTop: `calc(${v.height} / 2 - ${v.railHeight} / 2)`, -}) - -const getFluidStyles = (p: SliderProps) => p.fluid && !p.vertical && { width: '100%' } - -const sliderStyles: ComponentSlotStylesInput = { - root: ({ props: p, variables: v }): ICSSInJSStyle => ({ - height: v.height, - - ...(p.disabled && { pointerEvents: 'none' }), - ...(p.vertical && { height: v.length, width: v.height }), - ...getFluidStyles(p), - }), - - input: ({ props: p, variables: v }) => { - const thumbStyles = { border: 0, width: '1px' } - - return { - '-webkit-appearance': 'none', - cursor: 'pointer', - height: '100%', - width: '100%', - margin: 0, - padding: 0, - opacity: 0, - - [selectors.WEBKIT_THUMB]: { ...thumbStyles, '-webkit-appearance': 'none' }, - [selectors.MOZ_THUMB]: thumbStyles, - [selectors.MS_THUMB]: { ...thumbStyles, marginTop: `calc(-${v.thumbHeight} / 2)` }, - - [selectors.MS_FILL_LOWER]: { display: 'none' }, - [selectors.MS_FILL_UPPER]: { display: 'none' }, - - ':focus': { outline: 0 }, - ...getFluidStyles(p), - } - }, - - inputWrapper: ({ props: p, variables: v }) => { - const transformOriginValue = `calc(${v.length} / 2)` - - return { - position: 'relative', - display: 'inline-block', - height: v.height, - width: v.length, - ...(p.vertical && { - transform: 'rotate(-90deg)', - transformOrigin: `${transformOriginValue} ${transformOriginValue}`, - }), - ...getFluidStyles(p), - } - }, - - rail: ({ props: p, variables: v }) => ({ - width: '100%', - background: v.railColor, - - ...getCommonSlotStyles(p, v), - ...(p.disabled && { background: v.disabledRailColor }), - }), - - track: ({ props: p, variables: v }) => ({ - background: v.trackColor, - - ...getCommonSlotStyles(p, v), - ...(p.disabled && { background: v.disabledTrackColor }), - }), - - thumb: ({ props: p, variables: v }) => ({ - border: 0, - borderRadius: '100%', - cursor: 'pointer', - pointerEvents: 'none', - position: 'absolute', - - background: v.thumbColor, - height: v.thumbHeight, - width: v.thumbWidth, - marginTop: `calc(${v.height} / 2 - ${v.thumbHeight} / 2)`, - marginLeft: `calc(-${v.thumbWidth} / 2)`, - - ...(p.disabled && { background: v.disabledThumbColor }), - }), -} - -export default sliderStyles diff --git a/packages/react/src/themes/base/components/Slider/sliderVariables.ts b/packages/react/src/themes/base/components/Slider/sliderVariables.ts deleted file mode 100644 index 16f9069b7d..0000000000 --- a/packages/react/src/themes/base/components/Slider/sliderVariables.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { pxToRem } from '../../../../lib' -import { SiteVariablesPrepared } from '../../../types' - -export interface SliderVariables { - height: string - length: string - - railColor: string - railHeight: string - disabledRailColor: string - - thumbColor: string - activeThumbColor: string - disabledThumbColor: string - thumbHeight: string - activeThumbHeight: string - thumbBorderPadding: string - thumbWidth: string - activeThumbWidth: string - - trackColor: string - disabledTrackColor: string -} - -export default (siteVars: SiteVariablesPrepared): SliderVariables => { - const { colors } = siteVars - - return { - height: pxToRem(16), - length: pxToRem(130), - - railColor: colors.grey[300], - disabledRailColor: colors.grey[200], - railHeight: pxToRem(2), - - thumbColor: colors.grey[700], - activeThumbColor: colors.grey[700], - disabledThumbColor: colors.grey[200], - thumbHeight: pxToRem(10), - activeThumbHeight: pxToRem(10), - thumbBorderPadding: '0', - thumbWidth: pxToRem(10), - activeThumbWidth: pxToRem(10), - - trackColor: colors.grey[500], - disabledTrackColor: colors.grey[200], - } -} diff --git a/packages/react/src/themes/base/components/Text/textStyles.ts b/packages/react/src/themes/base/components/Text/textStyles.ts deleted file mode 100644 index 96a71f159e..0000000000 --- a/packages/react/src/themes/base/components/Text/textStyles.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' -import { TextVariables } from './textVariables' -import { TextProps } from '../../../../components/Text/Text' -import translateAlignProp from '../../../../styles/translateAlignProp' - -export default { - root: ({ - props: { - as, - animation, - atMention, - color, - disabled, - error, - important, - size, - success, - temporary, - align, - timestamp, - truncated, - weight, - }, - variables: v, - }: ComponentStyleFunctionParam): ICSSInJSStyle => { - const colors = v.colorScheme[color] - return { - ...(color && colors && { color: colors.foreground }), - // animations are not working with span, unless display is set to 'inline-block' - ...(animation && as === 'span' && { display: 'inline-block' }), - ...(atMention === true && { color: v.atMentionOtherColor }), - ...(atMention === 'me' && { color: v.atMentionMeColor }), - ...(truncated && { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }), - ...(disabled && { color: v.disabledColor }), - ...(error && { color: v.errorColor }), - ...(success && { color: v.successColor }), - ...(important && { color: v.importantColor }), - ...(temporary && { fontStyle: 'italic' }), - ...(align && { display: 'block', textAlign: translateAlignProp(align) }), // textAlign makes sense only for block elements - ...(timestamp && { color: v.timestampColor }), - - ...(weight === 'light' && { fontWeight: v.fontWeightLight }), - ...(weight === 'semilight' && { fontWeight: v.fontWeightSemilight }), - ...(weight === 'regular' && { fontWeight: v.fontWeightRegular }), - ...(weight === 'semibold' && { fontWeight: v.fontWeightSemibold }), - ...(weight === 'bold' && { fontWeight: v.fontWeightBold }), - - ...(size === 'smallest' && { - fontSize: v.fontSizeSmallest, - lineHeight: v.fontLineHeightSmallest, - }), - ...(size === 'smaller' && { - fontSize: v.fontSizeSmaller, - lineHeight: v.fontLineHeightSmaller, - }), - ...(size === 'small' && { - fontSize: v.fontSizeSmall, - lineHeight: v.fontLineHeightSmall, - }), - ...(size === 'medium' && { - fontSize: v.fontSizeMedium, - lineHeight: v.fontLineHeightMedium, - }), - ...(size === 'large' && { - fontSize: v.fontSizeLarge, - lineHeight: v.fontLineHeightLarge, - }), - ...(size === 'larger' && { - fontSize: v.fontSizeLarger, - lineHeight: v.fontLineHeightLarger, - }), - ...(size === 'largest' && { - fontSize: v.fontSizeLargest, - lineHeight: v.fontLineHeightLargest, - }), - } - }, -} diff --git a/packages/react/src/themes/base/components/Text/textVariables.ts b/packages/react/src/themes/base/components/Text/textVariables.ts deleted file mode 100644 index 4878519379..0000000000 --- a/packages/react/src/themes/base/components/Text/textVariables.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { ColorSchemeMapping } from '../../../types' - -export interface TextVariables { - colorScheme: TColorSchemeMapping - - atMentionMeColor: string - atMentionOtherColor: string - importantColor: string - timestampColor: string - - disabledColor: string - errorColor: string - successColor: string - - fontSizeSmallest: string - fontSizeSmaller: string - fontSizeSmall: string - fontSizeMedium: string - fontSizeLarge: string - fontSizeLarger: string - fontSizeLargest: string - - fontLineHeightSmallest: number - fontLineHeightSmaller: number - fontLineHeightSmall: number - fontLineHeightMedium: number - fontLineHeightLarge: number - fontLineHeightLarger: number - fontLineHeightLargest: number - - fontWeightLight: number - fontWeightSemilight: number - fontWeightRegular: number - fontWeightSemibold: number - fontWeightBold: number -} - -export default (siteVariables): TextVariables => { - return { - colorScheme: siteVariables.colorScheme, - atMentionMeColor: siteVariables.colors.pink[500], - atMentionOtherColor: siteVariables.colors.grey[600], - importantColor: siteVariables.colors.red[500], - timestampColor: siteVariables.colors.grey[500], - - disabledColor: siteVariables.colors.grey[300], - errorColor: siteVariables.colors.red[500], - successColor: siteVariables.colors.green[500], - - fontSizeSmallest: siteVariables.fontSizes.smallest, - fontLineHeightSmallest: siteVariables.lineHeightSmallest, - - fontSizeSmaller: siteVariables.fontSizes.smaller, - fontLineHeightSmaller: siteVariables.lineHeightSmaller, - - fontSizeSmall: siteVariables.fontSizes.small, - fontLineHeightSmall: siteVariables.lineHeightSmall, - - fontSizeMedium: siteVariables.fontSizes.medium, - fontLineHeightMedium: siteVariables.lineHeightMedium, - - fontSizeLarge: siteVariables.fontSizes.large, - fontLineHeightLarge: siteVariables.lineHeightLarge, - - fontSizeLarger: siteVariables.fontSizes.larger, - fontLineHeightLarger: siteVariables.lineHeightLarger, - - fontSizeLargest: siteVariables.fontSizes.largest, - fontLineHeightLargest: siteVariables.lineHeightLargest, - - fontWeightLight: siteVariables.fontWeightLight, - fontWeightSemilight: siteVariables.fontWeightSemilight, - fontWeightRegular: siteVariables.fontWeightRegular, - fontWeightSemibold: siteVariables.fontWeightSemibold, - fontWeightBold: siteVariables.fontWeightBold, - } -} diff --git a/packages/react/src/themes/base/components/Toolbar/toolbarRadioGroupStyles.ts b/packages/react/src/themes/base/components/Toolbar/toolbarRadioGroupStyles.ts deleted file mode 100644 index 27af2f5489..0000000000 --- a/packages/react/src/themes/base/components/Toolbar/toolbarRadioGroupStyles.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' - -const toolbarRadioGroupStyles: ComponentSlotStylesInput = { - root: (): ICSSInJSStyle => ({ - whiteSpace: 'nowrap', - }), -} - -export default toolbarRadioGroupStyles diff --git a/packages/react/src/themes/base/index.ts b/packages/react/src/themes/base/index.ts deleted file mode 100644 index 4701d2a50d..0000000000 --- a/packages/react/src/themes/base/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ThemeInput } from '../types' -import * as siteVariables from './siteVariables' -import * as componentVariables from './componentVariables' -import * as componentStyles from './componentStyles' -import { icons } from './components/Icon/iconNames' - -export default { - siteVariables, - icons, - componentVariables, - componentStyles, -} as ThemeInput diff --git a/packages/react/src/themes/base/siteVariables.ts b/packages/react/src/themes/base/siteVariables.ts deleted file mode 100644 index c0b4c73c2d..0000000000 --- a/packages/react/src/themes/base/siteVariables.ts +++ /dev/null @@ -1,38 +0,0 @@ -// -// COLORS -// - -export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } from './colors' - -// -// FONT SIZES -// -export const fontSizes = { - smallest: '0.8rem', - smaller: '1rem', - small: '1.2rem', - medium: '1.4rem', - large: '1.8rem', - larger: '2.4rem', - largest: '3rem', -} - -// -// FONT WEIGHTS -// -export const fontWeightLight = 200 -export const fontWeightSemilight = 300 -export const fontWeightRegular = 400 -export const fontWeightSemibold = 600 -export const fontWeightBold = 700 - -// -// LINE HEIGHTS -// -export const lineHeightSmallest = 1.2 -export const lineHeightSmaller = 1.2 -export const lineHeightSmall = 1.3333 -export const lineHeightMedium = 1.4286 -export const lineHeightLarge = 1.3333 -export const lineHeightLarger = 1.3333 -export const lineHeightLargest = 1.3333 diff --git a/packages/react/src/themes/font-awesome/componentStyles.ts b/packages/react/src/themes/font-awesome/componentStyles.ts deleted file mode 100644 index a9451a9c5b..0000000000 --- a/packages/react/src/themes/font-awesome/componentStyles.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Icon } from './components/Icon/iconStyles' diff --git a/packages/react/src/themes/font-awesome/components/Icon/iconStyles.ts b/packages/react/src/themes/font-awesome/components/Icon/iconStyles.ts deleted file mode 100644 index 2a1801213c..0000000000 --- a/packages/react/src/themes/font-awesome/components/Icon/iconStyles.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle, ThemeIconSpec } from '../../../types' -import { IconProps } from '../../../../components/Icon/Icon' -import { IconVariables } from '../../../teams/components/Icon/iconVariables' -import { emptyIcon } from '../../../base/components/Icon/iconNames' - -const iconStyles: ComponentSlotStylesInput = { - root: ({ props: p, theme: t }): ICSSInJSStyle => { - const iconSpec: ThemeIconSpec = t.icons[p.name] || emptyIcon - const isFontIcon = !iconSpec.isSvg - - return ( - isFontIcon && { - fontWeight: 900, // required for the fontAwesome to render - } - ) - }, -} - -export default iconStyles diff --git a/packages/react/src/themes/font-awesome/index.ts b/packages/react/src/themes/font-awesome/index.ts index 32db8097e7..52082a880e 100644 --- a/packages/react/src/themes/font-awesome/index.ts +++ b/packages/react/src/themes/font-awesome/index.ts @@ -1,8 +1,6 @@ import { ThemeInput } from '../types' -import * as componentStyles from './componentStyles' import { default as icons } from './components/Icon/iconNames' export default { icons, - componentStyles, } as ThemeInput diff --git a/packages/react/src/themes/index.ts b/packages/react/src/themes/index.ts index cfc58cf133..b4a1fe0a78 100644 --- a/packages/react/src/themes/index.ts +++ b/packages/react/src/themes/index.ts @@ -1,5 +1,4 @@ // Themes -export { default as base } from './base' export { default as fontAwesome } from './font-awesome' export { default as teams } from './teams' export { default as teamsDark } from './teams-dark' diff --git a/packages/react/src/themes/teams-high-contrast/components/Alert/alertStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Alert/alertStyles.ts index c88970f821..790f97789e 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Alert/alertStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Alert/alertStyles.ts @@ -1,9 +1,9 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { AlertProps } from '../../../../components/Alert/Alert' import { AlertHighContrastVariables } from './alertVariables' import getBorderFocusStyles from '../../../teams/getBorderFocusStyles' -const alertStyles: ComponentSlotStylesInput = { +const alertStyles: ComponentSlotStylesPrepared = { dismissAction: ({ variables: v, props: p, theme: { siteVariables } }): ICSSInJSStyle => ({ ':focus-visible': { backgroundColor: v.focusBackgroundColor, diff --git a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts index 724ff98452..8c8ae7d10b 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts @@ -1,10 +1,10 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { AttachmentProps } from '../../../../components/Attachment/Attachment' import { AttachmentVariables } from '../../../teams/components/Attachment/attachmentVariables' import Button from '../../../../components/Button/Button' import Icon from '../../../../components/Icon/Icon' -const attachmentStyles: ComponentSlotStylesInput = { +const attachmentStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ ...((p.actionable || p.onClick) && { ':focus-visible': { diff --git a/packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownStyles.ts index e156624271..35a4fea7b1 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { default as Dropdown, DropdownProps, @@ -14,7 +14,7 @@ const transparentColorStyle: ICSSInJSStyle = { borderBottomColor: 'transparent', } -const dropdownStyles: ComponentSlotStylesInput = { +const dropdownStyles: ComponentSlotStylesPrepared = { container: ({ props: p, variables: v }): ICSSInJSStyle => ({ ...(!p.open && { ':hover': { diff --git a/packages/react/src/themes/teams-high-contrast/components/Input/inputVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Input/inputVariables.ts index 6999ee8e6b..b5d448296e 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Input/inputVariables.ts @@ -1,4 +1,4 @@ -import { InputVariables } from '../../../base/components/Input/inputVariables' +import { InputVariables } from '../../../teams/components/Input/inputVariables' import { pxToRem } from '../../../../lib' export default (siteVars: any): Partial => { diff --git a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts index 1c8f9cde79..b4d8cfde7b 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts @@ -1,11 +1,11 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { MenuVariables } from '../../../teams/components/Menu/menuVariables' import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem' import { underlinedItem } from '../../../teams/components/Menu/menuItemStyles' type MenuItemPropsAndState = MenuItemProps & MenuItemState -const menuItemStyles: ComponentSlotStylesInput = { +const menuItemStyles: ComponentSlotStylesPrepared = { wrapper: ({ props: p, variables: v }): ICSSInJSStyle => { const { iconOnly, diff --git a/packages/react/src/themes/teams/componentStyles.ts b/packages/react/src/themes/teams/componentStyles.ts index 9936e6a5c6..a3ca0a08de 100644 --- a/packages/react/src/themes/teams/componentStyles.ts +++ b/packages/react/src/themes/teams/componentStyles.ts @@ -31,6 +31,9 @@ export { default as Embed } from './components/Embed/embedStyles' export { default as Form } from './components/Form/formStyles' export { default as FormField } from './components/Form/formFieldStyles' +export { default as Flex } from './components/Flex/flexStyles' +export { default as FlexItem } from './components/Flex/flexItemStyles' + export { default as Grid } from './components/Grid/gridStyles' export { default as Header } from './components/Header/headerStyles' @@ -46,6 +49,10 @@ export { export { default as Icon } from './components/Icon/iconStyles' +export { default as Image } from './components/Image/imageStyles' + +export { default as Input } from './components/Input/inputStyles' + export { default as Label } from './components/Label/labelStyles' export { default as Layout } from './components/Layout/layoutStyles' @@ -83,6 +90,8 @@ export { default as Text } from './components/Text/textStyles' export { default as TextArea } from './components/TextArea/textAreaStyles' +export { default as Toolbar } from './components/Toolbar/toolbarStyles' +export { default as ToolbarRadioGroup } from './components/Toolbar/toolbarRadioGroupStyles' export { default as ToolbarCustomItem } from './components/Toolbar/toolbarCustomItemStyles' export { default as ToolbarDivider } from './components/Toolbar/toolbarDividerStyles' export { default as ToolbarItem } from './components/Toolbar/toolbarItemStyles' diff --git a/packages/react/src/themes/teams/componentVariables.ts b/packages/react/src/themes/teams/componentVariables.ts index edb66f5319..538e983d53 100644 --- a/packages/react/src/themes/teams/componentVariables.ts +++ b/packages/react/src/themes/teams/componentVariables.ts @@ -1,5 +1,3 @@ -export { default as AccordionContent } from './components/Accordion/accordionContentVariables' - export { default as Attachment } from './components/Attachment/attachmentVariables' export { default as Alert } from './components/Alert/alertVariables' @@ -28,6 +26,11 @@ export { export { default as Embed } from './components/Embed/embedVariables' +export { default as Flex } from './components/Flex/flexVariables' +export { default as FlexItem } from './components/Flex/flexItemVariables' + +export { default as Grid } from './components/Grid/gridVariables' + export { default as Header } from './components/Header/headerVariables' export { default as HeaderDescription } from './components/Header/headerDescriptionVariables' @@ -37,6 +40,8 @@ export { export { default as Icon } from './components/Icon/iconVariables' +export { default as Image } from './components/Image/imageVariables' + export { default as Input } from './components/Input/inputVariables' export { default as Label } from './components/Label/labelVariables' diff --git a/packages/react/src/themes/teams/components/Accordion/accordionContentStyles.ts b/packages/react/src/themes/teams/components/Accordion/accordionContentStyles.ts index 3803c7a5b9..a6bad8e909 100644 --- a/packages/react/src/themes/teams/components/Accordion/accordionContentStyles.ts +++ b/packages/react/src/themes/teams/components/Accordion/accordionContentStyles.ts @@ -1,7 +1,8 @@ -import { ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared } from '../../../types' +import { AccordionContentProps } from '../../../../components/Accordion/AccordionContent' -const accordionContentStyles = { - root: ({ props }): ICSSInJSStyle => ({ +const accordionContentStyles: ComponentSlotStylesPrepared = { + root: ({ props }) => ({ display: 'none', verticalAlign: 'middle', ...(props.active && { display: 'block' }), diff --git a/packages/react/src/themes/teams/components/Accordion/accordionContentVariables.ts b/packages/react/src/themes/teams/components/Accordion/accordionContentVariables.ts deleted file mode 100644 index bbaa17eca7..0000000000 --- a/packages/react/src/themes/teams/components/Accordion/accordionContentVariables.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default () => { - const vars: any = {} - - vars.active = 'display:block' - - return vars -} diff --git a/packages/react/src/themes/teams/components/Accordion/accordionStyles.ts b/packages/react/src/themes/teams/components/Accordion/accordionStyles.ts index 31d8977a57..229e464910 100644 --- a/packages/react/src/themes/teams/components/Accordion/accordionStyles.ts +++ b/packages/react/src/themes/teams/components/Accordion/accordionStyles.ts @@ -1,7 +1,8 @@ -import { ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared } from '../../../types' +import { AccordionProps } from '../../../../components/Accordion/Accordion' -const accordionStyles = { - root: (): ICSSInJSStyle => ({ +const accordionStyles: ComponentSlotStylesPrepared = { + root: () => ({ verticalAlign: 'middle', display: 'flex', flexDirection: 'column', diff --git a/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts b/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts index d368fb80d5..52f4bc56a8 100644 --- a/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts +++ b/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts @@ -1,4 +1,7 @@ -const accordionTitleStyles = { +import { ComponentSlotStylesPrepared } from '../../../types' +import { AccordionTitleProps } from '../../../../components/Accordion/AccordionTitle' + +const accordionTitleStyles: ComponentSlotStylesPrepared = { root: () => ({ display: 'inline-block', verticalAlign: 'middle', diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts index db8546f1e9..f53c24af12 100644 --- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts +++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts @@ -1,5 +1,5 @@ import * as React from 'react' -import { ComponentSlotStylesInput, ICSSInJSStyle, SiteVariablesPrepared } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle, SiteVariablesPrepared } from '../../../types' import { AlertProps } from '../../../../components/Alert/Alert' import { AlertVariables } from './alertVariables' import getBorderFocusStyles from '../../getBorderFocusStyles' @@ -67,7 +67,7 @@ const getIntentColorsFromProps = ( } } -const alertStyles: ComponentSlotStylesInput = { +const alertStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => ({ display: 'flex', alignItems: 'center', diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts index 57b045e02a..3641c83f93 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { AttachmentProps } from '../../../../components/Attachment/Attachment' import { AttachmentVariables } from './attachmentVariables' import { pxToRem } from '../../../../lib' @@ -6,7 +6,7 @@ import Icon from '../../../../components/Icon/Icon' import getBorderFocusStyles from '../../getBorderFocusStyles' import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles' -const attachmentStyles: ComponentSlotStylesInput = { +const attachmentStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => ({ position: 'relative', display: 'inline-flex', diff --git a/packages/react/src/themes/teams/components/Avatar/avatarStyles.ts b/packages/react/src/themes/teams/components/Avatar/avatarStyles.ts index d64e1c8ba7..81573be61c 100644 --- a/packages/react/src/themes/teams/components/Avatar/avatarStyles.ts +++ b/packages/react/src/themes/teams/components/Avatar/avatarStyles.ts @@ -1,5 +1,5 @@ import { pxToRem } from '../../../../lib' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { AvatarProps } from '../../../../components/Avatar/Avatar' const sizeToPxValue = { @@ -12,7 +12,7 @@ const sizeToPxValue = { largest: 48, } -const avatarStyles: ComponentSlotStylesInput = { +const avatarStyles: ComponentSlotStylesPrepared = { root: ({ props: { size } }): ICSSInJSStyle => { const sizeInRem = pxToRem(sizeToPxValue[size]) diff --git a/packages/react/src/themes/teams/components/Button/buttonGroupStyles.ts b/packages/react/src/themes/teams/components/Button/buttonGroupStyles.ts index 5b33f00665..37c41833bf 100644 --- a/packages/react/src/themes/teams/components/Button/buttonGroupStyles.ts +++ b/packages/react/src/themes/teams/components/Button/buttonGroupStyles.ts @@ -1,11 +1,11 @@ import { pxToRem } from '../../../../lib' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { ButtonGroupProps } from '../../../../components/Button/ButtonGroup' const commonButtonsStyles = (circular: boolean) => circular ? { marginRight: pxToRem(8) } : { borderRadius: 0 } -const buttonGroupStyles: ComponentSlotStylesInput = { +const buttonGroupStyles: ComponentSlotStylesPrepared = { root: (): ICSSInJSStyle => ({}), middleButton: ({ props: p }) => ({ ...commonButtonsStyles(p.circular), diff --git a/packages/react/src/themes/teams/components/Button/buttonStyles.ts b/packages/react/src/themes/teams/components/Button/buttonStyles.ts index cfd11b7e0b..63029a5011 100644 --- a/packages/react/src/themes/teams/components/Button/buttonStyles.ts +++ b/packages/react/src/themes/teams/components/Button/buttonStyles.ts @@ -1,13 +1,13 @@ import * as _ from 'lodash' import { pxToRem } from '../../../../lib' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import Loader from '../../../../components/Loader/Loader' import { ButtonProps } from '../../../../components/Button/Button' import { ButtonVariables } from './buttonVariables' import getBorderFocusStyles from '../../getBorderFocusStyles' import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles' -const buttonStyles: ComponentSlotStylesInput = { +const buttonStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => { const { borderWidth } = siteVariables diff --git a/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts b/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts index fab4ee3165..83a9b980b5 100644 --- a/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts +++ b/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts @@ -1,9 +1,9 @@ -import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '../../../types' import { ChatItemVariables } from './chatItemVariables' import { ChatItemProps } from '../../../../components/Chat/ChatItem' import { pxToRem } from '../../../../lib' -const chatItemStyles: ComponentSlotStylesInput = { +const chatItemStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ position: 'relative', ...((!p.attached || p.attached === 'top') && { paddingTop: pxToRem(16) }), diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts index b3bc436c66..d0d83cb9c5 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import * as _ from 'lodash' import { default as ChatMessage, @@ -10,7 +10,7 @@ import { screenReaderContainerStyles } from '../../../../lib/accessibility/Style import { pxToRem } from '../../../../lib' import getBorderFocusStyles from '../../getBorderFocusStyles' -const chatMessageStyles: ComponentSlotStylesInput< +const chatMessageStyles: ComponentSlotStylesPrepared< ChatMessageProps & ChatMessageState, ChatMessageVariables > = { @@ -149,7 +149,7 @@ const chatMessageStyles: ComponentSlotStylesInput< width: 'auto', borderRadius: '50%', top: pxToRem(4), - zIndex: '1', + zIndex: 1, [sidePosition]: 0, transform: p.badgePosition === 'start' ? 'translateX(-50%)' : 'translateX(50%)', } diff --git a/packages/react/src/themes/teams/components/Chat/chatStyles.ts b/packages/react/src/themes/teams/components/Chat/chatStyles.ts index c8cc85df41..97584c76b1 100644 --- a/packages/react/src/themes/teams/components/Chat/chatStyles.ts +++ b/packages/react/src/themes/teams/components/Chat/chatStyles.ts @@ -1,9 +1,9 @@ -import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '../../../types' import { ChatVariables } from './chatVariables' import { ChatProps } from '../../../../components/Chat/Chat' import { pxToRem } from '../../../../lib' -const chatStyles: ComponentSlotStylesInput = { +const chatStyles: ComponentSlotStylesPrepared = { root: ({ variables: v }): ICSSInJSStyle => ({ backgroundColor: v.backgroundColor, border: `1px solid ${v.backgroundColor}`, diff --git a/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts b/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts index 4daf1d68c4..3d06fdc708 100644 --- a/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts +++ b/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts @@ -1,10 +1,21 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import Checkbox, { CheckboxProps, CheckboxState } from '../../../../components/Checkbox/Checkbox' import { CheckboxVariables } from './checkboxVariables' import getBorderFocusStyles from '../../getBorderFocusStyles' -const checkboxStyles: ComponentSlotStylesInput = { +const checkboxStyles: ComponentSlotStylesPrepared< + CheckboxProps & CheckboxState, + CheckboxVariables +> = { root: ({ props: p, variables: v, theme: t }): ICSSInJSStyle => ({ + position: 'relative', + + display: 'inline-grid', + // IE11: Gap is done via virtual column as in autoprefixer + gridTemplateColumns: p.labelPosition === 'start' ? `1fr ${v.gap} auto` : `auto ${v.gap} 1fr`, + cursor: 'pointer', + outline: 0, + color: v.textColor, padding: v.rootPadding, verticalAlign: 'middle', @@ -35,12 +46,17 @@ const checkboxStyles: ComponentSlotStylesInput ({ + gridColumn: p.labelPosition === 'start' ? 3 : 1, + '-ms-grid-row-align': 'center', + boxShadow: 'unset', + background: v.background, borderColor: v.borderColor, borderStyle: v.borderStyle, @@ -70,6 +86,10 @@ const checkboxStyles: ComponentSlotStylesInput ({ + '-ms-grid-row-align': 'center', + gridColumn: p.labelPosition === 'start' ? 3 : 1, + boxShadow: 'unset', + background: v.background, borderColor: v.borderColor, borderStyle: v.borderStyle, @@ -105,6 +125,11 @@ const checkboxStyles: ComponentSlotStylesInput ({ + display: 'block', // IE11: should be forced to be block, as inline-block is not supported + gridColumn: p.labelPosition === 'start' ? 1 : 3, + }), } export default checkboxStyles diff --git a/packages/react/src/themes/teams/components/Checkbox/checkboxVariables.ts b/packages/react/src/themes/teams/components/Checkbox/checkboxVariables.ts index 94ee6f0d01..374d9b1c57 100644 --- a/packages/react/src/themes/teams/components/Checkbox/checkboxVariables.ts +++ b/packages/react/src/themes/teams/components/Checkbox/checkboxVariables.ts @@ -1,8 +1,7 @@ -import { CheckboxVariables as BaseCheckboxVariables } from '../../../base/components/Checkbox/checkboxVariables' import { pxToRem } from '../../../../lib' import * as _ from 'lodash' -export type CheckboxVariables = Partial & { +export type CheckboxVariables = { rootPadding: string textColor: string @@ -10,13 +9,44 @@ export type CheckboxVariables = Partial & { textColorHover: string borderColorHover: string + background: string + borderColor: string + borderStyle: string + borderRadius: string + borderWidth: string + checkboxColor: string + gap: string + margin: string + padding: string + + toggleBackground: string + toggleBorderColor: string + toggleBorderStyle: string + toggleBorderRadius: string + toggleBorderWidth: string + toggleIndicatorColor: string + toggleMargin: string + togglePadding: string + + checkedBackground: string + checkedBorderColor: string + checkboxCheckedColor: string checkedBackgroundHover: string checkedTextColor: string checkedIndicatorColor: string - - toggleIndicatorSize: string + checkboxToggleCheckedColor: string + checkboxToggleCheckedBackground: string + checkboxToggleCheckedBorderColor: string toggleCheckedPadding: string + toggleIndicatorSize: string + disabledColor: string + disabledBackground: string + disabledBorderColor: string + disabledCheckboxColor: string + disabledToggleIndicatorColor: string + disabledToggleBackground: string + disabledToggleBorderColor: string disabledBackgroundChecked: string disabledCheckedIndicatorColor: string } @@ -26,6 +56,24 @@ const padding = pxToRem(2) const defaultValue = 'red' export default (siteVars: any): CheckboxVariables => ({ + checkboxColor: 'transparent', + + toggleBackground: 'transparent', + toggleBorderColor: siteVars.colors.grey[300], + toggleBorderStyle: `solid`, + toggleBorderWidth: pxToRem(1), + toggleIndicatorColor: 'inherit', + + checkboxCheckedColor: siteVars.colors.grey[500], + checkboxToggleCheckedBackground: 'transparent', + checkboxToggleCheckedBorderColor: siteVars.colors.grey[500], + checkboxToggleCheckedColor: 'inherit', + + disabledColor: siteVars.colors.grey[300], + + disabledCheckboxColor: siteVars.colors.grey[300], + disabledToggleBackground: 'transparent', + disabledToggleBorderColor: siteVars.colors.grey[200], textColor: _.get(siteVars, 'colorScheme.default.foreground1', defaultValue), background: 'transparent', borderColor: _.get(siteVars, 'colorScheme.default.foreground1', defaultValue), diff --git a/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts b/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts index 07cf9a02db..df810ea96c 100644 --- a/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts +++ b/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts @@ -6,17 +6,62 @@ type DialogStyleParams = ComponentStyleFunctionParam ({ + background: v.rootBackground, + borderRadius: v.rootBorderRadius, + outline: 'none', + padding: v.rootPadding, + position: 'relative', + width: v.rootWidth, + display: 'grid', + gridTemplateColumns: '1fr auto', boxShadow: v.boxShadow, color: v.foregroundColor, }), + actions: (): ICSSInJSStyle => ({ + gridRow: 3, + gridColumn: '1 / span 2', + '-ms-grid-column-align': 'end', + justifySelf: 'right', + }), + + content: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({ + margin: v.contentMargin, + gridColumn: '1 / span 2', + gridRow: 2, + justifySelf: 'left', + }), + header: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({ + margin: v.headerMargin, + gridRow: 1, + gridColumn: 1, + justifySelf: 'left', fontSize: v.headerFontSize, fontWeight: v.headerFontWeight, }), headerAction: ({ variables: v }: DialogStyleParams) => ({ + gridRow: 1, + gridColumn: 2, color: v.foregroundColor, margin: v.headerActionMargin, }), + + overlay: ({ props: p, variables: v }: DialogStyleParams): ICSSInJSStyle => ({ + alignItems: 'center', + background: 'transparent', + bottom: 0, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + left: 0, + overflow: 'auto', + position: 'fixed', + right: 0, + top: 0, + zIndex: v.overlayZIndex, + + ...(p.backdrop && { background: v.overlayBackground }), + }), } diff --git a/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts b/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts index 5e581f802d..4e192ccd96 100644 --- a/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts +++ b/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts @@ -1,7 +1,18 @@ -import { DialogVariables as BaseDialogVariables } from '../../../base/components/Dialog/dialogVariables' import { pxToRem } from '../../../../lib' -export interface DialogVariables extends BaseDialogVariables { +export interface DialogVariables { + rootBackground: string + rootBorderRadius: string + rootPadding: string + rootWidth: string + + contentMargin: string + + headerMargin: string + + overlayBackground: string + overlayZIndex: number + boxShadow: string foregroundColor: string @@ -12,16 +23,22 @@ export interface DialogVariables extends BaseDialogVariables { } export default (siteVariables): Partial => ({ + rootBackground: siteVariables.colors.white, + rootBorderRadius: pxToRem(3), + rootWidth: '50vw', + rootPadding: `${pxToRem(27)} ${pxToRem(32)} ${pxToRem(20)} ${pxToRem(32)}`, + + contentMargin: `0 0 ${pxToRem(20)} 0`, + boxShadow: siteVariables.shadowLevel4, foregroundColor: siteVariables.colors.grey[900], - rootPadding: `${pxToRem(27)} ${pxToRem(32)} ${pxToRem(20)} ${pxToRem(32)}`, - headerFontSize: siteVariables.fontSizes.large, headerFontWeight: siteVariables.fontWeightBold, headerMargin: `0 0 ${pxToRem(8)} 0`, overlayBackground: 'rgba(37, 36, 36, .75)', // todo: update to a palette value when daisy has mapped one + overlayZIndex: 1000, headerActionMargin: `${pxToRem(-3)} ${pxToRem(-8)} 0 0`, }) diff --git a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts index dcc7b71146..7cdf4ce7e2 100644 --- a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts +++ b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts @@ -2,7 +2,7 @@ import * as _ from 'lodash' import { childrenExist, pxToRem } from '../../../../lib' import { - ComponentSlotStylesInput, + ComponentSlotStylesPrepared, ICSSInJSStyle, StrictColorScheme, ItemType, @@ -21,7 +21,7 @@ const beforeAndAfter = ( background: _.get(colors, 'foreground', variables.dividerColor), }) -const dividerStyles: ComponentSlotStylesInput = { +const dividerStyles: ComponentSlotStylesPrepared = { root: ({ props, variables }): ICSSInJSStyle => { const { children, color, fitted, size, important, content } = props const colors = variables.colorScheme[color] diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts index 84545ee6db..e38fc192df 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts @@ -1,10 +1,10 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { DropdownVariables } from './dropdownVariables' import DropdownItem, { DropdownItemProps } from '../../../../components/Dropdown/DropdownItem' import getBorderFocusStyles from '../../getBorderFocusStyles' import { pxToRem } from '../../../../lib' -const dropdownItemStyles: ComponentSlotStylesInput = { +const dropdownItemStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => ({ minHeight: 0, padding: `${pxToRem(4)} ${pxToRem(11)}`, diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts index 237ebe0b07..da5b3ab368 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts @@ -1,8 +1,8 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { DropdownSearchInputProps } from '../../../../components/Dropdown/DropdownSearchInput' import { DropdownVariables } from './dropdownVariables' -const dropdownSearchInputStyles: ComponentSlotStylesInput< +const dropdownSearchInputStyles: ComponentSlotStylesPrepared< DropdownSearchInputProps, DropdownVariables > = { diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts index 0fdcb64c7a..6b3e0246e6 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts @@ -1,9 +1,9 @@ import { DropdownSelectedItemProps } from '../../../../components/Dropdown/DropdownSelectedItem' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { DropdownVariables } from './dropdownVariables' import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles' -const dropdownSelectedItemStyles: ComponentSlotStylesInput< +const dropdownSelectedItemStyles: ComponentSlotStylesPrepared< DropdownSelectedItemProps, DropdownVariables > = { diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts index b5a9d419bc..68a855d7f0 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts @@ -1,4 +1,8 @@ -import { ComponentSlotStyle, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { + ComponentSlotStylesPrepared, + ICSSInJSStyle, + ComponentSlotStyleFunction, +} from '../../../types' import { default as Dropdown, DropdownProps, @@ -26,7 +30,7 @@ const transparentColorStyleObj: ICSSInJSStyle = { }, } -const getIndicatorStyles: ComponentSlotStyle = ({ +const getIndicatorStyles: ComponentSlotStyleFunction = ({ variables: v, }): ICSSInJSStyle => ({ alignItems: 'center', @@ -56,7 +60,7 @@ const getWidth = (p: DropdownPropsAndState, v: DropdownVariables): string => { return v.width } -const dropdownStyles: ComponentSlotStylesInput = { +const dropdownStyles: ComponentSlotStylesPrepared = { root: ({ props: p }): ICSSInJSStyle => ({ ...(p.inline && { display: 'inline-flex' }), }), diff --git a/packages/react/src/themes/teams/components/Embed/embedStyles.ts b/packages/react/src/themes/teams/components/Embed/embedStyles.ts index 1d390a61d7..7f41874ab1 100644 --- a/packages/react/src/themes/teams/components/Embed/embedStyles.ts +++ b/packages/react/src/themes/teams/components/Embed/embedStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { pxToRem } from '../../../../lib' import Embed, { EmbedProps, EmbedState } from '../../../../components/Embed/Embed' import { EmbedVariables } from './embedVariables' @@ -51,4 +51,4 @@ export default { iframe: (): ICSSInJSStyle => ({ display: 'block', }), -} as ComponentSlotStylesInput +} as ComponentSlotStylesPrepared diff --git a/packages/react/src/themes/base/components/Flex/flexItemStyles.ts b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts similarity index 83% rename from packages/react/src/themes/base/components/Flex/flexItemStyles.ts rename to packages/react/src/themes/teams/components/Flex/flexItemStyles.ts index f8b6bb9125..0992e6a483 100644 --- a/packages/react/src/themes/base/components/Flex/flexItemStyles.ts +++ b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts @@ -1,10 +1,10 @@ -import { ComponentSlotStylesInput } from '../../../types' +import { ComponentSlotStylesPrepared } from '../../../types' import { FlexItemProps } from '../../../../components/Flex/FlexItem' import { toFlexAlignment, toFlexItemSizeValues } from './utils' import { FlexItemVariables } from './flexItemVariables' -const flexItemStyles: ComponentSlotStylesInput = { +const flexItemStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v }) => { return { ...(p.align && { alignSelf: toFlexAlignment(p.align) }), diff --git a/packages/react/src/themes/base/components/Flex/flexItemVariables.ts b/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts similarity index 100% rename from packages/react/src/themes/base/components/Flex/flexItemVariables.ts rename to packages/react/src/themes/teams/components/Flex/flexItemVariables.ts diff --git a/packages/react/src/themes/base/components/Flex/flexStyles.ts b/packages/react/src/themes/teams/components/Flex/flexStyles.ts similarity index 88% rename from packages/react/src/themes/base/components/Flex/flexStyles.ts rename to packages/react/src/themes/teams/components/Flex/flexStyles.ts index cde9351be1..d42559822e 100644 --- a/packages/react/src/themes/base/components/Flex/flexStyles.ts +++ b/packages/react/src/themes/teams/components/Flex/flexStyles.ts @@ -1,10 +1,10 @@ -import { ComponentSlotStylesInput } from '../../../types' +import { ComponentSlotStylesPrepared } from '../../../types' import { FlexProps } from '../../../../components/Flex/Flex' import { toFlexAlignment } from './utils' import { FlexVariables } from './flexVariables' -const flexStyles: ComponentSlotStylesInput = { +const flexStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v }) => ({ display: 'flex', ...(p.debug && { border: '1px dotted grey', background: 'lightgrey' }), diff --git a/packages/react/src/themes/base/components/Flex/flexVariables.ts b/packages/react/src/themes/teams/components/Flex/flexVariables.ts similarity index 100% rename from packages/react/src/themes/base/components/Flex/flexVariables.ts rename to packages/react/src/themes/teams/components/Flex/flexVariables.ts diff --git a/packages/react/src/themes/base/components/Flex/utils.ts b/packages/react/src/themes/teams/components/Flex/utils.ts similarity index 100% rename from packages/react/src/themes/base/components/Flex/utils.ts rename to packages/react/src/themes/teams/components/Flex/utils.ts diff --git a/packages/react/src/themes/teams/components/Form/formFieldStyles.ts b/packages/react/src/themes/teams/components/Form/formFieldStyles.ts index b5181ca6b0..6d19872650 100644 --- a/packages/react/src/themes/teams/components/Form/formFieldStyles.ts +++ b/packages/react/src/themes/teams/components/Form/formFieldStyles.ts @@ -1,8 +1,8 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { FormProps } from '../../../../components/Form/Form' import { pxToRem } from '../../../../lib' -const formFieldStyles: ComponentSlotStylesInput = { +const formFieldStyles: ComponentSlotStylesPrepared = { root: ({ props, variables }): ICSSInJSStyle => ({}), label: ({ props }): ICSSInJSStyle => { const { type, inline, required } = props diff --git a/packages/react/src/themes/teams/components/Form/formStyles.ts b/packages/react/src/themes/teams/components/Form/formStyles.ts index f28b2cead2..02823cd8ec 100644 --- a/packages/react/src/themes/teams/components/Form/formStyles.ts +++ b/packages/react/src/themes/teams/components/Form/formStyles.ts @@ -1,8 +1,8 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { FormProps } from '../../../../components/Form/Form' import { pxToRem } from '../../../../lib' -const formStyles: ComponentSlotStylesInput = { +const formStyles: ComponentSlotStylesPrepared = { root: ({ props, variables }): ICSSInJSStyle => ({ height: '100%', width: '100%', diff --git a/packages/react/src/themes/teams/components/Grid/gridStyles.ts b/packages/react/src/themes/teams/components/Grid/gridStyles.ts index bf19ff1c3f..a85b9bbe5a 100644 --- a/packages/react/src/themes/teams/components/Grid/gridStyles.ts +++ b/packages/react/src/themes/teams/components/Grid/gridStyles.ts @@ -1,9 +1,37 @@ -import { GridVariables } from '../../../base/components/Grid/gridVariables' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { GridVariables } from './gridVariables' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { GridProps } from '../../../../components/Grid/Grid' -const gridStyles: ComponentSlotStylesInput = { - root: (): ICSSInJSStyle => ({ '& > *': { outlineOffset: '-3px' } }), +const getCSSTemplateValue = (template: string | number): string => { + const templateAsNumber = Number(template) + + return !isNaN(templateAsNumber) && templateAsNumber > 0 + ? `repeat(${template}, 1fr)` + : String(template) +} + +const gridStyles: ComponentSlotStylesPrepared = { + root: ({ + props, + variables: { height, width, defaultColumnCount, gridGap, padding }, + }): ICSSInJSStyle => { + const { rows, columns = !props.rows && defaultColumnCount } = props + + return { + height, + width, + padding, + gridGap, + display: 'grid', + justifyContent: 'space-evenly', + + ...(rows && !columns && { gridAutoFlow: 'column' }), + ...(rows && { gridTemplateRows: getCSSTemplateValue(rows) }), + ...(columns && { gridTemplateColumns: getCSSTemplateValue(columns) }), + + '& > *': { outlineOffset: '-3px' }, + } + }, } export default gridStyles diff --git a/packages/react/src/themes/base/components/Grid/gridVariables.ts b/packages/react/src/themes/teams/components/Grid/gridVariables.ts similarity index 100% rename from packages/react/src/themes/base/components/Grid/gridVariables.ts rename to packages/react/src/themes/teams/components/Grid/gridVariables.ts diff --git a/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts b/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts index 495e5b5342..285398982a 100644 --- a/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts +++ b/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts @@ -1,11 +1,14 @@ import * as _ from 'lodash' -import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '../../../types' import { HeaderDescriptionProps } from '../../../../components/Header/HeaderDescription' import { HeaderDescriptionVariables } from './headerDescriptionVariables' import { pxToRem } from '../../../../lib' -const headerStyles: ComponentSlotStylesInput = { +const headerStyles: ComponentSlotStylesPrepared< + HeaderDescriptionProps, + HeaderDescriptionVariables +> = { root: ({ props: p, variables: v }): ICSSInJSStyle => { const colors = v.colorScheme[p.color] return { diff --git a/packages/react/src/themes/teams/components/Header/headerStyles.ts b/packages/react/src/themes/teams/components/Header/headerStyles.ts index cc7b260031..1dee2a0007 100644 --- a/packages/react/src/themes/teams/components/Header/headerStyles.ts +++ b/packages/react/src/themes/teams/components/Header/headerStyles.ts @@ -1,10 +1,10 @@ import * as _ from 'lodash' -import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '../../../types' import { HeaderProps } from '../../../../components/Header/Header' import { HeaderVariables } from './headerVariables' import translateAlignProp from '../../../../styles/translateAlignProp' -const headerStyles: ComponentSlotStylesInput = { +const headerStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v }): ICSSInJSStyle => { const colors = v.colorScheme[p.color] return { diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts index 3c68d67785..0cbf3ebd3b 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -2,15 +2,19 @@ import * as _ from 'lodash' import { callable, pxToRem, SizeValue } from '../../../../lib' import { - ComponentSlotStylesInput, + ComponentSlotStylesPrepared, ICSSInJSStyle, StrictColorScheme, ItemType, + ThemeIconSpec, + FontIconSpec, } from '../../../types' -import { IconProps } from '../../../../components/Icon/Icon' +import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon' import { getStyle as getSvgStyle } from './svg' import { IconVariables, iconColorAreas } from './iconVariables' +export const emptyIcon: ThemeIconSpec = { icon: { content: '?' } } + const getPaddedStyle = (): ICSSInJSStyle => ({ padding: pxToRem(4), }) @@ -40,20 +44,64 @@ const getIconColor = (variables, colors: StrictColorScheme = { - root: ({ props: p, variables: v, theme: t }): ICSSInJSStyle => { +const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICSSInJSStyle => { + switch (xSpacing) { + case 'none': + return { marginLeft: 0, marginRight: 0 } + case 'before': + return { marginLeft: horizontalSpace, marginRight: 0 } + case 'after': + return { marginLeft: 0, marginRight: horizontalSpace } + case 'both': + return { marginLeft: horizontalSpace, marginRight: horizontalSpace } + } +} + +const iconStyles: ComponentSlotStylesPrepared = { + root: ({ props: p, variables: v, theme: t, rtl }): ICSSInJSStyle => { + const iconSpec: ThemeIconSpec = t.icons[p.name] || emptyIcon + const isFontIcon = !iconSpec.isSvg + const colors = v.colorScheme[p.color] const maybeIcon = t.icons[p.name] const isSvgIcon = maybeIcon && maybeIcon.isSvg return { + speak: 'none', + verticalAlign: 'middle', + + ...getXSpacingStyles(p.xSpacing, v.horizontalSpace), + + ...(p.circular && { ...getPaddedStyle(), borderRadius: '50%' }), + ...(p.disabled && { + color: v.disabledColor, + }), display: 'inline-block', // we overriding this for Base theme // overriding base theme border handling ...((p.bordered || v.borderColor) && getBorderedStyles(v.borderColor || getIconColor(v, colors))), + ...(isFontIcon && { + fontWeight: 900, // required for the fontAwesome to render + alignItems: 'center', + boxSizing: 'content-box', + display: 'inline-flex', + justifyContent: 'center', + + fontFamily: (iconSpec.icon as FontIconSpec).fontFamily, + fontSize: v[`${p.size}Size`], + lineHeight: 1, + width: v[`${p.size}Size`], + height: v[`${p.size}Size`], + + '::before': { + content: (iconSpec.icon as FontIconSpec).content, + }, + + transform: rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`, + }), ...(isSvgIcon && { backgroundColor: v.backgroundColor }), } }, diff --git a/packages/react/src/themes/teams/components/Icon/iconVariables.ts b/packages/react/src/themes/teams/components/Icon/iconVariables.ts index 41713e69cc..20d18dd498 100644 --- a/packages/react/src/themes/teams/components/Icon/iconVariables.ts +++ b/packages/react/src/themes/teams/components/Icon/iconVariables.ts @@ -1,5 +1,4 @@ import { pxToRem, stringLiteralsArray } from '../../../../lib' -import { IconVariables as BaseIconVariables } from '../../../base/components/Icon/iconVariables' import { ItemType } from '../../../types' import { TeamsSchemeMappingWithAreas } from '../../types' import { pickValuesFromColorScheme } from '../../../colorUtils' @@ -8,7 +7,21 @@ export type IconSizeModifier = 'x' | 'xx' export const iconColorAreas = stringLiteralsArray('foreground') export type IconColorSchemeMapping = TeamsSchemeMappingWithAreas> -export interface IconVariables extends BaseIconVariables { +export interface IconVariables { + color: string + borderColor: string + backgroundColor: string + disabledColor: string + horizontalSpace: string + + smallestSize: string + smallerSize: string + smallSize: string + mediumSize: string + largeSize: string + largerSize: string + largestSize: string + colorScheme: IconColorSchemeMapping brandColor: string secondaryColor: string @@ -21,10 +34,19 @@ export default (siteVars): Partial => ({ colorScheme: pickValuesFromColorScheme(siteVars.colorScheme, iconColorAreas), color: undefined, borderColor: undefined, + backgroundColor: undefined, brandColor: siteVars.brandColor, secondaryColor: siteVars.colors.white, redColor: siteVars.colors.red[400], disabledColor: siteVars.colors.grey[250], + smallestSize: pxToRem(7), + smallerSize: pxToRem(10), + smallSize: pxToRem(12), + mediumSize: pxToRem(16), + largeSize: pxToRem(20), + largerSize: pxToRem(32), + largestSize: pxToRem(40), + horizontalSpace: pxToRem(10), }) diff --git a/packages/react/src/themes/base/components/Image/imageStyles.ts b/packages/react/src/themes/teams/components/Image/imageStyles.ts similarity index 80% rename from packages/react/src/themes/base/components/Image/imageStyles.ts rename to packages/react/src/themes/teams/components/Image/imageStyles.ts index 03acf3d678..3da87351b2 100644 --- a/packages/react/src/themes/base/components/Image/imageStyles.ts +++ b/packages/react/src/themes/teams/components/Image/imageStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { ImageProps } from '../../../../components/Image/Image' export default { @@ -14,4 +14,4 @@ export default { borderRadius: variables.avatarRadius, }), }), -} as ComponentSlotStylesInput +} as ComponentSlotStylesPrepared diff --git a/packages/react/src/themes/base/components/Image/imageVariables.ts b/packages/react/src/themes/teams/components/Image/imageVariables.ts similarity index 100% rename from packages/react/src/themes/base/components/Image/imageVariables.ts rename to packages/react/src/themes/teams/components/Image/imageVariables.ts diff --git a/packages/react/src/themes/base/components/Input/inputStyles.ts b/packages/react/src/themes/teams/components/Input/inputStyles.ts similarity index 90% rename from packages/react/src/themes/base/components/Input/inputStyles.ts rename to packages/react/src/themes/teams/components/Input/inputStyles.ts index 2c1dba5b76..5ca4beabda 100644 --- a/packages/react/src/themes/base/components/Input/inputStyles.ts +++ b/packages/react/src/themes/teams/components/Input/inputStyles.ts @@ -1,9 +1,9 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { InputProps } from '../../../../components/Input/Input' import { InputVariables } from './inputVariables' import { PositionProperty } from 'csstype' -const inputStyles: ComponentSlotStylesInput = { +const inputStyles: ComponentSlotStylesPrepared = { root: ({ props: p }): ICSSInJSStyle => ({ alignItems: 'center', display: 'inline-flex', diff --git a/packages/react/src/themes/teams/components/Input/inputVariables.ts b/packages/react/src/themes/teams/components/Input/inputVariables.ts index 23d26dacab..0ab678b9a1 100644 --- a/packages/react/src/themes/teams/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams/components/Input/inputVariables.ts @@ -1,7 +1,34 @@ -import { InputVariables } from '../../../base/components/Input/inputVariables' import { pxToRem } from '../../../../lib' -export default (siteVars): Partial => ({ +export interface InputVariables { + backgroundColor: string + backgroundColorInverted: string + borderColor: string + borderRadius: string + borderWidth: string + fontColor: string + fontSize: string + iconColor: string + iconPosition: string + iconRight: string + iconLeft: string + inputPaddingWithIconAtStart: string + inputPaddingWithIconAtEnd: string + inputPadding: string + inputFocusBorderColor: string + inputFocusBorderRadius: string + placeholderColor: string +} + +export default (siteVars): InputVariables => ({ + iconPosition: 'absolute', + iconRight: pxToRem(10), + iconLeft: pxToRem(6), + inputPaddingWithIconAtStart: `${pxToRem(7)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(24)}`, + inputPaddingWithIconAtEnd: `${pxToRem(7)} ${pxToRem(24)} ${pxToRem(7)} ${pxToRem(12)}`, + + inputPadding: `${pxToRem(7)} ${pxToRem(12)}`, + borderColor: 'transparent', borderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, borderWidth: `0 0 ${pxToRem(2)} 0`, diff --git a/packages/react/src/themes/teams/components/Label/labelStyles.ts b/packages/react/src/themes/teams/components/Label/labelStyles.ts index 0c29d8c9b5..454d1f5a51 100644 --- a/packages/react/src/themes/teams/components/Label/labelStyles.ts +++ b/packages/react/src/themes/teams/components/Label/labelStyles.ts @@ -1,10 +1,10 @@ import { pxToRem } from '../../../../lib' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { LabelProps } from '../../../../components/Label/Label' import { LabelVariables } from './labelVariables' import { getColorScheme } from '../../colors' -const labelStyles: ComponentSlotStylesInput = { +const labelStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v }): ICSSInJSStyle => { const colors = getColorScheme(v.colorScheme, p.color) diff --git a/packages/react/src/themes/teams/components/Layout/layoutStyles.ts b/packages/react/src/themes/teams/components/Layout/layoutStyles.ts index cb5639808e..7a7f30acf1 100644 --- a/packages/react/src/themes/teams/components/Layout/layoutStyles.ts +++ b/packages/react/src/themes/teams/components/Layout/layoutStyles.ts @@ -1,7 +1,7 @@ import { debugRoot, debugArea, debugGap } from '../../../../styles/debugStyles' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' -const layoutStyles: ComponentSlotStylesInput = { +const layoutStyles: ComponentSlotStylesPrepared = { root: ({ props }): ICSSInJSStyle => { const { alignItems, diff --git a/packages/react/src/themes/teams/components/List/listItemStyles.ts b/packages/react/src/themes/teams/components/List/listItemStyles.ts index 8d32b89e58..8cb2e7e702 100644 --- a/packages/react/src/themes/teams/components/List/listItemStyles.ts +++ b/packages/react/src/themes/teams/components/List/listItemStyles.ts @@ -1,9 +1,9 @@ import { pxToRem } from '../../../../lib' import { screenReaderContainerStyles } from '../../../../lib/accessibility/Styles/accessibilityStyles' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { default as ListItem, ListItemProps } from '../../../../components/List/ListItem' -const truncateStyle = { +const truncateStyle: ICSSInJSStyle = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', @@ -43,7 +43,7 @@ const selectedStyle = variables => ({ color: variables.selectedColor, }) -const listItemStyles: ComponentSlotStylesInput = { +const listItemStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ minHeight: v.minHeight, padding: v.rootPadding, diff --git a/packages/react/src/themes/teams/components/List/listStyles.ts b/packages/react/src/themes/teams/components/List/listStyles.ts index a61fd75b3e..db6cf6e7c8 100644 --- a/packages/react/src/themes/teams/components/List/listStyles.ts +++ b/packages/react/src/themes/teams/components/List/listStyles.ts @@ -1,8 +1,8 @@ import { debugRoot } from '../../../../styles/debugStyles' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { ListProps } from '../../../../components/List/List' -const listStyles: ComponentSlotStylesInput = { +const listStyles: ComponentSlotStylesPrepared = { root: ({ props: p }): ICSSInJSStyle => ({ ...(p.debug && debugRoot()), display: p.horizontal ? 'inline-flex' : 'block', diff --git a/packages/react/src/themes/teams/components/Loader/loaderStyles.ts b/packages/react/src/themes/teams/components/Loader/loaderStyles.ts index c0e5f7cc82..5625398568 100644 --- a/packages/react/src/themes/teams/components/Loader/loaderStyles.ts +++ b/packages/react/src/themes/teams/components/Loader/loaderStyles.ts @@ -1,22 +1,34 @@ +import { + ComponentSlotStylesPrepared, + ComponentStyleFunctionParam, + ICSSInJSStyle, +} from '../../../types' +import { FlexDirectionProperty } from 'csstype' import { LoaderProps } from '../../../../components/Loader/Loader' -import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' import { LoaderVariables } from './loaderVariables' +import { pxToRem } from '../../../../lib' +import { ObjectOf } from '../../../../types' -export default { +const rootFlexDirections: ObjectOf = { + above: 'column-reverse', + below: 'column', + start: 'row-reverse', + end: 'row', +} + +const loaderStyles: ComponentSlotStylesPrepared = { + root: ({ + props: p, + }: ComponentStyleFunctionParam): ICSSInJSStyle => ({ + alignItems: 'center', + display: p.inline ? 'inline-flex' : 'flex', + justifyContent: 'center', + flexDirection: rootFlexDirections[p.labelPosition], + }), indicator: ({ props: p, variables: v, }: ComponentStyleFunctionParam): ICSSInJSStyle => ({ - // Reset existing styles from base theme - animationName: 'none', - animationDuration: 'unset', - animationIterationCount: 'unset', - animationTimingFunction: 'unset', - borderColor: 'transparent', - borderRadius: 0, - borderStyle: 'none', - borderWidth: 0, - height: v.containerHeights[p.size], width: v.containerWidths[p.size], overflow: 'hidden', @@ -74,4 +86,9 @@ export default { }, } }, + label: () => ({ + margin: pxToRem(10), + }), } + +export default loaderStyles diff --git a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts index 2d8a1e0d7b..14dc8f37fe 100644 --- a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts @@ -1,9 +1,9 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { MenuDividerProps } from '../../../../components/Menu/MenuDivider' import { MenuVariables } from './menuVariables' import { getColorScheme } from '../../colors' -const menuDividerStyles: ComponentSlotStylesInput = { +const menuDividerStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v }): ICSSInJSStyle => { const colors = getColorScheme(v.colorScheme, null, p.primary) const borderColor = p.primary ? v.primaryBorderColor : v.borderColor || colors.border diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 60e486d569..6e822e09b3 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -1,6 +1,6 @@ import { pxToRem } from '../../../../lib' import { - ComponentSlotStylesInput, + ComponentSlotStylesPrepared, ICSSInJSStyle, StrictColorScheme, ItemType, @@ -144,7 +144,7 @@ const pointingBeak = ({ } } -const menuItemStyles: ComponentSlotStylesInput = { +const menuItemStyles: ComponentSlotStylesPrepared = { wrapper: ({ props, variables: v, theme }): ICSSInJSStyle => { const { active, @@ -429,7 +429,7 @@ const menuItemStyles: ComponentSlotStylesInput ({ zIndex: '1000' }), + menu: () => ({ zIndex: 1000 }), indicator: ({ props: p }) => ({ position: 'relative', diff --git a/packages/react/src/themes/teams/components/Menu/menuStyles.ts b/packages/react/src/themes/teams/components/Menu/menuStyles.ts index f869956ce0..3e3a0e0ce1 100644 --- a/packages/react/src/themes/teams/components/Menu/menuStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuStyles.ts @@ -1,5 +1,5 @@ import { pxToRem } from '../../../../lib' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { MenuProps, MenuState } from '../../../../components/Menu/Menu' import { MenuVariables } from './menuVariables' import { @@ -64,4 +64,4 @@ export default { : { margin: `0 ${horizontalPillsRightMargin} 0 0` }), }), }), -} as ComponentSlotStylesInput +} as ComponentSlotStylesPrepared diff --git a/packages/react/src/themes/teams/components/MenuButton/menuButtonStyles.ts b/packages/react/src/themes/teams/components/MenuButton/menuButtonStyles.ts index a71e7fc38e..d7bd402f78 100644 --- a/packages/react/src/themes/teams/components/MenuButton/menuButtonStyles.ts +++ b/packages/react/src/themes/teams/components/MenuButton/menuButtonStyles.ts @@ -1,6 +1,8 @@ +import { ComponentSlotStylesPrepared } from '../../../types' +import { MenuButtonProps } from '../../../../components/MenuButton/MenuButton' import PopupContent from '../../../../components/Popup/PopupContent' -const menuButtonStyles = { +const menuButtonStyles: ComponentSlotStylesPrepared = { root: () => ({ boxSizing: 'border-box', display: 'inline-block', diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts index 2281289e03..45bd1e3577 100644 --- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts +++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts @@ -1,9 +1,9 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { PopupContentProps } from '../../../../components/Popup/PopupContent' import { PopupContentVariables } from './popupContentVariables' import getPointerStyles from '../../getPointerStyles' -const popupContentStyles: ComponentSlotStylesInput = { +const popupContentStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v, rtl }): ICSSInJSStyle => ({ border: `${v.borderSize} solid ${v.borderColor}`, borderRadius: v.borderRadius, diff --git a/packages/react/src/themes/teams/components/Popup/popupStyles.ts b/packages/react/src/themes/teams/components/Popup/popupStyles.ts index 1f914b4e4b..dd410c3a51 100644 --- a/packages/react/src/themes/teams/components/Popup/popupStyles.ts +++ b/packages/react/src/themes/teams/components/Popup/popupStyles.ts @@ -1,8 +1,8 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { PopupProps } from '../../../../components/Popup/Popup' import { PopupVariables } from './popupVariables' -const popupStyles: ComponentSlotStylesInput = { +const popupStyles: ComponentSlotStylesPrepared = { root: (): ICSSInJSStyle => ({}), popup: ({ variables: v }): ICSSInJSStyle => ({ diff --git a/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts b/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts index 875ce33deb..6f0b9335ae 100644 --- a/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts +++ b/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts @@ -5,6 +5,10 @@ export default { root: ({ variables: v, }: ComponentStyleFunctionParam): ICSSInJSStyle => ({ + background: v.background, + color: v.color, + textAlign: 'left', + '& ::-webkit-scrollbar': { height: v.scrollbarHeight, width: v.scrollbarWidth, diff --git a/packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts b/packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts index 12cb36f5a2..32ac03184d 100644 --- a/packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts +++ b/packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts @@ -1,7 +1,9 @@ import { pxToRem } from '../../../../lib' -import { ProviderBoxVariables as BaseProviderBoxVariables } from '../../../base/components/Provider/providerBoxVariables' -export interface ProviderBoxVariables extends BaseProviderBoxVariables { +export interface ProviderBoxVariables { + background: string + color: string + scrollbarHeight: string scrollbarWidth: string @@ -14,6 +16,9 @@ export interface ProviderBoxVariables extends BaseProviderBoxVariables { } export default (siteVariables): Partial => ({ + background: siteVariables.bodyBackground, + color: siteVariables.bodyColor, + scrollbarHeight: pxToRem(16), scrollbarWidth: pxToRem(16), diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts index 7587c7f5d4..63ce634edf 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { RadioGroupItemProps, RadioGroupItemState, @@ -21,7 +21,7 @@ const restHoverFocusTextColor = textColor => ({ }, }) -const radioStyles: ComponentSlotStylesInput< +const radioStyles: ComponentSlotStylesPrepared< RadioGroupItemProps & RadioGroupItemState, RadioGroupItemVariables > = { diff --git a/packages/react/src/themes/teams/components/Reaction/reactionGroupStyles.ts b/packages/react/src/themes/teams/components/Reaction/reactionGroupStyles.ts index 7926528d5c..99f6694483 100644 --- a/packages/react/src/themes/teams/components/Reaction/reactionGroupStyles.ts +++ b/packages/react/src/themes/teams/components/Reaction/reactionGroupStyles.ts @@ -1,9 +1,9 @@ -import { ComponentSlotStylesInput } from '../../../types' +import { ComponentSlotStylesPrepared } from '../../../types' import { ReactionProps } from '../../../../components/Reaction/Reaction' import { ReactionGroupVariables } from './reactionGroupVariables' -const reactionStyles: ComponentSlotStylesInput = { - root: {}, +const reactionStyles: ComponentSlotStylesPrepared = { + root: () => ({}), reaction: ({ variables: v }) => ({ ':not(:last-child)': { marginRight: v.reactionSpacing, diff --git a/packages/react/src/themes/teams/components/Reaction/reactionStyles.ts b/packages/react/src/themes/teams/components/Reaction/reactionStyles.ts index 01487776a6..a049873806 100644 --- a/packages/react/src/themes/teams/components/Reaction/reactionStyles.ts +++ b/packages/react/src/themes/teams/components/Reaction/reactionStyles.ts @@ -1,12 +1,12 @@ import { FontWeightProperty } from 'csstype' -import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '../../../types' import { default as Reaction, ReactionProps } from '../../../../components/Reaction/Reaction' import { pxToRem } from '../../../../lib' import { ReactionVariables } from './reactionVariables' const contentClassNameSelector = `& .${Reaction.slotClassNames.content}` -const reactionStyles: ComponentSlotStylesInput = { +const reactionStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ cursor: 'pointer', background: 'transparent', diff --git a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts index f399a96371..e187ab9e4a 100644 --- a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts +++ b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts @@ -1,9 +1,9 @@ import { SegmentProps } from '../../../../components/Segment/Segment' -import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '../../../types' import { SegmentVariables } from './segmentVariables' import { getColorScheme } from '../../colors' -const segmentStyles: ComponentSlotStylesInput = { +const segmentStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v }): ICSSInJSStyle => { const colors = getColorScheme(v.colorScheme, p.color) diff --git a/packages/react/src/themes/teams/components/Slider/sliderStyles.ts b/packages/react/src/themes/teams/components/Slider/sliderStyles.ts index f997557888..d9637d0db7 100644 --- a/packages/react/src/themes/teams/components/Slider/sliderStyles.ts +++ b/packages/react/src/themes/teams/components/Slider/sliderStyles.ts @@ -1,14 +1,41 @@ import * as React from 'react' import { SliderVariables } from './sliderVariables' import Slider, { SliderProps, SliderState } from '../../../../components/Slider/Slider' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import getBorderFocusStyles from '../../getBorderFocusStyles' +const selectors = { + WEBKIT_THUMB: '::-webkit-slider-thumb', + MOZ_THUMB: '::-moz-range-thumb', + MS_FILL_LOWER: '::-ms-fill-lower', + MS_FILL_UPPER: '::-ms-fill-upper', + MS_THUMB: '::-ms-thumb', +} + +const getCommonSlotStyles = (p: SliderProps, v: SliderVariables): ICSSInJSStyle => ({ + cursor: 'pointer', + pointerEvents: 'none', + position: 'absolute', + border: 0, + height: v.railHeight, + marginTop: `calc(${v.height} / 2 - ${v.railHeight} / 2)`, +}) + // this selector is used to identify the thumb slot from a previous sibling const thumbFromPreviousSiblingSelector = `&+ .${Slider.slotClassNames.thumb}` -const sliderStyles: ComponentSlotStylesInput = { - input: ({ variables: v, theme: { siteVariables } }): ICSSInJSStyle => { +const getFluidStyles = (p: SliderProps) => p.fluid && !p.vertical && { width: '100%' } + +const sliderStyles: ComponentSlotStylesPrepared = { + root: ({ props: p, variables: v }): ICSSInJSStyle => ({ + height: v.height, + + ...(p.disabled && { pointerEvents: 'none' }), + ...(p.vertical && { height: v.length, width: v.height }), + ...getFluidStyles(p), + }), + + input: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => { const activeThumbStyles: React.CSSProperties = { height: v.activeThumbHeight, width: v.activeThumbWidth, @@ -20,11 +47,30 @@ const sliderStyles: ComponentSlotStylesInput { + const transformOriginValue = `calc(${v.length} / 2)` + + return { + position: 'relative', + display: 'inline-block', + height: v.height, + width: v.length, + ...(p.vertical && { + transform: 'rotate(-90deg)', + transformOrigin: `${transformOriginValue} ${transformOriginValue}`, + }), + ...getFluidStyles(p), + } + }, + + rail: ({ props: p, variables: v }) => ({ + width: '100%', + background: v.railColor, + + ...getCommonSlotStyles(p, v), + ...(p.disabled && { background: v.disabledRailColor }), + }), + + track: ({ props: p, variables: v }) => ({ + background: v.trackColor, + + ...getCommonSlotStyles(p, v), + ...(p.disabled && { background: v.disabledTrackColor }), + }), + + thumb: ({ props: p, variables: v }) => ({ + border: 0, + borderRadius: '100%', + cursor: 'pointer', + pointerEvents: 'none', + position: 'absolute', + + background: v.thumbColor, + height: v.thumbHeight, + width: v.thumbWidth, + marginTop: `calc(${v.height} / 2 - ${v.thumbHeight} / 2)`, + marginLeft: `calc(-${v.thumbWidth} / 2)`, + + ...(p.disabled && { background: v.disabledThumbColor }), + }), } export default sliderStyles diff --git a/packages/react/src/themes/teams/components/Slider/sliderVariables.ts b/packages/react/src/themes/teams/components/Slider/sliderVariables.ts index cdcd6f7e5b..43d880df98 100644 --- a/packages/react/src/themes/teams/components/Slider/sliderVariables.ts +++ b/packages/react/src/themes/teams/components/Slider/sliderVariables.ts @@ -1,9 +1,26 @@ import { pxToRem } from '../../../../lib' import { SiteVariablesPrepared } from '../../../types' -import { SliderVariables as BaseSliderVariables } from '../../../base/components/Slider/sliderVariables' -export type SliderVariables = Partial +export interface SliderVariables { + height: string + length: string + railColor: string + railHeight: string + disabledRailColor: string + + thumbColor: string + activeThumbColor: string + disabledThumbColor: string + thumbHeight: string + activeThumbHeight: string + thumbBorderPadding: string + thumbWidth: string + activeThumbWidth: string + + trackColor: string + disabledTrackColor: string +} export default (siteVars: SiteVariablesPrepared): SliderVariables => { const { colorScheme } = siteVars diff --git a/packages/react/src/themes/teams/components/Status/statusStyles.ts b/packages/react/src/themes/teams/components/Status/statusStyles.ts index 87e05838ef..4dc83435a7 100644 --- a/packages/react/src/themes/teams/components/Status/statusStyles.ts +++ b/packages/react/src/themes/teams/components/Status/statusStyles.ts @@ -1,5 +1,5 @@ import { pxToRem, SizeValue } from '../../../../lib' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { StatusProps } from '../../../../components/Status/Status' import { StatusVariables } from './statusVariables' @@ -55,7 +55,7 @@ export const getSizeStyles = (sizeInPx: number, variables: StatusVariables) => { } } -const statusStyles: ComponentSlotStylesInput = { +const statusStyles: ComponentSlotStylesPrepared = { root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => { return { display: 'inline-flex', diff --git a/packages/react/src/themes/teams/components/Text/textStyles.ts b/packages/react/src/themes/teams/components/Text/textStyles.ts index c86819f1ce..9b16483cdd 100644 --- a/packages/react/src/themes/teams/components/Text/textStyles.ts +++ b/packages/react/src/themes/teams/components/Text/textStyles.ts @@ -2,18 +2,87 @@ import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' import { TeamsTextVariables } from './textVariables' import { TextProps } from '../../../../components/Text/Text' import { getColorSchemeKey } from '../../colors' +import translateAlignProp from '../../../../styles/translateAlignProp' export default { root: ({ - props: { atMention, color, important, timestamp }, + props: { + as, + atMention, + color, + important, + timestamp, + animation, + truncated, + disabled, + error, + success, + temporary, + align, + weight, + size, + }, variables: v, }: ComponentStyleFunctionParam): ICSSInJSStyle => { const colors = v.colorScheme[getColorSchemeKey(color)] return { ...(color && { color: colors.foreground }), - ...(atMention === 'me' && { fontWeight: v.atMentionMeFontWeight }), - ...(timestamp && { ':hover': { color: v.timestampHoverColor } }), - ...(important && { fontWeight: v.importantWeight }), + // animations are not working with span, unless display is set to 'inline-block' + ...(animation && as === 'span' && { display: 'inline-block' }), + ...(atMention === true && { color: v.atMentionOtherColor }), + ...(truncated && { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }), + ...(disabled && { color: v.disabledColor }), + ...(error && { color: v.errorColor }), + ...(success && { color: v.successColor }), + ...(temporary && { fontStyle: 'italic' }), + ...(align && { display: 'block', textAlign: translateAlignProp(align) }), // textAlign makes sense only for block elements + + ...(weight === 'light' && { fontWeight: v.fontWeightLight }), + ...(weight === 'semilight' && { fontWeight: v.fontWeightSemilight }), + ...(weight === 'regular' && { fontWeight: v.fontWeightRegular }), + ...(weight === 'semibold' && { fontWeight: v.fontWeightSemibold }), + ...(weight === 'bold' && { fontWeight: v.fontWeightBold }), + + ...(size === 'smallest' && { + fontSize: v.fontSizeSmallest, + lineHeight: v.fontLineHeightSmallest, + }), + ...(size === 'smaller' && { + fontSize: v.fontSizeSmaller, + lineHeight: v.fontLineHeightSmaller, + }), + ...(size === 'small' && { + fontSize: v.fontSizeSmall, + lineHeight: v.fontLineHeightSmall, + }), + ...(size === 'medium' && { + fontSize: v.fontSizeMedium, + lineHeight: v.fontLineHeightMedium, + }), + ...(size === 'large' && { + fontSize: v.fontSizeLarge, + lineHeight: v.fontLineHeightLarge, + }), + ...(size === 'larger' && { + fontSize: v.fontSizeLarger, + lineHeight: v.fontLineHeightLarger, + }), + ...(size === 'largest' && { + fontSize: v.fontSizeLargest, + lineHeight: v.fontLineHeightLargest, + }), + ...(atMention === 'me' && { + color: v.atMentionMeColor, + fontWeight: v.atMentionMeFontWeight, + }), + ...(timestamp && { + color: v.timestampColor, + ':hover': { color: v.timestampHoverColor }, + }), + ...(important && { + color: v.importantColor, + fontWeight: v.importantWeight, + }), } }, } diff --git a/packages/react/src/themes/teams/components/Text/textVariables.ts b/packages/react/src/themes/teams/components/Text/textVariables.ts index 849875c08e..6e1db559bc 100644 --- a/packages/react/src/themes/teams/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams/components/Text/textVariables.ts @@ -1,4 +1,3 @@ -import { TextVariables } from '../../../base/components/Text/textVariables' import { ItemType } from '../../../../themes/types' import { TeamsSchemeMappingWithAreas } from '../../types' import { stringLiteralsArray } from '../../../../lib' @@ -7,7 +6,40 @@ import { pickValuesFromColorScheme } from '../../../colorUtils' export const textColorAreas = stringLiteralsArray('foreground') export type TextColorSchemeMapping = TeamsSchemeMappingWithAreas> -export interface TeamsTextVariables extends TextVariables { +export interface TeamsTextVariables { + colorScheme: TextColorSchemeMapping + + importantColor: string + timestampColor: string + + disabledColor: string + errorColor: string + successColor: string + + fontSizeSmallest: string + fontSizeSmaller: string + fontSizeSmall: string + fontSizeMedium: string + fontSizeLarge: string + fontSizeLarger: string + fontSizeLargest: string + + fontLineHeightSmallest: number + fontLineHeightSmaller: number + fontLineHeightSmall: number + fontLineHeightMedium: number + fontLineHeightLarge: number + fontLineHeightLarger: number + fontLineHeightLargest: number + + fontWeightLight: number + fontWeightSemilight: number + fontWeightRegular: number + fontWeightSemibold: number + fontWeightBold: number + + atMentionMeColor: string + atMentionOtherColor: string atMentionMeFontWeight: number importantWeight: number timestampHoverColor: string @@ -16,6 +48,33 @@ export interface TeamsTextVariables extends TextVariables => { return { colorScheme: pickValuesFromColorScheme(siteVariables.colorScheme, textColorAreas), + + fontSizeSmallest: siteVariables.fontSizes.smallest, + fontLineHeightSmallest: siteVariables.lineHeightSmallest, + + fontSizeSmaller: siteVariables.fontSizes.smaller, + fontLineHeightSmaller: siteVariables.lineHeightSmaller, + + fontSizeSmall: siteVariables.fontSizes.small, + fontLineHeightSmall: siteVariables.lineHeightSmall, + + fontSizeMedium: siteVariables.fontSizes.medium, + fontLineHeightMedium: siteVariables.lineHeightMedium, + + fontSizeLarge: siteVariables.fontSizes.large, + fontLineHeightLarge: siteVariables.lineHeightLarge, + + fontSizeLarger: siteVariables.fontSizes.larger, + fontLineHeightLarger: siteVariables.lineHeightLarger, + + fontSizeLargest: siteVariables.fontSizes.largest, + fontLineHeightLargest: siteVariables.lineHeightLargest, + + fontWeightLight: siteVariables.fontWeightLight, + fontWeightSemilight: siteVariables.fontWeightSemilight, + fontWeightRegular: siteVariables.fontWeightRegular, + fontWeightSemibold: siteVariables.fontWeightSemibold, + fontWeightBold: siteVariables.fontWeightBold, atMentionOtherColor: siteVariables.colors.brand[600], atMentionMeColor: siteVariables.colors.orange[400], atMentionMeFontWeight: siteVariables.fontWeightBold, diff --git a/packages/react/src/themes/teams/components/TextArea/textAreaStyles.ts b/packages/react/src/themes/teams/components/TextArea/textAreaStyles.ts index ab2d6d757f..1c5540702e 100644 --- a/packages/react/src/themes/teams/components/TextArea/textAreaStyles.ts +++ b/packages/react/src/themes/teams/components/TextArea/textAreaStyles.ts @@ -1,8 +1,8 @@ import { TextAreaVariables } from './textAreaVariables' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' -import { TextAreaProps } from 'packages/react/src/components/TextArea/TextArea' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { TextAreaProps } from '../../../../components/TextArea/TextArea' -const textAreaStyles: ComponentSlotStylesInput = { +const textAreaStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ margin: v.margin, resize: v.resize, diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarCustomItemStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarCustomItemStyles.ts index 39b40b16f9..c66efead18 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarCustomItemStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarCustomItemStyles.ts @@ -1,9 +1,9 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { ToolbarCustomItemProps } from '../../../../components/Toolbar/ToolbarCustomItem' import { ToolbarVariables } from './toolbarVariables' import { getColorScheme } from '../../colors' -const toolbarCustomItemStyles: ComponentSlotStylesInput< +const toolbarCustomItemStyles: ComponentSlotStylesPrepared< ToolbarCustomItemProps, ToolbarVariables > = { diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarDividerStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarDividerStyles.ts index ab43ab490c..0b4b2f4d54 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarDividerStyles.ts @@ -1,8 +1,8 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { ToolbarVariables } from './toolbarVariables' import { getColorScheme } from '../../colors' -const toolbarDividerStyles: ComponentSlotStylesInput<{}, ToolbarVariables> = { +const toolbarDividerStyles: ComponentSlotStylesPrepared<{}, ToolbarVariables> = { root: ({ variables: v }): ICSSInJSStyle => { const colors = getColorScheme(v.colorScheme) return { diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarItemStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarItemStyles.ts index 95c67d9770..cdb3aac770 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarItemStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarItemStyles.ts @@ -1,10 +1,10 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { ToolbarItemProps } from '../../../../components/Toolbar/ToolbarItem' import { ToolbarVariables } from './toolbarVariables' import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles' import { getColorScheme } from '../../colors' -const toolbarItemStyles: ComponentSlotStylesInput = { +const toolbarItemStyles: ComponentSlotStylesPrepared = { root: ({ props: p, variables: v }): ICSSInJSStyle => { const colors = getColorScheme(v.colorScheme) diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuDividerStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuDividerStyles.ts index 4147adf8f7..0e1401c81e 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuDividerStyles.ts @@ -1,8 +1,8 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { ToolbarVariables } from './toolbarVariables' import { getColorScheme } from '../../colors' -const toolbarMenuDividerStyles: ComponentSlotStylesInput<{}, ToolbarVariables> = { +const toolbarMenuDividerStyles: ComponentSlotStylesPrepared<{}, ToolbarVariables> = { root: ({ variables: v }): ICSSInJSStyle => { const colors = getColorScheme(v.colorScheme) return { diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts index 922882de45..0a421d303e 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts @@ -41,9 +41,9 @@ const toolbarMenuItemStyles = { } }, - wrapper: { + wrapper: () => ({ display: 'block', - }, + }), } export default toolbarMenuItemStyles diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarRadioGroupStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarRadioGroupStyles.ts new file mode 100644 index 0000000000..f84dba0b1c --- /dev/null +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarRadioGroupStyles.ts @@ -0,0 +1,9 @@ +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' + +const toolbarRadioGroupStyles: ComponentSlotStylesPrepared = { + root: (): ICSSInJSStyle => ({ + whiteSpace: 'nowrap', + }), +} + +export default toolbarRadioGroupStyles diff --git a/packages/react/src/themes/base/components/Toolbar/toolbarStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarStyles.ts similarity index 68% rename from packages/react/src/themes/base/components/Toolbar/toolbarStyles.ts rename to packages/react/src/themes/teams/components/Toolbar/toolbarStyles.ts index be7f588e14..04615e8b28 100644 --- a/packages/react/src/themes/base/components/Toolbar/toolbarStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarStyles.ts @@ -1,6 +1,6 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' -const toolbarStyles: ComponentSlotStylesInput = { +const toolbarStyles: ComponentSlotStylesPrepared = { root: (): ICSSInJSStyle => ({ display: 'flex', alignItems: 'center', diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts index a8087b611e..97c864e84c 100644 --- a/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts +++ b/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { TooltipContentProps } from '../../../../components/Tooltip/TooltipContent' import { TooltipContentVariables } from './tooltipContentVariables' import getPointerStyles from '../../getPointerStyles' @@ -18,7 +18,7 @@ const getPointerOffset = ( ? v.pointerVerticalOffset : v.pointerHorizontalOffset -const tooltipContentStyles: ComponentSlotStylesInput< +const tooltipContentStyles: ComponentSlotStylesPrepared< TooltipContentProps, TooltipContentVariables > = { diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts index ab498c235d..56985a3db2 100644 --- a/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts +++ b/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts @@ -1,8 +1,8 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { TooltipProps } from '../../../../components/Tooltip/Tooltip' import { TooltipVariables } from './tooltipVariables' -const tooltipStyles: ComponentSlotStylesInput = { +const tooltipStyles: ComponentSlotStylesPrepared = { root: (): ICSSInJSStyle => ({}), content: ({ variables: v, props: p }): ICSSInJSStyle => ({ diff --git a/packages/react/src/themes/teams/components/Tree/treeItemStyles.ts b/packages/react/src/themes/teams/components/Tree/treeItemStyles.ts index 3df335b11e..480b771f29 100644 --- a/packages/react/src/themes/teams/components/Tree/treeItemStyles.ts +++ b/packages/react/src/themes/teams/components/Tree/treeItemStyles.ts @@ -1,10 +1,10 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { pxToRem } from '../../../../lib' import getBorderFocusStyles from '../../getBorderFocusStyles' import { TreeItemProps } from '../../../../components/Tree/TreeItem' import TreeTitle from '../../../../components/Tree/TreeTitle' -const treeItemStyles: ComponentSlotStylesInput = { +const treeItemStyles: ComponentSlotStylesPrepared = { root: ({ theme: { siteVariables }, props: p }): ICSSInJSStyle => ({ listStyleType: 'none', padding: `0 0 0 ${pxToRem(1 + (p.level - 1) * 10)}`, diff --git a/packages/react/src/themes/teams/components/Video/videoStyles.ts b/packages/react/src/themes/teams/components/Video/videoStyles.ts index e5e0075e59..70baf85e77 100644 --- a/packages/react/src/themes/teams/components/Video/videoStyles.ts +++ b/packages/react/src/themes/teams/components/Video/videoStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' import { VideoProps } from '../../../../components/Video/Video' import { VideoVariables } from './videoVariables' @@ -9,4 +9,4 @@ export default { width: v.width, height: v.height || 'auto', }), -} as ComponentSlotStylesInput +} as ComponentSlotStylesPrepared diff --git a/packages/react/src/themes/teams/index.tsx b/packages/react/src/themes/teams/index.tsx index f5abc55419..8856eaa7e7 100644 --- a/packages/react/src/themes/teams/index.tsx +++ b/packages/react/src/themes/teams/index.tsx @@ -1,7 +1,5 @@ import { ThemeIconSpec, ThemeIcons, SvgIconSpec } from '../types' -import mergeThemes from '../../lib/mergeThemes' -import base from '../base' import animations from './animations' import * as siteVariables from './siteVariables' import * as componentVariables from './componentVariables' @@ -48,7 +46,7 @@ const icons: ThemeIcons = { 'stardust-play': themeIcons['play'], } -export default mergeThemes(base, { +export default { siteVariables, componentVariables, componentStyles, @@ -56,4 +54,4 @@ export default mergeThemes(base, { staticStyles, icons, animations, -}) +}