diff --git a/src/views/Theme/Colors/Colors.js b/src/views/Theme/Colors/Colors.js index 8857024..51498db 100644 --- a/src/views/Theme/Colors/Colors.js +++ b/src/views/Theme/Colors/Colors.js @@ -1,4 +1,63 @@ import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import classNames from 'classnames'; +import { Row, Col } from 'reactstrap' +import { rgbToHex }from '@coreui/coreui/js/src/utilities/' + +class ThemeView extends Component { + constructor(props) { + super(props); + this.state = { + bgColor: 'rgb(255, 0, 0)' + } + } + + componentDidMount () { + const elem = ReactDOM.findDOMNode(this).parentNode.firstChild + const color = window.getComputedStyle(elem).getPropertyValue('background-color') + this.setState({ + bgColor: color + }) + } + + render() { + + return ( + + + + + + + + + + + +
HEX:{ rgbToHex(this.state.bgColor) }
RGB:{ this.state.bgColor }
+ ) + } +} + +class ThemeColor extends Component { + constructor(props) { + super(props); + } + render() { + + const { className, children, ...attributes } = this.props + + const classes = classNames(className, 'theme-color w-75 rounded mb-3') + + return ( + +
+ {children} + + + ) + } +} class Colors extends Component { render() { @@ -9,32 +68,32 @@ class Colors extends Component { Theme colors
-
-
-
Primary
-
-
-
Secondary
-
-
-
Success
-
-
-
Danger
-
-
-
Warning
-
-
-
Info
-
-
-
Light
-
-
-
Dark
-
-
+ + +
Brand Primary Color
+
+ +
Brand Secondary Color
+
+ +
Brand Success Color
+
+ +
Brand Danger Color
+
+ +
Brand Warning Color
+
+ +
Brand Info Color
+
+ +
Brand Light Color
+
+ +
Brand Dark Color
+
+
@@ -42,19 +101,35 @@ class Colors extends Component { Grays
-
-
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
-
+ + +
Gray 100 Color
+
+ +
Gray 200 Color
+
+ +
Gray 300 Color
+
+ +
Gray 400 Color
+
+ +
Gray 500 Color
+
+ +
Gray 600 Color
+
+ +
Gray 700 Color
+
+ +
Gray 800 Color
+
+ +
Gray 900 Color
+
+
@@ -62,38 +137,41 @@ class Colors extends Component { Additional colors
-
-
-
Blue
-
-
-
Indigo
-
-
-
Purple
-
-
-
Pink
-
-
-
Red
-
-
-
Orange
-
-
-
Yellow
-
-
-
Green
-
-
-
Teal
-
-
-
Cyan
-
-
+ + +
Blue Color
+
+ +
Light Blue Color
+
+ +
Indigo Color
+
+ +
Purple Color
+
+ +
Pink Color
+
+ +
Red Color
+
+ +
Orange Color
+
+ +
Yellow Color
+
+ +
Green Color
+
+ +
Teal Color
+
+ +
Cyan Color
+
+
diff --git a/src/views/Theme/Colors/Colors.test.js b/src/views/Theme/Colors/Colors.test.js index c2b97ae..8cd0a01 100644 --- a/src/views/Theme/Colors/Colors.test.js +++ b/src/views/Theme/Colors/Colors.test.js @@ -6,4 +6,4 @@ it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(, div); ReactDOM.unmountComponentAtNode(div); -}); \ No newline at end of file +});