@integrigo/integrigo-ui 1.6.8 → 1.6.10

package/src/styles/colors.ts

@@ -0,0 +1,30 @@
+export enum Color {
+  White = '#FFF',
+  Ecru = '#F9F1E5',
+  Navy = '#172142',
+  Orange = '#E09A33',
+  Red = '#CF544B',
+  Green = '#6B8B4A',
+
+  Grey100 = '#1A1A1A',
+  Grey80 = '#595959',
+  Grey60 = '#8C8C8C',
+  Grey40 = '#CCCCCC',
+  Grey20 = '#F2F2F2',
+  Grey0 = '#fff',
+
+  Success100 = '#6B8B4A',
+  Success20 = '#DDE4D7',
+  Success10 = '#ECEFE8',
+
+  Error100 = '#CF544B',
+  Error20 = '#FFCCCC',
+  Error10 = '#FFF5F5',
+}
+
+export enum ShadesOfGrey {
+}
+
+export enum SuccessColors {
+
+}

package/src/styles/global.ts

@@ -0,0 +1,94 @@
+import { createGlobalStyle } from 'styled-components';
+import { Color } from './colors';
+
+export const GlobalStyles = createGlobalStyle`
+@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,600;0,700;0,800;1,200;1,300;1,600;1,700;1,800&display=swap');
+
+  html {
+    --color-white: ${Color.White};
+    --color-ecru: ${Color.Ecru};
+    --color-navy: ${Color.Navy};
+    --color-orange: ${Color.Orange};
+    --color-red: ${Color.Red};
+    --color-green: ${Color.Green};
+
+    --shades-of-grey-100: ${Color.Grey100};
+    --shades-of-grey-80: ${Color.Grey80};
+    --shades-of-grey-60: ${Color.Grey60};
+    --shades-of-grey-40: ${Color.Grey40};
+    --shades-of-grey-20: ${Color.Grey20};
+    --shades-of-grey-0: ${Color.Grey0};
+
+    --color-success-100: ${Color.Success100};
+    --color-success-20: ${Color.Success20};
+    --color-success-10: ${Color.Success10};
+
+    --color-error-100: ${Color.Error100};
+    --color-error-20: ${Color.Error20};
+    --color-error-10: ${Color.Error10};
+
+    --color-orange-80: ${Color.Orange}80;
+    --color-orange-65: ${Color.Orange}65;
+
+    --padding-s: 8px;
+    --padding-m: 16px;
+    --padding-l: 24px;
+    --padding-xl: 32px;
+    --padding-xxl: 48px;
+
+    --font-bold: 700;
+    --font-medium: 600;
+    --font-thin: 300;
+
+    --font-size-s: 10px;
+    --font-size-m: 16px;
+    --font-size-l: 20px;
+    --font-size-xl: 32px;
+    --font-size-xxl: 40px;
+
+    --header-size-s: 16px;
+    --header-size-m: 24px;
+    --header-size-l: 32px;
+    --header-size-xl: 48px;
+    --header-size-xxl: 72px;
+
+    --transition-speed: .3s;
+  }
+
+  body {
+    background-color: var(--color-ecru);
+  }
+
+  * {
+    box-sizing: border-box;
+    color: var(--color-navy);
+    font-family: Raleway, Arial, Helvetica, Sans-Serif;
+    font-size: var(--font-size-m);
+    font-weight: var(--font-thin);
+  }
+
+  h1 {
+    font-size: var(--header-size-xxl);
+    font-weight: var(--font-bold);
+  }
+
+  h2 {
+    font-size: var(--header-size-xl);
+    font-weight: var(--font-bold);
+  }
+
+  h3 {
+    font-size: var(--header-size-l);
+    font-weight: var(--font-bold);
+  }
+
+  h4 {
+    font-size: var(--header-size-m);
+    font-weight: var(--font-bold);
+  }
+
+  h5 {
+    font-size: var(--header-size-s);
+    font-weight: var(--font-bold);
+  }
+`;

package/src/styles/index.ts

@@ -0,0 +1,2 @@
+export { GlobalStyles } from './global';
+export { Color, ShadesOfGrey } from './colors';

package/src/types/validation.ts

@@ -0,0 +1 @@
+export type ValidationType = 'success' | 'error';