Ark Theme System

• React 18

Build & Publish

1. npm version patch or other release type
2. npm run build (Use git-bash on windows)
3. npm publish

Utilizing Packages:

• styled-components
• antd
• antd-icons
• react-responsive

Current Exports

export * from "./theme/components";
export * from "./theme/styles/Flex";
export * from '@ant-design/icons';

export { 
    GlobalTheme, 
    ArkTheme,
    Utils,
    GlobalStyles,
    Logo,
    antdTheme,
    Actions,
    System,
    FakeNav
};

Automated NPM GitBash Release Script

This script automates the release process for a Git repository with an npm project. It performs the following steps:

1. Adds all changes to the Git staging area
2. Commits the changes with a custom message provided as an input parameter
3. Bumps the version number
4. Builds the project
5. Publishes the project to the npm registry
6. Pushes the changes to the remote Git repository

Usage

./release.sh "<commit-message>"

Theme System

Using GlobalTheme Component

  <GlobalTheme darkMode={boolean}>
    {Site Contents}
  </GlobalTheme>

Global Theme Dark/Light & Responsive CSS vars

/* Main Colours */
--main-bg-color
--main-text-color
--main-border-color
--main-text-inverse-color

--logo-color
--logo-text-color


/* Primary/Secondary Colours */
--primary-color
--primary-hover-color
--secondary-color
--secondary-hover-color

/* Main Navigation */
--main-menu-icon-color

/* Element Colours */
--element-bg-color
--main-nav-bg-color


/* Sizes */
--nav-main-height

/* Hero */
--hero-overlay-button-spacing

/* Buttons */
--button-default-padding
--button-default-min-width

/* Modals */
--modal-company-profile

Colour Palette

  //  Color Palette
  palette         : {
    black             : '#000',
    white             : '#fff',
    cyan100           : '#CCF6FE',
    blue50            : '#E0E7F2',
    blue500           : '#1242F9',
    blue900           : '#040D21',
    grey50            : '#F8F8F8',
    grey100           : '#F2F2F2',
    grey200           : '#CCCCCC',
    grey300           : '#B2B2B2',
    grey400           : '#E2E9F2',
    grey500           : '#808080',
    grey600           : '#666666',
    grey700           : '#4D4D4D',
    grey900           : '#1A1A1A',
    green             : '#37B34A',
    green2            : '#17CF97',
    coolGrey50        : '#F3F6F9',
    coolGrey100       : '#EFF3F7',
    coolGrey200       : '#EBF0F6',
    coolGrey300       : '#E7EDF4',
    coolGrey400       : '#E2E9F2',
    coolGrey600       : '#C9D0D9',
    coolGrey800       : '#595C60',
    coolGrey900       : '#434548',
    magenta500        : '#DF00C7',
    magenta100        : '#FFB8F7',
    deepPurple500     : '#673AB7',
    deepPurple600     : '#5E35B1',
    purple500         : '#8960F9',
    purple100         : '#CFBFFD',
    success100        : '#DEF9E1',
    success500        : '#B0F2B7',
    success700        : '#67A870',
    warning50         : '#FFF4E6',
    warning800        : '#C05F33',
    warning900        : '#AB370C',
    error900          : '#97202C'
  },

Access Theme Provider within Component / Render

Using withTheme from styled-components

import styled, { withTheme } from 'styled-components'

const TestComponent = ({...props}) => {

return (
  <Container>
    TestComponent
    <Button onClick={() => props.theme.actions.themeFunction(true)}>Dark Mode</Button>
    <Button onClick={() => props.theme.actions.themeFunction(false)}>Light Mode</Button>
  </Container>
)

export default withTheme(TestComponent)

Currently under construction:\

Uses a combination of:

• styled-components
• antd
• ArkTheme - A custom theme system by Ark

In GlobalTheme.js the <ThemeProvider> (styled-components) will provide the theme for the entire site:

<ThemeProvider theme={{
    arkTheme            : ArkTheme,
    darkMode            : darkmode ? true : false,
    antd                : darkmode ? antdTheme.dark.token: antdTheme.light.token,
    responsiveSizes     : getBreakpoint()
}}>

To use in a styled component you can use props to bring in the theme.
This theme will be responsive & darkMode controlled from the <ThemeProvider>

• arkTheme: Provides all of the ArkTheme custom theme variables and functions
• responsiveSizes: Provides responsive sizes from within the ArkTheme
• darkMode: boolean of darkMode status
• antd: all variables of the Ant Design token

const StyledInput = styled(Input)`
  .ant-input-prefix {
    margin-inline-end: 8px;
  }
  color: ${(props) => {
    return props.theme.antd.colorPrimary;
  }};
`

Theme Utils

Utils.{utilName}

Utility Functions

Prevent Utils.prevent()

Uses:

• onClick={Utils.prevent(()=>{})}
  Prevents any onClick from Parent Element

• onClick={Utils.prevent(()=>{otherFunction()})}
  Replaces the onClick with a new function

Excert Utils.excert($number-of-characters)

Uses:

• Utils.excert(str, 100)
  cuts the string at 100 characters and adds ... if over 100 characters