orcs-design-system 3.2.4 → 3.2.6

package/es/GlobalStyles.js

@@ -3,35 +3,5 @@ import { themeGet } from "@styled-system/theme-get";
 // GLOBAL STYLES
 // For browser reset, setting global box sizing and font sizing etc.
 
-var GlobalStyles = createGlobalStyle(["html{box-sizing:border-box;line-height:1.15;line-height:calc(2px + 2ex + 2px);}html *{line-height:calc(2px + 2ex + 2px);}*,*:before,*:after{box-sizing:inherit;}html,body{height:100%;width:100%;margin:", ";}body{font-family:", ";color:", ";}html{font-size:62.5%;}body{font-size:", ";}main{display:flex;align-items:stretch;align-content:stretch;width:100%;}section{height:", ";width:100%;overflow-y:scroll;}img{border-style:none;}small{font-size:80%;}p{margin:", ";}h1,h2,h3,h4,h5,h6{font-weight:", ";font-family:", ";margin:", ";}h1{font-size:", "}h2{font-size:", "}h3{font-size:", "}h4{font-size:", "}h5{font-size:", "}h6{font-size:", "}a,p,small,li,h1,h2,h3,h4,h5,h6{word-break:break-word;}"], function (props) {
-  return themeGet("space.0")(props);
-}, function (props) {
-  return themeGet("fonts.main")(props);
-}, function (props) {
-  return themeGet("colors.greyDarkest")(props);
-}, function (props) {
-  return themeGet("fontSizes.2")(props);
-}, function (props) {
-  return themeGet("appScale.navBarSize")(props);
-}, function (props) {
-  return themeGet("space.0")(props);
-}, function (props) {
-  return themeGet("fontWeights.1")(props);
-}, function (props) {
-  return themeGet("fonts.main")(props);
-}, function (props) {
-  return themeGet("space.0")(props);
-}, function (props) {
-  return themeGet("fontSizes.6")(props);
-}, function (props) {
-  return themeGet("fontSizes.5")(props);
-}, function (props) {
-  return themeGet("fontSizes.4")(props);
-}, function (props) {
-  return themeGet("fontSizes.3")(props);
-}, function (props) {
-  return themeGet("fontSizes.2")(props);
-}, function (props) {
-  return themeGet("fontSizes.1")(props);
-});
+const GlobalStyles = createGlobalStyle(["html{box-sizing:border-box;line-height:1.15;line-height:calc(2px + 2ex + 2px);}html *{line-height:calc(2px + 2ex + 2px);}*,*:before,*:after{box-sizing:inherit;}html,body{height:100%;width:100%;margin:", ";}body{font-family:", ";color:", ";}html{font-size:62.5%;}body{font-size:", ";}main{display:flex;align-items:stretch;align-content:stretch;width:100%;}section{height:", ";width:100%;overflow-y:scroll;}img{border-style:none;}small{font-size:80%;}p{margin:", ";}h1,h2,h3,h4,h5,h6{font-weight:", ";font-family:", ";margin:", ";}h1{font-size:", "}h2{font-size:", "}h3{font-size:", "}h4{font-size:", "}h5{font-size:", "}h6{font-size:", "}a,p,small,li,h1,h2,h3,h4,h5,h6{word-break:break-word;}"], props => themeGet("space.0")(props), props => themeGet("fonts.main")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("fontSizes.2")(props), props => themeGet("appScale.navBarSize")(props), props => themeGet("space.0")(props), props => themeGet("fontWeights.1")(props), props => themeGet("fonts.main")(props), props => themeGet("space.0")(props), props => themeGet("fontSizes.6")(props), props => themeGet("fontSizes.5")(props), props => themeGet("fontSizes.4")(props), props => themeGet("fontSizes.3")(props), props => themeGet("fontSizes.2")(props), props => themeGet("fontSizes.1")(props));
 export default GlobalStyles;

package/es/SystemThemeProvider.js

@@ -3,11 +3,17 @@ import PropTypes from "prop-types";
 import { ThemeProvider } from "styled-components";
 import { default as GlobalStyles } from "./GlobalStyles";
 import systemtheme from "./systemtheme";
