@oliasoft-open-source/react-ui-library 1.0.0

package/src/docs/navigation/header/header.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ImMobile } from 'react-icons/im';
+import { SiStorybook } from 'react-icons/si';
+import { TopBar } from '../../../../index';
+import { baseUrl } from '../../config/config';
+import styles from './header.module.less';
+
+export const Header = () => {
+  const storybookUrl = `${baseUrl}storybook/`;
+  return (
+    <TopBar
+      content={[
+        {
+          type: 'Component',
+          component: (
+            <span className={styles.link}>
+              <Link to="/">
+                <ImMobile color="var(--color-text-primary)" size={40} />
+                <span>React UI Library</span>
+              </Link>
+            </span>
+          ),
+        },
+      ]}
+      contentRight={[
+        {
+          type: 'Button',
+          label: 'Storybook',
+          icon: <SiStorybook />,
+          onClick: () => {
+            const win = window.open(storybookUrl, '_blank');
+            win.focus();
+          },
+        },
+      ]}
+    />
+  );
+};

package/src/docs/navigation/header/header.module.less

@@ -0,0 +1,32 @@
+.link {
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    white-space: nowrap;
+
+    img,
+    svg {
+      max-height: 30px;
+      max-width: 200px;
+      height: auto;
+      width: auto;
+    }
+
+    span {
+      margin-left: 10px;
+      white-space: nowrap;
+
+      @media (max-width: 700px) {
+        display: none;
+      }
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

package/src/docs/navigation/routes/routes.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { HashRouter as Router, Route } from 'react-router-dom';
+
+import { Main } from '../../views/main/main';
+
+export const Routes = () => {
+  return (
+    <>
+      <Router>
+        <Route path="/" exact>
+          <Main />
+        </Route>
+      </Router>
+    </>
+  );
+};

package/src/docs/start.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Routes } from './navigation/routes/routes';
+
+import '../style/global.less';
+
+const Root = () => {
+  return <Routes />;
+};
+
+ReactDOM.render(<Root />, document.getElementById('content'));

package/src/docs/views/main/main.jsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import {
+  FaCode,
+  FaCogs,
+  FaWpforms,
+  FaExternalLinkAlt,
+  FaRegWindowMaximize,
+  FaListUl,
+  FaPaintBrush,
+} from 'react-icons/fa';
+import { BsFillGridFill } from 'react-icons/bs';
+import { MdTabletMac } from 'react-icons/md';
+import { RiPagesFill, RiArchiveDrawerFill, RiChat2Line } from 'react-icons/ri';
+import { SiStorybook } from 'react-icons/si';
+import { TiInputChecked } from 'react-icons/ti';
+import { AiOutlineUngroup } from 'react-icons/ai';
+import { ImTable, ImSpinner8, ImBell } from 'react-icons/im';
+import {
+  Card,
+  Spacer,
+  Heading,
+  TextLink,
+  Text,
+  Flex,
+  Grid,
+  Button,
+} from '../../../../index';
+import { Page } from '../../components/page/page';
+import { baseUrl } from '../../config/config';
+import styles from './main.module.less';
+
+const description = [
+  {
+    title: 'Comprehensive',
+    icon: <BsFillGridFill size={36} />,
+    text: (
+      <>
+        A <strong>comprehensive</strong> set of layout, navigation and control
+        components for building modern web apps.
+      </>
+    ),
+  },
+  {
+    title: 'Configurable',
+    icon: <FaCogs size={36} />,
+    text: (
+      <>
+        <strong>Flexible</strong>, configurable components with detailed usage
+        examples via Storybook.
+      </>
+    ),
+  },
+  {
+    title: 'Responsive',
+    icon: <MdTabletMac size={36} />,
+    text: (
+      <>
+        Easily build <strong>responsive</strong> layouts that work well on a
+        variety of devices.
+      </>
+    ),
+  },
+  {
+    title: 'Open-source',
+    icon: <FaCode size={36} />,
+    text: (
+      <>
+        Contribute and fork freely under a permissive,{' '}
+        <strong>open-source</strong>{' '}
+        <TextLink href="https://gitlab.com/oliasoft-open-source/react-ui-library/-/blob/master/LICENSE">
+          MIT License.
+        </TextLink>
+      </>
+    ),
+  },
+];
+
+const features = [
+  {
+    title: 'Page Layouts',
+    icon: <RiPagesFill size={36} />,
+    text: 'Support for responsive layouts with Page, Row, Column, Card, and Accordion components.',
+  },
+  {
+    title: 'Drawers',
+    icon: <RiArchiveDrawerFill size={36} />,
+    text: 'Easily support expandable drawers.',
+  },
+  {
+    title: 'Navigation',
+    icon: <FaExternalLinkAlt size={36} />,
+    text: 'Flexible TopBar, SideBar, Tabs, Breadcrumbs, Pagination and other navigation components.',
+  },
+  {
+    title: 'Inputs',
+    icon: <TiInputChecked size={36} />,
+    text: 'Comprehensive inputs including Selects, Checkboxes, Toggles, RadioButtons, Buttons, and Sliders.',
+  },
+  {
+    title: 'Input Groups',
+    icon: <AiOutlineUngroup size={36} />,
+    text: 'Combine groups of inputs flexible ways, including text-label addons.',
+  },
+  {
+    title: 'Form Layouts',
+    icon: <FaWpforms size={36} />,
+    text: 'Convenient stacked and row form layouts, with all inputs supported.',
+  },
+  {
+    title: 'Notifications',
+    icon: <ImBell size={36} />,
+    text: 'Consistently-styled Messages and toast Messages.',
+  },
+  {
+    title: 'Tables',
+    icon: <ImTable size={36} />,
+    text: 'A configurable table component with support for many input and custom cells.',
+  },
+  {
+    title: 'Lists',
+    icon: <FaListUl size={36} />,
+    text: 'A configurable list component.',
+  },
+  {
+    title: 'Progress',
+    icon: <ImSpinner8 size={36} />,
+    text: 'Flexible spinners and loaders.',
+  },
+  {
+    title: 'Modals',
+    icon: <FaRegWindowMaximize size={36} />,
+    text: 'Simple, flexible Modals and Dialogs.',
+  },
+  {
+    title: 'Modern Popover Engine',
+    icon: <RiChat2Line size={36} />,
+    text: (
+      <>
+        Uses a React-friendly positioning engine (
+        <a href="https://www.react-laag.com/">React-Laag</a>) for popovers,
+        tooltips menus, and custom selects.
+      </>
+    ),
+  },
+  {
+    title: 'Flexible styling',
+    icon: <FaPaintBrush size={36} />,
+    text: (
+      <>
+        Supports the two most popular React styling approaches:{' '}
+        <a href="https://github.com/css-modules/css-modules/">CSS Modules</a>{' '}
+        and <a href="https://styled-components.com/">styled-components</a>.
+      </>
+    ),
+  },
+];
+
+export const Main = () => {
+  const storybookUrl = `${baseUrl}storybook/`;
+  return (
+    <Page>
+      <div className={styles.container}>
+        <Spacer height="100px" />
+        <Flex direction="column">
+          <h1 className={styles.headline}>
+            User Interface Components for React Applications
+          </h1>
+          {description.map((item, index) => (
+            <p className={styles.lead} key={index}>
+              <Text muted>{item.text}</Text>
+            </p>
+          ))}
+        </Flex>
+
+        <Spacer height="30px" />
+
+        <Button
+          label="Storybook"
+          colored
+          icon={<SiStorybook />}
+          onClick={() => {
+            const win = window.open(storybookUrl, '_blank');
+            win.focus();
+          }}
+        />
+
+        <Spacer height="100px" />
+
+        <Grid
+          columns="1fr 1fr 1fr 1fr"
+          columnsTablet="1fr 1fr"
+          columnsMobile="1fr"
+          gap
+        >
+          {features.map((item, index) => (
+            <Card key={index}>
+              <Text faint>{item.icon}</Text>
+              <Spacer height="5px" />
+              <Heading top marginBottom="5px">
+                {item.title}
+              </Heading>
+              <Text muted>{item.text}</Text>
+            </Card>
+          ))}
+        </Grid>
+      </div>
+    </Page>
+  );
+};

package/src/docs/views/main/main.module.less

@@ -0,0 +1,14 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.headline {
+  font-size: 2.5em;
+  letter-spacing: -0.025em;
+}
+
+.lead {
+  font-size: 1.25em;
+  margin-bottom: 0.75rem;
+}

package/src/docs/views/not-found/not-found.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => {
+  return <div>Page not found.</div>;
+};

package/src/helpers/disabled-context.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const DisabledContext = React.createContext(false);
+
+DisabledContext.Provider.propTypes = {
+  value: PropTypes.bool,
+};

package/src/helpers/styles.js

@@ -0,0 +1,68 @@
+/*
+  This helper allows us to export simple LESS variables as JavaScript objects.
+  The intention is for keeping code DRY by allowing primary colour palettes etc
+  to be defined in one place only (LESS).
+
+  These simple variables should be defined in a files called `shared.less` that
+  can exist in one of two place:
+
+  - in `override.less` in the root of the parent project
+      (to allow overriding of the default values set in this project)
+  - in `src/style/shared.less in this project (default values)
+
+  The parent and local definitions are merged, with the parent taking
+  precedence.
+
+  The implementation uses Webpack raw-loader to load the shared LESS variables
+  file, and a 3rd party package (less-vars-to-js) to parse it, so they can be
+  exported for use in JavaScript.
+
+  When we upgrade to Webpack 5, we'll have to refactor this to use asset modules
+  instead.
+ */
+
+import lessToJs from 'less-vars-to-js';
+
+// eslint-disable-next-line import/no-unresolved,import/no-webpack-loader-syntax
+import lessVariables from '../style/shared.less?raw';
+
+/*
+  We need to import the `shared.less` file from the root of the parent project
+  conditionally (it may not exist). Would love to use ES6 imports here, but they
+  don't allow optional files without throwing an error when the file doesn't
+  exist. ES6 dynamic imports would require `async` when we use this helper
+  (prefer to avoid that). So falling back to CommonJS require here.
+
+  Hopefully this will get better once we have Webpack 5 asset modules.
+ */
+let lessParentVariables = '{}';
+try {
+  const parentPath = '../../../../override.less?raw';
+  // eslint-disable-next-line import/no-unresolved,global-require,import/no-webpack-loader-syntax,import/no-dynamic-require
+  lessParentVariables = require(`${parentPath}`).default;
+} catch (e) {
+  //do nothing (we fallback to the local definition anyway)
+}
+
+const load = () => {
+  /*
+    Merge the parent project shared.less with the local shared.less
+    (since less-vars-to-js doesn't handle import statements for us)
+
+    The parent definition takes precedence over the local definition
+   */
+  const parent = lessToJs(lessParentVariables, {
+    resolveVariables: true,
+    stripPrefix: true,
+  });
+  const local = lessToJs(lessVariables, {
+    resolveVariables: true,
+    stripPrefix: true,
+  });
+  return {
+    ...local,
+    ...parent,
+  };
+};
+
+export const styleVariables = load();

package/src/helpers/text.js

@@ -0,0 +1,6 @@
+export const getTextWidth = (text, font) => {
+  const element = document.createElement('canvas');
+  const context = element.getContext('2d');
+  context.font = font;
+  return context.measureText(text).width;
+};

package/src/helpers/types.js

@@ -0,0 +1,5 @@
+import { isNumber, isString } from 'lodash';
+import { isValidElement } from 'react';
+
+export const isStringNumberOrNode = (value) =>
+  isString(value) || isNumber(value) || isValidElement(value);

package/src/hooks/index.js

@@ -0,0 +1,3 @@
+export { useKeyboardEvent } from './use-keyboard-event';
+export { useFocus } from './use-focus';
+export { useWindowWidth } from './use-window-width';

package/src/hooks/use-focus.js

@@ -0,0 +1,11 @@
+import { useRef } from 'react';
+
+export const useFocus = () => {
+  const ref = useRef(null);
+  const setFocus = () => {
+    if (ref.current) {
+      ref.current.focus();
+    }
+  };
+  return [ref, setFocus];
+};

package/src/hooks/use-keyboard-event.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+export const useKeyboardEvent = (key, fn, dependencyList = []) => {
+  useEffect(() => {
+    const handler = (event) => {
+      if (event.key === key) {
+        fn();
+      }
+    };
+
+    window.addEventListener('keydown', handler);
+    return () => {
+      window.removeEventListener('keydown', handler);
+    };
+  }, dependencyList);
+};

package/src/hooks/use-window-width.js

@@ -0,0 +1,20 @@
+import { debounce } from 'lodash';
+import { useState, useEffect } from 'react';
+
+const getWidth = () =>
+  window.innerWidth ||
+  document.documentElement.clientWidth ||
+  document.body.clientWidth;
+
+//https://dev.to/vitaliemaldur/resize-event-listener-using-react-hooks-1k0c
+export const useWindowWidth = () => {
+  let [width, setWidth] = useState(getWidth());
+  const resizeListener = debounce(() => setWidth(getWidth()), 150);
+  useEffect(() => {
+    window.addEventListener('resize', resizeListener);
+    return () => {
+      window.removeEventListener('resize', resizeListener);
+    };
+  }, []);
+  return width;
+};

package/src/images/icons/icons8-junction.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
+    <path fill="currentColor" d="M 5 4 C 4.448 4 4 4.448 4 5 L 4 9 C 4 9.256 4.0979687 9.5120312 4.2929688 9.7070312 C 4.6829687 10.098031 5.3160312 10.098031 5.7070312 9.7070312 L 7 8.4140625 L 11.414062 12.828125 C 11.789924 13.203987 12 13.710844 12 14.242188 L 12 20 A 1.0001 1.0001 0 1 0 14 20 L 14 14.242188 C 14 13.181531 13.578263 12.164202 12.828125 11.414062 L 8.4140625 7 L 9.7070312 5.7070312 C 10.098031 5.3170313 10.098031 4.6839688 9.7070312 4.2929688 C 9.5120312 4.0979687 9.256 4 9 4 L 5 4 z M 21 4 C 20.744 4 20.487969 4.0979687 20.292969 4.2929688 C 19.901969 4.6839688 19.901969 5.3170313 20.292969 5.7070312 L 21.585938 7 L 17.171875 11.414062 C 16.421737 12.164202 16 13.18153 16 14.242188 L 16 20 A 1.0001 1.0001 0 1 0 18 20 L 18 14.242188 C 18 13.710843 18.210076 13.203987 18.585938 12.828125 L 23 8.4140625 L 24.292969 9.7070312 C 24.683969 10.098031 25.317031 10.098031 25.707031 9.7070312 C 25.902031 9.5120312 26 9.256 26 9 L 26 5 C 26 4.448 25.552 4 25 4 L 21 4 z M 4.984375 12.986328 A 1.0001 1.0001 0 0 0 4 14 L 4 24 C 4 25.093063 4.9069372 26 6 26 L 24 26 C 25.093063 26 26 25.093063 26 24 L 26 14 A 1.0001 1.0001 0 1 0 24 14 L 24 24 L 6 24 L 6 14 A 1.0001 1.0001 0 0 0 4.984375 12.986328 z"/>
+</svg>

package/src/images/logo.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="300px" height="116px" viewBox="0 0 300 116" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>logo</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group">
+            <rect id="Rectangle" fill="#FF6600" x="0" y="7.10542736e-15" width="300" height="116.363636" rx="14.5454545"></rect>
+            <text id="LOGO" font-family="LucidaGrande-Bold, Lucida Grande" font-size="87.2727273" font-weight="bold" fill="#FFFFFF">
+                <tspan x="19.3323864" y="89.4545455">LOGO</tspan>
+            </text>
+            <ellipse id="Oval" fill="#FFFFFF" cx="241.818182" cy="58.1818182" rx="20" ry="27.2727273"></ellipse>
+        </g>
+    </g>
+</svg>

package/src/images/oliasoft-logo.svg

@@ -0,0 +1 @@
+<svg height="60" viewBox="0 0 735 60" width="735" xmlns="http://www.w3.org/2000/svg"><g fill="none"><g transform="translate(.2)"><path d="m324.426253 59.8796834h-294.4864113c-16.3733509 0-29.9398417-13.3325858-29.9398417-29.9398417 0-16.3733509 13.3325858-29.9398417 29.9398417-29.9398417h294.7203163c16.373351 0 29.939842 13.3325858 29.939842 29.9398417-.233905 16.6072559-13.566491 29.9398417-30.173747 29.9398417z" fill="#eb662b"/><g fill="#fff" transform="translate(23.156596 18.946306)"><path d="m225.952243 11.4613456c0-.93562.233905-1.40343.701715-1.63733505.46781-.23390501 1.40343-.46781002 2.33905-.46781002h32.746702c.701715 0 1.169525.23390501 1.637335.70171507.46781.46781.701715.93562.701715 1.6373351 0 .701715-.233905 1.169525-.701715 1.6373351-.46781.46781-.93562.701715-1.637335.701715h-31.109367v5.8476253c0 .7017151-.233905 1.1695251-.701715 1.6373351s-.93562.7017151-1.637335.7017151-1.169525-.2339051-1.637335-.7017151-.701715-.93562-.701715-1.6373351z"/><path d="m39.0621372 7.95277045c-.46781-1.16952507-.93562-2.33905013-1.6373351-3.27467019-.701715-.93562005-1.6373351-1.8712401-2.5729551-2.57295514-.9356201-.70171504-2.3390502-.93562005-3.5085752-1.16952507h-22.22097629c-1.40343007 0-2.57295514.23390502-3.74248021.93562006-1.16952506.70171504-2.10514512 1.40343007-2.80686015 2.57295514-.70171504.93562005-1.40343008 2.10514512-1.87124011 3.5085752-.46781003 1.16952506-.70171504 2.57295515-.70171504 3.74248025 0 1.169525.23390501 2.3390501.46781003 3.7424802.46781002 1.169525.93562005 2.3390501 1.63733509 3.2746702.70171504.93562 1.63733509 1.8712401 2.57295514 2.5729551.93562006.701715 2.10514512.9356201 3.5085752 1.1695251h22.22097624c1.4034301 0 2.5729552-.233905 3.7424802-.9356201 1.1695251-.701715 2.1051451-1.4034301 2.8068602-2.5729551.701715-.9356201 1.4034301-2.1051452 1.8712401-3.5085752.46781-1.1695251.701715-2.5729552.701715-3.7424802.233905-1.1695251 0-2.57295519-.46781-3.74248025zm-4.2102902 5.61372035c-.233905.701715-.4678101 1.40343-.9356201 1.8712401-.46781.46781-.93562 1.169525-1.6373351 1.40343-.701715.4678101-1.6373351.7017151-2.8068601.7017151h-19.64802115c-1.16952506 0-2.10514511-.233905-2.80686015-.7017151-.70171504-.46781-1.16952507-.93562-1.6373351-1.40343-.46781002-.4678101-.70171504-1.1695251-.93562005-1.8712401-.23390501-.7017151-.23390501-1.4034301-.23390501-1.8712401 0-.4678101 0-1.1695251.23390501-1.87124015.23390501-.70171504.46781003-1.40343008.93562005-1.8712401.46781003-.46781003.93562006-1.16952507 1.6373351-1.40343008.70171504-.46781003 1.63733509-.70171504 2.80686015-.70171504h19.64802115c1.169525 0 2.1051451.23390501 2.8068601.70171504.7017151.46781003 1.1695251.93562005 1.6373351 1.40343008.46781.46781002.7017151 1.16952506.9356201 1.8712401.233905.70171505.233905 1.40343005.233905 1.87124015 0 .46781 0 1.169525-.233905 1.8712401z"/><path d="m101.046966 21.2853562c-.46781.46781-1.1695254.9356201-1.8712404.9356201s-1.1695251-.2339051-1.6373351-.7017151-.701715-.93562-.701715-1.6373351c0-.46781.233905-1.169525.46781-1.4034301l11.9291555-15.90554085c.46781-.70171504 1.169525-1.40343008 2.105145-1.87124011s1.87124-.70171504 2.80686-.70171504 1.871241.23390501 2.806861.70171504 1.637335.93562005 2.105145 1.63733509l11.929155 15.90554087c.233905.233905.46781.4678101.46781.7017151.233905.233905.233905.46781.233905.93562 0 .7017151-.233905 1.1695251-.701715 1.6373351s-.93562.7017151-1.637335.7017151-1.40343-.2339051-1.87124-.9356201l-11.22744-15.20382586c-.233905-.23390501-.46781-.46781002-.93562-.93562005-.233906-.23390501-.701716-.46781003-.935621-.46781003-.46781 0-.701715.23390502-.93562.46781003s-.701715.70171504-.701715.93562005z"/><path d="m92.1585752 19.8819261c0 .7017151-.233905 1.1695251-.701715 1.6373351-.4678101.46781-.9356201.7017151-1.6373351.7017151-.7017151 0-1.1695251-.2339051-1.6373351-.7017151-.4678101-.46781-.7017151-.93562-.7017151-1.6373351v-16.60725592c0-.70171503.233905-1.16952506.7017151-1.63733509.46781-.46781002.93562-.70171504 1.6373351-.70171504.701715 0 1.169525.23390502 1.6373351.70171504.46781.46781003.701715.93562006.701715 1.63733509z"/><path d="m51.2251979 22.2209763c-.9356201 0-1.8712401-.2339051-2.5729552-.4678101-.701715-.233905-1.40343-.701715-2.1051451-1.4034301-.701715-.46781-1.169525-1.169525-1.4034301-2.1051451-.46781-.701715-.46781-1.6373351-.46781-2.5729551v-12.39696572c0-.70171503.233905-1.16952506.7017151-1.63733509.46781-.46781002.93562-.70171504 1.6373351-.70171504.701715 0 1.169525.23390502 1.637335.70171504.4678101.46781003.7017151.93562006.7017151 1.63733509v12.39696572c0 .46781.233905.93562.46781 1.169525.46781.4678101.701715.4678101 1.4034301.4678101h29.2381266c.7017151 0 1.1695251.233905 1.6373351.701715.4678101.46781.7017151.9356201.7017151 1.6373351s-.233905 1.1695251-.7017151 1.6373351c-.46781.46781-.93562.701715-1.6373351.701715h-29.2381266z"/><path d="m225.952243 3.27467018c0-.70171503.233905-1.16952506.701715-1.63733509.46781-.46781002.93562-.70171504 1.637335-.70171504h34.384037c.701715 0 1.169525.23390502 1.637335.70171504.46781.46781003.701715.93562006.701715 1.63733509 0 .70171504-.233905 1.16952507-.701715 1.6373351-.46781.46781002-.93562.70171504-1.637335.70171504h-34.384037c-.701715 0-1.169525-.23390502-1.637335-.70171504-.701715-.46781003-.701715-.93562006-.701715-1.6373351z"/><path d="m220.338522 7.95277045c-.46781-1.16952507-.93562-2.33905013-1.637335-3.27467019-.701715-.93562005-1.637335-1.8712401-2.572955-2.57295514s-2.33905-.93562005-3.508575-1.16952507h-22.220976c-1.40343 0-2.572955.23390502-3.74248.93562006-1.169526.70171504-2.105146 1.40343007-2.806861 2.57295514-.701715.93562005-1.40343 2.10514512-1.87124 3.5085752-.46781 1.16952506-.701715 2.57295515-.701715 3.74248025 0 1.169525.233905 2.3390501.46781 3.7424802.46781 1.169525.93562 2.3390501 1.637335 3.2746702.701715.93562 1.637335 1.8712401 2.572955 2.5729551.935621.701715 2.339051.9356201 3.508576 1.1695251h22.220976c1.40343 0 2.572955-.233905 3.74248-.9356201 1.169525-.701715 2.105145-1.4034301 2.80686-2.5729551.701715-.9356201 1.40343-2.1051452 1.87124-3.5085752.46781-1.1695251.701715-2.5729552.701715-3.7424802.233905-1.1695251 0-2.57295519-.46781-3.74248025zm-4.21029 5.61372035c-.233905.701715-.46781 1.40343-.93562 1.8712401-.46781.46781-.93562 1.169525-1.637335 1.40343-.701715.4678101-1.637335.7017151-2.80686.7017151h-19.648021c-1.169525 0-2.105145-.233905-2.80686-.7017151-.701715-.46781-1.169525-.93562-1.637335-1.40343-.46781-.4678101-.701716-1.1695251-.935621-1.8712401-.233905-.7017151-.233905-1.4034301-.233905-1.8712401 0-.4678101 0-1.1695251.233905-1.87124015.233905-.70171504.467811-1.40343008.935621-1.8712401.46781-.46781003.93562-1.16952507 1.637335-1.40343008s1.637335-.70171504 2.80686-.70171504h19.648021c1.169525 0 2.105145.23390501 2.80686.70171504s1.169525.93562005 1.637335 1.40343008c.46781.46781002.701715 1.16952506.93562 1.8712401.233905.70171505.233905 1.40343005.233905 1.87124015 0 .46781 0 1.169525-.233905 1.8712401z"/><path d="m143.149868 14.0343008c-.93562 0-1.637335-.233905-2.572955-.46781-.701715-.233905-1.40343-.7017151-2.105145-1.4034301-.46781-.46781-.93562-1.1695251-1.40343-2.1051451-.233905-.70171507-.46781-1.63733513-.46781-2.57295518s.233905-1.63733509.46781-2.57295514c.233905-.70171504.701715-1.40343008 1.40343-2.10514512.46781-.46781003 1.169525-.93562005 2.105145-1.40343008.701715-.23390501 1.637335-.46781003 2.572955-.46781003h29.472032c.701715 0 1.169525.23390502 1.637335.70171504.46781.46781003.701715.93562006.701715 1.63733509 0 .70171504-.233905 1.16952507-.701715 1.6373351-.46781.46781002-.93562.70171504-1.637335.70171504h-29.705937c-.46781 0-.93562.23390501-1.40343.46781002-.46781.23390502-.46781.70171504-.46781 1.40343008 0 .46781003.233905.93562005.46781 1.16952507.46781.46781002.701715.46781002 1.40343.46781002h26.899077c.93562 0 1.87124.23390502 2.572955.46781003s1.40343.70171506 2.105145 1.40343006c.46781.46781.93562 1.1695251 1.40343 2.1051451.233905.7017151.46781 1.6373351.46781 2.5729552 0 .93562-.233905 1.6373351-.46781 2.5729551-.233905.7017151-.701715 1.4034301-1.40343 2.1051451-.46781.4678101-1.169525.9356201-2.105145 1.4034301-.701715.233905-1.637335.4678101-2.572955.4678101h-29.472032c-.701715 0-1.169525-.2339051-1.637335-.7017151s-.701715-.93562-.701715-1.6373351c0-.701715.233905-1.169525.701715-1.6373351.46781-.46781.93562-.701715 1.637335-.701715h29.705937c.46781 0 .93562-.233905 1.169525-.46781.46781-.2339051.46781-.7017151.46781-1.1695251s-.233905-.9356201-.46781-1.4034301c-.46781-.46781-.701715-.46781-1.169525-.46781z"/><path d="m305.713852.93562005c.701715 0 1.169525.23390502 1.637335.70171504.46781.46781003.701715.93562006.701715 1.63733509 0 .70171504-.233905 1.16952507-.701715 1.6373351-.46781.46781002-.93562.70171504-1.637335.70171504h-14.502111v14.26820578c0 .7017151-.233905 1.1695251-.701715 1.6373351s-.93562.7017151-1.637335.7017151-1.169525-.2339051-1.637335-.7017151-.701715-.93562-.701715-1.6373351v-14.26820578h-14.502111c-.46781 0-1.169525-.23390502-1.40343-.70171504-.46781-.46781003-.701715-.93562006-.701715-1.6373351 0-.70171503.233905-1.16952506.701715-1.63733509.46781-.46781002.93562-.70171504 1.637335-.70171504z"/></g></g><g fill="currentColor" transform="translate(370.2 9)"><path d="m0 .74282797h9.56391016l1.20709544 21.63486473c.0928535 3.4355794.185707 6.4997448.185707 10.2138846h.185707c.557121-3.6212863 1.299949-6.7783052 1.9499234-10.1210311l2.6927514-11.3281266h5.8497703l2.5998979 11.3281266c.6499745 3.3427259 1.3928025 6.4068913 1.9499235 10.1210311h.2785605c.0928535-3.7141398.0928535-6.7783052.1857069-10.1210311l1.114242-21.63486473h8.9139357l-4.8283818 40.48412453h-9.8424707l-2.4141909-12.535222c-.4642675-2.5998979-.928535-5.2926493-1.114242-7.7068403h-.185707c-.2785604 2.414191-.5571209 5.1997959-1.1142419 7.7068403l-2.2284839 12.535222h-9.56391019z"/><path d="m42.805462.74282797h26.8346605v7.70684023h-17.6421644v8.1711077h15.0422665v7.7068402h-15.0422665v9.2853497h18.2921389v7.7068402h-27.484635z"/><path d="m78.5540582.74282797h9.1924962v32.87013783h18.0135786v7.7068402h-27.2060748z"/><path d="m113.374119.74282797h9.192497v32.87013783h18.013578v7.7068402h-27.206075z"/><path d="m148.472741.74282797h11.235273c11.792394 0 19.499235 6.12833078 19.499235 20.05635533 0 13.9280245-7.706841 20.4277692-18.942114 20.4277692h-11.69954v-40.48412453zm10.678152 33.14869833c6.314038 0 10.585299-3.3427259 10.585299-13.092343 0-9.6567637-4.271261-12.72092909-10.585299-12.72092909h-1.485656v25.81327209z"/><path d="m187.099796.74282797h26.83466v7.70684023h-17.735018v8.1711077h15.042267v7.7068402h-15.042267v9.2853497h18.292139v7.7068402h-27.484635v-40.57697803z"/><path d="m221.827004 36.2128637 5.292649-6.3140378c3.064165 2.5070444 6.871159 4.2712609 10.771005 4.2712609 3.899847 0 5.664064-1.485656 5.664064-3.5284329 0-2.8784584-2.414191-3.6212864-6.221184-5.1997958l-5.29265-2.2284839c-4.456968-1.671363-8.635375-5.1069423-8.635375-11.0495661 0-6.6854518 6.035477-12.0709546 14.856559-12.0709546 4.921236 0 9.842471 1.85706993 13.463758 5.29264931l-4.642675 5.75691679c-2.878459-2.04277693-5.385503-3.15701889-9.378203-3.15701889-3.064166 0-5.106943 1.20709546-5.106943 3.62128639 0 2.4141909 2.692752 3.3427259 6.592598 4.8283818l4.921236 2.1356304c5.292649 1.9499235 8.635375 5.2926493 8.635375 11.0495661 0 6.7783053-5.664063 12.5352221-15.692241 12.5352221-5.199796-.0928535-10.863859-2.1356304-15.227973-5.9426238z"/><path d="m260.639765 33.6129658h9.471057v-25.1632976h-9.471057v-7.70684023h28.13461v7.70684023h-9.471057v25.1632976h9.471057v7.7068402h-28.13461z"/><path d="m296.109801 21.2634507c0-13.55661048 8.263961-21.2634507 18.756406-21.2634507 5.478357 0 9.28535 2.50704441 11.885248 5.19979581l-5.014089 5.66406329c-1.764216-1.76421643-3.621286-2.87845839-6.778305-2.87845839-5.29265 0-9.28535 4.92123529-9.28535 12.99948959 0 8.3568147 3.249872 13.1851965 9.656764 13.1851965 1.485656 0 3.064165-.4642675 3.899847-1.2070955v-6.9640122h-5.849771v-7.5211333h14.113732v18.6635529c-2.692752 2.5070444-7.521133 4.9212353-12.720929 4.9212353-10.399592 0-18.663553-7.1497192-18.663553-20.7991833z"/><path d="m334.829709.74282797h9.378203l8.542522 20.14920883 3.435579 8.9139356h.185707c-.371414-4.2712608-1.299949-9.9353241-1.299949-14.7637059v-14.29943853h8.728229v40.57697803h-9.378203l-8.542522-20.2420623-3.435579-8.8210821h-.185707c.371414 4.4569678 1.299949 9.9353241 1.299949 14.6708524v14.392292h-8.728229z"/></g></g></svg>

package/src/style/colors.less

@@ -0,0 +1,26 @@
+@import './shared.less';
+
+.generate-color-range(@name, @color, @saturationOffset: 0) {
+  @selectors: range(0, 1000, 50);
+  @hue: hue(@color);
+  @saturation: saturation(@color) + @saturationOffset;
+  each(@selectors, {
+    @lightness: 100% - (@value / 10) + 2.5;
+    --color-@{name}-@{value}: hsl(@hue, @saturation, @lightness) ;
+  });
+}
+
+:root {
+  .generate-color-range(primary, @color: @colorPrimary);
+  .generate-color-range(error, @color: @colorError);
+  .generate-color-range(success, @color: @colorSuccess);
+  .generate-color-range(warning, @color: @colorWarning);
+  .generate-color-range(info, @color: @colorInfo);
+  .generate-color-range(neutral, @color: @colorNeutral, @saturationOffset: -15%);
+
+  .generate-color-range(primary-muted, @color: @colorPrimary, @saturationOffset: -25%);
+  .generate-color-range(error-muted, @color: @colorError, @saturationOffset: -25%);
+  .generate-color-range(success-muted, @color: @colorSuccess, @saturationOffset: -25%);
+  .generate-color-range(warning-muted, @color: @colorWarning, @saturationOffset: -25%);
+  .generate-color-range(info-muted, @color: @colorInfo, @saturationOffset: -25%);
+}

package/src/style/external.less

@@ -0,0 +1,10 @@
+@import './fonts.less';
+@import './reset/reset.less';
+
+@import '../components/top-bar/top-bar.module.less';
+@import '../components/form/form.module.less';
+@import '../components/card/card.module.less';
+@import '../components/button/button.module.less';
+@import '../components/check-box/check-box.module.less';
+@import '../components/input/input.module.less';
+@import '../components/message/message.module.less';

package/src/style/fonts.less

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: 'Lato';
+  font-weight: normal;
+  font-style: normal;
+  src: url('./fonts/lato/Lato-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-weight: bold;
+  font-style: normal;
+  src: url('./fonts/lato/Lato-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-weight: normal;
+  font-style: italic;
+  src: url('./fonts/lato/Lato-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-weight: bold;
+  font-style: italic;
+  src: url('./fonts/lato/Lato-BoldItalic.woff2') format('woff2');
+}

package/src/style/global.less

@@ -0,0 +1,51 @@
+@import './variables.less';
+@import './fonts.less';
+@import './reset/reset.less';
+
+@import '../components/form/form.module.less';
+
+html {
+  font-size: 14px;
+}
+
+body {
+  color: var(--color-text);
+  // background-color: var(--color-background);
+  line-height: 1.4285em;
+  font-family: @default_font;
+  font-size: 14px;
+}
+
+.dark {
+  color: var(--color-text);
+  // background-color: var(--color-background);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  line-height: 1.285714em;
+  margin: 0 0 1rem;
+}
+
+p,
+ul,
+ol {
+  margin: 0 0 1rem;
+  line-height: 1.4285em;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+ul,
+ol {
+  padding-left: 1.5em;
+}
+
+a {
+  text-decoration: none;
+}