Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Refactor alert colors to variables #2285

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Refactor alert colors to variables #2285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fb1eb63
Refactor alert colors to variables
Jan 29, 2020
3ff712d
Update alertStyles.ts
Jan 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions packages/react/src/themes/teams/components/Alert/alertStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ComponentSlotStylesPrepared, ICSSInJSStyle, SiteVariablesPrepared } from '@fluentui/styles'
import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
import { AlertProps } from '../../../../components/Alert/Alert'
import { AlertVariables } from './alertVariables'
import getBorderFocusStyles from '../../getBorderFocusStyles'
Expand All @@ -7,9 +7,7 @@ import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles'
const getIntentColorsFromProps = (
p: AlertProps,
v: AlertVariables,
siteVars: SiteVariablesPrepared,
): ICSSInJSStyle => {
const { colors } = siteVars

if (p.danger) {
return {
Expand Down Expand Up @@ -45,17 +43,17 @@ const getIntentColorsFromProps = (

if (p.success) {
return {
color: colors.green[600], // $app-green-04
backgroundColor: colors.grey[50], // $app-white
borderColor: colors.green[200], // $app-green
color: v.successColor,
backgroundColor: v.successBackgroundColor,
borderColor: v.successBorderColor,
}
}

if (p.warning) {
return {
color: siteVars.colors.grey[450],
backgroundColor: colors.grey[50], // $app-white
borderColor: colors.yellow[400], // $app-yellow
color: v.warningColor,
backgroundColor: v.warningBackgroundColor,
borderColor: v.warningBorderColor,
}
}

Expand All @@ -79,7 +77,7 @@ const alertStyles: ComponentSlotStylesPrepared<AlertProps, AlertVariables> = {
fontWeight: v.fontWeight,
visibility: 'visible',

...getIntentColorsFromProps(p, v, siteVariables),
...getIntentColorsFromProps(p, v),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


...((p.attached === 'top' || p.attached === true) && {
borderRadius: `${v.borderRadius} ${v.borderRadius} 0 0`,
Expand Down
16 changes: 16 additions & 0 deletions packages/react/src/themes/teams/components/Alert/alertVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,19 @@ export interface AlertVariables {
infoBackgroundColor: string
infoBorderColor: string

successColor: string
successBackgroundColor: string
successBorderColor: string

urgent: boolean
urgentColor: string
urgentBackgroundColor: string
urgentBorderColor: string

warningColor: string
warningBackgroundColor: string
warningBorderColor: string

headerFontWeight: FontWeightProperty
headerMargin: string

Expand Down Expand Up @@ -77,11 +85,19 @@ export default (siteVars: SiteVariablesPrepared): AlertVariables => {
infoBackgroundColor: siteVars.colors.grey[150],
infoBorderColor: siteVars.colors.grey[200],

successColor: siteVars.colors.green[600],
successBackgroundColor: siteVars.colors.grey[50],
successBorderColor: siteVars.colors.green[200],

urgent: false,
urgentColor: siteVars.colors.white,
urgentBackgroundColor: siteVars.colors.red[400],
urgentBorderColor: siteVars.colors.red[400],

warningColor: siteVars.colors.grey[450],
warningBackgroundColor: siteVars.colors.grey[50],
warningBorderColor: siteVars.colors.yellow[400],

headerFontWeight: siteVars.fontWeightBold,
headerMargin: `0 ${pxToRem(10)} 0 0`,

Expand Down