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

BREAKING: Button - implement dark theme and match redlines #336

Merged
merged 14 commits into from
Oct 16, 2018
Merged
Show file tree
Hide file tree
Changes from 13 commits
Commits
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
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm

## [Unreleased]

### BREAKING
- Removed `type...` prefix from multiple variables in `buttonStyles.ts` @bcalvery ([#336](https://github.com/stardust-ui/react/pull/336))

### Documentation
- Add `Usage` examples for `Button` showing style override @bcalvery ([#336](https://github.com/stardust-ui/react/pull/336))

### Fixes
- Fix for cropped rounded corners in `Menu` component @Bugaa92 ([#360](https://github.com/stardust-ui/react/pull/360))

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React from 'react'
import { Button, Provider } from '@stardust-ui/react'

const ButtonUsageExampleShorthand = () => (
<div>
<Provider
theme={{
componentVariables: {
Button: siteVariables => ({
color: siteVariables.brand06,
colorActive: siteVariables.brand04,
colorHover: siteVariables.brand04,
colorFocus: siteVariables.brand02,
backgroundColor: siteVariables.black,
backgroundColorActive: siteVariables.brand14,
backgroundColorHover: siteVariables.brand16,
backgroundColorFocus: siteVariables.brand14,
borderColor: siteVariables.brand14,
borderColorActive: siteVariables.brand12,
borderColorHover: siteVariables.brand12,
borderColorFocus: siteVariables.black,
borderColorFocusIndicator: siteVariables.brand02,
}),
},
}}
>
<Button content="Tinted Button" />
</Provider>
This button's styling is only applicable to dark theme.
<br />
<br />
<Provider
theme={{
componentVariables: {
Button: siteVariables => ({
color: siteVariables.brand06,
colorActive: siteVariables.brand06,
colorHover: siteVariables.brand06,
colorFocus: siteVariables.brand02,
backgroundColor: siteVariables.white,
backgroundColorActive: siteVariables.brand14,
backgroundColorHover: siteVariables.brand16,
backgroundColorFocus: siteVariables.brand14,
borderColor: siteVariables.brand14,
borderColorActive: siteVariables.brand12,
borderColorHover: siteVariables.brand12,
borderColorFocus: siteVariables.white,
borderColorFocusIndicator: siteVariables.brand02,
}),
},
}}
>
<Button content="Tinted Button" />
</Provider>
This button's styling is only applicable to light theme.
</div>
)

export default ButtonUsageExampleShorthand
15 changes: 15 additions & 0 deletions docs/src/examples/components/Button/Usage/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react'
import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'

const Usage = () => (
<ExampleSection title="Usage">
<ComponentExample
title="Tinted Example"
description="A button used in cards is a &quot;tinted&quot; version of a default button."
examplePath="components/Button/Usage/ButtonUsageExample"
/>
</ExampleSection>
)

export default Usage
2 changes: 2 additions & 0 deletions docs/src/examples/components/Button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@ import Types from './Types'
import Variations from './Variations'
import States from './States'
import Groups from './Groups'
import Usage from './Usage'

const ButtonExamples = () => (
<div>
<Types />
<States />
<Variations />
<Groups />
<Usage />
</div>
)

Expand Down
26 changes: 12 additions & 14 deletions docs/src/views/ThemingExamples.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,6 @@ export default () => (
].join('\n')}
render={() => (
<Button
type="secondary"
content="Send email"
icon={{ name: 'at', styles: { color: 'brown' } }}
styles={{
Expand All @@ -130,15 +129,14 @@ export default () => (
``,
`const btnExample = () => `,
` <Button`,
` type="secondary"`,
` icon={{`,
` name: "at",`,
` variables: { color: "brown" }`,
` }}`,
` content="Send email"`,
` variables={{`,
` typeSecondaryColor: "coral",`,
` typeSecondaryBackgroundColor: "charcoal"`,
` secondaryColor: "coral",`,
` secondaryBackgroundColor: "charcoal"`,
` paddingLeftRightValue: 20`,
` }}`,
` />`,
Expand All @@ -151,8 +149,8 @@ export default () => (
content="Send email"
icon={{ name: 'at', variables: { color: 'brown' } }}
variables={{
typeSecondaryColor: 'coral',
typeSecondaryBackgroundColor: 'charcoal',
secondaryColor: 'coral',
secondaryBackgroundColor: 'charcoal',
paddingLeftRightValue: 20,
}}
/>
Expand Down Expand Up @@ -203,10 +201,10 @@ export default () => (
` minWidth: '24px',`,
` borderRadius: '8px',`,
` color: 'darkred',`,
` typeSecondaryColor: '#ffffff',`,
` typeSecondaryBorderColor: 'transparent',`,
` typeSecondaryBackgroundColor: '#6699CC',`,
` typeSecondaryBackgroundColorHover: '#91A3B0',`,
` secondaryColor: '#ffffff',`,
` secondaryBorderColor: 'transparent',`,
` secondaryBackgroundColor: '#6699CC',`,
` secondaryBackgroundColorHover: '#91A3B0',`,
` },`,
` },`,
` componentStyles: {`,
Expand Down Expand Up @@ -252,10 +250,10 @@ export default () => (
minWidth: '24px',
borderRadius: '8px',
color: 'darkred',
typeSecondaryColor: '#ffffff',
typeSecondaryBorderColor: 'transparent',
typeSecondaryBackgroundColor: '#6699CC',
typeSecondaryBackgroundColorHover: '#91A3B0',
secondaryColor: '#ffffff',
secondaryBorderColor: 'transparent',
secondaryBackgroundColor: '#6699CC',
secondaryBackgroundColorHover: '#91A3B0',
},
},
componentStyles: {
Expand Down
149 changes: 97 additions & 52 deletions src/themes/teams-dark/components/Button/buttonVariables.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,108 @@ export interface IButtonVariables {
[key: string]: string | number

color: string
colorActive: string
colorHover: string
colorFocus: string
colorDisabled: string
backgroundColor: string
backgroundColorActive: string
backgroundColorHover: string
typePrimaryColor: string
typePrimaryBackgroundColor: string
typePrimaryBackgroundColorActive: string
typePrimaryBackgroundColorHover: string
typePrimaryBorderColor: string
typePrimaryBorderColorFocus: string
typePrimaryBorderColorInsetFocus: string
typeSecondaryColor: string
typeSecondaryBackgroundColor: string
typeSecondaryBackgroundColorActive: string
typeSecondaryBackgroundColorHover: string
typeSecondaryBackgroundColorFocus: string
typeSecondaryBorderColor: string
typeSecondaryBorderColorActive: string
typeSecondaryBorderColorHover: string
typeSecondaryBorderColorFocus: string
typeSecondaryBorderColorInsetFocus: string
typeDisabledButtonColor: string
typeDisabledButtonBackgroundColor: string
typeTextColorHover: string
typeTextPrimaryColor: string
typeTextPrimaryColorHover: string
typeTextSecondaryColor: string
typeTextSecondaryColorHover: string
backgroundColorFocus: string
backgroundColorDisabled: string
borderColor: string
borderColorActive: string
borderColorHover: string
borderColorFocus: string
borderColorFocusIndicator: string
borderColorDisabled: string

primaryColor: string
primaryBackgroundColor: string
primaryBackgroundColorActive: string
primaryBackgroundColorHover: string
primaryBackgroundColorFocus: string
primaryBorderColor: string
primaryBorderColorActive: string
primaryBorderColorHover: string
primaryBorderColorFocus: string
primaryBorderColorFocusIndicator: string

primaryCircularBorderColorFocusIndicator: string

circularColor: string
circularColorActive: string
circularBackgroundColor: string
circularBackgroundColorActive: string
circularBackgroundColorHover: string
circularBackgroundColorFocus: string
circularBorderColor: string
circularBorderColorActive: string
circularBorderColorHover: string
circularBorderColorFocus: string
circularBorderColorFocusIndicator: string

textColor: string
textColorHover: string
textPrimaryColor: string
textPrimaryColorHover: string
textSecondaryColor: string
textSecondaryColorHover: string

boxShadow: string
}

export default (siteVars: any): IButtonVariables => {
return {
color: siteVars.black,
backgroundColor: siteVars.gray08,
backgroundColorHover: siteVars.gray06,
typePrimaryColor: siteVars.white,
typePrimaryBackgroundColor: siteVars.brand,
typePrimaryBackgroundColorActive: siteVars.brand02,
typePrimaryBackgroundColorHover: siteVars.brand04,
typePrimaryBackgroundColorFocus: siteVars.brand04,
typePrimaryBorderColor: 'transparent',
typePrimaryBorderColorFocus: siteVars.black,
typePrimaryBorderColorInsetFocus: siteVars.white,
typeSecondaryColor: siteVars.white,
typeSecondaryBackgroundColor: siteVars.black,
typeSecondaryBackgroundColorActive: siteVars.gray08,
typeSecondaryBackgroundColorHover: siteVars.brand04,
typeSecondaryBackgroundColorFocus: siteVars.gray08,
typeSecondaryBorderColor: siteVars.white,
typeSecondaryBorderColorActive: siteVars.gray06,
typeSecondaryBorderColorHover: siteVars.gray06,
typeSecondaryBorderColorFocus: siteVars.black,
typeSecondaryBorderColorInsetFocus: siteVars.white,
typeDisabledButtonColor: siteVars.gray08,
typeDisabledButtonBackgroundColor: siteVars.gray09,
typeTextColorHover: siteVars.brand04,
typeTextPrimaryColor: siteVars.brand,
typeTextPrimaryColorHover: siteVars.brand04,
typeTextSecondaryColor: siteVars.gray03,
typeTextSecondaryColorHover: siteVars.brand04,
color: siteVars.white,
colorActive: siteVars.white,
colorHover: siteVars.white,
colorFocus: siteVars.white,
colorDisabled: siteVars.gray06,
backgroundColor: 'transparent',
backgroundColorActive: siteVars.gray08,
backgroundColorHover: siteVars.gray14,
backgroundColorFocus: siteVars.gray08,
backgroundColorDisabled: siteVars.gray09,
borderColor: siteVars.gray08,
borderColorActive: siteVars.gray06,
borderColorHover: siteVars.gray06,
borderColorFocus: siteVars.black,
borderColorFocusIndicator: siteVars.white,
borderColorDisabled: 'transparent',

primaryColor: siteVars.white,
primaryBackgroundColor: siteVars.brand,
primaryBackgroundColorActive: siteVars.brand08,
primaryBackgroundColorHover: siteVars.brand08,
primaryBackgroundColorFocus: siteVars.brand14,
primaryBorderColor: 'transparent',
primaryBorderColorActive: 'transparent',
primaryBorderColorHover: 'transparent',
primaryBorderColorFocus: siteVars.black,
primaryBorderColorFocusIndicator: siteVars.white,

primaryCircularBorderColorFocusIndicator: siteVars.white,

circularColor: siteVars.gray02,
circularColorActive: siteVars.black,
circularBackgroundColor: 'transparent',
circularBackgroundColorActive: siteVars.gray02,
circularBackgroundColorHover: siteVars.gray03,
circularBackgroundColorFocus: siteVars.gray02,
circularBorderColor: siteVars.gray02,
circularBorderColorActive: 'transparent',
circularBorderColorHover: 'transparent',
circularBorderColorFocus: 'transparent',
circularBorderColorFocusIndicator: siteVars.black,

textColor: siteVars.brand,
textColorHover: siteVars.brand04,
textPrimaryColor: siteVars.brand,
textPrimaryColorHover: siteVars.brand04,
textSecondaryColor: siteVars.gray03,
textSecondaryColorHover: siteVars.brand04,

boxShadow: siteVars.shadowLevel1,
}
}
14 changes: 9 additions & 5 deletions src/themes/teams-dark/siteVariables.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@ import { white, green } from '../teams/siteVariables'
//
// COLORS
//
export const black = '#201f1e'

export const black = '#201f1f'
export const gray02 = '#c8c6c4'
export const gray03 = '#b3b0ad'
export const gray04 = '#8a8886'
export const gray06 = '#605e5c'
export const gray08 = '#484644'
export const gray09 = '#3b3a39'
export const gray10 = '#323130'
export const gray14 = '#292827'
export const gray09 = '#323130'
export const gray10 = '#2d2c2c'
export const gray14 = '#292828'

export const brand = '#6264A7'
export const brand02 = '#e2e2f6'
Expand All @@ -30,6 +29,11 @@ export const red = '#d74654'
export const red08 = '#4f232b'
export const green04 = green

//
// SHADOW LEVELS
//
export const shadowLevel1 = '0 .2rem .4rem -.075rem rgba(255, 255, 255, 0.1)'

//
// SEMANTIC ASSIGNMENTS
//
Expand Down
Loading