@kvdbil/components 3.3.5-0 → 3.3.5-5

package/esm/theme.js

@@ -0,0 +1,121 @@
+const theme = {
+    typography: {
+        fontBaseFamily: "'Open Sans', sans-serif",
+        fontAlternativeFamily: "'Next Book', sans-serif",
+        fontBaseRegularWeight: 400,
+        fontBaseBoldWeight: 600,
+        fontAlternativeRegularWeight: 400,
+        fontAlternativeBoldWeight: 700,
+    },
+    colors: {
+        primary: {
+            darker: '#d98500',
+            dark: '#e8a100',
+            main: '#f5b400',
+            light: '#f7cf57',
+            lighter: '#fce5ab',
+            lighter2: '#fff7e5',
+        },
+        secondary: {
+            darker: '#00474d',
+            dark: '#007069',
+            main: '#2a9d8f',
+            light: '#6bb8a6',
+            lighter: '#bae3cc',
+            lighter2: '#e5f5ed',
+        },
+        tertiary: {
+            darker: '#5e2636',
+            dark: '#a63640',
+            main: '#ef5b5b',
+            light: '#f5968a',
+            lighter: '#f5c7bf',
+            lighter2: '#fcedeb',
+        },
+        info: {
+            darker: '#17395d',
+            dark: '#004773',
+            main: '#007ab8',
+            light: '#57c2ff',
+            lighter: '#abe0ff',
+            lighter2: '#e5f5ff',
+        },
+        success: {
+            darker: '#175c36',
+            dark: '#269940',
+            main: '#59d771',
+            light: '#91e5a1',
+            lighter: '#c7f2cf',
+            lighter2: '#edfaf0',
+        },
+        warning: {
+            darker: '#d98500',
+            dark: '#e8a100',
+            main: '#f5b400',
+            light: '#f7cf57',
+            lighter: '#fce5ab',
+            lighter2: '#fff7e5',
+        },
+        error: {
+            darker: '#5e2636',
+            dark: '#a63640',
+            main: '#ef5b5b',
+            light: '#f5968a',
+            lighter: '#f5c7bf',
+            lighter2: '#fcedeb',
+        },
+        neutral: {
+            darker: '#1a2030',
+            dark: '#1a2030',
+            main: '#1a2030',
+            light: '#474d59',
+            lighter: '#5e6369',
+            lighte2: '#707378',
+        },
+        text: {
+            dark: '#1a2030',
+            light: '#ffffff',
+            disabled: '#5e6369',
+        },
+        background: {
+            dark: '#1a2030',
+            gray: '#f2f2f2',
+            sand: '#f2efe6',
+            light: '#ffffff',
+        },
+        common: {
+            black: '#000000',
+            white: '#ffffff',
+            purple: {
+                darker: '#42214f',
+                dark: '#732e70',
+                main: '#a13d8f',
+                light: '#c27db5',
+                lighter: '#e0bfd9',
+                lighter2: '#f5edf2',
+            },
+        },
+        gray: {
+            dark1: '#1a2030',
+            dark2: '#303842',
+            dark3: '#474d59',
+            dark4: '#5e6369',
+            dark5: '#707378',
+            light1: '#8c8f91',
+            light2: '#a3a6a8',
+            light3: '#c7c7c4',
+            light4: '#d9d9d6',
+            light5: '#e8e8e8',
+            light6: '#f2f2f2',
+        },
+    },
+    elevations: {
+        elevation2: '0px 1px 5px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)',
+        elevation4: '0px 1px 10px rgba(0, 0, 0, 0.15), 0px 4px 5px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)',
+        elevation8: '0px 4px 5px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.09), 0px 8px 10px rgba(0, 0, 0, 0.1)',
+        elevation16: '0px 8px 10px rgba(0, 0, 0, 0.15), 0px 6px 30px rgba(0, 0, 0, 0.09), 0px 16px 24px rgba(0, 0, 0, 0.1)',
+        elevation24: '0px 11px 15px rgba(0, 0, 0, 0.15), 0px 9px 46px rgba(0, 0, 0, 0.09), 0px 24px 38px rgba(0, 0, 0, 0.1)',
+    },
+};
+
+export { theme as default };

package/esm/typography/BodyText/index.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
+
+const BodyTextStylePrimary = css `
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  font-weight: ${({ theme }) => theme.typography.fontBaseRegularWeight};
+`;
+const StyledBodyText = styled.p `
+  ${BodyTextStylePrimary}
+  font-feature-settings: 'lnum' on;
+`;
+const Quote = styled(StyledBodyText) `
+  font-family: Georgia, Cambria, Cochin, Times, 'Times New Roman', serif;
+  font-style: italic;
+`;
+const BodyTextStyle = css `
+  ${BodyTextStylePrimary}
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
+const BodyText = styled(StyledBodyText) `
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
+const BodyLink = styled(BodyText) `
+  font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+`;
+const CaptionStyle = css `
+  ${BodyTextStylePrimary}
+  font-size: 0.81rem;
+  line-height: 1.5rem;
+`;
+const Caption = styled(StyledBodyText) `
+  font-size: 0.81rem;
+  line-height: 1.5rem;
+`;
+const CaptionLink = styled(Caption) `
+  font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+`;
+const Status = styled(StyledBodyText) `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  text-transform: uppercase;
+`;
+const BodyTexts = () => jsx("div", {}, void 0);
+
+export { BodyLink, BodyText, BodyTextStyle, BodyTexts, Caption, CaptionLink, CaptionStyle, Quote, Status, StyledBodyText, BodyTexts as default };

