@@ -12,6 +12,8 @@ import { CopyToClipboard } from 'react-copy-to-clipboard/lib/Component';
1212
1313import colorTokens from '../../data/guidelines/color-tokens' ;
1414
15+ import { themes } from '@carbon/themes' ;
16+
1517export default class ColorTokenTable extends React . Component {
1618 static propTypes = { } ;
1719
@@ -27,21 +29,34 @@ export default class ColorTokenTable extends React.Component {
2729
2830 renderValue = ( token , tokenInfo ) => {
2931 const currentTheme = this . state . theme ;
30- const value = tokenInfo . value ;
32+ console . log ( themes ) ;
33+ let newFormattedToken = token . replace ( '$' , '' ) ;
34+ newFormattedToken = newFormattedToken . split ( '-' ) ;
35+ newFormattedToken = `${ newFormattedToken [ 0 ] } ${ newFormattedToken [ 1 ]
36+ . charAt ( 1 )
37+ . toUpperCase ( ) + newFormattedToken [ 1 ] . substring ( 1 ) } `;
38+ console . log ( newFormattedToken ) ;
39+ const formattedToken = token . replace ( '$' , '' ) . replace ( '-' , '' ) ;
40+ // const value = tokenInfo.value;
3141 return (
3242 < div className = "color-token-value" >
3343 < ul >
34- < li > { value [ currentTheme ] . name } </ li >
44+ { /* <li>{value[currentTheme].name}</li> */ }
3545 < li > —</ li >
36- < li > { value [ currentTheme ] . hex } </ li >
46+ < li > { themes [ currentTheme ] [ formattedToken ] } </ li >
3747 </ ul >
3848 < div >
3949 < div
4050 className = "color-token-value__block"
41- style = { { backgroundColor : value [ currentTheme ] . hex } }
51+ style = { {
52+ backgroundColor : themes [ currentTheme ] [ formattedToken ] ,
53+ border :
54+ themes [ currentTheme ] [ formattedToken ] === '#ffffff' &&
55+ '1px solid #BEBEBE' ,
56+ } }
4257 />
4358 < OverflowMenu floatingMenu = { false } >
44- < CopyToClipboard text = { value [ currentTheme ] . hex } >
59+ < CopyToClipboard text = { themes [ currentTheme ] [ formattedToken ] } >
4560 < OverflowMenuItem itemText = "Copy hex" />
4661 </ CopyToClipboard >
4762 < CopyToClipboard text = { token } >
@@ -53,17 +68,17 @@ export default class ColorTokenTable extends React.Component {
5368 ) ;
5469 } ;
5570
56- renderToken = ( token , tokenInfo ) => {
71+ renderToken = ( token , tokenInfo , key ) => {
5772 const roles = tokenInfo . role . map ( ( role , i ) => {
5873 return (
59- < li >
74+ < li key = { i } >
6075 { role }
6176 { i !== tokenInfo . role . length - 1 && ';' }
6277 </ li >
6378 ) ;
6479 } ) ;
6580 return (
66- < tr >
81+ < tr key = { key } >
6782 < td >
6883 < code > { token } </ code >
6984 </ td >
@@ -83,9 +98,9 @@ export default class ColorTokenTable extends React.Component {
8398 className = "color-token-table__theme-switcher"
8499 onChange = { this . switchTheme } >
85100 < Switch name = "white" text = "White" />
86- < Switch name = "gray-10 " text = "Gray 10" />
87- < Switch name = "gray-100 " text = "Gray 100" />
88- < Switch name = "gray-90 " text = "Gray 90" />
101+ < Switch name = "g10 " text = "Gray 10" />
102+ < Switch name = "g100 " text = "Gray 100" />
103+ < Switch name = "g90 " text = "Gray 90" />
89104 </ ContentSwitcher >
90105 </ div >
91106 < div className = "ibm--col-lg-7 ibm--offset-lg-4" >
@@ -101,8 +116,13 @@ export default class ColorTokenTable extends React.Component {
101116 </ tr >
102117 </ thead >
103118 < tbody >
104- { Object . keys ( colorTokens ) . map ( token => {
105- return this . renderToken ( token , colorTokens [ token ] ) ;
119+ { Object . keys ( colorTokens [ 'core-tokens' ] ) . map ( ( token , i ) => {
120+ console . log ( colorTokens [ 'core-tokens' ] [ token ] ) ;
121+ return this . renderToken (
122+ token ,
123+ colorTokens [ 'core-tokens' ] [ token ] ,
124+ i
125+ ) ;
106126 } ) }
107127 </ tbody >
108128 </ table >
@@ -120,8 +140,12 @@ export default class ColorTokenTable extends React.Component {
120140 </ tr >
121141 </ thead >
122142 < tbody >
123- { Object . keys ( colorTokens ) . map ( token => {
124- return this . renderToken ( token , colorTokens [ token ] ) ;
143+ { Object . keys ( colorTokens [ 'core-tokens' ] ) . map ( ( token , i ) => {
144+ return this . renderToken (
145+ token ,
146+ colorTokens [ 'core-tokens' ] [ token ] ,
147+ i
148+ ) ;
125149 } ) }
126150 </ tbody >
127151 </ table >
@@ -139,9 +163,15 @@ export default class ColorTokenTable extends React.Component {
139163 </ tr >
140164 </ thead >
141165 < tbody >
142- { Object . keys ( colorTokens ) . map ( token => {
143- return this . renderToken ( token , colorTokens [ token ] ) ;
144- } ) }
166+ { Object . keys ( colorTokens [ 'interaction-tokens' ] ) . map (
167+ ( token , i ) => {
168+ return this . renderToken (
169+ token ,
170+ colorTokens [ 'interaction-tokens' ] [ token ] ,
171+ i
172+ ) ;
173+ }
174+ ) }
145175 </ tbody >
146176 </ table >
147177 </ div >
0 commit comments