diff --git a/packages/my-joy-beta/.yarnclean b/packages/my-joy-beta/.yarnclean
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/my-joy-beta/src/components/instances/item.js b/packages/my-joy-beta/src/components/instances/item.js
index abf6f5a7..4f691049 100644
--- a/packages/my-joy-beta/src/components/instances/item.js
+++ b/packages/my-joy-beta/src/components/instances/item.js
@@ -17,7 +17,7 @@ import {
const { SmallOnly, Small } = QueryBreakpoints;
const stateColor = {
- PROVISIONING: 'blue',
+ PROVISIONING: 'primary',
RUNNING: 'green',
STOPPING: 'grey',
STOPPED: 'grey',
diff --git a/packages/ui-toolkit/etc/style.css b/packages/ui-toolkit/etc/style.css
index b555e5f1..4c8eebea 100644
--- a/packages/ui-toolkit/etc/style.css
+++ b/packages/ui-toolkit/etc/style.css
@@ -11,6 +11,7 @@ body h1.rsg--root-10, h2.rsg--root-10, h3.rsg--root-10, h3.rsg--para-24 {
main.rsg--content-3 {
padding-top: 60px;
+ max-width: 1400px;
}
h4.rsg--h4-29,
diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js
index 9151a0d4c..e898be8b 100644
--- a/packages/ui-toolkit/src/button/index.js
+++ b/packages/ui-toolkit/src/button/index.js
@@ -41,13 +41,13 @@ const style = css`
background-image: none;
background-color: ${props => props.theme.primary};
border-radius: ${borderRadius};
- border: solid ${remcalc(1)} ${props => props.theme.primaryDesaturated};
+ border: solid ${remcalc(1)} ${props => props.theme.primaryActive};
&:focus {
outline: 0;
text-decoration: none;
background-color: ${props => props.theme.primary};
- border-color: ${props => props.theme.primaryDesaturated};
+ border-color: ${props => props.theme.primaryActive};
}
&:hover {
@@ -93,8 +93,8 @@ const style = css`
`};
${is('tertiary')`
- color: ${props => props.theme.tertiary};
- background-color: ${props => props.theme.background};
+ color: ${props => props.theme.text};
+ background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.grey};
font-weight: 600;
@@ -103,25 +103,25 @@ const style = css`
&:active,
&:active:hover,
&:active:focus {
- color: ${props => props.theme.tertiary};
- background-color: ${props => props.theme.background};
+ color: ${props => props.theme.text};
+ background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.grey};
}
`};
${is('tertiary', 'selected')`
- background-color: ${props => props.theme.tertiaryActive};
- color: ${props => props.theme.tertiaryActiveColor};
- border-color: ${props => props.theme.tertiaryActiveColor};
+ background-color: rgba(59, 70, 204, 0.2);
+ color: ${props => props.theme.primaryActive};
+ border-color: ${props => props.theme.primaryActive};
&:focus,
&:hover,
&:active,
&:active:hover,
&:active:focus {
- background-color: ${props => props.theme.tertiaryActive};
- color: ${props => props.theme.tertiaryActiveColor};
- border-color: ${props => props.theme.tertiaryActiveColor};
+ background-color: rgba(59, 70, 204, 0.2);
+ color: ${props => props.theme.primaryActive};
+ border-color: ${props => props.theme.primaryActive};
}
`};
diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js
index 23a6555c..f76afb61 100644
--- a/packages/ui-toolkit/src/card/card.js
+++ b/packages/ui-toolkit/src/card/card.js
@@ -67,7 +67,7 @@ const StyledCard = Row.extend`
`};
${is('transparent', 'selected')`
- border: 1px solid ${props => props.theme.blue};
+ border: 1px solid ${props => props.theme.primary};
background: ${props => props.theme.tertiaryActive};
box-shadow: none;
`};
diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js
index 6be8b975..6baa1f79 100644
--- a/packages/ui-toolkit/src/card/header.js
+++ b/packages/ui-toolkit/src/card/header.js
@@ -10,7 +10,7 @@ const StyledCard = Card.extend`
flex-direction: row;
background-color: ${props => props.theme.primary};
- border: solid ${remcalc(1)} ${props => props.theme.primaryDesaturatedActive};
+ border: solid ${remcalc(1)} ${props => props.theme.primary};
box-shadow: none;
width: calc(100% + ${remcalc(2)});
diff --git a/packages/ui-toolkit/src/card/options.js b/packages/ui-toolkit/src/card/options.js
index 6875e4df..b37c8568 100644
--- a/packages/ui-toolkit/src/card/options.js
+++ b/packages/ui-toolkit/src/card/options.js
@@ -19,7 +19,7 @@ const StyledNav = Nav.extend`
${is('fromHeader') &&
isNot('disabled')`
- border-left-color: ${props => props.theme.primaryDesaturatedActive};
+ border-left-color: ${props => props.theme.primary};
`};
`;
diff --git a/packages/ui-toolkit/src/card/title.js b/packages/ui-toolkit/src/card/title.js
index 04c2f88a..62db47e2 100644
--- a/packages/ui-toolkit/src/card/title.js
+++ b/packages/ui-toolkit/src/card/title.js
@@ -42,7 +42,7 @@ const Container = styled.div`
`};
${is('selected')`
- color: ${props => props.theme.blue};
+ color: ${props => props.theme.primary};
`};
`;
@@ -70,7 +70,7 @@ const Link = styled(BaseLink)`
`};
${is('selected')`
- color: ${props => props.theme.blue};
+ color: ${props => props.theme.primary};
`};
`;
diff --git a/packages/ui-toolkit/src/form/base/input.js b/packages/ui-toolkit/src/form/base/input.js
index b75e2d44..1174e0a8 100644
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@@ -39,13 +39,13 @@ const style = css`
${is('disabled')`
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
- color: ${props => props.theme.grey};
+ color: ${props => props.theme.placeholder};
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
- color: ${props => props.theme.grey};
+ color: ${props => props.theme.placeholder};
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
- color: ${props => props.theme.grey};
+ color: ${props => props.theme.placeholder};
}
`};
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx
index 290a0be2..ec8c6f7d 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx
+++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx
@@ -10,7 +10,7 @@ const Span = styled.span`
position: absolute;
top: ${remcalc(14)};
right: ${props => (props.type === 'max' ? '1px' : 'auto')};
- color: ${props => (props.greyed ? theme.greyLight : theme.secondary)};
+ color: ${props => (props.greyed ? theme.grey : theme.secondary)};
`;
/**
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx
index 9284439f..511306d1 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx
+++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx
@@ -9,7 +9,7 @@ import theme from '../../../theme';
export const SliderStyled = styled.div`
appearance: none;
background: ${theme.white};
- border: 2px solid ${theme.greyLight};
+ border: 2px solid ${theme.grey};
border-radius: 50%;
cursor: pointer;
display: block;
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/track.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/track.jsx
index 51e338a9..78bde832 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/track.jsx
+++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/track.jsx
@@ -13,7 +13,7 @@ export const TrackStyled = styled.div`
`;
const ActiveTrack = styled.div`
- background: ${theme.blue};
+ background: ${theme.primary};
height: 100%;
position: absolute;
`;
diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js
index e840d324..af56e7fd 100644
--- a/packages/ui-toolkit/src/theme/colors.js
+++ b/packages/ui-toolkit/src/theme/colors.js
@@ -1,16 +1,27 @@
import React from 'react';
import styled from 'styled-components';
import { Strong } from 'normalized-styled-components';
-import { Row } from 'react-styled-flexboxgrid';
import remcalc from 'remcalc';
import titleCase from 'title-case';
import tinycolor from 'tinycolor2';
-import P from '../text/p';
+import { P, H2 } from '../text';
import theme, { base } from './';
const Box = styled.div`
width: ${remcalc(130)};
- margin-bottom: ${remcalc(46)};
+ margin: auto;
+ text-align: center;
+`;
+
+const Data = styled.td`
+ padding: ${remcalc(18)} 0;
+ border-bottom: 1px solid ${theme.grey};
+ max-width: ${remcalc(250)};
+`;
+
+const Table = styled.table`
+ /** */
+ width: 100%;
`;
const InnerBox = styled.div`
@@ -19,29 +30,30 @@ const InnerBox = styled.div`
font-size: 16px;
color: ${theme.text};
`;
-// Border: solid ${remcalc(1)} ${props => props.border};
-// border-top-width: 0;
const Preview = styled.div`
display: inline-block;
background: ${props => props.hex};
width: ${remcalc(96)};
height: ${remcalc(96)};
+ border: 1px solid ${theme.grey};
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
`;
const Paragraph = P.extend`
- /* trick prettier */
+ font-size: ${remcalc(13)};
margin: 0;
`;
+const ColorName = styled(H2)`
+ /* trick prettier */
+ max-width: ${remcalc(100)};
+`;
+
const Color = ({ name, hex }) => (
+ | Default | +Hover | +Click | +Disabled | +Usage | +
---|---|---|---|---|---|