-var SystemThemeProvider = function SystemThemeProvider(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: systemtheme
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyles, null), children));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SystemThemeProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: systemtheme,
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(GlobalStyles, {}), children]
+    })
+  });
 };
 SystemThemeProvider.propTypes = {
   children: PropTypes.node

package/es/assets/Colour/Colour.stories.js

@@ -0,0 +1,211 @@
+import React from "react";
+import { Colour } from ".";
+import Flex from "../../components/Flex";
+import Box from "../../components/Box";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "System/Colour" // Title of your story section
+};
+export const BlackOpacityScale = () => /*#__PURE__*/_jsxs(Flex, {
+  justifyContent: "center",
+  children: [/*#__PURE__*/_jsx(Colour, {
+    bg: "black"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "black90"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "black80"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "black70"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "black60"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "black50"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "black40"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "black30"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "black20"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "black10"
+  })]
+});
+export const WhiteOpacityScale = () => /*#__PURE__*/_jsx(Box, {
+  bg: "greyDarkest",
+  padding: "6",
+  children: /*#__PURE__*/_jsxs(Flex, {
+    justifyContent: "center",
+    children: [/*#__PURE__*/_jsx(Colour, {
+      bg: "white"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "white90"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "white80"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "white70"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "white60"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "white50"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "white40"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "white30"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "white20"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "white10"
+    })]
+  })
+});
+export const PrimaryOpacityScale = {
+  render: () => /*#__PURE__*/_jsxs(Flex, {
+    justifyContent: "center",
+    children: [/*#__PURE__*/_jsx(Colour, {
+      bg: "primary"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "primary90"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "primary80"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "primary70"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "primary60"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "primary50"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "primary40"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "primary30"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "primary20"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "primary10"
+    })]
+  }),
+  name: "Primary Opacity Scale"
+};
+export const SecondaryOpacityScale = {
+  render: () => /*#__PURE__*/_jsxs(Flex, {
+    justifyContent: "center",
+    children: [/*#__PURE__*/_jsx(Colour, {
+      bg: "secondary"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "secondary90"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "secondary80"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "secondary70"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "secondary60"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "secondary50"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "secondary40"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "secondary30"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "secondary20"
+    }), /*#__PURE__*/_jsx(Colour, {
+      bg: "secondary10"
+    })]
+  }),
+  name: "Secondary Opacity Scale"
+};
+export const SuccessOpacityScale = () => /*#__PURE__*/_jsxs(Flex, {
+  justifyContent: "center",
+  children: [/*#__PURE__*/_jsx(Colour, {
+    bg: "success"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "success90"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "success80"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "success70"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "success60"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "success50"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "success40"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "success30"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "success20"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "success10"
+  })]
+});
+export const WarningOpacityScale = () => /*#__PURE__*/_jsxs(Flex, {
+  justifyContent: "center",
+  children: [/*#__PURE__*/_jsx(Colour, {
+    bg: "warning"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "warning90"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "warning80"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "warning70"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "warning60"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "warning50"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "warning40"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "warning30"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "warning20"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "warning10"
+  })]
+});
+export const DangerOpacityScale = () => /*#__PURE__*/_jsxs(Flex, {
+  justifyContent: "center",
+  children: [/*#__PURE__*/_jsx(Colour, {
+    bg: "danger"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "danger90"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "danger80"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "danger70"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "danger60"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "danger50"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "danger40"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "danger30"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "danger20"
+  }), /*#__PURE__*/_jsx(Colour, {
+    bg: "danger10"
+  })]
+});
+BlackOpacityScale.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "BlackOpacityScale"
+};
+WhiteOpacityScale.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "WhiteOpacityScale"
+};
+SuccessOpacityScale.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SuccessOpacityScale"
+};
+WarningOpacityScale.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "WarningOpacityScale"
+};
+DangerOpacityScale.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "DangerOpacityScale"
+};

package/es/assets/Colour/index.js

@@ -2,11 +2,11 @@ import styled from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import { css } from "styled-components";
-export var Colour = styled("div").withConfig({
-  shouldForwardProp: shouldForwardProp,
+export const Colour = styled("div").withConfig({
+  shouldForwardProp,
   displayName: "Colour",
   componentId: "sc-uyvdow-0"
-})(function (props) {
+})(props => {
   return css({
     backgroundColor: themeGet("colors.".concat(props.bg))(props),
     width: "75px",