Apply design-tokens-NEXT to site refresh

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 Tokens 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');

aries-site/src/layouts/content/Example/Example.js

@@ -109,9 +109,7 @@ export const Example = ({
     showResponsiveControls,
     template,
     overflow,
-    ...(bestPractice
-      ? { border: { color: 'border-weak' }, round: 'small' }
-      : {}),
+    ...(bestPractice ? { border: { color: 'border' }, round: 'small' } : {}),
   };
 
   // Affects how the Example can behave/display within the outer container
@@ -224,7 +222,7 @@ export const Example = ({
   const generalProps =
     !bestPractice && !plain
       ? {
-          border: { color: 'border-weak' },
+          border: { color: 'border' },
           round: 'small',
         }
       : {};

aries-site/src/layouts/content/InPageNavigation.js

@@ -137,10 +137,8 @@ export const InPageNavigation = ({ headings, title }) => {
               <Button
                 label={headingTitle}
                 active={active}
-                kind="navigation"
                 size="small"
                 align="start"
-                style={{ color: 'inherit' }}
                 margin={{ left: subsectionPad }}
               />
               {/* <SectionButton theme={theme} hoverIndicator>

aries-site/src/layouts/main/Header.js

@@ -17,6 +17,8 @@ const StyledHeader = ({
 
   return (
     <Header
+      // TO DO replace with background-primary-xstrong-default
+      background="#093A2F"
       pad={{
         vertical: 'small',
         horizontal: 'medium',

aries-site/src/layouts/main/Layout.js

@@ -47,6 +47,7 @@ import { getRelatedContent, getPageDetails, nameToPath } from '../../utils';
 import { siteContents } from '../../data/search/contentForSearch';
 import { UpdateNotification } from '../content/UpdateNotification';
 import { ViewContext } from '../../pages/_app';
+import { Login } from '../../components/Login';
 
 const pageDetails = getPageDetails('Home');
 const navItems = pageDetails.pages.map(topic => getPageDetails(topic));
@@ -58,6 +59,13 @@ export const Layout = ({
   topic,
   isLanding = false,
 }) => {
+  const [authenticated, setAuthenticated] = useState(
+    localStorage.getItem('theme-update-demo') || false,
+  );
+  useEffect(() => {
+    if (localStorage.getItem('theme-update-demo')) setAuthenticated(true);
+  }, []);
+
   useEffect(() => {
     if (Config.gaId) {
       initialize(Config.gaId);
@@ -225,7 +233,7 @@ export const Layout = ({
           <Button
             a11yTitle="Hide sidebar"
             alignSelf="start"
-            icon={<Sidebar color="brand" />}
+            icon={<Sidebar color="icon-primary" />}
             onClick={() => setShowSidebar(false)}
           />
           {navContent}
@@ -247,7 +255,7 @@ export const Layout = ({
       </Layer>
     );
   }
-  return (
+  return authenticated ? (
     <Box direction="row">
       {nav}
       <Page>
@@ -353,6 +361,8 @@ export const Layout = ({
         </>
       </Page>
     </Box>
+  ) : (
+    <Login />
   );
 };
 

aries-site/src/layouts/navigation/SearchResults.js

@@ -83,12 +83,10 @@ export const SearchResults = ({
 
   return (
     <Box
-      background="background-front"
+      background={{ color: 'background-front', dark: false }}
       round="medium"
-      // gap="small"
       width="large"
       height={{ max: '576px' }}
-      // fill="vertical"
       {...rest}
     >
       <Box align="center" direction="row" pad="medium" gap="small" flex={false}>

aries-site/src/themes/aries.js

@@ -51,40 +51,11 @@ export const aries = deepMerge(hpe, {
 
 export const ariesPop = deepMerge(aries, {
   ...hpePop,
-  anchor: {
-    // rely on base anchor styling to meet color contrast on background-back
-    size: {
-      large: undefined,
-      xlarge: undefined,
+  global: {
+    colors: {
+      brand: '#01A892',
     },
   },
-  button: {
-    navigation: {
-      background: 'none',
-      font: {
-        color: 'text',
-        weight: 400,
-      },
-    },
-    active: {
-      navigation: {
-        color: 'text-strong',
-        font: {
-          weight: 500,
-        },
-      },
-    },
-    hover: {
-      navigation: {
-        color: 'text-strong',
-        background: 'background-contrast',
-      },
-    },
-  },
-  heading: {
-    ...hpePop.heading,
-    color: 'text',
-  },
   layer: {
     border: {
       radius: 'medium',