Theme update preview

aries-site/src/components/Login.jsx

@@ -0,0 +1,51 @@
+import {
+  Form,
+  FormField,
+  TextInput,
+  Button,
+  Page,
+  PageContent,
+  PageHeader,
+} from 'grommet';
+import PropTypes from 'prop-types';
+
+export const Login = ({ setAuthenticated }) => {
+  return (
+    <Page>
+      <PageContent>
+        <PageHeader
+          title="HPE Design System Demo"
+          subtitle="Please log in to view the designs."
+        />
+        <Form
+          onSubmit={({ value }) => {
+            if (value.password === process.env.NEXT_PUBLIC_PASSWORD) {
+              localStorage.setItem('theme-update-demo', 'true');
+              setAuthenticated(true);
+            }
+          }}
+        >
+          <FormField
+            label="Password"
+            name="password"
+            htmlFor="password"
+            contentProps={{ width: 'medium' }}
+            required
+          >
+            <TextInput type="password" name="password" id="password" />
+          </FormField>
+          <Button
+            label="Submit"
+            type="submit"
+            kind="primary"
+            margin={{ top: 'small' }}
+          />
+        </Form>
+      </PageContent>
+    </Page>
+  );
+};
+
+Login.propTypes = {
+  setAuthenticated: PropTypes.func,
+};

aries-site/src/data/color.js

@@ -13,40 +13,40 @@ const primaryColors = [
   {
     name: 'brand',
     value: 'brand',
-    hex: colors['green!'],
+    hex: colors['green!'].light,
   },
 ];
 
 const coreColors = [
   {
     name: 'purple!',
     value: 'purple!',
-    hex: colors['purple!'],
+    hex: colors['purple!'].light,
   },
   {
     name: 'teal!',
     value: 'teal!',
-    hex: colors['teal!'],
+    hex: colors['teal!'].light,
   },
   {
     name: 'blue!',
     value: 'blue!',
-    hex: colors['blue!'],
+    hex: colors['blue!'].light,
   },
   {
     name: 'red!',
     value: 'red!',
-    hex: colors['red!'],
+    hex: colors['red!'].light,
   },
   {
     name: 'orange!',
     value: 'orange!',
-    hex: colors['orange!'],
+    hex: colors['orange!'].light,
   },
   {
     name: 'yellow!',
     value: 'yellow!',
-    hex: colors['yellow!'],
+    hex: colors['yellow!'].light,
   },
 ];
 
@@ -365,7 +365,7 @@ const focusColor = [
   {
     name: 'focus',
     value: colors['teal!'],
-    hex: colors['teal!'],
+    hex: colors['teal!'].light,
   },
 ];
 
@@ -416,28 +416,38 @@ const layerColor = [
 const graphColor = [
   {
     name: 'graph-0',
-    value: colors['orange!'],
-    hex: colors['orange!'],
+    value: colors['graph-0'].light,
+    hex: colors['graph-0'].light,
   },
   {
     name: 'graph-1',
-    value: colors['blue!'],
-    hex: colors['blue!'],
+    value: colors['graph-1'].light,
+    hex: colors['graph-1'].light,
   },
   {
     name: 'graph-2',
-    value: colors['purple!'],
-    hex: colors['purple!'],
+    value: colors['graph-2'].light,
+    hex: colors['graph-2'].light,
   },
   {
     name: 'graph-3',
-    value: colors['yellow!'],
-    hex: colors['yellow!'],
+    value: colors['graph-3'].light,
+    hex: colors['graph-3'].light,
   },
   {
     name: 'graph-4',
-    value: colors['teal!'],
-    hex: colors['teal!'],
+    value: colors['graph-4'].light,
+    hex: colors['graph-4'].light,
+  },
+  {
+    name: 'graph-5',
+    value: colors['graph-5'].light,
+    hex: colors['graph-5'].light,
+  },
+  {
+    name: 'graph-6',
+    value: colors['graph-6'].light,
+    hex: colors['graph-6'].light,
   },
 ];
 

aries-site/src/examples/foundation/color/ColorPalettes.js

@@ -220,4 +220,4 @@ export const ElevationDark = () => {
 export const Overlay = () => layerColor && generateColorExamples(layerColor);
 
 export const GraphColors = () =>
-  graphColor && generateColorExamples(graphColor);
+  graphColor && generateColorExamples(graphColor, 'text-strong');