Merge pull request #1467 from cozy/theme-improvements

docs/ThemeChooser.jsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react'
+import CozyTheme from '../react/CozyTheme'
+
+const ThemeChooser = ({ children }) => {
+  const [theme, setTheme] = useState('normal')
+  const handleChange = ev => setTheme(ev.target.value)
+  return (
+    <>
+      theme:{' '}
+      <select onChange={handleChange}>
+        <option value="normal">normal</option>
+        <option value="inverted">inverted</option>
+      </select>
+      <CozyTheme variant={theme}>{children}</CozyTheme>
+    </>
+  )
+}
+
+export default ThemeChooser

docs/IconSpriteInjector.jsx → docs/components/SectionsRenderer.jsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import DefaultSectionsRenderer from 'react-styleguidist/lib/client/rsg-components/Sections/SectionsRenderer'
-import IconSprite from '../react/Icon/Sprite'
+import IconSprite from '../../react/Icon/Sprite'
 
-export default class IconSpriteInjector extends Component {
+export default class SectionsRenderer extends Component {
   render() {
     return (
       <>

docs/styleguide.config.js

@@ -185,7 +185,7 @@ module.exports = {
     }
   },
   styleguideComponents: {
-    SectionsRenderer: path.join(__dirname, 'IconSpriteInjector.jsx')
+    SectionsRenderer: path.join(__dirname, 'components/SectionsRenderer.jsx'),
   },
   theme: {
     fontFamily: {

react/Breadcrumbs/Readme.md

@@ -8,6 +8,7 @@ context.
 import { Component } from 'react'
 import Breadcrumbs from '.';
 import Icon from '../Icon'
+import ThemeChooser from '../../docs/ThemeChooser'
 
 const items = [
   { 
@@ -32,10 +33,10 @@ const items = [
 
 const Items = ({ items, onClickItem }) => {
   return items.map(item => (
-    <div style={{ height: '2rem', display: 'flex', alignItems: 'center'}} className={item.items ? 'u-c-pointer' : null } onClick={() => onClickItem(item)}>
+    <div style={{ color: 'var(--primaryTextColor)', height: '2rem', display: 'flex', alignItems: 'center'}} className={item.items ? 'u-c-pointer' : null } onClick={() => onClickItem(item)}>
       <Icon
         icon={!item.items ? 'file' : 'folder'}
-        className='u-mr-half' color='var(--primaryColor)' />
+        className='u-mr-half' color='var(--primaryTextColor)' />
       { item.name }
     </div>
   ))
@@ -71,12 +72,16 @@ class Example extends Component {
   render() {
     const { breadcrumbs } = this.state
     const last = breadcrumbs[breadcrumbs.length - 1]
-    return <div>
+    return <div className='u-p-1'>
       <Breadcrumbs items={breadcrumbs} />
       <Items items={last.items} onClickItem={this.handleGoDown} />
     </div>
   }
 }
 
-<Example />
+<>
+  <ThemeChooser>
+    <Example />
+  </ThemeChooser>
+</>
 ```

react/Breadcrumbs/index.jsx

@@ -47,20 +47,13 @@ BreadcrumbItem.propTypes = {
   showSeparator: PropTypes.bool
 }
 
-const Breadcrumbs = ({ items, className, theme, style }) => {
+const Breadcrumbs = ({ items, className, style }) => {
   const previousItems = items.slice(0, -1)
   const [lastPreviousItem] = previousItems.slice(-1)
   const [currentItem] = items.slice(-1)
 
   return (
-    <div
-      style={style}
-      className={cx(
-        styles.Breadcrumb,
-        className,
-        styles[`Breadcrumb--${theme}`]
-      )}
-    >
+    <div style={style} className={cx(styles.Breadcrumb, className)}>
       {items.length > 1 && (
         <Icon
           icon={'left'}
@@ -90,13 +83,8 @@ const Breadcrumbs = ({ items, className, theme, style }) => {
   )
 }
 
-Breadcrumbs.defaultProps = {
-  theme: 'default'
-}
-
 Breadcrumbs.propTypes = {
   className: PropTypes.string,
-  theme: PropTypes.oneOf(['default', 'primary']),
   items: PropTypes.arrayOf(PropTypes.shape(itemPropTypes))
 }
 

react/Breadcrumbs/styles.styl

@@ -4,26 +4,15 @@
 .Breadcrumb
     display flex
     align-items center
+    color var(--primaryTextColor)
 
 .Breadcrumb__previousButton
     margin-right (spacing_values.m)
     cursor pointer
 
-    .Breadcrumb--default &
-        color var(--charcoalGrey)
-
-    .Breadcrumb--primary &
-        color var(--primaryContrastTextColor)
-
 .Breadcrumb__items
     flex-grow 1
 
-    .Breadcrumb--default &
-        color var(--charcoalGrey)
-
-    .Breadcrumb--primary &
-        color var(--primaryContrastTextColor)
-
 .Breadcrumb__previousItems
     display flex
 

react/CozyTheme/Readme.md

@@ -1,7 +1,7 @@
 An area of a page can have a different CozyTheme and components inside
 will be automatically styled.
 
-- At the moment only some Buttons support this.
+- At the moment only a few components support this (Buttons / Breadcrumbs / Figure).
 
 
 ```
@@ -29,6 +29,13 @@ const themesSupportingContext = [
   )}
   <SubTitle className='u-white'>BarButton</SubTitle>
   <BarButton icon='dots' />
+  <div className='u-bg-white u-p-1'>
+    We can always go back to normal theme if a child must "get out"
+    of the theme.
+    <CozyTheme variant='normal'>
+      <Button className='u-ml-0 u-mt-half' theme='primary' label='Primary button' />
+    </CozyTheme>
+  </div>
 </CozyTheme>
 ```
 

react/CozyTheme/index.jsx

@@ -1,14 +1,20 @@
 import React, { createContext, useContext } from 'react'
 import MuiCozyTheme from '../MuiCozyTheme'
 import styles from './styles.styl'
+import paletteStyles from '../../stylus/settings/palette.styl'
 import cx from 'classnames'
 
 export const CozyThemeContext = createContext()
 
+const allStyles = {
+  ...styles,
+  'CozyTheme--normal': paletteStyles['CozyTheme--normal']
+}
+
 const CozyTheme = ({ variant, children, className }) => (
   <CozyThemeContext.Provider value={variant}>
     <MuiCozyTheme variant={variant}>
-      <div className={cx(className, styles[`CozyTheme--${variant}`])}>
+      <div className={cx(className, allStyles[`CozyTheme--${variant}`])}>
         {children}
       </div>
     </MuiCozyTheme>

react/CozyTheme/styles.styl

@@ -3,6 +3,9 @@ $translucentWhite2=rgba(255, 255, 255, 0.88)
 
 .CozyTheme--inverted
     background: var(--primaryColor)
+
+    --primaryTextColor: var(--primaryContrastTextColor)
+    --secondaryTextColor: var(--primaryContrastTextColor)
     --barIconColor var(--primaryContrastTextColor)
     --barIconColorDisabled $translucentWhite2
 

react/Figure/Figure.jsx

@@ -23,7 +23,6 @@ const Figure = props => {
     warningLimit,
     signed,
     className,
-    theme = 'default',
     total,
     totalClassName,
     currencyClassName,
@@ -50,7 +49,6 @@ const Figure = props => {
   return (
     <div
       className={cx(
-        styles[theme],
         {
           [stylePositive]: isTotalPositive && coloredPositive,
           [styleNegative]:

react/Figure/Figure.styl

@@ -1,30 +1,27 @@
 @require 'settings/breakpoints'
 
-.default
-    &.Figure-currency
-        color var(--coolGrey)
 
-    &.Figure-content--positive
+&.Figure-currency
+    color var(--secondaryTextColor)
+
+&.Figure-content--positive
+    color var(--emerald)
+
+    .Figure-currency
         color var(--emerald)
 
-        .Figure-currency
-            color var(--emerald)
+&.Figure-content--negative
+    color var(--pomegranate)
 
-    &.Figure-content--negative
+    .Figure-currency
         color var(--pomegranate)
 
-        .Figure-currency
-            color var(--pomegranate)
+&.Figure-content--warning
+    color var(--texasRose)
 
-    &.Figure-content--warning
+    .Figure-currency
         color var(--texasRose)
 
-        .Figure-currency
-            color var(--texasRose)
-
-.primary
-    color var(--white)
-
 .Figure-total
     font-weight    900
 

react/Figure/FigureBlock.md

@@ -1,24 +1,34 @@
 Pour montrer une KPI importante.
 
 ```jsx
-import { FigureBlock } from 'cozy-ui/transpiled/react/Figure';
-<div>
-  <FigureBlock
-    label='Balance totale'
-    total={1000}
-    symbol='€'
-    coloredPositive coloredNegative signed />
+import { FigureBlock } from 'cozy-ui/transpiled/react/Figure'
+import ThemeChooser from '../../docs/ThemeChooser'
 
-  <FigureBlock
-    label='Balance totale (negative number)'
-    total={-1000}
-    symbol='€'
-    coloredPositive coloredNegative signed />
+const Example = () => {
+  return (
+    <div>
+      <FigureBlock
+        label='Balance totale'
+        total={1000}
+        symbol='€'
+        coloredPositive coloredNegative signed />
 
-  <FigureBlock
-    label='Balance totale (no color)'
-    total={-1000}
-    symbol='€'
-    signed />
-</div>
+      <FigureBlock
+        label='Balance totale (negative number)'
+        total={-1000}
+        symbol='€'
+        coloredPositive coloredNegative signed />
+
+      <FigureBlock
+        label='Balance totale (no color)'
+        total={-1000}
+        symbol='€'
+        signed />
+    </div>
+  )
+}
+
+<ThemeChooser>
+  <Example />
+</ThemeChooser>
 ```

react/Figure/FigureBlock.styl

@@ -1,7 +1,7 @@
 @require 'settings/breakpoints'
 
 .FigureBlock
-    color var(--charcoalGrey)
+    color var(--primaryTextColor)
 
 .FigureBlock-figure
     font-size 2rem