package/esm/typography/ButtonText/index.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
+
+const BasicButtonTextStyle = css `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+`;
+const StyledButtonText = styled.span `
+  ${BasicButtonTextStyle}
+`;
+const ButtonLargeTextStyle = css `
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+`;
+const ButtonLarge = styled(StyledButtonText) `
+  ${ButtonLargeTextStyle}
+`;
+const ButtonRegularTextStyle = css `
+  font-size: 1rem;
+  line-height: 1rem;
+`;
+const Button = styled(StyledButtonText) `
+  ${ButtonRegularTextStyle}
+`;
+const ButtonSmallTextStyle = css `
+  font-size: 0.81rem;
+  line-height: 0.81rem;
+`;
+const ButtonSmall = styled(StyledButtonText) `
+  ${ButtonSmallTextStyle}
+`;
+const Buttons = () => jsx("div", {}, void 0);
+
+export { BasicButtonTextStyle, Button, ButtonLarge, ButtonLargeTextStyle, ButtonRegularTextStyle, ButtonSmall, ButtonSmallTextStyle, Buttons as default };

package/esm/typography/Heading/index.js

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { mq } from '../../shared/media-queries.js';
+
+const StyledHeading = styled.p `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+`;
+const StyledDisplay = styled(StyledHeading) `
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+`;
+const Display3 = styled(StyledDisplay) `
+  font-size: 2rem;
+  line-height: 3rem;
+
+  ${mq('laptop')} {
+    font-size: 3.75rem;
+    line-height: 4.5rem;
+  }
+`;
+const Display2 = styled(StyledDisplay) `
+  font-size: 1.81rem;
+  line-height: 2.5rem;
+
+  ${mq('laptop')} {
+    font-size: 3rem;
+    line-height: 4rem;
+  }
+`;
+const Display1 = styled(StyledDisplay) `
+  font-size: 1.63rem;
+  line-height: 2.5rem;
+
+  ${mq('laptop')} {
+    font-size: 2.5rem;
+    line-height: 3.5rem;
+  }
+`;
+const Headline = styled(StyledHeading) `
+  font-size: 1.44rem;
+  line-height: 2rem;
+
+  ${mq('laptop')} {
+    font-size: 2rem;
+    line-height: 3rem;
+  }
+`;
+const Title = styled(StyledHeading) `
+  font-size: 1.25rem;
+  line-height: 2rem;
+
+  ${mq('laptop')} {
+    font-size: 1.56rem;
+    line-height: 2.5rem;
+  }
+`;
+const Subtitle = styled(StyledHeading) `
+  font-size: 1.125rem;
+  line-height: 2rem;
+
+  ${mq('laptop')} {
+    font-size: 1.25rem;
+  }
+`;
+const TinyTitle = styled(StyledHeading) `
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+`;
+const Rubric = styled(StyledHeading) `
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
+const Headings = () => jsx("div", {}, void 0);
+
+export { Display1, Display2, Display3, Headline, Rubric, Subtitle, TinyTitle, Title, Headings as default };

package/esm/utils/utils.js

@@ -0,0 +1,32 @@
+import { css } from 'styled-components';
+
+const getLuminosity = (hexColor) => {
+    let red = 0;
+    let green = 0;
+    let blue = 0;
+    if (hexColor.length === 4) {
+        red = parseInt('0x' + hexColor[1] + hexColor[1]);
+        green = parseInt('0x' + hexColor[2] + hexColor[2]);
+        blue = parseInt('0x' + hexColor[3] + hexColor[3]);
+    }
+    else if (hexColor.length === 7) {
+        red = parseInt('0x' + hexColor[1] + hexColor[2]);
+        green = parseInt('0x' + hexColor[3] + hexColor[4]);
+        blue = parseInt('0x' + hexColor[5] + hexColor[6]);
+    }
+    return (((Math.max(Number(red / 255), Number(green / 255), Number(blue / 255)) +
+        Math.min(Number(red / 255), Number(green / 255), Number(blue / 255))) /
+        2) *
+        100);
+};
+const resetButtonStyle = css `
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  outline: none;
+  padding: 0;
+`;
+
+export { getLuminosity, resetButtonStyle };

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@kvdbil/components",
-  "version": "3.3.5-0",
-  "main": "kvdbil-components.js",
-  "types": "index.d.ts",
+  "version": "3.3.5-5",
+  "sideEffects": false,
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
   "scripts": {
     "start": "yarn storybook",
     "test": "CI=true react-scripts test",
@@ -17,7 +19,7 @@
     "build-storybook": "build-storybook -s ./public",
     "updateSnapshots": "yarn test -u",
     "analyze": "rollup -c rollup.config.analyze.js",
-    "create-declaration": "yarn tsc --emitDeclarationOnly --noEmit false"
+    "create-declaration": "yarn tsc --emitDeclarationOnly --noEmit false --declaration true --declarationDir dist/types"
   },
   "peerDependencies": {
     "react": ">= 17.0.0",
@@ -90,6 +92,7 @@
     "rollup": "^2.56.3",
     "rollup-plugin-esbuild": "^4.5.0",
     "rollup-plugin-import-css": "^3.0.0",
+    "rollup-plugin-multi-input": "^1.3.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^5.5.2",
     "standard-version": "^9.3.1",
@@ -106,8 +109,5 @@
   "author": "",
   "license": "ISC",
   "homepage": "https://bitbucket.org/kvarndammen/kvdbil-components#readme",
-  "dependencies": {
-    "rollup-plugin-multi-input": "^1.3.1",
-    "the-answer": "^1.0.0"
-  }
+  "dependencies": {}
 }