initial commit

src/utils/styles/colors.js

@@ -0,0 +1,34 @@
+// Verdaccio
+// -------------------------
+
+// Main colors
+// -------------------------
+const colors = {
+    black: '#000',
+    white: '#fff',
+    red: '#d32f2f',
+    grey: '#808080',
+    greySuperLight: '#f5f5f5',
+    greyLight: '#d3d3d3',
+    greyDark: '#a9a9a9',
+    greyChateau: '#95989a',
+    greyGainsboro: '#e3e3e3',
+    greyAthens: '#d3dddd',
+
+    eclipse: '#3c3c3c',
+    paleNavy: '#e4e8f1',
+    saltpan: '#f7f8f6',
+    snow: '#f9f9f9',
+
+    nobel01: '#999999',
+    nobel02: '#9f9f9f',
+
+    // Main colors
+    // -------------------------
+
+    primary: '#4b5e40',
+    secondary: '#20232a',
+
+};
+
+export default colors;

src/utils/styles/global.js

@@ -0,0 +1,27 @@
+import { injectGlobal } from 'emotion';
+import { fontFamilyBase } from './fonts';
+import { fontSize, fontWeight } from './sizes';
+import { textColor } from './colors';
+
+export default injectGlobal`
+    html,
+    body {
+        height: 100%;
+    }
+
+    body {
+        font-family: ${fontFamilyBase};
+        font-size: ${fontSize.base};
+        color: ${textColor};
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    strong {
+        font-weight: ${fontWeight.semiBold};
+    }
+`;

src/utils/styles/media.js

@@ -0,0 +1,29 @@
+import { css } from 'emotion';
+
+const breakpoints = {
+  small: 576,
+  medium: 768,
+  large: 1024,
+  xlarge: 1275,
+};
+
+const mq = Object.keys(breakpoints).reduce(
+  (accumulator, label) => {
+    const prefix =
+      typeof breakpoints[label] === 'string'
+        ? ''
+        : 'min-width:';
+    const suffix =
+      typeof breakpoints[label] === 'string' ? '' : 'px';
+    accumulator[label] = cls =>
+      css`
+        @media (${prefix + breakpoints[label] + suffix}) {
+          ${cls};
+        }
+      `;
+    return accumulator;
+  },
+  {}
+);
+
+export default mq;

src/utils/styles/mixings.js

@@ -0,0 +1,45 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+/**
+ * CSS to represent truncated text with an ellipsis.
+ */
+export function ellipsis(width: string | number) {
+  return {
+    display: 'inline-block',
+    maxWidth: width,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    wordWrap: 'normal',
+  };
+}
+
+/**
+ * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
+ */
+interface SpacingShortHand<type> {
+  top?: type;
+  right?: type;
+  bottom?: type;
+  left?: type;
+}
+
+const positionMap = ['Top', 'Right', 'Bottom', 'Left'];
+
+export function spacing(property: 'padding' | 'margin', ...values: Array<SpacingShortHand<number | string>>) {
+  const [firstValue = 0, secondValue = 0, thirdValue = 0, fourthValue = 0] = values;
+  const valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
+  let styles = {};
+  for (let i = 0; i < valuesWithDefaults.length; i += 1) {
+    if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
+      styles = {
+        ...styles,
+        [`${property}${positionMap[i]}`]: valuesWithDefaults[i],
+      };
+    }
+  }
+  return styles;
+}

src/utils/styles/sizes.js

@@ -0,0 +1,23 @@
+
+export const fontSize = {
+    xxl: '26px',
+    xl: '24px',
+    lg: '21px',
+    md: '18px',
+    base: '16px',
+    sm: '14px',
+};
+
+export const lineHeight = {
+    xl: '30px',
+    sm: '18px',
+    xs: '2',
+    xxs: '1.5',
+};
+
+export const fontWeight = {
+  light: 300,
+  regular: 400,
+  semiBold: 500,
+  bold: 700,
+};

src/utils/styles/spacings.js

@@ -0,0 +1,6 @@
+// Spacings
+// -------------------------
+
+export const spacings = {
+    lg: '30px',
+};